@kanaries/graphic-walker 0.4.0 → 0.4.2

package/src/locales/zh-CN.json

@@ -39,7 +39,14 @@
             "arc": "弧形",
             "boxplot": "统计箱",
             "table": "表格",
-            "text": "文本"
+            "text": "文本",
+            "poi": "兴趣点",
+            "choropleth": "区域图"
+        },
+        "coord_system": {
+            "__enum__": "坐标系统",
+            "generic": "通用",
+            "geographic": "地理"
         },
         "layout_type": {
             "__enum__": "尺寸模式",
@@ -77,7 +84,10 @@
             "radius": "半径",
             "filters": "筛选器",
             "details": "信息",
-            "text": "文本"
+            "text": "文本",
+            "longitude": "经度",
+            "latitude": "纬度",
+            "geoId": "地理 ID"
         },
         "aggregator": {
             "sum": "求和",
@@ -168,6 +178,21 @@
                 "size_setting": {
                     "width": "宽度",
                     "height": "高度"
+                },
+                "table": {
+                    "summary": "显示摘要"
+                },
+                "geography": "地理信息配置",
+                "geography_settings": {
+                    "geoKey": "地理 ID",
+                    "format": "数据格式",
+                    "geojson": "GeoJSON",
+                    "topojson": "TopoJSON",
+                    "objectKey": "提取要素键",
+                    "jsonInputPlaceholder": "在此粘贴 {{format}}",
+                    "href": "{{format}} URL",
+                    "hrefPlaceholder": "输入在线资源地址",
+                    "load": "加载"
                 }
             },
             "DatasetFields": {

package/src/renderer/hooks.ts

@@ -4,13 +4,11 @@ import type { DeepReadonly, IFilterField, IRow, IViewField, IDataQueryWorkflowSt
 import { useGlobalStore } from '../store';
 import { useAppRootContext } from '../components/appRoot';
 import { toWorkflow } from '../utils/workflow';
-import { dataQueryClient } from '../computation/clientComputation';
 import { dataQueryServer } from '../computation/serverComputation';
-import { useDebounceValue } from '../hooks';
 
 export const useComputationFunc = (): IComputationFunction => {
     const { vizStore } = useGlobalStore();
-    return vizStore.computationFuction;
+    return vizStore.computationFunction;
 };
 
 interface UseRendererProps {
@@ -40,14 +38,12 @@ export const useRenderer = (props: UseRendererProps): UseRendererResult => {
         filters,
         defaultAggregated,
         sort,
-        limit: storeLimit,
+        limit,
         computationFunction,
     } = props;
     const [computing, setComputing] = useState(false);
     const taskIdRef = useRef(0);
 
-    const limit = useDebounceValue(storeLimit);
-
     const workflow = useMemo(() => {
         return toWorkflow(
             filters,
@@ -65,48 +61,6 @@ export const useRenderer = (props: UseRendererProps): UseRendererResult => {
 
     const appRef = useAppRootContext();
 
-    // useEffect(() => {
-    //     if (computationMode !== 'client') {
-    //         return;
-    //     }
-    //     if (!data) {
-    //         console.warn('useRenderer error: prop `data` is required for "client" mode, but none is found.');
-    //         return;
-    //     }
-    //     if (!allFields) {
-    //         console.warn('useRenderer error: prop `fields` is required for "client" mode, but none is found.');
-    //         return;
-    //     }
-    //     const taskId = ++taskIdRef.current;
-    //     appRef.current?.updateRenderStatus('computing');
-    //     setComputing(true);
-    //     dataQueryClient(data, allFields, workflow).then(data => {
-    //         if (taskId !== taskIdRef.current) {
-    //             return;
-    //         }
-    //         appRef.current?.updateRenderStatus('rendering');
-    //         unstable_batchedUpdates(() => {
-    //             setComputing(false);
-    //             setViewData(data);
-    //             setParsedWorkflow(workflow);
-    //         });
-    //     }).catch((err) => {
-    //         if (taskId !== taskIdRef.current) {
-    //             return;
-    //         }
-    //         appRef.current?.updateRenderStatus('error');
-    //         console.error(err);
-    //         unstable_batchedUpdates(() => {
-    //             setComputing(false);
-    //             setViewData([]);
-    //             setParsedWorkflow([]);
-    //         });
-    //     });
-    //     return () => {
-    //         taskIdRef.current++;
-    //     };
-    // }, [computationMode, data, allFields, workflow]);
-
     useEffect(() => {
         const taskId = ++taskIdRef.current;
         appRef.current?.updateRenderStatus('computing');

package/src/renderer/index.tsx

@@ -8,8 +8,9 @@ import { useGlobalStore } from '../store';
 import { IReactVegaHandler } from '../vis/react-vega';
 import { unstable_batchedUpdates } from 'react-dom';
 import { useRenderer } from './hooks';
-import { initEncoding } from '../store/visualSpecStore';
+import { initEncoding } from '../utils/save';
 import { useChartIndexControl } from '../utils/chartIndexControl';
+import { LEAFLET_DEFAULT_HEIGHT, LEAFLET_DEFAULT_WIDTH } from '../components/leafletRenderer';
 import { initVisualConfig } from '../utils/save';
 
 interface RendererProps {
@@ -102,6 +103,27 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
         [vizStore]
     );
 
+    const isSpatial = viewConfig.coordSystem === 'geographic';
+
+    const sizeRef = useRef(viewConfig.size);
+    sizeRef.current = viewConfig.size;
+
+    useEffect(() => {
+        if (isSpatial) {
+            const prevSizeConfig = sizeRef.current;
+            if (sizeRef.current.width < LEAFLET_DEFAULT_WIDTH || sizeRef.current.height < LEAFLET_DEFAULT_HEIGHT) {
+                vizStore.setChartLayout({
+                    mode: sizeRef.current.mode,
+                    width: Math.max(prevSizeConfig.width, LEAFLET_DEFAULT_WIDTH),
+                    height: Math.max(prevSizeConfig.height, LEAFLET_DEFAULT_HEIGHT),
+                });
+                return () => {
+                    vizStore.setChartLayout(prevSizeConfig);
+                };
+            }
+        }
+    }, [isSpatial, vizStore]);
+
     return (
         <SpecRenderer
             name={chart?.name}
@@ -115,6 +137,7 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
             visualConfig={viewConfig}
             onGeomClick={handleGeomClick}
             onChartResize={handleChartResize}
+            computationFunction={computationFunction}
         />
     );
 });

package/src/renderer/pureRenderer.tsx

@@ -3,6 +3,7 @@ import { unstable_batchedUpdates } from 'react-dom';
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { ShadowDom } from '../shadow-dom';
+import LeafletRenderer from '../components/leafletRenderer';
 import { withAppRoot } from '../components/appRoot';
 import type {
     IDarkMode,
@@ -54,7 +55,6 @@ const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function
     const defaultAggregated = visualConfig?.defaultAggregated ?? false;
 
     const [viewData, setViewData] = useState<IRow[]>([]);
-
     const { allFields, viewDimensions, viewMeasures, filters } = useMemo(() => {
         const viewDimensions: IViewField[] = [];
         const viewMeasures: IViewField[] = [];
@@ -86,7 +86,7 @@ const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function
         limit: limit ?? -1,
         computationFunction: computation,
     });
-
+    console.log(computation)
     // Dependencies that should not trigger effect individually
     const latestFromRef = useRef({ data });
     latestFromRef.current = { data };
@@ -99,20 +99,33 @@ const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function
         }
     }, [waiting]);
 
+    const { coordSystem = 'generic' } = visualConfig;
+    const isSpatial = coordSystem === 'geographic';
+
     return (
         <ShadowDom>
             <div className="relative">
-                <SpecRenderer
-                    name={name}
-                    loading={waiting}
-                    data={viewData}
-                    ref={ref}
-                    themeKey={themeKey}
-                    dark={dark}
-                    draggableFieldState={visualState}
-                    visualConfig={visualConfig}
-                    locale={locale ?? 'en-US'}
-                />
+                {isSpatial && (
+                    <LeafletRenderer
+                        data={data}
+                        draggableFieldState={visualState}
+                        visualConfig={visualConfig}
+                    />
+                )}
+                {isSpatial || (
+                    <SpecRenderer
+                        name={name}
+                        loading={waiting}
+                        data={viewData}
+                        ref={ref}
+                        themeKey={themeKey}
+                        dark={dark}
+                        draggableFieldState={visualState}
+                        visualConfig={visualConfig}
+                        locale={locale ?? 'en-US'}
+                        computationFunction={computation}
+                    />
+                )}
             </div>
         </ShadowDom>
     );

package/src/renderer/specRenderer.tsx

@@ -3,8 +3,9 @@ import { Resizable } from 're-resizable';
 import React, { forwardRef, useMemo } from 'react';
 
 import PivotTable from '../components/pivotTable';
+import LeafletRenderer from '../components/leafletRenderer';
 import ReactVega, { IReactVegaHandler } from '../vis/react-vega';
-import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig, VegaGlobalConfig } from '../interfaces';
+import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig, VegaGlobalConfig, IComputationFunction } from '../interfaces';
 import LoadingLayer from '../components/loadingLayer';
 import { useCurrentMediaTheme } from '../utils/media';
 import { builtInThemes } from '../vis/theme';
@@ -20,17 +21,18 @@ interface SpecRendererProps {
     onGeomClick?: ((values: any, e: any) => void) | undefined;
     onChartResize?: ((width: number, height: number) => void) | undefined;
     locale?: string;
+    computationFunction: IComputationFunction;
 }
 /**
  * Sans-store renderer of GraphicWalker.
  * This is a pure component, which means it will not depend on any global state.
  */
 const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
-    { name, themeKey, dark, data, loading, draggableFieldState, visualConfig, onGeomClick, onChartResize, locale },
+    { name, themeKey, dark, data, loading, draggableFieldState, visualConfig, onGeomClick, onChartResize, locale, computationFunction  },
     ref
 ) {
     // const { draggableFieldState, visualConfig } = vizStore;
-    const { geoms, interactiveScale, defaultAggregated, stack, showActions, size, format: _format, background, zeroScale, resolve } = visualConfig;
+    const { geoms, coordSystem = 'generic', interactiveScale, defaultAggregated, stack, showActions, size, format: _format, background, zeroScale, resolve } = visualConfig;
 
     const rows = draggableFieldState.rows;
     const columns = draggableFieldState.columns;
@@ -108,10 +110,13 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
                 loading={loading}
                 themeKey={themeKey}
                 dark={dark}
+                computationFunction={computationFunction}
             />
         );
     }
 
+    const isSpatial = coordSystem === 'geographic';
+
     return (
         <Resizable
             className={enableResize ? 'border-blue-400 border-2 overflow-hidden' : ''}
@@ -139,33 +144,43 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
             }}
         >
             {loading && <LoadingLayer />}
-            <ReactVega
-                name={name}
-                vegaConfig={vegaConfig}
-                // format={format}
-                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}
-                text={text[0]}
-                showActions={showActions}
-                width={size.width - 12 * 4}
-                height={size.height - 12 * 4}
-                ref={ref}
-                onGeomClick={onGeomClick}
-                locale={locale}
-            />
+            {isSpatial && (
+                <LeafletRenderer
+                    data={data}
+                    draggableFieldState={draggableFieldState}
+                    visualConfig={visualConfig}
+                    vegaConfig={vegaConfig}
+                />
+            )}
+            {isSpatial || (
+                <ReactVega
+                    name={name}
+                    vegaConfig={vegaConfig}
+                    // format={format}
+                    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}
+                    text={text[0]}
+                    showActions={showActions}
+                    width={size.width - 12 * 4}
+                    height={size.height - 12 * 4}
+                    ref={ref}
+                    onGeomClick={onGeomClick}
+                    locale={locale}
+                />
+            )}
         </Resizable>
     );
 });

package/src/services.ts

@@ -1,5 +1,6 @@
 import { toJS } from 'mobx';
-import { IRow, IMutField, Specification, IFilterFiledSimple, IExpression } from './interfaces';
+import { IRow, IMutField, IViewField, Specification, IFilterFiledSimple, IExpression } from './interfaces';
+import { INestNode } from "./components/pivotTable/inteface";
 /* eslint import/no-webpack-loader-syntax:0 */
 // @ts-ignore
 // eslint-disable-next-line
@@ -11,6 +12,7 @@ import { IRow, IMutField, Specification, IFilterFiledSimple, IExpression } from
 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 BuildMetricTableWorker from './workers/buildMetricTable.worker?worker&inline';
 import SortWorker from './workers/sort.worker?worker&inline';
 
 import { IViewQuery } from './lib/viewQuery';
@@ -105,22 +107,12 @@ interface PreAnalysisParams {
 //     }
 // }
 
-let filterWorker: Worker | null = null;
-let filterWorkerAutoTerminator: NodeJS.Timeout | null = null;
 
 export const applyFilter = async (data: IRow[], filters: readonly IFilterFiledSimple[]): Promise<IRow[]> => {
     if (filters.length === 0) return data;
-    if (filterWorkerAutoTerminator !== null) {
-        clearTimeout(filterWorkerAutoTerminator);
-        filterWorkerAutoTerminator = null;
-    }
-
-    if (filterWorker === null) {
-        filterWorker = new FilterWorker();
-    }
-
+    const worker = new FilterWorker();
     try {
-        const res: IRow[] = await workerService(filterWorker, {
+        const res: IRow[] = await workerService(worker, {
             dataSource: data,
             filters: toJS(filters),
         });
@@ -130,15 +122,7 @@ export const applyFilter = async (data: IRow[], filters: readonly IFilterFiledSi
         // @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
+        worker.terminate();
     }
 };
 
@@ -171,7 +155,32 @@ export const applyViewQuery = async (data: IRow[], query: IViewQuery): Promise<I
     } finally {
         worker.terminate();
     }
-};
+}
+
+export const buildPivotTableService = async (dimsInRow: IViewField[], 
+        dimsInColumn: IViewField[], 
+        allData: IRow[], 
+        aggData: IRow[], 
+        collapsedKeyList: string[], 
+        showTableSummary: boolean
+    ): Promise<{lt: INestNode, tt: INestNode, metric: (IRow | null)[][]}> => {
+    const worker = new BuildMetricTableWorker();
+    try {
+        const res: {lt: INestNode, tt: INestNode, metric: (IRow | null)[][]} = await workerService(worker, {
+            dimsInRow,
+            dimsInColumn, 
+            allData, 
+            aggData, 
+            collapsedKeyList, 
+            showTableSummary
+        });
+        return res;
+    } catch (error) {
+        throw new Error('Uncaught error in TableBuilderDataWorker', { cause: error });
+    } finally {
+        worker.terminate();
+    }
+}
 
 export const applySort = async (
     data: IRow[],

package/src/shadow-dom.tsx

@@ -36,6 +36,13 @@ export const ShadowDom: React.FC<IShadowDomProps> = function ShadowDom ({ onMoun
         <root.div {...attrs} mode="open" ref={rootRef}>
             <style>{tailwindStyle}</style>
             <style>{style}</style>
+            {/* Leaflet CSS file */}
+            <link
+                rel="stylesheet"
+                href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+                integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+                crossOrigin=""
+            />
             {shadowRoot && (
                 <StyleSheetManager target={shadowRoot}>
                     <ShadowDomContext.Provider value={{ root: shadowRoot }}>

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, reaction, toJS } from 'mobx';
+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,14 +379,17 @@ 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':
                 case configKey === 'background':
+                case configKey === 'resolve':
                 case configKey === 'limit':
                 case configKey === 'stack': {
                     return (config[configKey] = value);
@@ -510,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 {
@@ -818,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) => {
@@ -875,7 +891,7 @@ export class VizSpecStore {
         );
     }
 
-    public setComputationFunction(f: IComputationFunction) {
-        this.computationFuction = f;
+    public setComputationFunction(f: IComputationFunction, timeout = 60000) {
+        this.computationFunction = withTimeout(f, timeout);
     }
 }