@kanaries/graphic-walker 0.3.14 → 0.3.16

package/src/renderer/index.tsx

@@ -21,7 +21,18 @@ interface RendererProps {
 const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, ref) {
     const { themeKey, dark } = props;
     const { vizStore, commonStore } = useGlobalStore();
-    const { allFields, viewFilters, viewDimensions, viewMeasures, visualConfig, draggableFieldState, visList, visIndex } = vizStore;
+    const {
+        allFields,
+        viewFilters,
+        viewDimensions,
+        viewMeasures,
+        visualConfig,
+        draggableFieldState,
+        visList,
+        visIndex,
+        sort,
+        limit,
+    } = vizStore;
     const chart = visList[visIndex];
     const { currentDataset } = commonStore;
     const { dataSource } = currentDataset;
@@ -37,6 +48,8 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
         viewMeasures,
         filters: viewFilters,
         defaultAggregated: visualConfig.defaultAggregated,
+        sort,
+        limit: limit,
     });
 
     // Dependencies that should not trigger effect individually
@@ -64,19 +77,16 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
     useChartIndexControl({
         count: visList.length,
         index: visIndex,
-        onChange: idx => vizStore.selectVisualization(idx),
+        onChange: (idx) => vizStore.selectVisualization(idx),
     });
 
-    const handleGeomClick = useCallback(
-        (values: any, e: any) => {
-            e.stopPropagation();
-            runInAction(() => {
-                commonStore.showEmbededMenu([e.pageX, e.pageY]);
-                commonStore.setFilters(values);
-            });
-        },
-        []
-    );
+    const handleGeomClick = useCallback((values: any, e: any) => {
+        e.stopPropagation();
+        runInAction(() => {
+            commonStore.showEmbededMenu([e.pageX, e.pageY]);
+            commonStore.setFilters(values);
+        });
+    }, []);
 
     const handleChartResize = useCallback(
         (width: number, height: number) => {

package/src/renderer/pureRenderer.tsx

@@ -9,7 +9,6 @@ import type { IReactVegaHandler } from '../vis/react-vega';
 import SpecRenderer from './specRenderer';
 import { useRenderer } from './hooks';
 
-
 interface IPureRendererProps {
     name?: string;
     themeKey?: IThemeKey;
@@ -17,25 +16,20 @@ interface IPureRendererProps {
     rawData?: IRow[];
     visualState: DraggableFieldState;
     visualConfig: IVisualConfig;
+    sort?: 'none' | 'ascending' | 'descending';
+    limit?: number;
 }
 
 /**
  * Render a readonly chart with given visualization schema.
  * This is a pure component, which means it will not depend on any global state.
  */
-const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function PureRenderer (props, ref) {
-    const {
-        name,
-        themeKey,
-        dark,
-        rawData,
-        visualState,
-        visualConfig,
-    } = props;
+const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function PureRenderer(props, ref) {
+    const { name, themeKey, dark, rawData, visualState, visualConfig, sort, limit } = props;
     const defaultAggregated = visualConfig?.defaultAggregated ?? false;
 
     const [viewData, setViewData] = useState<IRow[]>([]);
-    
+
     const { allFields, viewDimensions, viewMeasures, filters } = useMemo(() => {
         const viewDimensions: IViewField[] = [];
         const viewMeasures: IViewField[] = [];
@@ -64,6 +58,8 @@ const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function
         viewMeasures,
         filters,
         defaultAggregated,
+        sort: sort ?? 'none',
+        limit: limit ?? -1,
     });
 
     // Dependencies that should not trigger effect individually

package/src/services.ts

@@ -1,5 +1,5 @@
 import { toJS } from 'mobx';
-import { IRow, IMutField, IFilterField, Specification } from './interfaces';
+import { IRow, IMutField, IField, IFilterField, Specification, IViewField } from './interfaces';
 /* eslint import/no-webpack-loader-syntax:0 */
 // @ts-ignore
 // eslint-disable-next-line
@@ -11,6 +11,8 @@ import { IRow, IMutField, IFilterField, Specification } from './interfaces';
 import FilterWorker from './workers/filter.worker?worker&inline';
 import TransformDataWorker from './workers/transform.worker?worker&inline';
 import ViewQueryWorker from './workers/viewQuery.worker?worker&inline';
+import SortWorker from './workers/sort.worker?worker&inline';
+
 import { IViewQuery } from './lib/viewQuery';
 
 // interface WorkerState {
@@ -140,7 +142,7 @@ export const applyFilter = async (data: IRow[], filters: readonly IFilterField[]
     }
 };
 
-export const transformDataService = async (data: IRow[], columns: IMutField[]): Promise<IRow[]> => {
+export const transformDataService = async (data: IRow[], columns: IField[]): Promise<IRow[]> => {
     if (columns.length === 0 || data.length === 0) return data;
     const worker = new TransformDataWorker();
     try {
@@ -154,9 +156,9 @@ export const transformDataService = async (data: IRow[], columns: IMutField[]):
     } finally {
         worker.terminate();
     }
-}
+};
 
-export const applyViewQuery = async (data: IRow[], metas: IMutField[], query: IViewQuery): Promise<IRow[]> => {
+export const applyViewQuery = async (data: IRow[], metas: IField[], query: IViewQuery): Promise<IRow[]> => {
     const worker = new ViewQueryWorker();
     try {
         const res: IRow[] = await workerService(worker, {
@@ -170,4 +172,24 @@ export const applyViewQuery = async (data: IRow[], metas: IMutField[], query: IV
     } finally {
         worker.terminate();
     }
-}
+};
+
+export const applySort = async (
+    data: IRow[],
+    viewMeasures: IField[],
+    sort: 'ascending' | 'descending'
+): Promise<IRow[]> => {
+    const worker = new SortWorker();
+    try {
+        const res: IRow[] = await workerService(worker, {
+            data,
+            viewMeasures: viewMeasures.map((x) => toJS(x)),
+            sort,
+        });
+        return res;
+    } catch (err) {
+        throw new Error('Uncaught error in ViewQueryWorker', { cause: err });
+    } finally {
+        worker.terminate();
+    }
+};

package/src/store/visualSpecStore.ts

@@ -1,6 +1,6 @@
 import { IReactionDisposer, makeAutoObservable, observable, reaction, toJS } from "mobx";
 import produce from "immer";
-import { DataSet, DraggableFieldState, IFilterRule, IViewField, IVisSpec, IVisualConfig, Specification } from "../interfaces";
+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";
@@ -88,7 +88,7 @@ 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"]): IVisSpec[] => {
+const forwardVisualConfigs = (backwards: ReturnType<typeof parseGWContent>["specList"]): IVisSpecForExport[] => {
     return backwards.map((content) => ({
         ...content,
         config: {
@@ -264,7 +264,7 @@ 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))
@@ -278,7 +278,7 @@ 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))
@@ -336,6 +336,7 @@ export class VizSpecStore {
                     dragId: uniqueId(),
                     fid: f.fid,
                     name: f.name || f.fid,
+                    basename: f.basename || f.name || f.fid,
                     semanticType: f.semanticType,
                     analyticType: f.analyticType,
                 }));
@@ -345,6 +346,7 @@ export class VizSpecStore {
                     dragId: uniqueId(),
                     fid: f.fid,
                     name: f.name || f.fid,
+                    basename: f.basename || f.name || f.fid,
                     analyticType: f.analyticType,
                     semanticType: f.semanticType,
                     aggName: "sum",
@@ -701,15 +703,15 @@ export class VizSpecStore {
         return stringifyGWContent({
             datasets: toJS(this.commonStore.datasets),
             dataSources: this.commonStore.dataSources,
-            specList: pureVisList,
+            specList: this.visSpecEncoder(pureVisList),
         });
     }
     public exportViewSpec() {
         const pureVisList = dumpsGWPureSpec(this.visList);
-        return pureVisList
+        return this.visSpecEncoder(pureVisList);
     }
     public importStoInfo (stoInfo: IStoInfo) {
-        this.visList = parseGWPureSpec(forwardVisualConfigs(stoInfo.specList));
+        this.visList = parseGWPureSpec(this.visSpecDecoder(forwardVisualConfigs(stoInfo.specList)));
         this.visIndex = 0;
         this.commonStore.datasets = stoInfo.datasets;
         this.commonStore.dataSources = stoInfo.dataSources;
@@ -719,4 +721,66 @@ export class VizSpecStore {
         const content = parseGWContent(raw);
         this.importStoInfo(content);
     }
+
+    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)
+                    }
+                    return {
+                        ...filter, 
+                        rule
+                    }
+                } 
+                return filter as IFilterFieldForExport;
+            });
+            return {
+                ...visSpec,
+                encodings: {
+                    ...visSpec.encodings,
+                    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 limit = -1;
+
+    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';
+    }
 }

package/src/utils/dataPrep.ts

@@ -1,11 +1,12 @@
 import { IMutField, IRow } from "../interfaces";
+import { isPlainObject } from "./is-plain-object";
 
-function updateRowKeys(data: IRow[], keyEncodeList: {from: string; to: string}[]): IRow[] {
+function updateRowKeys(data: IRow[], keyEncodeList: { from: string[]; to: string }[]): IRow[] {
     return data.map((row) => {
         const newRow: IRow = {};
         for (let k in keyEncodeList) {
             const { from, to } = keyEncodeList[k];
-            newRow[to] = row[from];
+            newRow[to] = getValueByKeyPath(row, from);
         }
         return newRow;
     });
@@ -13,9 +14,9 @@ function updateRowKeys(data: IRow[], keyEncodeList: {from: string; to: string}[]
 
 /**
  * parse column id(key) to a safe string
- * @param metas 
+ * @param metas
  */
-function parseColumnMetas (metas: IMutField[]) {
+function parseColumnMetas(metas: IMutField[]) {
     return metas.map((meta, i) => {
         const safeKey = `gwc_${i}`;
         return {
@@ -26,42 +27,34 @@ function parseColumnMetas (metas: IMutField[]) {
     });
 }
 
-export function guardDataKeys (data: IRow[], metas: IMutField[]): {
+export function guardDataKeys(
+    data: IRow[],
+    metas: IMutField[]
+): {
     safeData: IRow[];
     safeMetas: IMutField[];
 } {
-    const safeMetas = parseColumnMetas(metas)
+    const safeMetas = parseColumnMetas(metas);
     const keyEncodeList = safeMetas.map((f, i) => ({
-        from: metas[i].fid,
-        to: f.fid
+        from: metas[i].path ?? [metas[i].fid],
+        to: f.fid,
     }));
     const safeData = updateRowKeys(data, keyEncodeList);
     return {
         safeData,
-        safeMetas
-    }
+        safeMetas,
+    };
 }
-
-const SPLITOR = '__'
-export function flatNestKeys (object: any): string[] {
-    const keys = Object.keys(object);
-    let flatColKeys: string[] = [];
-    for (let key of keys) {
-        if (typeof object[key] === 'object') {
-            const subKeys = flatNestKeys(object[key]);
-            flatColKeys = flatColKeys.concat(subKeys.map(k => `${key}${SPLITOR}${k}`));
-        } else {
-            flatColKeys.push(key)
-        }
-    }
-    return flatColKeys;
+export function flatKeys(obj: Object, prefixKeys: string[] = []): string[][] {
+    return Object.keys(obj).flatMap((k) =>
+        isPlainObject(obj[k]) ? flatKeys(obj[k], prefixKeys.concat(k)) : [prefixKeys.concat(k)]
+    );
 }
 
-export function getValueByKeyPath (object: any, keyPath: string): any {
-    const keys = keyPath.split(SPLITOR);
+export function getValueByKeyPath(object: any, keyPath: string[]): any {
     let value = object;
-    for (let key of keys) {
+    for (let key of keyPath) {
         value = value[key];
     }
     return value;
-}
+}

package/src/utils/is-plain-object.ts

@@ -0,0 +1,33 @@
+/*!
+ * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
+ *
+ * Copyright (c) 2014-2017, Jon Schlinkert.
+ * Released under the MIT License.
+ */
+function isObject(o: any) {
+    return Object.prototype.toString.call(o) === '[object Object]';
+}
+
+function isPlainObject(o: any) {
+    var ctor, prot;
+
+    if (isObject(o) === false) return false;
+
+    // If has modified constructor
+    ctor = o.constructor;
+    if (ctor === undefined) return true;
+
+    // If has modified prototype
+    prot = ctor.prototype;
+    if (isObject(prot) === false) return false;
+
+    // If constructor does not have an Object-specific method
+    if (prot.hasOwnProperty('isPrototypeOf') === false) {
+        return false;
+    }
+
+    // Most likely a plain Object
+    return true;
+}
+
+export { isPlainObject };

package/src/utils/save.ts

@@ -1,4 +1,4 @@
-import { IDataSet, IDataSource, IVisSpec } from "../interfaces";
+import { IDataSet, IDataSource, IVisSpec, IVisSpecForExport } from "../interfaces";
 import { VisSpecWithHistory } from "../models/visSpecHistory";
 
 export function dumpsGWPureSpec(list: VisSpecWithHistory[]): IVisSpec[] {
@@ -12,7 +12,7 @@ export function parseGWPureSpec(list: IVisSpec[]): VisSpecWithHistory[] {
 export interface IStoInfo {
     datasets: IDataSet[];
     specList: {
-        [K in keyof IVisSpec]: K extends "config" ? Partial<IVisSpec[K]> : IVisSpec[K];
+        [K in keyof IVisSpecForExport]: K extends "config" ? Partial<IVisSpecForExport[K]> : IVisSpecForExport[K];
     }[];
     dataSources: IDataSource[];
 }

package/src/visualSettings/index.tsx

@@ -19,6 +19,7 @@ import {
     LightBulbIcon,
     CodeBracketSquareIcon,
     Cog6ToothIcon,
+    HashtagIcon,
 } from '@heroicons/react/24/outline';
 import { observer } from 'mobx-react-lite';
 import React, { SVGProps, useCallback, useMemo } from 'react';
@@ -35,6 +36,8 @@ import { useCurrentMediaTheme } from '../utils/media';
 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);
@@ -73,7 +76,7 @@ const VisualSettings: React.FC<IVisualSettings> = ({
     exclude = [],
 }) => {
     const { vizStore, commonStore } = useGlobalStore();
-    const { visualConfig, canUndo, canRedo } = vizStore;
+    const { visualConfig, canUndo, canRedo, limit } = vizStore;
     const { t: tGlobal } = useTranslation();
     const { t } = useTranslation('translation', { keyPrefix: 'main.tabpanel.settings' });
 
@@ -491,6 +494,25 @@ const VisualSettings: React.FC<IVisualSettings> = ({
                     commonStore.setShowCodeExportPanel(true);
                 },
             },
+            ...(extra.length === 0 ? [] : ['-', ...extra]),
+            '-',
+            {
+                key: 'limit_axis',
+                label: t('limit'),
+                icon: HashtagIcon,
+                form: (
+                    <FormContainer>
+                        <LimitSetting
+                            value={limit}
+                            setValue={(v) => {
+                                runInAction(() => {
+                                    vizStore.limit = v;
+                                });
+                            }}
+                        />
+                    </FormContainer>
+                ),
+            },
             '-',
             {
                 key: 'kanaries',
@@ -513,10 +535,6 @@ const VisualSettings: React.FC<IVisualSettings> = ({
 
         const items = builtInItems.filter((item) => typeof item === 'string' || !exclude.includes(item.key));
 
-        if (extra.length > 0) {
-            items.push('-', ...extra);
-        }
-
         return items;
     }, [
         vizStore,
@@ -535,6 +553,7 @@ const VisualSettings: React.FC<IVisualSettings> = ({
         dark,
         extra,
         exclude,
+        limit,
     ]);
 
     return (

package/src/workers/sort.ts

@@ -0,0 +1,23 @@
+import { IViewField, IRow } from '../interfaces';
+import { getMeaAggKey } from '../utils';
+
+function compareMulti(a: number[], b: number[]): number {
+    if (a.length < b.length) return -compareMulti(b, a);
+    for (let i = 0; i < a.length; i++) {
+        if (!b[i]) return 1;
+        const c = a[i] - b[i];
+        if (c !== 0) return c;
+    }
+    return 0;
+}
+
+export function sortBy(data: IRow[], viewMeasures: IViewField[], sort: 'ascending' | 'descending') {
+    const sortM = sort === 'ascending' ? 1 : -1;
+    return data
+        .map((x) => ({
+            data: x,
+            value: viewMeasures.map((f) => x[getMeaAggKey(f.fid, f.aggName)]),
+        }))
+        .sort((a, b) => sortM * compareMulti(a.value, b.value))
+        .map((x) => x.data);
+}

package/src/workers/sort.worker.ts

@@ -0,0 +1,21 @@
+import { IRow, IViewField } from '../interfaces';
+import { sortBy } from './sort';
+
+const main = (e: {
+    data: {
+        data: IRow[];
+        viewMeasures: IViewField[];
+        sort: 'ascending' | 'descending';
+    };
+}) => {
+    try {
+        const { data, viewMeasures, sort } = e.data;
+        const ans = sortBy(data, viewMeasures, sort);
+        self.postMessage(ans);
+    } catch (err: any) {
+        console.error(err.stack);
+        self.postMessage(err.stack);
+    }
+};
+
+self.addEventListener('message', main, false);