@kanaries/graphic-walker 0.3.10 → 0.3.12

package/src/utils/vegaApiExport.ts

@@ -1,11 +1,16 @@
-import { useImperativeHandle, type ForwardedRef, type MutableRefObject, useEffect } from "react";
-import type { View } from "vega";
+import { useImperativeHandle, type ForwardedRef, type MutableRefObject, useEffect, RefObject } from "react";
 import { useAppRootContext } from "../components/appRoot";
 import type { IReactVegaHandler } from "../vis/react-vega";
-import type { IChartExportResult } from "../interfaces";
+import type { IChartExportResult, IVegaChartRef } from "../interfaces";
 
 
-export const useVegaExportApi = (name: string | undefined, viewsRef: MutableRefObject<{ x: number; y: number; w: number; h: number; view: View }[]>, ref: ForwardedRef<IReactVegaHandler>) => {
+export const useVegaExportApi = (
+    name: string | undefined,
+    viewsRef: MutableRefObject<IVegaChartRef[]>,
+    ref: ForwardedRef<IReactVegaHandler>,
+    renderTaskRefs: MutableRefObject<Promise<unknown>[]>,
+    containerRef: RefObject<HTMLDivElement>,
+) => {
     const renderHandle = {
         getSVGData() {
             return Promise.all(viewsRef.current.map(item => item.view.toSVG()));
@@ -47,12 +52,73 @@ export const useVegaExportApi = (name: string | undefined, viewsRef: MutableRefO
     };
     
     useImperativeHandle(ref, () => renderHandle);
-    
+
     const appRef = useAppRootContext();
     
     useEffect(() => {
-        if (appRef && 'current' in appRef && appRef.current) {
-            appRef.current.exportChart = (async (mode: IChartExportResult['mode'] = 'svg') => {
+        const ctx = appRef.current;
+        if (ctx) {
+            Promise.all(renderTaskRefs.current).then(() => {
+                if (appRef.current) {
+                    const appCtx = appRef.current;
+                    if (appCtx.renderStatus !== 'rendering') {
+                        return;
+                    }
+                    // add a short delay to wait for the canvas to be ready
+                    setTimeout(() => {
+                        if (appCtx.renderStatus !== 'rendering') {
+                            return;
+                        }
+                        appCtx.updateRenderStatus('idle');
+                    }, 0);
+                }
+            }).catch(() => {
+                if (appRef.current) {
+                    if (appRef.current.renderStatus !== 'rendering') {
+                        return;
+                    }
+                    appRef.current.updateRenderStatus('error');
+                }
+            });
+            ctx.exportChart = (async (mode: IChartExportResult['mode'] = 'svg') => {
+                if (ctx.renderStatus === 'error') {
+                    console.error('exportChart failed because error occurred when rendering chart.');
+                    return {
+                        mode,
+                        title: '',
+                        nCols: 0,
+                        nRows: 0,
+                        charts: [],
+                    };
+                }
+                if (ctx.renderStatus !== 'idle') {
+                    let dispose = null as (() => void) | null;
+                    // try to wait for a while
+                    const waitForChartReady = new Promise<void>((resolve, reject) => {
+                        dispose = ctx.onRenderStatusChange(status => {
+                            if (status === 'error') {
+                                reject(new Error('Error occurred when rendering chart'));
+                            } else if (status === 'idle') {
+                                resolve();
+                            }
+                        });
+                        setTimeout(() => reject(new Error('Timeout')), 10_000);
+                    });
+                    try {
+                        await waitForChartReady;
+                    } catch (error) {
+                        console.error('exportChart failed:', `${error}`);
+                        return {
+                            mode,
+                            title: '',
+                            nCols: 0,
+                            nRows: 0,
+                            charts: [],
+                        };
+                    } finally {
+                        dispose?.();
+                    }
+                }
                 const res: IChartExportResult = {
                     mode,
                     title: name || 'untitled',
@@ -63,8 +129,16 @@ export const useVegaExportApi = (name: string | undefined, viewsRef: MutableRefO
                         colIndex: item.x,
                         width: item.w,
                         height: item.h,
+                        canvasWidth: item.innerWidth,
+                        canvasHeight: item.innerHeight,
                         data: '',
+                        canvas() {
+                            return item.canvas;
+                        },
                     })),
+                    container() {
+                        return containerRef.current;
+                    },
                 };
                 if (mode === 'data-url') {
                     const imgData = await renderHandle.getCanvasData();
@@ -82,20 +156,63 @@ export const useVegaExportApi = (name: string | undefined, viewsRef: MutableRefO
                     }
                 }
                 return res;
-            }) as typeof appRef.current.exportChart;
+            }) as typeof ctx.exportChart;
+            ctx.exportChartList = async function * exportChartList (mode: IChartExportResult['mode'] = 'svg') {
+                const total = ctx.chartCount;
+                const indices = new Array(total).fill(0).map((_, i) => i);
+                const currentIdx = ctx.chartIndex;
+                for await (const index of indices) {
+                    ctx.openChart(index);
+                    // wait for a while to make sure the correct chart is rendered
+                    await new Promise<void>(resolve => setTimeout(resolve, 0));
+                    const chart = await ctx.exportChart(mode);
+                    yield {
+                        mode,
+                        total,
+                        index,
+                        data: chart,
+                        hasNext: index < total - 1,
+                    };
+                }
+                ctx.openChart(currentIdx);
+            };
         }
     });
 
     useEffect(() => {
+        // NOTE: this is totally a cleanup function
         return () => {
-            if (appRef && 'current' in appRef && appRef.current) {
-                appRef.current.exportChart = async mode => ({
+            if (appRef.current) {
+                appRef.current.updateRenderStatus('idle');
+                appRef.current.exportChart = async (mode: IChartExportResult['mode'] = 'svg') => ({
                     mode,
                     title: '',
                     nCols: 0,
                     nRows: 0,
                     charts: [],
+                    container() {
+                        return null;
+                    },
                 });
+                appRef.current.exportChartList = async function * exportChartList (mode: IChartExportResult['mode'] = 'svg') {
+                    yield {
+                        mode,
+                        total: 1,
+                        completed: 0,
+                        index: 0,
+                        data: {
+                            mode,
+                            title: '',
+                            nCols: 0,
+                            nRows: 0,
+                            charts: [],
+                            container() {
+                                return null;
+                            },
+                        },
+                        hasNext: false,
+                    };
+                };
             }
         };
     }, []);

package/src/vis/react-vega.tsx

@@ -2,11 +2,11 @@ import React, { useEffect, useState, useMemo, forwardRef, useRef } from 'react';
 import embed from 'vega-embed';
 import { Subject, Subscription } from 'rxjs'
 import * as op from 'rxjs/operators';
-import type { ScenegraphEvent, View } from 'vega';
+import type { ScenegraphEvent } from 'vega';
 import styled from 'styled-components';
 
 import { useVegaExportApi } from '../utils/vegaApiExport';
-import { IViewField, IRow, IStackMode, VegaGlobalConfig } from '../interfaces';
+import { IViewField, IRow, IStackMode, VegaGlobalConfig, IVegaChartRef } from '../interfaces';
 import { useTranslation } from 'react-i18next';
 import { getVegaTimeFormatRules } from './temporalFormat';
 import { getSingleView } from './spec/view';
@@ -153,10 +153,12 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
     })
   }, [rowRepeatFields, colRepeatFields])
 
-  const vegaRefs = useRef<{ x: number; y: number; w: number; h: number; view: View }[]>([]);
+  const vegaRefs = useRef<IVegaChartRef[]>([]);
+  const renderTaskRefs = useRef<Promise<unknown>[]>([]);
 
   useEffect(() => {
     vegaRefs.current = [];
+    renderTaskRefs.current = [];
 
     const yField = rows.length > 0 ? rows[rows.length - 1] : NULL_FIELD;
     const xField = columns.length > 0 ? columns[columns.length - 1] : NULL_FIELD;
@@ -220,13 +222,18 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
       }
 
       if (viewPlaceholders.length > 0 && viewPlaceholders[0].current) {
-        embed(viewPlaceholders[0].current, spec, { mode: 'vega-lite', actions: showActions, timeFormatLocale: getVegaTimeFormatRules(i18n.language), config: vegaConfig }).then(res => {
+        const task = embed(viewPlaceholders[0].current, spec, { mode: 'vega-lite', actions: showActions, timeFormatLocale: getVegaTimeFormatRules(i18n.language), config: vegaConfig }).then(res => {
+          const container = res.view.container();
+          const canvas = container?.querySelector('canvas') ?? null;
           vegaRefs.current = [{
-            w: res.view.container()?.clientWidth ?? res.view.width(),
-            h: res.view.container()?.clientHeight ?? res.view.height(),
+            w: container?.clientWidth ?? res.view.width(),
+            h: container?.clientHeight ?? res.view.height(),
+            innerWidth: canvas?.clientWidth ?? res.view.width(),
+            innerHeight: canvas?.clientHeight ?? res.view.height(),
             x: 0,
             y: 0,
             view: res.view,
+            canvas,
           }];
           try {
             res.view.addEventListener('click', (e) => {
@@ -239,6 +246,7 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
             console.warn(error)
           }
         });
+        renderTaskRefs.current = [task];
       }
     } else {
       if (layoutMode === 'fixed') {
@@ -293,13 +301,18 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
           }
           if (node) {
             const id = index;
-            embed(node, ans, { mode: 'vega-lite', actions: showActions, timeFormatLocale: getVegaTimeFormatRules(i18n.language), config: vegaConfig }).then(res => {
+            const task = embed(node, ans, { mode: 'vega-lite', actions: showActions, timeFormatLocale: getVegaTimeFormatRules(i18n.language), config: vegaConfig }).then(res => {
+              const container = res.view.container();
+              const canvas = container?.querySelector('canvas') ?? null;
               vegaRefs.current[id] = {
-                w: res.view.container()?.clientWidth ?? res.view.width(),
-                h: res.view.container()?.clientHeight ?? res.view.height(),
+                w: container?.clientWidth ?? res.view.width(),
+                h: container?.clientHeight ?? res.view.height(),
+                innerWidth: canvas?.clientWidth ?? res.view.width(),
+                innerHeight: canvas?.clientHeight ?? res.view.height(),
                 x: j,
                 y: i,
                 view: res.view,
+                canvas,
               };
               const paramStores = (res.vgSpec.data?.map(d => d.name) ?? []).filter(
                 name => [BRUSH_SIGNAL_NAME, POINT_SIGNAL_NAME].map(p => `${p}_store`).includes(name)
@@ -356,6 +369,7 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
                 console.warn(error);
               }
             })
+            renderTaskRefs.current.push(task);
           }
         }
       }
@@ -363,6 +377,10 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
         subscriptions.forEach(sub => sub.unsubscribe());
       };
     }
+    return () => {
+      vegaRefs.current = [];
+      renderTaskRefs.current = [];
+    };
   }, [
     dataSource,
     allFieldIds,
@@ -391,9 +409,11 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
     text
   ]);
 
-  useVegaExportApi(name, vegaRefs, ref);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useVegaExportApi(name, vegaRefs, ref, renderTaskRefs, containerRef);
 
-  return <CanvaContainer rowSize={Math.max(rowRepeatFields.length, 1)} colSize={Math.max(colRepeatFields.length, 1)}>
+  return <CanvaContainer rowSize={Math.max(rowRepeatFields.length, 1)} colSize={Math.max(colRepeatFields.length, 1)} ref={containerRef}>
     {/* <div ref={container}></div> */}
     {
       viewPlaceholders.map((view, i) => <div key={i} ref={view}></div>)