refactor(prompts): Use query parameters for datasetId and exampleId (#…

…6091) This prevents data-loss from re-parenting playground on a new route Before: /prompts/1234/playground -> click dataset -> /playground/datasets/9876 Causes remount, data loss After: /prompts/1234/playground -> click dataset -> /prompts/1234/playground?datasetId="9876" No remount, no data loss, just state updates
Arize-ai · Jan 16, 2025 · 476525c · 476525c
1 parent 046b601
commit 476525c
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 36 deletions.
diff --git a/app/src/Routes.tsx b/app/src/Routes.tsx
@@ -6,7 +6,6 @@ import { datasetLoaderQuery$data } from "./pages/dataset/__generated__/datasetLo
 import { embeddingLoaderQuery$data } from "./pages/embedding/__generated__/embeddingLoaderQuery.graphql";
 import { Layout } from "./pages/Layout";
 import { spanPlaygroundPageLoaderQuery$data } from "./pages/playground/__generated__/spanPlaygroundPageLoaderQuery.graphql";
-import { PlaygroundExamplePage } from "./pages/playground/PlaygroundExamplePage";
 import { projectLoaderQuery$data } from "./pages/project/__generated__/projectLoaderQuery.graphql";
 import { promptLoaderQuery$data } from "./pages/prompt/__generated__/promptLoaderQuery.graphql";
 import { promptConfigLoader } from "./pages/prompt/promptConfigLoader";
@@ -188,12 +187,6 @@ const router = createBrowserRouter(
             }}
           >
             <Route index element={<PlaygroundPage />} />
-            <Route path="datasets/:datasetId" element={<PlaygroundPage />}>
-              <Route
-                path="examples/:exampleId"
-                element={<PlaygroundExamplePage />}
-              />
-            </Route>
             <Route
               path="spans/:spanId"
               element={<SpanPlaygroundPage />}

diff --git a/app/src/pages/example/ExampleDetailsDialog.tsx b/app/src/pages/example/ExampleDetailsDialog.tsx
@@ -116,7 +116,7 @@ export function ExampleDetailsDialog({
         }
       >
         <PanelGroup direction="vertical" autoSaveId="example-panel-group">
-          <Panel defaultSize={200}>
+          <Panel defaultSize={65}>
             <div
               css={css`
                 overflow-y: auto;
@@ -159,7 +159,7 @@ export function ExampleDetailsDialog({
             </div>
           </Panel>
           <PanelResizeHandle css={resizeHandleCSS} />
-          <Panel defaultSize={100}>
+          <Panel defaultSize={35}>
             <Flex direction="column" height="100%">
               <View
                 paddingStart="size-200"

diff --git a/app/src/pages/experiment/ExperimentCompareTable.tsx b/app/src/pages/experiment/ExperimentCompareTable.tsx
@@ -771,7 +771,7 @@ function SelectedExampleDialog({
       }
     >
       <PanelGroup direction="vertical" autoSaveId="example-compare-panel-group">
-        <Panel defaultSize={100}>
+        <Panel defaultSize={35}>
           <div
             css={css`
               overflow-y: auto;
@@ -829,7 +829,7 @@ function SelectedExampleDialog({
           </div>
         </Panel>
         <PanelResizeHandle css={resizeHandleCSS} />
-        <Panel defaultSize={200}>
+        <Panel defaultSize={65}>
           <Flex direction="column" height="100%">
             <View
               paddingStart="size-200"

diff --git a/app/src/pages/playground/Playground.tsx b/app/src/pages/playground/Playground.tsx
@@ -1,13 +1,7 @@
 import React, { Suspense, useCallback, useEffect } from "react";
 import { graphql, useLazyLoadQuery } from "react-relay";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
-import {
-  BlockerFunction,
-  Outlet,
-  useBlocker,
-  useParams,
-  useSearchParams,
-} from "react-router-dom";
+import { BlockerFunction, useBlocker, useSearchParams } from "react-router-dom";
 import { css } from "@emotion/react";
 
 import {
@@ -32,6 +26,7 @@ import {
   usePlaygroundContext,
 } from "@phoenix/contexts/PlaygroundContext";
 import { usePreferencesContext } from "@phoenix/contexts/PreferencesContext";
+import { PlaygroundExamplePage } from "@phoenix/pages/playground/PlaygroundExamplePage";
 import { PlaygroundProps } from "@phoenix/store";
 
 import { PlaygroundQuery } from "./__generated__/PlaygroundQuery.graphql";
@@ -131,7 +126,7 @@ export function Playground(props: Partial<PlaygroundProps>) {
         <PlaygroundContent />
       </div>
       <Suspense>
-        <Outlet />
+        <PlaygroundExamplePage />
       </Suspense>
     </PlaygroundProvider>
   );
@@ -215,7 +210,8 @@ function PlaygroundContent() {
   const templateLanguage = usePlaygroundContext(
     (state) => state.templateLanguage
   );
-  const { datasetId } = useParams<{ datasetId: string }>();
+  const [searchParams] = useSearchParams();
+  const datasetId = searchParams.get("datasetId");
   const isDatasetMode = datasetId != null;
   const numInstances = instances.length;
   const isSingleInstance = numInstances === 1;

diff --git a/app/src/pages/playground/PlaygroundDatasetExamplesTable.tsx b/app/src/pages/playground/PlaygroundDatasetExamplesTable.tsx
@@ -17,7 +17,7 @@ import {
   usePaginationFragment,
   useRelayEnvironment,
 } from "react-relay";
-import { useNavigate } from "react-router";
+import { useSearchParams } from "react-router-dom";
 import {
   CellContext,
   ColumnDef,
@@ -440,7 +440,7 @@ export function PlaygroundDatasetExamplesTable({
   );
 
   const [dialog, setDialog] = useState<ReactNode>(null);
-  const navigate = useNavigate();
+  const [, setSearchParams] = useSearchParams();
   const hasSomeRunIds = instances.some(
     (instance) => instance.activeRunId !== null
   );
@@ -800,9 +800,10 @@ export function PlaygroundDatasetExamplesTable({
                   aria-label="View example details"
                   icon={<Icon svg={<Icons.ExpandOutline />} />}
                   onPress={() => {
-                    navigate(
-                      `/playground/datasets/${datasetId}/examples/${row.original.id}`
-                    );
+                    setSearchParams((prev) => {
+                      prev.set("exampleId", row.original.id);
+                      return prev;
+                    });
                   }}
                 />
                 <Tooltip>View Example</Tooltip>

diff --git a/app/src/pages/playground/PlaygroundDatasetPicker.tsx b/app/src/pages/playground/PlaygroundDatasetPicker.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { useNavigate, useParams } from "react-router";
+import { useSearchParams } from "react-router-dom";
 import { css } from "@emotion/react";
 
 import { Button, Icon, Icons } from "@phoenix/components";
@@ -31,9 +31,8 @@ const playgroundDatasetPickerCSS = css`
 `;
 
 export function PlaygroundDatasetPicker() {
-  const navigate = useNavigate();
-  const { datasetId } = useParams<{ datasetId: string }>();
-  const selectedDatasetId = datasetId ?? "";
+  const [searchParams, setSearchParams] = useSearchParams();
+  const selectedDatasetId = searchParams.get("datasetId") ?? "";
 
   return (
     <div css={playgroundDatasetPickerCSS}>
@@ -43,17 +42,26 @@ export function PlaygroundDatasetPicker() {
         selectedKey={selectedDatasetId}
         onSelectionChange={(datasetId) => {
           if (selectedDatasetId !== null && datasetId === selectedDatasetId) {
-            navigate("/playground");
+            setSearchParams((prev) => {
+              prev.delete("datasetId");
+              return prev;
+            });
             return;
           }
-          navigate(`/playground/datasets/${datasetId}`);
+          setSearchParams((prev) => {
+            prev.set("datasetId", String(datasetId));
+            return prev;
+          });
         }}
       />
       <Button
         size="S"
         icon={<Icon svg={<Icons.CloseOutline />} />}
         onPress={() => {
-          navigate("/playground");
+          setSearchParams((prev) => {
+            prev.delete("datasetId");
+            return prev;
+          });
         }}
       />
     </div>

diff --git a/app/src/pages/playground/PlaygroundExamplePage.tsx b/app/src/pages/playground/PlaygroundExamplePage.tsx
@@ -1,19 +1,26 @@
 import React from "react";
-import { useNavigate, useParams } from "react-router";
+import { useSearchParams } from "react-router-dom";
 
 import { ExampleDetailsDialog } from "../example/ExampleDetailsDialog";
 
 /**
  * A page that shows the details of a dataset example.
  */
 export function PlaygroundExamplePage() {
-  const { exampleId, datasetId } = useParams();
-  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const exampleId = searchParams.get("exampleId");
+  const datasetId = searchParams.get("datasetId");
+  if (!exampleId || !datasetId) {
+    return null;
+  }
   return (
     <ExampleDetailsDialog
       exampleId={exampleId as string}
       onDismiss={() => {
-        navigate(`/playground/datasets/${datasetId}`);
+        setSearchParams((prev) => {
+          prev.delete("exampleId");
+          return prev;
+        });
       }}
     />
   );