@kanaries/graphic-walker 0.3.16 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.3.16",
+  "version": "0.4.1",
   "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,93 @@
+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';
+import { visSpecDecoder, forwardVisualConfigs } from '../../utils/save';
+
+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(visSpecDecoder(forwardVisualConfigs([data]))[0]));
+                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,24 @@
-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, IComputationFunction } 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;
+    computation?: IComputationFunction;
     onMetaChange: (fid: string, fIndex: number, meta: Partial<IMutField>) => void;
+    loading?: boolean;
 }
 const Container = styled.div`
     overflow-x: auto;
@@ -110,9 +118,11 @@ const getHeaderKey = (f: wrapMutField) => {
 };
 
 const DataTable: React.FC<DataTableProps> = (props) => {
-    const { size = 10, data, metas, onMetaChange } = props;
+    const { size = 10, onMetaChange, dataset, computation, total, loading: statLoading } = props;
     const [pageIndex, setPageIndex] = useState(0);
     const { t } = useTranslation();
+    const defaultComputation = useComputationFunc();
+    const computationFunction = computation ?? defaultComputation;
 
     const analyticTypeList = useMemo<{ value: string; label: string }[]>(() => {
         return ANALYTIC_TYPE_LIST.map((at) => ({
@@ -129,18 +139,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(computationFunction, 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++;
+        };
+    }, [computationFunction, 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 +268,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 +291,9 @@ const DataTable: React.FC<DataTableProps> = (props) => {
                     ))}
                 </tbody>
             </table>
+            {loading && <LoadingLayer />}
         </Container>
     );
 };
 
-export default DataTable;
+export default observer(DataTable);

package/src/components/limitSetting.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useDebounceValueBind } from '../hooks';
 
 export default function LimitSetting(props: { value: number; setValue: (v: number) => void }) {
     const { t } = useTranslation('translation', { keyPrefix: 'main.tabpanel.settings' });
+    const [innerValue, setInnerValue] = useDebounceValueBind(props.value, v => props.setValue(v));
 
     return (
         <div className=" mt-2">
@@ -10,15 +12,15 @@ export default function LimitSetting(props: { value: number; setValue: (v: numbe
                 className="w-full h-2 bg-blue-100 appearance-none"
                 type="range"
                 name="limit"
-                value={props.value > 0 ? props.value : 0}
+                value={innerValue > 0 ? innerValue : 0}
                 min="1"
                 max="50"
-                disabled={props.value < 0}
+                disabled={innerValue < 0}
                 step="1"
                 onChange={(e) => {
                     const v = parseInt(e.target.value);
                     if (!isNaN(v)) {
-                        props.setValue(v);
+                        setInnerValue(v);
                     }
                 }}
             />
@@ -26,12 +28,12 @@ export default function LimitSetting(props: { value: number; setValue: (v: numbe
                 <input
                     type="checkbox"
                     className="h-4 w-4 mr-1 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
-                    checked={props.value > 0}
+                    checked={innerValue > 0}
                     onChange={(e) => {
-                        props.setValue(e.target.checked ? 30 : -1);
+                        setInnerValue(e.target.checked ? 30 : -1);
                     }}
                 ></input>
-                {`${t('limit')}${props.value > 0 ? `: ${props.value}` : ''}`}
+                {`${t('limit')}${innerValue > 0 ? `: ${innerValue}` : ''}`}
             </output>
         </div>
     );

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/sizeSetting.tsx

@@ -1,6 +1,7 @@
 import { ArrowsPointingOutIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import { useDebounceValueBind } from "../hooks";
 
 interface SizeSettingProps {
     onWidthChange: (val: number) => void;
@@ -12,7 +13,8 @@ interface SizeSettingProps {
 export const ResizeDialog: React.FC<SizeSettingProps> = (props) => {
     const { onWidthChange, onHeightChange, width, height, children } = props;
     const { t } = useTranslation("translation", { keyPrefix: "main.tabpanel.settings.size_setting" });
-
+    const [innerWidth, setInnerWidth] = useDebounceValueBind(width, onWidthChange);
+    const [innerHeight, setInnerHeight] = useDebounceValueBind(height, onHeightChange);
     return (
         <div className="text-zinc-400">
             {children}
@@ -22,16 +24,16 @@ export const ResizeDialog: React.FC<SizeSettingProps> = (props) => {
                     style={{ cursor: "ew-resize" }}
                     type="range"
                     name="width"
-                    value={Math.sqrt(width / 1000)}
+                    value={Math.sqrt(innerWidth / 1000)}
                     min="0"
                     max="1"
                     step="0.01"
                     onChange={(e) => {
-                        onWidthChange(Math.round(Number(e.target.value) ** 2 * 1000));
+                        setInnerWidth(Math.round(Number(e.target.value) ** 2 * 1000));
                     }}
                 />
                 <output className="text-sm ml-1" htmlFor="width">
-                    {`${t("width")}: ${width}`}
+                    {`${t("width")}: ${innerWidth}`}
                 </output>
             </div>
             <div className=" mt-2">
@@ -40,16 +42,16 @@ export const ResizeDialog: React.FC<SizeSettingProps> = (props) => {
                     style={{ cursor: "ew-resize" }}
                     type="range"
                     name="height"
-                    value={Math.sqrt(height / 1000)}
+                    value={Math.sqrt(innerHeight / 1000)}
                     min="0"
                     max="1"
                     step="0.01"
                     onChange={(e) => {
-                        onHeightChange(Math.round(Number(e.target.value) ** 2 * 1000));
+                        setInnerHeight(Math.round(Number(e.target.value) ** 2 * 1000));
                     }}
                 />
                 <output className="text-sm ml-1" htmlFor="height">
-                    {`${t("height")}: ${height}`}
+                    {`${t("height")}: ${innerHeight}`}
                 </output>
             </div>
         </div>

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>
     );