styles pass through

apps/web/src/routes/screenshots.tsx

@@ -1,12 +1,27 @@
+import { BaseScreenshotSearchSchema } from '@buster/server-shared/screenshots';
 import { createFileRoute, Outlet } from '@tanstack/react-router';
 import { ensureGetMyUserInfo } from '@/api/buster_rest/users';
 
 export const Route = createFileRoute('/screenshots')({
   ssr: true,
   component: RouteComponent,
-  beforeLoad: async ({ context }) => {
+  beforeLoad: async ({ context, search }) => {
     await ensureGetMyUserInfo(context.queryClient);
+    return {
+      backgroundColor: search.backgroundColor,
+    };
   },
+  validateSearch: BaseScreenshotSearchSchema,
+  loader: ({ context }) => ({
+    backgroundColor: context.backgroundColor,
+  }),
+  head: ({ loaderData }) => ({
+    styles: [
+      {
+        children: `body { background: ${loaderData?.backgroundColor}; }`,
+      },
+    ],
+  }),
 });
 
 function RouteComponent() {

apps/web/src/routes/screenshots/dashboards.$dashboardId.content.tsx

@@ -20,10 +20,23 @@ export const Route = createFileRoute('/screenshots/dashboards/$dashboardId/conte
       throw new Error('Dashboard not found');
     }
 
+    const numberOfMetrics = 8;
     const allMetrics = Object.entries(dashboard?.metrics || {});
+    const firstXMetrics = allMetrics.slice(0, numberOfMetrics);
+    const restMetrics = allMetrics.slice(numberOfMetrics);
 
+    Promise.all(
+      restMetrics.map(([metricId, metric]) => {
+        return ensureMetricData(context.queryClient, {
+          id: metricId,
+          version_number: metric.version_number,
+        });
+      })
+    );
+
+    //Only really need to wait for the first X metrics to be loaded
     await Promise.all(
-      allMetrics.map(([metricId, metric]) => {
+      firstXMetrics.map(([metricId, metric]) => {
         return ensureMetricData(context.queryClient, {
           id: metricId,
           version_number: metric.version_number,
@@ -38,13 +51,11 @@ export const Route = createFileRoute('/screenshots/dashboards/$dashboardId/conte
 function RouteComponent() {
   const { dashboardId, dashboardVersionNumber } = useGetDashboardParams();
   return (
-    <div className="h-full w-full bg-page-background overflow-y-auto">
-      <DashboardViewDashboardController
-        dashboardId={dashboardId}
-        dashboardVersionNumber={dashboardVersionNumber}
-        readOnly
-        animate={false}
-      />
-    </div>
+    <DashboardViewDashboardController
+      dashboardId={dashboardId}
+      dashboardVersionNumber={dashboardVersionNumber}
+      readOnly
+      animate={false}
+    />
   );
 }

apps/web/src/routes/screenshots/reports.$reportId.content.tsx

@@ -1,6 +1,8 @@
 import { GetReportScreenshotQuerySchema } from '@buster/server-shared/screenshots';
 import { createFileRoute } from '@tanstack/react-router';
+import { ensureMetricData } from '@/api/buster_rest/metrics';
 import { prefetchGetReport } from '@/api/buster_rest/reports';
+import { ReportPageController } from '@/controllers/ReportPageControllers';
 
 export const Route = createFileRoute('/screenshots/reports/$reportId/content')({
   component: RouteComponent,
@@ -17,10 +19,22 @@ export const Route = createFileRoute('/screenshots/reports/$reportId/content')({
       throw new Error('Report not found');
     }
 
+    const allMetrics = Object.entries(report?.metrics || {});
+
+    await Promise.all(
+      allMetrics.map(([metricId, metric]) => {
+        return ensureMetricData(context.queryClient, {
+          id: metricId,
+          version_number: metric.version_number,
+        });
+      })
+    );
+
     return { report };
   },
 });
 
 function RouteComponent() {
-  return <div>Hello "/screenshots/_content/reports/$reportId/conent"!</div>;
+  const { reportId } = Route.useParams();
+  return <ReportPageController reportId={reportId} readOnly mode="export" />;
 }

apps/web/src/styles/styles.css

@@ -34,8 +34,6 @@ pre {
 
 html,
 body {
-  background-color: var(--color-background-secondary);
-  min-width: 800px;
   /* // @media (prefers-color-scheme: dark) {
   //   background-color: #000000;
   //   color: #ffffff;

apps/web/src/styles/tailwind.css

@@ -276,7 +276,7 @@
     @apply border-border outline-ring/0;
   }
   body {
-    @apply bg-background-secondary text-foreground text-base h-full w-full;
+    @apply bg-background-secondary text-foreground text-base h-full w-full min-w-[800px];
   }
   html {
     @apply h-full w-full;

packages/server-shared/src/screenshots/index.ts

@@ -3,3 +3,4 @@ export * from './requests.metrics';
 export * from './requests.dashboards';
 export * from './requests.reports';
 export * from './requests.chats';
+export * from './requests.base';

packages/server-shared/src/screenshots/requests.base.ts

@@ -0,0 +1,7 @@
+import { z } from 'zod';
+
+export const BaseScreenshotSearchSchema = z.object({
+  backgroundColor: z.string().optional().default('#ffffff'),
+});
+
+export type ScreenshotSearch = z.infer<typeof BaseScreenshotSearchSchema>;

packages/server-shared/src/screenshots/requests.chats.ts

@@ -1,4 +1,5 @@
 import { z } from 'zod';
+import { BaseScreenshotSearchSchema } from './requests.base';
 
 export const PutChatScreenshotRequestSchema = z.object({
   base64Image: z.string(),
@@ -12,10 +13,12 @@ export const GetChatScreenshotParamsSchema = z.object({
 
 export type GetChatScreenshotParams = z.infer<typeof GetChatScreenshotParamsSchema>;
 
-export const GetChatScreenshotQuerySchema = z.object({
-  width: z.coerce.number().min(600).max(3840).default(600),
-  height: z.coerce.number().min(300).max(2160).default(338),
-  type: z.enum(['png', 'jpeg']).default('png'),
-});
+export const GetChatScreenshotQuerySchema = z
+  .object({
+    width: z.coerce.number().min(600).max(3840).default(600),
+    height: z.coerce.number().min(300).max(2160).default(338),
+    type: z.enum(['png', 'jpeg']).default('png'),
+  })
+  .merge(BaseScreenshotSearchSchema);
 
 export type GetChatScreenshotQuery = z.infer<typeof GetChatScreenshotQuerySchema>;

packages/server-shared/src/screenshots/requests.dashboards.ts

@@ -1,4 +1,5 @@
 import { z } from 'zod';
+import { BaseScreenshotSearchSchema } from './requests.base';
 
 export const PutDashboardScreenshotRequestSchema = z.object({
   base64Image: z.string(),
@@ -12,11 +13,13 @@ export const GetDashboardScreenshotParamsSchema = z.object({
 
 export type GetDashboardScreenshotParams = z.infer<typeof GetDashboardScreenshotParamsSchema>;
 
-export const GetDashboardScreenshotQuerySchema = z.object({
-  width: z.coerce.number().min(100).max(3840).default(800),
-  height: z.coerce.number().min(100).max(4160).default(450),
-  type: z.enum(['png', 'jpeg']).default('png'),
-  version_number: z.coerce.number().optional(),
-});
+export const GetDashboardScreenshotQuerySchema = z
+  .object({
+    width: z.coerce.number().min(100).max(3840).default(800),
+    height: z.coerce.number().min(100).max(4160).default(450),
+    type: z.enum(['png', 'jpeg']).default('png'),
+    version_number: z.coerce.number().optional(),
+  })
+  .merge(BaseScreenshotSearchSchema);
 
 export type GetDashboardScreenshotQuery = z.infer<typeof GetDashboardScreenshotQuerySchema>;

packages/server-shared/src/screenshots/requests.metrics.ts

@@ -1,15 +1,18 @@
 import { z } from 'zod';
+import { BaseScreenshotSearchSchema } from './requests.base';
 
 export const GetMetricScreenshotParamsSchema = z.object({
   id: z.string(),
 });
 
-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 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'),
+  })
+  .merge(BaseScreenshotSearchSchema);
 
 export type GetMetricScreenshotParams = z.infer<typeof GetMetricScreenshotParamsSchema>;
 export type GetMetricScreenshotQuery = z.infer<typeof GetMetricScreenshotQuerySchema>;

packages/server-shared/src/screenshots/requests.reports.ts

@@ -1,4 +1,5 @@
 import { z } from 'zod';
+import { BaseScreenshotSearchSchema } from './requests.base';
 
 export const PutReportScreenshotRequestSchema = z.object({
   base64Image: z.string(),
@@ -12,11 +13,13 @@ export const GetReportScreenshotParamsSchema = z.object({
 
 export type GetReportScreenshotParams = z.infer<typeof GetReportScreenshotParamsSchema>;
 
-export const GetReportScreenshotQuerySchema = z.object({
-  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'),
-  version_number: z.coerce.number().optional(),
-});
+export const GetReportScreenshotQuerySchema = z
+  .object({
+    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'),
+    version_number: z.coerce.number().optional(),
+  })
+  .merge(BaseScreenshotSearchSchema);
 
 export type GetReportScreenshotQuery = z.infer<typeof GetReportScreenshotQuerySchema>;