Merge branch 'staging' of https://github.com/buster-so/buster into staging

apps/web/src/app/app/(primary_layout)/(chat_experience)/reports/[reportId]/page.tsx

@@ -5,5 +5,5 @@ export default async function Page(props: { params: Promise<{ reportId: string }
 
   const { reportId } = params;
 
-  return <ReportPageController reportId={reportId} />;
+  return <ReportPageController reportId={reportId} mode="default" />;
 }

apps/web/src/components/ui/report/elements/MetricElement/MetricContent.tsx

@@ -10,13 +10,13 @@ export const MetricContent = React.memo(
   ({
     metricId,
     metricVersionNumber,
-    isBaseElement = false,
+    isExportMode = false,
     readOnly = false
   }: {
     metricId: string;
     metricVersionNumber: number | undefined;
     readOnly?: boolean;
-    isBaseElement?: boolean;
+    isExportMode?: boolean;
   }) => {
     const chatId = useChatLayoutContextSelector((x) => x.chatId);
     const reportId = useChatLayoutContextSelector((x) => x.reportId) || '';
@@ -24,9 +24,9 @@ export const MetricContent = React.memo(
     const ref = useRef<HTMLDivElement>(null);
 
     const [inViewport] = useInViewport(ref, {
-      threshold: isBaseElement ? 0 : 0.33
+      threshold: 0.33
     });
-    const renderChart = inViewport;
+    const renderChart = inViewport || isExportMode;
 
     const {
       data: metric,
@@ -72,8 +72,9 @@ export const MetricContent = React.memo(
 
     return (
       <MetricCard
+        ref={ref}
         metricLink={link}
-        animate={!isBaseElement}
+        animate={!isExportMode}
         metricId={metricId}
         readOnly={readOnly}
         isDragOverlay={false}

apps/web/src/components/ui/report/elements/MetricElement/MetricElement.tsx

@@ -30,18 +30,15 @@ export const MetricElement = withHOC(
     const metricId = props.element.metricId;
     const metricVersionNumber = props.element.metricVersionNumber;
     const readOnly = useReadOnly();
-    console.log(props.editor.getOptionsStore(GlobalVariablePlugin));
-    console.log(props.editor.getOptions(GlobalVariablePlugin));
     const mode = props.editor.getOption(GlobalVariablePlugin, 'mode');
 
-    console.log('mode', mode);
-
     const content = metricId ? (
       <MetricResizeContainer>
         <MetricContent
           metricId={metricId}
           metricVersionNumber={metricVersionNumber}
           readOnly={readOnly}
+          isExportMode={mode === 'export'}
         />
       </MetricResizeContainer>
     ) : (

apps/web/src/components/ui/report/useReportEditor.tsx

@@ -5,13 +5,12 @@ import { useEditorRef, usePlateEditor, type TPlateEditor } from 'platejs/react';
 import { useMemo } from 'react';
 import { EditorKit } from './editor-kit';
 import { FIXED_TOOLBAR_KIT_KEY } from './plugins/fixed-toolbar-kit';
-import { CUSTOM_KEYS } from './config/keys';
 import { GlobalVariablePlugin } from './plugins/global-variable-kit';
 
 export const useReportEditor = ({
   value,
   disabled,
-  mode,
+  mode = 'default',
   useFixedToolbarKit = false
 }: {
   value: Value;
@@ -27,10 +26,8 @@ export const useReportEditor = ({
 
     return [
       ...EditorKit,
-      GlobalVariablePlugin.configurePlugin(GlobalVariablePlugin, {
-        options: {
-          mode
-        }
+      GlobalVariablePlugin.configure({
+        options: { mode }
       })
     ].filter((p) => !filteredKeys.includes(p.key));
   }, []);

apps/web/src/controllers/ReportPageControllers/ReportPageController.tsx

@@ -2,7 +2,7 @@
 
 import { useGetReport, useUpdateReport } from '@/api/buster_rest/reports';
 import { cn } from '@/lib/utils';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { ReportPageHeader } from './ReportPageHeader';
 import { useMemoizedFn } from '@/hooks/useMemoizedFn';
 import { useDebounceFn } from '@/hooks/useDebounce';

apps/web/src/controllers/ReportPageControllers/useReportPageExport.tsx

@@ -4,6 +4,7 @@ import { useMemoizedFn } from '@/hooks/useMemoizedFn';
 import { useRef, useState } from 'react';
 import { ReportPageController } from './ReportPageController';
 import { printHTMLPage } from '@/lib/print';
+import { timeout } from '@/lib';
 
 const ExportContainerComponent: React.FC<{
   reportId: string;
@@ -18,13 +19,15 @@ const ExportContainerComponent: React.FC<{
       ref={ref}
       style={{
         width: '820px',
+        minWidth: '820px',
+        maxWidth: '820px',
         height: '100%',
         position: 'fixed',
         top: 0,
-        left: -1,
+        left: 0,
         right: 0,
         bottom: 0,
-        zIndex: 100
+        zIndex: -1
       }}>
       <ReportPageController
         reportId={reportId}
@@ -36,7 +39,7 @@ const ExportContainerComponent: React.FC<{
             if (immiateChild) {
               await buildHtmlMethod(immiateChild, reportName || '');
             }
-          }, 100);
+          }, 150);
         }}
       />
     </div>
@@ -63,10 +66,11 @@ export const useReportPageExport = ({
 
   const buildHtmlMethod = useMemoizedFn(async (node: HTMLElement, title: string) => {
     try {
+      await timeout(150); //wait for chart nodes to be rendered
       const result = await buildExportHtml({ root: node, title });
       printHTMLPage({ html: result, filename: title, closeOnPrint: false });
     } finally {
-      setIsExportingReport(false);
+      //  setIsExportingReport(false);
     }
   });
 
@@ -156,6 +160,13 @@ const buildExportHtml = async (options?: {
       clone.removeAttribute('spellcheck');
     }
 
+    // Ensure the cloned root has no padding and full width
+    const existingStyle = clonedRoot.getAttribute('style') || '';
+    clonedRoot.setAttribute(
+      'style',
+      `${existingStyle}; width: 100%; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: visible;`.trim()
+    );
+
     // Wrap content with a fixed width, centered container for consistency
     const wrapper = document.createElement('div');
     wrapper.setAttribute(