docs(annotations): add a feedback tooltip (#4116)

* docs(annotations): add a feedback tooltip * fix spelling * add tooltips to spans
Arize-ai · Aug 2, 2024 · 490ed44 · 490ed44
1 parent 5aa79c4
commit 490ed44
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 6 deletions.
diff --git a/app/src/pages/project/SpansTable.tsx b/app/src/pages/project/SpansTable.tsx
@@ -18,7 +18,15 @@ import {
 } from "@tanstack/react-table";
 import { css } from "@emotion/react";
 
-import { Flex, Icon, Icons, View } from "@arizeai/components";
+import {
+  Content,
+  ContextualHelp,
+  Flex,
+  Heading,
+  Icon,
+  Icons,
+  View,
+} from "@arizeai/components";
 
 import {
   AnnotationLabel,
@@ -185,7 +193,20 @@ export function SpansTable(props: SpansTableProps) {
 
   const annotationColumns: ColumnDef<TableRow>[] = [
     {
-      header: "feedback",
+      header: () => (
+        <Flex direction="row" gap="size-50">
+          <span>feedback</span>
+          <ContextualHelp>
+            <Heading level={3} weight="heavy">
+              Feedback
+            </Heading>
+            <Content>
+              Feedback includes evaluations and human annotations logged via the
+              API or set via the UI.
+            </Content>
+          </ContextualHelp>
+        </Flex>
+      ),
       accessorKey: "spanAnnotations",
       enableSorting: false,
 

diff --git a/app/src/pages/project/TracesTable.tsx b/app/src/pages/project/TracesTable.tsx
@@ -22,7 +22,15 @@ import {
 } from "@tanstack/react-table";
 import { css } from "@emotion/react";
 
-import { Flex, Icon, Icons, View } from "@arizeai/components";
+import {
+  Content,
+  ContextualHelp,
+  Flex,
+  Heading,
+  Icon,
+  Icons,
+  View,
+} from "@arizeai/components";
 
 import {
   AnnotationLabel,
@@ -256,9 +264,22 @@ export function TracesTable(props: TracesTableProps) {
       };
     });
 
-  const annoationColumns: ColumnDef<TableRow>[] = [
+  const annotationColumns: ColumnDef<TableRow>[] = [
     {
-      header: "feedback",
+      header: () => (
+        <Flex direction="row" gap="size-50">
+          <span>feedback</span>
+          <ContextualHelp>
+            <Heading level={3} weight="heavy">
+              Feedback
+            </Heading>
+            <Content>
+              Feedback includes evaluations and human annotations logged via the
+              API or set via the UI.
+            </Content>
+          </ContextualHelp>
+        </Flex>
+      ),
       accessorKey: "spanAnnotations",
       enableSorting: false,
       cell: ({ row }) => {
@@ -408,7 +429,7 @@ export function TracesTable(props: TracesTableProps) {
       enableSorting: false,
       cell: TextCell,
     },
-    ...annoationColumns, // TODO: consider hiding this column is there is no evals. For now show it
+    ...annotationColumns, // TODO: consider hiding this column is there is no evals. For now show it
     {
       header: "start time",
       accessorKey: "startTime",