WIP

app/src/pages/example/EditSpanAnnotationsDialog.tsx

@@ -1,11 +1,94 @@
-import React from "react";
+import React, { Suspense } from "react";
+import { graphql, useLazyLoadQuery } from "react-relay";
 
-import { Dialog } from "@arizeai/components";
+import {
+  Button,
+  Dialog,
+  Form,
+  TextArea,
+  TextField,
+  View,
+} from "@arizeai/components";
 
-export function EditSpanAnnotationsDialog() {
+import {
+  EditSpanAnnotationsDialogQuery,
+  EditSpanAnnotationsDialogQuery$data,
+} from "./__generated__/EditSpanAnnotationsDialogQuery.graphql";
+
+type EditSpanAnnotationsDialogProps = {
+  spanNodeId: string;
+};
+export function EditSpanAnnotationsDialog(
+  props: EditSpanAnnotationsDialogProps
+) {
   return (
     <Dialog title="Span Annotations" size="L">
-      Annotations go here
+      <Suspense>
+        <EditSpanAnnotations {...props} />
+        <Button variant="default">New Annotation</Button>
+      </Suspense>
     </Dialog>
   );
 }
+
+type EditSpanAnnotationsProps = EditSpanAnnotationsDialogProps;
+function EditSpanAnnotations(props: EditSpanAnnotationsProps) {
+  const data = useLazyLoadQuery<EditSpanAnnotationsDialogQuery>(
+    graphql`
+      query EditSpanAnnotationsDialogQuery($spanId: GlobalID!) {
+        span: node(id: $spanId) {
+          id
+          ... on Span {
+            spanAnnotations {
+              name
+              score
+              label
+              explanation
+            }
+          }
+        }
+      }
+    `,
+    { spanId: props.spanNodeId }
+  );
+  const annotations = data.span.spanAnnotations || [];
+  return (
+    <div>
+      <ul>
+        {annotations.map((annotation, idx) => (
+          <li key={idx}>
+            <View borderEndWidth="thin">
+              <SpanAnnotationForm annotation={annotation} />
+            </View>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+type Annotation = NonNullable<
+  EditSpanAnnotationsDialogQuery$data["span"]["spanAnnotations"]
+>[number];
+
+function SpanAnnotationForm(props: { annotation: Annotation }) {
+  const { annotation } = props;
+  return (
+    <Form>
+      <TextField label="Name" value={annotation.name} />
+      <TextField
+        label="Score"
+        value={(annotation.score as unknown as string) || ""}
+      />
+      <TextField
+        label="Label"
+        value={(annotation.score as unknown as string) || ""}
+      />
+      <TextArea label="Explanation" value={annotation.explanation || ""} />
+      <div>{annotation.name}</div>
+      <div>{annotation.score}</div>
+      <div>{annotation.label}</div>
+      <div>{annotation.explanation}</div>
+    </Form>
+  );
+}

app/src/pages/trace/EditSpanAnnotationsButton.tsx

@@ -4,14 +4,17 @@ import { Button, DialogContainer, Icon, Icons } from "@arizeai/components";
 
 import { EditSpanAnnotationsDialog } from "../example/EditSpanAnnotationsDialog";
 
-export function EditSpanAnnotationsButton() {
+export function EditSpanAnnotationsButton(props: { spanNodeId: string }) {
+  const { spanNodeId } = props;
   const [dialog, setDialog] = useState<ReactNode>(null);
   return (
     <>
       <Button
         variant="default"
         icon={<Icon svg={<Icons.EditOutline />} />}
-        onClick={() => setDialog(<EditSpanAnnotationsDialog />)}
+        onClick={() =>
+          setDialog(<EditSpanAnnotationsDialog spanNodeId={spanNodeId} />)
+        }
       >
         Annotate
       </Button>

app/src/pages/trace/TraceDetails.tsx

@@ -457,7 +457,7 @@ function SelectedSpanDetails({ selectedSpan }: { selectedSpan: Span }) {
               traceId={selectedSpan.context.traceId}
               spanId={selectedSpan.context.spanId}
             />
-            <EditSpanAnnotationsButton />
+            <EditSpanAnnotationsButton spanNodeId={selectedSpan.id} />
             <AddSpanToDatasetButton span={selectedSpan} />
           </Flex>
         </Flex>