@finos/legend-data-cube 0.0.7 → 0.0.8

package/src/components/{editor → view/editor}/DataCubeEditorColumnPropertiesPanel.tsx

@@ -27,9 +27,9 @@ import {
   FormNumberInput,
   FormTextInput,
   FormDocumentation,
-} from '../shared/DataCubeFormUtils.js';
+} from '../../core/DataCubeFormUtils.js';
 import {
-  DataCubeClientSideAggregateOperator,
+  DataCubeQueryClientSideAggregateOperator,
   DataCubeColumnDataType,
   DataCubeColumnKind,
   DataCubeColumnPinPlacement,
@@ -42,10 +42,10 @@ import {
   DEFAULT_COLUMN_MIN_WIDTH,
   DEFAULT_COLUMN_WIDTH,
   DEFAULT_URL_LABEL_QUERY_PARAM,
-} from '../../stores/core/DataCubeQueryEngine.js';
-import { DocumentationKey } from '../../application/DataCubeDocumentation.js';
-import type { DataCubeViewState } from '../../stores/DataCubeViewState.js';
-import { _sortByColName } from '../../stores/core/DataCubeQuerySnapshot.js';
+} from '../../../stores/core/DataCubeQueryEngine.js';
+import { DocumentationKey } from '../../../__lib__/DataCubeDocumentation.js';
+import type { DataCubeViewState } from '../../../stores/view/DataCubeViewState.js';
+import { _sortByColName } from '../../../stores/core/DataCubeQuerySnapshot.js';
 
 export const DataCubeEditorColumnPropertiesPanel = observer(
   (props: { view: DataCubeViewState }) => {
@@ -54,10 +54,10 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
     const gridConfiguration = view.editor.generalProperties.configuration;
     const selectedColumn = panel.selectedColumn;
     const [
-      openColumnsDropdown,
-      closeColumnsDropdown,
-      columnsDropdownProps,
-      columnsDropPropsOpen,
+      openColumnDropdown,
+      closeColumnDropdown,
+      columnDropdownProps,
+      columnDropPropsOpen,
     ] = useDropdownMenu();
     const [
       openKindDropdown,
@@ -66,10 +66,10 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
       kindDropdownPropsOpen,
     ] = useDropdownMenu();
     const [
-      openAggregationTypeDropdown,
-      closeAggregationTypeDropdown,
-      aggregationTypeDropdownProps,
-      aggregationTypeDropdownPropsOpen,
+      openAggregationOperationDropdown,
+      closeAggregationOperationDropdown,
+      aggregationOperationDropdownProps,
+      aggregationOperationDropdownPropsOpen,
     ] = useDropdownMenu();
     const [
       openNumberScaleDropdown,
@@ -134,8 +134,8 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
               </div>
               <FormDropdownMenuTrigger
                 className="w-80"
-                onClick={openColumnsDropdown}
-                open={columnsDropPropsOpen}
+                onClick={openColumnDropdown}
+                open={columnDropPropsOpen}
               >
                 <div className="flex h-full w-full items-center">
                   <div className="overflow-hidden overflow-ellipsis whitespace-nowrap">
@@ -168,7 +168,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                   )}
                 </div>
               </FormDropdownMenuTrigger>
-              <FormDropdownMenu className="w-80" {...columnsDropdownProps}>
+              <FormDropdownMenu className="w-80" {...columnDropdownProps}>
                 {panel.columns
                   .slice()
                   .sort(_sortByColName)
@@ -177,7 +177,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                       key={column.name}
                       onClick={() => {
                         panel.setSelectedColumnName(column.name);
-                        closeColumnsDropdown();
+                        closeColumnDropdown();
                       }}
                       autoFocus={column.name === selectedColumn?.name}
                     >
@@ -253,7 +253,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                               selectedColumn.setPivotStatisticColumnFunction(
                                 kind === DataCubeColumnKind.DIMENSION
                                   ? undefined
-                                  : DataCubeClientSideAggregateOperator.SUM,
+                                  : DataCubeQueryClientSideAggregateOperator.SUM,
                               );
                             }
                             closeKindDropdown();
@@ -296,17 +296,17 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                   </div>
                   <FormDropdownMenuTrigger
                     className="w-32"
-                    onClick={openAggregationTypeDropdown}
+                    onClick={openAggregationOperationDropdown}
                     disabled={
                       selectedColumn.kind === DataCubeColumnKind.DIMENSION
                     }
-                    open={aggregationTypeDropdownPropsOpen}
+                    open={aggregationOperationDropdownPropsOpen}
                   >
                     {selectedColumn.aggregateOperation.operator}
                   </FormDropdownMenuTrigger>
                   <FormDropdownMenu
                     className="w-32"
-                    {...aggregationTypeDropdownProps}
+                    {...aggregationOperationDropdownProps}
                   >
                     {panel.view.engine.aggregateOperations
                       .filter((op) => op.isCompatibleWithColumn(selectedColumn))
@@ -315,7 +315,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                           key={op.operator}
                           onClick={() => {
                             selectedColumn.setAggregateOperation(op);
-                            closeAggregationTypeDropdown();
+                            closeAggregationOperationDropdown();
                           }}
                           autoFocus={op === selectedColumn.aggregateOperation}
                         >

package/src/components/{editor/DataCubeEditorColumnsSelector.tsx → view/editor/DataCubeEditorColumnSelector.tsx}

@@ -33,17 +33,17 @@ import {
 } from '@ag-grid-community/react';
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
 import {
-  type DataCubeEditorColumnsSelectorColumnState,
-  type DataCubeEditorColumnsSelectorState,
-} from '../../stores/editor/DataCubeEditorColumnsSelectorState.js';
+  type DataCubeEditorColumnSelectorColumnState,
+  type DataCubeEditorColumnSelectorState,
+} from '../../../stores/view/editor/DataCubeEditorColumnSelectorState.js';
 import { isNonNullable } from '@finos/legend-shared';
 import {
   getDataForAllFilteredNodes,
   getDataForAllNodes,
-} from '../../stores/grid/DataCubeGridClientEngine.js';
+} from '../../../stores/view/grid/DataCubeGridClientEngine.js';
 
 function getBaseGridProps<
-  T extends DataCubeEditorColumnsSelectorColumnState,
+  T extends DataCubeEditorColumnSelectorColumnState,
 >(): AgGridReactProps<T> {
   return {
     modules: [ClientSideRowModelModule],
@@ -111,7 +111,7 @@ function getBaseGridProps<
 }
 
 function getBaseColumnDef<
-  T extends DataCubeEditorColumnsSelectorColumnState,
+  T extends DataCubeEditorColumnSelectorColumnState,
 >(): ColDef<T> {
   return {
     field: 'name' as ColDefField<T>,
@@ -131,9 +131,9 @@ function getBaseColumnDef<
  */
 const ColumnsSearchResultCountBadge = observer(
   function ColumnsSearchResultCountBadge<
-    T extends DataCubeEditorColumnsSelectorColumnState,
+    T extends DataCubeEditorColumnSelectorColumnState,
   >(props: {
-    selector: DataCubeEditorColumnsSelectorState<T>;
+    selector: DataCubeEditorColumnSelectorState<T>;
     gridApi: GridApi<T>;
     scope: 'available' | 'selected';
   }) {
@@ -152,20 +152,20 @@ const ColumnsSearchResultCountBadge = observer(
   },
 );
 
-export const DataCubeEditorColumnsSelector = observer(
-  function DataCubeEditorColumnsSelector<
-    T extends DataCubeEditorColumnsSelectorColumnState,
+export const DataCubeEditorColumnSelector = observer(
+  function DataCubeEditorColumnSelector<
+    T extends DataCubeEditorColumnSelectorColumnState,
   >(props: {
-    selector: DataCubeEditorColumnsSelectorState<T>;
+    selector: DataCubeEditorColumnSelectorState<T>;
     columnLabelRenderer?:
       | ((p: {
-          selector: DataCubeEditorColumnsSelectorState<T>;
+          selector: DataCubeEditorColumnSelectorState<T>;
           column: T;
         }) => React.ReactNode)
       | undefined;
     columnActionRenderer?:
       | ((p: {
-          selector: DataCubeEditorColumnsSelectorState<T>;
+          selector: DataCubeEditorColumnSelectorState<T>;
           column: T;
         }) => React.ReactNode)
       | undefined;

package/src/components/{editor → view/editor}/DataCubeEditorColumnsPanel.tsx

@@ -16,19 +16,19 @@
 
 import { cn, DataCubeIcon } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
-import { DataCubeEditorColumnsSelector } from './DataCubeEditorColumnsSelector.js';
+import { DataCubeEditorColumnSelector } from './DataCubeEditorColumnSelector.js';
 import { useEffect } from 'react';
-import type { DataCubeViewState } from '../../stores/DataCubeViewState.js';
-import { FormCheckbox } from '../shared/DataCubeFormUtils.js';
+import type { DataCubeViewState } from '../../../stores/view/DataCubeViewState.js';
+import { FormCheckbox } from '../../core/DataCubeFormUtils.js';
 import type {
-  DataCubeEditorColumnsSelectorColumnState,
-  DataCubeEditorColumnsSelectorState,
-} from '../../stores/editor/DataCubeEditorColumnsSelectorState.js';
+  DataCubeEditorColumnSelectorColumnState,
+  DataCubeEditorColumnSelectorState,
+} from '../../../stores/view/editor/DataCubeEditorColumnSelectorState.js';
 
-const ColumnsSelectorLabel = observer(
+const ColumnSelectorLabel = observer(
   (props: {
-    selector: DataCubeEditorColumnsSelectorState<DataCubeEditorColumnsSelectorColumnState>;
-    column: DataCubeEditorColumnsSelectorColumnState;
+    selector: DataCubeEditorColumnSelectorState<DataCubeEditorColumnSelectorColumnState>;
+    column: DataCubeEditorColumnSelectorColumnState;
   }) => {
     const { selector, column } = props;
     const showHiddenIndicator =
@@ -102,7 +102,7 @@ export const DataCubeEditorColumnsPanel = observer(
           </div>
         </div>
         <div className="flex h-[calc(100%_-_24px)] w-full">
-          <DataCubeEditorColumnsSelector
+          <DataCubeEditorColumnSelector
             selector={panel.selector}
             noColumnsSelectedRenderer={() => (
               <div className="flex items-center border-[1.5px] border-neutral-200 p-2 font-semibold text-neutral-400">
@@ -112,7 +112,7 @@ export const DataCubeEditorColumnsPanel = observer(
                 No columns selected
               </div>
             )}
-            columnLabelRenderer={(p) => <ColumnsSelectorLabel {...p} />}
+            columnLabelRenderer={(p) => <ColumnSelectorLabel {...p} />}
           />
         </div>
       </div>

package/src/components/{editor → view/editor}/DataCubeEditorGeneralPropertiesPanel.tsx

@@ -29,7 +29,7 @@ import {
   DEFAULT_NEGATIVE_FOREGROUND_COLOR,
   DEFAULT_ROW_HIGHLIGHT_BACKGROUND_COLOR,
   DEFAULT_ZERO_FOREGROUND_COLOR,
-} from '../../stores/core/DataCubeQueryEngine.js';
+} from '../../../stores/core/DataCubeQueryEngine.js';
 import {
   FormCheckbox,
   FormColorPickerButton,
@@ -40,8 +40,8 @@ import {
   FormTextInput,
   FormNumberInput,
   FormBadge_WIP,
-} from '../shared/DataCubeFormUtils.js';
-import type { DataCubeViewState } from '../../stores/DataCubeViewState.js';
+} from '../../core/DataCubeFormUtils.js';
+import type { DataCubeViewState } from '../../../stores/view/DataCubeViewState.js';
 
 export const DataCubeEditorGeneralPropertiesPanel = observer(
   (props: { view: DataCubeViewState }) => {
@@ -49,10 +49,10 @@ export const DataCubeEditorGeneralPropertiesPanel = observer(
     const panel = view.editor.generalProperties;
     const configuration = panel.configuration;
     const [
-      openTreeColumnSortDirectionDropdown,
-      closeTreeColumnSortDirectionDropdown,
-      treeColumnSortDirectionDropdownProps,
-      treeColumnSortDirectionDropdownPropsOpen,
+      openTreeColumnSortOperatorDropdown,
+      closeTreeColumnSortOperatorDropdown,
+      treeColumnSortOperatorDropdownProps,
+      treeColumnSortOperatorDropdownPropsOpen,
     ] = useDropdownMenu();
     const [
       openInitialExpandLevelDropdown,
@@ -133,14 +133,14 @@ export const DataCubeEditorGeneralPropertiesPanel = observer(
               </div>
               <FormDropdownMenuTrigger
                 className="w-20"
-                onClick={openTreeColumnSortDirectionDropdown}
-                open={treeColumnSortDirectionDropdownPropsOpen}
+                onClick={openTreeColumnSortOperatorDropdown}
+                open={treeColumnSortOperatorDropdownPropsOpen}
               >
                 {configuration.treeColumnSortDirection}
               </FormDropdownMenuTrigger>
               <FormDropdownMenu
                 className="w-20"
-                {...treeColumnSortDirectionDropdownProps}
+                {...treeColumnSortOperatorDropdownProps}
               >
                 {[
                   DataCubeQuerySortDirection.ASCENDING,
@@ -150,7 +150,7 @@ export const DataCubeEditorGeneralPropertiesPanel = observer(
                     key={direction}
                     onClick={() => {
                       configuration.setTreeColumnSortDirection(direction);
-                      closeTreeColumnSortDirectionDropdown();
+                      closeTreeColumnSortOperatorDropdown();
                     }}
                     autoFocus={
                       direction === configuration.treeColumnSortDirection

package/src/components/{editor → view/editor}/DataCubeEditorHorizontalPivotsPanel.tsx

@@ -16,10 +16,10 @@
 
 import { DataCubeIcon } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
-import type { DataCubeViewState } from '../../stores/DataCubeViewState.js';
-import { DataCubeEditorColumnsSelector } from './DataCubeEditorColumnsSelector.js';
+import type { DataCubeViewState } from '../../../stores/view/DataCubeViewState.js';
+import { DataCubeEditorColumnSelector } from './DataCubeEditorColumnSelector.js';
 import { useEffect } from 'react';
-import { FormBadge_WIP } from '../shared/DataCubeFormUtils.js';
+import { FormBadge_WIP } from '../../core/DataCubeFormUtils.js';
 
 const PivotColumnSortDirectionDropdown = observer((props) => (
   <div className="relative flex h-full items-center">
@@ -48,7 +48,7 @@ export const DataCubeEditorHorizontalPivotsPanel = observer(
           </div>
         </div>
         <div className="flex h-[calc(100%_-_24px)] w-full">
-          <DataCubeEditorColumnsSelector
+          <DataCubeEditorColumnSelector
             selector={panel.selector}
             columnActionRenderer={(p) => (
               <PivotColumnSortDirectionDropdown {...p} />

package/src/components/{editor → view/editor}/DataCubeEditorSortsPanel.tsx

@@ -16,55 +16,42 @@
 
 import { observer } from 'mobx-react-lite';
 import { DataCubeIcon, useDropdownMenu } from '@finos/legend-art';
-import { DataCubeEditorColumnsSelector } from './DataCubeEditorColumnsSelector.js';
-import type { DataCubeEditorColumnsSelectorState } from '../../stores/editor/DataCubeEditorColumnsSelectorState.js';
-import type { DataCubeEditorSortColumnState } from '../../stores/editor/DataCubeEditorSortsPanelState.js';
+import { DataCubeEditorColumnSelector } from './DataCubeEditorColumnSelector.js';
+import type { DataCubeEditorColumnSelectorState } from '../../../stores/view/editor/DataCubeEditorColumnSelectorState.js';
+import type { DataCubeEditorSortColumnState } from '../../../stores/view/editor/DataCubeEditorSortsPanelState.js';
 import {
   DataCubeQuerySortDirection,
   PIVOT_COLUMN_NAME_VALUE_SEPARATOR,
-} from '../../stores/core/DataCubeQueryEngine.js';
-import { IllegalStateError } from '@finos/legend-shared';
+} from '../../../stores/core/DataCubeQueryEngine.js';
 import {
-  FormBadge_WIP,
   FormDropdownMenu,
   FormDropdownMenuItem,
-} from '../shared/DataCubeFormUtils.js';
-import type { DataCubeViewState } from '../../stores/DataCubeViewState.js';
-
-function getSortDirectionLabel(operation: string) {
-  switch (operation) {
-    case DataCubeQuerySortDirection.ASCENDING:
-      return 'Ascending';
-    case DataCubeQuerySortDirection.DESCENDING:
-      return 'Descending';
-    default:
-      throw new IllegalStateError(`Unsupported sort operation '${operation}'`);
-  }
-}
+} from '../../core/DataCubeFormUtils.js';
+import type { DataCubeViewState } from '../../../stores/view/DataCubeViewState.js';
 
 const SortDirectionDropdown = observer(
   (props: {
-    selector: DataCubeEditorColumnsSelectorState<DataCubeEditorSortColumnState>;
+    selector: DataCubeEditorColumnSelectorState<DataCubeEditorSortColumnState>;
     column: DataCubeEditorSortColumnState;
   }) => {
     const { column } = props;
     const [
-      openOpertionsDropdown,
-      closeOperationsDropdown,
-      operationsDropdownProps,
-      operationsDropdownPropsOpen,
+      openDirectionDropdown,
+      closeDirectionDropdown,
+      directionDropdownProps,
+      directionDropdownPropsOpen,
     ] = useDropdownMenu();
 
     return (
       <div className="group relative flex h-full items-center">
-        {!operationsDropdownPropsOpen && (
+        {!directionDropdownPropsOpen && (
           <div className="flex h-[18px] w-32 items-center border border-transparent px-2 text-sm text-neutral-400 group-hover:invisible">
-            {getSortDirectionLabel(column.direction)}
+            {column.direction}
           </div>
         )}
-        {operationsDropdownPropsOpen && (
+        {directionDropdownPropsOpen && (
           <div className="flex h-[18px] w-32 items-center justify-between border border-sky-600 bg-sky-50 pl-2 pr-0.5 text-sm">
-            <div>{getSortDirectionLabel(column.direction)}</div>
+            <div>{column.direction}</div>
             <div>
               <DataCubeIcon.CaretDown />
             </div>
@@ -79,46 +66,31 @@ const SortDirectionDropdown = observer(
            */
           onClickCapture={(event) => {
             event.stopPropagation();
-            openOpertionsDropdown(event);
+            openDirectionDropdown(event);
           }}
           onClick={(event) => event.stopPropagation()}
         >
-          <div>{getSortDirectionLabel(column.direction)}</div>
+          <div>{column.direction}</div>
           <div>
             <DataCubeIcon.CaretDown />
           </div>
         </button>
-        <FormDropdownMenu className="w-32" {...operationsDropdownProps}>
-          <FormDropdownMenuItem
-            onClick={() => {
-              column.setDirection(DataCubeQuerySortDirection.ASCENDING);
-              closeOperationsDropdown();
-            }}
-            autoFocus={
-              column.direction === DataCubeQuerySortDirection.ASCENDING
-            }
-          >
-            Ascending
-          </FormDropdownMenuItem>
-          <FormDropdownMenuItem disabled={true} autoFocus={false}>
-            {`Ascending (abs)`}
-            <FormBadge_WIP />
-          </FormDropdownMenuItem>
-          <FormDropdownMenuItem
-            onClick={() => {
-              column.setDirection(DataCubeQuerySortDirection.DESCENDING);
-              closeOperationsDropdown();
-            }}
-            autoFocus={
-              column.direction === DataCubeQuerySortDirection.DESCENDING
-            }
-          >
-            Descending
-          </FormDropdownMenuItem>
-          <FormDropdownMenuItem disabled={true} autoFocus={false}>
-            {`Descending (abs)`}
-            <FormBadge_WIP />
-          </FormDropdownMenuItem>
+        <FormDropdownMenu className="w-32" {...directionDropdownProps}>
+          {[
+            DataCubeQuerySortDirection.ASCENDING,
+            DataCubeQuerySortDirection.DESCENDING,
+          ].map((direction) => (
+            <FormDropdownMenuItem
+              key={direction}
+              onClick={() => {
+                column.setDirection(direction);
+                closeDirectionDropdown();
+              }}
+              autoFocus={column.direction === direction}
+            >
+              {direction}
+            </FormDropdownMenuItem>
+          ))}
         </FormDropdownMenu>
       </div>
     );
@@ -127,7 +99,7 @@ const SortDirectionDropdown = observer(
 
 const SortColumnLabel = observer(
   (props: {
-    selector: DataCubeEditorColumnsSelectorState<DataCubeEditorSortColumnState>;
+    selector: DataCubeEditorColumnSelectorState<DataCubeEditorSortColumnState>;
     column: DataCubeEditorSortColumnState;
   }) => {
     const { column } = props;
@@ -156,7 +128,7 @@ export const DataCubeEditorSortsPanel = observer(
           </div>
         </div>
         <div className="flex h-[calc(100%_-_24px)] w-full">
-          <DataCubeEditorColumnsSelector
+          <DataCubeEditorColumnSelector
             selector={panel.selector}
             columnLabelRenderer={(p) => <SortColumnLabel {...p} />}
             columnActionRenderer={(p) => <SortDirectionDropdown {...p} />}

package/src/components/{editor → view/editor}/DataCubeEditorVerticalPivotsPanel.tsx

@@ -16,8 +16,8 @@
 
 import { DataCubeIcon } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
-import { DataCubeEditorColumnsSelector } from './DataCubeEditorColumnsSelector.js';
-import type { DataCubeViewState } from '../../stores/DataCubeViewState.js';
+import { DataCubeEditorColumnSelector } from './DataCubeEditorColumnSelector.js';
+import type { DataCubeViewState } from '../../../stores/view/DataCubeViewState.js';
 
 export const DataCubeEditorVerticalPivotsPanel = observer(
   (props: { view: DataCubeViewState }) => {
@@ -35,7 +35,7 @@ export const DataCubeEditorVerticalPivotsPanel = observer(
           </div>
         </div>
         <div className="flex h-[calc(100%_-_24px)] w-full">
-          <DataCubeEditorColumnsSelector selector={panel.selector} />
+          <DataCubeEditorColumnSelector selector={panel.selector} />
         </div>
       </div>
     );

package/src/components/{extend → view/extend}/DataCubeColumnEditor.tsx

@@ -15,7 +15,10 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { type DataCubeNewColumnState } from '../../stores/extend/DataCubeColumnEditorState.js';
+import {
+  DataCubeExistingColumnEditorState,
+  type DataCubeColumnBaseEditorState,
+} from '../../../stores/view/extend/DataCubeColumnEditorState.js';
 import {
   editor as monacoEditorAPI,
   languages as monacoLanguagesAPI,
@@ -31,21 +34,21 @@ import {
 import {
   getCodeSuggestions,
   MONACO_EDITOR_OVERFLOW_WIDGETS_ROOT_ID,
-} from '../shared/DataCubePureCodeEditorUtils.js';
+} from '../../core/DataCubePureCodeEditorUtils.js';
 import {
   FormDocumentation,
   FormDropdownMenu,
   FormDropdownMenuItem,
   FormDropdownMenuTrigger,
   FormTextInput,
-} from '../shared/DataCubeFormUtils.js';
+} from '../../core/DataCubeFormUtils.js';
 import { debounce } from '@finos/legend-shared';
 import { cn, DataCubeIcon, useDropdownMenu } from '@finos/legend-art';
 import {
   DataCubeColumnDataType,
   DataCubeColumnKind,
-} from '../../stores/core/DataCubeQueryEngine.js';
-import { DocumentationKey } from '../../application/DataCubeDocumentation.js';
+} from '../../../stores/core/DataCubeQueryEngine.js';
+import { DocumentationKey } from '../../../__lib__/DataCubeDocumentation.js';
 
 enum DataCubeExtendedColumnKind {
   LEAF_LEVEL_MEASURE = 'Leaf Level Measure',
@@ -54,7 +57,7 @@ enum DataCubeExtendedColumnKind {
 }
 
 export const DataCubeColumnCreator = observer(
-  (props: { state: DataCubeNewColumnState }) => {
+  (props: { state: DataCubeColumnBaseEditorState }) => {
     const { state } = props;
     const view = state.view;
     const application = view.application;
@@ -133,7 +136,7 @@ export const DataCubeColumnCreator = observer(
                       position,
                       model,
                       state.codePrefix,
-                      view,
+                      view.engine,
                       () => state.buildExtendBaseQuery(),
                     ),
                   );
@@ -353,6 +356,30 @@ export const DataCubeColumnCreator = observer(
           >
             OK
           </button>
+          {state instanceof DataCubeExistingColumnEditorState && (
+            <>
+              <button
+                className="ml-2 h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
+                onClick={() => {
+                  state.manager
+                    .deleteColumn(state.initialData.name)
+                    .catch((error) => application.alertUnhandledError(error));
+                }}
+              >
+                Delete
+              </button>
+              <button
+                className="ml-2 h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
+                onClick={() => {
+                  state
+                    .reset()
+                    .catch((error) => application.alertUnhandledError(error));
+                }}
+              >
+                Reset
+              </button>
+            </>
+          )}
           <button
             className="ml-2 h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
             onClick={() => state.close()}