ensure data before taking screenshot

apps/web/src/api/buster_rest/metrics/getMetricQueryRequests.ts

@@ -227,6 +227,18 @@ export const prefetchGetMetricDataClient = async (
   }
 };
 
+export const ensureMetricData = async (
+  queryClient: QueryClient,
+  params: Parameters<typeof getMetricData>[0]
+) => {
+  const { id, version_number, report_file_id } = params;
+  const options = metricsQueryKeys.metricsGetData(id, version_number || 'LATEST', report_file_id);
+  return await queryClient.ensureQueryData({
+    ...options,
+    queryFn: () => getMetricData({ id, version_number, report_file_id }),
+  });
+};
+
 //used in list version histories
 export const usePrefetchGetMetricDataClient = () => {
   const queryClient = useQueryClient();

apps/web/src/components/features/metrics/MetricViewChart/MetricViewChart.tsx

@@ -13,8 +13,16 @@ export const MetricViewChart: React.FC<{
   readOnly?: boolean;
   className?: string;
   cardClassName?: string;
+  animate?: boolean;
 }> = React.memo(
-  ({ metricId, versionNumber, readOnly = false, className = '', cardClassName = '' }) => {
+  ({
+    metricId,
+    versionNumber,
+    readOnly = false,
+    className = '',
+    cardClassName = '',
+    animate = true,
+  }) => {
     const { data: hasMoreRecords } = useGetMetricData(
       { id: metricId, versionNumber },
       { select: stableMetricDataSelect }
@@ -28,6 +36,7 @@ export const MetricViewChart: React.FC<{
             versionNumber={versionNumber}
             readOnly={readOnly}
             className={cardClassName}
+            animate={animate}
           />
           {hasMoreRecords && (
             <MetricDataTruncatedWarning metricId={metricId} metricVersionNumber={versionNumber} />

apps/web/src/context/BusterAssets/metric-server/metricEmbedServerContext.tsx

@@ -9,6 +9,7 @@ export const ssr = true;
 
 export const component = () => {
   const { metricId, metricVersionNumber } = useGetMetricParams();
+
   return (
     <AppAssetCheckLayout assetType={'metric_file'}>
       <MetricViewChartController

apps/web/src/controllers/MetricController/MetricViewChartController/MetricViewChartController.tsx

@@ -9,11 +9,13 @@ export const MetricViewChartController: React.FC<{
   readOnly?: boolean;
   className?: string;
   cardClassName?: string;
+  animate?: boolean;
 }> = React.memo(
   ({
     metricId,
     versionNumber,
     readOnly: readOnlyProp = false,
+    animate = true,
     className = '',
     cardClassName = '',
   }) => {
@@ -30,6 +32,7 @@ export const MetricViewChartController: React.FC<{
           readOnly={isReadOnly}
           className={className}
           cardClassName={cardClassName}
+          animate={animate}
         />
         {!isReadOnly && !isVersionHistoryMode && !isViewingOldVersion && (
           <MetricSaveFilePopup metricId={metricId} />

apps/web/src/routes/screenshots/_content/metrics.$metricId.content.tsx

@@ -1,35 +1,42 @@
 import { createFileRoute } from '@tanstack/react-router';
-import { prefetchGetMetric } from '@/api/buster_rest/metrics';
-import { useGetUserBasicInfo } from '@/api/buster_rest/users/useGetUserInfo';
+import { ensureMetricData, prefetchGetMetric } from '@/api/buster_rest/metrics';
+import { useGetMetricParams } from '@/context/Metrics/useGetMetricParams';
+import { MetricViewChartController } from '@/controllers/MetricController/MetricViewChartController';
 import { GetMetricScreenshotQuerySchema } from '../metrics.$metricId.index';
 
 export const Route = createFileRoute('/screenshots/_content/metrics/$metricId/content')({
-  component: RouteComponent,
   validateSearch: GetMetricScreenshotQuerySchema,
   ssr: true,
-  beforeLoad: async ({ context, params, search, matches }) => {
-    const lastMatch = matches[matches.length - 1];
-    const res = await prefetchGetMetric(context.queryClient, {
+  beforeLoad: async ({ context, params, search }) => {
+    const [metric, metricData] = await Promise.all([
+      prefetchGetMetric(context.queryClient, {
         id: params.metricId,
         version_number: search.version_number,
-    });
-    if (!res) {
+      }),
+      ensureMetricData(context.queryClient, {
+        id: params.metricId,
+        version_number: search.version_number,
+      }),
+    ]);
+    if (!metric || !metricData) {
       throw new Error('Metric not found');
     }
     return {
-      metric: res,
+      metric,
     };
   },
-});
-
-function RouteComponent() {
-  const { version_number, type, width, height } = Route.useSearch();
-  const x = useGetUserBasicInfo();
 
+  component: () => {
+    const { metricId, metricVersionNumber } = useGetMetricParams();
     return (
-    <div className="p-10 flex flex-col h-full border-red-500 border-10 items-center justify-center bg-blue-100 text-2xl text-blue-500">
-      <div> Hello "/screenshot/hello-world"!</div>
-      <div className="truncate max-w-[300px]">{x?.name}</div>
-    </div>
+      <MetricViewChartController
+        metricId={metricId}
+        versionNumber={metricVersionNumber}
+        className="h-full w-full p-0 border-0!"
+        cardClassName="max-h-full! border-0!"
+        readOnly
+        animate={false}
+      />
     );
-}
+  },
+});