@kanaries/graphic-walker 0.2.15 → 0.2.17

package/src/main.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import ReactDOM from "react-dom";
 import { GraphicWalker } from "./index";
 

package/src/models/visSpecHistory.ts

@@ -27,6 +27,14 @@ export class VisSpecWithHistory {
 
     private batchFlag = false;
 
+    public updateLatest(snapshot: Partial<Readonly<VisSpecWithHistory['snapshots'][0]>>) {
+        this.snapshots[this.cursor] = {
+            ...this.snapshots[this.cursor],
+            ...snapshot,
+        }
+    }
+
+
     private commit(snapshot: Partial<Readonly<VisSpecWithHistory['snapshots'][0]>>): void {
         if (this.batchFlag) {
             // batch this commit
@@ -120,6 +128,12 @@ export class VisSpecWithHistory {
         });
     }
 
+    public clone () {
+        const nextVSWH = new VisSpecWithHistory(this.frame);
+        nextVSWH.cursor = this.cursor;
+        return nextVSWH;
+    }
+
     public exportGW (): IVisSpec {
         return {
             ...this.frame

package/src/renderer/index.tsx

@@ -1,138 +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 { useGlobalStore } from "../store";
-import ReactVega, { IReactVegaHandler } from "../vis/react-vega";
-import { IDarkMode, IThemeKey } from "../interfaces";
+import { observer } from 'mobx-react-lite';
+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 { IReactVegaHandler } from '../vis/react-vega';
+import { unstable_batchedUpdates } from 'react-dom';
+import { initEncoding, initVisualConfig } from '../store/visualSpecStore';
 
-const ReactiveRenderer = forwardRef<IReactVegaHandler, { themeKey?: IThemeKey; dark?: IDarkMode }>(function ReactiveRenderer(
-    { themeKey, dark },
-    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);
-        });
+        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 () => {
-            pendingPromiseRef.current = null;
-        };
-    }, [dataSource, filters]);
-    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",
-            }}
-        >
-            <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>
+        <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,121 @@
+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 details = draggableFieldState.details;
+
+    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]}
+                details={details}
+                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

@@ -1,6 +1,5 @@
 import { toJS } from 'mobx';
-import { View, Specification } from 'visual-insights';
-import { IRow, Filters, SemanticType, IMeasure, IMutField, IFilterField } from './interfaces';
+import { IRow, IMutField, IFilterField, Specification } from './interfaces';
 /* eslint import/no-webpack-loader-syntax:0 */
 // @ts-ignore
 // eslint-disable-next-line
@@ -8,17 +7,19 @@ import { IRow, Filters, SemanticType, IMeasure, IMutField, IFilterField } from '
 /* eslint import/no-webpack-loader-syntax:0 */
 // @ts-ignore
 // eslint-disable-next-line
-import ExplainerWorker from './workers/explainer.worker?worker&inline';
+// import ExplainerWorker from './workers/explainer.worker?worker&inline';
 import FilterWorker from './workers/filter.worker?worker&inline';
-import { IExplaination, IMeasureWithStat } from './insights';
+import TransformDataWorker from './workers/transform.worker?worker&inline';
+import ViewQueryWorker from './workers/viewQuery.worker?worker&inline';
+import { IViewQuery } from './lib/viewQuery';
 
-interface WorkerState {
-    eWorker: Worker | null;
-}
+// interface WorkerState {
+//     eWorker: Worker | null;
+// }
 
-const workerState: WorkerState = {
-    eWorker: null,
-}
+// const workerState: WorkerState = {
+//     eWorker: null,
+// }
 
 function workerService<T, R>(worker: Worker, data: R): Promise<T> {
     return new Promise<T>((resolve, reject) => {
@@ -35,77 +36,78 @@ function workerService<T, R>(worker: Worker, data: R): Promise<T> {
     });
 }
 
-interface ExplainParams {
-    dimensions: string[];
-    measures: string[];
-    dataSource: IRow[];
-    filters?: Filters;
-    currentSpace: {
-        dimensions: string[];
-        measures: IMeasure[];
-    };
-}
+// interface ExplainParams {
+//     dimensions: string[];
+//     measures: string[];
+//     dataSource: IRow[];
+//     filters?: Filters;
+//     currentSpace: {
+//         dimensions: string[];
+//         measures: IMeasure[];
+//     };
+// }
 export interface IVisSpace {
     dataView: IRow[];
     schema: Specification;
 }
-interface ExplainReturns {
-    explainations: IExplaination[];
-    valueExp: IMeasureWithStat[];
-    visSpaces: IVisSpace[];
-    fieldsWithSemanticType: Array<{ key: string; type: SemanticType }>;
-}
-export async function getExplaination(props: ExplainParams) {
-    const worker = workerState.eWorker;
-    if (worker === null) throw new Error('init worker first.')
-    let result: ExplainReturns = {
-        explainations: [],
-        valueExp: [],
-        visSpaces: [],
-        fieldsWithSemanticType: [],
-    };
-    try {
-        result = await workerService<ExplainReturns, { type: string; data: ExplainParams }>(
-            worker,
-            {
-                type: 'getExplaination',
-                data: props
-            }
-        );
-        return result;
-    } catch (error) {
-        console.error(error);
-    }
-    return result;
-}
+// interface ExplainReturns {
+//     explainations: IExplaination[];
+//     valueExp: IMeasureWithStat[];
+//     visSpaces: IVisSpace[];
+//     fieldsWithSemanticType: Array<{ key: string; type: SemanticType }>;
+// }
+// export async function getExplaination(props: ExplainParams) {
+//     const worker = workerState.eWorker;
+//     if (worker === null) throw new Error('init worker first.')
+//     let result: ExplainReturns = {
+//         explainations: [],
+//         valueExp: [],
+//         visSpaces: [],
+//         fieldsWithSemanticType: [],
+//     };
+//     try {
+//         result = await workerService<ExplainReturns, { type: string; data: ExplainParams }>(
+//             worker,
+//             {
+//                 type: 'getExplaination',
+//                 data: props
+//             }
+//         );
+//         return result;
+//     } catch (error) {
+//         console.error(error);
+//     }
+//     return result;
+// }
 
 interface PreAnalysisParams {
     fields: IMutField[];
     dataSource: IRow[];
 }
-export async function preAnalysis(props: PreAnalysisParams) {
-    if (workerState.eWorker !== null) {
-        workerState.eWorker.terminate();
-    }
-    try {
-        workerState.eWorker = new ExplainerWorker() as Worker;
-        const tmp = await workerService<boolean, { type: string; data: PreAnalysisParams}>(workerState.eWorker, { type: 'preAnalysis', data: props });
-    } catch (error) {
-        console.error(error)
-    }
-}
+// export async function preAnalysis(props: PreAnalysisParams) {
+//     if (workerState.eWorker !== null) {
+//         workerState.eWorker.terminate();
+//     }
+//     try {
+//         workerState.eWorker = new ExplainerWorker() as Worker;
+//         const tmp = await workerService<boolean, { type: string; data: PreAnalysisParams}>(workerState.eWorker, { type: 'preAnalysis', data: props });
+//     } catch (error) {
+//         console.error(error)
+//     }
+// }
 
-export function destroyWorker() {
-    if (workerState.eWorker) {
-        workerState.eWorker.terminate();
-        workerState.eWorker = null;
-    }
-}
+// export function destroyWorker() {
+//     if (workerState.eWorker) {
+//         workerState.eWorker.terminate();
+//         workerState.eWorker = null;
+//     }
+// }
 
 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 +139,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();
+    }
+}