From 621cc025b8ca094c9f90d77b94a6eaaf902eb935 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Wed, 12 Mar 2025 12:09:46 -0600
Subject: [PATCH] add a debounce for resizing a chart

---
 .../asset_interfaces/metric/charts/interfaces.ts |  1 -
 .../(chat_experience)/chats/[chatId]/page.tsx    | 16 ++++++++++------
 .../AppVerticalCodeSplitter/SQLContainer.tsx     |  2 +-
 web/src/components/ui/charts/BusterChart.tsx     |  2 --
 .../ui/charts/BusterChartJS/BusterChartJS.tsx    |  2 --
 .../BusterChartJS/BusterChartJSComponent.tsx     |  1 -
 .../ui/charts/BusterChartJS/ChartJSTheme.ts      |  1 +
 .../ui/inputs/AppCodeEditor/AppCodeEditor.tsx    |  2 +-
 .../MetricController/MetricController.tsx        |  2 --
 web/src/lib/chat.ts                              |  1 -
 10 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/web/src/api/asset_interfaces/metric/charts/interfaces.ts b/web/src/api/asset_interfaces/metric/charts/interfaces.ts
index 171959d2a..1d036d638 100644
--- a/web/src/api/asset_interfaces/metric/charts/interfaces.ts
+++ b/web/src/api/asset_interfaces/metric/charts/interfaces.ts
@@ -11,7 +11,6 @@ export type BusterChartProps = {
   id?: string;
   error?: string;
   columnMetadata?: ColumnMetaData[];
-  useRapidResizeObserver?: boolean;
   editable?: boolean;
   onInitialAnimationEnd?: () => void;
   onChartMounted?: (chart?: any) => void;
diff --git a/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/page.tsx b/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/page.tsx
index 7fde6bd9c..8ce2ac231 100644
--- a/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/page.tsx
+++ b/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/page.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { FileIndeterminateLoader } from '@/components/features/FileIndeterminateLoader';
 import { StatusCard } from '@/components/ui/card/StatusCard';
 import { ReasoningController } from '@/controllers/ReasoningController';
 import { useChatIndividualContextSelector } from '@/layouts/ChatLayout/ChatContext';
@@ -13,11 +14,14 @@ export default function Page(params: { params: { chatId: string } }) {
   }
 
   return (
-    <div className="p-5">
-      <StatusCard
-        title="Error"
-        message="If you are seeing this, tell Nate and screenshot this whole page including the URL and logs..."
-      />
-    </div>
+    <>
+      <FileIndeterminateLoader />
+      <div className="p-5">
+        <StatusCard
+          title="Error"
+          message="If you are seeing this, tell Nate and screenshot this whole page including the URL and logs..."
+        />
+      </div>
+    </>
   );
 }
diff --git a/web/src/components/features/layouts/AppVerticalCodeSplitter/SQLContainer.tsx b/web/src/components/features/layouts/AppVerticalCodeSplitter/SQLContainer.tsx
index 067f141bf..590ff8390 100644
--- a/web/src/components/features/layouts/AppVerticalCodeSplitter/SQLContainer.tsx
+++ b/web/src/components/features/layouts/AppVerticalCodeSplitter/SQLContainer.tsx
@@ -45,7 +45,7 @@ export const SQLContainer: React.FC<{
           className
         )}>
         <AppCodeEditor
-          className="overflow-hidden"
+          className="overflow-hidden border-x-0 border-t-0"
           value={sql}
           onChange={setDatasetSQL}
           onMetaEnter={onRunQueryPreflight}
diff --git a/web/src/components/ui/charts/BusterChart.tsx b/web/src/components/ui/charts/BusterChart.tsx
index 126ff0e65..d16378692 100644
--- a/web/src/components/ui/charts/BusterChart.tsx
+++ b/web/src/components/ui/charts/BusterChart.tsx
@@ -40,7 +40,6 @@ export const BusterChart: React.FC<BusterChartProps> = React.memo(
     metricValueAggregate,
     metricValueLabel,
     onChartMounted: onChartMountedProp,
-    useRapidResizeObserver = true,
     onInitialAnimationEnd,
     editable,
     selectedChartType,
@@ -140,7 +139,6 @@ export const BusterChart: React.FC<BusterChartProps> = React.memo(
         animate,
         animateLegend,
         className,
-        useRapidResizeObserver,
         columnLabelFormats,
         selectedChartType,
         loading,
diff --git a/web/src/components/ui/charts/BusterChartJS/BusterChartJS.tsx b/web/src/components/ui/charts/BusterChartJS/BusterChartJS.tsx
index acba1a12c..b2a31f28b 100644
--- a/web/src/components/ui/charts/BusterChartJS/BusterChartJS.tsx
+++ b/web/src/components/ui/charts/BusterChartJS/BusterChartJS.tsx
@@ -21,7 +21,6 @@ export const BusterChartJS: React.FC<BusterChartComponentProps> = ({
   loading = false,
   showLegendHeadline,
   columnMetadata = DEFAULT_COLUMN_METADATA,
-  useRapidResizeObserver = false,
   onChartMounted,
   onInitialAnimationEnd,
   columnSettings = DEFAULT_CHART_CONFIG.columnSettings,
@@ -74,7 +73,6 @@ export const BusterChartJS: React.FC<BusterChartComponentProps> = ({
         columnSettings={columnSettings}
         {...props}
         className={className}
-        useRapidResizeObserver={useRapidResizeObserver}
       />
     </BusterChartJSLegendWrapper>
   );
diff --git a/web/src/components/ui/charts/BusterChartJS/BusterChartJSComponent.tsx b/web/src/components/ui/charts/BusterChartJS/BusterChartJSComponent.tsx
index 4df8bcdd8..e42f7be24 100644
--- a/web/src/components/ui/charts/BusterChartJS/BusterChartJSComponent.tsx
+++ b/web/src/components/ui/charts/BusterChartJS/BusterChartJSComponent.tsx
@@ -67,7 +67,6 @@ export const BusterChartJSComponent = React.memo(
         xAxisTimeInterval,
         //TODO
         xAxisDataZoom,
-        useRapidResizeObserver = false,
         ...rest
       },
       ref
diff --git a/web/src/components/ui/charts/BusterChartJS/ChartJSTheme.ts b/web/src/components/ui/charts/BusterChartJS/ChartJSTheme.ts
index c5a25043c..762d08f88 100644
--- a/web/src/components/ui/charts/BusterChartJS/ChartJSTheme.ts
+++ b/web/src/components/ui/charts/BusterChartJS/ChartJSTheme.ts
@@ -69,6 +69,7 @@ ChartJS.register(
 );
 
 ChartJS.defaults.responsive = true;
+ChartJS.defaults.resizeDelay = 100;
 ChartJS.defaults.maintainAspectRatio = false;
 ChartJS.defaults.color = color;
 ChartJS.defaults.backgroundColor = DEFAULT_CHART_THEME;
diff --git a/web/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx b/web/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx
index 0e8bb2a96..14a0af898 100644
--- a/web/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx
+++ b/web/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx
@@ -8,7 +8,7 @@ import { CircleSpinnerLoaderContainer } from '../../loaders/CircleSpinnerLoaderC
 import { useMemoizedFn } from '@/hooks';
 import { cn } from '@/lib/classMerge';
 import type { editor } from 'monaco-editor/esm/vs/editor/editor.api';
-//import './MonacoWebWorker';
+import './MonacoWebWorker';
 import { configureMonacoToUseYaml } from './yamlHelper';
 
 //import GithubLightTheme from 'monaco-themes/themes/Github Light.json';
diff --git a/web/src/controllers/MetricController/MetricController.tsx b/web/src/controllers/MetricController/MetricController.tsx
index a5b5a3b46..264210678 100644
--- a/web/src/controllers/MetricController/MetricController.tsx
+++ b/web/src/controllers/MetricController/MetricController.tsx
@@ -23,8 +23,6 @@ export const MetricController: React.FC<{
       ? MetricViewComponents[selectedFileView as MetricFileView]
       : () => <></>;
 
-  console.log(selectedFileView);
-
   return (
     <>
       {showLoader && <FileIndeterminateLoader />}
diff --git a/web/src/lib/chat.ts b/web/src/lib/chat.ts
index d5e3ff3cf..07e50d238 100644
--- a/web/src/lib/chat.ts
+++ b/web/src/lib/chat.ts
@@ -40,7 +40,6 @@ export const updateChatToIChat = (
     chat.messages,
     isNewChat ? last(chat.message_ids) : undefined
   );
-  console.log(iChatMessages);
   return {
     iChat,
     iChatMessages