metric index test

apps/web/src/routeTree.gen.ts

@@ -18,7 +18,6 @@ import { Route as AuthRouteImport } from './routes/auth'
 import { Route as AppRouteImport } from './routes/app'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as AppIndexRouteImport } from './routes/app/index'
-import { Route as ScreenshotsHelloWorldRouteImport } from './routes/screenshots/hello-world'
 import { Route as InfoGettingStartedRouteImport } from './routes/info/getting-started'
 import { Route as AuthResetPasswordRouteImport } from './routes/auth.reset-password'
 import { Route as AuthLogoutRouteImport } from './routes/auth.logout'
@@ -46,6 +45,7 @@ import { Route as AppAppDatasetsIndexRouteImport } from './routes/app/_app/datas
 import { Route as AppAppDashboardsIndexRouteImport } from './routes/app/_app/dashboards.index'
 import { Route as AppAppCollectionsIndexRouteImport } from './routes/app/_app/collections.index'
 import { Route as AppAppChatsIndexRouteImport } from './routes/app/_app/chats.index'
+import { Route as ScreenshotsMetricsMetricIdContentRouteImport } from './routes/screenshots/metrics.$metricId.content'
 import { Route as AppSettingsRestricted_layoutAdmin_onlyRouteImport } from './routes/app/_settings/_restricted_layout/_admin_only'
 import { Route as AppAppHomeShortcutsRouteImport } from './routes/app/_app/home/shortcuts'
 import { Route as AppAppDatasetsDatasetIdRouteImport } from './routes/app/_app/datasets.$datasetId'
@@ -155,7 +155,7 @@ import { Route as AppAppAssetChatsChatIdDashboardsDashboardIdMetricsMetricIdCont
 import { Route as AppAppAssetChatsChatIdDashboardsDashboardIdMetricsMetricIdContentChartRouteImport } from './routes/app/_app/_asset/chats.$chatId/dashboards.$dashboardId/metrics.$metricId/_content/chart'
 import { ServerRoute as AuthConfirmServerRouteImport } from './routes/auth.confirm'
 import { ServerRoute as AuthCallbackServerRouteImport } from './routes/auth.callback'
-import { ServerRoute as ScreenshotsMetricsMetricIdServerRouteImport } from './routes/screenshots/metrics.$metricId'
+import { ServerRoute as ScreenshotsMetricsMetricIdIndexServerRouteImport } from './routes/screenshots/metrics.$metricId.index'
 
 const EmbedChatChatIdReportsReportIdRouteImport = createFileRoute(
   '/embed/chat/$chatId/reports/$reportId',
@@ -237,11 +237,6 @@ const AppIndexRoute = AppIndexRouteImport.update({
   path: '/',
   getParentRoute: () => AppRoute,
 } as any)
-const ScreenshotsHelloWorldRoute = ScreenshotsHelloWorldRouteImport.update({
-  id: '/screenshots/hello-world',
-  path: '/screenshots/hello-world',
-  getParentRoute: () => rootRouteImport,
-} as any)
 const InfoGettingStartedRoute = InfoGettingStartedRouteImport.update({
   id: '/info/getting-started',
   path: '/info/getting-started',
@@ -375,6 +370,12 @@ const AppAppChatsIndexRoute = AppAppChatsIndexRouteImport.update({
   path: '/chats/',
   getParentRoute: () => AppAppRoute,
 } as any)
+const ScreenshotsMetricsMetricIdContentRoute =
+  ScreenshotsMetricsMetricIdContentRouteImport.update({
+    id: '/screenshots/metrics/$metricId/content',
+    path: '/screenshots/metrics/$metricId/content',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 const AppSettingsRestricted_layoutAdmin_onlyRoute =
   AppSettingsRestricted_layoutAdmin_onlyRouteImport.update({
     id: '/_admin_only',
@@ -1187,10 +1188,10 @@ const AuthCallbackServerRoute = AuthCallbackServerRouteImport.update({
   path: '/auth/callback',
   getParentRoute: () => rootServerRouteImport,
 } as any)
-const ScreenshotsMetricsMetricIdServerRoute =
+const ScreenshotsMetricsMetricIdIndexServerRoute =
-  ScreenshotsMetricsMetricIdServerRouteImport.update({
+  ScreenshotsMetricsMetricIdIndexServerRouteImport.update({
-    id: '/screenshots/metrics/$metricId',
+    id: '/screenshots/metrics/$metricId/',
-    path: '/screenshots/metrics/$metricId',
+    path: '/screenshots/metrics/$metricId/',
     getParentRoute: () => rootServerRouteImport,
   } as any)
 
@@ -1204,7 +1205,6 @@ export interface FileRoutesByFullPath {
   '/auth/logout': typeof AuthLogoutRoute
   '/auth/reset-password': typeof AuthResetPasswordRoute
   '/info/getting-started': typeof InfoGettingStartedRoute
-  '/screenshots/hello-world': typeof ScreenshotsHelloWorldRoute
   '/app/': typeof AppIndexRoute
   '/app/home': typeof AppAppHomeRouteWithChildren
   '/app/new-user': typeof AppAppNewUserRouteWithChildren
@@ -1215,6 +1215,7 @@ export interface FileRoutesByFullPath {
   '/embed/report/$reportId': typeof EmbedReportReportIdRoute
   '/app/datasets/$datasetId': typeof AppAppDatasetsDatasetIdRouteWithChildren
   '/app/home/shortcuts': typeof AppAppHomeShortcutsRoute
+  '/screenshots/metrics/$metricId/content': typeof ScreenshotsMetricsMetricIdContentRoute
   '/app/chats': typeof AppAppChatsIndexRoute
   '/app/collections': typeof AppAppCollectionsIndexRoute
   '/app/dashboards': typeof AppAppDashboardsIndexRoute
@@ -1341,13 +1342,13 @@ export interface FileRoutesByTo {
   '/auth/logout': typeof AuthLogoutRoute
   '/auth/reset-password': typeof AuthResetPasswordRoute
   '/info/getting-started': typeof InfoGettingStartedRoute
-  '/screenshots/hello-world': typeof ScreenshotsHelloWorldRoute
   '/app/test-pagination': typeof AppAppTestPaginationRoute
   '/embed/dashboard/$dashboardId': typeof EmbedDashboardDashboardIdRoute
   '/embed/metric/$metricId': typeof EmbedMetricMetricIdRoute
   '/embed/report/$reportId': typeof EmbedReportReportIdRoute
   '/app/datasets/$datasetId': typeof AppAppDatasetsDatasetIdRouteWithChildren
   '/app/home/shortcuts': typeof AppAppHomeShortcutsRoute
+  '/screenshots/metrics/$metricId/content': typeof ScreenshotsMetricsMetricIdContentRoute
   '/app/chats': typeof AppAppChatsIndexRoute
   '/app/collections': typeof AppAppCollectionsIndexRoute
   '/app/dashboards': typeof AppAppDashboardsIndexRoute
@@ -1455,7 +1456,6 @@ export interface FileRoutesById {
   '/auth/logout': typeof AuthLogoutRoute
   '/auth/reset-password': typeof AuthResetPasswordRoute
   '/info/getting-started': typeof InfoGettingStartedRoute
-  '/screenshots/hello-world': typeof ScreenshotsHelloWorldRoute
   '/app/': typeof AppIndexRoute
   '/app/_app/_asset': typeof AppAppAssetRouteWithChildren
   '/app/_app/home': typeof AppAppHomeRouteWithChildren
@@ -1470,6 +1470,7 @@ export interface FileRoutesById {
   '/app/_app/datasets/$datasetId': typeof AppAppDatasetsDatasetIdRouteWithChildren
   '/app/_app/home/shortcuts': typeof AppAppHomeShortcutsRoute
   '/app/_settings/_restricted_layout/_admin_only': typeof AppSettingsRestricted_layoutAdmin_onlyRouteWithChildren
+  '/screenshots/metrics/$metricId/content': typeof ScreenshotsMetricsMetricIdContentRoute
   '/app/_app/chats/': typeof AppAppChatsIndexRoute
   '/app/_app/collections/': typeof AppAppCollectionsIndexRoute
   '/app/_app/dashboards/': typeof AppAppDashboardsIndexRoute
@@ -1613,7 +1614,6 @@ export interface FileRouteTypes {
     | '/auth/logout'
     | '/auth/reset-password'
     | '/info/getting-started'
-    | '/screenshots/hello-world'
     | '/app/'
     | '/app/home'
     | '/app/new-user'
@@ -1624,6 +1624,7 @@ export interface FileRouteTypes {
     | '/embed/report/$reportId'
     | '/app/datasets/$datasetId'
     | '/app/home/shortcuts'
+    | '/screenshots/metrics/$metricId/content'
     | '/app/chats'
     | '/app/collections'
     | '/app/dashboards'
@@ -1750,13 +1751,13 @@ export interface FileRouteTypes {
     | '/auth/logout'
     | '/auth/reset-password'
     | '/info/getting-started'
-    | '/screenshots/hello-world'
     | '/app/test-pagination'
     | '/embed/dashboard/$dashboardId'
     | '/embed/metric/$metricId'
     | '/embed/report/$reportId'
     | '/app/datasets/$datasetId'
     | '/app/home/shortcuts'
+    | '/screenshots/metrics/$metricId/content'
     | '/app/chats'
     | '/app/collections'
     | '/app/dashboards'
@@ -1863,7 +1864,6 @@ export interface FileRouteTypes {
     | '/auth/logout'
     | '/auth/reset-password'
     | '/info/getting-started'
-    | '/screenshots/hello-world'
     | '/app/'
     | '/app/_app/_asset'
     | '/app/_app/home'
@@ -1878,6 +1878,7 @@ export interface FileRouteTypes {
     | '/app/_app/datasets/$datasetId'
     | '/app/_app/home/shortcuts'
     | '/app/_settings/_restricted_layout/_admin_only'
+    | '/screenshots/metrics/$metricId/content'
     | '/app/_app/chats/'
     | '/app/_app/collections/'
     | '/app/_app/dashboards/'
@@ -2017,23 +2018,23 @@ export interface RootRouteChildren {
   EmbedRoute: typeof EmbedRouteWithChildren
   HealthcheckRoute: typeof HealthcheckRoute
   InfoGettingStartedRoute: typeof InfoGettingStartedRoute
-  ScreenshotsHelloWorldRoute: typeof ScreenshotsHelloWorldRoute
+  ScreenshotsMetricsMetricIdContentRoute: typeof ScreenshotsMetricsMetricIdContentRoute
 }
 export interface FileServerRoutesByFullPath {
   '/auth/callback': typeof AuthCallbackServerRoute
   '/auth/confirm': typeof AuthConfirmServerRoute
-  '/screenshots/metrics/$metricId': typeof ScreenshotsMetricsMetricIdServerRoute
+  '/screenshots/metrics/$metricId': typeof ScreenshotsMetricsMetricIdIndexServerRoute
 }
 export interface FileServerRoutesByTo {
   '/auth/callback': typeof AuthCallbackServerRoute
   '/auth/confirm': typeof AuthConfirmServerRoute
-  '/screenshots/metrics/$metricId': typeof ScreenshotsMetricsMetricIdServerRoute
+  '/screenshots/metrics/$metricId': typeof ScreenshotsMetricsMetricIdIndexServerRoute
 }
 export interface FileServerRoutesById {
   __root__: typeof rootServerRouteImport
   '/auth/callback': typeof AuthCallbackServerRoute
   '/auth/confirm': typeof AuthConfirmServerRoute
-  '/screenshots/metrics/$metricId': typeof ScreenshotsMetricsMetricIdServerRoute
+  '/screenshots/metrics/$metricId/': typeof ScreenshotsMetricsMetricIdIndexServerRoute
 }
 export interface FileServerRouteTypes {
   fileServerRoutesByFullPath: FileServerRoutesByFullPath
@@ -2047,13 +2048,13 @@ export interface FileServerRouteTypes {
     | '__root__'
     | '/auth/callback'
     | '/auth/confirm'
-    | '/screenshots/metrics/$metricId'
+    | '/screenshots/metrics/$metricId/'
   fileServerRoutesById: FileServerRoutesById
 }
 export interface RootServerRouteChildren {
   AuthCallbackServerRoute: typeof AuthCallbackServerRoute
   AuthConfirmServerRoute: typeof AuthConfirmServerRoute
-  ScreenshotsMetricsMetricIdServerRoute: typeof ScreenshotsMetricsMetricIdServerRoute
+  ScreenshotsMetricsMetricIdIndexServerRoute: typeof ScreenshotsMetricsMetricIdIndexServerRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -2100,13 +2101,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppIndexRouteImport
       parentRoute: typeof AppRoute
     }
-    '/screenshots/hello-world': {
-      id: '/screenshots/hello-world'
-      path: '/screenshots/hello-world'
-      fullPath: '/screenshots/hello-world'
-      preLoaderRoute: typeof ScreenshotsHelloWorldRouteImport
-      parentRoute: typeof rootRouteImport
-    }
     '/info/getting-started': {
       id: '/info/getting-started'
       path: '/info/getting-started'
@@ -2296,6 +2290,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppAppChatsIndexRouteImport
       parentRoute: typeof AppAppRoute
     }
+    '/screenshots/metrics/$metricId/content': {
+      id: '/screenshots/metrics/$metricId/content'
+      path: '/screenshots/metrics/$metricId/content'
+      fullPath: '/screenshots/metrics/$metricId/content'
+      preLoaderRoute: typeof ScreenshotsMetricsMetricIdContentRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/app/_settings/_restricted_layout/_admin_only': {
       id: '/app/_settings/_restricted_layout/_admin_only'
       path: ''
@@ -3168,11 +3169,11 @@ declare module '@tanstack/react-start/server' {
       preLoaderRoute: typeof AuthCallbackServerRouteImport
       parentRoute: typeof rootServerRouteImport
     }
-    '/screenshots/metrics/$metricId': {
+    '/screenshots/metrics/$metricId/': {
-      id: '/screenshots/metrics/$metricId'
+      id: '/screenshots/metrics/$metricId/'
       path: '/screenshots/metrics/$metricId'
       fullPath: '/screenshots/metrics/$metricId'
-      preLoaderRoute: typeof ScreenshotsMetricsMetricIdServerRouteImport
+      preLoaderRoute: typeof ScreenshotsMetricsMetricIdIndexServerRouteImport
       parentRoute: typeof rootServerRouteImport
     }
   }
@@ -4185,7 +4186,8 @@ const rootRouteChildren: RootRouteChildren = {
   EmbedRoute: EmbedRouteWithChildren,
   HealthcheckRoute: HealthcheckRoute,
   InfoGettingStartedRoute: InfoGettingStartedRoute,
-  ScreenshotsHelloWorldRoute: ScreenshotsHelloWorldRoute,
+  ScreenshotsMetricsMetricIdContentRoute:
+    ScreenshotsMetricsMetricIdContentRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
@@ -4193,7 +4195,8 @@ export const routeTree = rootRouteImport
 const rootServerRouteChildren: RootServerRouteChildren = {
   AuthCallbackServerRoute: AuthCallbackServerRoute,
   AuthConfirmServerRoute: AuthConfirmServerRoute,
-  ScreenshotsMetricsMetricIdServerRoute: ScreenshotsMetricsMetricIdServerRoute,
+  ScreenshotsMetricsMetricIdIndexServerRoute:
+    ScreenshotsMetricsMetricIdIndexServerRoute,
 }
 export const serverRouteTree = rootServerRouteImport
   ._addFileChildren(rootServerRouteChildren)

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

@@ -1,20 +1,15 @@
 import { createFileRoute } from '@tanstack/react-router';
-import { useMount } from '@/hooks/useMount';
+import { z } from 'zod';
+import { GetMetricScreenshotQuerySchema } from './metrics.$metricId.index';
 
-export const Route = createFileRoute('/screenshots/hello-world')({
+export const Route = createFileRoute('/screenshots/metrics/$metricId/content')({
   component: RouteComponent,
+  validateSearch: GetMetricScreenshotQuerySchema,
+  ssr: true,
 });
 
 function RouteComponent() {
-  useMount(() => {
+  const { version_number, type, width, height } = Route.useSearch();
-    // getMetricScreenshot({
-    //   data: {
-    //     metricId: '123',
-    //   },
-    // }).then((res) => {
-    //   console.log(res);
-    // });
-  });
 
   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">

apps/web/src/routes/screenshots/metrics.$metricId.index.tsx

@@ -1,23 +1,24 @@
 import { createServerFileRoute } from '@tanstack/react-start/server';
 import { chromium } from 'playwright';
 import { z } from 'zod';
-import { Route as HelloWorldRoute } from './hello-world';
+import { Route as MetricContentRoute } from './metrics.$metricId.content';
 
-const GetMetricScreenshotParamsSchema = z.object({
+export const GetMetricScreenshotParamsSchema = z.object({
   metricId: z.string(),
 });
 
-const GetMetricScreenshotQuerySchema = z.object({
+export const GetMetricScreenshotQuerySchema = z.object({
   version_number: z.coerce.number().min(1).optional(),
   width: z.coerce.number().min(100).max(3840).default(800),
   height: z.coerce.number().min(100).max(2160).default(450),
+  type: z.enum(['png', 'jpeg']).default('png'),
 });
 
-export const ServerRoute = createServerFileRoute('/screenshots/metrics/$metricId').methods({
+export const ServerRoute = createServerFileRoute('/screenshots/metrics/$metricId/').methods({
   GET: async ({ request, params }) => {
     console.time('capture screenshot');
     const { metricId } = GetMetricScreenshotParamsSchema.parse(params);
-    const { version_number, width, height } = GetMetricScreenshotQuerySchema.parse(
+    const { version_number, type, width, height } = GetMetricScreenshotQuerySchema.parse(
       Object.fromEntries(new URL(request.url).searchParams)
     );
     const origin = new URL(request.url).origin;
@@ -30,11 +31,11 @@ export const ServerRoute = createServerFileRoute('/screenshots/metrics/$metricId
       });
       console.timeLog('capture screenshot', 'page created');
 
-      const fullPath = `${origin}${HelloWorldRoute.fullPath}`;
+      const fullPath = `${origin}${MetricContentRoute.fullPath}`;
       await page.goto(fullPath, { waitUntil: 'networkidle' });
       console.timeLog('capture screenshot', 'page navigated');
       const screenshotBuffer = await page.screenshot({
-        type: 'png',
+        type,
       });
       console.timeLog('capture screenshot', 'screenshot taken');
       console.timeEnd('capture screenshot');