From 0091f308c356bc153420fc113de6ead5337789a2 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Tue, 1 Apr 2025 12:48:30 -0600
Subject: [PATCH] much faster loads

---
 .../versionHistory/VersionHistoryPanel.tsx    |  2 +-
 web/src/components/ui/dropdown/Dropdown.tsx   |  2 --
 .../DashboardThreeDotMenu.tsx                 | 21 +++++++++--
 .../MetricThreeDotMenu.tsx                    | 36 +++++++++++++++----
 4 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/web/src/components/features/versionHistory/VersionHistoryPanel.tsx b/web/src/components/features/versionHistory/VersionHistoryPanel.tsx
index 996e2749e..56aadc872 100644
--- a/web/src/components/features/versionHistory/VersionHistoryPanel.tsx
+++ b/web/src/components/features/versionHistory/VersionHistoryPanel.tsx
@@ -46,7 +46,7 @@ export const VersionHistoryPanel = React.memo(
         )}
         scrollable
         headerBorderVariant="ghost">
-        <div ref={bodyRef} className="mx-1.5 mb-1.5 flex flex-col">
+        <div ref={bodyRef} className="mx-2 mb-1.5 flex flex-col">
           {listItems?.map((item) => (
             <ListItem
               key={item.version_number}
diff --git a/web/src/components/ui/dropdown/Dropdown.tsx b/web/src/components/ui/dropdown/Dropdown.tsx
index 68df9cbe3..050731b59 100644
--- a/web/src/components/ui/dropdown/Dropdown.tsx
+++ b/web/src/components/ui/dropdown/Dropdown.tsx
@@ -159,8 +159,6 @@ export const DropdownContent = <T,>({
     debounceTime: 50
   });
 
-  console.log(filteredItems, searchText);
-
   const hasShownItem = useMemo(() => {
     return filteredItems.length > 0 && filteredItems.some((item) => (item as DropdownItem).value);
   }, [filteredItems]);
diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardThreeDotMenu.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardThreeDotMenu.tsx
index 021fd1425..f7ad7dc1e 100644
--- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardThreeDotMenu.tsx
+++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardThreeDotMenu.tsx
@@ -36,6 +36,7 @@ import { getShareAssetConfig } from '@/components/features/ShareMenu/helpers';
 import { useDashboardContentStore } from '@/context/Dashboards';
 import { useAppLayoutContextSelector } from '@/context/BusterAppLayout';
 import { BusterRoutes } from '@/routes/busterRoutes';
+import { assetParamsToRoute } from '@/layouts/ChatLayout/ChatLayoutContext/helpers';
 
 export const DashboardThreeDotMenu = React.memo(({ dashboardId }: { dashboardId: string }) => {
   const versionHistoryItems = useVersionHistorySelectMenu({ dashboardId });
@@ -90,15 +91,31 @@ const useVersionHistorySelectMenu = ({ dashboardId }: { dashboardId: string }) =
     version_number: x?.dashboard?.version_number
   }));
   const { versions, version_number } = data || {};
+  const chatId = useChatLayoutContextSelector((x) => x.chatId);
+  const onChangePage = useAppLayoutContextSelector((s) => s.onChangePage);
+
+  const createRouteWithQueryParams = useMemoizedFn((versionNumber: number) => {
+    const baseRoute = assetParamsToRoute({
+      chatId,
+      assetId: dashboardId,
+      type: 'dashboard',
+      secondaryView: 'version-history'
+    });
+
+    return `${baseRoute}?${new URLSearchParams({
+      dashboard_version_number: versionNumber.toString()
+    }).toString()}`;
+  });
 
   const versionHistoryItems: DropdownItems = useMemo(() => {
     return [...(versions || [])].reverse().map((x) => ({
       label: `Version ${x.version_number}`,
       secondaryLabel: timeFromNow(x.updated_at, false),
       value: x.version_number.toString(),
-      selected: x.version_number === version_number
+      selected: x.version_number === version_number,
+      onClick: () => onChangePage(createRouteWithQueryParams(x.version_number))
     }));
-  }, [versions, version_number]);
+  }, [versions, version_number, createRouteWithQueryParams, onChangePage]);
 
   return useMemo(
     () => ({
diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx
index 2410831eb..edce73033 100644
--- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx
+++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx
@@ -50,6 +50,8 @@ import { ShareMenuContent } from '@/components/features/ShareMenu/ShareMenuConte
 import { canEdit, getIsEffectiveOwner, getIsOwner } from '@/lib/share';
 import { getShareAssetConfig } from '@/components/features/ShareMenu/helpers';
 import { useAppLayoutContextSelector } from '@/context/BusterAppLayout';
+import { BusterRoutes, createBusterRoute } from '@/routes';
+import { assetParamsToRoute } from '@/layouts/ChatLayout/ChatLayoutContext/helpers';
 
 export const ThreeDotMenuButton = React.memo(({ metricId }: { metricId: string }) => {
   const { openSuccessMessage } = useBusterNotifications();
@@ -118,7 +120,13 @@ export const ThreeDotMenuButton = React.memo(({ metricId }: { metricId: string }
   );
 
   return (
-    <Dropdown items={items} side="bottom" align="end" contentClassName="max-h-fit" modal>
+    <Dropdown
+      items={items}
+      selectType="single"
+      side="bottom"
+      align="end"
+      contentClassName="max-h-fit"
+      modal>
       <Button prefix={<Dots />} variant="ghost" />
     </Dropdown>
   );
@@ -177,15 +185,25 @@ const useDashboardSelectMenu = ({ metricId }: { metricId: string }) => {
 };
 
 const useVersionHistorySelectMenu = ({ metricId }: { metricId: string }) => {
-  const onChangeQueryParams = useAppLayoutContextSelector((x) => x.onChangeQueryParams);
+  const chatId = useChatLayoutContextSelector((x) => x.chatId);
+  const onChangePage = useAppLayoutContextSelector((x) => x.onChangePage);
   const { data } = useGetMetric({ id: metricId }, (x) => ({
     versions: x.versions,
     version_number: x.version_number
   }));
   const { versions = [], version_number } = data || {};
 
-  const onClickVersionHistory = useMemoizedFn((versionNumber: number) => {
-    onChangeQueryParams({ metric_version_number: versionNumber.toString() });
+  const createRouteWithQueryParams = useMemoizedFn((versionNumber: number) => {
+    const baseRoute = assetParamsToRoute({
+      chatId,
+      assetId: metricId,
+      type: 'metric',
+      secondaryView: 'version-history'
+    });
+
+    return `${baseRoute}?${new URLSearchParams({
+      metric_version_number: versionNumber.toString()
+    }).toString()}`;
   });
 
   const versionHistoryItems: DropdownItems = useMemo(() => {
@@ -194,9 +212,15 @@ const useVersionHistorySelectMenu = ({ metricId }: { metricId: string }) => {
       secondaryLabel: timeFromNow(x.updated_at, false),
       value: x.version_number.toString(),
       selected: x.version_number === version_number,
-      onClick: () => onClickVersionHistory(x.version_number)
+      onClick: () => onChangePage(createRouteWithQueryParams(x.version_number))
     }));
-  }, [versions, version_number, onClickVersionHistory]);
+  }, [
+    versions,
+    version_number,
+    createRouteWithQueryParams,
+    onChangePage,
+    createRouteWithQueryParams
+  ]);
 
   return useMemo(
     () => ({