@kanaries/graphic-walker 0.2.11 → 0.2.12

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { EditorProps } from './App';
+import { IGWProps } from './App';
 import './empty_sheet.css';
 export declare const ShadowDomContext: React.Context<{
     root: ShadowRoot | null;
 }>;
-export declare const GraphicWalker: React.FC<EditorProps>;
+export declare const GraphicWalker: React.FC<IGWProps>;

package/dist/interfaces.d.ts

@@ -22,6 +22,14 @@ export interface IMutField {
     semanticType: ISemanticType;
     analyticType: IAnalyticType;
 }
+export interface IUncertainMutField {
+    fid: string;
+    key?: string;
+    name?: string;
+    disable?: boolean;
+    semanticType: ISemanticType | '?';
+    analyticType: IAnalyticType | '?';
+}
 export interface IField {
     /**
      * fid: key in data record

package/dist/lib/inferMeta.d.ts

@@ -0,0 +1,20 @@
+import { ISemanticType } from "visual-insights";
+import { IMutField, IRow, IUncertainMutField } from "../interfaces";
+/**
+ * check if this array is a date time array based on some common date format
+ * @param data string array
+ * @returns
+ */
+export declare function isDateTimeArray(data: string[]): boolean;
+/**
+ * 这里目前暂时包一层，是为了解耦具体的推断实现。后续这里要调整推断的逻辑。
+ * 需要讨论这一层是否和交互层有关，如果没有关系，这一层包裹可以不存在这里，而是在visual-insights中。
+ * @param data 原始数据
+ * @param fid 字段id
+ * @returns semantic type 列表
+ */
+export declare function inferSemanticType(data: IRow[], fid: string): ISemanticType;
+export declare function inferMeta(props: {
+    dataSource: IRow[];
+    fields: IUncertainMutField[];
+}): IMutField[];

package/dist/store/commonStore.d.ts

@@ -12,7 +12,6 @@ export declare class CommonStore {
         show: boolean;
         position: [number, number];
     };
-    rootContainer: HTMLDivElement | null;
     filters: Filters;
     constructor();
     get currentDataset(): DataSet;
@@ -23,6 +22,7 @@ export declare class CommonStore {
     initTempDS(): void;
     updateTempFields(fields: IMutField[]): void;
     updateTempFieldAnalyticType(fieldKey: string, analyticType: IMutField['analyticType']): void;
+    updateTempFieldSemanticType(fieldKey: string, semanticType: IMutField['semanticType']): void;
     updateTempName(name: string): void;
     updateTempDS(rawData: IRow[]): void;
     updateTempSTDDS(dataset: IDataSetInfo): void;

package/dist/store/index.d.ts

@@ -9,7 +9,6 @@ export declare function destroyGWStore(): void;
 export declare function rebootGWStore(): void;
 interface StoreWrapperProps {
     keepAlive?: boolean;
-    rootContainer?: HTMLDivElement | null;
 }
 export declare class StoreWrapper extends React.Component<StoreWrapperProps> {
     constructor(props: StoreWrapperProps);

package/dist/store/visualSpecStore.d.ts

@@ -83,13 +83,13 @@ export declare class VizSpecStore {
     initMetaState(dataset: DataSet): void;
     clearState(): void;
     setVisualConfig<K extends keyof IVisualConfig>(configKey: K, value: IVisualConfig[K]): void;
-    transformCoord(coord: 'cartesian' | 'polar'): void;
+    transformCoord(coord: "cartesian" | "polar"): void;
     setChartLayout(props: {
-        mode: IVisualConfig['size']['mode'];
+        mode: IVisualConfig["size"]["mode"];
         width?: number;
         height?: number;
     }): void;
-    setExploration(value: Partial<IVisualConfig['exploration']>): void;
+    setExploration(value: Partial<IVisualConfig["exploration"]>): void;
     reorderField(stateKey: keyof DraggableFieldState, sourceIndex: number, destinationIndex: number): void;
     moveField(sourceKey: keyof DraggableFieldState, sourceIndex: number, destinationKey: keyof DraggableFieldState, destinationIndex: number): void;
     removeField(sourceKey: keyof DraggableFieldState, sourceIndex: number): void;
@@ -102,8 +102,8 @@ export declare class VizSpecStore {
     createLogField(stateKey: keyof DraggableFieldState, index: number): void;
     setFieldAggregator(stateKey: keyof DraggableFieldState, index: number, aggName: string): void;
     get sortCondition(): boolean;
-    setFieldSort(stateKey: keyof DraggableFieldState, index: number, sortType: 'none' | 'ascending' | 'descending'): void;
-    applyDefaultSort(sortType?: 'none' | 'ascending' | 'descending'): void;
+    setFieldSort(stateKey: keyof DraggableFieldState, index: number, sortType: "none" | "ascending" | "descending"): void;
+    applyDefaultSort(sortType?: "none" | "ascending" | "descending"): void;
     appendField(destinationKey: keyof DraggableFieldState, field: IViewField | undefined): void;
     renderSpec(spec: Specification): void;
     destroy(): void;

package/dist/utils/dataPrep.d.ts

@@ -0,0 +1,6 @@
+import { IRow } from "visual-insights";
+import { IMutField } from "../interfaces";
+export declare function guardDataKeys(data: IRow[], metas: IMutField[]): {
+    safeData: IRow[];
+    safeMetas: IMutField[];
+};

package/dist/utils/index.d.ts

@@ -1,4 +1,4 @@
-import { IRow, Filters, IMutField } from '../interfaces';
+import { IRow, Filters, IMutField } from "../interfaces";
 export declare function checkMajorFactor(data: IRow[], childrenData: Map<any, IRow[]>, dimensions: string[], measures: string[]): {
     majorKey: string;
     majorSum: number;
@@ -9,7 +9,7 @@ export declare function checkChildOutlier(data: IRow[], childrenData: Map<any, I
 };
 export interface IPredicate {
     key: string;
-    type: 'discrete' | 'continuous';
+    type: "discrete" | "continuous";
     range: Set<any> | [number, number];
 }
 export declare function getPredicates(selection: IRow[], dimensions: string[], measures: string[]): IPredicate[];

package/dist/utils/normalization.d.ts

@@ -1,4 +1,4 @@
-import { IRow } from '../interfaces';
+import { IRow } from "../interfaces";
 export declare function normalizeWithParent(data: IRow[], parentData: IRow[], measures: string[], syncScale: boolean): {
     normalizedData: IRow[];
     normalizedParentData: IRow[];

package/dist/utils/save.d.ts

@@ -4,9 +4,9 @@ export declare function dumpsGWPureSpec(list: VisSpecWithHistory[]): IVisSpec[];
 export declare function parseGWPureSpec(list: IVisSpec[]): VisSpecWithHistory[];
 interface IStoInfo {
     datasets: IDataSet[];
-    specList: ({
-        [K in keyof IVisSpec]: K extends 'config' ? Partial<IVisSpec[K]> : IVisSpec[K];
-    })[];
+    specList: {
+        [K in keyof IVisSpec]: K extends "config" ? Partial<IVisSpec[K]> : IVisSpec[K];
+    }[];
     dataSources: IDataSource[];
 }
 export declare function stringifyGWContent(info: IStoInfo): string;

package/dist/utils/throttle.d.ts

@@ -1,5 +1,5 @@
 declare const throttle: (fn: () => void, time: number, options?: Partial<{
     leading: boolean;
     trailing: boolean;
-}>) => () => void;
+}>) => (() => void);
 export default throttle;

package/dist/vis/temporalFormat.d.ts

@@ -0,0 +1,10 @@
+export declare function getVegaTimeFormatRules(lang: string): {
+    dateTime: string;
+    date: string;
+    time: string;
+    periods: string[];
+    days: string[];
+    shortDays: string[];
+    months: string[];
+    shortMonths: string[];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",

package/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, useMemo } from "react";
 import { Specification } from "visual-insights";
 import { observer } from "mobx-react-lite";
 import { LightBulbIcon } from "@heroicons/react/24/outline";
@@ -20,9 +20,9 @@ import { preAnalysis, destroyWorker } from "./services";
 import VisNav from "./segments/visNav";
 import { mergeLocaleRes, setLocaleLanguage } from "./locales/i18n";
 import FilterField from "./fields/filterField";
-import PageNav from "./components/pageNav";
+import { guardDataKeys } from "./utils/dataPrep";
 
-export interface EditorProps {
+export interface IGWProps {
     dataSource?: IRow[];
     rawFields?: IMutField[];
     spec?: Specification;
@@ -30,11 +30,14 @@ export interface EditorProps {
     i18nLang?: string;
     i18nResources?: { [lang: string]: Record<string, string | any> };
     keepAlive?: boolean;
-    fixContainer?: boolean;
+    /**
+     * auto parse field key into a safe string. default is true
+     */
+    fieldKeyGuard?: boolean;
 }
 
-const App: React.FC<EditorProps> = (props) => {
-    const { dataSource = [], rawFields = [], spec, i18nLang = "en-US", i18nResources, hideDataSourceConfig } = props;
+const App: React.FC<IGWProps> = (props) => {
+    const { dataSource = [], rawFields = [], spec, i18nLang = "en-US", i18nResources, hideDataSourceConfig, fieldKeyGuard = true } = props;
     const { commonStore, vizStore } = useGlobalStore();
     const [insightReady, setInsightReady] = useState<boolean>(true);
 
@@ -55,16 +58,30 @@ const App: React.FC<EditorProps> = (props) => {
         }
     }, [i18nLang, curLang]);
 
+    const safeDataset = useMemo(() => {
+        let safeData = dataSource;
+        let safeMetas = rawFields;
+        if (fieldKeyGuard) {
+            const { safeData: _safeData, safeMetas: _safeMetas } = guardDataKeys(dataSource, rawFields);
+            safeData = _safeData;
+            safeMetas = _safeMetas;
+        }
+        return {
+            safeData,
+            safeMetas,
+        };
+    }, [rawFields, dataSource, fieldKeyGuard]);
+
     // use as an embeding module, use outside datasource from props.
     useEffect(() => {
-        if (dataSource.length > 0) {
+        if (safeDataset.safeData.length > 0 && safeDataset.safeMetas.length > 0) {
             commonStore.addAndUseDS({
                 name: "context dataset",
-                dataSource: dataSource,
-                rawFields,
+                dataSource: safeDataset.safeData,
+                rawFields: safeDataset.safeMetas,
             });
         }
-    }, [dataSource, rawFields]);
+    }, [safeDataset]);
 
     // do preparation analysis work when using a new dataset
     useEffect(() => {

package/src/components/button/base.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export interface ButtonBaseProps {
+    onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    text: string;
+    disabled?: boolean;
+}

package/src/components/button/default.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { ButtonBaseProps } from "./base";
+
+const DefaultButton: React.FC<ButtonBaseProps> = (props) => {
+    const { text, onClick, disabled } = props;
+    return (
+        <button
+            className="inline-block min-w-96 text-xs ml-2 pt-1 pb-1 pl-6 pr-6 border border-gray-500 rounded-sm hover:bg-gray-800 hover:border-gray-800 hover:text-white disabled:bg-gray-400 disabled:border-gray-400 disabled:text-white disabled:cursor-not-allowed disabled:text-white"
+            onClick={onClick}
+            disabled={disabled}
+        >
+            {text}
+        </button>
+    );
+};
+
+export default DefaultButton;

package/src/components/button/primary.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { ButtonBaseProps } from "./base";
+
+const PrimaryButton: React.FC<ButtonBaseProps> = (props) => {
+    const { text, onClick, disabled } = props;
+    return (
+        <button
+            className="inline-block min-w-96 text-xs ml-2 pt-1 pb-1 pl-6 pr-6 border border-gray-800 bg-gray-800 text-white rounded-sm hover:bg-white border-gray-800 hover:text-gray-800 cursor-pointer disabled:bg-gray-400 disabled:border-gray-400 disabled:text-white disabled:cursor-not-allowed disabled:text-white"
+            onClick={onClick}
+            disabled={disabled}
+        >
+            {text}
+        </button>
+    );
+};
+
+export default PrimaryButton;

package/src/dataSource/dataSelection/csvData.tsx

@@ -6,6 +6,8 @@ import styled from "styled-components";
 import { useGlobalStore } from "../../store";
 import { observer } from "mobx-react-lite";
 import { useTranslation } from "react-i18next";
+import DefaultButton from "../../components/button/default";
+import PrimaryButton from "../../components/button/primary";
 
 const Container = styled.div`
     overflow-x: auto;
@@ -44,25 +46,21 @@ const CSVData: React.FC<ICSVData> = (props) => {
                 }}
             />
             <div className="mt-1 mb-1">
-                <button
-                    className="inline-block min-w-96 text-xs mr-2 pt-1 pb-1 pl-6 pr-6 border border-gray-500 rounded-sm cursor-pointer hover:bg-gray-200"
+                <DefaultButton
                     onClick={() => {
                         if (fileRef.current) {
                             fileRef.current.click();
                         }
                     }}
-                >
-                    {t("open")}
-                </button>
-                <button
-                    className="inline-block min-w-96 text-xs mr-2 pt-1 pb-1 pl-6 pr-6 bg-black rounded-sm hover:bg-gray-500 text-white font-bold disabled:bg-gray-300"
+                    text={t("open")}
+                />
+                <PrimaryButton
+                    text={t("submit")}
                     disabled={tmpDataSource.length === 0}
                     onClick={() => {
                         onSubmitData();
                     }}
-                >
-                    {t("submit")}
-                </button>
+                />
             </div>
             <div className="my-2">
                 <label className="block text-xs text-gray-800 mb-1 font-bold">{t("dataset_name")}</label>

package/src/dataSource/dataSelection/publicData.tsx

@@ -4,6 +4,7 @@ import { DemoDataAssets, PUBLIC_DATA_LIST } from '../config'
 import { useGlobalStore } from '../../store';
 import { observer } from 'mobx-react-lite';
 import { useTranslation } from 'react-i18next';
+import PrimaryButton from '../../components/button/primary';
 
 
 interface IPublicDataProps {
@@ -43,12 +44,11 @@ const PublicData: React.FC<IPublicDataProps> = props => {
             }
         </div>
         <hr className="m-1" />
-        <button className="inline-block min-w-96 text-xs mr-2 pt-1 pb-1 pl-6 pr-6 bg-black rounded-sm hover:bg-gray-500 text-white font-bold disabled:bg-gray-300"
+        <PrimaryButton
             disabled={tmpDataSource.length === 0}
             onClick={() => { commonStore.commitTempDS() }}
-        >
-            {t('submit')}
-        </button>
+            text={t('submit')}
+        />
         <hr className="m-1" />
         <Table />
     </div>

package/src/dataSource/index.tsx

@@ -8,6 +8,7 @@ import { useGlobalStore } from '../store';
 import { download } from '../utils/save';
 import GwFile from './dataSelection/gwFile';
 import DataSelection from './dataSelection';
+import DefaultButton from '../components/button/default';
 
 interface DSSegmentProps {
     preWorkDone: boolean;
@@ -39,28 +40,25 @@ const DataSourceSegment: React.FC<DSSegmentProps> = props => {
             ))}
         </select>
 
-        <button className="inline-block min-w-96 text-xs ml-2 pt-1 pb-1 pl-6 pr-6 border border-gray-500 rounded-sm hover:bg-gray-200"
+        <DefaultButton
+            text={t('DataSource.buttons.create_dataset')}
             onClick={() => { commonStore.startDSBuildingTask() }}
-        >
-            {t('DataSource.buttons.create_dataset')}
-        </button>
-        <button className="inline-block min-w-96 text-xs ml-2 pt-1 pb-1 pl-6 pr-6 border border-gray-500 rounded-sm hover:bg-gray-200"
+        />
+        <DefaultButton
+            text={t('DataSource.buttons.export_as_file')}
             onClick={() => {
                 const res = vizStore.exportAsRaw();
                 download(res, 'graphic-walker-notebook.json', 'text/plain')
             }}
-        >
-            {t('DataSource.buttons.export_as_file')}
-        </button>
-        <button className="inline-block min-w-96 text-xs ml-2 pt-1 pb-1 pl-6 pr-6 border border-gray-500 rounded-sm hover:bg-gray-200"
+        />
+        <DefaultButton
+            text={t('DataSource.buttons.import_file')}
             onClick={() => {
                 if (gwFileRef.current) {
                     gwFileRef.current.click();
                 }
             }}
-        >
-            {t('DataSource.buttons.import_file')}
-        </button>
+        />
         {showDSPanel && (
             <Modal
                 title={t('DataSource.dialog.create_data_source')}

package/src/dataSource/table.tsx

@@ -36,16 +36,8 @@ const Container = styled.div`
         }
     }
 `;
-const TYPE_LIST = [
-    {
-        value: "dimension",
-        label: "维度",
-    },
-    {
-        value: "measure",
-        label: "度量",
-    },
-];
+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';
 // }
@@ -79,9 +71,16 @@ const Table: React.FC<TableProps> = (props) => {
     const { t } = useTranslation();
 
     const analyticTypeList = useMemo<{ value: string; label: string }[]>(() => {
-        return TYPE_LIST.map((at) => ({
-            value: at.value,
-            label: t(`constant.analytic_type.${at.value}`),
+        return ANALYTIC_TYPE_LIST.map((at) => ({
+            value: at,
+            label: t(`constant.analytic_type.${at}`),
+        }));
+    }, []);
+
+    const semanticTypeList = useMemo<{ value: string; label: string }[]>(() => {
+        return SEMANTIC_TYPE_LIST.map((st) => ({
+            value: st,
+            label: t(`constant.semantic_type.${st}`),
         }));
     }, []);
 
@@ -121,13 +120,27 @@ const Table: React.FC<TableProps> = (props) => {
                                             ))}
                                         </select>
                                     </div>
-                                    <div
-                                        className={
-                                            "inline-block px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs text-white " +
-                                            getSemanticColors(field)
-                                        }
-                                    >
-                                        {field.semanticType}
+                                    <div>
+                                    <select
+                                            className={
+                                                "inline-block px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs text-white " +
+                                                getSemanticColors(field)
+                                            }
+                                            // className="border-b border-gray-200 bg-gray-50 pl-0 mt-2 font-light"
+                                            value={field.semanticType}
+                                            onChange={(e) => {
+                                                commonStore.updateTempFieldSemanticType(
+                                                    field.fid,
+                                                    e.target.value as IMutField["semanticType"]
+                                                );
+                                            }}
+                                        >
+                                            {semanticTypeList.map((type) => (
+                                                <option key={type.value} value={type.value}>
+                                                    {type.label}
+                                                </option>
+                                            ))}
+                                        </select>
                                     </div>
                                 </div>
                             </th>

package/src/dataSource/utils.ts

@@ -1,47 +1,42 @@
-import { IRow, IMutField } from '../interfaces';
-import { Insight } from 'visual-insights';
+import { IRow, IMutField } from "../interfaces";
+import { inferMeta } from "../lib/inferMeta";
+import { guardDataKeys } from "../utils/dataPrep";
 
 export function transData(dataSource: IRow[]): {
     dataSource: IRow[];
-    fields: IMutField[]
+    fields: IMutField[];
 } {
-    if (dataSource.length === 0) return {
-        dataSource: [],
-        fields: []
-    };
-    let ans: IRow[] = [];
+    if (dataSource.length === 0) {
+        return {
+            dataSource: [],
+            fields: [],
+        };
+    }
     const keys = Object.keys(dataSource[0]);
-    // TODO: 冗余设计，单变量统计被进行了多次重复计算。另外对于这种不完整的分析任务，不建议使用VIEngine。
-    const vie = new Insight.VIEngine();
-    vie.setData(dataSource)
-        .setFields(keys.map(k => ({
+    const metas = inferMeta({
+        dataSource,
+        fields: keys.map((k) => ({
+            fid: k,
             key: k,
-            analyticType: '?',
-            dataType: '?',
-            semanticType: '?'
-        })))
-    // TODO: 结合上面的TODO，讨论，VIEngine是否要提供不需要进行univarSelection就提供summary的接口。
-    // 这里我们使用了一种非原API设计时期待的用法，即强制指定单变量选择时要全选字段。但我们无法阻止对变量的转换。
-    vie.univarSelection('percent', 1);
-    const fields = vie.fields;
-    for (let record of dataSource) {
+            analyticType: "?",
+            semanticType: "?",
+        })),
+    });
+    const { safeData, safeMetas } = guardDataKeys(dataSource, metas);
+    const finalData: IRow[] = [];
+    for (let record of safeData) {
         const newRecord: IRow = {};
-        for (let field of fields) {
-            if (field.dataType === 'number' || field.dataType === 'integer') {
-                newRecord[field.key] = Number(record[field.key])
+        for (let field of safeMetas) {
+            if (field.semanticType === "quantitative") {
+                newRecord[field.fid] = Number(record[field.fid]);
             } else {
-                newRecord[field.key] = record[field.key]
+                newRecord[field.fid] = record[field.fid];
             }
         }
-        ans.push(newRecord);
+        finalData.push(newRecord);
     }
     return {
-        dataSource: ans,
-        fields: fields.map(f => ({
-            fid: f.key,
-            analyticType: f.analyticType,
-            dataType: f.dataType,
-            semanticType: f.semanticType
-        }))
-    }
-}
+        dataSource: finalData,
+        fields: safeMetas
+    };
+}

package/src/fields/datasetFields/dimFields.tsx

@@ -4,22 +4,18 @@ import { observer } from 'mobx-react-lite';
 import { useGlobalStore } from '../../store';
 import DataTypeIcon from '../../components/dataTypeIcon';
 import { FieldPill } from './fieldPill';
-import { fixDraggableOffset } from '../../pitch/dnd-offset';
 
 interface Props {
     provided: DroppableProvided;
 }
 const DimFields: React.FC<Props> = props => {
     const { provided } = props;
-    const { vizStore, commonStore } = useGlobalStore();
+    const { vizStore } = useGlobalStore();
     const dimensions = vizStore.draggableFieldState.dimensions;
     return <div {...provided.droppableProps} ref={provided.innerRef}>
         {dimensions.map((f, index) => (
             <Draggable key={f.dragId} draggableId={f.dragId} index={index}>
                 {(provided, snapshot) => {
-                    if (snapshot.isDragging && provided.draggableProps.style) {
-                        fixDraggableOffset(provided, commonStore.rootContainer)
-                    }
           
                     return (
                         <>

package/src/fields/datasetFields/meaFields.tsx

@@ -4,22 +4,18 @@ import { observer } from 'mobx-react-lite';
 import { useGlobalStore } from '../../store';
 import DataTypeIcon from '../../components/dataTypeIcon';
 import { FieldPill } from './fieldPill';
-import { fixDraggableOffset } from '../../pitch/dnd-offset';
 
 interface Props {
     provided: DroppableProvided;
 }
 const MeaFields: React.FC<Props> = props => {
     const { provided } = props;
-    const { vizStore, commonStore } = useGlobalStore();
+    const { vizStore } = useGlobalStore();
     const measures = vizStore.draggableFieldState.measures;
     return <div {...provided.droppableProps} ref={provided.innerRef}>
         {measures.map((f, index) => (
             <Draggable key={f.dragId} draggableId={f.dragId} index={index}>
                 {(provided, snapshot) => {
-                    if (snapshot.isDragging && provided.draggableProps.style) {
-                        fixDraggableOffset(provided, commonStore.rootContainer)
-                    }
                     return (
                         <>
                             <FieldPill

package/src/fields/obComponents/obFContainer.tsx

@@ -8,7 +8,6 @@ import {
 } from "@kanaries/react-beautiful-dnd";
 import { IDraggableStateKey } from '../../interfaces';
 import OBPill from './obPill';
-import { fixDraggableOffset } from '../../pitch/dnd-offset';
 
 interface FieldContainerProps {
     provided: DroppableProvided
@@ -19,7 +18,7 @@ interface FieldContainerProps {
 }
 const OBFieldContainer: React.FC<FieldContainerProps> = props => {
     const { provided, dkey } = props;
-    const { vizStore, commonStore } = useGlobalStore();
+    const { vizStore} = useGlobalStore();
     const { draggableFieldState } = vizStore;
     return <FieldsContainer
         {...provided.droppableProps}
@@ -29,9 +28,6 @@ const OBFieldContainer: React.FC<FieldContainerProps> = props => {
         {draggableFieldState[dkey.id].map((f, index) => (
             <Draggable key={f.dragId} draggableId={f.dragId} index={index}>
                 {(provided, snapshot) => {
-                    if (snapshot.isDragging && provided.draggableProps.style) {
-                        fixDraggableOffset(provided, commonStore.rootContainer)
-                    }
                     return (
                         <OBPill dkey={dkey} fIndex={index} provided={provided} />
                     );