@finos/legend-data-cube 0.1.11 → 0.1.13

package/src/components/view/editor/DataCubeEditorDimensionsPanel.tsx

@@ -15,590 +15,1346 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { DataCubeIcon } from '@finos/legend-art';
+import { cn, DataCubeIcon } from '@finos/legend-art';
 import {
-  type ColDef,
-  type ColDefField,
   type GridApi,
-  type ModelUpdatedEvent,
-  type RowDragEndEvent,
+  type IRowNode,
+  type RowDragEvent,
   type SelectionChangedEvent,
   AllCommunityModule,
 } from 'ag-grid-community';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import {
   AgGridReact,
-  type AgGridReactProps,
   type CustomCellRendererProps,
   type CustomNoRowsOverlayProps,
 } from 'ag-grid-react';
+import { filterByType, isNonNullable } from '@finos/legend-shared';
 import {
-  type DataCubeEditorColumnSelectorColumnState,
-  type DataCubeEditorColumnSelectorState,
-} from '../../../stores/view/editor/DataCubeEditorColumnSelectorState.js';
-import { isNonNullable } from '@finos/legend-shared';
-import {
+  getAllNodes,
   getDataForAllFilteredNodes,
-  getDataForAllNodes,
 } from '../../../stores/view/grid/DataCubeGridClientEngine.js';
+import type { DataCubeViewState } from '../../../stores/view/DataCubeViewState.js';
+import {
+  FormAlert,
+  FormBadge_WIP,
+  FormCheckbox,
+} from '../../core/DataCubeFormUtils.js';
+import { DataCubeGridMode } from '../../../stores/core/DataCubeQueryEngine.js';
+import { DataCubeEditorColumnsSelectorColumnState } from '../../../stores/view/editor/DataCubeEditorColumnsSelectorState.js';
+import {
+  getColumnsSelectorBaseGridProps,
+  INTERNAL__EDITOR_COLUMNS_SELECTOR_ROW_HEIGHT,
+} from './DataCubeEditorColumnsSelector.js';
+import {
+  DataCubeEditorDimensionState,
+  type DataCubeEditorDimensionsPanelState,
+  type DataCubeEditorDimensionsTreeNode,
+} from '../../../stores/view/editor/DataCubeEditorDimensionsPanelState.js';
+import { TreeDataModule } from 'ag-grid-enterprise';
+import { _findCol } from '../../../stores/core/model/DataCubeColumn.js';
+import { AlertType } from '../../../stores/services/DataCubeAlertService.js';
+import { DEFAULT_ALERT_WINDOW_CONFIG } from '../../../stores/services/DataCubeLayoutService.js';
 
-function getBaseGridProps<
-  T extends DataCubeEditorColumnSelectorColumnState,
->(): AgGridReactProps<T> {
-  return {
-    modules: [AllCommunityModule],
-    className: 'ag-theme-quartz',
-    animateRows: false,
-    getRowId: (params) => params.data.name,
-    editType: 'fullRow',
-    rowDragMultiRow: true,
-    rowDragEntireRow: true,
-    rowSelection: {
-      mode: 'multiRow',
-      checkboxes: true,
-      headerCheckbox: true,
-      enableClickSelection: true,
-    },
-    selectionColumnDef: {
-      width: 40,
-      headerClass: '!pl-[23px]',
-      cellClass: '!pl-1.5',
-      rowDrag: true,
-      rowDragText: (params, dragItemCount) => {
-        if (dragItemCount > 1) {
-          return `${dragItemCount} columns`;
-        }
-        return (params.rowNode?.data as T).name;
-      },
-      sortable: false,
-      resizable: false,
-      suppressHeaderMenuButton: true,
-    },
-    suppressMoveWhenRowDragging: true,
-    rowHeight: 20,
-    headerHeight: 20,
-    suppressRowHoverHighlight: false,
-    noRowsOverlayComponent: (
-      params: CustomNoRowsOverlayProps<T> & {
-        noColumnsSelectedRenderer?: (() => React.ReactNode) | undefined;
-      },
-    ) => {
-      if (params.api.getQuickFilter()) {
-        return (
-          <div className="flex items-center border-[1.5px] border-neutral-300 p-2 font-semibold text-neutral-400">
-            <div>
-              <DataCubeIcon.WarningCircle className="mr-1 text-lg" />
-            </div>
-            No match found
-          </div>
-        );
-      }
-      if (params.noColumnsSelectedRenderer) {
-        return params.noColumnsSelectedRenderer();
-      }
-      return <div />;
-    },
-    // Show no rows overlay when there are no search results
-    // See https://stackoverflow.com/a/72637410
-    onModelUpdated: (event: ModelUpdatedEvent<T>) => {
-      if (event.api.getDisplayedRowCount() === 0) {
-        event.api.showNoRowsOverlay();
-      } else {
-        event.api.hideOverlay();
-      }
-    },
-  };
-}
+// NOTE: This is a workaround to prevent ag-grid license key check from flooding the console screen
+// with its stack trace in Chrome.
+// We MUST NEVER completely surpress this warning in production, else it's a violation of the ag-grid license!
+// See https://www.ag-grid.com/react-data-grid/licensing/
+const __INTERNAL__original_console_error = console.error; // eslint-disable-line no-console
 
-function getBaseColumnDef<
-  T extends DataCubeEditorColumnSelectorColumnState,
->(): ColDef<T> {
-  return {
-    field: 'name' as ColDefField<T>,
-    colId: 'name',
-    flex: 1,
-    minWidth: 100,
-    filter: true,
-    sortable: false,
-    resizable: false,
-    suppressHeaderMenuButton: true,
-    getQuickFilterText: (params) => params.value,
-  };
-}
+/**
+ * Move this display to a separate component to avoid re-rendering the header too frequently
+ */
+const AvailableColumnsSearchResultCountBadge = observer(
+  (props: { panel: DataCubeEditorDimensionsPanelState; gridApi: GridApi }) => {
+    const { panel, gridApi } = props;
+    return (
+      <div className="flex items-center justify-center rounded-lg bg-neutral-500 px-1 py-0.5 font-mono text-xs font-bold text-white">
+        {`${getDataForAllFilteredNodes(gridApi).length}/${panel.availableColumnsForDisplay.length}`}
+        <span className="hidden">
+          {/* subscribing to the search text to trigger re-render as it changes */}
+          {panel.availableColumnsSearchText}
+        </span>
+      </div>
+    );
+  },
+);
 
 /**
  * Move this display to a separate component to avoid re-rendering the header too frequently
  */
-const ColumnsSearchResultCountBadge = observer(
-  function ColumnsSearchResultCountBadge<
-    T extends DataCubeEditorColumnSelectorColumnState,
-  >(props: {
-    selector: DataCubeEditorColumnSelectorState<T>;
-    gridApi: GridApi<T>;
-    scope: 'available' | 'selected';
-  }) {
-    const { selector, gridApi, scope } = props;
+const DimensionsTreeSearchResultCountBadge = observer(
+  (props: { panel: DataCubeEditorDimensionsPanelState; gridApi: GridApi }) => {
+    const { panel, gridApi } = props;
     return (
       <div className="flex items-center justify-center rounded-lg bg-neutral-500 px-1 py-0.5 font-mono text-xs font-bold text-white">
-        {`${getDataForAllFilteredNodes(gridApi).length}/${scope === 'available' ? selector.availableColumnsForDisplay.length : selector.selectedColumnsForDisplay.length}`}
+        {`${
+          getDataForAllFilteredNodes(gridApi)
+            .map((node) => node.data)
+            .filter((node) => node instanceof DataCubeEditorDimensionState)
+            .length
+        }/${panel.dimensions.length}`}
         <span className="hidden">
-          {scope === 'available'
-            ? // subscribing to the search text to trigger re-render as it changes
-              selector.availableColumnsSearchText
-            : selector.selectedColumnsSearchText}
+          {/* subscribing to the search text to trigger re-render as it changes */}
+          {panel.dimensionsTreeSearchText}
         </span>
       </div>
     );
   },
 );
 
-export const DataCubeEditorColumnSelector = observer(
-  function DataCubeEditorColumnSelector<
-    T extends DataCubeEditorColumnSelectorColumnState,
-  >(props: {
-    selector: DataCubeEditorColumnSelectorState<T>;
-    columnLabelRenderer?:
-      | ((p: {
-          selector: DataCubeEditorColumnSelectorState<T>;
-          column: T;
-        }) => React.ReactNode)
-      | undefined;
-    columnActionRenderer?:
-      | ((p: {
-          selector: DataCubeEditorColumnSelectorState<T>;
-          column: T;
-        }) => React.ReactNode)
-      | undefined;
-    noColumnsSelectedRenderer?: (() => React.ReactNode) | undefined;
-  }) {
-    const {
-      selector,
-      columnLabelRenderer,
-      columnActionRenderer,
-      noColumnsSelectedRenderer,
-    } = props;
+/**
+ * Move this display to a separate component to avoid re-rendering too frequently
+ */
+const DimensionLabel = observer(
+  (props: {
+    panel: DataCubeEditorDimensionsPanelState;
+    dimension: DataCubeEditorDimensionState;
+    gridApi: GridApi;
+  }) => {
+    const { panel, dimension, gridApi } = props;
+    const nameInputRef = useRef<HTMLInputElement>(null);
+    const [name, setName] = useState(dimension.name);
+    const validationError =
+      name.trim() === ''
+        ? `Name is required`
+        : Boolean(
+              panel.dimensions
+                .filter((dim) => dim.name !== dimension.name)
+                .find((dim) => dim.name === name),
+            )
+          ? `Name must be unique`
+          : undefined;
+    const isNameValid = !validationError;
+
+    const updateName = () => {
+      if (!isNameValid) {
+        return;
+      }
+      dimension.setName(name);
+      dimension.setIsRenaming(false);
+      gridApi.clearFocusedCell();
+    };
+
+    useEffect(() => {
+      setName(dimension.name);
+    }, [dimension.name]);
+
+    useEffect(() => {
+      if (dimension.isRenaming) {
+        nameInputRef.current?.focus();
+      }
+    }, [dimension.isRenaming]);
+
+    return (
+      <div
+        className="flex h-full w-full items-center pl-1"
+        title={`[Dimension: ${dimension.name}]\nDouble-click to remove all columns`}
+      >
+        <div className="text-2xs flex h-3 flex-shrink-0 items-center justify-center rounded-sm bg-neutral-500 px-1 font-bold text-white">
+          DIM
+        </div>
+        {!dimension.isRenaming && (
+          <div
+            className="h-full flex-1 cursor-pointer items-center overflow-hidden overflow-ellipsis whitespace-nowrap pl-1"
+            title="Double-click to remove dimension"
+            /**
+             * ag-grid row select event listener is at a deeper layer so we need to stop
+             * the propagation as event capturing is happening, not when it's bubbling.
+             */
+            onDoubleClickCapture={(event) => {
+              event.stopPropagation();
+              dimension.setIsRenaming(true);
+              gridApi.clearFocusedCell();
+            }}
+          >
+            {dimension.name}
+          </div>
+        )}
+        {dimension.isRenaming && (
+          <div
+            className="relative flex items-center"
+            /**
+             * ag-grid row select event listener is at a deeper layer so we need to stop
+             * the propagation as event capturing is happening, not when it's bubbling.
+             */
+            onDoubleClickCapture={(event) => {
+              event.stopPropagation();
+              gridApi.clearFocusedCell();
+            }}
+          >
+            <input
+              ref={nameInputRef}
+              className={cn(
+                'ml-0.5 h-4 border border-neutral-300 pl-[1px] pr-6 focus:border-sky-600 focus:!outline-none',
+                {
+                  'border-red-600 focus:border-red-600': !isNameValid,
+                },
+              )}
+              value={name}
+              onChange={(event) => {
+                setName(event.target.value);
+              }}
+              onKeyDown={(event) => {
+                if (event.code === 'Escape') {
+                  nameInputRef.current?.focus();
+                  nameInputRef.current?.select();
+                }
+              }}
+              onKeyDownCapture={(event) => {
+                if (event.code === 'Enter') {
+                  event.stopPropagation();
+                  updateName();
+                }
+              }}
+              onBlur={() => {
+                dimension.setIsRenaming(false);
+                setName(dimension.name);
+              }}
+            />
+            {isNameValid && (
+              <button
+                className="text-2xs absolute right-0.5 flex h-3 w-5 items-center justify-center rounded-sm bg-sky-600 text-white"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  updateName();
+                }}
+              >
+                Save
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+function confirmPopulateStubDimensionWhenAddingColumns(
+  view: DataCubeViewState,
+  handler: () => void,
+) {
+  view.alertService.alert({
+    message: `No target dimensions to add columns to`,
+    text: `Columns need to be added to a dimension, but no dimension has been specified.\nDo you want to proceed with creating a new dimension and add the columns to it?`,
+    type: AlertType.WARNING,
+    actions: [
+      {
+        label: 'Proceed',
+        handler,
+      },
+      {
+        label: 'Cancel',
+        handler: () => {},
+      },
+    ],
+    windowConfig: {
+      ...DEFAULT_ALERT_WINDOW_CONFIG,
+      width: 550,
+      height: 180,
+    },
+  });
+}
+
+function computeDragOverNode<T = DataCubeEditorDimensionsTreeNode>(
+  event: RowDragEvent,
+) {
+  let overIndex = event.overIndex === -1 ? undefined : event.overIndex;
+
+  // if the drag point passes the middle of the row, we consider
+  // the spot to be the one before the row
+  if (
+    overIndex !== undefined &&
+    event.y % INTERNAL__EDITOR_COLUMNS_SELECTOR_ROW_HEIGHT <
+      INTERNAL__EDITOR_COLUMNS_SELECTOR_ROW_HEIGHT / 2
+  ) {
+    overIndex -= 1;
+  }
+
+  return {
+    overIndex,
+    overNode: (overIndex !== undefined
+      ? getAllNodes(event.api).at(overIndex === -1 ? 0 : overIndex)
+      : undefined) as IRowNode<T> | undefined,
+  };
+}
+
+export const DataCubeEditorDimensionsPanel = observer(
+  (props: { view: DataCubeViewState }) => {
+    const { view } = props;
+    const editor = view.editor;
+    const panel = editor.dimensions;
+
+    const searchAvailableColumnsInputRef = useRef<HTMLInputElement | null>(
+      null,
+    );
+    const searchDimensionsTreeInputRef = useRef<HTMLInputElement | null>(null);
     const [selectedAvailableColumns, setSelectedAvailableColumns] = useState<
-      T[]
+      DataCubeEditorColumnsSelectorColumnState[]
+    >([]);
+    const [selectedSelectedColumns, setSelectedSelectedColumns] = useState<
+      DataCubeEditorColumnsSelectorColumnState[]
+    >([]);
+    const [selectedDimensions, setSelectedDimensions] = useState<
+      DataCubeEditorDimensionState[]
     >([]);
-    const [selectedSelectedColumns, setSelectedSelectedColumns] = useState<T[]>(
-      [],
-    );
     const [availableColumnsGridApi, setAvailableColumnsGridApi] =
       useState<GridApi | null>(null);
-    const [selectedColumnsGridApi, setSelectedColumnsGridApi] =
+
+    const [dimensionsTreeGridApi, setDimensionsTreeGridApi] =
       useState<GridApi | null>(null);
-    const searchAvailableColumnsInputRef = useRef<HTMLInputElement | null>(
-      null,
-    );
-    const searchSelectedColumnsInputRef = useRef<HTMLInputElement | null>(null);
 
-    /**
-     * Since we use managed row dragging for selected columns,
-     * we just need to sync the row data with the state.
-     * Dragging (multiple) rows to specific position have been
-     * handled by ag-grid.
-     */
-    const onSelectedColumnsDragStop = useCallback(
-      (params: RowDragEndEvent<T>) => {
-        selector.setSelectedColumns(getDataForAllNodes(params.api));
+    const onAvailableColumnsExternalDragStop = useCallback(
+      (params: RowDragEvent<DataCubeEditorDimensionsTreeNode>) => {
+        // NOTE: here, we do not scope the columns being moved by the search
+        // this is a complicated behavior to implement and it's not clear if
+        // it's necessary, the current behavior is sensible in its own way.
+        const columnsToMove = params.nodes
+          .map((node) => node.data?.data)
+          .filter(filterByType(DataCubeEditorColumnsSelectorColumnState));
+        panel.deselectColumns(columnsToMove);
+        panel.refreshDimensionsTreeData();
       },
-      [selector],
+      [panel],
     );
 
-    const onAvailableColumnsDragStop = useCallback(
-      (params: RowDragEndEvent<T>) => {
-        const nodes = params.nodes;
-        const columnsToMove = nodes
+    const onDimensionsTreeExternalDragStop = useCallback(
+      (event: RowDragEvent<DataCubeEditorColumnsSelectorColumnState>) => {
+        const { overNode } = computeDragOverNode(event);
+
+        // NOTE: here, we do not scope the columns being moved by the search
+        // this is a complicated behavior to implement and it's not clear if
+        // it's necessary, the current behavior is sensible in its own way.
+        const columnsToMove = event.nodes
           .map((node) => node.data)
           .filter(isNonNullable);
-        selector.setSelectedColumns(
-          selector.selectedColumns.filter(
-            (column) => !columnsToMove.includes(column),
-          ),
-        );
-      },
-      [selector],
-    );
 
-    /**
-     * Since we use managed row dragging for selected columns,
-     * we just need to sync the row data with the state
-     * Dragging (multiple) rows to specific position have been
-     * handled by ag-grid.
-     */
-    const onSelectedColumnsDragEnd = useCallback(
-      (event: RowDragEndEvent) => {
-        if (event.overIndex === -1) {
-          return;
+        const dimension =
+          (!overNode?.data
+            ? undefined
+            : overNode.data.data instanceof DataCubeEditorDimensionState
+              ? overNode.data.data
+              : overNode.parent?.data?.data instanceof
+                  DataCubeEditorDimensionState
+                ? overNode.parent.data.data
+                : undefined) ?? panel.dimensions.at(-1);
+        if (dimension) {
+          // dropping position will be honored and affect columns
+          // ordering within the dimension accordingly
+          const colIdx =
+            overNode?.data?.data instanceof
+            DataCubeEditorColumnsSelectorColumnState
+              ? dimension.columns.indexOf(overNode.data.data)
+              : overNode?.data?.data instanceof DataCubeEditorDimensionState
+                ? -1
+                : undefined;
+          dimension.setColumns(
+            colIdx !== undefined
+              ? [
+                  ...dimension.columns.slice(0, colIdx + 1),
+                  ...columnsToMove,
+                  ...dimension.columns.slice(colIdx + 1),
+                ]
+              : [...dimension.columns, ...columnsToMove],
+          );
+
+          panel.refreshDimensionsTreeData();
+        } else {
+          confirmPopulateStubDimensionWhenAddingColumns(view, () => {
+            const newDimension = panel.newDimension();
+            newDimension.setColumns([...columnsToMove]);
+            panel.refreshDimensionsTreeData();
+          });
         }
-        selector.setSelectedColumns(getDataForAllNodes(event.api));
       },
-      [selector],
+      [panel, view],
     );
 
     /**
-     * Setup row drop zones for each grid to be the other
+     * Setup drop zones for each grid to allow moving columns between them
      * See https://www.ag-grid.com/react-data-grid/row-dragging-to-grid/
      */
     useEffect(() => {
-      if (!availableColumnsGridApi || !selectedColumnsGridApi) {
+      if (!availableColumnsGridApi || !dimensionsTreeGridApi) {
         return;
       }
-      const selectedColumnsDropZoneParams =
-        selectedColumnsGridApi.getRowDropZoneParams({
-          onDragStop: (event) => {
-            onSelectedColumnsDragStop(event);
-            availableColumnsGridApi.clearFocusedCell();
-          },
-        });
-      if (selectedColumnsDropZoneParams) {
-        availableColumnsGridApi.removeRowDropZone(
-          selectedColumnsDropZoneParams,
-        );
-        availableColumnsGridApi.addRowDropZone(selectedColumnsDropZoneParams);
+
+      const dimensionstreeDropZoneParams = !dimensionsTreeGridApi.isDestroyed()
+        ? dimensionsTreeGridApi.getRowDropZoneParams({
+            onDragStop: (event) => {
+              onDimensionsTreeExternalDragStop(event);
+              availableColumnsGridApi.clearFocusedCell();
+            },
+          })
+        : undefined;
+      if (
+        dimensionstreeDropZoneParams &&
+        !availableColumnsGridApi.isDestroyed()
+      ) {
+        availableColumnsGridApi.addRowDropZone(dimensionstreeDropZoneParams);
       }
 
       const availableColumnsDropZoneParams =
-        availableColumnsGridApi.getRowDropZoneParams({
-          onDragStop: (event) => {
-            onAvailableColumnsDragStop(event);
-            selectedColumnsGridApi.clearFocusedCell();
-          },
-        });
-      if (availableColumnsDropZoneParams) {
-        selectedColumnsGridApi.removeRowDropZone(
-          availableColumnsDropZoneParams,
-        );
-        selectedColumnsGridApi.addRowDropZone(availableColumnsDropZoneParams);
+        !availableColumnsGridApi.isDestroyed()
+          ? availableColumnsGridApi.getRowDropZoneParams({
+              onDragStop: (event) => {
+                onAvailableColumnsExternalDragStop(event);
+                dimensionsTreeGridApi.clearFocusedCell();
+              },
+            })
+          : undefined;
+      if (
+        availableColumnsDropZoneParams &&
+        !dimensionsTreeGridApi.isDestroyed()
+      ) {
+        dimensionsTreeGridApi.addRowDropZone(availableColumnsDropZoneParams);
       }
     }, [
       availableColumnsGridApi,
-      selectedColumnsGridApi,
-      onSelectedColumnsDragStop,
-      onAvailableColumnsDragStop,
+      dimensionsTreeGridApi,
+      onDimensionsTreeExternalDragStop,
+      onAvailableColumnsExternalDragStop,
     ]);
 
+    const [dimensionsTreeOnHoverIndex, setDimensionsTreeOnHoverIndex] =
+      useState<number | undefined>(undefined);
+
+    // This event will be triggered when user drops any node on the dimensions tree,
+    // regardless of the source, i.e. this includes columns from available columns grid
+    // so we have to guard against that case because the logic should already been handled
+    // by the drag stop hook in the external drop zone config for dimensions tree.
+    const isDimensionsTreeRowDragEnabled =
+      selectedDimensions.length === 0 || selectedSelectedColumns.length === 0;
+    const onDimensionsTreeRowDragEnd = useCallback(
+      (event: RowDragEvent<DataCubeEditorDimensionsTreeNode>) => {
+        const { overIndex, overNode } = computeDragOverNode(event);
+
+        setDimensionsTreeOnHoverIndex(undefined);
+
+        // NOTE: here, we do not scope the columns being moved by the search
+        // this is a complicated behavior to implement and it's not clear if
+        // it's necessary, the current behavior is sensible in its own way.
+        const dragEntities = event.nodes
+          .map(
+            (node) =>
+              // this assertion is valid because we also need to handle columns being dragged from external sources
+              node.data as
+                | DataCubeEditorDimensionsTreeNode
+                | DataCubeEditorColumnsSelectorColumnState,
+          )
+          .filter(
+            (data): data is DataCubeEditorDimensionsTreeNode =>
+              !(data instanceof DataCubeEditorDimensionState),
+          );
+
+        // we guard against DnD from the available columns grid to the dimensions tree
+        if (dragEntities.length === 0) {
+          return;
+        }
+
+        const dragColumns: DataCubeEditorColumnsSelectorColumnState[] = [];
+        const dragDimensions: DataCubeEditorDimensionState[] = [];
+        dragEntities.forEach((node) => {
+          if (node.data instanceof DataCubeEditorDimensionState) {
+            dragDimensions.push(node.data);
+          } else if (
+            node.data instanceof DataCubeEditorColumnsSelectorColumnState
+          ) {
+            dragColumns.push(node.data);
+          }
+        });
+
+        if (dragColumns.length > 0 && dragDimensions.length > 0) {
+          // we don't support DnD for a mixture of columns and dimensions
+          return;
+        }
+
+        // moving dimensions
+        if (dragDimensions.length > 0) {
+          // dropping position will be honored and affect dimensions ordering
+          let dimensionIdx: number | undefined = undefined;
+          if (overIndex === -1) {
+            dimensionIdx = -1;
+          } else if (overNode !== undefined) {
+            const dimension = !overNode.data
+              ? undefined
+              : overNode.data.data instanceof DataCubeEditorDimensionState
+                ? overNode.data.data
+                : overNode.parent?.data?.data instanceof
+                    DataCubeEditorDimensionState
+                  ? overNode.parent.data.data
+                  : undefined;
+            if (dimension) {
+              const _idx = panel.dimensions.indexOf(dimension);
+              // when compute the move position, account for dimensions which will be moved out
+              // these would shift the move position up.
+              dimensionIdx =
+                _idx === -1
+                  ? -1
+                  : _idx -
+                    panel.dimensions
+                      .slice(0, _idx + 1)
+                      .filter((dim) =>
+                        dragDimensions.find((_dim) => dim.name === _dim.name),
+                      ).length;
+            }
+          }
+
+          const dimensions = panel.dimensions.filter(
+            (dim) => !dragDimensions.find((_dim) => dim.name === _dim.name),
+          );
+          panel.setDimensions(
+            dimensionIdx !== undefined
+              ? [
+                  ...dimensions.slice(0, dimensionIdx + 1),
+                  ...dragDimensions,
+                  ...dimensions.slice(dimensionIdx + 1),
+                ]
+              : [...dimensions, ...dragDimensions],
+          );
+          panel.refreshDimensionsTreeData();
+          return;
+        }
+
+        // moving columns
+        if (dragColumns.length > 0) {
+          const dimension =
+            (!overNode?.data
+              ? undefined
+              : overNode.data.data instanceof DataCubeEditorDimensionState
+                ? overNode.data.data
+                : overNode.parent?.data?.data instanceof
+                    DataCubeEditorDimensionState
+                  ? overNode.parent.data.data
+                  : undefined) ?? panel.dimensions.at(-1);
+          if (dimension) {
+            // dropping position will be honored and affect columns
+            // ordering within the dimension accordingly
+            let colIdx: number | undefined = undefined;
+            if (overNode?.data?.data instanceof DataCubeEditorDimensionState) {
+              colIdx = -1;
+            } else if (
+              overNode?.data?.data instanceof
+              DataCubeEditorColumnsSelectorColumnState
+            ) {
+              const _idx = dimension.columns.indexOf(overNode.data.data);
+              // when compute the move position, account for columns which will be moved out
+              // these would shift the move position up.
+              colIdx =
+                _idx === -1
+                  ? -1
+                  : _idx -
+                    dimension.columns
+                      .slice(0, _idx + 1)
+                      .filter((col) => _findCol(dragColumns, col.name)).length;
+            }
+
+            panel.deselectColumns(dragColumns);
+            dimension.setColumns(
+              colIdx !== undefined
+                ? [
+                    ...dimension.columns.slice(0, colIdx + 1),
+                    ...dragColumns,
+                    ...dimension.columns.slice(colIdx + 1),
+                  ]
+                : [...dimension.columns, ...dragColumns],
+            );
+            panel.refreshDimensionsTreeData();
+          }
+
+          return;
+        }
+      },
+      [panel],
+    );
+    const onDimensionsTreeRowDragMove = useCallback(
+      (event: RowDragEvent<DataCubeEditorDimensionsTreeNode>) => {
+        const { overIndex, overNode } = computeDragOverNode(event);
+
+        setDimensionsTreeOnHoverIndex(overIndex);
+        event.api.refreshCells({
+          rowNodes: overNode ? [overNode] : [],
+          force: true, // since no data change is happening, we need to force refresh
+        });
+      },
+      [],
+    );
+    const onDimensionsTreeRowDragCancel = useCallback(
+      (event: RowDragEvent<DataCubeEditorDimensionsTreeNode>) => {
+        setDimensionsTreeOnHoverIndex(undefined);
+      },
+      [],
+    );
+    const onDimensionsTreeRowDragLeave = useCallback(
+      (event: RowDragEvent<DataCubeEditorDimensionsTreeNode>) => {
+        setDimensionsTreeOnHoverIndex(undefined);
+      },
+      [],
+    );
+
+    useEffect(() => {
+      // on load, reset all renaming state for all dimensions
+      panel.dimensions.forEach((dimension) => dimension.setIsRenaming(false));
+
+      // reset transient grid states
+      setDimensionsTreeOnHoverIndex(undefined);
+    }, [panel]);
+
+    // eslint-disable-next-line no-process-env
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.error = (message?: unknown, ...agrs: unknown[]) => {
+        console.debug(`%c ${message}`, 'color: silver'); // eslint-disable-line no-console
+      };
+    }
+
     return (
-      <div className="data-cube-column-selector flex h-full w-full">
-        <div className="h-full w-[calc(50%_-_20px)]">
-          <div className="flex h-5 items-center text-sm">
-            Available columns:
+      <div className="h-full w-full select-none p-2">
+        <div className="flex h-6">
+          <div className="flex h-6 items-center text-xl font-medium">
+            <DataCubeIcon.TableDimension />
+          </div>
+          <div className="ml-1 flex h-6 items-center text-xl font-medium">
+            Dimensions
+            <FormBadge_WIP />
           </div>
-          <div className="h-[calc(100%_-_20px)] rounded-sm border border-neutral-200">
-            <div className="relative h-6 border-b border-neutral-200">
-              <input
-                className="h-full w-full pl-10 pr-6 placeholder-neutral-400"
-                ref={searchAvailableColumnsInputRef}
-                placeholder="Click here to search..."
-                value={selector.availableColumnsSearchText}
-                onChange={(event) =>
-                  selector.setAvailableColumnsSearchText(event.target.value)
+        </div>
+        <div className="h-[calc(100%_-_24px)] w-full">
+          <div className="h-10 py-2">
+            <div className="flex h-6 w-full items-center">
+              <FormCheckbox
+                label="Enable multidimensional grid mode"
+                checked={
+                  editor.generalProperties.configuration.gridMode ===
+                  DataCubeGridMode.MULTIDIMENSIONAL
                 }
-                onKeyDown={(event) => {
-                  if (event.code === 'Escape') {
-                    event.stopPropagation();
-                    searchAvailableColumnsInputRef.current?.select();
-                    selector.setAvailableColumnsSearchText('');
+                onChange={() => {
+                  if (
+                    editor.generalProperties.configuration.gridMode ===
+                    DataCubeGridMode.MULTIDIMENSIONAL
+                  ) {
+                    editor.generalProperties.configuration.setGridMode(
+                      DataCubeGridMode.STANDARD,
+                    );
+                  } else {
+                    if (
+                      // only suggest converting vertical pivots if no dimensions have been specified
+                      editor.verticalPivots.selector.selectedColumns.length !==
+                        0 &&
+                      panel.dimensions.length === 0
+                    ) {
+                      view.alertService.alert({
+                        message: `Specified vertical pivots will be ignored in multidimensional grid mode.`,
+                        text: `Multidimensional grid mode will ignore any specified vertical pivots, essentially, vertical pivot columns can be considered as one dimension.\nFor convenience, these vertical pivots can be converted into a dimension, do you want this conversion to happen?`,
+                        type: AlertType.WARNING,
+                        actions: [
+                          {
+                            label: 'Yes',
+                            handler: () => {
+                              const groupByColumns =
+                                editor.verticalPivots.selector.selectedColumns;
+                              const newDimension = panel.newDimension();
+                              newDimension.setColumns(
+                                panel.availableColumns.filter((column) =>
+                                  _findCol(groupByColumns, column.name),
+                                ),
+                              );
+                              editor.verticalPivots.selector.setSelectedColumns(
+                                [],
+                              );
+                              panel.refreshDimensionsTreeData();
+
+                              editor.generalProperties.configuration.setGridMode(
+                                DataCubeGridMode.MULTIDIMENSIONAL,
+                              );
+                            },
+                          },
+                          {
+                            label: 'No',
+                            handler: () => {
+                              editor.generalProperties.configuration.setGridMode(
+                                DataCubeGridMode.MULTIDIMENSIONAL,
+                              );
+                            },
+                          },
+                        ],
+                        windowConfig: {
+                          ...DEFAULT_ALERT_WINDOW_CONFIG,
+                          width: 550,
+                          height: 220,
+                        },
+                      });
+                    } else {
+                      editor.generalProperties.configuration.setGridMode(
+                        DataCubeGridMode.MULTIDIMENSIONAL,
+                      );
+                    }
                   }
                 }}
               />
-              <div className="absolute left-0 top-0 flex h-6 w-10 items-center justify-center">
-                <DataCubeIcon.Search className="stroke-[3px] text-lg text-neutral-500" />
-              </div>
-              <button
-                className="absolute right-0 top-0 flex h-6 w-6 items-center justify-center text-neutral-500 disabled:text-neutral-300"
-                disabled={!selector.availableColumnsSearchText}
-                title="Clear search [Esc]"
-                onClick={() => {
-                  selector.setAvailableColumnsSearchText('');
-                  searchAvailableColumnsInputRef.current?.focus();
-                }}
-              >
-                <DataCubeIcon.X className="text-lg" />
-              </button>
             </div>
-            <div className="h-[calc(100%_-_24px)]">
-              <AgGridReact
-                theme="legacy"
-                {...getBaseGridProps<T>()}
-                // Disable managed row-dragging to disallow changing the order of columns
-                // and to make sure the row data and the available columns state are in sync
-                rowDragManaged={false}
-                onGridReady={(params) => setAvailableColumnsGridApi(params.api)}
-                onSelectionChanged={(event: SelectionChangedEvent<T>) => {
-                  setSelectedAvailableColumns(
-                    event.api
-                      .getSelectedNodes()
-                      .map((node) => node.data)
-                      .filter(isNonNullable),
-                  );
-                }}
-                // Using ag-grid quick filter is a cheap way to implement search
-                quickFilterText={selector.availableColumnsSearchText}
-                rowData={selector.availableColumnsForDisplay}
-                columnDefs={[
-                  {
-                    ...getBaseColumnDef<T>(),
-                    /**
-                     * Support double-click to add all (filtered by search) columns
-                     */
-                    headerComponent: (params: CustomCellRendererProps<T>) => (
+          </div>
+
+          {editor.generalProperties.configuration.gridMode !==
+            DataCubeGridMode.MULTIDIMENSIONAL && (
+            <FormAlert
+              message="Multidimensional grid mode is experimental"
+              type={AlertType.WARNING}
+              text={`This is an alternative grid view for DataCube with a different mode of interaction: dimensions (ordered list of columns to group by) are defined and will be used to explore data "top-down". Initially, the grid will show the root aggregation, then user can drill down into each dimension. This grid mode comes with the following limitations:
+- Specified vertical pivots will be ignored: essentially, vertical pivot can be considered as one dimension in this mode
+- No support for pagination
+- Initial view can take longer to materialize if drilldown is deep`}
+            />
+          )}
+          {editor.generalProperties.configuration.gridMode ===
+            DataCubeGridMode.MULTIDIMENSIONAL && (
+            <div className="flex h-[calc(100%_-_40px)] w-full">
+              <div className="data-cube-column-selector flex h-full w-full">
+                <div className="h-full w-[calc(50%_-_20px)]">
+                  <div className="flex h-5 items-center text-sm">
+                    Available columns:
+                  </div>
+                  <div className="h-[calc(100%_-_20px)] rounded-sm border border-neutral-200">
+                    <div className="relative h-6 border-b border-neutral-200">
+                      <input
+                        className="h-full w-full pl-10 pr-6 placeholder-neutral-400"
+                        ref={searchAvailableColumnsInputRef}
+                        placeholder="Search columns..."
+                        value={panel.availableColumnsSearchText}
+                        onChange={(event) =>
+                          panel.setAvailableColumnsSearchText(
+                            event.target.value,
+                          )
+                        }
+                        onKeyDown={(event) => {
+                          if (event.code === 'Escape') {
+                            event.stopPropagation();
+                            searchAvailableColumnsInputRef.current?.select();
+                            panel.setAvailableColumnsSearchText('');
+                          }
+                        }}
+                      />
+                      <div className="absolute left-0 top-0 flex h-6 w-10 items-center justify-center">
+                        <DataCubeIcon.Search className="stroke-[3px] text-lg text-neutral-500" />
+                      </div>
                       <button
-                        title="Double-click to add all columns"
-                        className="flex h-full w-full items-center justify-between pl-0.5"
-                        onDoubleClick={() => {
-                          // The columns being moved are scoped by the current search
-                          const filteredData = getDataForAllFilteredNodes(
-                            params.api,
-                          );
-                          selector.setSelectedColumns([
-                            ...selector.selectedColumns,
-                            ...filteredData,
-                          ]);
-                          params.api.clearFocusedCell();
+                        className="absolute right-0 top-0 flex h-6 w-6 items-center justify-center text-neutral-500 disabled:text-neutral-300"
+                        disabled={!panel.availableColumnsSearchText}
+                        title="Clear search [Esc]"
+                        onClick={() => {
+                          panel.setAvailableColumnsSearchText('');
+                          searchAvailableColumnsInputRef.current?.focus();
                         }}
                       >
-                        <div>{`[All Columns]`}</div>
-                        <ColumnsSearchResultCountBadge
-                          selector={selector}
-                          gridApi={params.api}
-                          scope="available"
-                        />
+                        <DataCubeIcon.X className="text-lg" />
                       </button>
-                    ),
-                    cellRenderer: (params: CustomCellRendererProps<T>) => {
-                      const data = params.data;
-                      if (!data) {
-                        return null;
+                    </div>
+                    <div className="h-[calc(100%_-_24px)]">
+                      <AgGridReact
+                        {...getColumnsSelectorBaseGridProps()}
+                        // Disable managed row-dragging to disallow changing the order of columns
+                        // and to make sure the row data and the available columns state are in sync
+                        rowDragManaged={false}
+                        onGridReady={(params) =>
+                          setAvailableColumnsGridApi(params.api)
+                        }
+                        onSelectionChanged={(event) => {
+                          setSelectedAvailableColumns(
+                            event.api
+                              .getSelectedNodes()
+                              .map((node) => node.data)
+                              .filter(isNonNullable),
+                          );
+                        }}
+                        // Using ag-grid quick filter is a cheap way to implement search
+                        quickFilterText={panel.availableColumnsSearchText}
+                        rowData={panel.availableColumnsForDisplay}
+                        rowClass="border-t border-b border-1 border-transparent"
+                        columnDefs={[
+                          {
+                            field: 'name',
+                            colId: 'name',
+                            flex: 1,
+                            minWidth: 100,
+                            filter: true,
+                            sortable: false,
+                            resizable: false,
+                            suppressHeaderMenuButton: true,
+                            getQuickFilterText: (params) => params.value,
+                            /**
+                             * Support double-click to add all (filtered by search) columns
+                             */
+                            headerComponent: (
+                              params: CustomCellRendererProps<DataCubeEditorColumnsSelectorColumnState>,
+                            ) => (
+                              <button
+                                title="Double-click to add all columns"
+                                className="flex h-full w-full items-center justify-between pl-0.5"
+                                onDoubleClick={() => {
+                                  // The columns being moved are scoped by the current search
+                                  const filteredNodes =
+                                    getDataForAllFilteredNodes(params.api);
+
+                                  const dimension = panel.dimensions.at(-1);
+                                  if (dimension) {
+                                    dimension.setColumns([
+                                      ...dimension.columns,
+                                      ...filteredNodes,
+                                    ]);
+                                    panel.refreshDimensionsTreeData();
+                                  } else {
+                                    confirmPopulateStubDimensionWhenAddingColumns(
+                                      view,
+                                      () => {
+                                        const newDimension =
+                                          panel.newDimension();
+                                        newDimension.setColumns([
+                                          ...filteredNodes,
+                                        ]);
+                                        panel.refreshDimensionsTreeData();
+                                      },
+                                    );
+                                  }
+
+                                  params.api.clearFocusedCell();
+                                }}
+                              >
+                                <div>{`[All Columns]`}</div>
+                                <AvailableColumnsSearchResultCountBadge
+                                  panel={panel}
+                                  gridApi={params.api}
+                                />
+                              </button>
+                            ),
+                            cellRenderer: (
+                              params: CustomCellRendererProps<DataCubeEditorColumnsSelectorColumnState>,
+                            ) => {
+                              const data = params.data;
+                              if (!data) {
+                                return null;
+                              }
+
+                              return (
+                                <div
+                                  className="flex h-full w-full cursor-pointer items-center"
+                                  title={`[${data.name}]\nDouble-click to add column`}
+                                  onDoubleClick={() => {
+                                    const dimension = panel.dimensions.at(-1);
+                                    if (dimension) {
+                                      dimension.setColumns([
+                                        ...dimension.columns,
+                                        data,
+                                      ]);
+                                      panel.refreshDimensionsTreeData();
+                                    } else {
+                                      confirmPopulateStubDimensionWhenAddingColumns(
+                                        view,
+                                        () => {
+                                          const newDimension =
+                                            panel.newDimension();
+                                          newDimension.setColumns([data]);
+                                          panel.refreshDimensionsTreeData();
+                                        },
+                                      );
+                                    }
+
+                                    params.api.clearFocusedCell();
+                                  }}
+                                >
+                                  <div className="h-full flex-1 items-center overflow-hidden overflow-ellipsis whitespace-nowrap pl-2">
+                                    {data.name}
+                                  </div>
+                                </div>
+                              );
+                            },
+                          },
+                        ]}
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div className="flex h-full w-10 items-center justify-center">
+                  <div className="flex flex-col">
+                    <button
+                      className="flex items-center justify-center rounded-sm border border-neutral-300 bg-neutral-100 text-neutral-500 hover:bg-neutral-200 disabled:bg-neutral-200 disabled:text-neutral-400"
+                      title="Add selected column(s)"
+                      /**
+                       * Support add selected (filtered by search) columns
+                       * We reset the selection after this operation
+                       */
+                      onClick={() => {
+                        if (
+                          !availableColumnsGridApi ||
+                          selectedAvailableColumns.length === 0
+                        ) {
+                          return;
+                        }
+
+                        // The columns being moved are scoped by the current search
+                        const filteredNodes = getDataForAllFilteredNodes(
+                          availableColumnsGridApi,
+                        );
+                        const columnsToMove = selectedAvailableColumns.filter(
+                          (column) => _findCol(filteredNodes, column.name),
+                        );
+
+                        const dimension = panel.dimensions.at(-1);
+                        if (dimension) {
+                          dimension.setColumns([
+                            ...dimension.columns,
+                            ...columnsToMove,
+                          ]);
+                          panel.refreshDimensionsTreeData();
+                        } else {
+                          confirmPopulateStubDimensionWhenAddingColumns(
+                            view,
+                            () => {
+                              const newDimension = panel.newDimension();
+                              newDimension.setColumns([...columnsToMove]);
+                              panel.refreshDimensionsTreeData();
+                            },
+                          );
+                        }
+
+                        availableColumnsGridApi.clearFocusedCell();
+                      }}
+                      disabled={
+                        !availableColumnsGridApi ||
+                        selectedAvailableColumns.length === 0
                       }
+                    >
+                      <DataCubeIcon.ChevronRight className="text-2xl" />
+                    </button>
+                    <button
+                      className="mt-2 flex items-center justify-center rounded-sm border border-neutral-300 bg-neutral-100 text-neutral-500 hover:bg-neutral-200 disabled:bg-neutral-200 disabled:text-neutral-400"
+                      title="Remove selected column(s)"
+                      /**
+                       * Support remove selected (filtered by search) columns
+                       * We reset the selection after this operation
+                       */
+                      onClick={() => {
+                        if (
+                          !dimensionsTreeGridApi ||
+                          selectedSelectedColumns.length === 0
+                        ) {
+                          return;
+                        }
 
-                      return (
-                        <div
-                          className="flex h-full w-full cursor-pointer items-center"
-                          title={`[${data.name}]\nDouble-click to add column`}
-                          onDoubleClick={() => {
-                            selector.setSelectedColumns([
-                              ...selector.selectedColumns,
-                              data,
+                        // The columns being moved are scoped by the current search
+                        const filteredNodes = getDataForAllFilteredNodes(
+                          dimensionsTreeGridApi,
+                        );
+                        const columnsToMove = selectedSelectedColumns.filter(
+                          (column) => _findCol(filteredNodes, column.name),
+                        );
+
+                        panel.deselectColumns(columnsToMove);
+                        panel.refreshDimensionsTreeData();
+                        dimensionsTreeGridApi.clearFocusedCell();
+                      }}
+                      disabled={
+                        !dimensionsTreeGridApi ||
+                        selectedSelectedColumns.length === 0
+                      }
+                    >
+                      <DataCubeIcon.ChevronLeft className="text-2xl" />
+                    </button>
+                  </div>
+                </div>
+                <div className="data-cube-tree-selector h-full w-[calc(50%_-_20px)]">
+                  <div className="flex h-5 items-center text-sm">
+                    Dimensions:
+                  </div>
+                  <div className="h-[calc(100%_-_20px)] rounded-sm border border-neutral-200">
+                    <div className="flex h-6">
+                      <div className="relative h-6 w-[calc(100%_-_124px)] border-b border-r border-neutral-200">
+                        <input
+                          className="h-full w-full pl-10 pr-6 placeholder-neutral-400"
+                          ref={searchDimensionsTreeInputRef}
+                          placeholder="Search..."
+                          value={panel.dimensionsTreeSearchText}
+                          onChange={(event) =>
+                            panel.setDimensionsTreeSearchText(
+                              event.target.value,
+                            )
+                          }
+                          onKeyDown={(event) => {
+                            if (event.code === 'Escape') {
+                              event.stopPropagation();
+                              searchDimensionsTreeInputRef.current?.select();
+                              panel.setDimensionsTreeSearchText('');
+                            }
+                          }}
+                        />
+                        <div className="absolute left-0 top-0 flex h-6 w-10 items-center justify-center">
+                          <DataCubeIcon.Search className="stroke-[3px] text-lg text-neutral-500" />
+                        </div>
+                        <button
+                          className="absolute right-0 top-0 flex h-6 w-6 items-center justify-center text-neutral-500 disabled:text-neutral-300"
+                          disabled={!panel.dimensionsTreeSearchText}
+                          title="Clear search [Esc]"
+                          onClick={() => {
+                            panel.setDimensionsTreeSearchText('');
+                            searchDimensionsTreeInputRef.current?.focus();
+                          }}
+                        >
+                          <DataCubeIcon.X className="text-lg" />
+                        </button>
+                      </div>
+                      <div className="flex h-6 items-center border-b border-neutral-200">
+                        <button
+                          className="flex h-6 w-6 items-center justify-center text-neutral-500 disabled:text-neutral-300"
+                          title="Add new dimension"
+                          onClick={() => {
+                            panel.newDimension();
+                            panel.refreshDimensionsTreeData();
+                          }}
+                        >
+                          <DataCubeIcon.Plus className="text-lg" />
+                        </button>
+                        <div className="h-3 w-[1px] bg-neutral-200" />
+                        <button
+                          className="flex h-6 w-6 items-center justify-center text-neutral-500 disabled:text-neutral-300"
+                          title="Move dimension(s) up"
+                          disabled={selectedDimensions.length === 0}
+                          onClick={() => {
+                            if (selectedDimensions.length === 0) {
+                              return;
+                            }
+
+                            const minIdx = Math.min(
+                              ...selectedDimensions.map((dimension) =>
+                                panel.dimensions.indexOf(dimension),
+                              ),
+                            );
+                            const precedings = [
+                              ...panel.dimensions.slice(
+                                0,
+                                Math.max(minIdx - 1, 0),
+                              ),
+                              // ensure moving dimensions maintain their relative ordering
+                              ...panel.dimensions
+                                .map((dimension) =>
+                                  selectedDimensions.find(
+                                    (dim) => dim.name === dimension.name,
+                                  ),
+                                )
+                                .filter(isNonNullable),
+                            ];
+
+                            panel.setDimensions([
+                              ...precedings,
+                              ...panel.dimensions.filter(
+                                (dimension) =>
+                                  !precedings.find(
+                                    (dim) => dim.name === dimension.name,
+                                  ),
+                              ),
                             ]);
-                            params.api.clearFocusedCell();
+
+                            panel.refreshDimensionsTreeData();
                           }}
                         >
-                          {columnLabelRenderer?.({
-                            selector,
-                            column: data,
-                          }) ?? (
-                            <div className="h-full flex-1 items-center overflow-hidden overflow-ellipsis whitespace-nowrap pl-2">
-                              {data.name}
-                            </div>
-                          )}
-                          <div className="flex h-full">
-                            {columnActionRenderer?.({
-                              selector,
-                              column: data,
-                            }) ?? null}
-                          </div>
-                        </div>
-                      );
-                    },
-                  },
-                ]}
-              />
-            </div>
-          </div>
-        </div>
-        <div className="flex h-full w-10 items-center justify-center">
-          <div className="flex flex-col">
-            <button
-              className="flex items-center justify-center rounded-sm border border-neutral-300 bg-neutral-100 text-neutral-500 hover:bg-neutral-200 disabled:bg-neutral-200 disabled:text-neutral-400"
-              title="Add selected columns"
-              /**
-               * Support add selected (filtered by search) columns
-               * We reset the selection after this operation
-               */
-              onClick={() => {
-                if (!availableColumnsGridApi) {
-                  return;
-                }
-                // The columns being moved are scoped by the current search
-                const filteredData = getDataForAllFilteredNodes(
-                  availableColumnsGridApi,
-                );
-                const columnsToMove = selectedAvailableColumns.filter(
-                  (column) => filteredData.includes(column),
-                );
-                selector.setSelectedColumns([
-                  ...selector.selectedColumns,
-                  ...columnsToMove,
-                ]);
-                availableColumnsGridApi.clearFocusedCell();
-              }}
-              disabled={selectedAvailableColumns.length === 0}
-            >
-              <DataCubeIcon.ChevronRight className="text-2xl" />
-            </button>
-            <button
-              className="mt-2 flex items-center justify-center rounded-sm border border-neutral-300 bg-neutral-100 text-neutral-500 hover:bg-neutral-200 disabled:bg-neutral-200 disabled:text-neutral-400"
-              title="Remove selected columns"
-              /**
-               * Support remove selected (filtered by search) columns
-               * We reset the selection after this operation
-               */
-              onClick={() => {
-                if (!selectedColumnsGridApi) {
-                  return;
-                }
-                // The columns being moved are scoped by the current search
-                const filteredData = getDataForAllFilteredNodes(
-                  selectedColumnsGridApi,
-                );
-                const columnsToMove = selectedSelectedColumns.filter((column) =>
-                  filteredData.includes(column),
-                );
-                selector.setSelectedColumns(
-                  selector.selectedColumns.filter(
-                    (column) => !columnsToMove.includes(column),
-                  ),
-                );
-                selectedColumnsGridApi.clearFocusedCell();
-              }}
-              disabled={selectedSelectedColumns.length === 0}
-            >
-              <DataCubeIcon.ChevronLeft className="text-2xl" />
-            </button>
-          </div>
-        </div>
-        <div className="h-full w-[calc(50%_-_20px)]">
-          <div className="flex h-5 items-center text-sm">Selected columns:</div>
-          <div className="h-[calc(100%_-_20px)] rounded-sm border border-neutral-200">
-            <div className="relative h-6 border-b border-neutral-200">
-              <input
-                className="h-full w-full pl-10 placeholder-neutral-400"
-                ref={searchSelectedColumnsInputRef}
-                placeholder="Click here to search..."
-                value={selector.selectedColumnsSearchText}
-                onChange={(event) =>
-                  selector.setSelectedColumnsSearchText(event.target.value)
-                }
-                onKeyDown={(event) => {
-                  if (event.code === 'Escape') {
-                    event.stopPropagation();
-                    selector.setSelectedColumnsSearchText('');
-                  }
-                }}
-              />
-              <div className="absolute left-0 top-0 flex h-6 w-10 items-center justify-center">
-                <DataCubeIcon.Search className="stroke-[3px] text-lg text-neutral-500" />
-              </div>
-              <button
-                className="absolute right-0 top-0 flex h-6 w-6 items-center justify-center text-neutral-500 disabled:text-neutral-300"
-                disabled={!selector.selectedColumnsSearchText}
-                title="Clear search [Esc]"
-                onClick={() => {
-                  selector.setSelectedColumnsSearchText('');
-                  searchSelectedColumnsInputRef.current?.focus();
-                }}
-              >
-                <DataCubeIcon.X className="text-lg" />
-              </button>
-            </div>
-            <div className="h-[calc(100%_-_24px)]">
-              <AgGridReact
-                theme="legacy"
-                {...getBaseGridProps<T>()}
-                // NOTE: technically, we don't want to enable managed row-dragging here
-                // but enabling this gives us free row moving management and interaction
-                // comes out of the box from ag-grid, we will just sync the state with
-                // grid row data afterwards to ensure consistency
-                rowDragManaged={true}
-                onRowDragEnd={onSelectedColumnsDragEnd}
-                onGridReady={(params) => setSelectedColumnsGridApi(params.api)}
-                onSelectionChanged={(event: SelectionChangedEvent<T>) => {
-                  setSelectedSelectedColumns(
-                    event.api
-                      .getSelectedNodes()
-                      .map((node) => node.data)
-                      .filter(isNonNullable),
-                  );
-                }}
-                // Using ag-grid quick filter is a cheap way to implement search
-                quickFilterText={selector.selectedColumnsSearchText}
-                noRowsOverlayComponentParams={{
-                  noColumnsSelectedRenderer,
-                }}
-                rowData={selector.selectedColumnsForDisplay}
-                columnDefs={[
-                  {
-                    ...getBaseColumnDef<T>(),
-                    /**
-                     * Support double-click to remove all (filtered by search) columns
-                     */
-                    headerComponent: (params: CustomCellRendererProps<T>) => (
-                      <button
-                        title="Double-click to remove all columns"
-                        className="flex h-full w-full items-center justify-between pl-0.5"
-                        onDoubleClick={() => {
-                          // The columns being moved are scoped by the current search
-                          const filteredData = getDataForAllFilteredNodes(
-                            params.api,
-                          );
-                          selector.setSelectedColumns(
-                            selector.selectedColumns.filter(
-                              (column) => !filteredData.includes(column),
-                            ),
-                          );
-                          params.api.clearFocusedCell();
-                        }}
-                      >
-                        <div>{`[All Columns]`}</div>
-                        <ColumnsSearchResultCountBadge
-                          selector={selector}
-                          gridApi={params.api}
-                          scope="selected"
-                        />
-                      </button>
-                    ),
-                    cellRenderer: (params: CustomCellRendererProps<T>) => {
-                      const data = params.data;
-                      if (!data) {
-                        return null;
-                      }
+                          <DataCubeIcon.ChevronUp className="text-lg" />
+                        </button>
+                        <div className="h-3 w-[1px] bg-neutral-200" />
+                        <button
+                          className="flex h-6 w-6 items-center justify-center text-neutral-500 disabled:text-neutral-300"
+                          title="Move dimension(s) down"
+                          disabled={selectedDimensions.length === 0}
+                          onClick={() => {
+                            if (selectedDimensions.length === 0) {
+                              return;
+                            }
 
-                      return (
-                        <div
-                          className="flex h-full w-full cursor-pointer items-center"
-                          title={`[${data.name}]\nDouble-click to add column`}
-                          onDoubleClick={() => {
-                            selector.setSelectedColumns(
-                              selector.selectedColumns.filter(
-                                (column) => column !== data,
+                            const maxIdx = Math.max(
+                              ...selectedDimensions.map((dimension) =>
+                                panel.dimensions.indexOf(dimension),
                               ),
                             );
-                            params.api.clearFocusedCell();
+                            const followings = [
+                              // ensure moving dimensions maintain their relative ordering
+                              ...panel.dimensions
+                                .map((dimension) =>
+                                  selectedDimensions.find(
+                                    (dim) => dim.name === dimension.name,
+                                  ),
+                                )
+                                .filter(isNonNullable),
+                              ...panel.dimensions.slice(
+                                Math.min(maxIdx + 1, panel.dimensions.length) +
+                                  1,
+                              ),
+                            ];
+
+                            panel.setDimensions([
+                              ...panel.dimensions.filter(
+                                (dimension) =>
+                                  !followings.find(
+                                    (dim) => dim.name === dimension.name,
+                                  ),
+                              ),
+                              ...followings,
+                            ]);
+
+                            panel.refreshDimensionsTreeData();
                           }}
                         >
-                          {columnLabelRenderer?.({
-                            selector,
-                            column: data,
-                          }) ?? (
-                            <div className="h-full flex-1 items-center overflow-hidden overflow-ellipsis whitespace-nowrap pl-2">
-                              {data.name}
+                          <DataCubeIcon.ChevronDown className="text-lg" />
+                        </button>
+                        <div className="h-3 w-[1px] bg-neutral-200" />
+                        <button
+                          className="flex h-6 w-6 items-center justify-center text-neutral-500 disabled:text-neutral-300"
+                          title="Remove dimension(s)"
+                          disabled={selectedDimensions.length === 0}
+                          onClick={() => {
+                            if (selectedDimensions.length === 0) {
+                              return;
+                            }
+
+                            selectedDimensions.at(0)?.setIsRenaming(true);
+                          }}
+                        >
+                          <DataCubeIcon.Pencil className="text-lg" />
+                        </button>
+                        <div className="h-3 w-[1px] bg-neutral-200" />
+                        <button
+                          className="flex h-6 w-6 items-center justify-center text-neutral-500 disabled:text-neutral-300"
+                          title="Rename dimension"
+                          disabled={selectedDimensions.length === 0}
+                          onClick={() => {
+                            if (selectedDimensions.length === 0) {
+                              return;
+                            }
+
+                            panel.setDimensions(
+                              panel.dimensions.filter(
+                                (dimension) =>
+                                  !selectedDimensions.find(
+                                    (dim) => dim.name === dimension.name,
+                                  ),
+                              ),
+                            );
+                            panel.refreshDimensionsTreeData();
+                          }}
+                        >
+                          <DataCubeIcon.Delete className="text-lg" />
+                        </button>
+                      </div>
+                    </div>
+                    <div className="h-[calc(100%_-_24px)]">
+                      <AgGridReact
+                        {...getColumnsSelectorBaseGridProps<DataCubeEditorDimensionsTreeNode>()}
+                        modules={[AllCommunityModule, TreeDataModule]}
+                        className="ag-theme-quartz"
+                        treeData={true}
+                        treeDataChildrenField="children"
+                        groupDefaultExpanded={-1} // expand all groups by default
+                        // Disable managed row-dragging to disallow changing the order of columns
+                        // and to make sure the row data and the available columns state are in sync
+                        onGridReady={(params) => {
+                          setDimensionsTreeGridApi(params.api);
+
+                          // eslint-disable-next-line no-process-env
+                          if (process.env.NODE_ENV !== 'production') {
+                            // restore original error logging
+                            console.error = __INTERNAL__original_console_error; // eslint-disable-line no-console
+                          }
+                        }}
+                        onSelectionChanged={(
+                          event: SelectionChangedEvent<DataCubeEditorDimensionsTreeNode>,
+                        ) => {
+                          const selectedNodes = event.api
+                            .getSelectedNodes()
+                            .map((node) => node.data)
+                            .filter(isNonNullable);
+                          const _selectedColumns: DataCubeEditorColumnsSelectorColumnState[] =
+                            [];
+                          const _selectedDimensions: DataCubeEditorDimensionState[] =
+                            [];
+                          selectedNodes.forEach((node) => {
+                            if (
+                              node.data instanceof DataCubeEditorDimensionState
+                            ) {
+                              _selectedDimensions.push(node.data);
+                            } else if (
+                              node.data instanceof
+                              DataCubeEditorColumnsSelectorColumnState
+                            ) {
+                              _selectedColumns.push(node.data);
+                            }
+                          });
+                          setSelectedDimensions(_selectedDimensions);
+                          setSelectedSelectedColumns(_selectedColumns);
+                        }}
+                        rowSelection={{
+                          mode: 'multiRow',
+                          groupSelects: 'self',
+                        }}
+                        columnDefs={[]}
+                        // Using ag-grid quick filter is a cheap way to implement search
+                        quickFilterText={panel.dimensionsTreeSearchText}
+                        rowData={panel.dimensionsTreeData.nodes}
+                        rowClassRules={{
+                          'border-t border-b border-1 border-transparent': () =>
+                            true,
+                          'border-b-sky-600': (params) => {
+                            return (
+                              dimensionsTreeOnHoverIndex !== undefined &&
+                              params.rowIndex === dimensionsTreeOnHoverIndex
+                            );
+                          },
+                          'border-t-sky-600': (params) => {
+                            return (
+                              dimensionsTreeOnHoverIndex === -1 &&
+                              params.rowIndex === 0
+                            );
+                          },
+                        }}
+                        autoGroupColumnDef={{
+                          headerName: 'Name',
+                          field: 'name',
+                          colId: 'name',
+                          flex: 1,
+                          minWidth: 100,
+                          filter: true,
+                          sortable: false,
+                          resizable: false,
+                          suppressHeaderMenuButton: true,
+                          suppressKeyboardEvent: (event) => {
+                            if (
+                              panel.dimensions.some(
+                                (dimension) => dimension.isRenaming,
+                              )
+                            ) {
+                              // only allow tabbing through the grid when renaming
+                              if (event.event.code === 'Tab') {
+                                return false;
+                              }
+                              return true;
+                            }
+                            return false;
+                          },
+                          getQuickFilterText: (params) => params.value,
+                          /**
+                           * Support double-click to remove all (filtered by search) columns
+                           */
+                          headerComponent: (
+                            params: CustomCellRendererProps,
+                          ) => (
+                            <button
+                              title="Double-click to remove all columns"
+                              className="flex h-full w-full items-center justify-between pl-0.5"
+                              onDoubleClick={() => {
+                                // The columns being moved are scoped by the current search
+                                const filteredNodes =
+                                  getDataForAllFilteredNodes(params.api);
+
+                                panel.deselectColumns(
+                                  panel.selectedColumns.filter((column) =>
+                                    _findCol(filteredNodes, column.name),
+                                  ),
+                                );
+                                panel.refreshDimensionsTreeData();
+                                params.api.clearFocusedCell();
+                              }}
+                            >
+                              <div>{`[All Dimensions]`}</div>
+                              <DimensionsTreeSearchResultCountBadge
+                                panel={panel}
+                                gridApi={params.api}
+                              />
+                            </button>
+                          ),
+                          onCellDoubleClicked: (params) => {
+                            if (
+                              params.data?.data instanceof
+                              DataCubeEditorDimensionState
+                            ) {
+                              params.data.data.setColumns([]);
+                              panel.refreshDimensionsTreeData();
+                              params.api.clearFocusedCell();
+                            }
+                          },
+                          cellRendererParams: {
+                            innerRenderer: (
+                              params: CustomCellRendererProps<DataCubeEditorDimensionsTreeNode>,
+                            ) => {
+                              const data = params.data;
+
+                              if (!data) {
+                                return null;
+                              }
+                              if (
+                                data.data instanceof
+                                DataCubeEditorDimensionState
+                              ) {
+                                return (
+                                  <DimensionLabel
+                                    panel={panel}
+                                    dimension={data.data}
+                                    gridApi={params.api}
+                                  />
+                                );
+                              }
+                              return (
+                                <div
+                                  className="flex h-full w-full cursor-pointer items-center"
+                                  title={`[${data.name}]\nDouble-click to remove column`}
+                                  onDoubleClick={() => {
+                                    if (
+                                      data.data instanceof
+                                      DataCubeEditorColumnsSelectorColumnState
+                                    ) {
+                                      panel.deselectColumns([data.data]);
+                                      panel.refreshDimensionsTreeData();
+                                    }
+                                    params.api.clearFocusedCell();
+                                  }}
+                                >
+                                  <div className="h-full flex-1 items-center overflow-hidden overflow-ellipsis whitespace-nowrap pl-1">
+                                    {data.name}
+                                  </div>
+                                </div>
+                              );
+                            },
+                          },
+                        }}
+                        noRowsOverlayComponent={(
+                          params: CustomNoRowsOverlayProps,
+                        ) => {
+                          if (params.api.getQuickFilter()) {
+                            return (
+                              <div className="flex items-center border-[1.5px] border-neutral-300 p-2 font-semibold text-neutral-400">
+                                <div>
+                                  <DataCubeIcon.WarningCircle className="mr-1 text-lg" />
+                                </div>
+                                No match found
+                              </div>
+                            );
+                          }
+                          return (
+                            <div className="flex items-center border-[1.5px] border-neutral-200 p-2 font-semibold text-neutral-400">
+                              <div>
+                                <DataCubeIcon.Warning className="mr-1 text-lg" />
+                              </div>
+                              No dimensions specified
                             </div>
-                          )}
-                          <div className="flex h-full">
-                            {columnActionRenderer?.({
-                              selector,
-                              column: data,
-                            }) ?? null}
-                          </div>
-                        </div>
-                      );
-                    },
-                  },
-                ]}
-              />
+                          );
+                        }}
+                        suppressRowDrag={!isDimensionsTreeRowDragEnabled}
+                        rowDragEntireRow={isDimensionsTreeRowDragEnabled}
+                        onRowDragEnd={onDimensionsTreeRowDragEnd}
+                        onRowDragMove={onDimensionsTreeRowDragMove}
+                        onRowDragCancel={onDimensionsTreeRowDragCancel}
+                        onRowDragLeave={onDimensionsTreeRowDragLeave}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
-          </div>
+          )}
         </div>
       </div>
     );