diff --git a/web/src/app/app/_controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardContentController.tsx b/web/src/app/app/_controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardContentController.tsx index 456fa5e9d..8db0e3e5b 100644 --- a/web/src/app/app/_controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardContentController.tsx +++ b/web/src/app/app/_controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardContentController.tsx @@ -105,7 +105,7 @@ export const DashboardContentController: React.FC<{ }, [dashboard.id, remapMetrics]); return ( -
+
{hasMetrics && !!dashboardRows.length ? ( { @@ -69,28 +69,6 @@ const _DashboardMetricItem: React.FC<{ }; }, [isTable]); - useWhyDidYouUpdate('DashboardMetricItem', { - metricId, - dashboardId, - allowEdit, - className, - isDragOverlay, - numberOfMetrics, - renderChart, - loading, - error, - metricLink, - onInitialAnimationEndPreflight, - cardClassNamesMemoized, - metric, - metricData, - initialAnimationEnded, - setInitialAnimationEnded, - data, - loadingMetricData, - chartOptions - }); - return ( { }); const initialAnimationEnded = metricMetadata?.initialAnimationEnded || false; - const renderChart = metricMetadata?.hasBeenScrolledIntoView || isOnFirstTwoRows; + const renderChart = + true || ((metricMetadata?.hasBeenScrolledIntoView || isOnFirstTwoRows) && metric?.fetched); useEffect(() => { if (inViewport) { diff --git a/web/src/app/app/_controllers/DashboardController/DashboardViewDashboardController/DashboardEditTitle.tsx b/web/src/app/app/_controllers/DashboardController/DashboardViewDashboardController/DashboardEditTitle.tsx index 4eb464470..d119450aa 100644 --- a/web/src/app/app/_controllers/DashboardController/DashboardViewDashboardController/DashboardEditTitle.tsx +++ b/web/src/app/app/_controllers/DashboardController/DashboardViewDashboardController/DashboardEditTitle.tsx @@ -26,7 +26,7 @@ export const DashboardEditTitles: React.FC<{ ); return ( -
+
= ({ }); return ( -
+
{ (metricId: string, newMetricData: Partial) => { metricDataRef.current = { ...metricDataRef.current, - [metricId]: { ...metricDataRef.current[metricId], ...newMetricData, metricId } + [metricId]: { + ...DEFAULT_MESSAGE_DATA, + ...metricDataRef.current[metricId], + ...newMetricData, + metricId + } }; startTransition(() => { //trigger re-render @@ -31,12 +36,12 @@ const useMetricData = () => { const _onGetFetchingData = useMemoizedFn((payload: MetricEvent_fetchingData) => { const { data, data_metadata, code, progress, metric_id: metricId } = payload; - const currentMetric = getMetricData(metricId); + const currentMetric = getDataByMetricId(metricId); const fallbackData = data || currentMetric?.data; const fallbackDataMetadata = data_metadata || currentMetric?.data_metadata; const isCompleted = progress === 'completed'; - onSetMetricData({ + onSetDataForMetric({ metricId, data: fallbackData, data_metadata: fallbackDataMetadata, @@ -47,7 +52,7 @@ const useMetricData = () => { }); }); - const onSetMetricData = useMemoizedFn( + const onSetDataForMetric = useMemoizedFn( ({ metricId, data, @@ -66,7 +71,7 @@ const useMetricData = () => { code: string | null; }) => { const setKey = isDataFromRerun ? 'dataFromRerun' : 'data'; - const prev = getMetricData(metricId); + const prev = getDataByMetricId(metricId); _setMetricData(metricId, { [setKey]: data, fetchedAt: Date.now(), @@ -85,7 +90,7 @@ const useMetricData = () => { ); const fetchDataByMetricId = useMemoizedFn(async ({ metricId }: { metricId: string }) => { - const selectedMetricData = getMetricData(metricId); + const selectedMetricData = getDataByMetricId(metricId); if (selectedMetricData?.fetching || selectedMetricData?.fetched) { return; @@ -98,11 +103,11 @@ const useMetricData = () => { setTimeout(() => { //TODO: remove mock data // _setMetricData(metricId, { ...MOCK_DATA, fetched: true }); - onSetMetricData({ + onSetDataForMetric({ ...MOCK_DATA, metricId }); - }, 1800); + }, Math.random() * 10800); return await busterSocket.emitAndOnce({ emitEvent: { @@ -116,17 +121,17 @@ const useMetricData = () => { }); }); - const getMetricData = useCallback( + const getDataByMetricId = useCallback( (metricId: string | undefined) => { if (metricId && metricDataRef.current[metricId]) { return metricDataRef.current[metricId]; } - return DEFAULT_MESSAGE_DATA; + return { ...DEFAULT_MESSAGE_DATA, metricId }; }, [isPending] ); - const getAllMetricDataMemoized = useMemoizedFn( + const getDataByMetricIdMemoized = useMemoizedFn( (metricId: string): BusterMetricData | undefined => { return metricDataRef.current[metricId]; } @@ -142,10 +147,10 @@ const useMetricData = () => { return { metricData: metricDataRef.current, onSetMetricDataCode, - onSetMetricData, + onSetDataForMetric, fetchDataByMetricId, - getMetricData, - getAllMetricDataMemoized + getDataByMetricId, + getDataByMetricIdMemoized }; }; diff --git a/web/src/context/Metrics/BusterMetricsProvider.tsx b/web/src/context/Metrics/BusterMetricsProvider.tsx index 0613b6f71..570c5b054 100644 --- a/web/src/context/Metrics/BusterMetricsProvider.tsx +++ b/web/src/context/Metrics/BusterMetricsProvider.tsx @@ -17,7 +17,7 @@ import { RustApiError } from '@/api/buster_rest/errors'; import { resolveEmptyMetric, upgradeMetricToIMetric } from './helpers'; import { MetricUpdateMetric } from '@/api/buster_socket/metrics'; import { useBusterMetricDataContextSelector } from '../MetricData'; -import { MOCK_METRIC } from './MOCK_METRIC'; +import { createMockMetric, MOCK_METRIC } from './MOCK_METRIC'; import { useUpdateMetricConfig } from './useUpdateMetricConfig'; import { useUpdateMetricAssosciations } from './useUpdateMetricAssosciations'; @@ -37,7 +37,7 @@ export const useBusterMetrics = () => { }); const setMetrics = useMemoizedFn((newMetrics: Record) => { - metricsRef.current = { ...newMetrics }; + metricsRef.current = { ...metricsRef.current, ...newMetrics }; startTransition(() => { //trigger a rerender }); @@ -89,7 +89,7 @@ export const useBusterMetrics = () => { const upgradedMetric = upgradeMetricToIMetric(newMetric, oldMetric); - onUpdateMetric(upgradedMetric); + onUpdateMetric(upgradedMetric, false); }); const _setLoadingMetric = useMemoizedFn((metricId: string) => { @@ -143,10 +143,7 @@ export const useBusterMetrics = () => { //TODO: remove this setTimeout(() => { - _onGetMetricState({ - ...MOCK_METRIC, - id: metricId - }); + _onGetMetricState(createMockMetric(metricId)); }, 300); return await busterSocket.emitAndOnce({ @@ -277,12 +274,12 @@ export const useBusterMetricIndividual = ({ metricId }: { metricId: string }) => const subscribeToMetric = useBusterMetricsContextSelector((x) => x.subscribeToMetric); const fetchDataByMetricId = useBusterMetricDataContextSelector((x) => x.fetchDataByMetricId); const metric = useBusterMetricsContextSelector((x) => x.metrics[metricId]); - const metricData = useBusterMetricDataContextSelector(({ getMetricData }) => - getMetricData(metricId) + const metricData = useBusterMetricDataContextSelector(({ getDataByMetricId }) => + getDataByMetricId(metricId) ); useMount(() => { - // subscribeToMetric({ metricId }); + subscribeToMetric({ metricId }); fetchDataByMetricId({ metricId }); }); diff --git a/web/src/context/Metrics/MOCK_METRIC.ts b/web/src/context/Metrics/MOCK_METRIC.ts index 134089ac2..2fbf7a58d 100644 --- a/web/src/context/Metrics/MOCK_METRIC.ts +++ b/web/src/context/Metrics/MOCK_METRIC.ts @@ -58,12 +58,12 @@ const dataMetadata: DataMetadata = { row_count: 10 }; -export const MOCK_METRIC: IBusterMetric = { - id: '123', - title: 'Mock Metric', +export const MOCK_METRIC = (id = ''): IBusterMetric => ({ + id: id || '123', + title: id + ' - ' + faker.lorem.words({ min: 2, max: 6 }), version_number: 1, - file_name: 'mock_metric.yml', - description: faker.lorem.sentence(33), + file_name: `${faker.lorem.words({ min: 1, max: 3 })}.yml`, + description: faker.commerce.productName(), data_source_id: '6840fa04-c0d7-4e0e-8d3d-ea9190d93874', time_frame: '1d', type: 'metric', @@ -152,11 +152,42 @@ SELECT * FROM records;`, publicly_accessible: false, public_password: '', permission: ShareRole.OWNER -}; +}); export const createMockMetric = (id: string): IBusterMetric => { return { - ...MOCK_METRIC, + ...MOCK_METRIC(id), id }; }; + +export const mockMetric1 = createMockMetric('number1'); +export const mockMetric2 = createMockMetric('number2'); +export const mockMetric3 = createMockMetric('number3'); +export const mockMetric4 = createMockMetric('number4'); +export const mockMetric5 = createMockMetric('number5'); +export const mockMetric6 = createMockMetric('number6'); +export const mockMetric7 = createMockMetric('number7'); +export const mockMetric8 = createMockMetric('number8'); +export const mockMetric9 = createMockMetric('number9'); +export const mockMetric10 = createMockMetric('number10'); +export const mockMetric11 = createMockMetric('number11'); +export const mockMetric12 = createMockMetric('number12'); +export const mockMetric13 = createMockMetric('number13'); +export const mockMetric14 = createMockMetric('number14'); +export const mockMetric15 = createMockMetric('number15'); +export const mockMetric16 = createMockMetric('number16'); +export const mockMetric17 = createMockMetric('number17'); +export const mockMetric18 = createMockMetric('number18'); +export const mockMetric19 = createMockMetric('number19'); +export const mockMetric20 = createMockMetric('number20'); +export const mockMetric21 = createMockMetric('number21'); +export const mockMetric22 = createMockMetric('number22'); +export const mockMetric23 = createMockMetric('number23'); +export const mockMetric24 = createMockMetric('number24'); +export const mockMetric25 = createMockMetric('number25'); +export const mockMetric26 = createMockMetric('number26'); +export const mockMetric27 = createMockMetric('number27'); +export const mockMetric28 = createMockMetric('number28'); +export const mockMetric29 = createMockMetric('number29'); +export const mockMetric30 = createMockMetric('number30'); diff --git a/web/src/context/SQL/useSQLProvider.tsx b/web/src/context/SQL/useSQLProvider.tsx index 57438a0c1..ba06810f5 100644 --- a/web/src/context/SQL/useSQLProvider.tsx +++ b/web/src/context/SQL/useSQLProvider.tsx @@ -17,9 +17,9 @@ import { runSQL as runSQLRest } from '@/api/buster_rest'; export const useSQLProvider = () => { const { openSuccessNotification } = useBusterNotifications(); const onUpdateMetric = useBusterMetricsContextSelector((x) => x.onUpdateMetric); - const onSetMetricData = useBusterMetricDataContextSelector((x) => x.onSetMetricData); - const getAllMetricDataMemoized = useBusterMetricDataContextSelector( - (x) => x.getAllMetricDataMemoized + const onSetDataForMetric = useBusterMetricDataContextSelector((x) => x.onSetDataForMetric); + const getDataByMetricIdMemoized = useBusterMetricDataContextSelector( + (x) => x.getDataByMetricIdMemoized ); const updateMetricToServer = useBusterMetricsContextSelector((x) => x.updateMetricToServer); const getMetric = useBusterMetricsContextSelector((x) => x.getMetricMemoized); @@ -44,7 +44,7 @@ export const useSQLProvider = () => { if (metricId) { const { data, data_metadata } = d; const metricMessage = getMetric({ metricId }); - const currentMessageData = getAllMetricDataMemoized(metricId); + const currentMessageData = getDataByMetricIdMemoized(metricId); if (!originalConfigs.current[metricId]) { originalConfigs.current[metricId] = { chartConfig: metricMessage?.chart_config!, @@ -63,7 +63,7 @@ export const useSQLProvider = () => { ? simplifyChatConfigForSQLChange(metricMessage.chart_config, data_metadata) : metricMessage.chart_config; - onSetMetricData({ + onSetDataForMetric({ metricId, data, isDataFromRerun: true, @@ -114,7 +114,7 @@ export const useSQLProvider = () => { id: metricId, chart_config: oldConfig }); - onSetMetricData({ + onSetDataForMetric({ metricId, data: originalConfigs.current[metricId]?.data!, data_metadata: originalConfigs.current[metricId]?.dataMetadata!, @@ -165,7 +165,7 @@ export const useSQLProvider = () => { setWarnBeforeNavigating(false); if (originalConfigs.current[metricId]) { - onSetMetricData({ + onSetDataForMetric({ metricId, data: originalConfigs.current[metricId]?.data!, data_metadata: originalConfigs.current[metricId]?.dataMetadata!,