@kanaries/graphic-walker 0.4.1 → 0.4.2

package/src/store/commonStore.ts

@@ -1,6 +1,7 @@
 import { DataSet, Filters, IDataSet, IDataSetInfo, IDataSource, IMutField, IRow, ISegmentKey } from '../interfaces';
 import { makeAutoObservable, observable, toJS } from 'mobx';
 import { transData } from '../dataSource/utils';
+import { INestNode } from '../components/pivotTable/inteface';
 
 export class CommonStore {
     public datasets: IDataSet[] = [];
@@ -15,15 +16,18 @@ export class CommonStore {
     public showDataConfig: boolean = false;
     public showCodeExportPanel: boolean = false;
     public showVisualConfigPanel: boolean = false;
+    public showGeoJSONConfigPanel: boolean = false;
     public filters: Filters = {};
     public segmentKey: ISegmentKey = ISegmentKey.vis;
+    public tableCollapsedHeaderMap: Map<string, INestNode["path"]> = new Map();
     constructor () {
         this.datasets = [];
         this.dataSources = [];
         makeAutoObservable(this, {
             dataSources: observable.ref,
             tmpDataSource: observable.ref,
-            filters: observable.ref
+            filters: observable.ref,
+            tableCollapsedHeaderMap: observable.ref,
         });
     }
     public get currentDataset (): DataSet {
@@ -68,6 +72,30 @@ export class CommonStore {
     public setShowVisualConfigPanel (show: boolean) {
         this.showVisualConfigPanel = show;
     }
+    public updateTableCollapsedHeader (node: INestNode) {
+        const {uniqueKey, height} = node;
+        if (height < 1) return;
+        const updatedMap = new Map(this.tableCollapsedHeaderMap)
+        // if some child nodes of the incoming node are collapsed, remove them first
+        updatedMap.forEach((existingPath, existingKey) => {
+            if (existingKey.startsWith(uniqueKey) && existingKey.length > uniqueKey.length) {
+                updatedMap.delete(existingKey)
+            }
+        })
+        if (!updatedMap.has(uniqueKey)) {
+            updatedMap.set(uniqueKey, node.path)
+        } else {
+            updatedMap.delete(uniqueKey)
+        }
+        this.tableCollapsedHeaderMap = updatedMap
+    }
+    public resetTableCollapsedHeader () {
+        const updatedMap: Map<string, INestNode["path"]> = new Map();
+        this.tableCollapsedHeaderMap = updatedMap;
+    }
+    public setShowGeoJSONConfigPanel (show: boolean) {
+        this.showGeoJSONConfigPanel = show;
+    }
     public closeEmbededMenu () {
         this.vizEmbededMenu.show = false;
     }

package/src/store/visualSpecStore.ts

@@ -1,9 +1,12 @@
 import { IReactionDisposer, makeAutoObservable, observable, computed, reaction, toJS } from 'mobx';
 import produce from 'immer';
+import { feature } from 'topojson-client';
+import type { FeatureCollection } from "geojson";
 import {
     DataSet,
     DraggableFieldState,
     IFilterRule,
+    IGeographicData,
     ISortMode,
     IStackMode,
     IViewField,
@@ -25,6 +28,7 @@ import {
     initVisualConfig,
     forwardVisualConfigs,
     visSpecDecoder,
+    initEncoding,
 } from '../utils/save';
 import { CommonStore } from './commonStore';
 import { createCountField } from '../utils';
@@ -68,24 +72,6 @@ function geomAdapter(geom: string) {
     }
 }
 
-export function initEncoding(): DraggableFieldState {
-    return {
-        dimensions: [],
-        measures: [],
-        rows: [],
-        columns: [],
-        color: [],
-        opacity: [],
-        size: [],
-        shape: [],
-        radius: [],
-        theta: [],
-        details: [],
-        filters: [],
-        text: [],
-    };
-}
-
 function stackValueTransform(vlValue: string | undefined | null): IStackMode {
     if (vlValue === 'center') return 'center';
     if (vlValue === 'normalize') return 'normalize';
@@ -117,6 +103,12 @@ function isDraggableStateEmpty(state: DeepReadonly<DraggableFieldState>): boolea
     return Object.values(state).every((value) => value.length === 0);
 }
 
+function withTimeout<T extends any[], U>(f: (...args: T) => Promise<U>, timeout: number){
+    return (...args: T) => Promise.race([f(...args), new Promise<never>((_, reject) => {
+        setTimeout(() => reject(new Error('timeout')), timeout)
+    })])
+}
+
 export class VizSpecStore {
     // public fields: IViewField[] = [];
     private commonStore: CommonStore;
@@ -159,7 +151,7 @@ export class VizSpecStore {
     public canRedo = false;
     public editingFilterIdx: number | null = null;
     // TODO
-    public computationFuction: IComputationFunction = async () => [];
+    public computationFunction: IComputationFunction = async () => [];
     constructor(commonStore: CommonStore) {
         this.commonStore = commonStore;
         this.draggableFieldState = initEncoding();
@@ -174,7 +166,7 @@ export class VizSpecStore {
         );
         makeAutoObservable(this, {
             visList: observable.shallow,
-            computationFuction: observable.ref,
+            computationFunction: observable.ref,
             // @ts-expect-error private fields are not supported
             reactions: false,
         });
@@ -387,10 +379,12 @@ export class VizSpecStore {
     public setVisualConfig<K extends keyof IVisualConfig>(configKey: K, value: IVisualConfig[K]) {
         this.useMutable(({ config }) => {
             switch (true) {
-                case ['defaultAggregated', 'defaultStack', 'showActions', 'interactiveScale'].includes(configKey): {
+                case ['defaultAggregated', 'defaultStack', 'showActions', 'interactiveScale', 'scaleIncludeUnmatchedChoropleth'].includes(configKey): {
                     return ((config as unknown as { [k: string]: boolean })[configKey] = Boolean(value));
                 }
                 case configKey === 'geoms' && Array.isArray(value):
+                case configKey === "showTableSummary":
+                case configKey === "coordSystem":
                 case configKey === 'size' && typeof value === 'object':
                 case configKey === 'sorted':
                 case configKey === 'zeroScale':
@@ -511,6 +505,10 @@ export class VizSpecStore {
 
             encodings.columns = encodings.rows;
             encodings.rows = fieldsInCup as typeof encodings.rows; // assume this as writable
+
+            const fieldsInCup2 = encodings.longitude;
+            encodings.longitude = encodings.latitude;
+            encodings.latitude = fieldsInCup2 as typeof encodings.latitude; // assume this as writable
         });
     }
     public createBinField(stateKey: keyof DraggableFieldState, index: number, binType: 'bin' | 'binCount'): string {
@@ -819,6 +817,23 @@ export class VizSpecStore {
         const content = parseGWContent(raw);
         this.importStoInfo(content);
     }
+    
+    public setGeographicData(data: IGeographicData, geoKey: string) {
+        const geoJSON = data.type === 'GeoJSON' ? data.data : feature(data.data, data.objectKey || Object.keys(data.data.objects)[0]) as unknown as FeatureCollection;
+        if (!('features' in geoJSON)) {
+            console.error('Invalid GeoJSON: GeoJSON must be a FeatureCollection, but got', geoJSON);
+            return;
+        }
+        this.useMutable(({ config }) => {
+            config.geojson = geoJSON;
+            config.geoKey = geoKey;
+        });
+    }
+    public updateGeoKey(key: string) {
+        this.useMutable(({ config }) => {
+            config.geoKey = key;
+        });
+    }
 
     private visSpecEncoder(visList: IVisSpec[]): IVisSpecForExport[] {
         const updatedVisList = visList.map((visSpec) => {
@@ -876,7 +891,7 @@ export class VizSpecStore {
         );
     }
 
-    public setComputationFunction(f: IComputationFunction) {
-        this.computationFuction = f;
+    public setComputationFunction(f: IComputationFunction, timeout = 60000) {
+        this.computationFunction = withTimeout(f, timeout);
     }
 }

package/src/utils/save.ts

@@ -11,15 +11,40 @@ export function parseGWPureSpec(list: IVisSpec[]): VisSpecWithHistory[] {
     return list.map((l) => new VisSpecWithHistory(l));
 }
 
+export function initEncoding(): DraggableFieldState {
+    return {
+        dimensions: [],
+        measures: [],
+        rows: [],
+        columns: [],
+        color: [],
+        opacity: [],
+        size: [],
+        shape: [],
+        radius: [],
+        theta: [],
+        longitude: [],
+        latitude: [],
+        geoId: [],
+        details: [],
+        filters: [],
+        text: [],
+    };
+}
+
 export function initVisualConfig(): IVisualConfig {
+    const [ geom ] = GEMO_TYPES.generic;
     return {
         defaultAggregated: true,
-        geoms: [GEMO_TYPES[0]!],
+        geoms: [geom],
+        showTableSummary: false,
+        coordSystem: 'generic',
         stack: 'stack',
         showActions: false,
         interactiveScale: false,
         sorted: 'none',
         zeroScale: true,
+        scaleIncludeUnmatchedChoropleth: false,
         background: undefined,
         size: {
             mode: "auto",
@@ -31,6 +56,7 @@ export function initVisualConfig(): IVisualConfig {
             timeFormat: undefined,
             normalizedNumberFormat: undefined,
         },
+        geoKey: 'name',
         resolve: {
             x: false,
             y: false,
@@ -60,6 +86,7 @@ export function visSpecDecoder(visList: IVisSpecForExport[]): IVisSpec[] {
         return {
             ...visSpec,
             encodings: {
+                ...initEncoding(),
                 ...visSpec.encodings,
                 filters: updatedFilters,
             },

package/src/visualSettings/index.tsx

@@ -19,6 +19,11 @@ import {
     LightBulbIcon,
     CodeBracketSquareIcon,
     Cog6ToothIcon,
+    TableCellsIcon,
+    MapPinIcon,
+    GlobeAltIcon,
+    RectangleGroupIcon,
+    GlobeAmericasIcon,
     HashtagIcon,
 } from '@heroicons/react/24/outline';
 import { observer } from 'mobx-react-lite';
@@ -26,7 +31,7 @@ import React, { SVGProps, useCallback, useMemo } from 'react';
 import styled from 'styled-components';
 import { useTranslation } from 'react-i18next';
 import { ResizeDialog } from '../components/sizeSetting';
-import { GEMO_TYPES, STACK_MODE, CHART_LAYOUT_TYPE } from '../config';
+import { GEMO_TYPES, STACK_MODE, CHART_LAYOUT_TYPE, COORD_TYPES } from '../config';
 import { useGlobalStore } from '../store';
 import { IStackMode, IDarkMode } from '../interfaces';
 import { IReactVegaHandler } from '../vis/react-vega';
@@ -82,6 +87,8 @@ const VisualSettings: React.FC<IVisualSettings> = ({
     const {
         defaultAggregated,
         geoms: [markType],
+        showTableSummary,
+        coordSystem = 'generic',
         stack,
         interactiveScale,
         size: { mode: sizeMode, width, height },
@@ -163,7 +170,7 @@ const VisualSettings: React.FC<IVisualSettings> = ({
                         color: 'rgb(294,115,22)',
                     },
                 },
-                options: GEMO_TYPES.map((g) => ({
+                options: GEMO_TYPES[coordSystem].map((g) => ({
                     key: g,
                     label: tGlobal(`constant.mark_type.${g}`),
                     icon: {
@@ -348,6 +355,8 @@ const VisualSettings: React.FC<IVisualSettings> = ({
                                 />
                             </svg>
                         ),
+                        poi: MapPinIcon,
+                        choropleth: RectangleGroupIcon,
                     }[g],
                 })),
                 value: markType,
@@ -393,6 +402,15 @@ const VisualSettings: React.FC<IVisualSettings> = ({
                 icon: BarsArrowDownIcon,
                 onClick: () => vizStore.applyDefaultSort('descending'),
             },
+            {
+                key: 'table:summary',
+                label: t('table.summary'),
+                icon: TableCellsIcon,
+                checked: showTableSummary,
+                onChange: checked => {
+                    vizStore.setVisualConfig('showTableSummary', checked);
+                },
+            },
             '-',
             {
                 key: 'axes_resize',
@@ -438,6 +456,34 @@ const VisualSettings: React.FC<IVisualSettings> = ({
                 ),
             },
             '-',
+            {
+                key: 'coord_system',
+                label: tGlobal('constant.coord_system.__enum__'),
+                icon: StopIcon,
+                options: COORD_TYPES.map(c => ({
+                    key: c,
+                    label: tGlobal(`constant.coord_system.${c}`),
+                    icon: {
+                        generic: (props: SVGProps<SVGSVGElement>) => <svg stroke="currentColor" fill="none" strokeWidth="1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden {...props}><path strokeLinecap="round" strokeLinejoin="round" d="M2 12h20M12 2v20" /><path strokeLinecap="round" strokeLinejoin="round" d="M12 7h2M12 16h2M7 12v-2M16 12v-2"/></svg>,
+                        geographic: GlobeAltIcon,
+                    }[c],
+                })),
+                value: coordSystem,
+                onSelect: value => {
+                    const coord = value as typeof COORD_TYPES[number];
+                    vizStore.setVisualConfig('coordSystem', coord);
+                    vizStore.setVisualConfig('geoms', [GEMO_TYPES[coord][0]]);
+                },
+            },
+            coordSystem === 'geographic' && markType === 'choropleth' && {
+                key: 'geojson',
+                label: t('button.geojson'),
+                icon: GlobeAmericasIcon,
+                onClick: () => {
+                    commonStore.setShowGeoJSONConfigPanel(true);
+                },
+            },
+            '-',
             {
                 key: 'debug',
                 label: t('toggle.debug'),
@@ -447,7 +493,7 @@ const VisualSettings: React.FC<IVisualSettings> = ({
                     vizStore.setVisualConfig('showActions', checked);
                 },
             },
-            {
+            ...coordSystem === 'generic' ?[{
                 key: 'export_chart',
                 label: t('button.export_chart'),
                 icon: PhotoIcon,
@@ -477,7 +523,7 @@ const VisualSettings: React.FC<IVisualSettings> = ({
                         </button>
                     </FormContainer>
                 ),
-            },
+            }]:[],
             {
                 key: 'config',
                 label: 'config',
@@ -529,17 +575,23 @@ const VisualSettings: React.FC<IVisualSettings> = ({
                     </a>
                 ),
             },
-        ] as ToolbarItemProps[];
+        ].filter(Boolean) as ToolbarItemProps[];
 
         const items = builtInItems.filter((item) => typeof item === 'string' || !exclude.includes(item.key));
 
-        return items;
+        switch (vizStore.visualConfig.geoms[0]) {
+            case 'table':
+                return items;
+            default:
+                return items.filter(item => typeof item === 'string' || item.key !== 'table:summary');
+        }
     }, [
         vizStore,
         canUndo,
         canRedo,
         defaultAggregated,
         markType,
+        coordSystem,
         stack,
         interactiveScale,
         sizeMode,

package/src/workers/buildMetricTable.worker.js

@@ -0,0 +1,27 @@
+/* eslint no-restricted-globals: 0 */
+/* eslint-disable */ 
+import { buildPivotTable } from "./buildPivotTable"
+/**
+ * @param {import('../interfaces').IViewField[]} dimsInRow
+ * @param {import('../interfaces').IViewField[]} dimsInColumn
+ * @param {import('../interfaces').IRow[]} allData
+ * @param {import('../interfaces').IRow} aggData
+ * @param {string[]} collapsedKeyList
+ * @param {boolean} showTableSummary
+ * @return {{lt: import('../components/pivotTable/inteface').INestNode, tt: import('../components/pivotTable/inteface').INestNode, metric: import('../interfaces').(IRow | null)[][]}}
+ */
+
+/**
+ * @param {MessageEvent<{ dimsInRow: import('../interfaces').IViewField[]; dimsInColumn: import('../interfaces').IViewField[]; allData: import('../interfaces').IRow[]; aggData: import('../interfaces').IRow[]; collapsedKeyList: string[]; showTableSummary: boolean }>} e
+ */
+const main = e => {
+    const { dimsInRow, dimsInColumn, allData, aggData, collapsedKeyList, showTableSummary } = e.data;
+    try {
+        const ans = buildPivotTable(dimsInRow, dimsInColumn, allData, aggData, collapsedKeyList, showTableSummary);
+        self.postMessage(ans);
+    } catch (error) {
+        self.postMessage({ error: error.message });
+    }
+};
+
+self.addEventListener('message', main, false);

package/src/workers/buildPivotTable.ts

@@ -0,0 +1,27 @@
+import { INestNode } from "../components/pivotTable/inteface";
+import { buildMetricTableFromNestTree, buildNestTree } from "../components/pivotTable/utils"
+import { IViewField, IRow } from "../interfaces"
+
+export function buildPivotTable (
+    dimsInRow: IViewField[], 
+    dimsInColumn: IViewField[], 
+    allData: IRow[], 
+    aggData: IRow[], 
+    collapsedKeyList: string[], 
+    showTableSummary: boolean
+): {lt: INestNode, tt: INestNode, metric: (IRow | null)[][]} {
+    const lt = buildNestTree(
+        dimsInRow.map((d) => d.fid),
+        allData,
+        collapsedKeyList,
+        showTableSummary
+    );
+    const tt = buildNestTree(
+        dimsInColumn.map((d) => d.fid),
+        allData,
+        collapsedKeyList,
+        showTableSummary
+    );
+    const metric = buildMetricTableFromNestTree(lt, tt, [...allData, ...aggData])
+    return {lt, tt, metric}
+}