@kanaries/graphic-walker 0.4.0 → 0.4.1

package/dist/hooks/index.d.ts

@@ -1 +1,2 @@
 export declare function useDebounceValue<T>(value: T, timeout?: number): T;
+export declare function useDebounceValueBind<T>(value: T, setter: (v: T) => void, timeout?: number): [T, (v: T) => void];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",

package/src/components/askViz/index.tsx

@@ -5,6 +5,7 @@ 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;
 
@@ -51,7 +52,7 @@ const AskViz: React.FC<{api?: string; headers?: Record<string, string>}> = (prop
         setLoading(true);
         vizQuery(props.api ?? api, allFields, query, props.headers ?? {})
             .then((data) => {
-                vizStore.visList.push(new VisSpecWithHistory(data));
+                vizStore.visList.push(new VisSpecWithHistory(visSpecDecoder(forwardVisualConfigs([data]))[0]));
                 vizStore.selectVisualization(vizStore.visList.length - 1);
                 // const liteGW = parseGW(spec);
                 // vizStore.renderSpec(liteGW);

package/src/components/dataTable/index.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState, useRef, useEffect } from 'react';
 import styled from 'styled-components';
 import { observer } from 'mobx-react-lite';
-import type { IMutField, IRow, DataSet } from '../../interfaces';
+import type { IMutField, IRow, DataSet, IComputationFunction } from '../../interfaces';
 import { useTranslation } from 'react-i18next';
 import LoadingLayer from "../loadingLayer";
 import { useComputationFunc } from "../../renderer/hooks";
@@ -16,6 +16,7 @@ interface DataTableProps {
     /** total count of rows */
     total: number;
     dataset: DataSet;
+    computation?: IComputationFunction;
     onMetaChange: (fid: string, fIndex: number, meta: Partial<IMutField>) => void;
     loading?: boolean;
 }
@@ -117,10 +118,11 @@ const getHeaderKey = (f: wrapMutField) => {
 };
 
 const DataTable: React.FC<DataTableProps> = (props) => {
-    const { size = 10, onMetaChange, dataset, total, loading: statLoading } = props;
+    const { size = 10, onMetaChange, dataset, computation, total, loading: statLoading } = props;
     const [pageIndex, setPageIndex] = useState(0);
     const { t } = useTranslation();
-    const computationFuction = useComputationFunc();
+    const defaultComputation = useComputationFunc();
+    const computationFunction = computation ?? defaultComputation;
 
     const analyticTypeList = useMemo<{ value: string; label: string }[]>(() => {
         return ANALYTIC_TYPE_LIST.map((at) => ({
@@ -149,7 +151,7 @@ const DataTable: React.FC<DataTableProps> = (props) => {
         }
         setDataLoading(true);
         const taskId = ++taskIdRef.current;
-        dataReadRawServer(computationFuction, size, pageIndex).then(data => {
+        dataReadRawServer(computationFunction, size, pageIndex).then(data => {
             if (taskId === taskIdRef.current) {
                 setDataLoading(false);
                 setRows(data);
@@ -164,7 +166,7 @@ const DataTable: React.FC<DataTableProps> = (props) => {
         return () => {
             taskIdRef.current++;
         };
-    }, [computationFuction, pageIndex, size]);
+    }, [computationFunction, pageIndex, size]);
 
     const loading = statLoading || dataLoading;
 

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/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/computation/serverComputation.ts

@@ -29,7 +29,7 @@ export const datasetStatsServer = async (service: IComputationFunction): Promise
         ],
     })) as [{ count: number }];
     return {
-        rowCount: res[0].count,
+        rowCount: res[0]?.count ?? 0,
     };
 };
 
@@ -72,7 +72,7 @@ export const dataQueryServer = async (
     }
     const res = await service({
         workflow,
-        limit
+        limit,
     });
     return res;
 };
@@ -132,7 +132,12 @@ export const fieldStatServer = async (
             },
         ],
     };
-    const [rangeRes] = range
+    const [
+        rangeRes = {
+            [MIN_ID]: 0,
+            [MAX_ID]: 0,
+        },
+    ] = range
         ? await service(rangeQueryPayload)
         : [
               {

package/src/dataSource/table.tsx

@@ -3,6 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useGlobalStore } from "../store";
 import DataTable from "../components/dataTable";
 import { toJS } from "mobx";
+import { getComputation } from "../computation/clientComputation";
 
 interface TableProps {
     size?: number;
@@ -21,11 +22,14 @@ const Table: React.FC<TableProps> = (props) => {
             rawFields: toJS(tmpDSRawFields),
         };
     }, [tmpDataSource, tmpDSRawFields]);
+9
+    const computation = React.useMemo(() => getComputation(tempDataset.dataSource), [tempDataset])
 
     return (
         <DataTable
             size={size}
             dataset={tempDataset}
+            computation={computation}
             total={tmpDataSource.length}
             onMetaChange={(fid, fIndex, diffMeta) => {
                 commonStore.updateTempDatasetMetas(fid, diffMeta);

package/src/hooks/index.ts

@@ -8,3 +8,11 @@ export function useDebounceValue<T>(value: T, timeout = 200): T {
     }, [value]);
     return innerValue;
 }
+
+export function useDebounceValueBind<T>(value: T, setter: (v: T) => void, timeout = 200): [T, (v: T) => void] {
+    const [innerValue, setInnerValue] = useState(value);
+    const valueToSet = useDebounceValue(innerValue, timeout);
+    useEffect(() => setInnerValue(value), [value])
+    useEffect(() => setter(valueToSet), [valueToSet]);
+    return [innerValue, setInnerValue];
+}

package/src/renderer/hooks.ts

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

package/src/store/visualSpecStore.ts

@@ -1,4 +1,4 @@
-import { IReactionDisposer, makeAutoObservable, observable, reaction, toJS } from 'mobx';
+import { IReactionDisposer, makeAutoObservable, observable, computed, reaction, toJS } from 'mobx';
 import produce from 'immer';
 import {
     DataSet,
@@ -395,6 +395,7 @@ export class VizSpecStore {
                 case configKey === 'sorted':
                 case configKey === 'zeroScale':
                 case configKey === 'background':
+                case configKey === 'resolve':
                 case configKey === 'limit':
                 case configKey === 'stack': {
                     return (config[configKey] = value);

package/src/visualSettings/index.tsx

@@ -37,7 +37,6 @@ import throttle from '../utils/throttle';
 import KanariesLogo from '../assets/kanaries.png';
 import { ImageWithFallback } from '../components/timeoutImg';
 import LimitSetting from '../components/limitSetting';
-import { runInAction } from 'mobx';
 
 const Invisible = styled.div`
     clip: rect(1px, 1px, 1px, 1px);