feat: Add split edit menu to single example

app/src/pages/example/ExampleDetailsDialog.tsx

@@ -22,6 +22,8 @@ import { JSONBlock } from "@phoenix/components/code";
 import { resizeHandleCSS } from "@phoenix/components/resize";
 import { SELECTED_SPAN_NODE_ID_PARAM } from "@phoenix/constants/searchParams";
 import { useNotifySuccess } from "@phoenix/contexts";
+import { ExamplesSplitMenu } from "@phoenix/pages/examples/ExamplesSplitMenu";
+import { Mutable } from "@phoenix/typeUtils";
 
 import type { ExampleDetailsDialogQuery } from "./__generated__/ExampleDetailsDialogQuery.graphql";
 import { EditExampleButton } from "./EditExampleButton";
@@ -49,6 +51,11 @@ export function ExampleDetailsDialog({
               output
               metadata
             }
+            datasetSplits {
+              id
+              name
+              color
+            }
             span {
               id
               trace {
@@ -87,6 +94,20 @@ export function ExampleDetailsDialog({
     };
   }, [data]);
   const { input, output, metadata } = revision;
+  const examplesCache = useMemo(() => {
+    const example = data.example;
+    if (example && example.id) {
+      return {
+        [example.id]: {
+          id: example.id,
+          datasetSplits: (example.datasetSplits ?? []) as Mutable<
+            NonNullable<typeof example.datasetSplits>
+          >,
+        },
+      };
+    }
+    return {};
+  }, [data]);
   const notifySuccess = useNotifySuccess();
   return (
     <Dialog>
@@ -102,6 +123,14 @@ export function ExampleDetailsDialog({
                 View Source Span
               </LinkButton>
             ) : null}
+            <ExamplesSplitMenu
+              onSelectionChange={() => {}}
+              onExampleSelectionChange={() => {}}
+              selectedSplitIds={[]}
+              selectedExampleIds={[exampleId]}
+              examplesCache={examplesCache}
+              size="S"
+            />
             <EditExampleButton
               exampleId={exampleId as string}
               currentRevision={revision}

app/src/pages/examples/ExamplesSplitMenu.tsx

@@ -5,6 +5,7 @@ import { css } from "@emotion/react";
 import {
   Autocomplete,
   Button,
+  ButtonProps,
   Checkbox,
   Flex,
   Heading,
@@ -34,6 +35,7 @@ type ExamplesSplitMenuProps = {
   selectedSplitIds: string[];
   selectedExampleIds: string[];
   examplesCache: ExamplesCache;
+  size?: ButtonProps["size"];
 };
 
 const getInitialMode = (selectedExampleIds: string[]) => {
@@ -50,13 +52,26 @@ const getInitialMode = (selectedExampleIds: string[]) => {
  * In filter mode, the user can select splits from a list.
  * In apply mode, the user can select splits to add or remove from the selected examples.
  * In create mode, the user can create a new split.
+ *
+ * You can skip "filter" mode for single example use cases by passing in an empty array for selectedSplitIds,
+ * and pre-populating the selectedExampleIds with the single example id and examplesCache with the single example.
+ * @example
+ * <ExamplesSplitMenu
+ *   onSelectionChange={() => {}}
+ *   onExampleSelectionChange={() => {}}
+ *   selectedSplitIds={[]}
+ *   selectedExampleIds={["123"]}
+ *   // ensure this comes from relay so that it updates when the example splits are updated
+ *   examplesCache={{ "123": { id: "123", datasetSplits: [{ id: "456", name: "Split 1" }] } }}
+ * />
  */
 export const ExamplesSplitMenu = ({
   onSelectionChange,
   onExampleSelectionChange,
   selectedSplitIds,
   selectedExampleIds,
   examplesCache,
+  size,
 }: ExamplesSplitMenuProps) => {
   const [mode, setMode] = useState<"filter" | "apply" | "create">(() =>
     getInitialMode(selectedExampleIds)
@@ -87,7 +102,10 @@ export const ExamplesSplitMenu = ({
         }
       }}
     >
-      <Button leadingVisual={<Icon svg={<Icons.PriceTagsOutline />} />}>
+      <Button
+        leadingVisual={<Icon svg={<Icons.PriceTagsOutline />} />}
+        size={size}
+      >
         Splits
         {selectedSplitIds.length > 0 ? ` (${selectedSplitIds.length})` : ""}
       </Button>
@@ -247,7 +265,9 @@ const SplitMenu = ({
           >
             <Heading level={4} weight="heavy">
               {selectedExampleIds.length > 0
-                ? "Apply splits to selected examples"
+                ? selectedExampleIds.length === 1
+                  ? "Apply splits to example"
+                  : "Apply splits to selected examples"
                 : "Filter examples by splits"}
             </Heading>
             <IconButton