@kanaries/graphic-walker 0.3.14 → 0.3.15

package/src/components/dataTable/index.tsx

@@ -1,10 +1,10 @@
-import React, { useMemo, useState } from "react";
-import styled from "styled-components";
-import { IMutField, IRow } from "../../interfaces";
-import { useTranslation } from "react-i18next";
-import Pagination from "./pagination";
-import { ChevronUpDownIcon } from "@heroicons/react/24/outline";
-import DropdownContext from "../dropdownContext";
+import React, { useMemo, useState } from 'react';
+import styled from 'styled-components';
+import { IMutField, IRow } from '../../interfaces';
+import { useTranslation } from 'react-i18next';
+import Pagination from './pagination';
+import { ChevronUpDownIcon } from '@heroicons/react/24/outline';
+import DropdownContext from '../dropdownContext';
 
 interface DataTableProps {
     size?: number;
@@ -32,34 +32,83 @@ const Container = styled.div`
         }
     }
 `;
-const ANALYTIC_TYPE_LIST = ["dimension", "measure"];
-const SEMANTIC_TYPE_LIST = ["nominal", "ordinal", "quantitative", "temporal"];
+const ANALYTIC_TYPE_LIST = ['dimension', 'measure'];
+const SEMANTIC_TYPE_LIST = ['nominal', 'ordinal', 'quantitative', 'temporal'];
 // function getCellType(field: IMutField): 'number' | 'text' {
 //     return field.dataType === 'number' || field.dataType === 'integer' ? 'number' : 'text';
 // }
-function getHeaderType(field: IMutField): "number" | "text" {
-    return field.analyticType === "dimension" ? "text" : "number";
+function getHeaderType(field: IMutField): 'number' | 'text' {
+    return field.analyticType === 'dimension' ? 'text' : 'number';
 }
 
 function getHeaderClassNames(field: IMutField) {
-    return field.analyticType === "dimension" ? "border-t-4 border-blue-400" : "border-t-4 border-purple-400";
+    return field.analyticType === 'dimension' ? 'border-t-4 border-blue-400' : 'border-t-4 border-purple-400';
 }
 
 function getSemanticColors(field: IMutField): string {
     switch (field.semanticType) {
-        case "nominal":
-            return "border border-transparent bg-sky-100 text-sky-800 dark:bg-sky-900 dark:text-sky-100 dark:border-sky-600";
-        case "ordinal":
-            return "border border-transparent bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-100 dark:border-indigo-600";
-        case "quantitative":
-            return "border border-transparent bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-100 dark:border-purple-600";
-        case "temporal":
-            return "border border-transparent bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100 dark:border-yellow-600";
+        case 'nominal':
+            return 'border border-transparent bg-sky-100 text-sky-800 dark:bg-sky-900 dark:text-sky-100 dark:border-sky-600';
+        case 'ordinal':
+            return 'border border-transparent bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-100 dark:border-indigo-600';
+        case 'quantitative':
+            return 'border border-transparent bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-100 dark:border-purple-600';
+        case 'temporal':
+            return 'border border-transparent bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100 dark:border-yellow-600';
         default:
-            return "border border-transparent bg-gray-400";
+            return 'border border-transparent bg-gray-400';
     }
 }
 
+type wrapMutField = {
+    colSpan: number;
+    rowSpan: number;
+} & (
+    | { type: 'field'; value: IMutField; fIndex: number }
+    | {
+          type: 'name';
+          value: string;
+      }
+);
+
+const getHeaders = (metas: IMutField[]): wrapMutField[][] => {
+    const height = metas.map((x) => x.path?.length ?? 1).reduce((a, b) => Math.max(a, b), 0);
+    const result: wrapMutField[][] = [...Array(height)].map(() => []);
+    let now = 1;
+    metas.forEach((x, fIndex) => {
+        const path = x.path ?? [x.name ?? x.fid];
+        if (path.length > now) {
+            for (let i = now - 1; i < path.length - 1; i++) {
+                result[i].push({
+                    colSpan: 0,
+                    rowSpan: 1,
+                    type: 'name',
+                    value: path[i],
+                });
+            }
+        }
+        now = path.length;
+        for (let i = 0; i < path.length - 1; i++) {
+            result[i][result[i].length - 1].colSpan++;
+        }
+        result[path.length - 1].push({
+            type: 'field',
+            value: x,
+            colSpan: 1,
+            rowSpan: height - path.length + 1,
+            fIndex,
+        });
+    });
+    return result;
+};
+
+const getHeaderKey = (f: wrapMutField) => {
+    if (f.type === 'name') {
+        return f.value;
+    }
+    return f.value.name ?? f.value.fid;
+};
+
 const DataTable: React.FC<DataTableProps> = (props) => {
     const { size = 10, data, metas, onMetaChange } = props;
     const [pageIndex, setPageIndex] = useState(0);
@@ -82,6 +131,8 @@ const DataTable: React.FC<DataTableProps> = (props) => {
     const from = pageIndex * size;
     const to = Math.min((pageIndex + 1) * size, data.length - 1);
 
+    const headers = useMemo(() => getHeaders(metas), [metas]);
+
     return (
         <Container className="rounded border-gray-200 dark:border-gray-700 border">
             <Pagination
@@ -97,70 +148,99 @@ const DataTable: React.FC<DataTableProps> = (props) => {
             />
             <table className="min-w-full divide-y">
                 <thead className="bg-gray-50 dark:bg-gray-900">
-                    <tr className="divide-x divide-gray-200 dark:divide-gray-700">
-                        {metas.map((field, fIndex) => (
-                            <th key={field.fid} className={""}>
-                                <div
-                                    className={
-                                        getHeaderClassNames(field) +
-                                        " whitespace-nowrap py-3.5 px-6 text-left text-xs font-semibold text-gray-900 dark:text-gray-50 sm:pl-6"
-                                    }
+                    {headers.map((row) => (
+                        <tr
+                            className="divide-x divide-gray-200 dark:divide-gray-700"
+                            key={`row_${getHeaderKey(row[0])}`}
+                        >
+                            {row.map((f) => (
+                                <th
+                                    colSpan={f.colSpan}
+                                    rowSpan={f.rowSpan}
+                                    key={getHeaderKey(f)}
+                                    className={'align-top'}
                                 >
-                                    <b>{field.name || field.fid}</b>
-                                    <div>
-                                        <DropdownContext
-                                            options={analyticTypeList}
-                                            onSelect={(value) => {
-                                                onMetaChange(field.fid, fIndex, {
-                                                    analyticType: value as IMutField["analyticType"],
-                                                });
-                                            }}
+                                    {f.type === 'name' && (
+                                        <div
+                                            className={
+                                                'border-t-4 border-yellow-400 whitespace-nowrap py-3.5 text-left text-xs font-semibold text-gray-900 dark:text-gray-50'
+                                            }
                                         >
-                                            <span
-                                                className={
-                                                    "cursor-pointer inline-flex px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs text-white " +
-                                                    (field.analyticType === "dimension" ? "bg-blue-500" : "bg-purple-500")
-                                                }
-                                            >
-                                                {field.analyticType}
-                                                <ChevronUpDownIcon className="ml-2 w-3" />
-                                            </span>
-                                        </DropdownContext>
-                                    </div>
-                                    <div>
-                                        <DropdownContext
-                                            options={semanticTypeList}
-                                            onSelect={(value) => {
-                                                onMetaChange(field.fid, fIndex, {
-                                                    semanticType: value as IMutField["semanticType"],
-                                                });
-                                            }}
+                                            <b className="sticky inset-x-0 w-fit px-6 sm:pl-6">{f.value}</b>
+                                        </div>
+                                    )}
+                                    {f.type === 'field' && (
+                                        <div
+                                            className={
+                                                getHeaderClassNames(f.value) +
+                                                ' whitespace-nowrap py-3.5 px-6 text-left text-xs font-semibold text-gray-900 dark:text-gray-50 sm:pl-6'
+                                            }
                                         >
-                                            <span
-                                                className={
-                                                    "cursor-pointer inline-flex px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs " +
-                                                    getSemanticColors(field)
-                                                }
-                                            >
-                                                {field.semanticType}
-                                                <ChevronUpDownIcon className="ml-2 w-3" />
-                                            </span>
-                                        </DropdownContext>
-                                    </div>
-                                </div>
-                            </th>
-                        ))}
-                    </tr>
+                                            <b>{f.value.basename || f.value.name || f.value.fid}</b>
+                                            <div>
+                                                <DropdownContext
+                                                    options={analyticTypeList}
+                                                    onSelect={(value) => {
+                                                        onMetaChange(f.value.fid, f.fIndex, {
+                                                            analyticType: value as IMutField['analyticType'],
+                                                        });
+                                                    }}
+                                                >
+                                                    <span
+                                                        className={
+                                                            'cursor-pointer inline-flex px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs text-white ' +
+                                                            (f.value.analyticType === 'dimension'
+                                                                ? 'bg-blue-500'
+                                                                : 'bg-purple-500')
+                                                        }
+                                                    >
+                                                        {f.value.analyticType}
+                                                        <ChevronUpDownIcon className="ml-2 w-3" />
+                                                    </span>
+                                                </DropdownContext>
+                                            </div>
+                                            <div>
+                                                <DropdownContext
+                                                    options={semanticTypeList}
+                                                    onSelect={(value) => {
+                                                        onMetaChange(f.value.fid, f.fIndex, {
+                                                            semanticType: value as IMutField['semanticType'],
+                                                        });
+                                                    }}
+                                                >
+                                                    <span
+                                                        className={
+                                                            'cursor-pointer inline-flex px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs ' +
+                                                            getSemanticColors(f.value)
+                                                        }
+                                                    >
+                                                        {f.value.semanticType}
+                                                        <ChevronUpDownIcon className="ml-2 w-3" />
+                                                    </span>
+                                                </DropdownContext>
+                                            </div>
+                                        </div>
+                                    )}
+                                </th>
+                            ))}
+                        </tr>
+                    ))}
                 </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) => (
-                        <tr className={"divide-x divide-gray-200 dark:divide-gray-700 " + (index % 2 ? "bg-gray-50 dark:bg-gray-900" : "")} key={index}>
+                        <tr
+                            className={
+                                'divide-x divide-gray-200 dark:divide-gray-700 ' +
+                                (index % 2 ? 'bg-gray-50 dark:bg-gray-900' : '')
+                            }
+                            key={index}
+                        >
                             {metas.map((field) => (
                                 <td
                                     key={field.fid + index}
                                     className={
                                         getHeaderType(field) +
-                                        " whitespace-nowrap py-2 pl-4 pr-3 text-xs text-gray-500 dark:text-gray-300 sm:pl-6"
+                                        ' whitespace-nowrap py-2 pl-4 pr-3 text-xs text-gray-500 dark:text-gray-300 sm:pl-6'
                                     }
                                 >
                                     {`${row[field.fid]}`}

package/src/components/dataTable/pagination.tsx

@@ -12,7 +12,7 @@ export default function Pagination(props: PaginationProps) {
     const { t } = useTranslation();
     return (
         <nav
-            className="flex items-center justify-between border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-zinc-900 px-4 py-3 sm:px-6"
+            className="sticky inset-x-0	flex items-center justify-between border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-zinc-900 px-4 py-3 sm:px-6"
             aria-label="Pagination"
         >
             <div className="hidden sm:block">

package/src/dataSource/utils.ts

@@ -1,7 +1,6 @@
-import { IRow, IMutField } from "../interfaces";
-import { inferMeta } from "../lib/inferMeta";
-import { guardDataKeys } from "../utils/dataPrep";
-
+import { IRow, IMutField } from '../interfaces';
+import { inferMeta } from '../lib/inferMeta';
+import { flatKeys, guardDataKeys } from '../utils/dataPrep';
 
 export function transData(dataSource: IRow[]): {
     dataSource: IRow[];
@@ -17,31 +16,34 @@ export function transData(dataSource: IRow[]): {
     // const rawKeys = Object.keys(sampleRecord);
     // let flatColKeys: string[] = flatNestKeys(sampleRecord);
 
-    const keys = Object.keys(sampleRecord);
+    const keys = flatKeys(sampleRecord);
     const metas = inferMeta({
         dataSource,
         fields: keys.map((k) => ({
-            fid: k,
-            key: k,
-            analyticType: "?",
-            semanticType: "?",
+            fid: k[k.length - 1],
+            key: k[k.length - 1],
+            analyticType: '?',
+            semanticType: '?',
+            path: k,
+            basename: k[k.length - 1],
+            name: k.join('.'),
         })),
-    })
+    });
     const { safeData, safeMetas } = guardDataKeys(dataSource, metas);
     const finalData: IRow[] = [];
     for (let record of safeData) {
         const newRecord: IRow = {};
         for (let field of safeMetas) {
-            if (field.semanticType === "quantitative") {
+            if (field.semanticType === 'quantitative') {
                 newRecord[field.fid] = Number(record[field.fid]);
             } else {
-                newRecord[field.fid] = record[field.fid];//getValueByKeyPath(record, field.fid);// record[field.fid];
+                newRecord[field.fid] = record[field.fid]; //getValueByKeyPath(record, field.fid);// record[field.fid];
             }
         }
         finalData.push(newRecord);
     }
     return {
         dataSource: finalData,
-        fields: safeMetas
+        fields: safeMetas,
     };
 }

package/src/interfaces.ts

@@ -34,18 +34,22 @@ export interface IMutField {
     fid: string;
     key?: string;
     name?: string;
+    basename?: string;
     disable?: boolean;
     semanticType: ISemanticType;
     analyticType: IAnalyticType;
+    path?: string[];
 }
 
 export interface IUncertainMutField {
     fid: string;
     key?: string;
     name?: string;
+    basename?: string;
     disable?: boolean;
     semanticType: ISemanticType | '?';
     analyticType: IAnalyticType | '?';
+    path: string[];
 }
 
 export type IExpParamter =
@@ -90,6 +94,8 @@ export interface IField {
     cmp?: (a: any, b: any) => number;
     computed?: boolean;
     expression?: IExpression;
+    basename?: string;
+    path?: [],
 }
 
 export interface IViewField extends IField {
@@ -215,6 +221,16 @@ export interface IVisSpec {
     readonly config: DeepReadonly<IVisualConfig>;
 }
 
+export type SetToArray<T> = (
+    T extends object ? (
+      T extends Set<infer U> ? Array<U> : { [K in keyof T]: SetToArray<T[K]> }
+    ) : T
+);
+
+export type IVisSpecForExport = SetToArray<IVisSpec>;
+
+export type IFilterFieldForExport = SetToArray<IFilterField>;
+
 export enum ISegmentKey {
     vis = 'vis',
     data = 'data',

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/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;
+    }
 }