@finos/legend-application-repl 0.0.32 → 0.0.33

package/src/components/dataCube/editor/{DataCubeEditorVPivotsPanel.tsx → DataCubeEditorVerticalPivotsPanel.tsx}

@@ -17,14 +17,11 @@
 import { DataCubeIcon } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import { useREPLStore } from '../../REPLStoreProvider.js';
-import { useEffect } from 'react';
-import { WIP_Badge } from './DataCubeEditorShared.js';
+import { DataCubeEditorColumnsSelector } from './DataCubeEditorColumnsSelector.js';
 
-export const DataCubeEditorVPivotsPanel = observer(() => {
+export const DataCubeEditorVerticalPivotsPanel = observer(() => {
   const replStore = useREPLStore();
-  const panel = replStore.dataCube.editor.sorts;
-
-  useEffect(() => {}, [panel]); // TODO: @akphi - remove this dummy useEffect
+  const panel = replStore.dataCube.editor.verticalPivots;
 
   return (
     <div className="h-full w-full select-none p-2">
@@ -34,10 +31,11 @@ export const DataCubeEditorVPivotsPanel = observer(() => {
         </div>
         <div className="ml-1 flex h-6 items-center text-xl font-medium">
           Vertical Pivots
-          <WIP_Badge />
         </div>
       </div>
-      <div className="flex h-[calc(100%_-_24px)] w-full"></div>
+      <div className="flex h-[calc(100%_-_24px)] w-full">
+        <DataCubeEditorColumnsSelector selector={panel.selector} />
+      </div>
     </div>
   );
 });

package/src/components/dataCube/grid/DataCubeGrid.tsx

@@ -21,7 +21,11 @@ import { ServerSideRowModelModule } from '@ag-grid-enterprise/server-side-row-mo
 import { RowGroupingModule } from '@ag-grid-enterprise/row-grouping';
 import { ClipboardModule } from '@ag-grid-enterprise/clipboard';
 import { MenuModule } from '@ag-grid-enterprise/menu';
+import { SideBarModule } from '@ag-grid-enterprise/side-bar';
+import { ColumnsToolPanelModule } from '@ag-grid-enterprise/column-tool-panel';
 import { AgGridReact } from '@ag-grid-community/react';
+import { CsvExportModule } from '@ag-grid-community/csv-export';
+import { ExcelExportModule } from '@ag-grid-enterprise/excel-export';
 import { useEffect } from 'react';
 import { useREPLStore } from '../../REPLStoreProvider.js';
 import { DataCubeIcon, Switch, cn, Global, css } from '@finos/legend-art';
@@ -49,7 +53,7 @@ import type {
   DataCubeConfiguration,
   DataCubeConfigurationColorKey,
 } from '../../../stores/dataCube/core/DataCubeConfiguration.js';
-import { generateBaseGridOptions } from '../../../stores/dataCube/grid/DataCubeGridQuerySnapshotAnalyzer.js';
+import { generateBaseGridOptions } from '../../../stores/dataCube/grid/DataCubeGridConfigurationBuilder.js';
 
 // NOTE: This is a workaround to prevent ag-grid license key check from flooding the console screen
 // with its stack trace in Chrome.
@@ -231,20 +235,39 @@ export const DataCubeGridStyleController = observer(() => {
   );
 });
 
-const DataCubeGridStatusBar = observer(() => {
+const DataCubeGridScroller = observer(() => {
   const replStore = useREPLStore();
   const dataCube = replStore.dataCube;
   const grid = dataCube.grid;
   const scrollHintText = grid.scrollHintText;
+  const gridClientSideBarElement = document.querySelector(
+    '.data-cube-grid .ag-side-bar',
+  );
+
+  return (
+    <div
+      className="absolute -top-9 flex items-center rounded-sm border border-neutral-300 bg-neutral-100 p-1 pr-2 text-neutral-500 shadow-sm"
+      style={{
+        right:
+          gridClientSideBarElement !== null
+            ? gridClientSideBarElement.getBoundingClientRect().width + 12
+            : 16,
+      }}
+    >
+      <DataCubeIcon.TableScroll className="text-lg" />
+      <div className="ml-1 font-mono text-sm">{scrollHintText ?? ''}</div>
+    </div>
+  );
+});
+
+const DataCubeGridStatusBar = observer(() => {
+  const replStore = useREPLStore();
+  const dataCube = replStore.dataCube;
+  const grid = dataCube.grid;
 
   return (
     <div className="relative flex h-5 w-full select-none justify-between border-b border-neutral-200 bg-neutral-100">
-      {Boolean(scrollHintText) && (
-        <div className="absolute -top-9 right-4 flex items-center rounded-sm border border-neutral-300 bg-neutral-100 p-1 pr-2 text-neutral-500 shadow-sm">
-          <DataCubeIcon.TableScroll className="text-lg" />
-          <div className="ml-1 font-mono text-sm">{scrollHintText}</div>
-        </div>
-      )}
+      {Boolean(grid.scrollHintText) && <DataCubeGridScroller />}
       <div />
       <div className="flex h-full items-center">
         <div className="flex h-full items-center px-2 font-mono text-sm text-neutral-500">
@@ -330,12 +353,16 @@ const DataCubeGridClient = observer(() => {
         modules={[
           // community
           ClientSideRowModelModule,
+          CsvExportModule,
           // enterprise
           ServerSideRowModelModule,
           RowGroupingModule,
           MenuModule,
           ClipboardModule,
           RangeSelectionModule,
+          SideBarModule,
+          ColumnsToolPanelModule,
+          ExcelExportModule,
         ]}
         {...generateBaseGridOptions(dataCube)}
       />

package/src/stores/dataCube/DataCubeState.ts

@@ -66,8 +66,8 @@ export class DataCubeState {
     // NOTE: snapshot manager must be instantiated before subscribers
     this.snapshotManager = new DataCubeQuerySnapshotManager(this);
     this.core = new DataCubeCoreState(this);
-    this.grid = new DataCubeGridState(this);
     this.editor = new DataCubeEditorState(this);
+    this.grid = new DataCubeGridState(this);
   }
 
   newTask(name: string): DataCubeTask {
@@ -86,10 +86,12 @@ export class DataCubeState {
     const task = this.newTask('Initializing');
     try {
       await Promise.all(
-        [this.core, this.editor, this.grid].map(async (state) => {
-          this.snapshotManager.registerSubscriber(state);
-          await state.initialize();
-        }),
+        [this.core, this.editor, this.grid, this.grid.controller].map(
+          async (state) => {
+            this.snapshotManager.registerSubscriber(state);
+            await state.initialize();
+          },
+        ),
       );
       const result = await this.infrastructure.engine.getBaseQuery();
       const initialSnapshot = validateAndBuildQuerySnapshot(

package/src/stores/dataCube/core/DataCubeConfiguration.ts

@@ -38,6 +38,7 @@ import {
   type DataCubeSelectionStat,
   type DataCubeColumnPinPlacement,
   type DataCubeFontCase,
+  type DataCubeAggregateFunction,
 } from './DataCubeQueryEngine.js';
 import { SerializationFactory, usingModelSchema } from '@finos/legend-shared';
 import { createModelSchema, list, optional, primitive } from 'serializr';
@@ -89,6 +90,9 @@ export class DataCubeColumnConfiguration {
   displayAsLink = false;
   linkLabelParameter?: string | undefined;
 
+  aggregateFunction?: DataCubeAggregateFunction | undefined;
+  excludedFromHorizontalPivot = false;
+
   constructor(name: string, type: string) {
     this.name = name;
     this.type = type;
@@ -96,6 +100,7 @@ export class DataCubeColumnConfiguration {
 
   static readonly serialization = new SerializationFactory(
     createModelSchema(DataCubeColumnConfiguration, {
+      aggregateFunction: optional(primitive()),
       blur: primitive(),
       decimals: optional(primitive()),
       displayAsLink: primitive(),
@@ -103,6 +108,7 @@ export class DataCubeColumnConfiguration {
       displayName: optional(primitive()),
       errorBackgroundColor: optional(primitive()),
       errorForegroundColor: optional(primitive()),
+      excludedFromHorizontalPivot: primitive(),
       fixedWidth: optional(primitive()),
       fontBold: optional(primitive()),
       fontCase: optional(primitive()),

package/src/stores/dataCube/core/DataCubeQueryBuilder.ts

@@ -51,9 +51,6 @@ import {
   type DataCubeQuerySnapshotFilterCondition,
   type DataCubeQuerySnapshotFilter,
   type DataCubeQuerySnapshot,
-  DataCubeQuerySnapshotSortOperation,
-  DataCubeQuerySnapshotFilterOperation,
-  DataCubeQueryFilterGroupOperation,
   _findCol,
   type DataCubeQuerySnapshotColumn,
   type DataCubeQuerySnapshotAggregateColumn,
@@ -71,6 +68,9 @@ import {
   DataCubeFunction,
   DEFAULT_LAMBDA_VARIABLE_NAME,
   INTERNAL__FILLER_COUNT_AGG_COLUMN_NAME,
+  DataCubeQuerySortOperation,
+  DataCubeQueryFilterOperation,
+  DataCubeQueryFilterGroupOperation,
   type DataCubeQueryFunctionMap,
 } from './DataCubeQueryEngine.js';
 
@@ -249,29 +249,29 @@ export function _filter(
     const _not = (fn: V1_AppliedFunction) =>
       _function(_name(DataCubeFunction.NOT), [fn]);
     switch (condition.operation) {
-      case DataCubeQuerySnapshotFilterOperation.EQUAL:
+      case DataCubeQueryFilterOperation.EQUAL:
         return _cond(DataCubeFunction.EQUAL, _val());
-      case DataCubeQuerySnapshotFilterOperation.GREATER_THAN:
+      case DataCubeQueryFilterOperation.GREATER_THAN:
         return _cond(DataCubeFunction.GREATER_THAN, _val());
-      case DataCubeQuerySnapshotFilterOperation.GREATER_THAN_OR_EQUAL:
+      case DataCubeQueryFilterOperation.GREATER_THAN_OR_EQUAL:
         return _cond(DataCubeFunction.GREATER_THAN_EQUAL, _val());
-      case DataCubeQuerySnapshotFilterOperation.LESS_THAN:
+      case DataCubeQueryFilterOperation.LESS_THAN:
         return _cond(DataCubeFunction.LESS_THAN, _val());
-      case DataCubeQuerySnapshotFilterOperation.LESS_THAN_OR_EQUAL:
+      case DataCubeQueryFilterOperation.LESS_THAN_OR_EQUAL:
         return _cond(DataCubeFunction.LESS_THAN_EQUAL, _val());
-      case DataCubeQuerySnapshotFilterOperation.CONTAINS:
+      case DataCubeQueryFilterOperation.CONTAINS:
         return _cond(DataCubeFunction.CONTAINS, _val());
-      case DataCubeQuerySnapshotFilterOperation.ENDS_WITH:
+      case DataCubeQueryFilterOperation.ENDS_WITH:
         return _cond(DataCubeFunction.ENDS_WITH, _val());
-      case DataCubeQuerySnapshotFilterOperation.STARTS_WITH:
+      case DataCubeQueryFilterOperation.STARTS_WITH:
         return _cond(DataCubeFunction.STARTS_WITH, _val());
-      case DataCubeQuerySnapshotFilterOperation.BLANK:
+      case DataCubeQueryFilterOperation.BLANK:
         return _cond(DataCubeFunction.IS_EMPTY);
-      case DataCubeQuerySnapshotFilterOperation.NOT_EQUAL:
+      case DataCubeQueryFilterOperation.NOT_EQUAL:
         return _not(_cond(DataCubeFunction.EQUAL, _val()));
-      case DataCubeQuerySnapshotFilterOperation.NOT_BLANK:
+      case DataCubeQueryFilterOperation.NOT_BLANK:
         return _not(_cond(DataCubeFunction.IS_EMPTY));
-      case DataCubeQuerySnapshotFilterOperation.NOT_CONTAINS:
+      case DataCubeQueryFilterOperation.NOT_CONTAINS:
         return _not(_cond(DataCubeFunction.CONTAINS, _val()));
       default:
         throw new UnsupportedOperationError(
@@ -419,7 +419,7 @@ export function buildExecutableQuery(
           data.sortColumns.map((col) =>
             _function(
               _name(
-                col.operation === DataCubeQuerySnapshotSortOperation.ASCENDING
+                col.operation === DataCubeQuerySortOperation.ASCENDING
                   ? DataCubeFunction.ASC
                   : DataCubeFunction.DESC,
               ),

package/src/stores/dataCube/core/DataCubeQueryEngine.ts

@@ -189,6 +189,31 @@ export enum DataCubeAggregateFunction {
   // custom
 }
 
+export enum DataCubeQueryFilterOperation {
+  EQUAL = 'equal',
+  NOT_EQUAL = 'notEqual',
+  GREATER_THAN = 'greaterThan',
+  GREATER_THAN_OR_EQUAL = 'greaterThanOrEqual',
+  LESS_THAN = 'lessThan',
+  LESS_THAN_OR_EQUAL = 'lessThanOrEqual',
+  BLANK = 'isEmpty',
+  NOT_BLANK = 'isNotEmpty',
+  CONTAINS = 'contains',
+  NOT_CONTAINS = 'notContains',
+  STARTS_WITH = 'startsWith',
+  ENDS_WITH = 'endsWith',
+}
+
+export enum DataCubeQueryFilterGroupOperation {
+  AND = 'and',
+  OR = 'or',
+}
+
+export enum DataCubeQuerySortOperation {
+  ASCENDING = 'ascending',
+  DESCENDING = 'descending',
+}
+
 export enum DataCubeColumnPinPlacement {
   LEFT = 'Left',
   RIGHT = 'Right',

package/src/stores/dataCube/core/DataCubeQuerySnapshot.ts

@@ -25,51 +25,17 @@ import {
   type PlainObject,
   type Writable,
 } from '@finos/legend-shared';
-
-export enum DataCubeQuerySnapshotAggregateFunction {
-  AVERAGE = 'average',
-  COUNT = 'count',
-  DISTINCT = 'distinct',
-  FIRST = 'first',
-  JOIN_STRINGS = 'joinStrings',
-  LAST = 'last',
-  MAX = 'max',
-  MIN = 'min',
-  SUM = 'sum',
-  STD_DEV_POPULATION = 'stdDevPopulation',
-  STD_DEV_SAMPLE = 'stdDevSample',
-  UNIQUE_VALUE_ONLY = 'uniqueValueOnly',
-}
-
-export enum DataCubeQuerySnapshotFilterOperation {
-  EQUAL = 'equal',
-  NOT_EQUAL = 'notEqual',
-  GREATER_THAN = 'greaterThan',
-  GREATER_THAN_OR_EQUAL = 'greaterThanOrEqual',
-  LESS_THAN = 'lessThan',
-  LESS_THAN_OR_EQUAL = 'lessThanOrEqual',
-  BLANK = 'isEmpty',
-  NOT_BLANK = 'isNotEmpty',
-  CONTAINS = 'contains',
-  NOT_CONTAINS = 'notContains',
-  STARTS_WITH = 'startsWith',
-  ENDS_WITH = 'endsWith',
-}
-
-export enum DataCubeQuerySnapshotSortOperation {
-  ASCENDING = 'ascending',
-  DESCENDING = 'descending',
-}
-
-export enum DataCubeQueryFilterGroupOperation {
-  AND = 'AND',
-  OR = 'OR',
-}
+import type {
+  DataCubeAggregateFunction,
+  DataCubeQueryFilterGroupOperation,
+  DataCubeQueryFilterOperation,
+  DataCubeQuerySortOperation,
+} from './DataCubeQueryEngine.js';
 
 export type DataCubeQuerySnapshotFilterCondition =
   DataCubeQuerySnapshotColumn & {
     value: unknown;
-    operation: DataCubeQuerySnapshotFilterOperation;
+    operation: DataCubeQueryFilterOperation;
   };
 
 export type DataCubeQuerySnapshotFilter = {
@@ -92,12 +58,12 @@ export type DataCubeQuerySnapshotExtendedColumn =
   };
 
 export type DataCubeQuerySnapshotSortColumn = DataCubeQuerySnapshotColumn & {
-  operation: DataCubeQuerySnapshotSortOperation;
+  operation: DataCubeQuerySortOperation;
 };
 
 export type DataCubeQuerySnapshotAggregateColumn =
   DataCubeQuerySnapshotColumn & {
-    function: DataCubeQuerySnapshotAggregateFunction;
+    function: DataCubeAggregateFunction;
   };
 
 export type DataCubeQuerySnapshotGroupBy = {
@@ -116,7 +82,7 @@ export type DataCubeQuerySnapshotData = {
   runtime: string;
   sourceQuery: PlainObject<V1_ValueSpecification>;
   configuration: PlainObject<DataCubeConfiguration>;
-  originalColumns: DataCubeQuerySnapshotColumn[];
+  sourceColumns: DataCubeQuerySnapshotColumn[];
   leafExtendedColumns: DataCubeQuerySnapshotExtendedColumn[];
   filter?: DataCubeQuerySnapshotFilter | undefined;
   groupBy?: DataCubeQuerySnapshotGroupBy | undefined;
@@ -154,13 +120,13 @@ export class DataCubeQuerySnapshot {
       runtime,
       sourceQuery,
       configuration,
-      originalColumns: [],
+      sourceColumns: [],
       leafExtendedColumns: [],
+      selectColumns: [],
       filter: undefined,
       groupBy: undefined,
       pivot: undefined,
       groupExtendedColumns: [],
-      selectColumns: [],
       sortColumns: [],
       limit: undefined,
     };
@@ -188,23 +154,18 @@ export class DataCubeQuerySnapshot {
    */
   stageCols(stage: DataCubeQuerySnapshotStage): DataCubeQuerySnapshotColumn[] {
     switch (stage) {
-      case 'leaf-extend':
-        return [...this.data.originalColumns];
       case 'filter':
+      case 'leaf-extend':
+        return [...this.data.sourceColumns];
+      case 'select':
+        return [...this.data.sourceColumns, ...this.data.leafExtendedColumns];
       case 'aggregation':
-        return [...this.data.originalColumns, ...this.data.leafExtendedColumns];
+        return [...this.data.selectColumns];
       case 'group-extend':
         // TODO: @akphi - add pivot columns
-        return [...this.data.originalColumns, ...this.data.leafExtendedColumns];
-      case 'select':
-        // TODO: @akphi - add pivot columns
-        return [
-          ...this.data.originalColumns,
-          ...this.data.leafExtendedColumns,
-          ...this.data.groupExtendedColumns,
-        ];
-      case 'sort':
         return [...this.data.selectColumns];
+      case 'sort':
+        return [...this.data.selectColumns, ...this.data.groupExtendedColumns];
       default:
         throw new IllegalStateError(`Unknown stage '${stage}'`);
     }

package/src/stores/dataCube/core/DataCubeQuerySnapshotBuilder.ts

@@ -36,7 +36,6 @@ import {
 import type { DataCubeQuery } from '../../../server/models/DataCubeQuery.js';
 import {
   DataCubeQuerySnapshot,
-  DataCubeQuerySnapshotSortOperation,
   type DataCubeQuerySnapshotColumn,
 } from './DataCubeQuerySnapshot.js';
 import {
@@ -47,6 +46,7 @@ import {
   type Clazz,
 } from '@finos/legend-shared';
 import {
+  DataCubeQuerySortOperation,
   DataCubeFunction,
   type DataCubeQueryFunctionMap,
 } from './DataCubeQueryEngine.js';
@@ -332,16 +332,21 @@ export function validateAndBuildQuerySnapshot(
   );
   const data = snapshot.data;
   const colsMap = new Map<string, DataCubeQuerySnapshotColumn>();
-  const _col = (colSpec: V1_ColSpec) =>
-    guaranteeNonNullable(colsMap.get(colSpec.name));
+  const _col = (colSpec: V1_ColSpec) => {
+    const column = guaranteeNonNullable(colsMap.get(colSpec.name));
+    return {
+      name: column.name,
+      type: column.type,
+    };
+  };
 
   // --------------------------------- SOURCE ---------------------------------
 
-  data.originalColumns = baseQuery.source.columns.map((col) => ({
+  data.sourceColumns = baseQuery.source.columns.map((col) => ({
     name: col.name,
     type: col.type,
   }));
-  data.originalColumns.map((col) => colsMap.set(col.name, col));
+  data.sourceColumns.map((col) => colsMap.set(col.name, col));
 
   // --------------------------------- FILTER ---------------------------------
   // TODO: @akphi - implement this
@@ -383,8 +388,8 @@ export function validateAndBuildQuerySnapshot(
           ..._col(_colSpecParam(sortColFunc, 0)),
           operation:
             _name(sortColFunc.function) === DataCubeFunction.ASC
-              ? DataCubeQuerySnapshotSortOperation.ASCENDING
-              : DataCubeQuerySnapshotSortOperation.DESCENDING,
+              ? DataCubeQuerySortOperation.ASCENDING
+              : DataCubeQuerySortOperation.DESCENDING,
         };
       },
     );

package/src/stores/dataCube/editor/DataCubeEditorColumnPropertiesPanelState.ts

@@ -20,7 +20,12 @@ import type { DataCubeQuerySnapshot } from '../core/DataCubeQuerySnapshot.js';
 import type { DataCubeQueryEditorPanelState } from './DataCubeEditorPanelState.js';
 import type { DataCubeEditorState } from './DataCubeEditorState.js';
 import { DataCubeMutableColumnConfiguration } from './DataCubeMutableConfiguration.js';
-import { getNonNullableEntry, type PlainObject } from '@finos/legend-shared';
+import {
+  getNonNullableEntry,
+  isNonNullable,
+  type PlainObject,
+} from '@finos/legend-shared';
+import type { DataCubeConfiguration } from '../core/DataCubeConfiguration.js';
 
 export class DataCubeEditorColumnPropertiesPanelState
   implements DataCubeQueryEditorPanelState
@@ -43,12 +48,29 @@ export class DataCubeEditorColumnPropertiesPanelState
 
       showAdvancedSettings: observable,
       setShowAdvancedSettings: action,
+
+      hiddenColumns: computed,
+      configurableColumns: computed,
     });
 
     this.editor = editor;
     this.dataCube = editor.dataCube;
   }
 
+  get hiddenColumns(): DataCubeMutableColumnConfiguration[] {
+    return this.columns.filter((column) => column.hideFromView);
+  }
+
+  get configurableColumns(): DataCubeMutableColumnConfiguration[] {
+    return this.columns
+      .filter((column) =>
+        this.editor.columns.selector.selectedColumns.find(
+          (col) => col.name === column.name,
+        ),
+      )
+      .sort((a, b) => a.name.localeCompare(b.name));
+  }
+
   getColumnConfiguration(
     colName: string | undefined,
   ): DataCubeMutableColumnConfiguration | undefined {
@@ -64,7 +86,7 @@ export class DataCubeEditorColumnPropertiesPanelState
   }
 
   get selectedColumn(): DataCubeMutableColumnConfiguration | undefined {
-    return this.columns.find(
+    return this.configurableColumns.find(
       (column) => column.name === this.selectedColumnName,
     );
   }
@@ -73,14 +95,19 @@ export class DataCubeEditorColumnPropertiesPanelState
     this.showAdvancedSettings = val;
   }
 
-  applySnaphot(snapshot: DataCubeQuerySnapshot): void {
+  applySnaphot(
+    snapshot: DataCubeQuerySnapshot,
+    configuration: DataCubeConfiguration,
+  ): void {
     this.setColumns(
       (snapshot.data.configuration as { columns: PlainObject[] }).columns.map(
         (column) => DataCubeMutableColumnConfiguration.create(column),
       ),
     );
     if (!this.selectedColumn && this.columns.length) {
-      this.setSelectedColumnName(getNonNullableEntry(this.columns, 0).name);
+      this.setSelectedColumnName(
+        getNonNullableEntry(this.configurableColumns, 0).name,
+      );
     }
   }
 
@@ -90,7 +117,12 @@ export class DataCubeEditorColumnPropertiesPanelState
   ): void {
     newSnapshot.data.configuration = {
       ...newSnapshot.data.configuration,
-      columns: this.columns.map((column) => column.serialize()),
+      // NOTE: make sure the order of column configurations is consistent with the order of selected columns
+      // as this would later be used to determine of order of displayed columns in the grid
+      columns: this.editor.columns.selector.selectedColumns
+        .map((col) => this.columns.find((column) => column.name === col.name))
+        .filter(isNonNullable)
+        .map((column) => column.serialize()),
     };
   }
 }