datacube: add support for column selection (#3329)

* datacube: basic support for columns selector * datacube: strictly separate grid and editor states * datacube: grid support for column selection and hiding * datacube: introduce column panel to the grid * datacube: make sure context menu is not stale * datacube: properly propagate column selection changes * bump dependencies * datacube: minor improvement for group-by
finos · Jul 10, 2024 · d442265 · d442265
1 parent 2b91a8b
commit d442265
Show file tree

Hide file tree

Showing 82 changed files with 2,172 additions and 1,315 deletions.
diff --git a/.changeset/green-trees-carry.md b/.changeset/green-trees-carry.md
@@ -0,0 +1,3 @@
+---
+'@finos/legend-application-repl': patch
+---
diff --git a/.changeset/large-bottles-mix.md b/.changeset/large-bottles-mix.md
@@ -0,0 +1,40 @@
+---
+'@finos/legend-application-pure-ide-deployment': patch
+'@finos/legend-extension-dsl-data-space-studio': patch
+'@finos/legend-application-studio-deployment': patch
+'@finos/legend-extension-store-service-store': patch
+'@finos/legend-vscode-extension-dependencies': patch
+'@finos/legend-application-query-deployment': patch
+'@finos/legend-application-studio-bootstrap': patch
+'@finos/legend-application-query-bootstrap': patch
+'@finos/legend-application-repl-deployment': patch
+'@finos/legend-extension-dsl-data-quality': patch
+'@finos/legend-extension-store-relational': patch
+'@finos/legend-server-showcase-deployment': patch
+'@finos/legend-extension-dsl-persistence': patch
+'@finos/legend-extension-store-flat-data': patch
+'@finos/legend-extension-dsl-data-space': patch
+'@finos/legend-extension-tracer-zipkin': patch
+'@finos/legend-extension-dsl-diagram': patch
+'@finos/legend-extension-dsl-service': patch
+'@finos/legend-application-pure-ide': patch
+'@finos/legend-extension-assortment': patch
+'@finos/legend-application-studio': patch
+'@finos/legend-extension-dsl-text': patch
+'@finos/legend-application-query': patch
+'@finos/legend-application-repl': patch
+'@finos/legend-server-showcase': patch
+'@finos/legend-query-builder': patch
+'@finos/legend-server-depot': patch
+'@finos/legend-application': patch
+'@finos/legend-server-sdlc': patch
+'@finos/legend-dev-utils': patch
+'@finos/stylelint-config-legend-studio': patch
+'@finos/legend-storage': patch
+'@finos/eslint-plugin-legend-studio': patch
+'@finos/legend-shared': patch
+'@finos/babel-preset-legend-studio': patch
+'@finos/legend-graph': patch
+'@finos/legend-lego': patch
+'@finos/legend-art': patch
+---
diff --git a/.changeset/ten-eagles-act.md b/.changeset/ten-eagles-act.md
@@ -0,0 +1,40 @@
+---
+'@finos/legend-application-pure-ide-deployment': patch
+'@finos/legend-extension-dsl-data-space-studio': patch
+'@finos/legend-application-studio-deployment': patch
+'@finos/legend-extension-store-service-store': patch
+'@finos/legend-vscode-extension-dependencies': patch
+'@finos/legend-application-query-deployment': patch
+'@finos/legend-application-studio-bootstrap': patch
+'@finos/legend-application-query-bootstrap': patch
+'@finos/legend-application-repl-deployment': patch
+'@finos/legend-extension-dsl-data-quality': patch
+'@finos/legend-extension-store-relational': patch
+'@finos/legend-server-showcase-deployment': patch
+'@finos/legend-extension-dsl-persistence': patch
+'@finos/legend-extension-store-flat-data': patch
+'@finos/legend-extension-dsl-data-space': patch
+'@finos/legend-extension-tracer-zipkin': patch
+'@finos/legend-extension-dsl-diagram': patch
+'@finos/legend-extension-dsl-service': patch
+'@finos/legend-application-pure-ide': patch
+'@finos/legend-extension-assortment': patch
+'@finos/legend-application-studio': patch
+'@finos/legend-extension-dsl-text': patch
+'@finos/legend-application-query': patch
+'@finos/legend-application-repl': patch
+'@finos/legend-server-showcase': patch
+'@finos/legend-query-builder': patch
+'@finos/legend-server-depot': patch
+'@finos/legend-application': patch
+'@finos/legend-server-sdlc': patch
+'@finos/legend-dev-utils': patch
+'@finos/stylelint-config-legend-studio': patch
+'@finos/legend-storage': patch
+'@finos/eslint-plugin-legend-studio': patch
+'@finos/legend-shared': patch
+'@finos/babel-preset-legend-studio': patch
+'@finos/legend-graph': patch
+'@finos/legend-lego': patch
+'@finos/legend-art': patch
+---
diff --git a/fixtures/legend-mock-server/package.json b/fixtures/legend-mock-server/package.json
@@ -35,7 +35,7 @@
     "eslint": "8.57.0",
     "nodemon": "3.1.4",
     "npm-run-all": "4.1.5",
-    "rimraf": "5.0.8",
+    "rimraf": "5.0.9",
     "typescript": "5.5.3"
   }
 }
diff --git a/package.json b/package.json
@@ -107,14 +107,14 @@
     "eslint": "8.57.0",
     "fs-extra": "11.2.0",
     "husky": "9.0.11",
-    "inquirer": "10.0.0",
+    "inquirer": "10.0.1",
     "jest": "29.7.0",
     "lint-staged": "15.2.7",
     "micromatch": "4.0.7",
     "npm-run-all": "4.1.5",
     "prettier": "3.3.2",
     "prettier-plugin-tailwindcss": "0.6.5",
-    "rimraf": "5.0.8",
+    "rimraf": "5.0.9",
     "sass": "1.77.6",
     "semver": "7.6.2",
     "sort-package-json": "2.10.0",

diff --git a/packages/babel-preset/package.json b/packages/babel-preset/package.json
@@ -41,7 +41,7 @@
   "devDependencies": {
     "cross-env": "7.0.3",
     "eslint": "8.57.0",
-    "rimraf": "5.0.8",
+    "rimraf": "5.0.9",
     "typescript": "5.5.3"
   },
   "peerDependencies": {

diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "cross-env": "7.0.3",
-    "rimraf": "5.0.8"
+    "rimraf": "5.0.9"
   },
   "peerDependencies": {
     "eslint": "^8.0.0",

diff --git a/packages/legend-application-pure-ide-deployment/package.json b/packages/legend-application-pure-ide-deployment/package.json
@@ -49,7 +49,7 @@
     "cross-env": "7.0.3",
     "eslint": "8.57.0",
     "npm-run-all": "4.1.5",
-    "rimraf": "5.0.8",
+    "rimraf": "5.0.9",
     "typescript": "5.5.3",
     "webpack": "5.92.1",
     "webpack-bundle-analyzer": "4.10.2",

diff --git a/packages/legend-application-pure-ide/package.json b/packages/legend-application-pure-ide/package.json
@@ -66,7 +66,7 @@
     "eslint": "8.57.0",
     "jest": "29.7.0",
     "npm-run-all": "4.1.5",
-    "rimraf": "5.0.8",
+    "rimraf": "5.0.9",
     "sass": "1.77.6",
     "typescript": "5.5.3"
   },

diff --git a/packages/legend-application-query-bootstrap/package.json b/packages/legend-application-query-bootstrap/package.json
@@ -66,7 +66,7 @@
     "cross-env": "7.0.3",
     "eslint": "8.57.0",
     "npm-run-all": "4.1.5",
-    "rimraf": "5.0.8",
+    "rimraf": "5.0.9",
     "sass": "1.77.6",
     "typescript": "5.5.3"
   },

diff --git a/packages/legend-application-query-deployment/package.json b/packages/legend-application-query-deployment/package.json
@@ -42,7 +42,7 @@
     "cross-env": "7.0.3",
     "eslint": "8.57.0",
     "npm-run-all": "4.1.5",
-    "rimraf": "5.0.8",
+    "rimraf": "5.0.9",
     "typescript": "5.5.3",
     "webpack": "5.92.1",
     "webpack-bundle-analyzer": "4.10.2",

diff --git a/packages/legend-application-query/package.json b/packages/legend-application-query/package.json
@@ -69,7 +69,7 @@
     "eslint": "8.57.0",
     "jest": "29.7.0",
     "npm-run-all": "4.1.5",
-    "rimraf": "5.0.8",
+    "rimraf": "5.0.9",
     "sass": "1.77.6",
     "typescript": "5.5.3"
   },

diff --git a/packages/legend-application-repl-deployment/package.json b/packages/legend-application-repl-deployment/package.json
@@ -50,7 +50,7 @@
     "cross-env": "7.0.3",
     "eslint": "8.57.0",
     "npm-run-all": "4.1.5",
-    "rimraf": "5.0.8",
+    "rimraf": "5.0.9",
     "tailwindcss": "3.4.4",
     "typescript": "5.5.3",
     "webpack": "5.92.1",

diff --git a/packages/legend-application-repl/package.json b/packages/legend-application-repl/package.json
@@ -45,16 +45,18 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@ag-grid-community/client-side-row-model": "32.0.0",
-    "@ag-grid-community/core": "32.0.0",
-    "@ag-grid-community/react": "32.0.0",
-    "@ag-grid-community/styles": "32.0.0",
-    "@ag-grid-enterprise/clipboard": "32.0.0",
-    "@ag-grid-enterprise/core": "32.0.0",
-    "@ag-grid-enterprise/menu": "32.0.0",
-    "@ag-grid-enterprise/range-selection": "32.0.0",
-    "@ag-grid-enterprise/row-grouping": "32.0.0",
-    "@ag-grid-enterprise/server-side-row-model": "32.0.0",
+    "@ag-grid-community/client-side-row-model": "32.0.1",
+    "@ag-grid-community/core": "32.0.1",
+    "@ag-grid-community/react": "32.0.1",
+    "@ag-grid-community/styles": "32.0.1",
+    "@ag-grid-enterprise/clipboard": "32.0.1",
+    "@ag-grid-enterprise/column-tool-panel": "32.0.1",
+    "@ag-grid-enterprise/core": "32.0.1",
+    "@ag-grid-enterprise/menu": "32.0.1",
+    "@ag-grid-enterprise/range-selection": "32.0.1",
+    "@ag-grid-enterprise/row-grouping": "32.0.1",
+    "@ag-grid-enterprise/server-side-row-model": "32.0.1",
+    "@ag-grid-enterprise/side-bar": "32.0.1",
     "@finos/legend-application": "workspace:*",
     "@finos/legend-art": "workspace:*",
     "@finos/legend-graph": "workspace:*",
@@ -78,7 +80,7 @@
     "eslint": "8.57.0",
     "jest": "29.7.0",
     "npm-run-all": "4.1.5",
-    "rimraf": "5.0.8",
+    "rimraf": "5.0.9",
     "sass": "1.77.6",
     "typescript": "5.5.3"
   },

diff --git a/packages/legend-application-repl/src/components/dataCube/DataCube.tsx b/packages/legend-application-repl/src/components/dataCube/DataCube.tsx
@@ -85,12 +85,12 @@ const DataCubeTitleBar = observer(() => {
 export const DataCube = observer(() => {
   const dataCubeStore = useREPLStore();
   const ref = useRef<HTMLDivElement>(null);
-  const applicationStore = useApplicationStore();
+  const application = useApplicationStore();
   const dataCube = dataCubeStore.dataCube;
 
   useEffect(() => {
-    dataCube.initialize().catch(applicationStore.logUnhandledError);
-  }, [dataCube, applicationStore]);
+    dataCube.initialize().catch(application.logUnhandledError);
+  }, [dataCube, application]);
 
   return (
     <div

diff --git a/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditor.tsx b/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditor.tsx
@@ -20,8 +20,8 @@ import { useREPLStore } from '../../REPLStoreProvider.js';
 import { DataCubeEditorSortsPanel } from './DataCubeEditorSortsPanel.js';
 import { DataCubeEditorGeneralPropertiesPanel } from './DataCubeEditorGeneralPropertiesPanel.js';
 import { DataCubeEditorColumnsPanel } from './DataCubeEditorColumnsPanel.js';
-import { DataCubeEditorVPivotsPanel } from './DataCubeEditorVPivotsPanel.js';
-import { DataCubeEditorHPivotsPanel } from './DataCubeEditorHPivotsPanel.js';
+import { DataCubeEditorVerticalPivotsPanel } from './DataCubeEditorVerticalPivotsPanel.js';
+import { DataCubeEditorHorizontalPivotsPanel } from './DataCubeEditorHorizontalPivotsPanel.js';
 import { DataCubeEditorFilterPanel } from './DataCubeEditorFilterPanel.js';
 import { DataCubeEditorExtendedColumnsPanel } from './DataCubeEditorExtendedColumnsPanel.js';
 import { DataCubeEditorCodePanel } from './DataCubeEditorCodePanel.js';
@@ -37,10 +37,10 @@ export const DataCubeEditor = observer(
     const selectedTab = editor.currentTab;
     const tabs = [
       DATA_CUBE_EDITOR_TAB.GENERAL_PROPERTIES,
+      DATA_CUBE_EDITOR_TAB.COLUMN_PROPERTIES,
       DATA_CUBE_EDITOR_TAB.FILTER,
       DATA_CUBE_EDITOR_TAB.EXTENDED_COLUMNS,
       DATA_CUBE_EDITOR_TAB.COLUMNS,
-      DATA_CUBE_EDITOR_TAB.COLUMN_PROPERTIES,
       DATA_CUBE_EDITOR_TAB.VERTICAL_PIVOTS,
       DATA_CUBE_EDITOR_TAB.HORIZONTAL_PIVOTS,
       DATA_CUBE_EDITOR_TAB.SORTS,
@@ -72,29 +72,29 @@ export const DataCubeEditor = observer(
             ))}
           </div>
           <div className="h-full w-full overflow-auto border border-neutral-300 bg-white">
+            {selectedTab === DATA_CUBE_EDITOR_TAB.GENERAL_PROPERTIES && (
+              <DataCubeEditorGeneralPropertiesPanel />
+            )}
+            {selectedTab === DATA_CUBE_EDITOR_TAB.COLUMN_PROPERTIES && (
+              <DataCubeEditorColumnPropertiesPanel />
+            )}
+            {selectedTab === DATA_CUBE_EDITOR_TAB.FILTER && (
+              <DataCubeEditorFilterPanel />
+            )}
+            {selectedTab === DATA_CUBE_EDITOR_TAB.EXTENDED_COLUMNS && (
+              <DataCubeEditorExtendedColumnsPanel />
+            )}
             {selectedTab === DATA_CUBE_EDITOR_TAB.COLUMNS && (
               <DataCubeEditorColumnsPanel />
             )}
             {selectedTab === DATA_CUBE_EDITOR_TAB.SORTS && (
               <DataCubeEditorSortsPanel />
             )}
             {selectedTab === DATA_CUBE_EDITOR_TAB.VERTICAL_PIVOTS && (
-              <DataCubeEditorVPivotsPanel />
+              <DataCubeEditorVerticalPivotsPanel />
             )}
             {selectedTab === DATA_CUBE_EDITOR_TAB.HORIZONTAL_PIVOTS && (
-              <DataCubeEditorHPivotsPanel />
-            )}
-            {selectedTab === DATA_CUBE_EDITOR_TAB.EXTENDED_COLUMNS && (
-              <DataCubeEditorExtendedColumnsPanel />
-            )}
-            {selectedTab === DATA_CUBE_EDITOR_TAB.FILTER && (
-              <DataCubeEditorFilterPanel />
-            )}
-            {selectedTab === DATA_CUBE_EDITOR_TAB.GENERAL_PROPERTIES && (
-              <DataCubeEditorGeneralPropertiesPanel />
-            )}
-            {selectedTab === DATA_CUBE_EDITOR_TAB.COLUMN_PROPERTIES && (
-              <DataCubeEditorColumnPropertiesPanel />
+              <DataCubeEditorHorizontalPivotsPanel />
             )}
             {selectedTab === DATA_CUBE_EDITOR_TAB.CODE && (
               <DataCubeEditorCodePanel />

diff --git a/...d-application-repl/src/components/dataCube/editor/DataCubeEditorColumnPropertiesPanel.tsx b/...d-application-repl/src/components/dataCube/editor/DataCubeEditorColumnPropertiesPanel.tsx
@@ -102,7 +102,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
         </div>
         <div className="flex h-full items-center pr-2">
           <DataCubeEditorCheckbox
-            label="Show advanced settings"
+            label="Show advanced settings?"
             checked={panel.showAdvancedSettings}
             onChange={() =>
               panel.setShowAdvancedSettings(!panel.showAdvancedSettings)
@@ -136,7 +136,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
               className="w-80"
               {...columnsDropdownProps}
             >
-              {panel.columns.map((column) => (
+              {panel.configurableColumns.map((column) => (
                 <DataCubeEditorDropdownMenuItem
                   key={column.name}
                   onClick={() => {
@@ -331,10 +331,10 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
                       Exclude from HPivot?
                     </div>
                     <DataCubeEditorCheckbox
-                      checked={selectedColumn.excludedFromHPivot}
+                      checked={selectedColumn.excludedFromHorizontalPivot}
                       onChange={() =>
-                        selectedColumn.setExcludedFromHPivot(
-                          !selectedColumn.excludedFromHPivot,
+                        selectedColumn.setExcludedFromHorizontalPivot(
+                          !selectedColumn.excludedFromHorizontalPivot,
                         )
                       }
                       disabled={true}
@@ -394,9 +394,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
                   onChange={() =>
                     selectedColumn.setHideFromView(!selectedColumn.hideFromView)
                   }
-                  disabled={true}
                 />
-                <WIP_Badge />
               </div>
 
               <div className="mt-2 flex h-5 w-full items-center">