@kanaries/graphic-walker 0.3.16 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.3.16",
+  "version": "0.4.0",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",
@@ -29,7 +29,7 @@
   },
   "prettier": {
     "tabWidth": 4,
-    "printWidth": 120,
+    "printWidth": 160,
     "singleQuote": true
   },
   "types": "./dist/index.d.ts",

package/src/App.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useRef, useMemo } from 'react';
+import React, { useEffect, useRef, useMemo, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useTranslation } from 'react-i18next';
-import { IDarkMode, IMutField, IRow, ISegmentKey, IThemeKey, Specification } from './interfaces';
+import { 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';
@@ -20,6 +20,8 @@ import { useCurrentMediaTheme } from './utils/media';
 import CodeExport from './components/codeExport';
 import VisualConfig from './components/visualConfig';
 import type { ToolbarItemProps } from './components/toolbar';
+import AskViz from './components/askViz';
+import { getComputation } from './computation/clientComputation';
 
 export interface IGWProps {
     dataSource?: IRow[];
@@ -28,7 +30,7 @@ export interface IGWProps {
     hideDataSourceConfig?: boolean;
     i18nLang?: string;
     i18nResources?: { [lang: string]: Record<string, string | any> };
-    keepAlive?: boolean;
+    keepAlive?: boolean | string;
     /**
      * auto parse field key into a safe string. default is true
      */
@@ -37,10 +39,17 @@ export interface IGWProps {
     themeKey?: IThemeKey;
     dark?: IDarkMode;
     storeRef?: React.MutableRefObject<IGlobalStore | null>;
+    computation?: IComputationFunction;
     toolbar?: {
         extra?: ToolbarItemProps[];
         exclude?: string[];
     };
+    enhanceAPI?: {
+        header?: Record<string, string>;
+        features?: {
+            askviz?: string | boolean;
+        }
+    };
 }
 
 const App = observer<IGWProps>(function App(props) {
@@ -54,7 +63,9 @@ const App = observer<IGWProps>(function App(props) {
         fieldKeyGuard = true,
         themeKey = 'vega',
         dark = 'media',
+        computation,
         toolbar,
+        enhanceAPI,
     } = props;
     const { commonStore, vizStore } = useGlobalStore();
 
@@ -75,11 +86,28 @@ const App = observer<IGWProps>(function App(props) {
         }
     }, [i18nLang, curLang]);
 
+    const [sampleRemoteData, setSampleRemoteData] = useState<IRow[]>([]);
+    const remoteDataContext = useRef(0);
+
+    useEffect(() => {
+        if (!computation) return;
+        async () => {
+            const ts = Date.now();
+            remoteDataContext.current = ts;
+            const resp = await computation({ workflow: [{ type: 'view', query: [{ op: 'raw', fields: ['*'] }] }], limit: 1 });
+            if (remoteDataContext.current === ts) {
+                setSampleRemoteData(resp);
+            }
+        };
+    }, [computation]);
+    
+    const remoteDataSource = dataSource.length > 0 ? dataSource : sampleRemoteData;
+
     const safeDataset = useMemo(() => {
-        let safeData = dataSource;
+        let safeData = remoteDataSource;
         let safeMetas = rawFields;
         if (fieldKeyGuard) {
-            const { safeData: _safeData, safeMetas: _safeMetas } = guardDataKeys(dataSource, rawFields);
+            const { safeData: _safeData, safeMetas: _safeMetas } = guardDataKeys(remoteDataSource, rawFields);
             safeData = _safeData;
             safeMetas = _safeMetas;
         }
@@ -87,7 +115,7 @@ const App = observer<IGWProps>(function App(props) {
             safeData,
             safeMetas,
         };
-    }, [rawFields, dataSource, fieldKeyGuard]);
+    }, [rawFields, remoteDataSource, computation, fieldKeyGuard]);
 
     // use as an embeding module, use outside datasource from props.
     useEffect(() => {
@@ -106,6 +134,14 @@ const App = observer<IGWProps>(function App(props) {
         }
     }, [spec, safeDataset]);
 
+    useEffect(() => {
+        if (computation) {
+            vizStore.setComputationFunction(computation);
+        } else {
+            vizStore.setComputationFunction(getComputation(commonStore.currentDataset.dataSource));
+        }
+    }, [vizStore, computation ?? commonStore.currentDataset.dataSource]);
+
     const darkMode = useCurrentMediaTheme(dark);
 
     const rendererRef = useRef<IReactVegaHandler>(null);
@@ -130,6 +166,9 @@ const App = observer<IGWProps>(function App(props) {
                         style={{ marginTop: '0em', borderTop: 'none' }}
                         className="m-4 p-4 border border-gray-200 dark:border-gray-700"
                     >
+                        {enhanceAPI?.features?.askviz && (
+                            <AskViz api={typeof enhanceAPI.features.askviz === 'string' ? enhanceAPI.features.askviz : ''} headers={enhanceAPI?.header} />
+                        )}
                         <VisualSettings rendererHandler={rendererRef} darkModePreference={dark} exclude={toolbar?.exclude} extra={toolbar?.extra} />
                         <CodeExport />
                         <VisualConfig />
@@ -156,7 +195,7 @@ const App = observer<IGWProps>(function App(props) {
                                     // }}
                                 >
                                     {datasets.length > 0 && (
-                                        <ReactiveRenderer ref={rendererRef} themeKey={themeKey} dark={dark} />
+                                        <ReactiveRenderer ref={rendererRef} themeKey={themeKey} dark={dark} computationFunction={vizStore.computationFuction} />
                                     )}
                                     {/* {vizEmbededMenu.show && (
                                         <ClickMenu x={vizEmbededMenu.position[0]} y={vizEmbededMenu.position[1]}>

package/src/components/askViz/index.tsx

@@ -0,0 +1,92 @@
+import { observer } from 'mobx-react-lite';
+import React, { useCallback, useState } from 'react';
+import { useGlobalStore } from '../../store';
+import { PaperAirplaneIcon } from '@heroicons/react/24/outline';
+import Spinner from '../spinner';
+import { IViewField } from '../../interfaces';
+import { VisSpecWithHistory } from '../../models/visSpecHistory';
+
+type VEGALite = any;
+
+const api = import.meta.env.DEV ? 'http://localhost:2023/api/vis/text2gw' : 'https://enhanceai.kanaries.net/api/vis/text2gw'
+
+async function vizQuery(api: string, metas: IViewField[], query: string, headers: Record<string, string>) {
+    const res = await fetch(api, {
+        headers: {
+            'Content-Type': 'application/json',
+            ...headers,
+        },
+        credentials: 'include',
+        method: 'POST',
+        body: JSON.stringify({
+            metas,
+            messages: [
+                {
+                    role: 'user',
+                    content: query,
+                },
+            ],
+        }),
+    });
+    const result: {
+        success: boolean;
+        data: VEGALite;
+        message?: string;
+    } = await res.json();
+    if (result.success) {
+        return result.data;
+    } else {
+        throw new Error(result.message);
+    }
+}
+
+const AskViz: React.FC<{api?: string; headers?: Record<string, string>}> = (props) => {
+    const [query, setQuery] = useState<string>('');
+    const [loading, setLoading] = useState<boolean>(false);
+    const { vizStore } = useGlobalStore();
+
+    const allFields = vizStore.allFields;
+
+    const startQuery = useCallback(() => {
+        setLoading(true);
+        vizQuery(props.api ?? api, allFields, query, props.headers ?? {})
+            .then((data) => {
+                vizStore.visList.push(new VisSpecWithHistory(data));
+                vizStore.selectVisualization(vizStore.visList.length - 1);
+                // const liteGW = parseGW(spec);
+                // vizStore.renderSpec(liteGW);
+            })
+            .finally(() => {
+                setLoading(false);
+            });
+    }, [query, allFields]);
+    return (
+        <div className="right-0 flex">
+            <input
+                type="text"
+                className="rounded-l-md px-4 block w-full border-0 py-1.5 text-gray-900 dark:text-gray-50 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 dark:bg-gray-900"
+                placeholder="What visualization your want to draw from the dataset"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                onKeyDown={(e) => {
+                    if (e.key === 'Enter' && loading === false && query.length > 0) {
+                        startQuery();
+                    }
+                }}
+                disabled={loading || allFields.length === 0}
+            />
+            <button
+                type="button"
+                className="flex items-center grow-0 rounded-r-md bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 px-4 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:opacity-50 disabled:cursor-not-allowed"
+                disabled={loading || query.length === 0 || allFields.length === 0}
+                onClick={startQuery}
+            >
+                Ask
+                {!loading && <PaperAirplaneIcon className="w-4 ml-1" />}
+                {loading && <Spinner />}
+            </button>
+        </div>
+    );
+};
+
+export default observer(AskViz);

package/src/components/askViz/schemaTransform.ts

@@ -0,0 +1,38 @@
+import { Specification } from "../../interfaces";
+
+export function parseGW(vlSpec: any): Specification {
+    const spec: Specification = {};
+    if (vlSpec.encoding && vlSpec.mark) {
+        spec.geomType = [vlSpec.mark];
+        spec.position = [];
+        if (vlSpec.encoding.x && vlSpec.encoding.x.field) {
+            spec.position.push(vlSpec.encoding.x.field);
+            if (vlSpec.encoding.x.aggregate) {
+                spec.aggregate = true;
+            }
+        }
+        if (vlSpec.encoding.y && vlSpec.encoding.y.field) {
+            spec.position.push(vlSpec.encoding.y.field);
+            if (vlSpec.encoding.y.aggregate) {
+                spec.aggregate = true;
+            }
+        }
+        spec.facets = [];
+        if (vlSpec.encoding.row && vlSpec.encoding.row) {
+            spec.facets.push(vlSpec.encoding.row);
+        }
+        if (vlSpec.encoding.column && vlSpec.encoding.column) {
+            spec.facets.push(vlSpec.encoding.column);
+        }
+
+        ['color', 'opacity', 'shape', 'size'].forEach((ch) => {
+            if (vlSpec.encoding[ch] && vlSpec.encoding[ch].field) {
+                spec[ch] = [vlSpec.encoding[ch].field];
+                if (vlSpec.encoding[ch].aggregate) {
+                    spec.aggregate = true;
+                }
+            }
+        });
+    }
+    return spec;
+}

package/src/components/dataTable/index.tsx

@@ -1,16 +1,23 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useRef, useEffect } from 'react';
 import styled from 'styled-components';
-import { IMutField, IRow } from '../../interfaces';
+import { observer } from 'mobx-react-lite';
+import type { IMutField, IRow, DataSet } from '../../interfaces';
 import { useTranslation } from 'react-i18next';
+import LoadingLayer from "../loadingLayer";
+import { useComputationFunc } from "../../renderer/hooks";
+import { dataReadRawServer } from "../../computation/serverComputation";
 import Pagination from './pagination';
 import { ChevronUpDownIcon } from '@heroicons/react/24/outline';
 import DropdownContext from '../dropdownContext';
 
 interface DataTableProps {
+    /** page limit */
     size?: number;
-    metas: IMutField[];
-    data: IRow[];
+    /** total count of rows */
+    total: number;
+    dataset: DataSet;
     onMetaChange: (fid: string, fIndex: number, meta: Partial<IMutField>) => void;
+    loading?: boolean;
 }
 const Container = styled.div`
     overflow-x: auto;
@@ -110,9 +117,10 @@ const getHeaderKey = (f: wrapMutField) => {
 };
 
 const DataTable: React.FC<DataTableProps> = (props) => {
-    const { size = 10, data, metas, onMetaChange } = props;
+    const { size = 10, onMetaChange, dataset, total, loading: statLoading } = props;
     const [pageIndex, setPageIndex] = useState(0);
     const { t } = useTranslation();
+    const computationFuction = useComputationFunc();
 
     const analyticTypeList = useMemo<{ value: string; label: string }[]>(() => {
         return ANALYTIC_TYPE_LIST.map((at) => ({
@@ -129,18 +137,49 @@ const DataTable: React.FC<DataTableProps> = (props) => {
     }, []);
 
     const from = pageIndex * size;
-    const to = Math.min((pageIndex + 1) * size, data.length - 1);
+    const to = Math.min((pageIndex + 1) * size - 1, total - 1);
+
+    const [rows, setRows] = useState<IRow[]>([]);
+    const [dataLoading, setDataLoading] = useState(false);
+    const taskIdRef = useRef(0);
+
+    useEffect(() => {
+        if (statLoading) {
+            return;
+        }
+        setDataLoading(true);
+        const taskId = ++taskIdRef.current;
+        dataReadRawServer(computationFuction, size, pageIndex).then(data => {
+            if (taskId === taskIdRef.current) {
+                setDataLoading(false);
+                setRows(data);
+            }
+        }).catch(err => {
+            if (taskId === taskIdRef.current) {
+                console.error(err);
+                setDataLoading(false);
+                setRows([]);
+            }
+        });
+        return () => {
+            taskIdRef.current++;
+        };
+    }, [computationFuction, pageIndex, size]);
+
+    const loading = statLoading || dataLoading;
+
+    const metas = dataset.rawFields;
 
     const headers = useMemo(() => getHeaders(metas), [metas]);
 
     return (
-        <Container className="rounded border-gray-200 dark:border-gray-700 border">
+        <Container className="rounded border-gray-200 dark:border-gray-700 border relative">
             <Pagination
-                total={data.length}
+                total={total}
                 from={from + 1}
                 to={to + 1}
                 onNext={() => {
-                    setPageIndex(Math.min(Math.ceil(data.length / size) - 1, pageIndex + 1));
+                    setPageIndex(Math.min(Math.ceil(total / size) - 1, pageIndex + 1));
                 }}
                 onPrev={() => {
                     setPageIndex(Math.max(0, pageIndex - 1));
@@ -227,7 +266,7 @@ const DataTable: React.FC<DataTableProps> = (props) => {
                     ))}
                 </thead>
                 <tbody className="divide-y divide-gray-100 dark:divide-gray-700 bg-white dark:bg-zinc-900">
-                    {data.slice(from, to + 1).map((row, index) => (
+                    {rows.map((row, index) => (
                         <tr
                             className={
                                 'divide-x divide-gray-200 dark:divide-gray-700 ' +
@@ -250,8 +289,9 @@ const DataTable: React.FC<DataTableProps> = (props) => {
                     ))}
                 </tbody>
             </table>
+            {loading && <LoadingLayer />}
         </Container>
     );
 };
 
-export default DataTable;
+export default observer(DataTable);

package/src/components/pivotTable/index.tsx

@@ -78,7 +78,6 @@ const PivotTable: React.FC<PivotTableProps> = (props) => {
                 data
             );
             const metric = buildMetricTableFromNestTree(lt, tt, data);
-            // debugger
             unstable_batchedUpdates(() => {
                 setLeftTree(lt);
                 setTopTree(tt);

package/src/components/pivotTable/store.tsx

@@ -1,10 +1,7 @@
 import { makeAutoObservable, observable } from 'mobx';
 import { INestNode } from './inteface';
-import { IAggQuery } from '../../lib/interfaces';
-import { queryView } from '../../lib/viewQuery';
 import { IField, IRow } from '../../interfaces';
 import React, { createContext, useContext, useEffect } from 'react';
-import { getMeaAggKey } from '../../utils';
 
 class PivotTableStore {
     public leftTree: INestNode | null = null;
@@ -30,19 +27,6 @@ class PivotTableStore {
         this.topTree = null;
         this.viewData = [];
     }
-    public async queryData(leftQuery: IAggQuery, topQuery: IAggQuery) {
-        const viewQuery: IAggQuery = {
-            op: 'aggregate',
-            groupBy: leftQuery.groupBy.concat(topQuery.groupBy),
-            measures: leftQuery.measures.concat(topQuery.measures).map(mea => ({
-                field: mea.field,
-                agg: mea.agg,
-                asFieldKey: getMeaAggKey(mea.field, mea.agg)
-            }))
-        };
-        const viewData = queryView(this.dataSource, this.metas, viewQuery);
-        this.viewData = viewData;
-    }
 }
 
 const initStore = new PivotTableStore();

package/src/components/spinner.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export default function Spinner() {
+    return (
+        <svg className="animate-spin ml-2 mr-2 h-5 w-5 text-white" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+            <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            ></path>
+        </svg>
+    );
+}

package/src/components/toggle.tsx

@@ -20,7 +20,7 @@ export default function Toggle(props: ToggleProps) {
                 checked={enabled}
                 onChange={onChange}
                 className={classNames(
-                    enabled ? 'bg-indigo-600' : 'bg-gray-200',
+                    enabled ? 'bg-indigo-600' : 'bg-gray-200 dark:bg-gray-700',
                     'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2'
                 )}
             >
@@ -33,7 +33,7 @@ export default function Toggle(props: ToggleProps) {
                 />
             </Switch>
             <Switch.Label as="span" className="ml-3 text-sm">
-                <span className="font-medium text-gray-900">{label}</span>
+                <span className="font-medium">{label}</span>
             </Switch.Label>
         </Switch.Group>
     );

package/src/components/visualConfig/index.tsx

@@ -1,13 +1,15 @@
 import { observer } from 'mobx-react-lite';
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useGlobalStore } from '../../store';
+import { NonPositionChannelConfigList,PositionChannelConfigList } from '../../config'; 
+
 import Modal from '../modal';
 import { IVisualConfig } from '../../interfaces';
 import PrimaryButton from '../button/primary';
 import DefaultButton from '../button/default';
 import { useTranslation } from 'react-i18next';
 import Toggle from '../toggle';
-import { runInAction } from 'mobx';
+import { runInAction, toJS } from 'mobx';
 
 const VisualConfigPanel: React.FC = (props) => {
     const { commonStore, vizStore } = useGlobalStore();
@@ -24,7 +26,27 @@ const VisualConfigPanel: React.FC = (props) => {
         timeFormat: visualConfig.format.timeFormat,
         normalizedNumberFormat: visualConfig.format.normalizedNumberFormat,
     });
+    const [resolve, setResolve] = useState<IVisualConfig['resolve']>({
+        x: visualConfig.resolve.x,
+        y: visualConfig.resolve.y,
+        color: visualConfig.resolve.color,
+        opacity: visualConfig.resolve.opacity,
+        shape: visualConfig.resolve.shape,
+        size: visualConfig.resolve.size,
+    });
     const [zeroScale, setZeroScale] = useState<boolean>(visualConfig.zeroScale);
+    const [background, setBackground] = useState<string | undefined>(visualConfig.background);
+
+    useEffect(() => {
+        setZeroScale(visualConfig.zeroScale);
+        setBackground(visualConfig.background);
+        setResolve(toJS(visualConfig.resolve));
+        setFormat({
+            numberFormat: visualConfig.format.numberFormat,
+            timeFormat: visualConfig.format.timeFormat,
+            normalizedNumberFormat: visualConfig.format.normalizedNumberFormat,
+        });
+    }, [showVisualConfigPanel]);
 
     return (
         <Modal
@@ -36,22 +58,22 @@ const VisualConfigPanel: React.FC = (props) => {
             <div>
                 <h2 className="text-lg mb-4">{t('config.format')}</h2>
                 <p className="text-xs">
-                    Format guides docs:{' '}
+                    {t(`config.formatGuidesDocs`)}:{' '}
                     <a
                         target="_blank"
                         className="underline text-blue-500"
                         href="https://github.com/d3/d3-format#locale_format"
                     >
-                        read here
+                        {t(`config.readHere`)}
                     </a>
                 </p>
                 {formatConfigList.map((fc) => (
                     <div className="my-2" key={fc}>
-                        <label className="block text-xs font-medium leading-6 text-gray-900">{t(`config.${fc}`)}</label>
+                        <label className="block text-xs font-medium leading-6">{t(`config.${fc}`)}</label>
                         <div className="mt-1">
                             <input
                                 type="text"
-                                className="block w-full rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                                className="block w-full text-gray-700 dark:text-gray-200 rounded-md border-0 py-1 px-2 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 dark:bg-zinc-900 "
                                 value={format[fc] ?? ''}
                                 onChange={(e) => {
                                     setFormat((f) => ({
@@ -63,9 +85,55 @@ const VisualConfigPanel: React.FC = (props) => {
                         </div>
                     </div>
                 ))}
+                <h2 className="text-lg">{t('config.background')}</h2>
+                <div className="my-2">
+                    <label className="block text-xs font-medium leading-6">{t(`config.color`)}</label>
+                    <div className="mt-1">
+                        <input
+                            type="text"
+                            className="block w-full text-gray-700 dark:text-gray-200 rounded-md border-0 py-1 px-2 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 dark:bg-zinc-900 "
+                            value={background ?? ''}
+                            onChange={(e) => {
+                                setBackground(e.target.value);
+                            }}
+                        />
+                    </div>
+                </div>
+                <h2 className="text-lg">{t('config.independence')}</h2>
+                <div className="my-2">
+                    <div className="flex space-x-6">
+                        {PositionChannelConfigList.map((pc) => (
+                            <Toggle
+                                label={t(`config.${pc}`)}
+                                key={pc}
+                                enabled={resolve[pc] ?? false}
+                                onChange={(e) => {
+                                    setResolve((r) => ({
+                                        ...r,
+                                        [pc]: e,
+                                    }));
+                                }}
+                            />
+                        ))}
+                        {NonPositionChannelConfigList.map((npc) => (
+                            <Toggle
+                                label={t(`constant.draggable_key.${npc}`)}
+                                key={npc}
+                                enabled={resolve[npc] ?? false}
+                                onChange={(e) => {
+                                    setResolve((r) => ({
+                                        ...r,
+                                        [npc]: e,
+                                    }));
+                                }}
+                            />
+                        ))}
+                    </div>
+                </div>
+                <h2 className="text-lg">{t('config.zeroScale')}</h2>
                 <div className="my-2">
                     <Toggle
-                        label="zero scale"
+                        label={t(`config.zeroScale`)}
                         enabled={zeroScale}
                         onChange={(en) => {
                             setZeroScale(en);
@@ -80,8 +148,10 @@ const VisualConfigPanel: React.FC = (props) => {
                             runInAction(() => {
                                 vizStore.setVisualConfig('format', format);
                                 vizStore.setVisualConfig('zeroScale', zeroScale);
+                                vizStore.setVisualConfig('background', background);
+                                vizStore.setVisualConfig('resolve', resolve);
                                 commonStore.setShowVisualConfigPanel(false);
-                            })
+                            });
                         }}
                     />
                     <DefaultButton

package/src/computation/clientComputation.ts

@@ -0,0 +1,55 @@
+import type { IDataQueryPayload, IDataQueryWorkflowStep, IFilterFiledSimple, IRow } from "../interfaces";
+import { applyFilter, applySort, applyViewQuery, transformDataService } from "../services";
+
+export const dataQueryClient = async (
+    rawData: IRow[],
+    workflow: IDataQueryWorkflowStep[],
+    offset?: number,
+    limit?: number,
+): Promise<IRow[]> => {
+    let res = rawData;
+    for await (const step of workflow) {
+        switch (step.type) {
+            case 'filter': {
+                res = await applyFilter(res, step.filters.map(filter => {
+                    const res: IFilterFiledSimple = {
+                        fid: filter.fid,
+                        rule: null,
+                    };
+                    if (filter.rule.type === 'one of') {
+                        res.rule = {
+                            type: 'one of',
+                            value: new Set(filter.rule.value),
+                        };
+                    } else {
+                        res.rule = filter.rule;
+                    }
+                    return res;
+                }).filter(Boolean));
+                break;
+            }
+            case 'transform': {
+                res = await transformDataService(res, step.transform);
+                break;
+            }
+            case 'view': {
+                for await (const job of step.query) {
+                    res = await applyViewQuery(res, job);
+                }
+                break;
+            }
+            case 'sort': {
+                res = await applySort(res, step.by, step.sort);
+                break;
+            }
+            default: {
+                // @ts-expect-error - runtime check
+                console.warn(new Error(`Unknown step type: ${step.type}`));
+                break;
+            }
+        }
+    }
+    return res.slice(offset ?? 0, limit ? ((offset ?? 0) + limit) : undefined);
+};
+
+export const getComputation = (rawData: IRow[]) => (payload: IDataQueryPayload) => dataQueryClient(rawData, payload.workflow, payload.offset, payload.limit)