@kanaries/graphic-walker 0.2.16 → 0.2.17

package/dist/interfaces.d.ts

@@ -1,16 +1,26 @@
-import { StatFuncName } from "visual-insights/build/esm/statistics";
-import { AggFC } from 'cube-core/built/types';
-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];
 };
+export type ISemanticType = 'quantitative' | 'nominal' | 'ordinal' | 'temporal';
+export type IDataType = 'number' | 'integer' | 'boolean' | 'date' | 'string';
+export type IAnalyticType = 'dimension' | 'measure';
 export interface IRow {
     [key: string]: any;
 }
-/**
- * @deprecated
- */
-export type SemanticType = 'quantitative' | 'nominal' | 'ordinal' | 'temporal';
+export type IAggregator = 'sum' | 'count' | 'max' | 'min' | 'mean' | 'median' | 'variance' | 'stdev';
+export interface Specification {
+    position?: string[];
+    color?: string[];
+    size?: string[];
+    shape?: string[];
+    opacity?: string[];
+    facets?: string[];
+    page?: string[];
+    filter?: string[];
+    highFacets?: string[];
+    geomType?: string[];
+    aggregate?: boolean;
+}
 export interface Filters {
     [key: string]: any[];
 }
@@ -71,12 +81,6 @@ export interface IViewField extends IField {
     dragId: string;
     sort?: 'none' | 'ascending' | 'descending';
 }
-export interface Measure extends IField {
-    aggregator?: AggFC;
-    minWidth?: number;
-    formatter?: (value: number | undefined) => number | string;
-    [key: string]: any;
-}
 export interface DataSet {
     id: string;
     name: string;
@@ -89,7 +93,18 @@ export interface IFieldNeighbor {
 }
 export interface IMeasure {
     key: string;
-    op: StatFuncName;
+    op: IAggregator;
+}
+export interface IPredicate {
+    key: string;
+    type: "discrete" | "continuous";
+    range: Set<any> | [number, number];
+}
+export interface IExplainProps {
+    dataSource: IRow[];
+    predicates: IPredicate[];
+    viewFields: IField[];
+    metas: IField[];
 }
 export interface IDataSet {
     id: string;
@@ -144,8 +159,8 @@ export type IFilterRule = {
 export declare const EXPLORATION_TYPES: readonly ["none", "brush", "point"];
 export declare const BRUSH_DIRECTIONS: readonly ["default", "x", "y"];
 export type IStackMode = 'none' | 'stack' | 'normalize';
-export type IExplorationType = (typeof EXPLORATION_TYPES)[number];
-export type IBrushDirection = (typeof BRUSH_DIRECTIONS)[number];
+export type IExplorationType = typeof EXPLORATION_TYPES[number];
+export type IBrushDirection = typeof BRUSH_DIRECTIONS[number];
 export interface IVisualConfig {
     defaultAggregated: boolean;
     geoms: string[];

package/dist/lib/inferMeta.d.ts

@@ -1,18 +1,11 @@
-import { ISemanticType } from "visual-insights";
-import { IMutField, IRow, IUncertainMutField } from "../interfaces";
+import { IMutField, IRow, ISemanticType, 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 isNumericArray(data: any[]): boolean;
 export declare function inferSemanticType(data: IRow[], fid: string): ISemanticType;
 export declare function inferMeta(props: {
     dataSource: IRow[];

package/dist/lib/insights/explainByChildren.d.ts

@@ -0,0 +1,16 @@
+import { IMeasure, IRow } from '../../interfaces';
+import { IPredicate } from '../../utils';
+export declare function explainByChildren(dataSource: IRow[], predicates: IPredicate[], dimensions: string[], measures: IMeasure[]): {
+    majorList: {
+        key: string;
+        score: number;
+        dimensions: string[];
+        measures: IMeasure[];
+    }[];
+    outlierList: {
+        key: string;
+        score: number;
+        dimensions: string[];
+        measures: IMeasure[];
+    }[];
+};

package/dist/lib/insights/explainBySelection.d.ts

@@ -0,0 +1,5 @@
+import { IExplainProps, IField } from '../../interfaces';
+export declare function explainBySelection(props: IExplainProps): {
+    score: number;
+    viiewFields: IField[];
+}[];

package/dist/lib/insights/explainValue.d.ts

@@ -0,0 +1,2 @@
+import { IExplainProps } from '../../interfaces';
+export declare function explainValue(props: IExplainProps): number[];

package/dist/lib/insights/utils.d.ts

@@ -0,0 +1,11 @@
+import { IField } from '../../interfaces';
+import { IAggQuery } from '../interfaces';
+export declare function groupByAnalyticTypes(fields: IField[]): {
+    dimensions: IField[];
+    measures: IField[];
+};
+export declare function meaList2AggProps(measures: IField[]): IAggQuery['agg'];
+export declare function complementaryFields(props: {
+    selection: IField[];
+    all: IField[];
+}): IField[];

package/dist/lib/interfaces.d.ts

@@ -1,8 +1,9 @@
+import { IAggregator } from "../interfaces";
 export interface IAggQuery {
     op: 'aggregate';
     groupBy: string[];
     agg: {
-        [field: string]: 'sum' | 'count' | 'max' | 'min' | 'mean' | 'median' | 'variance' | 'stdev';
+        [field: string]: IAggregator;
     };
 }
 export interface IFoldQuery {

package/dist/lib/op/aggregate.d.ts

@@ -1,3 +1,3 @@
-import { IRow } from "visual-insights";
+import { IRow } from "../../interfaces";
 import { IAggQuery } from "../interfaces";
 export declare function aggregate(data: IRow[], query: IAggQuery): IRow[];

package/dist/lib/op/bin.d.ts

@@ -1,3 +1,3 @@
-import { IRow } from "visual-insights";
+import { IRow } from "../../interfaces";
 import { IBinQuery } from "../interfaces";
 export declare function bin(dataSource: IRow[], query: IBinQuery): IRow[];

package/dist/lib/op/fold.d.ts

@@ -1,3 +1,3 @@
-import { IRow } from "visual-insights";
+import { IRow } from "../../interfaces";
 import { IFoldQuery } from "../interfaces";
 export declare function fold(data: IRow[], query: IFoldQuery): IRow[];

package/dist/lib/viewQuery.d.ts

@@ -1,5 +1,4 @@
-import { IRow } from "visual-insights";
-import { IMutField } from "../interfaces";
+import { IMutField, IRow } from "../interfaces";
 import { IAggQuery, IBinQuery, IFoldQuery, IRawQuery } from "./interfaces";
 export type IViewQuery = IAggQuery | IFoldQuery | IBinQuery | IRawQuery;
 export declare function queryView(rawData: IRow[], metas: IMutField[], query: IViewQuery): IRow[];

package/dist/services.d.ts

@@ -1,38 +1,9 @@
-import { Specification } from 'visual-insights';
-import { IRow, Filters, SemanticType, IMeasure, IMutField, IFilterField } from './interfaces';
-import { IExplaination, IMeasureWithStat } from './insights';
+import { IRow, IMutField, IFilterField, Specification } from './interfaces';
 import { IViewQuery } from './lib/viewQuery';
-interface ExplainParams {
-    dimensions: string[];
-    measures: string[];
-    dataSource: IRow[];
-    filters?: Filters;
-    currentSpace: {
-        dimensions: string[];
-        measures: IMeasure[];
-    };
-}
 export interface IVisSpace {
     dataView: IRow[];
     schema: Specification;
 }
-interface ExplainReturns {
-    explainations: IExplaination[];
-    valueExp: IMeasureWithStat[];
-    visSpaces: IVisSpace[];
-    fieldsWithSemanticType: Array<{
-        key: string;
-        type: SemanticType;
-    }>;
-}
-export declare function getExplaination(props: ExplainParams): Promise<ExplainReturns>;
-interface PreAnalysisParams {
-    fields: IMutField[];
-    dataSource: IRow[];
-}
-export declare function preAnalysis(props: PreAnalysisParams): Promise<void>;
-export declare function destroyWorker(): void;
 export declare const applyFilter: (data: IRow[], filters: readonly IFilterField[]) => Promise<IRow[]>;
 export declare const transformDataService: (data: IRow[], columns: IMutField[]) => Promise<IRow[]>;
 export declare const applyViewQuery: (data: IRow[], metas: IMutField[], query: IViewQuery) => Promise<IRow[]>;
-export {};

package/dist/store/visualSpecStore.d.ts

@@ -1,5 +1,4 @@
-import { Specification } from "visual-insights";
-import { DataSet, DraggableFieldState, IFilterRule, IViewField, IVisSpec, IVisualConfig } from "../interfaces";
+import { DataSet, DraggableFieldState, IFilterRule, IViewField, IVisSpec, IVisualConfig, Specification } from "../interfaces";
 import { VisSpecWithHistory } from "../models/visSpecHistory";
 import { IStoInfo } from "../utils/save";
 import { CommonStore } from "./commonStore";

package/dist/utils/autoMark.d.ts

@@ -1,4 +1,4 @@
-import { ISemanticType } from "visual-insights";
+import { ISemanticType } from "../interfaces";
 /**
  *
  * @param semanticTypeList semanticTypeList.length <= 2，调用时，手动将columns 和 rows的最后一个元素组合传进来

package/dist/utils/dataPrep.d.ts

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

package/dist/vis/react-vega.d.ts

@@ -21,6 +21,7 @@ interface ReactVegaProps {
     shape?: IViewField;
     theta?: IViewField;
     radius?: IViewField;
+    details?: Readonly<IViewField[]>;
     showActions: boolean;
     layoutMode: string;
     width: number;

package/dist/vis/spec/encode.d.ts

@@ -13,6 +13,7 @@ export interface IEncodeProps {
     column: IViewField;
     theta: IViewField;
     radius: IViewField;
+    details: Readonly<IViewField[]>;
 }
 export declare function channelEncode(props: IEncodeProps): {
     [key: string]: any;

package/dist/vis/spec/mark.d.ts

@@ -1,4 +1,4 @@
-import { ISemanticType } from "visual-insights";
+import { ISemanticType } from "../../interfaces";
 /**
  *
  * @param semanticTypeList semanticTypeList.length <= 2，调用时，手动将columns 和 rows的最后一个元素组合传进来

package/dist/vis/spec/tooltip.d.ts

@@ -0,0 +1,4 @@
+import { IViewField } from "../../interfaces";
+export declare function addTooltipEncode(encoding: {
+    [key: string]: any;
+}, details?: Readonly<IViewField[]>): void;

package/dist/vis/spec/view.d.ts

@@ -14,7 +14,9 @@ export declare function getSingleView(props: SingleViewProps): {
     mark: {
         type: string;
         opacity: number;
-        tooltip: boolean;
+        tooltip: {
+            content: string;
+        };
     };
     encoding: {
         [key: string]: any;
@@ -38,7 +40,9 @@ export declare function getSingleView(props: SingleViewProps): {
     mark: {
         type: string;
         opacity: number;
-        tooltip: boolean;
+        tooltip: {
+            content: string;
+        };
     };
     encoding: {
         [key: string]: any;
@@ -59,7 +63,9 @@ export declare function getSingleView(props: SingleViewProps): {
     mark: {
         type: string;
         opacity: number;
-        tooltip: boolean;
+        tooltip: {
+            content: string;
+        };
     };
     encoding: {
         [key: string]: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.2.16",
+  "version": "0.2.17",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",
@@ -47,15 +47,13 @@
     "postinstall-postinstall": "^2.1.0",
     "re-resizable": "^6.9.8",
     "react-i18next": "^11.18.6",
-    "react-json-view": "^1.21.3",
     "react-shadow": "^20.0.0",
     "rxjs": "^7.3.0",
     "tailwindcss": "^3.2.4",
     "uuid": "^8.3.2",
     "vega": "^5.22.1",
     "vega-embed": "^6.21.0",
-    "vega-lite": "^5.6.0",
-    "visual-insights": "0.7.15"
+    "vega-lite": "^5.6.0"
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "^8.2.5",

package/src/App.tsx

@@ -1,29 +1,23 @@
-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";
-import { toJS } from "mobx";
-import { useTranslation } from "react-i18next";
-import { IDarkMode, IMutField, IRow, ISegmentKey, IThemeKey } from "./interfaces";
-import type { IReactVegaHandler } from "./vis/react-vega";
-import VisualSettings from "./visualSettings";
-import ClickMenu from "./components/clickMenu";
-import InsightBoard from "./insightBoard/index";
-import PosFields from "./fields/posFields";
-import AestheticFields from "./fields/aestheticFields";
-import DatasetFields from "./fields/datasetFields/index";
-import ReactiveRenderer from "./renderer/index";
-import DataSourceSegment from "./dataSource/index";
-import { IGlobalStore, useGlobalStore } from "./store";
-import { preAnalysis, destroyWorker } from "./services";
-import VisNav from "./segments/visNav";
-import { mergeLocaleRes, setLocaleLanguage } from "./locales/i18n";
-import FilterField from "./fields/filterField";
-import { guardDataKeys } from "./utils/dataPrep";
-import SegmentNav from "./segments/segmentNav";
-import DatasetConfig from "./dataSource/datasetConfig";
-import { useCurrentMediaTheme } from "./utils/media";
-import CodeExport from "./components/codeExport";
+import React, { useEffect, useRef, useMemo } from 'react';
+import { observer } from 'mobx-react-lite';
+import { useTranslation } from 'react-i18next';
+import { IDarkMode, IMutField, IRow, ISegmentKey, IThemeKey, Specification } from './interfaces';
+import type { IReactVegaHandler } from './vis/react-vega';
+import VisualSettings from './visualSettings';
+import PosFields from './fields/posFields';
+import AestheticFields from './fields/aestheticFields';
+import DatasetFields from './fields/datasetFields/index';
+import ReactiveRenderer from './renderer/index';
+import DataSourceSegment from './dataSource/index';
+import { IGlobalStore, useGlobalStore } from './store';
+import VisNav from './segments/visNav';
+import { mergeLocaleRes, setLocaleLanguage } from './locales/i18n';
+import FilterField from './fields/filterField';
+import { guardDataKeys } from './utils/dataPrep';
+import SegmentNav from './segments/segmentNav';
+import DatasetConfig from './dataSource/datasetConfig';
+import { useCurrentMediaTheme } from './utils/media';
+import CodeExport from './components/codeExport';
 
 export interface IGWProps {
     dataSource?: IRow[];
@@ -43,22 +37,21 @@ export interface IGWProps {
     storeRef?: React.MutableRefObject<IGlobalStore | null>;
 }
 
-const App = observer<IGWProps>(function App (props) {
+const App = observer<IGWProps>(function App(props) {
     const {
         dataSource = [],
         rawFields = [],
         spec,
-        i18nLang = "en-US",
+        i18nLang = 'en-US',
         i18nResources,
         hideDataSourceConfig,
         fieldKeyGuard = true,
         themeKey = 'vega',
-        dark = 'media'
+        dark = 'media',
     } = props;
     const { commonStore, vizStore } = useGlobalStore();
-    const [insightReady, setInsightReady] = useState<boolean>(true);
 
-    const { currentDataset, datasets, vizEmbededMenu, segmentKey } = commonStore;
+    const { datasets, segmentKey } = commonStore;
 
     const { t, i18n } = useTranslation();
     const curLang = i18n.language;
@@ -93,53 +86,43 @@ const App = observer<IGWProps>(function App (props) {
     useEffect(() => {
         if (safeDataset.safeData.length > 0 && safeDataset.safeMetas.length > 0) {
             commonStore.addAndUseDS({
-                name: "context dataset",
+                name: 'context dataset',
                 dataSource: safeDataset.safeData,
                 rawFields: safeDataset.safeMetas,
             });
         }
     }, [safeDataset]);
 
-    // do preparation analysis work when using a new dataset
     useEffect(() => {
-        const ds = currentDataset;
-        if (ds && ds.dataSource.length > 0 && ds.rawFields.length > 0) {
-            setInsightReady(false);
-            preAnalysis({
-                dataSource: ds.dataSource,
-                fields: toJS(ds.rawFields),
-            }).then(() => {
-                setInsightReady(true);
-
-                if (spec) {
-                    vizStore.renderSpec(spec);
-                }
-            });
+        if (safeDataset.safeData.length > 0 && safeDataset.safeMetas.length > 0 && spec) {
+            vizStore.renderSpec(spec);
         }
-        return () => {
-            destroyWorker();
-        };
-    }, [currentDataset, spec]);
+    }, [spec, safeDataset]);
 
     const darkMode = useCurrentMediaTheme(dark);
 
     const rendererRef = useRef<IReactVegaHandler>(null);
 
     return (
-        <div className={`${darkMode === 'dark' ? 'dark' : ''} App font-sans bg-white dark:bg-zinc-900 dark:text-white m-0 p-0`}>
+        <div
+            className={`${
+                darkMode === 'dark' ? 'dark' : ''
+            } App font-sans bg-white dark:bg-zinc-900 dark:text-white m-0 p-0`}
+        >
             {/* <div className="grow-0">
                 <PageNav />
             </div> */}
             <div className="bg-white dark:bg-zinc-900 dark:text-white">
-                {!hideDataSourceConfig && <DataSourceSegment preWorkDone={insightReady} />}
+                {!hideDataSourceConfig && <DataSourceSegment />}
                 <div className="px-2 mx-2">
                     <SegmentNav />
-                    {
-                        segmentKey === ISegmentKey.vis && <VisNav />
-                    }
+                    {segmentKey === ISegmentKey.vis && <VisNav />}
                 </div>
                 {segmentKey === ISegmentKey.vis && (
-                    <div style={{ marginTop: "0em", borderTop: "none" }} className="m-4 p-4 border border-gray-200 dark:border-gray-700">
+                    <div
+                        style={{ marginTop: '0em', borderTop: 'none' }}
+                        className="m-4 p-4 border border-gray-200 dark:border-gray-700"
+                    >
                         <VisualSettings rendererHandler={rendererRef} darkModePreference={dark} />
                         <CodeExport />
                         <div className="md:grid md:grid-cols-12 xl:grid-cols-6">
@@ -156,17 +139,18 @@ const App = observer<IGWProps>(function App (props) {
                                 </div>
                                 <div
                                     className="m-0.5 p-1 border border-gray-200 dark:border-gray-700"
-                                    style={{ minHeight: "600px", overflow: "auto" }}
-                                    onMouseLeave={() => {
-                                        vizEmbededMenu.show && commonStore.closeEmbededMenu();
-                                    }}
-                                    onClick={() => {
-                                        vizEmbededMenu.show && commonStore.closeEmbededMenu();
-                                    }}
+                                    style={{ minHeight: '600px', overflow: 'auto' }}
+                                    // onMouseLeave={() => {
+                                    //     vizEmbededMenu.show && commonStore.closeEmbededMenu();
+                                    // }}
+                                    // onClick={() => {
+                                    //     vizEmbededMenu.show && commonStore.closeEmbededMenu();
+                                    // }}
                                 >
-                                    {datasets.length > 0 && <ReactiveRenderer ref={rendererRef} themeKey={themeKey} dark={dark} />}
-                                    <InsightBoard />
-                                    {vizEmbededMenu.show && (
+                                    {datasets.length > 0 && (
+                                        <ReactiveRenderer ref={rendererRef} themeKey={themeKey} dark={dark} />
+                                    )}
+                                    {/* {vizEmbededMenu.show && (
                                         <ClickMenu x={vizEmbededMenu.position[0]} y={vizEmbededMenu.position[1]}>
                                             <div
                                                 className="flex items-center whitespace-nowrap py-1 px-4 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
@@ -181,14 +165,17 @@ const App = observer<IGWProps>(function App (props) {
                                                 <LightBulbIcon className="ml-1 w-3 flex-grow-0 flex-shrink-0" />
                                             </div>
                                         </ClickMenu>
-                                    )}
+                                    )} */}
                                 </div>
                             </div>
                         </div>
                     </div>
                 )}
                 {segmentKey === ISegmentKey.data && (
-                    <div className="m-4 p-4 border border-gray-200 dark:border-gray-700" style={{ marginTop: "0em", borderTop: "none" }}>
+                    <div
+                        className="m-4 p-4 border border-gray-200 dark:border-gray-700"
+                        style={{ marginTop: '0em', borderTop: 'none' }}
+                    >
                         <DatasetConfig />
                     </div>
                 )}

package/src/dataSource/index.tsx

@@ -12,11 +12,9 @@ import DropdownSelect from "../components/dropdownSelect";
 import PrimaryButton from "../components/button/primary";
 
 interface DSSegmentProps {
-    preWorkDone: boolean;
 }
 
 const DataSourceSegment: React.FC<DSSegmentProps> = (props) => {
-    const { preWorkDone } = props;
     const { commonStore, vizStore } = useGlobalStore();
     const gwFileRef = useRef<HTMLInputElement>(null);
     const { t } = useTranslation();
@@ -26,9 +24,6 @@ const DataSourceSegment: React.FC<DSSegmentProps> = (props) => {
     return (
         <div className="flex items-center m-4 p-4 border border-gray-200 dark:border-gray-700">
             <GwFile fileRef={gwFileRef} />
-            {!preWorkDone && (
-                <div className="animate-spin inline-block mr-2 ml-2 w-4 h-4 rounded-full border-t-2 border-l-2 border-blue-500"></div>
-            )}
             {/* <label className="text-xs mr-1 whitespace-nowrap self-center h-4">
                 {t("DataSource.labels.cur_dataset")}
             </label> */}
@@ -76,18 +71,6 @@ const DataSourceSegment: React.FC<DSSegmentProps> = (props) => {
                 >
                     <DataSelection />
                 </Modal>
-            {/* {showDSPanel && (
-                <Modal
-                    title={t("DataSource.dialog.create_data_source")}
-                    onClose={() => {
-                        commonStore.setShowDSPanel(false);
-                    }}
-                >
-                    <DataSelection />
-                </Modal>
-            )} */}
-            {preWorkDone && <CheckCircleIcon className="text-green-500 w-5 inline-block ml-2" />}
-            {!preWorkDone && <ArrowPathIcon className="text-yellow-500 w-5 inline-block ml-2" />}
         </div>
     );
 };

package/src/fields/aestheticFields.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 import { Droppable } from "@kanaries/react-beautiful-dnd";
 import { DRAGGABLE_STATE_KEYS } from './fieldsContext';
 import { AestheticFieldContainer } from './components'
-import OBFieldContainer from './obComponents/obFContainer';
 import SingleEncodeEditor from './encodeFields/singleEncodeEditor';
 
-const aestheticFields = DRAGGABLE_STATE_KEYS.filter(f => ['color', 'opacity', 'size', 'shape'].includes(f.id));
+const aestheticFields = DRAGGABLE_STATE_KEYS.filter(f => ['color', 'opacity', 'size', 'shape', 'details'].includes(f.id));
 
 const AestheticFields: React.FC = props => {
     return <div>

package/src/fields/encodeFields/singleEncodeEditor.tsx

@@ -1,15 +1,14 @@
-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";
+import React, { useMemo } from 'react';
+import { IDraggableStateKey } from '../../interfaces';
+import { observer } from 'mobx-react-lite';
+import { useGlobalStore } from '../../store';
+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;

package/src/fields/fieldsContext.tsx

@@ -50,6 +50,7 @@ export const DRAGGABLE_STATE_KEYS: Readonly<IDraggableStateKey[]> = [
     { id: 'theta', mode: 1 },
     { id: 'radius', mode: 1 },
     { id: 'filters', mode: 1 },
+    { id: 'details', mode: 1 }
 ] as const;
 
 export const AGGREGATOR_LIST: Readonly<string[]> = [