@kanaries/graphic-walker 0.2.14 → 0.2.16

package/src/renderer/index.tsx

@@ -1,113 +1,70 @@
-import { runInAction, toJS } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import { Resizable } from 're-resizable';
-import React, { useState, useCallback, useEffect, useRef, forwardRef } from 'react';
-import { applyFilter } from '../services';
+import React, { useState, useEffect, forwardRef } from 'react';
+import { applyFilter, applyViewQuery, transformDataService } from '../services';
+import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig } from '../interfaces';
+import SpecRenderer from './specRenderer';
+import { toJS } from 'mobx';
 import { useGlobalStore } from '../store';
-import ReactVega, { IReactVegaHandler } from '../vis/react-vega';
+import { IReactVegaHandler } from '../vis/react-vega';
+import { unstable_batchedUpdates } from 'react-dom';
+import { initEncoding, initVisualConfig } from '../store/visualSpecStore';
 
-
-const ReactiveRenderer = forwardRef<IReactVegaHandler, { themeKey?: 'vega' | 'g2' }>(function ReactiveRenderer ({ themeKey }, ref) {
+interface RendererProps {
+    themeKey?: IThemeKey;
+    dark?: IDarkMode;
+}
+const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, ref) {
+    const { themeKey, dark } = props;
+    const [waiting, setWaiting] = useState<boolean>(false);
     const { vizStore, commonStore } = useGlobalStore();
-    const { draggableFieldState, visualConfig } = vizStore;
-    const { geoms, interactiveScale, defaultAggregated, stack, showActions, size, exploration } = visualConfig;
+    const { allFields, viewFilters, viewDimensions, viewMeasures } = vizStore;
     const { currentDataset } = commonStore;
-    const { filters } = draggableFieldState;
-
-    const rows = toJS(draggableFieldState.rows)
-    const columns = toJS(draggableFieldState.columns)
-    const color = toJS(draggableFieldState.color)
-    const opacity = toJS(draggableFieldState.opacity)
-    const shape = toJS(draggableFieldState.shape)
-    const theta = toJS(draggableFieldState.theta)
-    const radius = toJS(draggableFieldState.radius)
-    const sizeChannel = toJS(draggableFieldState.size)
-
-    const rowLeftFacetFields = rows.slice(0, -1).filter(f => f.analyticType === 'dimension');
-    const colLeftFacetFields = columns.slice(0, -1).filter(f => f.analyticType === 'dimension');
-
-    const hasFacet = rowLeftFacetFields.length > 0 || colLeftFacetFields.length > 0;
-
-    const shouldTriggerMenu = exploration.mode === 'none';
-    
-    const handleGeomClick = useCallback((values: any, e: any) => {
-        if (shouldTriggerMenu) {
-            e.stopPropagation();
-            runInAction(() => {
-                commonStore.showEmbededMenu([e.pageX, e.pageY])
-                commonStore.setFilters(values);
-            });
-        }
-    }, [shouldTriggerMenu]);
-
-    // apply filters
     const { dataSource } = currentDataset;
+    const [viewConfig, setViewConfig] = useState<IVisualConfig>(initVisualConfig);
+    const [encodings, setEncodings] = useState<DeepReadonly<DraggableFieldState>>(initEncoding);
 
-    const [data, setData] = useState(dataSource);
-    const pendingPromiseRef = useRef<Promise<typeof data> | null>(null);
+    const [viewData, setViewData] = useState<IRow[]>([]);
 
     useEffect(() => {
-        setData(dataSource);
-    }, [dataSource]);
-
-    useEffect(() => {
-        const p = filters.length === 0 ? Promise.resolve(dataSource) : applyFilter(dataSource, filters);
-        pendingPromiseRef.current = p;
-
-        p.then(d => {
-            if (p !== pendingPromiseRef.current) {
-                // This promise is out-of-date
-                return;
-            }
-
-            setData(d);
-        }).catch(err => {
-            console.error(err);
-        });
-
-        return () => {
-            pendingPromiseRef.current = null;
-        };
-    }, [dataSource, filters]);
+        setWaiting(true);
+        applyFilter(dataSource, viewFilters)
+            .then((data) => transformDataService(data, allFields))
+            .then((d) => {
+                // setViewData(d);
+                const dims = viewDimensions;
+                const meas = viewMeasures;
+                const config = toJS(vizStore.visualConfig);
+                return applyViewQuery(d, dims.concat(meas), {
+                    op: config.defaultAggregated ? 'aggregate' : 'raw',
+                    groupBy: dims.map((f) => f.fid),
+                    agg: Object.fromEntries(meas.map((f) => [f.fid, f.aggName as any])),
+                });
+            })
+            .then((data) => {
+                unstable_batchedUpdates(() => {
+                    setViewData(data);
+                    setWaiting(false);
+                    setEncodings(toJS(vizStore.draggableFieldState));
+                    setViewConfig(toJS(vizStore.visualConfig));
+                });
+            })
+            .catch((err) => {
+                console.error(err);
+                setWaiting(false);
+            });
+    }, [dataSource, viewFilters, allFields, viewDimensions, viewMeasures]);
 
-    return <Resizable className={(size.mode === 'fixed' && !hasFacet) ? "border-blue-400 border-2 overflow-hidden" : ""}
-    style={{ padding: '12px' }}
-    onResizeStop={(e, direction, ref, d) => {
-        vizStore.setChartLayout({
-            mode: 'fixed',
-            width: size.width + d.width,
-            height: size.height + d.height
-        })
-    }}
-    size={{
-        width: size.width + 'px',
-        height: size.height + 'px',
-    }}>
-        <ReactVega
-        layoutMode={size.mode}
-        interactiveScale={interactiveScale}
-        geomType={geoms[0]}
-        defaultAggregate={defaultAggregated}
-        stack={stack}
-        dataSource={data}
-        rows={rows}
-        columns={columns}
-        color={color[0]}
-        theta={theta[0]}
-        radius={radius[0]}
-        shape={shape[0]}
-        opacity={opacity[0]}
-        size={sizeChannel[0]}
-        showActions={showActions}
-        width={size.width - 12 * 4}
-        height={size.height - 12 * 4}
-        ref={ref}
-        brushEncoding={exploration.mode === 'brush' ? exploration.brushDirection : 'none'}
-        selectEncoding={exploration.mode === 'point' ? 'default' : 'none'}
-        onGeomClick={handleGeomClick}
-        themeKey={themeKey}
-    />
-    </Resizable>
+    return (
+        <SpecRenderer
+            loading={waiting}
+            data={viewData}
+            ref={ref}
+            themeKey={themeKey}
+            dark={dark}
+            draggableFieldState={encodings}
+            visualConfig={viewConfig}
+        />
+    );
 });
 
-export default observer(ReactiveRenderer);
+export default observer(Renderer);

package/src/renderer/specRenderer.tsx

@@ -0,0 +1,119 @@
+import { runInAction } from 'mobx';
+import { Resizable } from 're-resizable';
+import React, { useCallback, forwardRef, useMemo } from 'react';
+
+import { useGlobalStore } from '../store';
+import ReactVega, { IReactVegaHandler } from '../vis/react-vega';
+import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig } from '../interfaces';
+import LoadingLayer from '../components/loadingLayer';
+
+interface SpecRendererProps {
+    themeKey?: IThemeKey;
+    dark?: IDarkMode;
+    data: IRow[];
+    loading: boolean;
+    draggableFieldState: DeepReadonly<DraggableFieldState>;
+    visualConfig: IVisualConfig;
+}
+const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
+    { themeKey, dark, data, loading, draggableFieldState, visualConfig },
+    ref
+) {
+    const { vizStore, commonStore } = useGlobalStore();
+    // const { draggableFieldState, visualConfig } = vizStore;
+    const { geoms, interactiveScale, defaultAggregated, stack, showActions, size, exploration } = visualConfig;
+
+    const rows = draggableFieldState.rows;
+    const columns = draggableFieldState.columns;
+    const color = draggableFieldState.color;
+    const opacity = draggableFieldState.opacity;
+    const shape = draggableFieldState.shape;
+    const theta = draggableFieldState.theta;
+    const radius = draggableFieldState.radius;
+    const sizeChannel = draggableFieldState.size;
+
+    const rowLeftFacetFields = useMemo(() => rows.slice(0, -1).filter((f) => f.analyticType === 'dimension'), [rows]);
+    const colLeftFacetFields = useMemo(
+        () => columns.slice(0, -1).filter((f) => f.analyticType === 'dimension'),
+        [columns]
+    );
+
+    const hasFacet = rowLeftFacetFields.length > 0 || colLeftFacetFields.length > 0;
+
+    const shouldTriggerMenu = exploration.mode === 'none';
+
+    const handleGeomClick = useCallback(
+        (values: any, e: any) => {
+            if (shouldTriggerMenu) {
+                e.stopPropagation();
+                runInAction(() => {
+                    commonStore.showEmbededMenu([e.pageX, e.pageY]);
+                    commonStore.setFilters(values);
+                });
+            }
+        },
+        [shouldTriggerMenu]
+    );
+    const enableResize = size.mode === 'fixed' && !hasFacet;
+
+    return (
+        <Resizable
+            className={enableResize ? 'border-blue-400 border-2 overflow-hidden' : ''}
+            style={{ padding: '12px' }}
+            onResizeStop={(e, direction, ref, d) => {
+                vizStore.setChartLayout({
+                    mode: 'fixed',
+                    width: size.width + d.width,
+                    height: size.height + d.height,
+                });
+            }}
+            enable={
+                enableResize
+                    ? undefined
+                    : {
+                          top: false,
+                          right: false,
+                          bottom: false,
+                          left: false,
+                          topRight: false,
+                          bottomRight: false,
+                          bottomLeft: false,
+                          topLeft: false,
+                      }
+            }
+            size={{
+                width: size.width + 'px',
+                height: size.height + 'px',
+            }}
+        >
+            {loading && <LoadingLayer />}
+            <ReactVega
+                layoutMode={size.mode}
+                interactiveScale={interactiveScale}
+                geomType={geoms[0]}
+                defaultAggregate={defaultAggregated}
+                stack={stack}
+                dataSource={data}
+                rows={rows}
+                columns={columns}
+                color={color[0]}
+                theta={theta[0]}
+                radius={radius[0]}
+                shape={shape[0]}
+                opacity={opacity[0]}
+                size={sizeChannel[0]}
+                showActions={showActions}
+                width={size.width - 12 * 4}
+                height={size.height - 12 * 4}
+                ref={ref}
+                brushEncoding={exploration.mode === 'brush' ? exploration.brushDirection : 'none'}
+                selectEncoding={exploration.mode === 'point' ? 'default' : 'none'}
+                onGeomClick={handleGeomClick}
+                themeKey={themeKey}
+                dark={dark}
+            />
+        </Resizable>
+    );
+});
+
+export default SpecRenderer;

package/src/segments/segmentNav.tsx

@@ -1,18 +1,14 @@
-import React, { Fragment, useCallback } from "react";
+import React, { useCallback } from "react";
 import { observer } from "mobx-react-lite";
 import DefaultTab, { ITabOption } from "../components/tabs/defaultTab";
 import { useGlobalStore } from "../store";
-import { ChartBarIcon, ChartPieIcon, CircleStackIcon } from "@heroicons/react/24/outline";
+import { ChartPieIcon, CircleStackIcon } from "@heroicons/react/24/outline";
 import { ISegmentKey } from "../interfaces";
 import { useTranslation } from "react-i18next";
 
-
-const ADD_KEY = '_add';
-
 const SegmentNav: React.FC = (props) => {
     const { vizStore, commonStore } = useGlobalStore();
-    const { visIndex, visList } = vizStore;
-    const { currentDataset, segmentKey } = commonStore;
+    const { segmentKey } = commonStore;
     const { t } = useTranslation();
 
     const tabs: ITabOption[] = [
@@ -30,15 +26,6 @@ const SegmentNav: React.FC = (props) => {
         }
     ]
 
-    const visSelectionHandler = useCallback((tabKey: string, tabIndex: number) => {
-        if (tabKey === ADD_KEY) {
-            vizStore.addVisualization();
-            vizStore.initMetaState(currentDataset)
-        } else {
-            vizStore.selectVisualization(tabIndex);
-        }
-    }, [currentDataset, vizStore])
-
     const editLabelHandler = useCallback((content: string, tabIndex: number) => {
         vizStore.setVisName(tabIndex, content)
     }, [])

package/src/segments/visNav.tsx

@@ -1,5 +1,6 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect } from "react";
 import { observer } from "mobx-react-lite";
+import { useTranslation } from "react-i18next";
 import EditableTabs, { ITabOption } from "../components/tabs/editableTab";
 import { useGlobalStore } from "../store";
 
@@ -11,25 +12,35 @@ const VisNav: React.FC = (props) => {
     const { visIndex, visList } = vizStore;
     const { currentDataset } = commonStore;
 
+    const { t } = useTranslation();
+
     const tabs: ITabOption[] = visList.map((v) => ({
         key: v.visId,
-        label: v.name?.[0] || 'vis',
-        options: v.name?.[1],
+        label: v.name ?? 'vis',
+        editable: true
     }));
 
     tabs.push({
         key: ADD_KEY,
-        label: 'main.tablist.new'
+        label: t('main.tablist.new')
     });
 
+    useEffect(() => {
+        if (visList.length === 1) {
+            // should set the first vis name when the component is mounted
+            vizStore.setVisName(0, t('main.tablist.auto_title', { idx: 1 }));
+        }
+        // no need to add deps here
+    }, [])
+
     const visSelectionHandler = useCallback((tabKey: string, tabIndex: number) => {
         if (tabKey === ADD_KEY) {
-            vizStore.addVisualization();
+            vizStore.addVisualization(t('main.tablist.auto_title', { idx: visList.length + 1 }));
             vizStore.initMetaState(currentDataset)
         } else {
             vizStore.selectVisualization(tabIndex);
         }
-    }, [currentDataset, vizStore])
+    }, [currentDataset, vizStore, visList.length])
 
     const editLabelHandler = useCallback((content: string, tabIndex: number) => {
         vizStore.setVisName(tabIndex, content)

package/src/services.ts

@@ -10,7 +10,10 @@ import { IRow, Filters, SemanticType, IMeasure, IMutField, IFilterField } from '
 // eslint-disable-next-line
 import ExplainerWorker from './workers/explainer.worker?worker&inline';
 import FilterWorker from './workers/filter.worker?worker&inline';
+import TransformDataWorker from './workers/transform.worker?worker&inline';
+import ViewQueryWorker from './workers/viewQuery.worker?worker&inline';
 import { IExplaination, IMeasureWithStat } from './insights';
+import { IViewQuery, queryView } from './lib/viewQuery';
 
 interface WorkerState {
     eWorker: Worker | null;
@@ -105,7 +108,8 @@ export function destroyWorker() {
 let filterWorker: Worker | null = null;
 let filterWorkerAutoTerminator: NodeJS.Timeout | null = null;
 
-export const applyFilter = async (data: readonly IRow[], filters: readonly IFilterField[]): Promise<IRow[]> => {
+export const applyFilter = async (data: IRow[], filters: readonly IFilterField[]): Promise<IRow[]> => {
+    if (filters.length === 0) return data;
     if (filterWorkerAutoTerminator !== null) {
         clearTimeout(filterWorkerAutoTerminator);
         filterWorkerAutoTerminator = null;
@@ -137,3 +141,35 @@ export const applyFilter = async (data: readonly IRow[], filters: readonly IFilt
         }, 60_000); // Destroy the worker when no request is received for 60 secs
     }
 };
+
+export const transformDataService = async (data: IRow[], columns: IMutField[]): Promise<IRow[]> => {
+    if (columns.length === 0 || data.length === 0) return data;
+    const worker = new TransformDataWorker();
+    try {
+        const res: IRow[] = await workerService(worker, {
+            dataSource: data,
+            columns: toJS(columns),
+        });
+        return res;
+    } catch (error) {
+        throw new Error('Uncaught error in TransformDataWorker', { cause: error });
+    } finally {
+        worker.terminate();
+    }
+}
+
+export const applyViewQuery = async (data: IRow[], metas: IMutField[], query: IViewQuery): Promise<IRow[]> => {
+    const worker = new ViewQueryWorker();
+    try {
+        const res: IRow[] = await workerService(worker, {
+            dataSource: data,
+            metas: toJS(metas),
+            query: toJS(query),
+        });
+        return res;
+    } catch (err) {
+        throw new Error('Uncaught error in ViewQueryWorker', { cause: err });
+    } finally {
+        worker.terminate();
+    }
+}

package/src/store/commonStore.ts

@@ -1,7 +1,6 @@
 import { DataSet, Filters, IDataSet, IDataSetInfo, IDataSource, IMutField, IRow, ISegmentKey } from '../interfaces';
 import { makeAutoObservable, observable, toJS } from 'mobx';
 import { transData } from '../dataSource/utils';
-import { extendCountField } from '../utils';
 
 export class CommonStore {
     public datasets: IDataSet[] = [];
@@ -14,6 +13,7 @@ export class CommonStore {
     public showInsightBoard: boolean = false;
     public vizEmbededMenu: { show: boolean; position: [number, number] } = { show: false, position: [0, 0] };
     public showDataConfig: boolean = false;
+    public showCodeExportPanel: boolean = false;
     public filters: Filters = {};
     public segmentKey: ISegmentKey = ISegmentKey.vis;
     constructor () {
@@ -30,12 +30,12 @@ export class CommonStore {
         if (this.datasets.length > 0) {
             const dataSourceId = this.datasets[datasetIndex].dsId;
             const dataSource = this.dataSources.find(d => d.id === dataSourceId);
-            const rawFields = toJS(this.datasets[datasetIndex].rawFields)
-            const base = extendCountField((dataSource ? dataSource.data : []), rawFields)
+            const rawFields = toJS(this.datasets[datasetIndex].rawFields)//.concat(createCountField())
+            // const base = extendCountField((dataSource ? dataSource.data : []), rawFields)
             return {
                 ...this.datasets[datasetIndex],
-                dataSource: base.dataSource,
-                rawFields: base.fields
+                dataSource: dataSource?.data ?? [],
+                rawFields
             }
         }
         return {
@@ -61,6 +61,9 @@ export class CommonStore {
         this.vizEmbededMenu.show = true;
         this.vizEmbededMenu.position = position;
     }
+    public setShowCodeExportPanel (show: boolean) {
+        this.showCodeExportPanel = show;
+    }
     public closeEmbededMenu () {
         this.vizEmbededMenu.show = false;
     }
@@ -112,11 +115,13 @@ export class CommonStore {
 
     public updateTempDS (rawData: IRow[]) {
         const result = transData(rawData);
-        // TODO: need fix web-data-loader issue #2
-        this.tmpDataSource = result.dataSource.slice(0, -1);
+        this.tmpDataSource = result.dataSource;
         this.tmpDSRawFields = result.fields;
     }
-
+    /**
+     * update temp dataset (standard) with dataset info
+     * @param dataset 
+     */
     public updateTempSTDDS (dataset: IDataSetInfo) {
         this.tmpDataSource = dataset.dataSource;
         this.tmpDSRawFields = dataset.rawFields;
@@ -176,7 +181,7 @@ export class CommonStore {
     }
     public createPlaceholderDS() {
         this.addDS({
-            name: '新数据源',
+            name: 'new dataset',
             dataSource: [],
             rawFields: []
         })

package/src/store/index.tsx

@@ -1,8 +1,8 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext } from 'react';
 import { CommonStore } from './commonStore'
 import { VizSpecStore } from './visualSpecStore'
 
-interface GlobalStore {
+export interface IGlobalStore {
     commonStore: CommonStore;
     vizStore: VizSpecStore;
 }
@@ -10,12 +10,12 @@ interface GlobalStore {
 const commonStore = new CommonStore();
 const vizStore = new VizSpecStore(commonStore);
 
-const initStore: GlobalStore = {
+const initStore: IGlobalStore = {
     commonStore,
     vizStore
 }
 
-const StoreContext = React.createContext<GlobalStore>(null!);
+const StoreContext = React.createContext<IGlobalStore>(null!);
 
 export function destroyGWStore() {
     initStore.commonStore.destroy();
@@ -31,16 +31,23 @@ export function rebootGWStore() {
 
 interface StoreWrapperProps {
     keepAlive?: boolean;
+    storeRef?: React.MutableRefObject<IGlobalStore | null>;
 }
 export class StoreWrapper extends React.Component<StoreWrapperProps> {
     constructor(props: StoreWrapperProps) {
         super(props)
+        if (props.storeRef) {
+            props.storeRef.current = initStore;
+        }
         if (props.keepAlive) {
             rebootGWStore();
         }
     }
     componentWillUnmount() {
         if (!this.props.keepAlive) {
+            if (this.props.storeRef) {
+                this.props.storeRef.current = null;
+            }
             destroyGWStore();
         }
     }