chore: added/removed evals reflected in URL state (#2665)

wandb · Oct 10, 2024 · 5579795 · 5579795
1 parent b931f85
commit 5579795
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 14 deletions.
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3.tsx
@@ -921,16 +921,27 @@ const OpPageBinding = () => {
 };
 
 const CompareEvaluationsBinding = () => {
+  const history = useHistory();
+  const location = useLocation();
   const {entity, project} = useParamsDecoded<Browse3TabParams>();
   const query = useURLSearchParamsDict();
   const evaluationCallIds = useMemo(() => {
     return JSON.parse(query.evaluationCallIds);
   }, [query.evaluationCallIds]);
+  const onEvaluationCallIdsUpdate = useCallback(
+    (newEvaluationCallIds: string[]) => {
+      const newQuery = new URLSearchParams(location.search);
+      newQuery.set('evaluationCallIds', JSON.stringify(newEvaluationCallIds));
+      history.push({search: newQuery.toString()});
+    },
+    [history, location.search]
+  );
   return (
     <CompareEvaluationsPage
       entity={entity}
       project={project}
       evaluationCallIds={evaluationCallIds}
+      onEvaluationCallIdsUpdate={onEvaluationCallIdsUpdate}
     />
   );
 };

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallPage.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallPage.tsx
@@ -64,6 +64,8 @@ const useCallTabs = (call: CallSchema) => {
                 entity={call.entity}
                 project={call.project}
                 evaluationCallIds={[call.callId]}
+                // Dont persist changes to evaluationCallIds in the URL
+                onEvaluationCallIdsUpdate={() => {}}
               />
             ),
           },

diff --git a/.../PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/CompareEvaluationsPage.tsx b/.../PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/CompareEvaluationsPage.tsx
@@ -38,6 +38,7 @@ type CompareEvaluationsPageProps = {
   entity: string;
   project: string;
   evaluationCallIds: string[];
+  onEvaluationCallIdsUpdate: (newEvaluationCallIds: string[]) => void;
 };
 
 export const CompareEvaluationsPage: React.FC<
@@ -55,6 +56,7 @@ export const CompareEvaluationsPage: React.FC<
               entity={props.entity}
               project={props.project}
               evaluationCallIds={props.evaluationCallIds}
+              onEvaluationCallIdsUpdate={props.onEvaluationCallIdsUpdate}
             />
           ),
         },
@@ -113,6 +115,7 @@ export const CompareEvaluationsPageContent: React.FC<
       initialEvaluationCallIds={props.evaluationCallIds}
       baselineEvaluationCallId={baselineEvaluationCallId ?? undefined}
       comparisonDimensions={comparisonDimensions ?? undefined}
+      onEvaluationCallIdsUpdate={props.onEvaluationCallIdsUpdate}
       setBaselineEvaluationCallId={setBaselineEvaluationCallId}
       setComparisonDimensions={setComparisonDimensionsAndClearInputDigest}
       selectedInputDigest={selectedInputDigest ?? undefined}

diff --git a/...gePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/compareEvaluationsContext.tsx b/...gePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/compareEvaluationsContext.tsx
@@ -32,6 +32,7 @@ export const CompareEvaluationsProvider: React.FC<{
   entity: string;
   project: string;
   initialEvaluationCallIds: string[];
+  onEvaluationCallIdsUpdate: (newEvaluationCallIds: string[]) => void;
   setBaselineEvaluationCallId: React.Dispatch<
     React.SetStateAction<string | null>
   >;
@@ -46,6 +47,7 @@ export const CompareEvaluationsProvider: React.FC<{
   entity,
   project,
   initialEvaluationCallIds,
+  onEvaluationCallIdsUpdate,
   setBaselineEvaluationCallId,
   setComparisonDimensions,
 
@@ -78,15 +80,23 @@ export const CompareEvaluationsProvider: React.FC<{
       setComparisonDimensions,
       setSelectedInputDigest,
       addEvaluationCall: (newCallId: string) => {
-        setEvaluationCallIds(prev => [...prev, newCallId]);
+        const newEvaluationCallIds = [...evaluationCallIds, newCallId];
+        setEvaluationCallIds(newEvaluationCallIds);
+        onEvaluationCallIdsUpdate(newEvaluationCallIds);
       },
       removeEvaluationCall: (callId: string) => {
-        setEvaluationCallIds(prev => prev.filter(id => id !== callId));
+        const newEvaluationCallIds = evaluationCallIds.filter(
+          id => id !== callId
+        );
+        setEvaluationCallIds(newEvaluationCallIds);
+        onEvaluationCallIdsUpdate(newEvaluationCallIds);
       },
     };
   }, [
     initialState.loading,
     initialState.result,
+    evaluationCallIds,
+    onEvaluationCallIdsUpdate,
     setEvaluationCallIds,
     setBaselineEvaluationCallId,
     setComparisonDimensions,

diff --git a/...ages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/EvaluationDefinition.tsx b/...ages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/EvaluationDefinition.tsx
@@ -75,18 +75,20 @@ export const EvaluationDefinition: React.FC<{
       {props.callId === props.state.baselineEvaluationCallId && (
         <Pill label="Baseline" color="teal" />
       )}
-      <PopupDropdown
-        sections={[menuOptions]}
-        trigger={
-          <Button
-            className="rotate-90"
-            icon="overflow-horizontal"
-            size="small"
-            variant="ghost"
-            style={{marginLeft: '4px'}}
-          />
-        }
-      />
+      <div style={{marginLeft: '-14px'}}>
+        <PopupDropdown
+          sections={[menuOptions]}
+          trigger={
+            <Button
+              className="rotate-90"
+              icon="overflow-horizontal"
+              size="small"
+              variant="ghost"
+              style={{marginLeft: '4px'}}
+            />
+          }
+        />
+      </div>
     </HorizontalBox>
   );
 };