feat(annotations): annotations UI (#3914)

* WIP

WIP

WIP

WIP

WIP

add delete annotation functionality

WIP

lint errors

WIP

* wire up the new span annotation form

* WIP

* WIP

* add a border

* cleanup

app/src/components/dataset/CreateDatasetForm.tsx

@@ -68,7 +68,6 @@ export function CreateDatasetForm(props: CreateDatasetFormProps) {
         },
         onError: (error) => {
           // TODO(datasets): cleanup error handling to show human friendly error
-
           onDatasetCreateError(error);
         },
       });

app/src/contexts/FeatureFlagsContext.tsx

@@ -3,7 +3,7 @@ import { useHotkeys } from "react-hotkeys-hook";
 
 import { Dialog, DialogContainer, Switch, View } from "@arizeai/components";
 
-type FeatureFlag = "__CLEAR__"; // No feature flags right now
+type FeatureFlag = "annotations";
 export type FeatureFlagsContextType = {
   featureFlags: Record<FeatureFlag, boolean>;
   setFeatureFlags: (featureFlags: Record<FeatureFlag, boolean>) => void;
@@ -12,7 +12,7 @@ export type FeatureFlagsContextType = {
 export const LOCAL_STORAGE_FEATURE_FLAGS_KEY = "arize-phoenix-feature-flags";
 
 const DEFAULT_FEATURE_FLAGS: Record<FeatureFlag, boolean> = {
-  __CLEAR__: false,
+  annotations: false,
 };
 
 function getFeatureFlags(): Record<FeatureFlag, boolean> {

app/src/pages/trace/AnnotationActionMenu.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+
+import { ActionMenu, Flex, Icon, Icons, Item, Text } from "@arizeai/components";
+
+type AnnotationActionMenuProps = {
+  onDelete: () => void;
+  isDisabled?: boolean;
+};
+
+enum AnnotationAction {
+  DELETE = "deleteAnnotation",
+}
+
+/**
+ * A generic action menu for annotations that can be extended
+ */
+export function AnnotationActionMenu(props: AnnotationActionMenuProps) {
+  const { onDelete, isDisabled = false } = props;
+  return (
+    <div
+      // TODO: add this logic to the ActionMenu component
+      onClick={(e) => {
+        // prevent parent anchor link from being followed
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+    >
+      <ActionMenu
+        align="end"
+        buttonSize="compact"
+        isDisabled={isDisabled}
+        onAction={(action) => {
+          switch (action) {
+            case AnnotationAction.DELETE:
+              onDelete();
+              break;
+          }
+        }}
+      >
+        <Item key={AnnotationAction.DELETE}>
+          <Flex
+            direction="row"
+            gap="size-75"
+            justifyContent="start"
+            alignItems="center"
+          >
+            <Icon svg={<Icons.TrashOutline />} />
+            <Text>Delete</Text>
+          </Flex>
+        </Item>
+      </ActionMenu>
+    </div>
+  );
+}

app/src/pages/trace/EditSpanAnnotationsButton.tsx

@@ -0,0 +1,38 @@
+import React, { ReactNode, useState } from "react";
+
+import { Button, DialogContainer, Icon, Icons } from "@arizeai/components";
+
+import { EditSpanAnnotationsDialog } from "./EditSpanAnnotationsDialog";
+
+export function EditSpanAnnotationsButton(props: {
+  spanNodeId: string;
+  projectId: string;
+}) {
+  const { spanNodeId, projectId } = props;
+  const [dialog, setDialog] = useState<ReactNode>(null);
+  return (
+    <>
+      <Button
+        variant="default"
+        icon={<Icon svg={<Icons.EditOutline />} />}
+        onClick={() =>
+          setDialog(
+            <EditSpanAnnotationsDialog
+              spanNodeId={spanNodeId}
+              projectId={projectId}
+            />
+          )
+        }
+      >
+        Annotate
+      </Button>
+      <DialogContainer
+        type="slideOver"
+        isDismissable
+        onDismiss={() => setDialog(null)}
+      >
+        {dialog}
+      </DialogContainer>
+    </>
+  );
+}