@kanaries/graphic-walker 0.2.15 → 0.2.16

package/src/components/dataTable/index.tsx

@@ -48,15 +48,15 @@ function getHeaderClassNames(field: IMutField) {
 function getSemanticColors(field: IMutField): string {
     switch (field.semanticType) {
         case "nominal":
-            return "bg-sky-100 text-sky-800";
+            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 "bg-indigo-100 text-indigo-800";
+            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 "bg-purple-100 text-purple-800";
+            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 "bg-yellow-100 text-yellow-800";
+            return "border border-transparent bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100 dark:border-yellow-600";
         default:
-            return "bg-gray-400";
+            return "border border-transparent bg-gray-400";
     }
 }
 
@@ -97,7 +97,7 @@ 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-600">
+                    <tr className="divide-x divide-gray-200 dark:divide-gray-700">
                         {metas.map((field, fIndex) => (
                             <th key={field.fid} className={""}>
                                 <div
@@ -152,9 +152,9 @@ const DataTable: React.FC<DataTableProps> = (props) => {
                         ))}
                     </tr>
                 </thead>
-                <tbody className="divide-y divide-gray-100 dark:divide-gray-600 bg-white dark:bg-zinc-900">
-                    {data.slice(from, to).map((row, index) => (
-                        <tr className={"divide-x divide-gray-200 dark:divide-gray-600 " + (index % 2 ? "bg-gray-50 dark:bg-gray-800" : "")} key={index}>
+                <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}>
                             {metas.map((field) => (
                                 <td
                                     key={field.fid + index}
@@ -163,7 +163,7 @@ const DataTable: React.FC<DataTableProps> = (props) => {
                                         " whitespace-nowrap py-2 pl-4 pr-3 text-xs text-gray-500 dark:text-gray-300 sm:pl-6"
                                     }
                                 >
-                                    {row[field.fid]}
+                                    {`${row[field.fid]}`}
                                 </td>
                             ))}
                         </tr>

package/src/components/loadingLayer.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default function LoadingLayer () {
+    return <div className="bg-gray-100/50 dark:bg-gray-700/50 absolute top-0 left-0 right-0 bottom-0 z-50 flex items-center justify-center">
+        Loading...
+    </div>
+}

package/src/components/tabs/defaultTab.tsx

@@ -7,6 +7,7 @@ function classNames(...classes: string[]) {
 export interface ITabOption {
     label: string | ReactElement;
     key: string;
+    disabled?: boolean;
 }
 interface DefaultProps {
     tabs: ITabOption[];
@@ -26,14 +27,15 @@ export default function Default(props: DefaultProps) {
                         role="tab"
                         tabIndex={0}
                         onClick={() => {
-                            onSelected(tab.key, tabIndex)
+                            !tab.disabled && onSelected(tab.key, tabIndex)
                         }}
                         key={tab.key}
                         className={classNames(
                             tab.key === selectedKey
                             ? 'border-indigo-500 text-indigo-600 dark:border-indigo-400 dark:text-indigo-300'
                             : 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:text-gray-400',
-                          'whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm cursor-pointer'
+                          'whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm cursor-pointer',
+                            tab.disabled ? 'opacity-50 cursor-not-allowed' : ''
                         )}
                     >{tab.label}</span>
                 ))}

package/src/components/tabs/editableTab.tsx

@@ -1,74 +1,109 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-
+import { PencilSquareIcon } from "@heroicons/react/24/outline";
+import Modal from "../modal";
+import { unstable_batchedUpdates } from "react-dom";
+import DefaultButton from "../button/default";
+import PrimaryButton from "../button/primary";
 
 function classNames(...classes: string[]) {
-    return classes.filter(Boolean).join(' ')
+    return classes.filter(Boolean).join(" ");
 }
 
 export interface ITabOption {
     label: string;
     key: string;
-    options?: Record<string, any>;
+    editable?: boolean;
 }
 interface EditableTabsProps {
     tabs: ITabOption[];
     selectedKey: string;
     onSelected: (selectedKey: string, index: number) => void;
-    allowEdit?: boolean;
     onEditLabel?: (label: string, index: number) => void;
 }
 export default function EditableTabs(props: EditableTabsProps) {
-    const { tabs, selectedKey, onSelected, allowEdit, onEditLabel } = props;
-    const [editList, setEditList] = useState<boolean[]>([]);
+    const { tabs, selectedKey, onSelected, onEditLabel } = props;
+    const [editingIndex, setEditingIndex] = useState<number>(-1);
+    const [name, setName] = useState<string>("");
     const { t } = useTranslation();
 
-    const clearEditStatus = useCallback(() => {
-        setEditList(new Array(tabs.length).fill(false))
-    }, [tabs.length]);
-    
-    useEffect(() => {
-        clearEditStatus();
-    }, [clearEditStatus]);
-
     return (
-        <div className="border-b border-gray-200 dark:border-gray-700 overflow-x-auto overflow-y-hidden" onMouseLeave={clearEditStatus}>
+        <div className="border-b border-gray-200 dark:border-gray-700 overflow-x-auto overflow-y-hidden">
+            <Modal
+                show={editingIndex > -1}
+                onClose={() => {
+                    setEditingIndex(-1);
+                }}
+            >
+                <div>
+                    <span className="block text-sm font-medium leading-6">{t('main.tablist.chart_name')}</span>
+                    <div className="mt-2">
+                        <input
+                            value={name}
+                            onChange={(e) => {
+                                setName(e.target.value);
+                            }}
+                            type="text"
+                            name="text"
+                            className="block w-full rounded-md border-0 px-2 py-1.5 bg-transparent shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                        />
+                    </div>
+                    <div className="mt-4 flex justify-end">
+                        <DefaultButton
+                            className="mr-2"
+                            text={t("actions.cancel")}
+                            onClick={() => {
+                                unstable_batchedUpdates(() => {
+                                    setEditingIndex(-1);
+                                    setName("");
+                                });
+                            }}
+                        />
+                        <PrimaryButton
+                            text={t("actions.confirm")}
+                            onClick={() => {
+                                unstable_batchedUpdates(() => {
+                                    onEditLabel && onEditLabel(name, editingIndex);
+                                    setEditingIndex(-1);
+                                    setName("");
+                                });
+                            }}
+                        />
+                    </div>
+                </div>
+            </Modal>
             <nav className="-mb-px flex h-8 border-gray-200 dark:border-gray-700" role="tablist" aria-label="Tabs">
                 {tabs.map((tab, tabIndex) => (
                     <span
                         role="tab"
                         tabIndex={0}
-                        dangerouslySetInnerHTML={{
-                            __html: t(tab.label, tab.options)
-                        }}
+                        // dangerouslySetInnerHTML={{
+                        //     __html: tab.label
+                        // }}
                         onClick={() => {
-                            onSelected(tab.key, tabIndex)
-                        }}
-                        onDoubleClick={() => {
-                            setEditList(v => {
-                                const nv = [...v];
-                                nv[tabIndex] = true;
-                                return nv
-                            })
-                        }}
-                        contentEditable={editList[tabIndex]}
-                        onInput={(e) => {
-                            onEditLabel && onEditLabel(`${e.currentTarget.textContent}`, tabIndex)
-                        }}
-                        onKeyDown={(e) => {
-                            if (e.key === 'Enter') {
-                                clearEditStatus();
-                                e.preventDefault();
-                            }
+                            onSelected(tab.key, tabIndex);
                         }}
                         key={tab.key}
                         className={classNames(
                             tab.key === selectedKey
                                 ? "border rounded-t"
                                 : "text-gray-500 dark:text-gray-400 hover:text-gray-700 hover:bg-gray-50 dark:hover:text-gray-200 dark:hover:bg-gray-800",
-                            "whitespace-nowrap border-gray-200 dark:border-gray-700 py-1 px-2 pr-6 text-sm cursor-pointer dark:text-white"
+                            "whitespace-nowrap border-gray-200 dark:border-gray-700 py-1 px-2 pr-6 text-sm cursor-default dark:text-white"
+                        )}
+                    >
+                        {tab.label}{" "}
+                        {tab.key === selectedKey && tab.editable && (
+                            <PencilSquareIcon
+                                className="w-3 inline cursor-pointer"
+                                onClick={() => {
+                                    unstable_batchedUpdates(() => {
+                                        setEditingIndex(tabIndex);
+                                        setName(tab.label);
+                                    });
+                                }}
+                            />
                         )}
-                    />
+                    </span>
                 ))}
             </nav>
         </div>

package/src/dataSource/dataSelection/config.ts

@@ -25,4 +25,15 @@ export const charsetOptions: IDropdownSelectOption[] = [
         label: 'GB18030',
         value: 'GB18030',
     },
+]
+
+export const SUPPORTED_FILE_TYPES: IDropdownSelectOption[] = [
+    {
+        label: 'CSV',
+        value: 'csv',
+    },
+    {
+        label: 'JSON',
+        value: 'json',
+    }
 ]

package/src/dataSource/dataSelection/csvData.tsx

@@ -9,7 +9,10 @@ import { useTranslation } from "react-i18next";
 import DefaultButton from "../../components/button/default";
 import PrimaryButton from "../../components/button/primary";
 import DropdownSelect from "../../components/dropdownSelect";
-import { charsetOptions } from "./config";
+import { SUPPORTED_FILE_TYPES, charsetOptions } from "./config";
+import { classNames } from "../../utils";
+import { RadioGroup } from "@headlessui/react";
+import { jsonReader } from "./utils";
 
 const Container = styled.div`
     overflow-x: auto;
@@ -22,6 +25,7 @@ const CSVData: React.FC<ICSVData> = (props) => {
     const { commonStore } = useGlobalStore();
     const { tmpDSName, tmpDataSource, tmpDSRawFields } = commonStore;
     const [encoding, setEncoding] = useState<string>("utf-8");
+    const [fileType, setFileType] = useState<string>("csv");
 
     const onSubmitData = useCallback(() => {
         commonStore.commitTempDS();
@@ -30,6 +34,27 @@ const CSVData: React.FC<ICSVData> = (props) => {
     const { t } = useTranslation("translation", { keyPrefix: "DataSource.dialog.file" });
     const fileLoaded = tmpDataSource.length > 0 && tmpDSRawFields.length > 0;
 
+    const fileUpload = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        const files = e.target.files;
+        if (files !== null) {
+            const file = files[0];
+            if (fileType === 'csv') {
+                FileReader.csvReader({
+                    file,
+                    config: { type: "reservoirSampling", size: Infinity },
+                    onLoading: () => {},
+                    encoding,
+                }).then((data) => {
+                    commonStore.updateTempDS(data as IRow[]);
+                });
+            } else {
+                jsonReader(file).then((data) => {
+                    commonStore.updateTempDS(data as IRow[]);
+                });
+            }
+        }
+    }, [fileType, encoding]);
+
     return (
         <Container>
             {!fileLoaded && (
@@ -49,49 +74,56 @@ const CSVData: React.FC<ICSVData> = (props) => {
                             d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"
                         />
                     </svg>
-                    <h3 className="mt-2 text-sm font-semibold text-gray-900">{t('choose_file')}</h3>
-                    <p className="mt-1 text-sm text-gray-500">{t('get_start_desc')}</p>
+                    <h3 className="mt-2 text-sm font-semibold text-gray-900 dark:text-gray-50">{t("choose_file")}</h3>
+                    <p className="mt-1 text-sm text-gray-500">{t("get_start_desc")}</p>
                 </div>
             )}
-            <input
-                style={{ display: "none" }}
-                type="file"
-                ref={fileRef}
-                onChange={(e) => {
-                    const files = e.target.files;
-                    if (files !== null) {
-                        const file = files[0];
-                        FileReader.csvReader({
-                            file,
-                            config: { type: "reservoirSampling", size: Infinity },
-                            onLoading: () => {},
-                            encoding,
-                        }).then((data) => {
-                            commonStore.updateTempDS(data as IRow[]);
-                        });
-                    }
-                }}
-            />
+            <input style={{ display: "none" }} type="file" ref={fileRef} onChange={fileUpload} />
             {!fileLoaded && (
-                <div className="my-1 flex justify-center">
-                    <DefaultButton
-                        className="mr-2"
-                        onClick={() => {
-                            if (fileRef.current) {
-                                fileRef.current.click();
-                            }
-                        }}
-                        text={t("open")}
-                    />
-                    <div className="inline-block relative">
-                        <DropdownSelect
-                            buttonClassName="w-36"
-                            options={charsetOptions}
-                            selectedKey={encoding}
-                            onSelect={(k) => {
-                                setEncoding(k);
+                <div className="my-1">
+                    <div className="flex justify-center">
+                        <RadioGroup value={fileType} onChange={setFileType} className="mt-2">
+                            <RadioGroup.Label className="sr-only"> Choose a memory option </RadioGroup.Label>
+                            <div className="grid grid-cols-2 gap-3">
+                                {SUPPORTED_FILE_TYPES.map((option) => (
+                                    <RadioGroup.Option
+                                        key={option.value}
+                                        value={option.value}
+                                        className={({ active, checked }) =>
+                                            classNames(
+                                                checked
+                                                    ? "bg-indigo-600 text-white hover:bg-indigo-500"
+                                                    : "ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800",
+                                                "flex cursor-pointer items-center justify-center rounded py-1 px-8 text-sm font-semibold uppercase sm:flex-1"
+                                            )
+                                        }
+                                    >
+                                        <RadioGroup.Label as="span">{option.label}</RadioGroup.Label>
+                                    </RadioGroup.Option>
+                                ))}
+                            </div>
+                        </RadioGroup>
+                    </div>
+                    <div className="my-1 flex justify-center">
+                        <DefaultButton
+                            className="mr-2"
+                            onClick={() => {
+                                if (fileRef.current) {
+                                    fileRef.current.click();
+                                }
                             }}
+                            text={t("open")}
                         />
+                        <div className="inline-block relative">
+                            <DropdownSelect
+                                buttonClassName="w-36"
+                                options={charsetOptions}
+                                selectedKey={encoding}
+                                onSelect={(k) => {
+                                    setEncoding(k);
+                                }}
+                            />
+                        </div>
                     </div>
                 </div>
             )}

package/src/dataSource/dataSelection/gwFile.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useCallback } from "react";
+import React from "react";
 import { useGlobalStore } from "../../store";
 import { observer } from "mobx-react-lite";
 
@@ -7,7 +7,7 @@ interface GWFileProps {
     fileRef: React.RefObject<HTMLInputElement>;
 }
 const GWFile: React.FC<GWFileProps> = (props) => {
-    const { commonStore, vizStore } = useGlobalStore();
+    const { vizStore } = useGlobalStore();
 
     return (
         <input

package/src/dataSource/dataSelection/utils.ts

@@ -0,0 +1,28 @@
+import { IDataSetInfo, IRow } from "../../interfaces";
+
+export function jsonReader (file: File): Promise<IRow[]> {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            try {
+                const data = JSON.parse(reader.result as string);
+                if (!Array.isArray(data)) {
+                    throw new Error('Invalid JSON file');
+                }
+                resolve(data);
+            } catch (e) {
+                reject(e);
+            }
+        };
+        reader.readAsText(file);
+    });
+}
+
+// export function jsonArray2DatasetInfo (data: IRow[]): IDataSetInfo {
+//     const fields = Object.keys(data[0]);
+//     return {
+//         name: 'New Dataset',
+//         rawFields: fields.map(f => ({ name: f, type: 'number' })),
+//         dataSource: data
+//     }
+// }

package/src/dataSource/utils.ts

@@ -2,6 +2,7 @@ import { IRow, IMutField } from "../interfaces";
 import { inferMeta } from "../lib/inferMeta";
 import { guardDataKeys } from "../utils/dataPrep";
 
+
 export function transData(dataSource: IRow[]): {
     dataSource: IRow[];
     fields: IMutField[];
@@ -12,7 +13,11 @@ export function transData(dataSource: IRow[]): {
             fields: [],
         };
     }
-    const keys = Object.keys(dataSource[0]);
+    const sampleRecord = dataSource[0];
+    // const rawKeys = Object.keys(sampleRecord);
+    // let flatColKeys: string[] = flatNestKeys(sampleRecord);
+
+    const keys = Object.keys(sampleRecord);
     const metas = inferMeta({
         dataSource,
         fields: keys.map((k) => ({
@@ -21,7 +26,7 @@ export function transData(dataSource: IRow[]): {
             analyticType: "?",
             semanticType: "?",
         })),
-    });
+    })
     const { safeData, safeMetas } = guardDataKeys(dataSource, metas);
     const finalData: IRow[] = [];
     for (let record of safeData) {
@@ -30,7 +35,7 @@ export function transData(dataSource: IRow[]): {
             if (field.semanticType === "quantitative") {
                 newRecord[field.fid] = Number(record[field.fid]);
             } else {
-                newRecord[field.fid] = record[field.fid];
+                newRecord[field.fid] = record[field.fid];//getValueByKeyPath(record, field.fid);// record[field.fid];
             }
         }
         finalData.push(newRecord);

package/src/fields/datasetFields/meaFields.tsx

@@ -20,18 +20,26 @@ const MeaFields: React.FC<Props> = (props) => {
                 value: "bin",
                 label: "Bin",
             },
+            {
+                value: 'binCount',
+                label: 'Bin Count'
+            },
             {
                 value: "log10",
                 label: "Log10",
             },
+            {
+                value: "log2",
+                label: "Log2",
+            },
         ];
     }, []);
 
     const fieldActionHandler = useCallback((selectedValue: any, opIndex: number, meaIndex: number) => {
-        if (selectedValue === "bin") {
-            vizStore.createBinField("measures", meaIndex);
-        } else if (selectedValue === "log10") {
-            vizStore.createLogField("measures", meaIndex);
+        if (selectedValue === "bin" || selectedValue === 'binCount') {
+            vizStore.createBinField("measures", meaIndex, selectedValue);
+        } else if (selectedValue === "log10" || selectedValue === "log2") {
+            vizStore.createLogField("measures", meaIndex, selectedValue);
         }
     }, []);
     return (

package/src/index.css

@@ -10,11 +10,11 @@ html{
   }
 }
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    sans-serif; */
+  /* -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale; */
   margin: 0px;
   padding: 0px;
 }

package/src/index.tsx

@@ -1,22 +1,22 @@
-import React, { createContext, useEffect, useRef, useState } from 'react';
-import { StyleSheetManager } from 'styled-components';
-import root from 'react-shadow';
-import { DOM } from '@kanaries/react-beautiful-dnd';
-import { observer } from 'mobx-react-lite';
-import App, { IGWProps } from './App';
-import { StoreWrapper } from './store/index';
-import { FieldsContextWrapper } from './fields/fieldsContext';
+import React, { createContext, useEffect, useRef, useState } from "react";
+import { StyleSheetManager } from "styled-components";
+import root from "react-shadow";
+import { DOM } from "@kanaries/react-beautiful-dnd";
+import { observer } from "mobx-react-lite";
+import App, { IGWProps } from "./App";
+import { StoreWrapper } from "./store/index";
+import { FieldsContextWrapper } from "./fields/fieldsContext";
 
-import './empty_sheet.css';
+import "./empty_sheet.css";
 import tailwindStyle from "tailwindcss/tailwind.css?inline";
-import style from './index.css?inline';
-
+import style from "./index.css?inline";
 
 export const ShadowDomContext = createContext<{ root: ShadowRoot | null }>({ root: null });
 
-export const GraphicWalker: React.FC<IGWProps> = observer(props => {
+export const GraphicWalker: React.FC<IGWProps> = observer((props) => {
     const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
     const rootRef = useRef<HTMLDivElement>(null);
+    const { storeRef } = props;
 
     useEffect(() => {
         if (rootRef.current) {
@@ -32,20 +32,20 @@ export const GraphicWalker: React.FC<IGWProps> = observer(props => {
     }, []);
 
     return (
-        <root.div mode="open" ref={rootRef}>
-            <style>{tailwindStyle}</style>
-            <style>{style}</style>
-            {shadowRoot && (
-                <StyleSheetManager target={shadowRoot}>
-                    <StoreWrapper keepAlive={props.keepAlive}>
+        <StoreWrapper keepAlive={props.keepAlive} storeRef={storeRef}>
+            <root.div mode="open" ref={rootRef}>
+                <style>{tailwindStyle}</style>
+                <style>{style}</style>
+                {shadowRoot && (
+                    <StyleSheetManager target={shadowRoot}>
                         <FieldsContextWrapper>
                             <ShadowDomContext.Provider value={{ root: shadowRoot }}>
                                 <App {...props} />
                             </ShadowDomContext.Provider>
                         </FieldsContextWrapper>
-                    </StoreWrapper>
-                </StyleSheetManager>
-            )}
-        </root.div>
+                    </StyleSheetManager>
+                )}
+            </root.div>
+        </StoreWrapper>
     );
 });

package/src/interfaces.ts

@@ -1,6 +1,6 @@
 import { StatFuncName } from "visual-insights/build/esm/statistics";
 import { AggFC } from 'cube-core/built/types';
-import { IAnalyticType, IMutField as VIMutField, ISemanticType } from 'visual-insights';
+import { IAnalyticType, ISemanticType } from 'visual-insights';
 
 export 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];
@@ -36,6 +36,28 @@ export interface IUncertainMutField {
     analyticType: IAnalyticType | '?';
 }
 
+
+export type IExpParamter = {
+    type: 'field';
+    value: string;
+} | {
+    type: 'value';
+    value: any;
+} | {
+    type: 'expression';
+    value: IExpression;
+} | {
+    type: 'constant';
+    value: any;
+}
+
+
+export interface IExpression {
+    op: 'bin' | 'log2' | 'log10' | 'one' | 'binCount';
+    params: IExpParamter[];
+    as: string;
+}
+
 export interface IField {
     /**
      * fid: key in data record
@@ -52,6 +74,8 @@ export interface IField {
     semanticType: ISemanticType;
     analyticType: IAnalyticType;
     cmp?: (a: any, b: any) => number;
+    computed?: boolean;
+    expressoion?: IExpression;
 }
 
 export interface IViewField extends IField {
@@ -176,7 +200,7 @@ export interface IVisualConfig {
 
 export interface IVisSpec {
     readonly visId: string;
-    readonly name?: [string, Record<string, any>?];
+    readonly name?: string;
     readonly encodings: DeepReadonly<DraggableFieldState>;
     readonly config: DeepReadonly<IVisualConfig>;
 }