diff --git a/web/src/app/app/(primary_layout)/datasets/[datasetId]/editor/EditorContent.tsx b/web/src/app/app/(primary_layout)/datasets/[datasetId]/editor/EditorContent.tsx index fefd02b47..5f1dbb56c 100644 --- a/web/src/app/app/(primary_layout)/datasets/[datasetId]/editor/EditorContent.tsx +++ b/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); diff --git a/web/src/components/features/layouts/AppVerticalCodeSplitter/SQLContainer.tsx b/web/src/components/features/layouts/AppVerticalCodeSplitter/SQLContainer.tsx index 49ad2d60b..6212567da 100644 --- a/web/src/components/features/layouts/AppVerticalCodeSplitter/SQLContainer.tsx +++ b/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; - 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<{ )} diff --git a/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/initializeColumnWidths.ts b/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/initializeColumnWidths.ts index 0ef36a845..b958ae122 100644 --- a/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/initializeColumnWidths.ts +++ b/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[], diff --git a/web/src/controllers/MetricController/MetricViewResults/MetricViewResultsController.tsx b/web/src/controllers/MetricController/MetricViewResults/MetricViewResultsController.tsx index d044871fe..2005208dc 100644 --- a/web/src/controllers/MetricController/MetricViewResults/MetricViewResultsController.tsx +++ b/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) { diff --git a/web/src/controllers/MetricController/MetricViewResults/useMetricRunSQL/useMetricRunSQL.ts b/web/src/controllers/MetricController/MetricViewResults/useMetricRunSQL/useMetricRunSQL.ts index 70db77ed8..752b10e84 100644 --- a/web/src/controllers/MetricController/MetricViewResults/useMetricRunSQL/useMetricRunSQL.ts +++ b/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',