From 1758a2a8e841d89308aa10acc4cc869443bf49b2 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Mon, 22 Sep 2025 20:48:32 -0600 Subject: [PATCH] Update query request for get data --- .../metrics/getMetricQueryRequests.ts | 6 +-- apps/web/src/api/query_keys/metric.ts | 14 ++++++- .../MetricChartCard/MetricChartCard.tsx | 4 +- .../ReportMetricThreeDotMenu.tsx | 12 +++++- .../features/metrics/threeDotMenuHooks.tsx | 9 ++++- .../elements/MetricElement/MetricContent.tsx | 8 +++- .../MetricElement/MetricElementStatic.tsx | 39 ------------------- .../ui/report/elements/SlashNode.tsx | 4 +- 8 files changed, 44 insertions(+), 52 deletions(-) delete mode 100644 apps/web/src/components/ui/report/elements/MetricElement/MetricElementStatic.tsx diff --git a/apps/web/src/api/buster_rest/metrics/getMetricQueryRequests.ts b/apps/web/src/api/buster_rest/metrics/getMetricQueryRequests.ts index 531d4fae1..463c3b60c 100644 --- a/apps/web/src/api/buster_rest/metrics/getMetricQueryRequests.ts +++ b/apps/web/src/api/buster_rest/metrics/getMetricQueryRequests.ts @@ -143,11 +143,11 @@ export const useGetMetricData = ( { id = '', versionNumber: versionNumberProp, - reportFileId, + cacheDataId, }: { id: string | undefined; versionNumber?: number | 'LATEST'; - reportFileId?: string; + cacheDataId?: string; }, params?: Omit, 'queryKey' | 'queryFn'> ) => { @@ -172,7 +172,7 @@ export const useGetMetricData = ( id, version_number: chosenVersionNumber || undefined, password, - report_file_id: reportFileId, + report_file_id: cacheDataId, }); const latestVersionNumber = getLatestMetricVersion(id); const isLatest = diff --git a/apps/web/src/api/query_keys/metric.ts b/apps/web/src/api/query_keys/metric.ts index 3c716b3bb..b6965845a 100644 --- a/apps/web/src/api/query_keys/metric.ts +++ b/apps/web/src/api/query_keys/metric.ts @@ -26,9 +26,19 @@ export const metricsGetList = ( initialDataUpdatedAt: 0, }); -export const metricsGetData = (id: string, version_number: number | 'LATEST') => +export const metricsGetData = ( + id: string, + version_number: number | 'LATEST', + cacheDataId?: string +) => queryOptions({ - queryKey: ['metrics', 'data', id, version_number || 'LATEST'] as const, + queryKey: [ + 'metrics', + 'data', + id, + version_number || 'LATEST', + cacheDataId || 'live-data', + ] as const, staleTime: 1000 * 60 * 30, // 30 minutes, }); diff --git a/apps/web/src/components/features/metrics/MetricChartCard/MetricChartCard.tsx b/apps/web/src/components/features/metrics/MetricChartCard/MetricChartCard.tsx index 612740f7d..6967bbe5f 100644 --- a/apps/web/src/components/features/metrics/MetricChartCard/MetricChartCard.tsx +++ b/apps/web/src/components/features/metrics/MetricChartCard/MetricChartCard.tsx @@ -24,6 +24,7 @@ export type MetricChartCardProps = { animate?: boolean; renderChartContent?: boolean; // we do this to avoid expensive rendering if off screen disableTooltip?: boolean; + cacheDataId?: string; }; const stableMetricSelect = ({ @@ -60,6 +61,7 @@ export const MetricChartCard = React.memo( animate = true, renderChartContent = true, disableTooltip, + cacheDataId, }, ref ) => { @@ -71,7 +73,7 @@ export const MetricChartCard = React.memo( data: metricData, isFetched: isFetchedMetricData, error: metricDataError, - } = useGetMetricData({ id: metricId, versionNumber }); + } = useGetMetricData({ id: metricId, versionNumber, cacheDataId }); //data config const loadingData = !isFetchedMetricData; diff --git a/apps/web/src/components/features/metrics/ReportMetricItem/ReportMetricThreeDotMenu.tsx b/apps/web/src/components/features/metrics/ReportMetricItem/ReportMetricThreeDotMenu.tsx index a65ce6065..2dbcbafbd 100644 --- a/apps/web/src/components/features/metrics/ReportMetricItem/ReportMetricThreeDotMenu.tsx +++ b/apps/web/src/components/features/metrics/ReportMetricItem/ReportMetricThreeDotMenu.tsx @@ -21,11 +21,13 @@ import { export const ReportMetricThreeDotMenu = ({ metricId, metricVersionNumber, + reportId, }: { metricId: string; metricVersionNumber: number | undefined; + reportId: string; }) => { - const items = useReportMetricThreeDotMenu({ metricId, metricVersionNumber }); + const items = useReportMetricThreeDotMenu({ metricId, metricVersionNumber, reportId }); return ; }; @@ -33,9 +35,11 @@ export const ReportMetricThreeDotMenu = ({ const useReportMetricThreeDotMenu = ({ metricId, metricVersionNumber, + reportId, }: { metricId: string; metricVersionNumber: number | undefined; + reportId: string; }): IDropdownItems => { const editor = useEditorRef(); const element = useElement(); @@ -52,7 +56,11 @@ const useReportMetricThreeDotMenu = ({ metricId, metricVersionNumber, }); - const downloadCSV = useDownloadMetricDataCSV({ metricId, metricVersionNumber }); + const downloadCSV = useDownloadMetricDataCSV({ + metricId, + metricVersionNumber, + cacheDataId: reportId, + }); const downloadPNG = useDownloadPNGSelectMenu({ metricId, metricVersionNumber }); const renameMetric = useRenameMetricOnPage({ metricId, diff --git a/apps/web/src/components/features/metrics/threeDotMenuHooks.tsx b/apps/web/src/components/features/metrics/threeDotMenuHooks.tsx index be844f7e9..cd116a5ec 100644 --- a/apps/web/src/components/features/metrics/threeDotMenuHooks.tsx +++ b/apps/web/src/components/features/metrics/threeDotMenuHooks.tsx @@ -159,16 +159,21 @@ export const useRenameMetricOnPage = ({ export const useDownloadMetricDataCSV = ({ metricId, metricVersionNumber, + cacheDataId, }: { metricId: string; metricVersionNumber: number | undefined; + cacheDataId?: string; }) => { const [isDownloading, setIsDownloading] = useState(false); const { data: metricData } = useGetMetricData( - { id: metricId, versionNumber: metricVersionNumber }, + { id: metricId, versionNumber: metricVersionNumber, cacheDataId }, { enabled: false } ); - const { data: name } = useGetMetric({ id: metricId }, { select: (x) => x.name }); + const { data: name } = useGetMetric( + { id: metricId }, + { select: useCallback((x: BusterMetric) => x.name, []) } + ); return useMemo( () => ({ diff --git a/apps/web/src/components/ui/report/elements/MetricElement/MetricContent.tsx b/apps/web/src/components/ui/report/elements/MetricElement/MetricContent.tsx index 111f981f9..2fca96f91 100644 --- a/apps/web/src/components/ui/report/elements/MetricElement/MetricContent.tsx +++ b/apps/web/src/components/ui/report/elements/MetricElement/MetricContent.tsx @@ -1,27 +1,31 @@ import React, { useRef } from 'react'; import { MetricChartCard } from '@/components/features/metrics/MetricChartCard'; import { ReportMetricThreeDotMenu } from '@/components/features/metrics/ReportMetricItem'; +import { useGetReportParams } from '@/context/Reports/useGetReportParams'; import { useInViewport } from '@/hooks/useInViewport'; export const MetricContent = React.memo( ({ metricId, metricVersionNumber, + isExportMode = false, readOnly = false, className, }: { metricId: string; metricVersionNumber: number | undefined; + readOnly?: boolean; isExportMode?: boolean; className?: string; }) => { + const { reportId = '' } = useGetReportParams(); const ref = useRef(null); const hasBeenInViewport = useRef(false); const [inViewport] = useInViewport(ref, { - threshold: 0.25, + threshold: 0.275, }); if (inViewport && !hasBeenInViewport.current) { hasBeenInViewport.current = true; @@ -38,11 +42,13 @@ export const MetricContent = React.memo( renderChartContent={renderChart} animate={!isExportMode} className={className} + cacheDataId={reportId} headerSecondaryContent={ !readOnly && ( ) } diff --git a/apps/web/src/components/ui/report/elements/MetricElement/MetricElementStatic.tsx b/apps/web/src/components/ui/report/elements/MetricElement/MetricElementStatic.tsx deleted file mode 100644 index 3b87731c1..000000000 --- a/apps/web/src/components/ui/report/elements/MetricElement/MetricElementStatic.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { - SlateElement, - type SlateElementProps, - type TCaptionProps, - type TResizableProps, -} from 'platejs'; -import type { TMetricElement } from '../../plugins/metric-kit'; -import { MetricContent } from './MetricContent'; -import { MetricEmbedPlaceholder } from './MetricPlaceholder'; - -export const MetricElementStatic = ( - props: SlateElementProps -) => { - const metricId = props.element.metricId; - const metricVersionNumber = props.element.metricVersionNumber; - const readOnly = true; - const { align = 'center', caption, url, width } = props.element; - - const content = metricId ? ( - - ) : ( - - ); - - return ( - -
-
- {content} -
-
{props.children}
-
- - ); -}; diff --git a/apps/web/src/components/ui/report/elements/SlashNode.tsx b/apps/web/src/components/ui/report/elements/SlashNode.tsx index d97348ae2..cea5fa650 100644 --- a/apps/web/src/components/ui/report/elements/SlashNode.tsx +++ b/apps/web/src/components/ui/report/elements/SlashNode.tsx @@ -37,11 +37,11 @@ export function SlashInputElement(props: PlateElementProps)