@kanaries/graphic-walker 0.2.12 → 0.2.14

package/src/fields/encodeFields/singleEncodeEditor.tsx

@@ -0,0 +1,78 @@
+import React, { useMemo } from "react";
+import { IDraggableStateKey } from "../../interfaces";
+import { observer } from "mobx-react-lite";
+import { useGlobalStore } from "../../store";
+import DropdownSelect from "./singleEncodeDropDown";
+import { DroppableProvided } from "react-beautiful-dnd";
+import { ChevronUpDownIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { useTranslation } from "react-i18next";
+import { COUNT_FIELD_ID } from "../../constants";
+import DropdownContext from "../../components/dropdownContext";
+import { AGGREGATOR_LIST } from "../fieldsContext";
+import { Draggable, DroppableStateSnapshot } from "@kanaries/react-beautiful-dnd";
+
+interface SingleEncodeEditorProps {
+    dkey: IDraggableStateKey;
+    provided: DroppableProvided;
+    snapshot: DroppableStateSnapshot;
+}
+const SingleEncodeEditor: React.FC<SingleEncodeEditorProps> = (props) => {
+    const { dkey, provided, snapshot } = props;
+    const { vizStore } = useGlobalStore();
+    const { draggableFieldState, visualConfig } = vizStore;
+    const channelItem = draggableFieldState[dkey.id][0];
+    const { t } = useTranslation();
+
+    const aggregationOptions = useMemo(() => {
+        return AGGREGATOR_LIST.map((op) => ({
+            value: op,
+            label: t(`constant.aggregator.${op}`),
+        }));
+    }, []);
+
+    return (
+        <div className="p-1 select-none relative" {...provided.droppableProps} ref={provided.innerRef}>
+            <div className={`p-1.5 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 flex item-center justify-center grow text-gray-500 dark:text-gray-400 ${snapshot.draggingFromThisWith || snapshot.isDraggingOver || !channelItem ? 'opacity-100' : 'opacity-0'} relative z-0`}>
+                {t('actions.drop_field')}
+            </div>
+            {channelItem && (
+                <Draggable key={channelItem.dragId} draggableId={channelItem.dragId} index={0}>
+                    {(provided, snapshot) => {
+                        return (
+                            <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} className="flex items-stretch absolute z-10 top-0 left-0 right-0 bottom-0 m-1">
+                                <div
+                                    onClick={() => {
+                                        vizStore.removeField(dkey.id, 0);
+                                    }}
+                                    className="grow-0 shrink-0 px-1.5 flex items-center justify-center bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 cursor-pointer"
+                                >
+                                    <TrashIcon className="w-4" />
+                                </div>
+                                <div className="flex-1 flex items-center border border-gray-200 dark:border-gray-700 border-l-0 px-2 space-x-2">
+                                    <span className="flex-1 truncate">
+                                        {channelItem.name}
+                                    </span>
+                                    {channelItem.analyticType === "measure" && channelItem.fid !== COUNT_FIELD_ID && visualConfig.defaultAggregated && (
+                                        <DropdownContext
+                                            options={aggregationOptions}
+                                            onSelect={(value) => {
+                                                vizStore.setFieldAggregator(dkey.id, 0, value);
+                                            }}
+                                        >
+                                            <span className="bg-transparent text-gray-700 dark:text-gray-200 float-right focus:outline-none focus:border-gray-500 dark:focus:border-gray-400 flex items-center ml-2">
+                                                {channelItem.aggName || ""}
+                                                <ChevronUpDownIcon className="w-3" />
+                                            </span>
+                                        </DropdownContext>
+                                    )}
+                                </div>
+                            </div>
+                        );
+                    }}
+                </Draggable>
+            )}
+        </div>
+    );
+};
+
+export default observer(SingleEncodeEditor);

package/src/fields/filterField/filterEditDialog.tsx

@@ -109,13 +109,14 @@ const FilterEditDialog: React.FC = observer(() => {
     
     return uncontrolledField ? (
         <Modal
+            show={Boolean(uncontrolledField)}
             title={t('editing')}
             onClose={() => vizStore.closeFilterEditing()}
         >
             <header className="text-lg font-semibold py-2 outline-none">
                 {t('form.name')}
             </header>
-            <input className="border py-1 px-4" readOnly value={uncontrolledField.name}/>
+            <input className="border py-1 px-4 bg-white text-gray-800" readOnly value={uncontrolledField.name}/>
             <header className="text-lg font-semibold py-2 outline-none">
                 {t('form.rule')}
             </header>

package/src/fields/filterField/filterPill.tsx

@@ -73,7 +73,7 @@ const FilterPill: React.FC<FilterPillProps> = observer(props => {
                 {field.name}
             </header>
             <div
-                className="bg-white text-gray-500 hover:bg-gray-100 flex flex-row output"
+                className="bg-white dark:bg-zinc-900  text-gray-500 hover:bg-gray-100 flex flex-row output"
                 onClick={() => vizStore.setFilterEditing(fIndex)}
                 style={{ cursor: 'pointer' }}
                 title={t('to_edit')}

package/src/fields/filterField/slider.tsx

@@ -197,7 +197,7 @@ const Slider: React.FC<SliderProps> = React.memo(function Slider ({
                         tabIndex={-1}
                         onMouseDown={ev => {
                             if (ev.buttons === 1) {
-                                mouseOffsetRef.current = ev.nativeEvent.offsetX;
+                                mouseOffsetRef.current = ev.nativeEvent.offsetX - (ev.target as HTMLDivElement).getBoundingClientRect().width;
                                 setDragging('left');
                             }
                         }}

package/src/fields/filterField/tabs.tsx

@@ -5,6 +5,7 @@ import styled from 'styled-components';
 
 import type { IFilterField, IFilterRule } from '../../interfaces';
 import { useGlobalStore } from '../../store';
+import PureTabs from '../../components/tabs/defaultTab';
 import Slider from './slider';
 
 
@@ -368,27 +369,16 @@ const Tabs: React.FC<TabsProps> = observer(({ field, onChange, tabs }) => {
 
     return (
         <TabsContainer>
-            <TabList role="tablist">
-                {
-                    tabs.map((tab, i) => (
-                        <TabHeader
-                            key={i}
-                            role="tab"
-                            aria-selected={which === tab}
-                            id={`filter-tab-${tab.replaceAll(/ /g, '_')}`}
-                            aria-controls={`filter-panel-${tab.replaceAll(/ /g, '_')}`}
-                            tabIndex={-1}
-                            onClick={() => {
-                                if (which !== tab) {
-                                    setWhich(tab);
-                                }
-                            }}
-                        >
-                            {t(tab.replaceAll(/ /g, '_'))}
-                        </TabHeader>
-                    ))
-                }
-            </TabList>
+            <PureTabs
+                selectedKey={which}
+                tabs={tabs.map(tab => ({
+                    key: tab,
+                    label: t(tab.replaceAll(/ /g, '_')),
+                }))}
+                onSelected={sk => {
+                    setWhich(sk as typeof which);
+                }}
+            />
             <TabPanel>
                 {
                     tabs.map((tab, i) => {

package/src/fields/obComponents/obPill.tsx

@@ -1,48 +1,78 @@
-import { BarsArrowDownIcon, BarsArrowUpIcon } from '@heroicons/react/24/outline';
-import { observer } from 'mobx-react-lite';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { DraggableProvided } from '@kanaries/react-beautiful-dnd';
-import { COUNT_FIELD_ID } from '../../constants';
-import { IDraggableStateKey } from '../../interfaces';
-import { useGlobalStore } from '../../store';
-import { Pill } from '../components';
-import { AGGREGATOR_LIST } from '../fieldsContext';
-
+import { BarsArrowDownIcon, BarsArrowUpIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline";
+import { observer } from "mobx-react-lite";
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { DraggableProvided } from "@kanaries/react-beautiful-dnd";
+import { COUNT_FIELD_ID } from "../../constants";
+import { IDraggableStateKey } from "../../interfaces";
+import { useGlobalStore } from "../../store";
+import { Pill } from "../components";
+import { AGGREGATOR_LIST } from "../fieldsContext";
+import DropdownContext from "../../components/dropdownContext";
 
 interface PillProps {
     provided: DraggableProvided;
     fIndex: number;
     dkey: IDraggableStateKey;
 }
-const OBPill: React.FC<PillProps> = props => {
+const OBPill: React.FC<PillProps> = (props) => {
     const { provided, dkey, fIndex } = props;
     const { vizStore } = useGlobalStore();
     const { visualConfig } = vizStore;
     const field = vizStore.draggableFieldState[dkey.id][fIndex];
-    const { t } = useTranslation('translation', { keyPrefix: 'constant.aggregator' });
+    const { t } = useTranslation("translation", { keyPrefix: "constant.aggregator" });
 
-    return <Pill
-        ref={provided.innerRef}
-        colType={field.analyticType === 'dimension' ? 'discrete' : 'continuous'}
-        {...provided.draggableProps}
-        {...provided.dragHandleProps}
-    >
-        {field.name}&nbsp;
-        {field.analyticType === 'measure' && field.fid !== COUNT_FIELD_ID && visualConfig.defaultAggregated && (
-            <select
-                className="bg-transparent text-gray-700 float-right focus:outline-none focus:border-gray-500"
-                value={field.aggName || ''}
-                onChange={(e) => { vizStore.setFieldAggregator(dkey.id, fIndex, e.target.value) }}
-            >
-                {
-                    AGGREGATOR_LIST.map(op => <option value={op} key={op}>{t(op)}</option>)
-                }
-            </select>
-        )}
-        {field.analyticType === 'dimension' && field.sort === 'ascending' && <BarsArrowUpIcon className='float-right w-3' role="status" aria-label="Sorted in ascending order" />}
-        {field.analyticType === 'dimension' && field.sort === 'descending' && <BarsArrowDownIcon className='float-right w-3' role="status" aria-label="Sorted in descending order" />}
-    </Pill>
-}
+    const aggregationOptions = useMemo(() => {
+        return AGGREGATOR_LIST.map((op) => ({
+            value: op,
+            label: t(op),
+        }));
+    }, []);
+
+    return (
+        <Pill
+            ref={provided.innerRef}
+            colType={field.analyticType === "dimension" ? "discrete" : "continuous"}
+            {...provided.draggableProps}
+            {...provided.dragHandleProps}
+        >
+            <span className="flex-1 truncate">{field.name}</span>&nbsp;
+            {field.analyticType === "measure" && field.fid !== COUNT_FIELD_ID && visualConfig.defaultAggregated && (
+                <DropdownContext
+                    options={aggregationOptions}
+                    onSelect={(value) => {
+                        vizStore.setFieldAggregator(dkey.id, fIndex, value);
+                    }}
+                >
+                    <span className="bg-transparent text-gray-700 float-right focus:outline-none focus:border-gray-500 dark:focus:border-gray-400 flex items-center ml-2">
+                        {field.aggName || ""}
+                        <ChevronUpDownIcon className="w-3" />
+                    </span>
+                </DropdownContext>
+            )}
+            {/* {field.analyticType === "measure" && field.fid !== COUNT_FIELD_ID && visualConfig.defaultAggregated && (
+                <select
+                    className="bg-transparent text-gray-700 float-right focus:outline-none focus:border-gray-500"
+                    value={field.aggName || ""}
+                    onChange={(e) => {
+                        vizStore.setFieldAggregator(dkey.id, fIndex, e.target.value);
+                    }}
+                >
+                    {AGGREGATOR_LIST.map((op) => (
+                        <option className="inline" value={op} key={op}>
+                            {t(op)}
+                        </option>
+                    ))}
+                </select>
+            )} */}
+            {field.analyticType === "dimension" && field.sort === "ascending" && (
+                <BarsArrowUpIcon className="float-right w-3" role="status" aria-label="Sorted in ascending order" />
+            )}
+            {field.analyticType === "dimension" && field.sort === "descending" && (
+                <BarsArrowDownIcon className="float-right w-3" role="status" aria-label="Sorted in descending order" />
+            )}
+        </Pill>
+    );
+};
 
 export default observer(OBPill);

package/src/index.css

@@ -1,9 +1,22 @@
+html{
+  margin: 0px;
+  padding: 0px;
+  background-color: #fff;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    background-color: rgb(24 24 27);
+  }
+}
 body {
   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;
+  margin: 0px;
+  padding: 0px;
 }
 
 code {

package/src/insightBoard/index.tsx

@@ -1,30 +1,31 @@
-import { toJS } from 'mobx';
-import { observer } from 'mobx-react-lite';
-import React, { useCallback } from 'react';
-import Modal from '../components/modal';
-import { useGlobalStore } from '../store';
-import InsightMainBoard from './mainBoard';
+import { toJS } from "mobx";
+import { observer } from "mobx-react-lite";
+import React, { useCallback } from "react";
+import Modal from "../components/modal";
+import { useGlobalStore } from "../store";
+import InsightMainBoard from "./mainBoard";
 
-const InsightBoard: React.FC = props => {
+const InsightBoard: React.FC = (props) => {
     const { commonStore, vizStore } = useGlobalStore();
     const { showInsightBoard, currentDataset, filters } = commonStore;
     const { viewDimensions, viewMeasures, draggableFieldState } = vizStore;
     const onCloseModal = useCallback(() => {
         commonStore.setShowInsightBoard(false);
-    }, [])
-    return <div>
-        {
-            showInsightBoard && <Modal onClose={onCloseModal}>
-                <InsightMainBoard
-                    dataSource={currentDataset.dataSource}
-                    fields={toJS(draggableFieldState.fields)}
-                    viewDs={viewDimensions}
-                    viewMs={viewMeasures}
-                    filters={toJS(filters)}
-                />
-            </Modal>
-        }
-    </div>
-}
+    }, []);
+    if (!showInsightBoard) {
+        return null;
+    }
+    return (
+        <Modal onClose={onCloseModal} show={showInsightBoard}>
+            <InsightMainBoard
+                dataSource={currentDataset.dataSource}
+                fields={toJS(draggableFieldState.fields)}
+                viewDs={viewDimensions}
+                viewMs={viewMeasures}
+                filters={toJS(filters)}
+            />
+        </Modal>
+    );
+};
 
-export default observer(InsightBoard);
+export default observer(InsightBoard);

package/src/insightBoard/radioGroupButtons.tsx

@@ -9,9 +9,16 @@ const RGBContainer = styled.div`
         border: 1px solid #f0f0f0;
         background-color: #f0f0f0;
         cursor: pointer;
+        @media (prefers-color-scheme: dark) {
+            background-color: #000;
+            border: 1px solid #4b5563;
+        }
     }
     .choosen.option {
         background-color: #fff;
+        @media (prefers-color-scheme: dark) {
+            background-color: #000;
+        }
     }
 `;
 

package/src/interfaces.ts

@@ -119,6 +119,7 @@ export interface DraggableFieldState {
     shape: IViewField[];
     theta: IViewField[];
     radius: IViewField[];
+    details: IViewField[];
     filters: IFilterField[];
 }
 
@@ -178,4 +179,9 @@ export interface IVisSpec {
     readonly name?: [string, Record<string, any>?];
     readonly encodings: DeepReadonly<DraggableFieldState>;
     readonly config: DeepReadonly<IVisualConfig>;
+}
+
+export enum ISegmentKey {
+    vis = 'vis',
+    data = 'data'
 }

package/src/lib/inferMeta.ts

@@ -53,7 +53,7 @@ function inferAnalyticTypeFromSemanticType(semanticType: ISemanticType): IAnalyt
 export function inferSemanticType(data: IRow[], fid: string): ISemanticType {
     let st = UnivariateSummary.getFieldType(data, fid);
     if (st === 'nominal') {
-        if (isDateTimeArray(data.map((row) => row[fid]))) st = 'temporal';
+        if (isDateTimeArray(data.map((row) => `${row[fid]}`))) st = 'temporal';
     } else if (st === 'ordinal') {
         const valueSet: Set<number> = new Set();
         let _max = -Infinity;

package/src/locales/en-US.json

@@ -50,8 +50,8 @@
         },
         "draggable_key": {
             "fields": "Fields",
-            "columns": "Columns",
-            "rows": "Rows",
+            "columns": "X-Axis",
+            "rows": "Y-Axis",
             "color": "Color",
             "opacity": "Opacity",
             "size": "Size",
@@ -81,6 +81,10 @@
     "App": {
         "labels": {
             "data_interpretation": "Interpret Data"
+        },
+        "segments": {
+            "vis": "Visualization",
+            "data": "Data"
         }
     },
     "DataSource": {
@@ -101,7 +105,9 @@
             "file": {
                 "open": "Open...",
                 "submit": "Submit",
-                "dataset_name": "Dataset Name"
+                "dataset_name": "Dataset Name",
+                "choose_file": "Choose a Data File",
+                "get_start_desc": "Get started by creating a dataset."
             },
             "public": {
                 "submit": "Submit"
@@ -177,5 +183,10 @@
             "children_major_factor": "major factor",
             "children_outlier": "outlier"
         }
+    },
+    "actions": {
+        "prev": "Previous",
+        "next": "Next",
+        "drop_field": "Drop Field Here"
     }
 }

package/src/locales/zh-CN.json

@@ -81,6 +81,10 @@
     "App": {
         "labels": {
             "data_interpretation": "数据解读"
+        },
+        "segments": {
+            "vis": "可视化",
+            "data": "数据"
         }
     },
     "DataSource": {
@@ -101,7 +105,9 @@
             "file": {
                 "open": "打开文件...",
                 "submit": "确认",
-                "dataset_name": "数据集名称"
+                "dataset_name": "数据集名称",
+                "choose_file": "选择文件",
+                "get_start_desc": "创建一个数据集以开始分析"
             },
             "public": {
                 "submit": "确认"
@@ -177,5 +183,10 @@
             "children_major_factor": "子节点主要因素",
             "children_outlier": "子节点异常"
         }
+    },
+    "actions": {
+        "prev": "向前",
+        "next": "向后",
+        "drop_field": "拖拽字段至此"
     }
 }

package/src/main.tsx

@@ -9,7 +9,7 @@ inject();
 
 ReactDOM.render(
     <React.StrictMode>
-        <GraphicWalker />
+        <GraphicWalker themeKey="g2" />
     </React.StrictMode>,
     document.getElementById("root")
 );

package/src/renderer/index.tsx

@@ -7,7 +7,7 @@ import { useGlobalStore } from '../store';
 import ReactVega, { IReactVegaHandler } from '../vis/react-vega';
 
 
-const ReactiveRenderer = forwardRef<IReactVegaHandler, {}>(function ReactiveRenderer (props, ref) {
+const ReactiveRenderer = forwardRef<IReactVegaHandler, { themeKey?: 'vega' | 'g2' }>(function ReactiveRenderer ({ themeKey }, ref) {
     const { vizStore, commonStore } = useGlobalStore();
     const { draggableFieldState, visualConfig } = vizStore;
     const { geoms, interactiveScale, defaultAggregated, stack, showActions, size, exploration } = visualConfig;
@@ -32,6 +32,7 @@ const ReactiveRenderer = forwardRef<IReactVegaHandler, {}>(function ReactiveRend
     
     const handleGeomClick = useCallback((values: any, e: any) => {
         if (shouldTriggerMenu) {
+            e.stopPropagation();
             runInAction(() => {
                 commonStore.showEmbededMenu([e.pageX, e.pageY])
                 commonStore.setFilters(values);
@@ -104,6 +105,7 @@ const ReactiveRenderer = forwardRef<IReactVegaHandler, {}>(function ReactiveRend
         brushEncoding={exploration.mode === 'brush' ? exploration.brushDirection : 'none'}
         selectEncoding={exploration.mode === 'point' ? 'default' : 'none'}
         onGeomClick={handleGeomClick}
+        themeKey={themeKey}
     />
     </Resizable>
 });

package/src/segments/segmentNav.tsx

@@ -0,0 +1,58 @@
+import React, { Fragment, useCallback } from "react";
+import { observer } from "mobx-react-lite";
+import DefaultTab, { ITabOption } from "../components/tabs/defaultTab";
+import { useGlobalStore } from "../store";
+import { ChartBarIcon, ChartPieIcon, CircleStackIcon } from "@heroicons/react/24/outline";
+import { ISegmentKey } from "../interfaces";
+import { useTranslation } from "react-i18next";
+
+
+const ADD_KEY = '_add';
+
+const SegmentNav: React.FC = (props) => {
+    const { vizStore, commonStore } = useGlobalStore();
+    const { visIndex, visList } = vizStore;
+    const { currentDataset, segmentKey } = commonStore;
+    const { t } = useTranslation();
+
+    const tabs: ITabOption[] = [
+        {
+            key: ISegmentKey.data,
+            label: <div className="flex">
+                <CircleStackIcon className="w-4 mr-2" /> {t('App.segments.data')}
+            </div>
+        },
+        {
+            key: ISegmentKey.vis,
+            label: <div className="flex">
+                <ChartPieIcon className="w-4 mr-2" /> {t('App.segments.vis')}
+            </div>
+        }
+    ]
+
+    const visSelectionHandler = useCallback((tabKey: string, tabIndex: number) => {
+        if (tabKey === ADD_KEY) {
+            vizStore.addVisualization();
+            vizStore.initMetaState(currentDataset)
+        } else {
+            vizStore.selectVisualization(tabIndex);
+        }
+    }, [currentDataset, vizStore])
+
+    const editLabelHandler = useCallback((content: string, tabIndex: number) => {
+        vizStore.setVisName(tabIndex, content)
+    }, [])
+
+    return (
+        <DefaultTab
+            selectedKey={segmentKey}
+            tabs={tabs}
+            onEditLabel={editLabelHandler}
+            onSelected={(k) => {
+                commonStore.setSegmentKey(k as ISegmentKey)
+            }}
+        />
+    );
+};
+
+export default observer(SegmentNav);

package/src/segments/visNav.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
 import { observer } from "mobx-react-lite";
-import PureTabs, { ITabOption } from "../components/tabs/pureTab";
+import EditableTabs, { ITabOption } from "../components/tabs/editableTab";
 import { useGlobalStore } from "../store";
 
 
@@ -36,7 +36,7 @@ const VisNav: React.FC = (props) => {
     }, [])
 
     return (
-        <PureTabs
+        <EditableTabs
             selectedKey={visList[visIndex].visId}
             tabs={tabs}
             onEditLabel={editLabelHandler}

package/src/store/commonStore.ts

@@ -1,4 +1,4 @@
-import { DataSet, Filters, IDataSet, IDataSetInfo, IDataSource, IMutField, IRow } from '../interfaces';
+import { DataSet, Filters, IDataSet, IDataSetInfo, IDataSource, IMutField, IRow, ISegmentKey } from '../interfaces';
 import { makeAutoObservable, observable, toJS } from 'mobx';
 import { transData } from '../dataSource/utils';
 import { extendCountField } from '../utils';
@@ -13,8 +13,9 @@ export class CommonStore {
     public showDSPanel: boolean = false;
     public showInsightBoard: boolean = false;
     public vizEmbededMenu: { show: boolean; position: [number, number] } = { show: false, position: [0, 0] };
-
+    public showDataConfig: boolean = false;
     public filters: Filters = {};
+    public segmentKey: ISegmentKey = ISegmentKey.vis;
     constructor () {
         this.datasets = [];
         this.dataSources = [];
@@ -44,9 +45,15 @@ export class CommonStore {
             dataSource: []
         }
     }
+    public setSegmentKey (sk: ISegmentKey) {
+        this.segmentKey = sk;
+    }
     public setShowDSPanel (show: boolean) {
         this.showDSPanel = show;
     }
+    public setShowDataConfig (show: boolean) {
+        this.showDataConfig = show;
+    }
     public setShowInsightBoard (show: boolean) {
         this.showInsightBoard = show;
     }
@@ -66,6 +73,25 @@ export class CommonStore {
         this.tmpDSRawFields = fields;
     }
 
+    public updateCurrentDatasetMetas (fid: string, diffMeta: Partial<IMutField>) {
+        const dataset = this.datasets[this.dsIndex];
+        const field = dataset.rawFields.find(f => f.fid === fid);
+        if (field) {
+            for (let mk in diffMeta) {
+                field[mk] = diffMeta[mk];
+            }
+        }
+    }
+
+    public updateTempDatasetMetas (fid: string, diffMeta: Partial<IMutField>) {
+        const field = this.tmpDSRawFields.find(f => f.fid === fid);
+        if (field) {
+            for (let mk in diffMeta) {
+                field[mk] = diffMeta[mk];
+            }
+        }
+    }
+
     public updateTempFieldAnalyticType (fieldKey: string, analyticType: IMutField['analyticType']) {
         const field = this.tmpDSRawFields.find(f => f.fid === fieldKey);
         if (field) {