add snappy parameter to speed up auto-export

frontend/src/components/editor/actions/useNotebookActions.tsx

@@ -241,8 +241,8 @@ export function useNotebookActions() {
 
               const downloadPDF = async (progress: ProgressState) => {
                 await updateCellOutputsWithScreenshots({
-                  progress,
-                  takeScreenshots,
+                  takeScreenshots: () =>
+                    takeScreenshots({ progress, snappy: false }),
                   updateCellOutputs,
                 });
                 await downloadAsPDF({

frontend/src/core/export/__tests__/hooks.test.ts

@@ -102,8 +102,8 @@ describe("useEnrichCellOutputs", () => {
 
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
-    const enrichCellOutputs = result.current;
-    const output = await enrichCellOutputs(progress);
+    const takeScreenshots = result.current;
+    const output = await takeScreenshots({ progress, snappy: false });
 
     expect(output).toEqual({});
     expect(document.getElementById).not.toHaveBeenCalled();
@@ -134,8 +134,8 @@ describe("useEnrichCellOutputs", () => {
 
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
-    const enrichCellOutputs = result.current;
-    const output = await enrichCellOutputs(progress);
+    const takeScreenshots = result.current;
+    const output = await takeScreenshots({ progress, snappy: false });
 
     expect(document.getElementById).toHaveBeenCalledWith(
       CellOutputId.create(cellId),
@@ -152,6 +152,50 @@ describe("useEnrichCellOutputs", () => {
     });
   });
 
+  it("should pass snappy=true to toPng with includeStyleProperties", async () => {
+    const cellId = "cell-1" as CellId;
+    const mockElement = document.createElement("div");
+    const mockDataUrl = "data:image/png;base64,mockImageData";
+
+    // Mock document.getElementById
+    vi.spyOn(document, "getElementById").mockReturnValue(mockElement);
+    vi.mocked(toPng).mockResolvedValue(mockDataUrl);
+
+    setCellsRuntime(
+      createMockCellRuntimes({
+        [cellId]: {
+          output: {
+            channel: "output",
+            mimetype: "text/html",
+            data: "<div>Chart</div>",
+            timestamp: 0,
+          },
+        },
+      }),
+    );
+
+    const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
+
+    const takeScreenshots = result.current;
+    const output = await takeScreenshots({ progress, snappy: true });
+
+    expect(document.getElementById).toHaveBeenCalledWith(
+      CellOutputId.create(cellId),
+    );
+    // When snappy=true, includeStyleProperties should be set
+    expect(toPng).toHaveBeenCalledWith(
+      mockElement,
+      expect.objectContaining({
+        filter: expect.any(Function),
+        onImageErrorHandler: expect.any(Function),
+        includeStyleProperties: expect.any(Array),
+      }),
+    );
+    expect(output).toEqual({
+      [cellId]: ["image/png", mockDataUrl],
+    });
+  });
+
   it("should skip cells where output has not changed", async () => {
     const cellId = "cell-1" as CellId;
     const mockElement = document.createElement("div");
@@ -179,17 +223,17 @@ describe("useEnrichCellOutputs", () => {
     });
 
     // First call - should capture
-    let enrichCellOutputs = result.current;
-    let output = await enrichCellOutputs(progress);
+    let takeScreenshots = result.current;
+    let output = await takeScreenshots({ progress, snappy: false });
     expect(output).toEqual({ [cellId]: ["image/png", mockDataUrl] });
     expect(toPng).toHaveBeenCalledTimes(1);
 
     // Rerender to get updated atom state
     rerender();
 
     // Second call with same output - should not capture again
-    enrichCellOutputs = result.current;
-    output = await enrichCellOutputs(progress);
+    takeScreenshots = result.current;
+    output = await takeScreenshots({ progress, snappy: false });
     expect(output).toEqual({}); // Empty because output hasn't changed
     expect(toPng).toHaveBeenCalledTimes(1); // Still only 1 call
   });
@@ -217,8 +261,8 @@ describe("useEnrichCellOutputs", () => {
 
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
-    const enrichCellOutputs = result.current;
-    const output = await enrichCellOutputs(progress);
+    const takeScreenshots = result.current;
+    const output = await takeScreenshots({ progress, snappy: false });
 
     expect(output).toEqual({}); // Failed screenshot should be filtered out
     expect(Logger.error).toHaveBeenCalledWith(
@@ -247,8 +291,8 @@ describe("useEnrichCellOutputs", () => {
 
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
-    const enrichCellOutputs = result.current;
-    const output = await enrichCellOutputs(progress);
+    const takeScreenshots = result.current;
+    const output = await takeScreenshots({ progress, snappy: false });
 
     expect(output).toEqual({});
     expect(Logger.error).toHaveBeenCalledWith(
@@ -296,8 +340,8 @@ describe("useEnrichCellOutputs", () => {
 
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
-    const enrichCellOutputs = result.current;
-    const output = await enrichCellOutputs(progress);
+    const takeScreenshots = result.current;
+    const output = await takeScreenshots({ progress, snappy: false });
 
     expect(output).toEqual({
       [cell1]: ["image/png", mockDataUrl1],
@@ -342,8 +386,8 @@ describe("useEnrichCellOutputs", () => {
 
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
-    const enrichCellOutputs = result.current;
-    const output = await enrichCellOutputs(progress);
+    const takeScreenshots = result.current;
+    const output = await takeScreenshots({ progress, snappy: false });
 
     // Only the successful screenshot should be in the result
     expect(output).toEqual({
@@ -384,14 +428,14 @@ describe("useEnrichCellOutputs", () => {
     });
 
     // First screenshot
-    let enrichCellOutputs = result.current;
-    let output = await enrichCellOutputs(progress);
+    let takeScreenshots = result.current;
+    let output = await takeScreenshots({ progress, snappy: false });
     expect(output).toEqual({ [cellId]: ["image/png", mockDataUrl1] });
 
     // Second call - same output, should not be captured
     rerender();
-    enrichCellOutputs = result.current;
-    output = await enrichCellOutputs(progress);
+    takeScreenshots = result.current;
+    output = await takeScreenshots({ progress, snappy: false });
     expect(output).toEqual({});
 
     // Third call - output changed, should be captured
@@ -409,8 +453,8 @@ describe("useEnrichCellOutputs", () => {
     );
 
     rerender();
-    enrichCellOutputs = result.current;
-    output = await enrichCellOutputs(progress);
+    takeScreenshots = result.current;
+    output = await takeScreenshots({ progress, snappy: false });
     expect(output).toEqual({ [cellId]: ["image/png", mockDataUrl2] });
     expect(toPng).toHaveBeenCalledTimes(2);
   });
@@ -449,8 +493,8 @@ describe("useEnrichCellOutputs", () => {
 
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
-    const enrichCellOutputs = result.current;
-    const output = await enrichCellOutputs(progress);
+    const takeScreenshots = result.current;
+    const output = await takeScreenshots({ progress, snappy: false });
 
     // None of these should trigger screenshots
     expect(output).toEqual({});
@@ -474,8 +518,8 @@ describe("useEnrichCellOutputs", () => {
 
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
-    const enrichCellOutputs = result.current;
-    const output = await enrichCellOutputs(progress);
+    const takeScreenshots = result.current;
+    const output = await takeScreenshots({ progress, snappy: false });
 
     expect(output).toEqual({});
     expect(document.getElementById).not.toHaveBeenCalled();
@@ -506,8 +550,8 @@ describe("useEnrichCellOutputs", () => {
 
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
-    const enrichCellOutputs = result.current;
-    const output = await enrichCellOutputs(progress);
+    const takeScreenshots = result.current;
+    const output = await takeScreenshots({ progress, snappy: false });
 
     // Verify the exact return type structure
     expect(output).toHaveProperty(cellId);
@@ -539,7 +583,6 @@ describe("updateCellOutputsWithScreenshots", () => {
     const updateCellOutputs = vi.fn().mockResolvedValue(null);
 
     await updateCellOutputsWithScreenshots({
-      progress,
       takeScreenshots,
       updateCellOutputs,
     });
@@ -556,7 +599,6 @@ describe("updateCellOutputsWithScreenshots", () => {
     const updateCellOutputs = vi.fn().mockResolvedValue(null);
 
     await updateCellOutputsWithScreenshots({
-      progress,
       takeScreenshots,
       updateCellOutputs,
     });
@@ -583,7 +625,6 @@ describe("updateCellOutputsWithScreenshots", () => {
     const updateCellOutputs = vi.fn().mockResolvedValue(null);
 
     await updateCellOutputsWithScreenshots({
-      progress,
       takeScreenshots,
       updateCellOutputs,
     });
@@ -600,7 +641,6 @@ describe("updateCellOutputsWithScreenshots", () => {
 
     // Should not throw - errors are caught and shown via toast
     await updateCellOutputsWithScreenshots({
-      progress,
       takeScreenshots,
       updateCellOutputs,
     });
@@ -633,7 +673,6 @@ describe("updateCellOutputsWithScreenshots", () => {
 
     // Should not throw - errors are caught and shown via toast
     await updateCellOutputsWithScreenshots({
-      progress,
       takeScreenshots,
       updateCellOutputs,
     });

frontend/src/core/export/hooks.ts

@@ -64,9 +64,13 @@ export function useAutoExport() {
 
   useInterval(
     async () => {
+      const screenshotFn = () =>
+        takeScreenshots({
+          progress: ProgressState.indeterminate(),
+          snappy: true,
+        });
       await updateCellOutputsWithScreenshots({
-        progress: ProgressState.indeterminate(),
-        takeScreenshots,
+        takeScreenshots: screenshotFn,
         updateCellOutputs,
       });
       await autoExportAsIPYNB({
@@ -107,7 +111,13 @@ export function useEnrichCellOutputs() {
   const [richCellsOutput, setRichCellsOutput] = useAtom(richCellsToOutputAtom);
   const cellRuntimes = useAtomValue(cellsRuntimeAtom);
 
-  return async (progress: ProgressState): Promise<ScreenshotResults> => {
+  return async ({
+    progress,
+    snappy,
+  }: {
+    progress: ProgressState;
+    snappy: boolean;
+  }): Promise<ScreenshotResults> => {
     const trackedCellsOutput: Record<CellId, unknown> = {};
 
     const cellsToCaptureScreenshot: [CellId, unknown][] = [];
@@ -138,7 +148,7 @@ export function useEnrichCellOutputs() {
     const results: ScreenshotResults = {};
     for (const [cellId] of cellsToCaptureScreenshot) {
       try {
-        const dataUrl = await getImageDataUrlForCell(cellId, false);
+        const dataUrl = await getImageDataUrlForCell(cellId, snappy);
         if (!dataUrl) {
           Logger.error(`Failed to capture screenshot for cell ${cellId}`);
           continue;
@@ -159,13 +169,12 @@ export function useEnrichCellOutputs() {
  * Utility function to take screenshots of cells with HTML outputs and update the cell outputs.
  */
 export async function updateCellOutputsWithScreenshots(opts: {
-  progress: ProgressState;
-  takeScreenshots: (progress: ProgressState) => Promise<ScreenshotResults>;
+  takeScreenshots: () => Promise<ScreenshotResults>;
   updateCellOutputs: (request: UpdateCellOutputsRequest) => Promise<null>;
 }) {
-  const { progress, takeScreenshots, updateCellOutputs } = opts;
+  const { takeScreenshots, updateCellOutputs } = opts;
   try {
-    const cellIdsToOutput = await takeScreenshots(progress);
+    const cellIdsToOutput = await takeScreenshots();
     if (Objects.size(cellIdsToOutput) > 0) {
       await updateCellOutputs({ cellIdsToOutput });
     }