feat(annotations): add feedback tab to span details (#4069)

* feat(nnotations): add feedback tab to span details

* add back annotations featur flag

* update prop evaluations -> annottions, remove accidental file

* remove mutable

app/src/pages/trace/SpanDetails.tsx

@@ -86,7 +86,7 @@ import {
 } from "./__generated__/SpanDetailsQuery.graphql";
 import { EditSpanAnnotationsButton } from "./EditSpanAnnotationsButton";
 import { SpanCodeDropdown } from "./SpanCodeDropdown";
-import { SpanEvaluationsTable } from "./SpanEvaluationsTable";
+import { SpanFeedback } from "./SpanFeedback";
 import { SpanToDatasetExampleDialog } from "./SpanToDatasetExampleDialog";
 
 /**
@@ -178,11 +178,6 @@ export function SpanDetails({
               message
               timestamp
             }
-            spanEvaluations {
-              name
-              label
-              score
-            }
             documentRetrievalMetrics {
               evaluationName
               ndcg
@@ -196,7 +191,10 @@ export function SpanDetails({
               score
               explanation
             }
-            ...SpanEvaluationsTable_evals
+            spanAnnotations {
+              name
+            }
+            ...SpanFeedback_annotations
           }
         }
       }
@@ -252,13 +250,13 @@ export function SpanDetails({
           <SpanInfo span={span} />
         </TabPane>
         <TabPane
-          name={"Evaluations"}
+          name={"Feedback"}
           extra={
-            <Counter variant={"light"}>{span.spanEvaluations.length}</Counter>
+            <Counter variant={"light"}>{span.spanAnnotations.length}</Counter>
           }
         >
           {(selected) => {
-            return selected ? <SpanEvaluations span={span} /> : null;
+            return selected ? <SpanFeedback span={span} /> : null;
           }}
         </TabPane>
         <TabPane name={"Attributes"} title="Attributes">
@@ -1637,10 +1635,6 @@ function SpanEventsList({ events }: { events: Span["events"] }) {
   );
 }
 
-function SpanEvaluations(props: { span: Span }) {
-  return <SpanEvaluationsTable span={props.span} />;
-}
-
 const attributesContextualHelp = (
   <Flex alignItems="center" justifyContent="center">
     <View marginStart="size-100">

app/src/pages/trace/SpanEvaluationsTable.tsx → app/src/pages/trace/SpanFeedback.tsx

@@ -6,11 +6,16 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 
+import { Accordion, AccordionItem } from "@arizeai/components";
+
 import { PreformattedTextCell } from "@phoenix/components/table";
 import { tableCSS } from "@phoenix/components/table/styles";
 import { TableEmpty } from "@phoenix/components/table/TableEmpty";
 
-import { SpanEvaluationsTable_evals$key } from "./__generated__/SpanEvaluationsTable_evals.graphql";
+import {
+  SpanFeedback_annotations$data,
+  SpanFeedback_annotations$key,
+} from "./__generated__/SpanFeedback_annotations.graphql";
 
 const columns = [
   {
@@ -36,29 +41,15 @@ const columns = [
   },
 ];
 
-export function SpanEvaluationsTable(props: {
-  span: SpanEvaluationsTable_evals$key;
+function SpanAnnotationsTable({
+  annotations,
+}: {
+  annotations: SpanFeedback_annotations$data["spanAnnotations"];
 }) {
-  const data = useFragment(
-    graphql`
-      fragment SpanEvaluationsTable_evals on Span {
-        spanEvaluations {
-          name
-          label
-          score
-          explanation
-        }
-      }
-    `,
-    props.span
-  );
-  const evaluations = useMemo(() => {
-    return [...data.spanEvaluations];
-  }, [data.spanEvaluations]);
-
+  const tableData = useMemo(() => [...annotations], [annotations]);
   const table = useReactTable({
     columns,
-    data: evaluations,
+    data: tableData,
     getCoreRowModel: getCoreRowModel(),
   });
   const rows = table.getRowModel().rows;
@@ -107,3 +98,41 @@ export function SpanEvaluationsTable(props: {
     </table>
   );
 }
+
+export function SpanFeedback({ span }: { span: SpanFeedback_annotations$key }) {
+  const data = useFragment(
+    graphql`
+      fragment SpanFeedback_annotations on Span {
+        spanAnnotations {
+          name
+          label
+          score
+          explanation
+          annotatorKind
+        }
+      }
+    `,
+    span
+  );
+
+  const humanAnnotations = useMemo(() => {
+    return data.spanAnnotations.filter(
+      (annotation) => annotation.annotatorKind === "HUMAN"
+    );
+  }, [data.spanAnnotations]);
+  const llmAnnotations = useMemo(() => {
+    return data.spanAnnotations.filter(
+      (annotation) => annotation.annotatorKind === "LLM"
+    );
+  }, [data.spanAnnotations]);
+  return (
+    <Accordion>
+      <AccordionItem id={"evaluations"} title={"Evaluations"}>
+        <SpanAnnotationsTable annotations={llmAnnotations} />
+      </AccordionItem>
+      <AccordionItem id={"human"} title={"Human Annotations"}>
+        <SpanAnnotationsTable annotations={humanAnnotations} />
+      </AccordionItem>
+    </Accordion>
+  );
+}