@kanaries/graphic-walker 0.3.15 → 0.4.0

package/src/store/visualSpecStore.ts

@@ -1,46 +1,70 @@
-import { IReactionDisposer, makeAutoObservable, observable, reaction, toJS } from "mobx";
-import produce from "immer";
-import { DataSet, DraggableFieldState, IFilterRule, IViewField, IVisSpec, IVisSpecForExport, IFilterFieldForExport, IVisualConfig, Specification } from "../interfaces";
-import { CHANNEL_LIMIT, GEMO_TYPES, MetaFieldKeys } from "../config";
-import { VisSpecWithHistory } from "../models/visSpecHistory";
-import { IStoInfo, dumpsGWPureSpec, parseGWContent, parseGWPureSpec, stringifyGWContent } from "../utils/save";
-import { CommonStore } from "./commonStore";
-import { createCountField } from "../utils";
-import { nanoid } from "nanoid";
+import { IReactionDisposer, makeAutoObservable, observable, reaction, toJS } from 'mobx';
+import produce from 'immer';
+import {
+    DataSet,
+    DraggableFieldState,
+    IFilterRule,
+    ISortMode,
+    IStackMode,
+    IViewField,
+    IVisSpec,
+    IVisSpecForExport,
+    IFilterFieldForExport,
+    IVisualConfig,
+    Specification,
+    IComputationFunction,
+} from '../interfaces';
+import { CHANNEL_LIMIT, GEMO_TYPES, MetaFieldKeys } from '../config';
+import { VisSpecWithHistory } from '../models/visSpecHistory';
+import {
+    IStoInfo,
+    dumpsGWPureSpec,
+    parseGWContent,
+    parseGWPureSpec,
+    stringifyGWContent,
+    initVisualConfig,
+    forwardVisualConfigs,
+    visSpecDecoder,
+} from '../utils/save';
+import { CommonStore } from './commonStore';
+import { createCountField } from '../utils';
+import { COUNT_FIELD_ID } from '../constants';
+import { nanoid } from 'nanoid';
+import { toWorkflow } from '../utils/workflow';
 
 function getChannelSizeLimit(channel: string): number {
-    if (typeof CHANNEL_LIMIT[channel] === "undefined") return Infinity;
+    if (typeof CHANNEL_LIMIT[channel] === 'undefined') return Infinity;
     return CHANNEL_LIMIT[channel];
 }
 
 function uniqueId(): string {
-    return "gw_" + nanoid(4);
+    return 'gw_' + nanoid(4);
 }
 
 function geomAdapter(geom: string) {
     switch (geom) {
-        case "interval":
-        case "bar":
-            return "bar";
-        case "line":
-            return "line";
-        case "boxplot":
-            return "boxplot";
-        case "area":
-            return "area";
-        case "point":
-            return "point";
-        case "arc":
-            return "arc";
-        case "circle":
-            return "circle";
-        case "heatmap":
-            return "circle";
-        case "rect":
-            return "rect";
-        case "tick":
+        case 'interval':
+        case 'bar':
+            return 'bar';
+        case 'line':
+            return 'line';
+        case 'boxplot':
+            return 'boxplot';
+        case 'area':
+            return 'area';
+        case 'point':
+            return 'point';
+        case 'arc':
+            return 'arc';
+        case 'circle':
+            return 'circle';
+        case 'heatmap':
+            return 'circle';
+        case 'rect':
+            return 'rect';
+        case 'tick':
         default:
-            return "tick";
+            return 'tick';
     }
 }
 
@@ -62,42 +86,33 @@ export function initEncoding(): DraggableFieldState {
     };
 }
 
-export function initVisualConfig(): IVisualConfig {
-    return {
-        defaultAggregated: true,
-        geoms: [GEMO_TYPES[0]!],
-        stack: "stack",
-        showActions: false,
-        interactiveScale: false,
-        sorted: "none",
-        zeroScale: true,
-        size: {
-            mode: "auto",
-            width: 320,
-            height: 200,
-        },
-        format: {
-            numberFormat: undefined,
-            timeFormat: undefined,
-            normalizedNumberFormat: undefined
-        }
-    };
+function stackValueTransform(vlValue: string | undefined | null): IStackMode {
+    if (vlValue === 'center') return 'center';
+    if (vlValue === 'normalize') return 'normalize';
+    if (vlValue === 'zero') return 'zero';
+    return 'none';
+}
+
+function sortValueTransform(vlValue: object | string | null): ISortMode {
+    let order: string = 'none';
+    if (typeof vlValue === 'string') {
+        order = vlValue;
+    } else if (vlValue && vlValue instanceof Object) {
+        order = vlValue['order'] ?? 'ascending';
+    }
+    if (order !== 'none') {
+        const channels: string[] = ['x', 'y', 'color', 'size', 'opacity'];
+        // TODO: support all sorting config in vl
+        if (order.startsWith('-') || order === 'descending') return 'descending';
+        if (channels.indexOf(order) > -1 || order === 'ascending') return 'ascending';
+    }
+    return 'none';
 }
 
 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];
 };
 
-const forwardVisualConfigs = (backwards: ReturnType<typeof parseGWContent>["specList"]): IVisSpecForExport[] => {
-    return backwards.map((content) => ({
-        ...content,
-        config: {
-            ...initVisualConfig(),
-            ...content.config,
-        },
-    }));
-};
-
 function isDraggableStateEmpty(state: DeepReadonly<DraggableFieldState>): boolean {
     return Object.values(state).every((value) => value.length === 0);
 }
@@ -143,6 +158,8 @@ export class VizSpecStore {
     public canUndo = false;
     public canRedo = false;
     public editingFilterIdx: number | null = null;
+    // TODO
+    public computationFuction: IComputationFunction = async () => [];
     constructor(commonStore: CommonStore) {
         this.commonStore = commonStore;
         this.draggableFieldState = initEncoding();
@@ -157,6 +174,7 @@ export class VizSpecStore {
         );
         makeAutoObservable(this, {
             visList: observable.shallow,
+            computationFuction: observable.ref,
             // @ts-expect-error private fields are not supported
             reactions: false,
         });
@@ -204,8 +222,7 @@ export class VizSpecStore {
     private useMutable(cb: (tab: { encodings: DraggableFieldState; config: IVisualConfig }) => void) {
         if (this.__dangerous_is_inside_useMutable__) {
             throw new Error(
-                "A recursive call of useMutable() is detected, " +
-                    "this is prevented because update will be overwritten by parent execution context."
+                'A recursive call of useMutable() is detected, ' + 'this is prevented because update will be overwritten by parent execution context.'
             );
         }
 
@@ -264,12 +281,12 @@ export class VizSpecStore {
      */
     public get viewDimensions(): IViewField[] {
         const { draggableFieldState } = this;
-        const state = toJS(draggableFieldState);
+        const { filters, ...state } = toJS(draggableFieldState);
         const fields: IViewField[] = [];
         (Object.keys(state) as (keyof DraggableFieldState)[])
             .filter((dkey) => !MetaFieldKeys.includes(dkey))
             .forEach((dkey) => {
-                fields.push(...state[dkey].filter((f) => f.analyticType === "dimension"));
+                fields.push(...state[dkey].filter((f) => f.analyticType === 'dimension'));
             });
         return fields;
     }
@@ -278,12 +295,12 @@ export class VizSpecStore {
      */
     public get viewMeasures(): IViewField[] {
         const { draggableFieldState } = this;
-        const state = toJS(draggableFieldState);
+        const { filters, ...state } = toJS(draggableFieldState);
         const fields: IViewField[] = [];
         (Object.keys(state) as (keyof DraggableFieldState)[])
             .filter((dkey) => !MetaFieldKeys.includes(dkey))
             .forEach((dkey) => {
-                fields.push(...state[dkey].filter((f) => f.analyticType === "measure"));
+                fields.push(...state[dkey].filter((f) => f.analyticType === 'measure'));
             });
         return fields;
     }
@@ -299,7 +316,6 @@ export class VizSpecStore {
         return state.filters;
     }
 
-
     public addVisualization(defaultName?: string) {
         const name = defaultName || 'Chart ' + (this.visList.length + 1);
         this.visList.push(
@@ -318,8 +334,8 @@ export class VizSpecStore {
     public setVisName(visIndex: number, name: string) {
         this.visList[visIndex] = this.visList[visIndex].clone();
         this.visList[visIndex].updateLatest({
-            name
-        })
+            name,
+        });
     }
     public initState() {
         this.useMutable((tab) => {
@@ -331,7 +347,7 @@ export class VizSpecStore {
         const countField = createCountField();
         this.useMutable(({ encodings }) => {
             encodings.dimensions = dataset.rawFields
-                .filter((f) => f.analyticType === "dimension")
+                .filter((f) => f.analyticType === 'dimension')
                 .map((f) => ({
                     dragId: uniqueId(),
                     fid: f.fid,
@@ -341,7 +357,7 @@ export class VizSpecStore {
                     analyticType: f.analyticType,
                 }));
             encodings.measures = dataset.rawFields
-                .filter((f) => f.analyticType === "measure")
+                .filter((f) => f.analyticType === 'measure')
                 .map((f) => ({
                     dragId: uniqueId(),
                     fid: f.fid,
@@ -349,13 +365,16 @@ export class VizSpecStore {
                     basename: f.basename || f.name || f.fid,
                     analyticType: f.analyticType,
                     semanticType: f.semanticType,
-                    aggName: "sum",
+                    aggName: 'sum',
                 }));
             encodings.measures.push(countField);
         });
 
         this.freezeHistory();
     }
+    /**
+     * clear all config in draggable state
+     */
     public clearState() {
         this.useMutable(({ encodings }) => {
             for (let key in encodings) {
@@ -368,31 +387,33 @@ 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'].includes(configKey): {
                     return ((config as unknown as { [k: string]: boolean })[configKey] = Boolean(value));
                 }
-                case configKey === "geoms" && Array.isArray(value):
-                case configKey === "size" && typeof value === "object":
-                case configKey === "sorted":
-                case configKey === "zeroScale":
-                case configKey === "stack": {
+                case configKey === 'geoms' && Array.isArray(value):
+                case configKey === 'size' && typeof value === 'object':
+                case configKey === 'sorted':
+                case configKey === 'zeroScale':
+                case configKey === 'background':
+                case configKey === 'limit':
+                case configKey === 'stack': {
                     return (config[configKey] = value);
                 }
-                case configKey === 'format' && typeof value === "object": {
-                    return config[configKey] = value
+                case configKey === 'format' && typeof value === 'object': {
+                    return (config[configKey] = value);
                 }
 
                 default: {
-                    console.error("[unknown key] " + configKey + " You should registered visualConfig at setVisualConfig");
+                    console.error('[unknown key] ' + configKey + ' You should registered visualConfig at setVisualConfig');
                 }
             }
         });
     }
-    public transformCoord(coord: "cartesian" | "polar") {
-        if (coord === "polar") {
+    public transformCoord(coord: 'cartesian' | 'polar') {
+        if (coord === 'polar') {
         }
     }
-    public setChartLayout(props: { mode: IVisualConfig["size"]["mode"]; width?: number; height?: number }) {
+    public setChartLayout(props: { mode: IVisualConfig['size']['mode']; width?: number; height?: number }) {
         this.useMutable(({ config }) => {
             const { mode = config.size.mode, width = config.size.width, height = config.size.height } = props;
 
@@ -411,15 +432,10 @@ export class VizSpecStore {
             fields.splice(destinationIndex, 0, field);
         });
     }
-    public moveField(
-        sourceKey: keyof DraggableFieldState,
-        sourceIndex: number,
-        destinationKey: keyof DraggableFieldState,
-        destinationIndex: number
-    ) {
-        if (sourceKey === "filters") {
+    public moveField(sourceKey: keyof DraggableFieldState, sourceIndex: number, destinationKey: keyof DraggableFieldState, destinationIndex: number) {
+        if (sourceKey === 'filters') {
             return this.removeField(sourceKey, sourceIndex);
-        } else if (destinationKey === "filters") {
+        } else if (destinationKey === 'filters') {
             return this.appendFilter(destinationIndex, this.draggableFieldState[sourceKey][sourceIndex]);
         }
 
@@ -439,7 +455,7 @@ export class VizSpecStore {
             if (MetaFieldKeys.includes(destinationKey)) {
                 if (!MetaFieldKeys.includes(sourceKey)) return;
                 encodings[sourceKey].splice(sourceIndex, 1);
-                movingField.analyticType = destinationKey === "dimensions" ? "dimension" : "measure";
+                movingField.analyticType = destinationKey === 'dimensions' ? 'dimension' : 'measure';
             }
             const limitSize = getChannelSizeLimit(destinationKey);
             const fixedDestinationIndex = Math.min(destinationIndex, limitSize - 1);
@@ -457,10 +473,7 @@ export class VizSpecStore {
     }
     public replaceField(sourceKey: keyof DraggableFieldState, sourceIndex: number, fid: string) {
         if (MetaFieldKeys.includes(sourceKey)) return;
-        const enteringField = [
-            ...this.draggableFieldState.dimensions,
-            ...this.draggableFieldState.measures
-        ].find(which => which.fid === fid);
+        const enteringField = [...this.draggableFieldState.dimensions, ...this.draggableFieldState.measures].find((which) => which.fid === fid);
         if (!enteringField) {
             return;
         }
@@ -499,16 +512,23 @@ export class VizSpecStore {
             encodings.rows = fieldsInCup as typeof encodings.rows; // assume this as writable
         });
     }
-    public createBinField(stateKey: keyof DraggableFieldState, index: number, binType: 'bin' | 'binCount') {
+    public createBinField(stateKey: keyof DraggableFieldState, index: number, binType: 'bin' | 'binCount'): string {
+        const newVarKey = uniqueId();
+        const state = this.draggableFieldState;
+        const existedRelatedBinField = state.dimensions.find(
+            (f) => f.computed && f.expression && f.expression.op === binType && f.expression.params[0].value === state[stateKey][index].fid
+        );
+        if (existedRelatedBinField) {
+            return existedRelatedBinField.fid;
+        }
         this.useMutable(({ encodings }) => {
             const originField = encodings[stateKey][index];
-            const newVarKey = uniqueId();
             const binField: IViewField = {
                 fid: newVarKey,
                 dragId: newVarKey,
                 name: `${binType}(${originField.name})`,
-                semanticType: "ordinal",
-                analyticType: "dimension",
+                semanticType: 'ordinal',
+                analyticType: 'dimension',
                 computed: true,
                 expression: {
                     op: binType,
@@ -516,16 +536,17 @@ export class VizSpecStore {
                     params: [
                         {
                             type: 'field',
-                            value: originField.fid
-                        }
-                    ]
-                }
+                            value: originField.fid,
+                        },
+                    ],
+                },
             };
             encodings.dimensions.push(binField);
         });
+        return newVarKey;
     }
     public createLogField(stateKey: keyof DraggableFieldState, index: number, scaleType: 'log10' | 'log2') {
-        if (stateKey === "filters") {
+        if (stateKey === 'filters') {
             return;
         }
 
@@ -536,7 +557,7 @@ export class VizSpecStore {
                 fid: newVarKey,
                 dragId: newVarKey,
                 name: `${scaleType}(${originField.name})`,
-                semanticType: "quantitative",
+                semanticType: 'quantitative',
                 analyticType: originField.analyticType,
                 aggName: 'sum',
                 computed: true,
@@ -546,10 +567,10 @@ export class VizSpecStore {
                     params: [
                         {
                             type: 'field',
-                            value: originField.fid
-                        }
-                    ]
-                }
+                            value: originField.fid,
+                        },
+                    ],
+                },
             };
             encodings[stateKey].push(logField);
         });
@@ -567,74 +588,150 @@ export class VizSpecStore {
         const { rows, columns } = this.draggableFieldState;
         const yField = rows.length > 0 ? rows[rows.length - 1] : null;
         const xField = columns.length > 0 ? columns[columns.length - 1] : null;
-        if (
-            xField !== null &&
-            xField.analyticType === "dimension" &&
-            yField !== null &&
-            yField.analyticType === "measure"
-        ) {
+        if (xField !== null && xField.analyticType === 'dimension' && yField !== null && yField.analyticType === 'measure') {
             return true;
         }
-        if (
-            xField !== null &&
-            xField.analyticType === "measure" &&
-            yField !== null &&
-            yField.analyticType === "dimension"
-        ) {
+        if (xField !== null && xField.analyticType === 'measure' && yField !== null && yField.analyticType === 'dimension') {
             return true;
         }
         return false;
     }
-    public setFieldSort(
-        stateKey: keyof DraggableFieldState,
-        index: number,
-        sortType: "none" | "ascending" | "descending"
-    ) {
+    public setFieldSort(stateKey: keyof DraggableFieldState, index: number, sortType: ISortMode) {
         this.useMutable(({ encodings }) => {
             encodings[stateKey][index].sort = sortType;
         });
     }
-    public applyDefaultSort(sortType: "none" | "ascending" | "descending" = "ascending") {
+    public applyDefaultSort(sortType: ISortMode = 'ascending') {
         this.useMutable(({ encodings }) => {
             const { rows, columns } = encodings;
             const yField = rows.length > 0 ? rows[rows.length - 1] : null;
             const xField = columns.length > 0 ? columns[columns.length - 1] : null;
 
-            if (
-                xField !== null &&
-                xField.analyticType === "dimension" &&
-                yField !== null &&
-                yField.analyticType === "measure"
-            ) {
+            if (xField !== null && xField.analyticType === 'dimension' && yField !== null && yField.analyticType === 'measure') {
                 encodings.columns[columns.length - 1].sort = sortType;
                 return;
             }
-            if (
-                xField !== null &&
-                xField.analyticType === "measure" &&
-                yField !== null &&
-                yField.analyticType === "dimension"
-            ) {
+            if (xField !== null && xField.analyticType === 'measure' && yField !== null && yField.analyticType === 'dimension') {
                 encodings.rows[rows.length - 1].sort = sortType;
                 return;
             }
         });
     }
-    public appendField(destinationKey: keyof DraggableFieldState, field: IViewField | undefined) {
+    public appendField(destinationKey: keyof DraggableFieldState, field: IViewField | undefined, overrideAttr?: Record<string, any>) {
         if (MetaFieldKeys.includes(destinationKey)) return;
-        if (typeof field === "undefined") return;
-        if (destinationKey === "filters") {
+        if (typeof field === 'undefined') return;
+        if (destinationKey === 'filters') {
             return;
         }
 
         this.useMutable(({ encodings }) => {
-            const cloneField = { ...toJS(field) };
+            const cloneField = { ...toJS(field), ...overrideAttr };
             cloneField.dragId = uniqueId();
             encodings[destinationKey].push(cloneField);
         });
     }
-    public setVizFormatConfig (formatKey: keyof IVisualConfig['format'], value?: string) {
-        this.visualConfig[formatKey] = value
+    public setVizFormatConfig(formatKey: keyof IVisualConfig['format'], value?: string) {
+        this.visualConfig[formatKey] = value;
+    }
+    public renderVLSubset(vlStruct: any) {
+        const tab = this.visList[this.visIndex];
+        this.clearState();
+        this.setVisualConfig('defaultAggregated', false);
+        this.setVisualConfig('stack', 'stack');
+        // this.setVisualConfig('sorted', 'none')
+        this.applyDefaultSort('none');
+
+        if (!tab) return;
+        const fields = tab.encodings.dimensions.concat(tab.encodings.measures);
+        const countField = fields.find((f) => f.fid === COUNT_FIELD_ID);
+        const renderVLFacet = (vlFacet) => {
+            if (vlFacet.facet) {
+                this.appendField('rows', fields.find((f) => f.fid === vlFacet.facet.field) || countField, { analyticType: 'dimension' });
+            }
+            if (vlFacet.row) {
+                this.appendField('rows', fields.find((f) => f.fid === vlFacet.row.field) || countField, { analyticType: 'dimension' });
+            }
+            if (vlFacet.column) {
+                this.appendField('columns', fields.find((f) => f.fid === vlFacet.column.field) || countField, { analyticType: 'dimension' });
+            }
+        };
+        const isValidAggregate = (aggName) => aggName && ['sum', 'count', 'max', 'min', 'mean', 'median', 'variance', 'stdev'].includes(aggName);
+        const renderVLSpec = (vlSpec) => {
+            if (typeof vlSpec.mark === 'string') {
+                this.setVisualConfig('geoms', [geomAdapter(vlSpec.mark)]);
+            } else {
+                this.setVisualConfig('geoms', [geomAdapter(vlSpec.mark.type)]);
+            }
+            if (vlSpec.encoding.x) {
+                const field = fields.find((f) => f.fid === vlSpec.encoding.x.field) || countField;
+                this.appendField('columns', field, { analyticType: 'dimension' });
+                if (isValidAggregate(vlSpec.encoding.x.aggregate) || field === countField) {
+                    this.setVisualConfig('defaultAggregated', true);
+                    this.setFieldAggregator('columns', this.draggableFieldState.columns.length - 1, vlSpec.encoding.x.aggregate);
+                }
+                if (vlSpec.encoding.x.bin) {
+                    const binFid = this.createBinField('columns', this.draggableFieldState.columns.length - 1, 'bin');
+                    this.replaceField('columns', this.draggableFieldState.columns.length - 1, binFid);
+                }
+                if (vlSpec.encoding.x.stack) {
+                    this.setVisualConfig('stack', stackValueTransform(vlSpec.encoding.x.stack));
+                }
+            }
+            if (vlSpec.encoding.y) {
+                const field = fields.find((f) => f.fid === vlSpec.encoding.y.field) || countField;
+                this.appendField('rows', field, { analyticType: 'measure' });
+                if (isValidAggregate(vlSpec.encoding.y.aggregate) || field === countField) {
+                    this.setVisualConfig('defaultAggregated', true);
+                    this.setFieldAggregator('rows', this.draggableFieldState.rows.length - 1, vlSpec.encoding.y.aggregate);
+                }
+                if (vlSpec.encoding.y.bin) {
+                    const binFid = this.createBinField('rows', this.draggableFieldState.rows.length - 1, 'bin');
+                    this.replaceField('rows', this.draggableFieldState.rows.length - 1, binFid);
+                }
+                if (vlSpec.encoding.y.stack) {
+                    this.setVisualConfig('stack', stackValueTransform(vlSpec.encoding.y.stack));
+                }
+            }
+
+            (['color', 'opacity', 'shape', 'size', 'details', 'theta', 'text', 'radius'] as (keyof DraggableFieldState)[]).forEach((ch) => {
+                if (vlSpec.encoding[ch]) {
+                    const field = fields.find((f) => f.fid === vlSpec.encoding[ch].field) || countField;
+                    this.appendField(
+                        ch,
+                        field,
+                        field !== countField && ['color', 'opacity', 'size', 'radius'].includes(ch)
+                            ? { analyticType: 'dimension' }
+                            : field === countField || ['theta'].includes(ch)
+                            ? { analyticType: 'measure' }
+                            : {}
+                    );
+                    const aggregate = isValidAggregate(vlSpec.encoding[ch].aggregate);
+                    if ((['theta', 'radius'].includes(ch) && aggregate) || field === countField) {
+                        this.setVisualConfig('defaultAggregated', true);
+                        if (aggregate) {
+                            this.setFieldAggregator(ch, this.draggableFieldState[ch].length - 1, vlSpec.encoding[ch].aggregate);
+                        }
+                    }
+                }
+            });
+            ['x', 'y', 'facet'].forEach((ch) => {
+                if (vlSpec.encoding[ch] && vlSpec.encoding[ch].sort) {
+                    this.applyDefaultSort(sortValueTransform(vlSpec.encoding[ch].sort));
+                }
+            });
+            if (vlSpec.encoding.order && vlSpec.encoding.order.sort) {
+                this.applyDefaultSort(sortValueTransform(vlSpec.encoding.order.sort));
+            }
+        };
+        if (vlStruct.encoding && vlStruct.mark) {
+            renderVLFacet(vlStruct.encoding);
+            renderVLSpec(vlStruct);
+        } else if (vlStruct.spec) {
+            if (vlStruct.facet) {
+                renderVLFacet(vlStruct.facet);
+            }
+            renderVLSpec(vlStruct.spec);
+        }
     }
     public renderSpec(spec: Specification) {
         const tab = this.visList[this.visIndex];
@@ -647,7 +744,7 @@ export class VizSpecStore {
             this.setVisualConfig('defaultAggregated', Boolean(spec.aggregate));
             if ((spec.geomType?.length ?? 0) > 0) {
                 this.setVisualConfig(
-                    "geoms",
+                    'geoms',
                     spec.geomType!.map((g) => geomAdapter(g))
                 );
             }
@@ -655,7 +752,7 @@ export class VizSpecStore {
                 const facets = (spec.facets || []).concat(spec.highFacets || []);
                 for (let facet of facets) {
                     this.appendField(
-                        "rows",
+                        'rows',
                         fields.find((f) => f.fid === facet)
                     );
                 }
@@ -664,30 +761,30 @@ export class VizSpecStore {
                 const [cols, rows] = spec.position;
                 if (cols)
                     this.appendField(
-                        "columns",
+                        'columns',
                         fields.find((f) => f.fid === cols)
                     );
                 if (rows)
                     this.appendField(
-                        "rows",
+                        'rows',
                         fields.find((f) => f.fid === rows)
                     );
             }
             if ((spec.color?.length ?? 0) > 0) {
                 this.appendField(
-                    "color",
+                    'color',
                     fields.find((f) => f.fid === spec.color![0])
                 );
             }
             if ((spec.size?.length ?? 0) > 0) {
                 this.appendField(
-                    "size",
+                    'size',
                     fields.find((f) => f.fid === spec.size![0])
                 );
             }
             if ((spec.opacity?.length ?? 0) > 0) {
                 this.appendField(
-                    "opacity",
+                    'opacity',
                     fields.find((f) => f.fid === spec.opacity![0])
                 );
             }
@@ -710,8 +807,8 @@ export class VizSpecStore {
         const pureVisList = dumpsGWPureSpec(this.visList);
         return this.visSpecEncoder(pureVisList);
     }
-    public importStoInfo (stoInfo: IStoInfo) {
-        this.visList = parseGWPureSpec(this.visSpecDecoder(forwardVisualConfigs(stoInfo.specList)));
+    public importStoInfo(stoInfo: IStoInfo) {
+        this.visList = parseGWPureSpec(visSpecDecoder(forwardVisualConfigs(stoInfo.specList)));
         this.visIndex = 0;
         this.commonStore.datasets = stoInfo.datasets;
         this.commonStore.dataSources = stoInfo.dataSources;
@@ -725,50 +822,60 @@ export class VizSpecStore {
     private visSpecEncoder(visList: IVisSpec[]): IVisSpecForExport[] {
         const updatedVisList = visList.map((visSpec) => {
             const updatedFilters = visSpec.encodings.filters.map((filter) => {
-                if (filter.rule?.type === "one of") {
-                    const rule =  {
-                        ...filter.rule, 
-                        value: Array.from(filter.rule.value)
-                    }
+                if (filter.rule?.type === 'one of') {
+                    const rule = {
+                        ...filter.rule,
+                        value: Array.from(filter.rule.value),
+                    };
                     return {
-                        ...filter, 
-                        rule
-                    }
-                } 
+                        ...filter,
+                        rule,
+                    };
+                }
                 return filter as IFilterFieldForExport;
             });
             return {
                 ...visSpec,
                 encodings: {
                     ...visSpec.encodings,
-                    filters: updatedFilters
-                }
-            }
+                    filters: updatedFilters,
+                },
+            };
         });
         return updatedVisList;
     }
-    private visSpecDecoder(visList: IVisSpecForExport[]): IVisSpec[] {
-        const updatedVisList = visList.map((visSpec) => {
-            const updatedFilters = visSpec.encodings.filters.map((filter) => {
-                if (filter.rule?.type === "one of" && Array.isArray(filter.rule.value)) {
-                    return {
-                        ...filter, 
-                        rule: {
-                            ...filter.rule, 
-                            value: new Set(filter.rule.value)
-                        }
-                    }
-                }
-                return filter;
-            })
-            return {
-                ...visSpec,
-                encodings: {
-                    ...visSpec.encodings,
-                    filters: updatedFilters
-                }
-            } as IVisSpec;
-        });
-        return updatedVisList;
+    public get limit() {
+        return this.visualConfig.limit;
+    }
+
+    public setLimit(value: number) {
+        this.setVisualConfig('limit', value);
+    }
+
+    public get sort() {
+        const { rows, columns } = this.draggableFieldState;
+        if (rows.length && !rows.find((x) => x.analyticType === 'measure')) {
+            return rows[rows.length - 1].sort || 'none';
+        }
+        if (columns.length && !columns.find((x) => x.analyticType === 'measure')) {
+            return columns[columns.length - 1].sort || 'none';
+        }
+        return 'none';
+    }
+
+    public getWorkflow() {
+        return toWorkflow(
+            this.viewFilters,
+            this.allFields,
+            this.viewDimensions,
+            this.viewMeasures,
+            this.visualConfig.defaultAggregated,
+            this.sort,
+            this.limit > 0 ? this.limit : undefined
+        );
+    }
+
+    public setComputationFunction(f: IComputationFunction) {
+        this.computationFuction = f;
     }
 }