metric results invalidate updates 🐈‍⬛

web/src/app/app/(primary_layout)/datasets/[datasetId]/editor/EditorContent.tsx

@@ -48,8 +48,8 @@ export const EditorContent: React.FC<{
     try {
       const result = await runQuery();
       if (result && result.length > 0) {
-        const headerHeight = 50;
-        const heightOfRow = 36;
+        const headerHeight = 30;
+        const heightOfRow = 28;
         const heightOfDataContainer = headerHeight + heightOfRow * (result.length || 0);
         const containerHeight = ref.current?.clientHeight || 0;
         const maxHeight = Math.floor(containerHeight * 0.6);

web/src/components/features/layouts/AppVerticalCodeSplitter/SQLContainer.tsx

@@ -7,7 +7,6 @@ import { useMemoizedFn } from '@/hooks';
 import { Button } from '@/components/ui/buttons/Button';
 import React, { useMemo, useState } from 'react';
 import type { AppVerticalCodeSplitterProps } from './AppVerticalCodeSplitter';
-import { cn } from '@/lib/classMerge';
 import { ErrorClosableContainer } from '@/components/ui/error/ErrorClosableContainer';
 import { FileCard } from '@/components/ui/card/FileCard';
 
@@ -16,12 +15,13 @@ export const SQLContainer: React.FC<{
   sql: string | undefined;
   setDatasetSQL: (sql: string) => void;
   onRunQuery: () => Promise<void>;
-  onSaveSQL?: AppVerticalCodeSplitterProps['onSaveSQL'];
+  onSaveSQL: AppVerticalCodeSplitterProps['onSaveSQL'];
   disabledSave?: AppVerticalCodeSplitterProps['disabledSave'];
   error?: string | null;
 }> = React.memo(
   ({ disabledSave, className = '', sql, setDatasetSQL, onRunQuery, onSaveSQL, error }) => {
     const [isRunning, setIsRunning] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
     const { openInfoMessage } = useBusterNotifications();
 
     const onCopySQL = useMemoizedFn(() => {
@@ -35,6 +35,12 @@ export const SQLContainer: React.FC<{
       setIsRunning(false);
     });
 
+    const onSaveSQLPreflight = useMemoizedFn(async () => {
+      setIsSaving(true);
+      await onSaveSQL?.();
+      setIsSaving(false);
+    });
+
     const memoizedFooter = useMemo(() => {
       return (
         <>
@@ -45,7 +51,8 @@ export const SQLContainer: React.FC<{
               <Button
                 disabled={disabledSave || !sql || isRunning}
                 variant="black"
-                onClick={onSaveSQL}>
+                loading={isSaving}
+                onClick={onSaveSQLPreflight}>
                 Save
               </Button>
             )}

web/src/components/ui/table/AppDataGrid/TanStackDataGrid/initializeColumnWidths.ts

@@ -20,7 +20,7 @@ export const initializeColumnWidths = (
   return initial;
 };
 
-const OFFSET = 20;
+const OFFSET = 40;
 
 const getDefaultColumnWidth = (
   rows: Record<string, string | number | null | Date>[],

web/src/controllers/MetricController/MetricViewResults/MetricViewResultsController.tsx

@@ -59,12 +59,12 @@ export const MetricViewResults: React.FC<{ metricId: string }> = React.memo(({ m
 
       if (res && res.data && res.data.length > 0) {
         const data = res.data;
-        const headerHeight = 50;
-        const heightOfRow = 36;
+        const headerHeight = 28.1;
+        const heightOfRow = 28.1;
         const heightOfDataContainer = headerHeight + heightOfRow * (data.length || 0);
         const containerHeight = containerRef.current?.clientHeight || 0;
         const maxHeight = Math.floor(containerHeight * 0.6);
-        const finalHeight = Math.min(heightOfDataContainer, maxHeight);
+        const finalHeight = Math.min(heightOfDataContainer, maxHeight) + 12;
         appSplitterRef.current?.setSplitSizes(['auto', `${finalHeight}px`]);
       }
     } catch (error) {

web/src/controllers/MetricController/MetricViewResults/useMetricRunSQL/useMetricRunSQL.ts

@@ -1,4 +1,8 @@
-import type { BusterMetricData, IBusterMetricChartConfig } from '@/api/asset_interfaces/metric';
+import type {
+  BusterMetricData,
+  IBusterMetricChartConfig,
+  IBusterMetricData
+} from '@/api/asset_interfaces/metric';
 import { RunSQLResponse } from '@/api/asset_interfaces/sql';
 import { queryKeys } from '@/api/query_keys';
 import { useBusterNotifications } from '@/context/BusterNotifications';
@@ -9,6 +13,8 @@ import { didColumnDataChange, simplifyChatConfigForSQLChange } from './helpers';
 import { useRunSQL as useRunSQLQuery } from '@/api/buster_rest';
 import { useUpdateMetric } from '@/api/buster_rest/metrics';
 import { useGetMetricMemoized } from '@/context/Metrics';
+import { createDefaultChartConfig } from '@/lib/metrics/messageAutoChartHandler';
+import { timeout } from '@/lib';
 
 export const useMetricRunSQL = () => {
   const queryClient = useQueryClient();
@@ -35,7 +41,7 @@ export const useMetricRunSQL = () => {
   const { openSuccessNotification } = useBusterNotifications();
 
   const getDataByMetricIdMemoized = useMemoizedFn(
-    (metricId: string): BusterMetricData | undefined => {
+    (metricId: string): IBusterMetricData | undefined => {
       const options = queryKeys.metricsGetData(metricId);
       return queryClient.getQueryData(options.queryKey);
     }
@@ -61,11 +67,14 @@ export const useMetricRunSQL = () => {
   }) => {
     const options = queryKeys.metricsGetData(metricId);
     const currentData = getDataByMetricIdMemoized(metricId);
+    if (!currentData) return;
     const setter = isDataFromRerun ? 'dataFromRerun' : 'data';
+
     queryClient.setQueryData(options.queryKey, {
-      ...currentData!,
+      ...currentData,
       [setter]: data,
-      data_metadata
+      data_metadata,
+      ...(!isDataFromRerun && { dataFromRerun: undefined })
     });
   };
 
@@ -88,7 +97,6 @@ export const useMetricRunSQL = () => {
         const newColumnData = data_metadata?.column_metadata;
 
         const didDataMetadataChange = didColumnDataChange(oldColumnData, newColumnData);
-
         const totallyDefaultChartConfig: IBusterMetricChartConfig = didDataMetadataChange
           ? simplifyChatConfigForSQLChange(metricMessage.chart_config, data_metadata)
           : metricMessage.chart_config;
@@ -154,11 +162,10 @@ export const useMetricRunSQL = () => {
       sql: string;
       dataSourceId?: string;
     }) => {
-      const ogConfigs = originalConfigs.current;
       const currentMetric = getMetricMemoized(metricId);
       const dataSourceId = dataSourceIdProp || currentMetric?.data_source_id;
 
-      if (!ogConfigs || ogConfigs.sql !== sql) {
+      if (!originalConfigs.current || originalConfigs.current.sql !== sql) {
         try {
           await runSQL({
             metricId,
@@ -169,21 +176,31 @@ export const useMetricRunSQL = () => {
           throw error;
         }
       }
+      await timeout(50);
 
+      const currentChartConfig = getMetricMemoized(metricId)?.chart_config; //grab it like this because we need the reset based on stageMetric function
       await saveMetric({
         id: metricId,
-        sql
+        sql,
+        chart_config: currentChartConfig //this is reset based on stageMetric function
       });
+      await timeout(50);
 
-      if (originalConfigs.current) {
+      const currentData = getDataByMetricIdMemoized(metricId);
+
+      if (currentData?.data_metadata && currentData?.dataFromRerun) {
         onSetDataForMetric({
           metricId,
-          data: originalConfigs.current?.data!,
-          data_metadata: originalConfigs.current?.dataMetadata!,
+          data: currentData?.dataFromRerun,
+          data_metadata: currentData?.data_metadata,
           isDataFromRerun: false
         });
       }
 
+      await queryClient.invalidateQueries({
+        queryKey: queryKeys.metricsGetMetric(metricId).queryKey
+      });
+
       setTimeout(() => {
         openSuccessNotification({
           title: 'SQL Saved',