@kanaries/graphic-walker 0.4.1 → 0.4.3

package/dist/interfaces.d.ts

@@ -1,5 +1,7 @@
 import { Config as VgConfig, View } from 'vega';
 import { Config as VlConfig } from 'vega-lite';
+import type { FeatureCollection } from 'geojson';
+import type { feature } from 'topojson-client';
 import type { IViewQuery } from "./lib/viewQuery";
 export type DeepReadonly<T extends Record<keyof any, any>> = {
     readonly [K in keyof T]: T[K] extends Record<keyof any, any> ? DeepReadonly<T[K]> : T[K];
@@ -75,6 +77,7 @@ export interface IExpression {
     params: IExpParamter[];
     as: string;
 }
+export type IGeoRole = 'longitude' | 'latitude' | 'none';
 export interface IField {
     /**
      * fid: key in data record
@@ -90,6 +93,7 @@ export interface IField {
     aggName?: string;
     semanticType: ISemanticType;
     analyticType: IAnalyticType;
+    geoRole?: IGeoRole;
     cmp?: (a: any, b: any) => number;
     computed?: boolean;
     expression?: IExpression;
@@ -162,6 +166,9 @@ export interface DraggableFieldState {
     shape: IViewField[];
     theta: IViewField[];
     radius: IViewField[];
+    longitude: IViewField[];
+    latitude: IViewField[];
+    geoId: IViewField[];
     details: IViewField[];
     filters: IFilterField[];
     text: IViewField[];
@@ -181,14 +188,20 @@ export type IFilterRule = {
     value: Set<string | number>;
 };
 export type IStackMode = 'none' | 'stack' | 'normalize' | 'zero' | 'center';
+export type ICoordMode = 'generic' | 'geographic';
 export interface IVisualConfig {
     defaultAggregated: boolean;
     geoms: string[];
+    showTableSummary: boolean;
+    /** @default "generic" */
+    coordSystem?: ICoordMode;
     stack: IStackMode;
     showActions: boolean;
     interactiveScale: boolean;
     sorted: ISortMode;
     zeroScale: boolean;
+    /** @default false */
+    scaleIncludeUnmatchedChoropleth?: boolean;
     background?: string;
     format: {
         numberFormat?: string;
@@ -208,6 +221,8 @@ export interface IVisualConfig {
         width: number;
         height: number;
     };
+    geojson?: FeatureCollection;
+    geoKey?: string;
     limit: number;
 }
 export interface IVisSpec {
@@ -255,6 +270,7 @@ export interface IChartExportResult<T extends 'svg' | 'data-url' = 'svg' | 'data
         canvas(): HTMLCanvasElement | null;
     }[];
     container(): HTMLDivElement | null;
+    chartType?: string;
 }
 interface IExportChart {
     <T extends Extract<IChartExportResult['mode'], 'svg'>>(mode?: T): Promise<IChartExportResult<T>>;
@@ -388,4 +404,16 @@ export type IResponse<T> = ({
         options?: Record<string, string>;
     };
 });
+export type Topology = Parameters<typeof feature>[0];
+export type IGeographicData = ({
+    type: 'GeoJSON';
+    data: FeatureCollection;
+} | {
+    type: 'TopoJSON';
+    data: Topology;
+    /**
+     * default to the first key of `objects` in Topology
+     */
+    objectKey?: string;
+});
 export {};

package/dist/renderer/specRenderer.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IReactVegaHandler } from '../vis/react-vega';
-import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig } from '../interfaces';
+import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig, IComputationFunction } from '../interfaces';
 interface SpecRendererProps {
     name?: string;
     themeKey?: IThemeKey;
@@ -12,6 +12,7 @@ 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.

package/dist/services.d.ts

@@ -1,4 +1,5 @@
-import { IRow, Specification, IFilterFiledSimple, IExpression } from './interfaces';
+import { IRow, IViewField, Specification, IFilterFiledSimple, IExpression } from './interfaces';
+import { INestNode } from "./components/pivotTable/inteface";
 import { IViewQuery } from './lib/viewQuery';
 export interface IVisSpace {
     dataView: IRow[];
@@ -10,4 +11,9 @@ export declare const transformDataService: (data: IRow[], trans: {
     expression: IExpression;
 }[]) => Promise<IRow[]>;
 export declare const applyViewQuery: (data: IRow[], query: IViewQuery) => Promise<IRow[]>;
+export declare const buildPivotTableService: (dimsInRow: IViewField[], dimsInColumn: IViewField[], allData: IRow[], aggData: IRow[], collapsedKeyList: string[], showTableSummary: boolean) => Promise<{
+    lt: INestNode;
+    tt: INestNode;
+    metric: (IRow | null)[][];
+}>;
 export declare const applySort: (data: IRow[], viewMeasures: string[], sort: 'ascending' | 'descending') => Promise<IRow[]>;

package/dist/store/commonStore.d.ts

@@ -1,4 +1,5 @@
 import { DataSet, Filters, IDataSet, IDataSetInfo, IDataSource, IMutField, IRow, ISegmentKey } from '../interfaces';
+import { INestNode } from '../components/pivotTable/inteface';
 export declare class CommonStore {
     datasets: IDataSet[];
     dataSources: IDataSource[];
@@ -15,8 +16,10 @@ export declare class CommonStore {
     showDataConfig: boolean;
     showCodeExportPanel: boolean;
     showVisualConfigPanel: boolean;
+    showGeoJSONConfigPanel: boolean;
     filters: Filters;
     segmentKey: ISegmentKey;
+    tableCollapsedHeaderMap: Map<string, INestNode["path"]>;
     constructor();
     get currentDataset(): DataSet;
     setSegmentKey(sk: ISegmentKey): void;
@@ -26,6 +29,9 @@ export declare class CommonStore {
     showEmbededMenu(position: [number, number]): void;
     setShowCodeExportPanel(show: boolean): void;
     setShowVisualConfigPanel(show: boolean): void;
+    updateTableCollapsedHeader(node: INestNode): void;
+    resetTableCollapsedHeader(): void;
+    setShowGeoJSONConfigPanel(show: boolean): void;
     closeEmbededMenu(): void;
     initTempDS(): void;
     updateTempFields(fields: IMutField[]): void;

package/dist/store/visualSpecStore.d.ts

@@ -1,8 +1,7 @@
-import { DataSet, DraggableFieldState, IFilterRule, ISortMode, IStackMode, IViewField, IVisualConfig, Specification, IComputationFunction } from '../interfaces';
+import { DataSet, DraggableFieldState, IFilterRule, IGeographicData, ISortMode, IStackMode, IViewField, IVisualConfig, Specification, IComputationFunction } from '../interfaces';
 import { VisSpecWithHistory } from '../models/visSpecHistory';
 import { IStoInfo } from '../utils/save';
 import { CommonStore } from './commonStore';
-export declare function initEncoding(): DraggableFieldState;
 type DeepReadonly<T extends Record<keyof any, any>> = {
     readonly [K in keyof T]: T[K] extends Record<keyof any, any> ? DeepReadonly<T[K]> : T[K];
 };
@@ -46,7 +45,7 @@ export declare class VizSpecStore {
     canUndo: boolean;
     canRedo: boolean;
     editingFilterIdx: number | null;
-    computationFuction: IComputationFunction;
+    computationFunction: IComputationFunction;
     constructor(commonStore: CommonStore);
     private __dangerous_is_inside_useMutable__;
     /**
@@ -129,6 +128,7 @@ export declare class VizSpecStore {
                 readonly aggName?: string | undefined;
                 readonly semanticType: import("../interfaces").ISemanticType;
                 readonly analyticType: import("../interfaces").IAnalyticType;
+                readonly geoRole?: import("../interfaces").IGeoRole | undefined;
                 readonly cmp?: {} | undefined;
                 readonly computed?: boolean | undefined;
                 readonly expression?: {
@@ -159,6 +159,7 @@ export declare class VizSpecStore {
                 readonly aggName?: string | undefined;
                 readonly semanticType: import("../interfaces").ISemanticType;
                 readonly analyticType: import("../interfaces").IAnalyticType;
+                readonly geoRole?: import("../interfaces").IGeoRole | undefined;
                 readonly cmp?: {} | undefined;
                 readonly computed?: boolean | undefined;
                 readonly expression?: {
@@ -189,6 +190,7 @@ export declare class VizSpecStore {
                 readonly aggName?: string | undefined;
                 readonly semanticType: import("../interfaces").ISemanticType;
                 readonly analyticType: import("../interfaces").IAnalyticType;
+                readonly geoRole?: import("../interfaces").IGeoRole | undefined;
                 readonly cmp?: {} | undefined;
                 readonly computed?: boolean | undefined;
                 readonly expression?: {
@@ -219,6 +221,7 @@ export declare class VizSpecStore {
                 readonly aggName?: string | undefined;
                 readonly semanticType: import("../interfaces").ISemanticType;
                 readonly analyticType: import("../interfaces").IAnalyticType;
+                readonly geoRole?: import("../interfaces").IGeoRole | undefined;
                 readonly cmp?: {} | undefined;
                 readonly computed?: boolean | undefined;
                 readonly expression?: {
@@ -249,6 +252,7 @@ export declare class VizSpecStore {
                 readonly aggName?: string | undefined;
                 readonly semanticType: import("../interfaces").ISemanticType;
                 readonly analyticType: import("../interfaces").IAnalyticType;
+                readonly geoRole?: import("../interfaces").IGeoRole | undefined;
                 readonly cmp?: {} | undefined;
                 readonly computed?: boolean | undefined;
                 readonly expression?: {
@@ -279,6 +283,7 @@ export declare class VizSpecStore {
                 readonly aggName?: string | undefined;
                 readonly semanticType: import("../interfaces").ISemanticType;
                 readonly analyticType: import("../interfaces").IAnalyticType;
+                readonly geoRole?: import("../interfaces").IGeoRole | undefined;
                 readonly cmp?: {} | undefined;
                 readonly computed?: boolean | undefined;
                 readonly expression?: {
@@ -309,6 +314,7 @@ export declare class VizSpecStore {
                 readonly aggName?: string | undefined;
                 readonly semanticType: import("../interfaces").ISemanticType;
                 readonly analyticType: import("../interfaces").IAnalyticType;
+                readonly geoRole?: import("../interfaces").IGeoRole | undefined;
                 readonly cmp?: {} | undefined;
                 readonly computed?: boolean | undefined;
                 readonly expression?: {
@@ -339,6 +345,7 @@ export declare class VizSpecStore {
                 readonly aggName?: string | undefined;
                 readonly semanticType: import("../interfaces").ISemanticType;
                 readonly analyticType: import("../interfaces").IAnalyticType;
+                readonly geoRole?: import("../interfaces").IGeoRole | undefined;
                 readonly cmp?: {} | undefined;
                 readonly computed?: boolean | undefined;
                 readonly expression?: {
@@ -369,6 +376,7 @@ export declare class VizSpecStore {
                 readonly aggName?: string | undefined;
                 readonly semanticType: import("../interfaces").ISemanticType;
                 readonly analyticType: import("../interfaces").IAnalyticType;
+                readonly geoRole?: import("../interfaces").IGeoRole | undefined;
                 readonly cmp?: {} | undefined;
                 readonly computed?: boolean | undefined;
                 readonly expression?: {
@@ -399,6 +407,100 @@ export declare class VizSpecStore {
                 readonly aggName?: string | undefined;
                 readonly semanticType: import("../interfaces").ISemanticType;
                 readonly analyticType: import("../interfaces").IAnalyticType;
+                readonly geoRole?: import("../interfaces").IGeoRole | undefined;
+                readonly cmp?: {} | undefined;
+                readonly computed?: boolean | undefined;
+                readonly expression?: {
+                    op: "bin" | "log2" | "log10" | "one" | "binCount";
+                    params: ({
+                        type: "field";
+                        value: string;
+                    } | {
+                        type: "value";
+                        value: any;
+                    } | {
+                        type: "expression";
+                        value: any;
+                    } | {
+                        type: "constant";
+                        value: any;
+                    })[];
+                    as: string;
+                } | undefined;
+                readonly basename?: string | undefined;
+                readonly path?: string[] | undefined;
+            }[];
+            readonly longitude: readonly {
+                readonly dragId: string;
+                readonly sort?: ISortMode | undefined;
+                readonly fid: string;
+                readonly name: string;
+                readonly aggName?: string | undefined;
+                readonly semanticType: import("../interfaces").ISemanticType;
+                readonly analyticType: import("../interfaces").IAnalyticType;
+                readonly geoRole?: import("../interfaces").IGeoRole | undefined;
+                readonly cmp?: {} | undefined;
+                readonly computed?: boolean | undefined;
+                readonly expression?: {
+                    op: "bin" | "log2" | "log10" | "one" | "binCount";
+                    params: ({
+                        type: "field";
+                        value: string;
+                    } | {
+                        type: "value";
+                        value: any;
+                    } | {
+                        type: "expression";
+                        value: any;
+                    } | {
+                        type: "constant";
+                        value: any;
+                    })[];
+                    as: string;
+                } | undefined;
+                readonly basename?: string | undefined;
+                readonly path?: string[] | undefined;
+            }[];
+            readonly latitude: readonly {
+                readonly dragId: string;
+                readonly sort?: ISortMode | undefined;
+                readonly fid: string;
+                readonly name: string;
+                readonly aggName?: string | undefined;
+                readonly semanticType: import("../interfaces").ISemanticType;
+                readonly analyticType: import("../interfaces").IAnalyticType;
+                readonly geoRole?: import("../interfaces").IGeoRole | undefined;
+                readonly cmp?: {} | undefined;
+                readonly computed?: boolean | undefined;
+                readonly expression?: {
+                    op: "bin" | "log2" | "log10" | "one" | "binCount";
+                    params: ({
+                        type: "field";
+                        value: string;
+                    } | {
+                        type: "value";
+                        value: any;
+                    } | {
+                        type: "expression";
+                        value: any;
+                    } | {
+                        type: "constant";
+                        value: any;
+                    })[];
+                    as: string;
+                } | undefined;
+                readonly basename?: string | undefined;
+                readonly path?: string[] | undefined;
+            }[];
+            readonly geoId: readonly {
+                readonly dragId: string;
+                readonly sort?: ISortMode | undefined;
+                readonly fid: string;
+                readonly name: string;
+                readonly aggName?: string | undefined;
+                readonly semanticType: import("../interfaces").ISemanticType;
+                readonly analyticType: import("../interfaces").IAnalyticType;
+                readonly geoRole?: import("../interfaces").IGeoRole | undefined;
                 readonly cmp?: {} | undefined;
                 readonly computed?: boolean | undefined;
                 readonly expression?: {
@@ -429,6 +531,7 @@ export declare class VizSpecStore {
                 readonly aggName?: string | undefined;
                 readonly semanticType: import("../interfaces").ISemanticType;
                 readonly analyticType: import("../interfaces").IAnalyticType;
+                readonly geoRole?: import("../interfaces").IGeoRole | undefined;
                 readonly cmp?: {} | undefined;
                 readonly computed?: boolean | undefined;
                 readonly expression?: {
@@ -469,6 +572,7 @@ export declare class VizSpecStore {
                 readonly aggName?: string | undefined;
                 readonly semanticType: import("../interfaces").ISemanticType;
                 readonly analyticType: import("../interfaces").IAnalyticType;
+                readonly geoRole?: import("../interfaces").IGeoRole | undefined;
                 readonly cmp?: {} | undefined;
                 readonly computed?: boolean | undefined;
                 readonly expression?: {
@@ -499,6 +603,7 @@ export declare class VizSpecStore {
                 readonly aggName?: string | undefined;
                 readonly semanticType: import("../interfaces").ISemanticType;
                 readonly analyticType: import("../interfaces").IAnalyticType;
+                readonly geoRole?: import("../interfaces").IGeoRole | undefined;
                 readonly cmp?: {} | undefined;
                 readonly computed?: boolean | undefined;
                 readonly expression?: {
@@ -525,11 +630,14 @@ export declare class VizSpecStore {
         readonly config: {
             readonly defaultAggregated: boolean;
             readonly geoms: readonly string[];
+            readonly showTableSummary: boolean;
+            readonly coordSystem?: import("../interfaces").ICoordMode | undefined;
             readonly stack: IStackMode;
             readonly showActions: boolean;
             readonly interactiveScale: boolean;
             readonly sorted: ISortMode;
             readonly zeroScale: boolean;
+            readonly scaleIncludeUnmatchedChoropleth?: boolean | undefined;
             readonly background?: string | undefined;
             readonly format: {
                 readonly numberFormat?: string | undefined;
@@ -549,16 +657,84 @@ export declare class VizSpecStore {
                 readonly width: number;
                 readonly height: number;
             };
+            readonly geojson?: {
+                type: "FeatureCollection";
+                features: {
+                    type: "Feature";
+                    geometry: {
+                        type: "Point";
+                        coordinates: number[];
+                        bbox?: import("geojson").BBox | undefined;
+                    } | {
+                        type: "MultiPoint";
+                        coordinates: number[][];
+                        bbox?: import("geojson").BBox | undefined;
+                    } | {
+                        type: "LineString";
+                        coordinates: number[][];
+                        bbox?: import("geojson").BBox | undefined;
+                    } | {
+                        type: "MultiLineString";
+                        coordinates: number[][][];
+                        bbox?: import("geojson").BBox | undefined;
+                    } | {
+                        type: "Polygon";
+                        coordinates: number[][][];
+                        bbox?: import("geojson").BBox | undefined;
+                    } | {
+                        type: "MultiPolygon";
+                        coordinates: number[][][][];
+                        bbox?: import("geojson").BBox | undefined;
+                    } | {
+                        type: "GeometryCollection";
+                        geometries: ({
+                            type: "Point";
+                            coordinates: number[];
+                            bbox?: import("geojson").BBox | undefined;
+                        } | {
+                            type: "MultiPoint";
+                            coordinates: number[][];
+                            bbox?: import("geojson").BBox | undefined;
+                        } | {
+                            type: "LineString";
+                            coordinates: number[][];
+                            bbox?: import("geojson").BBox | undefined;
+                        } | {
+                            type: "MultiLineString";
+                            coordinates: number[][][];
+                            bbox?: import("geojson").BBox | undefined;
+                        } | {
+                            type: "Polygon";
+                            coordinates: number[][][];
+                            bbox?: import("geojson").BBox | undefined;
+                        } | {
+                            type: "MultiPolygon";
+                            coordinates: number[][][][];
+                            bbox?: import("geojson").BBox | undefined;
+                        } | any)[];
+                        bbox?: import("geojson").BBox | undefined;
+                    };
+                    id?: string | number | undefined;
+                    properties: {
+                        [x: string]: any;
+                    } | null;
+                    bbox?: import("geojson").BBox | undefined;
+                }[];
+                bbox?: import("geojson").BBox | undefined;
+            } | undefined;
+            readonly geoKey?: string | undefined;
             readonly limit: number;
         };
     }[];
     importStoInfo(stoInfo: IStoInfo): void;
     importRaw(raw: string): void;
+    setGeographicData(data: IGeographicData, geoKey: string): void;
+    updateGeoKey(key: string): void;
     private visSpecEncoder;
     get limit(): number;
     setLimit(value: number): void;
     get sort(): ISortMode;
     getWorkflow(): import("../interfaces").IDataQueryWorkflowStep[];
-    setComputationFunction(f: IComputationFunction): void;
+    setComputationFunction(f: IComputationFunction, timeout?: number): void;
 }
 export {};

package/dist/utils/save.d.ts

@@ -2,6 +2,7 @@ import { DraggableFieldState, IDataSet, IDataSource, IVisSpec, IVisSpecForExport
 import { VisSpecWithHistory } from "../models/visSpecHistory";
 export declare function dumpsGWPureSpec(list: VisSpecWithHistory[]): IVisSpec[];
 export declare function parseGWPureSpec(list: IVisSpec[]): VisSpecWithHistory[];
+export declare function initEncoding(): DraggableFieldState;
 export declare function initVisualConfig(): IVisualConfig;
 export declare function visSpecDecoder(visList: IVisSpecForExport[]): IVisSpec[];
 export declare const forwardVisualConfigs: (backwards: ReturnType<typeof parseGWContent>['specList']) => IVisSpecForExport[];

package/dist/workers/buildPivotTable.d.ts

@@ -0,0 +1,7 @@
+import { INestNode } from "../components/pivotTable/inteface";
+import { IViewField, IRow } from "../interfaces";
+export declare function buildPivotTable(dimsInRow: IViewField[], dimsInColumn: IViewField[], allData: IRow[], aggData: IRow[], collapsedKeyList: string[], showTableSummary: boolean): {
+    lt: INestNode;
+    tt: INestNode;
+    metric: (IRow | null)[][];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",
@@ -36,13 +36,17 @@
   "dependencies": {
     "@headlessui/react": "^1.7.12",
     "@heroicons/react": "^2.0.8",
-    "@kanaries/react-beautiful-dnd": "0.0.2",
+    "@kanaries/react-beautiful-dnd": "^0.0.3",
     "@kanaries/web-data-loader": "^0.1.7",
     "@tailwindcss/forms": "^0.5.4",
     "autoprefixer": "^10.3.5",
+    "d3-format": "^3.1.0",
+    "d3-scale": "^4.0.2",
+    "d3-time-format": "^4.1.0",
     "i18next": "^21.9.1",
     "i18next-browser-languagedetector": "^6.1.5",
     "immer": "^9.0.15",
+    "leaflet": "^1.9.4",
     "mobx": "^6.3.3",
     "mobx-react-lite": "^3.2.1",
     "nanoid": "^4.0.2",
@@ -50,9 +54,11 @@
     "postinstall-postinstall": "^2.1.0",
     "re-resizable": "^6.9.8",
     "react-i18next": "^11.18.6",
+    "react-leaflet": "^4.2.1",
     "react-shadow": "^20.0.0",
     "rxjs": "^7.3.0",
     "tailwindcss": "^3.2.4",
+    "topojson-client": "^3.1.0",
     "uuid": "^8.3.2",
     "vega": "^5.22.1",
     "vega-embed": "^6.21.0",
@@ -60,10 +66,16 @@
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "^8.2.5",
+    "@types/d3-format": "^3.0.1",
+    "@types/d3-scale": "^4.0.3",
+    "@types/d3-time-format": "^4.0.0",
+    "@types/geojson": "^7946.0.10",
+    "@types/leaflet": "^1.9.3",
     "@types/react": "^17.x",
     "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-dom": "^17.x",
     "@types/styled-components": "^5.1.26",
+    "@types/topojson-client": "^3.1.1",
     "@types/uuid": "^8.3.1",
     "@vercel/analytics": "^0.1.8",
     "@vitejs/plugin-react": "^3.1.0",

package/src/App.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useMemo, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useTranslation } from 'react-i18next';
-import { IComputationFunction, IDarkMode, IMutField, IRow, ISegmentKey, IThemeKey, Specification } from './interfaces';
+import { IGeographicData, IComputationFunction, IDarkMode, IMutField, IRow, ISegmentKey, IThemeKey, Specification } from './interfaces';
 import type { IReactVegaHandler } from './vis/react-vega';
 import VisualSettings from './visualSettings';
 import PosFields from './fields/posFields';
@@ -19,6 +19,7 @@ import DatasetConfig from './dataSource/datasetConfig';
 import { useCurrentMediaTheme } from './utils/media';
 import CodeExport from './components/codeExport';
 import VisualConfig from './components/visualConfig';
+import GeoConfigPanel from './components/leafletRenderer/geoConfigPanel';
 import type { ToolbarItemProps } from './components/toolbar';
 import AskViz from './components/askViz';
 import { getComputation } from './computation/clientComputation';
@@ -44,12 +45,16 @@ export interface IGWProps {
         extra?: ToolbarItemProps[];
         exclude?: string[];
     };
+    geographicData?: IGeographicData & {
+        key: string;
+    };
     enhanceAPI?: {
         header?: Record<string, string>;
         features?: {
             askviz?: string | boolean;
         }
     };
+    computationTimeout?: number;
 }
 
 const App = observer<IGWProps>(function App(props) {
@@ -65,7 +70,9 @@ const App = observer<IGWProps>(function App(props) {
         dark = 'media',
         computation,
         toolbar,
+        geographicData,
         enhanceAPI,
+        computationTimeout,
     } = props;
     const { commonStore, vizStore } = useGlobalStore();
 
@@ -134,13 +141,19 @@ const App = observer<IGWProps>(function App(props) {
         }
     }, [spec, safeDataset]);
 
+    useEffect(() => {
+        if (geographicData) {
+            vizStore.setGeographicData(geographicData, geographicData.key);
+        }
+    }, [geographicData]);
+    
     useEffect(() => {
         if (computation) {
-            vizStore.setComputationFunction(computation);
+            vizStore.setComputationFunction(computation, computationTimeout);
         } else {
             vizStore.setComputationFunction(getComputation(commonStore.currentDataset.dataSource));
         }
-    }, [vizStore, computation ?? commonStore.currentDataset.dataSource]);
+    }, [vizStore, computation ?? commonStore.currentDataset.dataSource, computationTimeout]);
 
     const darkMode = useCurrentMediaTheme(dark);
 
@@ -172,6 +185,7 @@ const App = observer<IGWProps>(function App(props) {
                         <VisualSettings rendererHandler={rendererRef} darkModePreference={dark} exclude={toolbar?.exclude} extra={toolbar?.extra} />
                         <CodeExport />
                         <VisualConfig />
+                        <GeoConfigPanel />
                         <div className="md:grid md:grid-cols-12 xl:grid-cols-6">
                             <div className="md:col-span-3 xl:col-span-1">
                                 <DatasetFields />
@@ -195,7 +209,7 @@ const App = observer<IGWProps>(function App(props) {
                                     // }}
                                 >
                                     {datasets.length > 0 && (
-                                        <ReactiveRenderer ref={rendererRef} themeKey={themeKey} dark={dark} computationFunction={vizStore.computationFuction} />
+                                        <ReactiveRenderer ref={rendererRef} themeKey={themeKey} dark={dark} computationFunction={vizStore.computationFunction} />
                                     )}
                                     {/* {vizEmbededMenu.show && (
                                         <ClickMenu x={vizEmbededMenu.position[0]} y={vizEmbededMenu.position[1]}>