MAJOR REFACTOR - REMOVED HISTORY!

wandb · Mar 4, 2025 · 1ae1734 · 1ae1734
1 parent 37cc17e
commit 1ae1734
Show file tree

Hide file tree

Showing 8 changed files with 218 additions and 213 deletions.
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3.tsx
@@ -38,8 +38,10 @@ import {
   baseContext,
   browse2Context,
   Browse3WeaveflowRouteContextProvider,
-  PATH_PARAM,
+  DESCENDENT_CALL_ID_PARAM,
+  HIDE_TRACETREE_PARAM,
   PEEK_PARAM,
+  SHOW_FEEDBACK_PARAM,
   useClosePeek,
   usePeekLocation,
   useWeaveflowCurrentRouteContext,
@@ -613,53 +615,135 @@ const useParamsDecoded = <T extends object>() => {
   }, [params]);
 };
 
-// TODO(tim/weaveflow_improved_nav): Generalize this
-const CallPageBinding = () => {
-  useCallPeekRedirect();
+const getOptionalBoolean = (
+  dict: Record<string, string>,
+  key: string
+): boolean | undefined => {
+  const value = dict[key];
+  if (value == null) {
+    return undefined;
+  }
+  return value === '1';
+};
+
+const getOptionalString = (
+  dict: Record<string, string>,
+  key: string
+): string | undefined => {
+  const value = dict[key];
+  if (value == null) {
+    return undefined;
+  }
+  return value;
+};
+
+const useURLBackedCallPageState = () => {
   const params = useParamsDecoded<Browse3TabItemParams>();
   const query = useURLSearchParamsDict();
   const history = useHistory();
   const currentRouter = useWeaveflowCurrentRouteContext();
-
-  const [callId, setCallIdDirect] = useState(params.itemName);
+  const [rootCallId, setRootCallId] = useState(params.itemName);
   useEffect(() => {
-    setCallIdDirect(params.itemName);
+    setRootCallId(params.itemName);
   }, [params.itemName]);
 
+  const [descendentCallId, setDescendentCallId] = useState<string | undefined>(
+    getOptionalString(query, DESCENDENT_CALL_ID_PARAM)
+  );
+  useEffect(() => {
+    setDescendentCallId(getOptionalString(query, DESCENDENT_CALL_ID_PARAM));
+  }, [query]);
+
+  const [showFeedback, setShowFeedback] = useState<boolean | undefined>(
+    getOptionalBoolean(query, SHOW_FEEDBACK_PARAM)
+  );
+  useEffect(() => {
+    setShowFeedback(getOptionalBoolean(query, SHOW_FEEDBACK_PARAM));
+  }, [query]);
+
+  const [hideTracetree, setHideTracetree] = useState<boolean | undefined>(
+    getOptionalBoolean(query, HIDE_TRACETREE_PARAM)
+  );
+  useEffect(() => {
+    setHideTracetree(getOptionalBoolean(query, HIDE_TRACETREE_PARAM));
+  }, [query]);
+
   const debouncedHistoryPush = useMemo(() => {
     return debounce((path: string) => {
-      history.push(path);
-    }, 1000);
+      if (history.location.pathname !== path) {
+        history.push(path);
+      }
+    }, 500);
   }, [history]);
 
-  const setCallId = useCallback(
-    (newCallId: string) => {
-      setCallIdDirect(newCallId);
+  useEffect(() => {
+    debouncedHistoryPush(
+      currentRouter.callUIUrl(
+        params.entity,
+        params.project,
+        '',
+        rootCallId,
+        descendentCallId,
+        hideTracetree,
+        showFeedback
+      )
+    );
+    return () => {
+      debouncedHistoryPush.cancel();
+    };
+  }, [
+    currentRouter,
+    debouncedHistoryPush,
+    params.entity,
+    params.project,
+    rootCallId,
+    descendentCallId,
+    showFeedback,
+    hideTracetree,
+  ]);
+
+  return {
+    entity: params.entity,
+    project: params.project,
+    rootCallId,
+    descendentCallId,
+    showFeedback,
+    hideTracetree,
+    setRootCallId,
+    setDescendentCallId,
+    setShowFeedback,
+    setHideTracetree,
+  };
+};
 
-      // TODO: Handle this navigation more gracefully - ideally
-      // we implement a generalized state management system for
-      // navigating between different views
-      debouncedHistoryPush(
-        currentRouter.callUIUrl(
-          params.entity,
-          params.project,
-          '',
-          newCallId,
-          '',
-          true
-        )
-      );
-    },
-    [currentRouter, debouncedHistoryPush, params.entity, params.project]
-  );
+// TODO(tim/weaveflow_improved_nav): Generalize this
+const CallPageBinding = () => {
+  useCallPeekRedirect();
+  const {
+    entity,
+    project,
+    rootCallId,
+    descendentCallId,
+    showFeedback,
+    hideTracetree,
+    setRootCallId,
+    setDescendentCallId,
+    setShowFeedback,
+    setHideTracetree,
+  } = useURLBackedCallPageState();
 
   return (
     <CallPage
-      entity={params.entity}
-      project={params.project}
-      callId={callId}
-      path={query[PATH_PARAM]}
-      setCallId={setCallId}
+      entity={entity}
+      project={project}
+      rootCallId={rootCallId}
+      setRootCallId={setRootCallId}
+      descendentCallId={descendentCallId}
+      setDescendentCallId={setDescendentCallId}
+      hideTracetree={hideTracetree}
+      setHideTracetree={setHideTracetree}
+      showFeedback={showFeedback}
+      setShowFeedback={setShowFeedback}
     />
   );
 };

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/context.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/context.tsx
@@ -100,8 +100,9 @@ export const browse2Context = {
     projectName: string,
     traceId: string,
     callId: string,
-    path?: string | null,
-    tracetree?: boolean
+    descendentCallId?: string,
+    hideTracetree?: boolean,
+    showFeedback?: boolean
   ) => {
     return `/${entityName}/${projectName}/trace/${traceId}/${callId}`;
   },
@@ -350,20 +351,20 @@ export const browse3ContextGen = (
       projectName: string,
       traceId: string,
       callId: string,
-      path?: string | null,
-      tracetree?: boolean,
-      feedbackExpand?: boolean
+      descendentCallId?: string,
+      hideTracetree?: boolean,
+      showFeedback?: boolean
     ) => {
       let url = `${projectRoot(entityName, projectName)}/calls/${callId}`;
       const params = new URLSearchParams();
-      if (path) {
-        params.set(PATH_PARAM, path);
+      if (descendentCallId) {
+        params.set(DESCENDENT_CALL_ID_PARAM, descendentCallId);
       }
-      if (tracetree !== undefined) {
-        params.set(TRACETREE_PARAM, tracetree ? '1' : '0');
+      if (hideTracetree !== undefined) {
+        params.set(HIDE_TRACETREE_PARAM, hideTracetree ? '1' : '0');
       }
-      if (feedbackExpand !== undefined) {
-        params.set(FEEDBACK_EXPAND_PARAM, feedbackExpand ? '1' : '0');
+      if (showFeedback !== undefined) {
+        params.set(SHOW_FEEDBACK_PARAM, showFeedback ? '1' : '0');
       }
       if (params.toString()) {
         url += '?' + params.toString();
@@ -540,9 +541,9 @@ type RouteType = {
     projectName: string,
     traceId: string,
     callId: string,
-    path?: string | null,
-    tracetree?: boolean,
-    feedbackExpand?: boolean
+    descendentCallId?: string,
+    hideTracetree?: boolean,
+    showFeedback?: boolean
   ) => string;
   tracesUIUrl: (entityName: string, projectName: string) => string;
   callsUIUrl: (
@@ -623,9 +624,9 @@ const useSetSearchParam = () => {
 };
 
 export const PEEK_PARAM = 'peekPath';
-export const TRACETREE_PARAM = 'tracetree';
-export const FEEDBACK_EXPAND_PARAM = 'feedbackExpand';
-export const PATH_PARAM = 'path';
+export const HIDE_TRACETREE_PARAM = 'hideTracetree';
+export const SHOW_FEEDBACK_PARAM = 'showFeedback';
+export const DESCENDENT_CALL_ID_PARAM = 'descendentCallId';
 
 export const baseContext = browse3ContextGen(
   (entityName: string, projectName: string) => {