@kanaries/graphic-walker 0.3.13 → 0.3.15

package/src/lib/inferMeta.ts

@@ -1,4 +1,5 @@
 import { IAnalyticType, IMutField, IRow, ISemanticType, IUncertainMutField } from '../interfaces';
+import { getValueByKeyPath } from '../utils/dataPrep';
 
 const COMMON_TIME_FORMAT: RegExp[] = [
     /^\d{4}-\d{2}-\d{2}$/, // YYYY-MM-DD
@@ -55,12 +56,12 @@ function inferAnalyticTypeFromSemanticType(semanticType: ISemanticType): IAnalyt
     }
 }
 
-export function inferSemanticType(data: IRow[], fid: string): ISemanticType {
-    const values = data.map((row) => row[fid]);
+export function inferSemanticType(data: IRow[], path: string[]): ISemanticType {
+    const values = data.map((row) => getValueByKeyPath(row, path));
 
     let st: ISemanticType = isNumericArray(values) ? 'quantitative' : 'nominal';
     if (st === 'nominal') {
-        if (isDateTimeArray(data.map((row) => `${row[fid]}`))) st = 'temporal';
+        if (isDateTimeArray(data.map((row) => `${getValueByKeyPath(row, path)}`))) st = 'temporal';
     }
     return st;
 }
@@ -70,7 +71,7 @@ export function inferMeta(props: { dataSource: IRow[]; fields: IUncertainMutFiel
     const finalFieldMetas: IMutField[] = [];
     for (let field of fields) {
         let semanticType: ISemanticType =
-            field.semanticType === '?' ? inferSemanticType(dataSource, field.fid) : field.semanticType;
+            field.semanticType === '?' ? inferSemanticType(dataSource, field.path) : field.semanticType;
         let analyticType: IAnalyticType = inferAnalyticTypeFromSemanticType(semanticType);
 
         finalFieldMetas.push({
@@ -79,6 +80,8 @@ export function inferMeta(props: { dataSource: IRow[]; fields: IUncertainMutFiel
             name: field.name ? field.name : field.fid,
             analyticType,
             semanticType,
+            basename: field.basename || field.name || field.fid,
+            path: field.path,
         });
     }
     return finalFieldMetas;

package/src/lib/viewQuery.ts

@@ -1,4 +1,4 @@
-import { IMutField, IRow } from "../interfaces";
+import { IField, IRow } from "../interfaces";
 import { aggregate } from "./op/aggregate";
 import { fold } from "./op/fold";
 import { IAggQuery, IBinQuery, IFoldQuery, IRawQuery } from "./interfaces";
@@ -6,7 +6,7 @@ import { bin } from "./op/bin";
 
 export type IViewQuery = IAggQuery | IFoldQuery | IBinQuery | IRawQuery;
 
-export function queryView (rawData: IRow[], metas: IMutField[], query: IViewQuery) {
+export function queryView (rawData: IRow[], metas: IField[], query: IViewQuery) {
     switch (query.op) {
         case 'aggregate':
             return aggregate(rawData, query);

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 } from './interfaces';
 /* eslint import/no-webpack-loader-syntax:0 */
 // @ts-ignore
 // eslint-disable-next-line
@@ -140,7 +140,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 {
@@ -156,7 +156,7 @@ export const transformDataService = async (data: IRow[], columns: IMutField[]):
     }
 }
 
-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, {

package/src/store/index.tsx

@@ -1,62 +1,63 @@
-import React, { useContext } from 'react';
-import { CommonStore } from './commonStore'
-import { VizSpecStore } from './visualSpecStore'
+import React, { useContext, useMemo, useEffect } from 'react';
+import { CommonStore } from './commonStore';
+import { VizSpecStore } from './visualSpecStore';
 
 export interface IGlobalStore {
     commonStore: CommonStore;
     vizStore: VizSpecStore;
 }
 
-const commonStore = new CommonStore();
-const vizStore = new VizSpecStore(commonStore);
-
-const initStore: IGlobalStore = {
-    commonStore,
-    vizStore
-}
+const StoreDict: Record<string, IGlobalStore> = {};
+const createStore = () => {
+    const commonStore = new CommonStore();
+    const vizStore = new VizSpecStore(commonStore);
+    return {
+        commonStore,
+        vizStore,
+    };
+};
+const getStore = (key?: string): IGlobalStore => {
+    if (key) {
+        if (!StoreDict[key]) StoreDict[key] = createStore();
+        return StoreDict[key];
+    } else {
+        return createStore();
+    }
+};
 
 const StoreContext = React.createContext<IGlobalStore>(null!);
-
-export function destroyGWStore() {
-    initStore.commonStore.destroy();
-    initStore.vizStore.destroy();
-}
-
-export function rebootGWStore() {
-    const cs = new CommonStore();
-    const vs = new VizSpecStore(cs);
-    initStore.commonStore = cs;
-    initStore.vizStore = vs;
-}
-
 interface StoreWrapperProps {
-    keepAlive?: boolean;
+    keepAlive?: boolean | string;
     storeRef?: React.MutableRefObject<IGlobalStore | null>;
+    children?: React.ReactNode;
 }
-export class StoreWrapper extends React.Component<StoreWrapperProps> {
-    constructor(props: StoreWrapperProps) {
-        super(props)
+
+const noop = () => {};
+
+export const StoreWrapper = (props: StoreWrapperProps) => {
+    const storeKey = props.keepAlive ? `${props.keepAlive}` : '';
+    const store = useMemo(() => getStore(storeKey), [storeKey]);
+    useEffect(() => {
         if (props.storeRef) {
-            props.storeRef.current = initStore;
+            const ref = props.storeRef;
+            ref.current = store;
+            return () => {
+                ref.current = null;
+            };
         }
-        if (props.keepAlive) {
-            rebootGWStore();
-        }
-    }
-    componentWillUnmount() {
-        if (!this.props.keepAlive) {
-            if (this.props.storeRef) {
-                this.props.storeRef.current = null;
-            }
-            destroyGWStore();
+        return noop;
+    }, [props.storeRef]);
+    useEffect(() => {
+        if (!storeKey) {
+            return () => {
+                store.commonStore.destroy();
+                store.vizStore.destroy();
+            };
         }
-    }
-    render() {
-        return <StoreContext.Provider value={initStore}>
-            { this.props.children }
-        </StoreContext.Provider>
-    }
-}
+        return noop;
+    }, [storeKey]);
+    return <StoreContext.Provider value={store}>{props.children}</StoreContext.Provider>;
+};
 
 export function useGlobalStore() {
     return useContext(StoreContext);

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: {
@@ -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,54 @@ 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;
+    }
 }

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

@@ -33,7 +33,8 @@ import Toolbar, { ToolbarItemProps } from '../components/toolbar';
 import { ButtonWithShortcut } from './menubar';
 import { useCurrentMediaTheme } from '../utils/media';
 import throttle from '../utils/throttle';
-import KanariesLogo from '../assets/kanaries-logo.svg';
+import KanariesLogo from '../assets/kanaries.png';
+import { ImageWithFallback } from '../components/timeoutImg';
 
 const Invisible = styled.div`
     clip: rect(1px, 1px, 1px, 1px);
@@ -101,30 +102,8 @@ const VisualSettings: React.FC<IVisualSettings> = ({
 
     const dark = useCurrentMediaTheme(darkModePreference) === 'dark';
 
-    console.log('kanaries logo', KanariesLogo);
-
     const items = useMemo<ToolbarItemProps[]>(() => {
         const builtInItems = [
-            {
-                key: 'kanaries',
-                label: 'kanaries',
-                icon: () => (
-                    // Kanaries brand info is not allowed to be removed or changed unless you are granted with special permission.
-                    <a href="https://kanaries.net" target="_blank">
-                        <img
-                            id="kanaries-logo"
-                            className="m-1"
-                            src="https://imagedelivery.net/tSvh1MGEu9IgUanmf58srQ/b6bc899f-a129-4c3a-d08f-d406166d0c00/public"
-                            alt="kanaries"
-                            onError={(e) => {
-                                // @ts-ignore
-                                e.target.src = KanariesLogo;
-                            }}
-                        />
-                    </a>
-                ),
-            },
-            '-',
             {
                 key: 'undo',
                 label: 'undo (Ctrl + Z)',
@@ -512,14 +491,29 @@ const VisualSettings: React.FC<IVisualSettings> = ({
                     commonStore.setShowCodeExportPanel(true);
                 },
             },
+            ...(extra.length === 0 ? [] : ['-', ...extra]),
+            '-',
+            {
+                key: 'kanaries',
+                label: 'kanaries',
+                icon: () => (
+                    // Kanaries brand info is not allowed to be removed or changed unless you are granted with special permission.
+                    <a href="https://docs.kanaries.net" target="_blank">
+                        <ImageWithFallback
+                            id="kanaries-logo"
+                            className="p-1.5 opacity-70 hover:opacity-100"
+                            src="https://imagedelivery.net/tSvh1MGEu9IgUanmf58srQ/b6bc899f-a129-4c3a-d08f-d406166d0c00/public"
+                            fallbackSrc={KanariesLogo}
+                            timeout={1000}
+                            alt="kanaries"
+                        />
+                    </a>
+                ),
+            },
         ] as ToolbarItemProps[];
 
         const items = builtInItems.filter((item) => typeof item === 'string' || !exclude.includes(item.key));
 
-        if (extra.length > 0) {
-            items.push('-', ...extra);
-        }
-
         return items;
     }, [
         vizStore,