@kanaries/graphic-walker 0.3.13 → 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/components/timeoutImg.tsx

@@ -0,0 +1,29 @@
+import React, { useRef, useState, useEffect } from 'react';
+
+export const ImageWithFallback = (
+    props: React.ImgHTMLAttributes<HTMLImageElement> & { fallbackSrc: string; timeout: number }
+) => {
+    const { src, fallbackSrc, timeout, ...rest } = props;
+    const [failed, setFailed] = useState(false);
+    const imgLoadedOnInitSrc = useRef(false);
+
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            if (!imgLoadedOnInitSrc.current) setFailed(true);
+        }, timeout);
+        return () => clearTimeout(timer);
+    }, []);
+
+    return (
+        <img
+            {...rest}
+            src={failed ? src : fallbackSrc}
+            onError={() => {
+                setFailed(true);
+            }}
+            onLoad={() => {
+                imgLoadedOnInitSrc.current = true;
+            }}
+        />
+    );
+};

package/src/components/toolbar/components.tsx

@@ -74,6 +74,7 @@ export const ToolbarItemContainerElement = styled.div<{ split: boolean; dark: bo
     outline: none;
     width: ${({ split }) => split ? 'calc(var(--height) + 10px)' : 'var(--height)'};
     height: var(--height);
+    align-items: center;
     overflow: hidden;
     color: ${({ dark }) => dark ? 'var(--dark-mode-color)' : 'var(--color)'};
     position: relative;

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/fields/filterField/slider.tsx

@@ -100,7 +100,7 @@ const ValueInput: React.FC<ValueInputProps> = props => {
             type="number"
             min={min}
             max={max}
-            className="block w-full rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+            className="block w-full rounded-md border-0 py-1 px-2 text-gray-900 dark:text-white shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:bg-zinc-900 dark:border-gray-700 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
             value={value}
             onChange={(e) => handleSubmitValue(Number(e.target.value))}
         />

package/src/fields/filterField/tabs.tsx

@@ -1,11 +1,15 @@
 import { observer } from 'mobx-react-lite';
-import React, { useMemo, useRef } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 import type { IFilterField, IFilterRule } from '../../interfaces';
 import { useGlobalStore } from '../../store';
 import Slider from './slider';
+import {
+    ChevronDownIcon,
+    ChevronUpIcon,
+} from '@heroicons/react/24/outline';
 
 export type RuleFormProps = {
     field: IFilterField;
@@ -95,7 +99,7 @@ const TabPanel = styled.div``;
 
 const TabItem = styled.div``;
 
-const StatusCheckbox: React.FC<{currentNum: number; totalNum: number; onChange: () => void}> = props => {
+const StatusCheckbox: React.FC<{ currentNum: number; totalNum: number; onChange: () => void }> = props => {
     const { currentNum, totalNum, onChange } = props;
     const checkboxRef = useRef(null);
 
@@ -131,16 +135,42 @@ export const FilterOneOfRule: React.FC<RuleFormProps & { active: boolean }> = ob
     const { commonStore } = useGlobalStore();
     const { currentDataset: { dataSource } } = commonStore;
 
+    interface SortConfig {
+        key: 'value' | 'count';
+        ascending: boolean;
+    }
+    const [sortConfig, setSortConfig] = useState<SortConfig>({
+        key: "count",
+        ascending: true
+    });
+
     const count = React.useMemo(() => {
         return dataSource.reduce<Map<string | number, number>>((tmp, d) => {
             const val = d[field.fid];
 
             tmp.set(val, (tmp.get(val) ?? 0) + 1);
-            
+
             return tmp;
         }, new Map<string | number, number>());
     }, [dataSource, field]);
 
+    const sortedList = useMemo(() => {
+        const entries = Array.from(count.entries());
+        const compare = (a: [string | number, number], b: [string | number, number]) => {
+            if (sortConfig.key === 'count') {
+                return a[1] - b[1];
+            } else {
+                if (typeof a[0] === 'number' && typeof b[0] === 'number') {
+                    return a[0] - b[0];
+                } else {
+                    return String(a[0]).localeCompare(String(b[0]))
+                }
+            }
+        }
+        entries.sort(sortConfig.ascending ? compare : (a, b) => -compare(a, b));
+        return entries;
+    }, [count, sortConfig]);
+
     const { t } = useTranslation('translation');
 
     React.useEffect(() => {
@@ -172,7 +202,7 @@ export const FilterOneOfRule: React.FC<RuleFormProps & { active: boolean }> = ob
             value: new Set<number | string>(
                 [...count.keys()].filter(key => !curSet.has(key))
             ),
-        });    
+        });
     }
     const handleSelectValue = (value, checked) => {
         if (!field.rule || field.rule?.type !== 'one of') return;
@@ -187,21 +217,37 @@ export const FilterOneOfRule: React.FC<RuleFormProps & { active: boolean }> = ob
         }
         onChange(rule);
     }
-    
+
     const selectedValueSum = useMemo(() => {
         if (!field.rule) return 0;
         return [...field.rule.value].reduce<number>((sum, key) => {
             const s = dataSource.filter(which => which[field.fid] === key).length;
             return sum + s;
         }, 0)
-    }, [field.rule?.value])
+    }, [field.rule?.value]);
+
+    const SortButton: React.FC<{ currentKey: SortConfig["key"] }> = ({ currentKey }) => {
+        const isCurrentKey = sortConfig.key === currentKey;
+        return (
+            <span
+                className={`ml-2 flex-none rounded bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer ${isCurrentKey ? "text-indigo-600" : "text-gray-500"}`}
+                onClick={() => setSortConfig({ key: currentKey, ascending: (isCurrentKey ? !sortConfig.ascending : true) })}
+            >
+                {isCurrentKey && !sortConfig.ascending
+                    ? <ChevronDownIcon className="h-4 w-4" />
+                    : <ChevronUpIcon className="h-4 w-4" />
+                }
+            </span>
+        );
+    }
 
     return field.rule?.type === 'one of' ? (
         <Container>
             <div>{t('constant.filter_type.one_of')}</div>
-            <div className="text-gray-500">{t('constant.filter_type.one_of_desc')}</div>
+            <div className="text-gray-500 dark:text-gray-300">{t('constant.filter_type.one_of_desc')}</div>
             <div className="btn-grp">
                 <Button
+                    className="dark:bg-zinc-900 dark:text-gray-200 dark:hover:bg-gray-800"
                     onClick={() => handleToggleFullOrEmptySet()}
                 >
                     {
@@ -211,12 +257,13 @@ export const FilterOneOfRule: React.FC<RuleFormProps & { active: boolean }> = ob
                     }
                 </Button>
                 <Button
+                    className="dark:bg-zinc-900 dark:text-gray-200 dark:hover:bg-gray-800"
                     onClick={() => handleToggleReverseSet()}
                 >
                     {t('filters.btn.reverse')}
                 </Button>
             </div>
-            <Table className="bg-slate-50">
+            <Table className="bg-slate-50 dark:bg-gray-800">
                 <div className="flex justify-center items-center">
                     <StatusCheckbox
                         currentNum={field.rule.value.size}
@@ -224,17 +271,19 @@ export const FilterOneOfRule: React.FC<RuleFormProps & { active: boolean }> = ob
                         onChange={handleToggleFullOrEmptySet}
                     />
                 </div>
-                <label className="header text-gray-500">
+                <label className="header text-gray-500 dark:text-gray-300 flex items-center">
                     {t('filters.header.value')}
+                    <SortButton currentKey="value" />
                 </label>
-                <label className="header text-gray-500">
+                <label className="header text-gray-500 dark:text-gray-300 flex items-center">
                     {t('filters.header.count')}
+                    <SortButton currentKey="count" />
                 </label>
             </Table>
             {/* <hr /> */}
             <Table>
                 {
-                    [...count.entries()].map(([value, count], idx) => {
+                    sortedList.map(([value, count], idx) => {
                         const id = `rule_checkbox_${idx}`;
 
                         return (
@@ -299,8 +348,8 @@ const CalendarInput: React.FC<CalendarInputProps> = props => {
     }
     return (
         <input
-            className="block w-full rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-            type="datetime-local" 
+            className="block w-full rounded-md border-0 py-1 px-2 text-gray-900 dark:text-white shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:bg-zinc-900 dark:border-gray-700 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+            type="datetime-local"
             min={dateStringFormatter(min)}
             max={dateStringFormatter(max)}
             defaultValue={dateStringFormatter(value)}
@@ -326,7 +375,7 @@ export const FilterTemporalRangeRule: React.FC<RuleFormProps & { active: boolean
 
                 list.push(time);
             } catch (error) {
-                
+
             }
             return list;
         }, []).sort((a, b) => a - b);
@@ -463,7 +512,7 @@ const Tabs: React.FC<TabsProps> = observer(({ field, onChange, tabs }) => {
     React.useEffect(() => {
         if (!tabs.includes(which)) setWhich(tabs[0]);
     }, [tabs])
-    
+
     return (
         <TabsContainer>
             <div>
@@ -472,13 +521,13 @@ const Tabs: React.FC<TabsProps> = observer(({ field, onChange, tabs }) => {
                         return (
                             <div className="flex my-2" key={option}>
                                 <div className="align-top">
-                                    <input 
+                                    <input
                                         type="radio"
                                         className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
                                         id={option}
                                         checked={option === which}
                                         onChange={e => setWhich((e.target as HTMLInputElement).value as typeof which)}
-                                        name="filter_type" 
+                                        name="filter_type"
                                         value={option}
                                     />
                                 </div>
@@ -495,7 +544,7 @@ const Tabs: React.FC<TabsProps> = observer(({ field, onChange, tabs }) => {
                     })
                 }
             </div>
-            <hr className="my-0.5"/>
+            <hr className="my-0.5" />
             <TabPanel>
                 {
                     tabs.map((tab, i) => {

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',