@kanaries/graphic-walker 0.3.16 → 0.4.0

package/src/lib/interfaces.ts

@@ -28,4 +28,5 @@ export interface IBinQuery {
 
 export interface IRawQuery {
     op: 'raw';
+    fields: string[];
 }

package/src/lib/op/aggregate.ts

@@ -37,7 +37,7 @@ export function aggregate (data: IRow[], query: IAggQuery): IRow[] {
             aggRow[k] = subGroup[0][k];
         }
         for (let mea of measures) {
-            const aggMeaKey = getMeaAggKey(mea.field, mea.agg);
+            const aggMeaKey = mea.asFieldKey || getMeaAggKey(mea.field, mea.agg);
             if (aggRow[aggMeaKey] === undefined) {
                 aggRow[aggMeaKey] = 0;
             }

package/src/lib/viewQuery.ts

@@ -1,4 +1,4 @@
-import { IField, IRow } from "../interfaces";
+import { 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: IField[], query: IViewQuery) {
+export function queryView (rawData: IRow[], query: IViewQuery) {
     switch (query.op) {
         case 'aggregate':
             return aggregate(rawData, query);

package/src/locales/en-US.json

@@ -3,7 +3,15 @@
         "format": "Format",
         "numberFormat": "Number format",
         "timeFormat": "Time format",
-        "normalizedNumberFormat": "Normalized number format"
+        "normalizedNumberFormat": "Normalized number format",
+        "background": "Background",        
+        "color":"Color",
+        "independence": "Independence",
+        "x": "x-Axis",
+        "y": "y-Axis",
+        "zeroScale": "Zero Scale",
+        "formatGuidesDocs": "Format guides docs",
+        "readHere": "read here"
     },
     "constant": {
         "row_count": "Row count",
@@ -37,7 +45,8 @@
             "__enum__": "Stack Mode",
             "none": "None",
             "stack": "Stack",
-            "normalize": "Normalize"
+            "normalize": "Normalize",
+            "center": "Center"
         },
         "layout_type": {
             "__enum__": "Layout Mode",

package/src/locales/ja-JP.json

@@ -3,7 +3,15 @@
         "format": "形式",
         "numberFormat": "数字の形式",
         "timeFormat": "時間の形式",
-        "normalizedNumberFormat": "正規化された数字の形式"
+        "normalizedNumberFormat": "正規化された数字の形式",
+        "background": "背景",
+        "color":"色",
+        "independence": "独立性",
+        "x": "x軸",
+        "y": "y軸",
+        "zeroScale": "ゼロ目盛",
+        "formatGuidesDocs": "フォーマットガイド",
+        "readHere": "ここを読む"
     },
     "constant": {
         "row_count": "行数",
@@ -37,7 +45,8 @@
             "__enum__": "スタックモード",
             "none": "なし",
             "stack": "スタック",
-            "normalize": "正規化"
+            "normalize": "正規化",
+            "center": "中央"
         },
         "layout_type": {
             "__enum__": "レイアウトタイプ",

package/src/locales/zh-CN.json

@@ -3,7 +3,15 @@
         "format": "格式",
         "numberFormat": "数字格式",
         "timeFormat": "时间格式",
-        "normalizedNumberFormat": "标准化数字格式"
+        "normalizedNumberFormat": "标准化数字格式",
+        "background": "背景",
+        "color":"颜色",
+        "independence": "独立性",
+        "x": "x轴",
+        "y": "y轴",
+        "zeroScale": "零刻度",
+        "formatGuidesDocs": "格式指南",
+        "readHere": "阅读此处"
     },
     "constant": {
         "row_count": "行数",
@@ -54,7 +62,8 @@
             "__enum__": "堆叠模式",
             "none": "关闭",
             "stack": "堆叠",
-            "normalize": "归一化"
+            "normalize": "归一化",
+            "center": "中央"
         },
         "draggable_key": {
             "fields": "字段",

package/src/main.tsx

@@ -5,4 +5,4 @@ if (!import.meta.env.DEV) {
     inject();
 }
 
-embedGraphicWalker(document.getElementById('root') as HTMLElement)
+embedGraphicWalker(document.getElementById('root') as HTMLElement, {})

package/src/renderer/hooks.ts

@@ -1,30 +1,39 @@
 import { useState, useEffect, useMemo, useRef } from 'react';
 import { unstable_batchedUpdates } from 'react-dom';
-import type { DeepReadonly, IFilterField, IRow, IViewField } from '../interfaces';
-import { applyFilter, applySort, applyViewQuery, transformDataService } from '../services';
-import { getMeaAggKey } from '../utils';
+import type { DeepReadonly, IFilterField, IRow, IViewField, IDataQueryWorkflowStep, IComputationFunction } from '../interfaces';
+import { useGlobalStore } from '../store';
 import { useAppRootContext } from '../components/appRoot';
+import { toWorkflow } from '../utils/workflow';
+import { dataQueryClient } from '../computation/clientComputation';
+import { dataQueryServer } from '../computation/serverComputation';
 import { useDebounceValue } from '../hooks';
 
+export const useComputationFunc = (): IComputationFunction => {
+    const { vizStore } = useGlobalStore();
+    return vizStore.computationFuction;
+};
+
 interface UseRendererProps {
-    data: IRow[];
     allFields: Omit<IViewField, 'dragId'>[];
-    viewDimensions: IViewField[];
-    viewMeasures: IViewField[];
+    viewDimensions: Omit<IViewField, 'dragId'>[];
+    viewMeasures: Omit<IViewField, 'dragId'>[];
     filters: readonly DeepReadonly<IFilterField>[];
     defaultAggregated: boolean;
     sort: 'none' | 'ascending' | 'descending';
     limit: number;
+    computationFunction: IComputationFunction;
 }
 
 interface UseRendererResult {
     viewData: IRow[];
     loading: boolean;
+    parsed: {
+        workflow: IDataQueryWorkflowStep[];
+    };
 }
 
 export const useRenderer = (props: UseRendererProps): UseRendererResult => {
     const {
-        data,
         allFields,
         viewDimensions,
         viewMeasures,
@@ -32,86 +41,111 @@ export const useRenderer = (props: UseRendererProps): UseRendererResult => {
         defaultAggregated,
         sort,
         limit: storeLimit,
+        computationFunction,
     } = props;
     const [computing, setComputing] = useState(false);
     const taskIdRef = useRef(0);
 
     const limit = useDebounceValue(storeLimit);
 
+    const workflow = useMemo(() => {
+        return toWorkflow(
+            filters,
+            allFields,
+            viewDimensions,
+            viewMeasures,
+            defaultAggregated,
+            sort,
+            limit > 0 ? limit : undefined
+        );
+    }, [filters, allFields, viewDimensions, viewMeasures, defaultAggregated, sort, limit]);
+
     const [viewData, setViewData] = useState<IRow[]>([]);
+    const [parsedWorkflow, setParsedWorkflow] = useState<IDataQueryWorkflowStep[]>([]);
 
     const appRef = useAppRootContext();
 
+    // useEffect(() => {
+    //     if (computationMode !== 'client') {
+    //         return;
+    //     }
+    //     if (!data) {
+    //         console.warn('useRenderer error: prop `data` is required for "client" mode, but none is found.');
+    //         return;
+    //     }
+    //     if (!allFields) {
+    //         console.warn('useRenderer error: prop `fields` is required for "client" mode, but none is found.');
+    //         return;
+    //     }
+    //     const taskId = ++taskIdRef.current;
+    //     appRef.current?.updateRenderStatus('computing');
+    //     setComputing(true);
+    //     dataQueryClient(data, allFields, workflow).then(data => {
+    //         if (taskId !== taskIdRef.current) {
+    //             return;
+    //         }
+    //         appRef.current?.updateRenderStatus('rendering');
+    //         unstable_batchedUpdates(() => {
+    //             setComputing(false);
+    //             setViewData(data);
+    //             setParsedWorkflow(workflow);
+    //         });
+    //     }).catch((err) => {
+    //         if (taskId !== taskIdRef.current) {
+    //             return;
+    //         }
+    //         appRef.current?.updateRenderStatus('error');
+    //         console.error(err);
+    //         unstable_batchedUpdates(() => {
+    //             setComputing(false);
+    //             setViewData([]);
+    //             setParsedWorkflow([]);
+    //         });
+    //     });
+    //     return () => {
+    //         taskIdRef.current++;
+    //     };
+    // }, [computationMode, data, allFields, workflow]);
+
     useEffect(() => {
         const taskId = ++taskIdRef.current;
         appRef.current?.updateRenderStatus('computing');
         setComputing(true);
-        applyFilter(data, filters)
-            .then((data) => {
-                if (viewDimensions.length === 0 && viewMeasures.length === 0) {
-                    return data;
-                }
-                return transformDataService(data, allFields);
-            })
-            .then((d) => {
-                if (viewDimensions.length === 0 && viewMeasures.length === 0) {
-                    return data;
-                }
-                // setViewData(d);
-                const dims = viewDimensions;
-                const meas = viewMeasures;
-                return applyViewQuery(d, dims.concat(meas), {
-                    op: defaultAggregated ? 'aggregate' : 'raw',
-                    groupBy: dims.map((f) => f.fid),
-                    measures: meas.map((f) => ({
-                        field: f.fid,
-                        agg: f.aggName as any,
-                        asFieldKey: getMeaAggKey(f.fid, f.aggName!),
-                    })),
-                });
-            })
-            .then((data) => {
-                if (limit > 0 && sort !== 'none' && viewMeasures.length > 0) {
-                    return applySort(data, viewMeasures, sort);
-                }
-                return data;
-            })
-            .then((data) => {
-                if (limit > 0) {
-                    return data.slice(0, limit);
-                }
-                return data;
-            })
-            .then((data) => {
-                if (taskId !== taskIdRef.current) {
-                    return;
-                }
-                appRef.current?.updateRenderStatus('rendering');
-                unstable_batchedUpdates(() => {
-                    setComputing(false);
-                    setViewData(data);
-                });
-            })
-            .catch((err) => {
-                if (taskId !== taskIdRef.current) {
-                    return;
-                }
-                appRef.current?.updateRenderStatus('error');
-                console.error(err);
-                unstable_batchedUpdates(() => {
-                    setComputing(false);
-                    setViewData([]);
-                });
+        dataQueryServer(computationFunction, workflow, limit > 0 ? limit : undefined).then(data => {
+            if (taskId !== taskIdRef.current) {
+                return;
+            }
+            appRef.current?.updateRenderStatus('rendering');
+            unstable_batchedUpdates(() => {
+                setComputing(false);
+                setViewData(data);
+                setParsedWorkflow(workflow);
             });
-        return () => {
-            taskIdRef.current++;
+        }).catch((err) => {
+            if (taskId !== taskIdRef.current) {
+                return;
+            }
+            appRef.current?.updateRenderStatus('error');
+            console.error(err);
+            unstable_batchedUpdates(() => {
+                setComputing(false);
+                setViewData([]);
+                setParsedWorkflow([]);
+            });
+        });
+    }, [computationFunction, workflow]);
+
+    const parseResult = useMemo(() => {
+        return {
+            workflow: parsedWorkflow,
         };
-    }, [data, filters, viewDimensions, viewMeasures, defaultAggregated, limit]);
+    }, [parsedWorkflow]);
 
     return useMemo(() => {
         return {
             viewData,
             loading: computing,
+            parsed: parseResult,
         };
     }, [viewData, computing]);
 };

package/src/renderer/index.tsx

@@ -1,25 +1,28 @@
 import { observer } from 'mobx-react-lite';
 import React, { useState, useEffect, forwardRef, useRef, useCallback } from 'react';
-import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig } from '../interfaces';
+import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig, IComputationFunction } from '../interfaces';
+import { useTranslation } from 'react-i18next';
 import SpecRenderer from './specRenderer';
 import { runInAction, toJS } from 'mobx';
 import { useGlobalStore } from '../store';
 import { IReactVegaHandler } from '../vis/react-vega';
 import { unstable_batchedUpdates } from 'react-dom';
 import { useRenderer } from './hooks';
-import { initEncoding, initVisualConfig } from '../store/visualSpecStore';
+import { initEncoding } from '../store/visualSpecStore';
 import { useChartIndexControl } from '../utils/chartIndexControl';
+import { initVisualConfig } from '../utils/save';
 
 interface RendererProps {
     themeKey?: IThemeKey;
     dark?: IDarkMode;
+    computationFunction: IComputationFunction;
 }
 /**
  * Renderer of GraphicWalker editor.
  * Depending on global store.
  */
 const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, ref) {
-    const { themeKey, dark } = props;
+    const { themeKey, dark, computationFunction } = props;
     const { vizStore, commonStore } = useGlobalStore();
     const {
         allFields,
@@ -34,15 +37,14 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
         limit,
     } = vizStore;
     const chart = visList[visIndex];
-    const { currentDataset } = commonStore;
-    const { dataSource } = currentDataset;
+
+    const { i18n } = useTranslation();
 
     const [viewConfig, setViewConfig] = useState<IVisualConfig>(initVisualConfig);
     const [encodings, setEncodings] = useState<DeepReadonly<DraggableFieldState>>(initEncoding);
     const [viewData, setViewData] = useState<IRow[]>([]);
 
     const { viewData: data, loading: waiting } = useRenderer({
-        data: dataSource,
         allFields,
         viewDimensions,
         viewMeasures,
@@ -50,6 +52,7 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
         defaultAggregated: visualConfig.defaultAggregated,
         sort,
         limit: limit,
+        computationFunction,
     });
 
     // Dependencies that should not trigger effect individually
@@ -107,6 +110,7 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
             ref={ref}
             themeKey={themeKey}
             dark={dark}
+            locale={i18n.language}
             draggableFieldState={encodings}
             visualConfig={viewConfig}
             onGeomClick={handleGeomClick}

package/src/renderer/pureRenderer.tsx

@@ -4,28 +4,53 @@ import { toJS } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { ShadowDom } from '../shadow-dom';
 import { withAppRoot } from '../components/appRoot';
-import type { IDarkMode, IViewField, IRow, IThemeKey, DraggableFieldState, IVisualConfig } from '../interfaces';
+import type {
+    IDarkMode,
+    IViewField,
+    IRow,
+    IThemeKey,
+    DraggableFieldState,
+    IVisualConfig,
+    IComputationFunction,
+} from '../interfaces';
 import type { IReactVegaHandler } from '../vis/react-vega';
 import SpecRenderer from './specRenderer';
 import { useRenderer } from './hooks';
+import { getComputation } from '../computation/clientComputation';
 
-interface IPureRendererProps {
-    name?: string;
-    themeKey?: IThemeKey;
-    dark?: IDarkMode;
-    rawData?: IRow[];
-    visualState: DraggableFieldState;
-    visualConfig: IVisualConfig;
-    sort?: 'none' | 'ascending' | 'descending';
-    limit?: number;
-}
+type IPureRendererProps =
+    | {
+          name?: string;
+          themeKey?: IThemeKey;
+          dark?: IDarkMode;
+          visualState: DraggableFieldState;
+          visualConfig: IVisualConfig;
+          sort?: 'none' | 'ascending' | 'descending';
+          limit?: number;
+          locale?: string;
+      } & (
+          | {
+                type: 'remote',
+                computation: IComputationFunction;
+            }
+          | {
+                type?: 'local'
+                rawData: IRow[];
+            }
+      );
 
 /**
  * Render a readonly chart with given visualization schema.
  * This is a pure component, which means it will not depend on any global state.
  */
 const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function PureRenderer(props, ref) {
-    const { name, themeKey, dark, rawData, visualState, visualConfig, sort, limit } = props;
+    const { name, themeKey, dark, visualState, visualConfig, type, locale, sort, limit } = props;
+    const computation = useMemo(() => {
+        if (props.type === 'remote') {
+            return props.computation;
+        }
+        return getComputation(props.rawData);
+    }, [props.type, props.type === 'remote' ? props.computation: props.rawData])
     const defaultAggregated = visualConfig?.defaultAggregated ?? false;
 
     const [viewData, setViewData] = useState<IRow[]>([]);
@@ -52,7 +77,6 @@ const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function
     }, [visualState]);
 
     const { viewData: data, loading: waiting } = useRenderer({
-        data: rawData ?? [],
         allFields,
         viewDimensions,
         viewMeasures,
@@ -60,6 +84,7 @@ const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function
         defaultAggregated,
         sort: sort ?? 'none',
         limit: limit ?? -1,
+        computationFunction: computation,
     });
 
     // Dependencies that should not trigger effect individually
@@ -86,10 +111,11 @@ const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function
                     dark={dark}
                     draggableFieldState={visualState}
                     visualConfig={visualConfig}
+                    locale={locale ?? 'en-US'}
                 />
             </div>
         </ShadowDom>
     );
 });
 
-export default observer(withAppRoot(PureRenderer));
+export default observer(withAppRoot<IPureRendererProps>(PureRenderer));

package/src/renderer/specRenderer.tsx

@@ -19,17 +19,18 @@ interface SpecRendererProps {
     visualConfig: DeepReadonly<IVisualConfig>;
     onGeomClick?: ((values: any, e: any) => void) | undefined;
     onChartResize?: ((width: number, height: number) => void) | undefined;
+    locale?: string;
 }
 /**
  * Sans-store renderer of GraphicWalker.
  * This is a pure component, which means it will not depend on any global state.
  */
 const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
-    { name, themeKey, dark, data, loading, draggableFieldState, visualConfig, onGeomClick, onChartResize },
+    { name, themeKey, dark, data, loading, draggableFieldState, visualConfig, onGeomClick, onChartResize, locale },
     ref
 ) {
     // const { draggableFieldState, visualConfig } = vizStore;
-    const { geoms, interactiveScale, defaultAggregated, stack, showActions, size, format: _format, zeroScale } = visualConfig;
+    const { geoms, interactiveScale, defaultAggregated, stack, showActions, size, format: _format, background, zeroScale, resolve } = visualConfig;
 
     const rows = draggableFieldState.rows;
     const columns = draggableFieldState.columns;
@@ -41,7 +42,7 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
     const sizeChannel = draggableFieldState.size;
     const details = draggableFieldState.details;
     const text = draggableFieldState.text;
-    const format = toJS(_format)
+    const format = toJS(_format);
 
     const rowLeftFacetFields = useMemo(() => rows.slice(0, -1).filter((f) => f.analyticType === 'dimension'), [rows]);
     const colLeftFacetFields = useMemo(
@@ -59,8 +60,9 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
 
     const vegaConfig = useMemo<VegaGlobalConfig>(() => {
         const config: VegaGlobalConfig = {
-          ...themeConfig,
-        }
+            ...themeConfig,
+            background: mediaTheme === 'dark' ? '#18181f' : '#ffffff',
+        };
         if (format.normalizedNumberFormat && format.normalizedNumberFormat.length > 0) {
             // @ts-ignore
             config.normalizedNumberFormat = format.normalizedNumberFormat;
@@ -79,9 +81,23 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
             config.scale = {};
         }
         // @ts-ignore
-        config.scale.zero = Boolean(zeroScale)
+        config.scale.zero = Boolean(zeroScale);
+        // @ts-ignore
+        config.resolve = resolve;
+        if (background) {
+            config.background = background;
+        }
+
         return config;
-      }, [themeConfig, zeroScale, format.normalizedNumberFormat, format.numberFormat, format.timeFormat])
+    }, [
+        themeConfig,
+        zeroScale,
+        resolve,
+        background,
+        format.normalizedNumberFormat,
+        format.numberFormat,
+        format.timeFormat,
+    ]);
 
     if (isPivotTable) {
         return (
@@ -148,6 +164,7 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
                 height={size.height - 12 * 4}
                 ref={ref}
                 onGeomClick={onGeomClick}
+                locale={locale}
             />
         </Resizable>
     );

package/src/services.ts

@@ -1,5 +1,5 @@
 import { toJS } from 'mobx';
-import { IRow, IMutField, IField, IFilterField, Specification, IViewField } from './interfaces';
+import { IRow, IMutField, Specification, IFilterFiledSimple, IExpression } from './interfaces';
 /* eslint import/no-webpack-loader-syntax:0 */
 // @ts-ignore
 // eslint-disable-next-line
@@ -108,7 +108,7 @@ interface PreAnalysisParams {
 let filterWorker: Worker | null = null;
 let filterWorkerAutoTerminator: NodeJS.Timeout | null = null;
 
-export const applyFilter = async (data: IRow[], filters: readonly IFilterField[]): Promise<IRow[]> => {
+export const applyFilter = async (data: IRow[], filters: readonly IFilterFiledSimple[]): Promise<IRow[]> => {
     if (filters.length === 0) return data;
     if (filterWorkerAutoTerminator !== null) {
         clearTimeout(filterWorkerAutoTerminator);
@@ -142,13 +142,13 @@ export const applyFilter = async (data: IRow[], filters: readonly IFilterField[]
     }
 };
 
-export const transformDataService = async (data: IRow[], columns: IField[]): Promise<IRow[]> => {
-    if (columns.length === 0 || data.length === 0) return data;
+export const transformDataService = async (data: IRow[], trans: { key: string, expression: IExpression }[]): Promise<IRow[]> => {
+    if (data.length === 0) return data;
     const worker = new TransformDataWorker();
     try {
         const res: IRow[] = await workerService(worker, {
             dataSource: data,
-            columns: toJS(columns),
+            trans,
         });
         return res;
     } catch (error) {
@@ -158,12 +158,11 @@ export const transformDataService = async (data: IRow[], columns: IField[]): Pro
     }
 };
 
-export const applyViewQuery = async (data: IRow[], metas: IField[], query: IViewQuery): Promise<IRow[]> => {
+export const applyViewQuery = async (data: IRow[], query: IViewQuery): Promise<IRow[]> => {
     const worker = new ViewQueryWorker();
     try {
         const res: IRow[] = await workerService(worker, {
             dataSource: data,
-            metas: toJS(metas),
             query: toJS(query),
         });
         return res;
@@ -176,7 +175,7 @@ export const applyViewQuery = async (data: IRow[], metas: IField[], query: IView
 
 export const applySort = async (
     data: IRow[],
-    viewMeasures: IField[],
+    viewMeasures: string[],
     sort: 'ascending' | 'descending'
 ): Promise<IRow[]> => {
     const worker = new SortWorker();

package/src/store/commonStore.ts

@@ -147,14 +147,14 @@ export class CommonStore {
         this.initTempDS();
         this.showDSPanel = true;
     }
-    public addAndUseDS(dataset: IDataSetInfo) {
-        const datasetId = this.addDS(dataset);
+    public addAndUseDS(dataset: IDataSetInfo, datasetId?: string | undefined) {
+        const id = this.addDS(dataset, datasetId);
         this.dsIndex = this.datasets.length - 1;
-        return datasetId
+        return id
     }
-    public addDS(dataset: IDataSetInfo) {
+    public addDS(dataset: IDataSetInfo, datasetId?: string | undefined) {
         const timestamp = new Date().getTime();
-        const dataSetId = `dst-${timestamp}`
+        const dataSetId = datasetId || `dst-${timestamp}`
         const dataSourceId = `dse-${timestamp}`;
         this.dataSources.push({
             id: dataSourceId,
@@ -166,12 +166,12 @@ export class CommonStore {
             rawFields: dataset.rawFields,
             dsId: dataSourceId
         })
-        return dataSetId;
+        return dataSourceId;
     }
     public removeDS(datasetId: string) {
         const datasetIndex = this.datasets.findIndex(d => d.id === datasetId);
         if (datasetIndex > -1) {
-            const dataSourceId = this.datasets[datasetIndex].dsId;
+            const dataSourceId = this.datasets[datasetIndex].id;
             const dataSourceIndex = this.dataSources.findIndex(d => d.id === dataSourceId);
             this.dataSources.splice(dataSourceIndex, 1);
             this.datasets.splice(datasetIndex, 1);