@kanaries/graphic-walker 0.2.4 → 0.2.5

package/src/renderer/index.tsx

@@ -0,0 +1,104 @@
+import { runInAction, toJS } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { Resizable } from 're-resizable';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { applyFilter } from '../services';
+import { useGlobalStore } from '../store';
+import ReactVega from '../vis/react-vega';
+
+
+const ReactiveRenderer: React.FC = props => {
+    const { vizStore, commonStore } = useGlobalStore();
+    const { draggableFieldState, visualConfig } = vizStore;
+    const { geoms, interactiveScale, defaultAggregated, stack, showActions, size } = visualConfig;
+    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 onGeomClick = useCallback((values: any, e: any) => {
+        runInAction(() => {
+            commonStore.showEmbededMenu([e.pageX, e.pageY])
+            commonStore.setFilters(values);
+        })
+    }, [])
+
+    // apply filters
+    const { dataSource } = currentDataset;
+
+    const [data, setData] = useState(dataSource);
+    const pendingPromiseRef = useRef<Promise<typeof data> | null>(null);
+
+    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]);
+
+    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]}
+        onGeomClick={onGeomClick}
+        showActions={showActions}
+        width={size.width - 12 * 4}
+        height={size.height - 12 * 4}
+    />
+    </Resizable>
+}
+
+export default observer(ReactiveRenderer);

package/src/segments/visNav.tsx

@@ -0,0 +1,48 @@
+import React, { useCallback } from "react";
+import { observer } from "mobx-react-lite";
+import PureTabs, { ITabOption } from "../components/tabs/pureTab";
+import { useGlobalStore } from "../store";
+
+
+const ADD_KEY = '_add';
+
+const VisNav: React.FC = (props) => {
+    const { vizStore, commonStore } = useGlobalStore();
+    const { visIndex, visList } = vizStore;
+    const { currentDataset } = commonStore;
+
+    const tabs: ITabOption[] = visList.map((v) => ({
+        key: v.visId,
+        label: v.name?.[0] || 'vis',
+        options: v.name?.[1],
+    }));
+
+    tabs.push({
+        key: ADD_KEY,
+        label: 'main.tablist.new'
+    });
+
+    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)
+    }, [])
+
+    return (
+        <PureTabs
+            selectedKey={visList[visIndex].visId}
+            tabs={tabs}
+            onEditLabel={editLabelHandler}
+            onSelected={visSelectionHandler}
+        />
+    );
+};
+
+export default observer(VisNav);

package/src/services.ts

@@ -0,0 +1,139 @@
+import { toJS } from 'mobx';
+import { View, Specification } from 'visual-insights';
+import { IRow, Filters, SemanticType, IMeasure, IMutField, IFilterField } from './interfaces';
+/* eslint import/no-webpack-loader-syntax:0 */
+// @ts-ignore
+// eslint-disable-next-line
+// import InsightSpaceWorker from './workers/InsightService.worker?worker';
+/* eslint import/no-webpack-loader-syntax:0 */
+// @ts-ignore
+// eslint-disable-next-line
+import ExplainerWorker from './workers/explainer.worker?worker&inline';
+import FilterWorker from './workers/filter.worker?worker&inline';
+import { IExplaination, IMeasureWithStat } from './insights';
+
+interface WorkerState {
+    eWorker: Worker | null;
+}
+
+const workerState: WorkerState = {
+    eWorker: null,
+}
+
+function workerService<T, R>(worker: Worker, data: R): Promise<T> {
+    return new Promise<T>((resolve, reject) => {
+        worker.postMessage(data);
+        worker.onmessage = (e: MessageEvent) => {
+            resolve(e.data);
+        };
+        worker.onerror = (e: ErrorEvent) => {
+            reject({
+                success: false,
+                message: e,
+            });
+        };
+    });
+}
+
+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 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 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[]> => {
+    if (filterWorkerAutoTerminator !== null) {
+        clearTimeout(filterWorkerAutoTerminator);
+        filterWorkerAutoTerminator = null;
+    }
+
+    if (filterWorker === null) {
+        filterWorker = new FilterWorker();
+    }
+
+    try {
+        const res: IRow[] = await workerService(filterWorker, {
+            dataSource: data,
+            filters: toJS(filters),
+        });
+
+        return res;
+    } catch (error) {
+        // @ts-ignore @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause
+        throw new Error('Uncaught error in FilterWorker', { cause: error });
+    } finally {
+        if (filterWorkerAutoTerminator !== null) {
+            clearTimeout(filterWorkerAutoTerminator);
+        }
+
+        filterWorkerAutoTerminator = setTimeout(() => {
+            filterWorker?.terminate();
+            filterWorker = null;
+            filterWorkerAutoTerminator = null;
+        }, 60_000); // Destroy the worker when no request is received for 60 secs
+    }
+};

package/src/store/commonStore.ts

@@ -0,0 +1,158 @@
+import { DataSet, Filters, IDataSet, IDataSetInfo, IDataSource, IMutField, IRow } from '../interfaces';
+import { makeAutoObservable, observable, toJS } from 'mobx';
+import { transData } from '../dataSource/utils';
+import { extendCountField } from '../utils';
+
+export class CommonStore {
+    public datasets: IDataSet[] = [];
+    public dataSources: IDataSource[] = [];
+    public dsIndex: number = 0;
+    public tmpDSName: string = '';
+    public tmpDSRawFields: IMutField[] = [];
+    public tmpDataSource: IRow[] = [];
+    public showDSPanel: boolean = false;
+    public showInsightBoard: boolean = false;
+    public vizEmbededMenu: { show: boolean; position: [number, number] } = { show: false, position: [0, 0] };
+
+    public filters: Filters = {};
+    constructor () {
+        this.datasets = [];
+        this.dataSources = [];
+        makeAutoObservable(this, {
+            dataSources: observable.ref,
+            tmpDataSource: observable.ref,
+            filters: observable.ref
+        });
+    }
+    public get currentDataset (): DataSet {
+        const datasetIndex = this.dsIndex;
+        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)
+            return {
+                ...this.datasets[datasetIndex],
+                dataSource: base.dataSource,
+                rawFields: base.fields
+            }
+        }
+        return {
+            id: '__null_ds__',
+            name: 'Empty Dataset',
+            rawFields: [],
+            dataSource: []
+        }
+    }
+    public setShowDSPanel (show: boolean) {
+        this.showDSPanel = show;
+    }
+    public setShowInsightBoard (show: boolean) {
+        this.showInsightBoard = show;
+    }
+    public showEmbededMenu (position: [number, number]) {
+        this.vizEmbededMenu.show = true;
+        this.vizEmbededMenu.position = position;
+    }
+    public closeEmbededMenu () {
+        this.vizEmbededMenu.show = false;
+    }
+    public initTempDS () {
+        this.tmpDSName = 'New Dataset'
+        this.tmpDSRawFields = [];
+        this.tmpDataSource = [];
+    }
+    public updateTempFields (fields: IMutField[]) {
+        this.tmpDSRawFields = fields;
+    }
+
+    public updateTempFieldAnalyticType (fieldKey: string, analyticType: IMutField['analyticType']) {
+        const field = this.tmpDSRawFields.find(f => f.fid === fieldKey);
+        if (field) {
+            field.analyticType = analyticType;
+        }
+    }
+
+    public updateTempName (name: string) {
+        this.tmpDSName = name;
+    }
+
+    public updateTempDS (rawData: IRow[]) {
+        const result = transData(rawData);
+        // TODO: need fix web-data-loader issue #2
+        this.tmpDataSource = result.dataSource.slice(0, -1);
+        this.tmpDSRawFields = result.fields;
+    }
+
+    public updateTempSTDDS (dataset: IDataSetInfo) {
+        this.tmpDataSource = dataset.dataSource;
+        this.tmpDSRawFields = dataset.rawFields;
+        this.tmpDSName = dataset.name;
+    }
+
+    public commitTempDS () {
+        const { tmpDSName, tmpDSRawFields, tmpDataSource } = this;
+        this.addAndUseDS({
+            dataSource: tmpDataSource,
+            rawFields: tmpDSRawFields,
+            name: tmpDSName
+        })
+        this.setShowDSPanel(false);
+        this.initTempDS();
+    }
+
+    public startDSBuildingTask () {
+        this.initTempDS();
+        this.showDSPanel = true;
+    }
+    public addAndUseDS(dataset: IDataSetInfo) {
+        const datasetId = this.addDS(dataset);
+        this.dsIndex = this.datasets.length - 1;
+        return datasetId
+    }
+    public addDS(dataset: IDataSetInfo) {
+        const timestamp = new Date().getTime();
+        const dataSetId = `dst-${timestamp}`
+        const dataSourceId = `dse-${timestamp}`;
+        this.dataSources.push({
+            id: dataSourceId,
+            data: dataset.dataSource
+        })
+        this.datasets.push({
+            id: dataSetId,
+            name: dataset.name,
+            rawFields: dataset.rawFields,
+            dsId: dataSourceId
+        })
+        return dataSetId;
+    }
+    public removeDS(datasetId: string) {
+        const datasetIndex = this.datasets.findIndex(d => d.id === datasetId);
+        if (datasetIndex > -1) {
+            const dataSourceId = this.datasets[datasetIndex].dsId;
+            const dataSourceIndex = this.dataSources.findIndex(d => d.id === dataSourceId);
+            this.dataSources.splice(dataSourceIndex, 1);
+            this.datasets.splice(datasetIndex, 1);
+        }
+    }
+    public useDS(datasetId: string) {
+        const datasetIndex = this.datasets.findIndex(d => d.id === datasetId);
+        if (datasetIndex > -1) {
+            this.dsIndex = datasetIndex;
+        }
+    }
+    public createPlaceholderDS() {
+        this.addDS({
+            name: '新数据源',
+            dataSource: [],
+            rawFields: []
+        })
+    }
+    public setFilters (props: Filters) {
+        this.filters = props;
+    }
+    public destroy () {
+        this.dataSources = [];
+        this.datasets = [];
+    }
+}

package/src/store/index.tsx

@@ -0,0 +1,53 @@
+import React, { useContext, useEffect } from 'react';
+import { CommonStore } from './commonStore'
+import { VizSpecStore } from './visualSpecStore'
+
+interface GlobalStore {
+    commonStore: CommonStore;
+    vizStore: VizSpecStore;
+}
+
+const commonStore = new CommonStore();
+const vizStore = new VizSpecStore(commonStore);
+
+const initStore: GlobalStore = {
+    commonStore,
+    vizStore
+}
+
+const StoreContext = React.createContext<GlobalStore>(null!);
+
+export function destroyGWStore() {
+    initStore.commonStore.destroy();
+    initStore.vizStore.destroy();
+}
+
+export function rebootGWStore() {
+    const cs = new CommonStore();
+    const vs = new VizSpecStore(cs);
+    initStore.commonStore = cs;
+    initStore.vizStore = vs;
+}
+
+export class StoreWrapper extends React.Component<{ keepAlive?: boolean }> {
+    constructor(props: { keepAlive?: boolean }) {
+        super(props)
+        if (props.keepAlive) {
+            rebootGWStore();
+        }
+    }
+    componentWillUnmount() {
+        if (!this.props.keepAlive) {
+            destroyGWStore();
+        }
+    }
+    render() {
+        return <StoreContext.Provider value={initStore}>
+            { this.props.children }
+        </StoreContext.Provider>
+    }
+}
+
+export function useGlobalStore() {
+    return useContext(StoreContext);
+}