@finos/legend-application-repl 0.0.27 → 0.0.29

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

@@ -15,65 +15,156 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import type { REPLStore } from '../../../stores/dataCube/DataCubeStore.js';
 import { LicenseManager } from '@ag-grid-enterprise/core';
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
 import { ServerSideRowModelModule } from '@ag-grid-enterprise/server-side-row-model';
 import { RowGroupingModule } from '@ag-grid-enterprise/row-grouping';
 import { MenuModule } from '@ag-grid-enterprise/menu';
 import { AgGridReact } from '@ag-grid-community/react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import { useREPLStore } from '../../REPLStoreProvider.js';
+import { DataCubeIcon, Switch, cn } from '@finos/legend-art';
+import {
+  INTERNAL__GRID_CLIENT_HEADER_HEIGHT,
+  INTERNAL__GRID_CLIENT_ROW_BUFFER,
+  INTERNAL__GRID_CLIENT_ROW_HEIGHT,
+} from '../../../stores/dataCube/grid/DataCubeGridClientEngine.js';
 
 // 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, else it's a violation of the ag-grid license
+// 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/javascript-data-grid/licensing/
 const __INTERNAL__original_console_error = console.error; // eslint-disable-line no-console
-// eslint-disable-next-line no-process-env
-if (process.env.NODE_ENV === 'development') {
-  // eslint-disable-next-line no-console
-  console.error = (message?: unknown, ...optionalParams: unknown[]): void => {
-    console.log(message); // eslint-disable-line no-console
-  };
-}
+// eslint-disable-next-line no-console
+console.error = (message?: unknown, ...agrs: unknown[]): void => {
+  console.log(`%c ${message}`, 'color: silver'); // eslint-disable-line no-console
+};
 
-export const DataCubeGrid = observer((props: { editorStore: REPLStore }) => {
-  const { editorStore } = props;
-  const dataCubeState = editorStore.dataCubeState;
+export const DataCubeGrid = observer(() => {
+  const replStore = useREPLStore();
+  const dataCubeState = replStore.dataCubeState;
+  const grid = dataCubeState.grid;
+
+  const [scrollHintText, setScrollHintText] = useState('');
 
   useEffect(() => {
-    if (dataCubeState.grid.clientLicenseKey) {
-      LicenseManager.setLicenseKey(dataCubeState.grid.clientLicenseKey);
+    if (grid.clientLicenseKey) {
+      LicenseManager.setLicenseKey(grid.clientLicenseKey);
     }
-  }, [dataCubeState.grid.clientLicenseKey]);
+  }, [grid.clientLicenseKey]);
 
   return (
-    <>
-      <AgGridReact
-        rowGroupPanelShow="always"
-        suppressBrowserResizeObserver={true}
-        suppressScrollOnNewData={true}
-        alwaysMultiSort={true}
-        rowModelType="serverSide"
-        serverSideDatasource={dataCubeState.grid.clientDataSource}
-        suppressAggFuncInHeader={true}
-        suppressServerSideInfiniteScroll={true}
-        modules={[
-          // community
-          ClientSideRowModelModule,
-          // enterprise
-          ServerSideRowModelModule,
-          RowGroupingModule,
-          MenuModule,
-        ]}
-        onGridReady={(params): void => {
-          dataCubeState.grid.configureClient(params.api);
-          // eslint-disable-next-line no-process-env
-          if (process.env.NODE_ENV === 'development') {
+    <div className="data-cube-grid flex-1">
+      <div className="h-[calc(100%_-_20px)] w-full">
+        <AgGridReact
+          className="ag-theme-balham"
+          modules={[
+            // community
+            ClientSideRowModelModule,
+            // enterprise
+            ServerSideRowModelModule,
+            RowGroupingModule,
+            MenuModule,
+          ]}
+          onGridReady={(params): void => {
+            grid.configureClient(params.api);
+            // restore original error logging
             console.error = __INTERNAL__original_console_error; // eslint-disable-line no-console
-          }
-        }}
-        className="ag-theme-balham"
-      />
-    </>
+          }}
+          // -------------------------------------- ROW GROUPING --------------------------------------
+          rowGroupPanelShow="always"
+          suppressScrollOnNewData={true}
+          groupDisplayType="custom" // keeps the column set stable even when row grouping is used
+          suppressRowGroupHidesColumns={true} // keeps the column set stable even when row grouping is used
+          // -------------------------------------- PIVOT --------------------------------------
+          // pivotPanelShow="always"
+          // pivotMode={true}
+          // -------------------------------------- SERVER SIDE ROW MODEL --------------------------------------
+          rowModelType="serverSide"
+          serverSideDatasource={grid.clientDataSource}
+          // -------------------------------------- GENERIC --------------------------------------
+          suppressBrowserResizeObserver={true}
+          animateRows={false} // improve performance
+          // NOTE: since we shrink the spacing, more rows can be shown, as such, setting higher row
+          // buffer will improve scrolling performance, but compromise initial load and various
+          // actions performance
+          rowBuffer={INTERNAL__GRID_CLIENT_ROW_BUFFER}
+          rowHeight={INTERNAL__GRID_CLIENT_ROW_HEIGHT}
+          headerHeight={INTERNAL__GRID_CLIENT_HEADER_HEIGHT}
+          // Force multi-sorting since this is what the query supports anyway
+          alwaysMultiSort={true}
+          // Keeps the columns stable even when aggregation is used
+          suppressAggFuncInHeader={true}
+          // Show cursor position when scrolling
+          onBodyScroll={(event) => {
+            const rowCount = event.api.getDisplayedRowCount();
+            const range = event.api.getVerticalPixelRange();
+            const start = Math.max(
+              1,
+              Math.ceil(range.top / INTERNAL__GRID_CLIENT_ROW_HEIGHT) + 1,
+            );
+            const end = Math.min(
+              rowCount,
+              Math.floor(range.bottom / INTERNAL__GRID_CLIENT_ROW_HEIGHT),
+            );
+            setScrollHintText(`${start}-${end}/${rowCount}`);
+          }}
+          onBodyScrollEnd={() => setScrollHintText('')}
+        />
+      </div>
+      <div className="relative flex h-5 w-full justify-between border-b border-b-neutral-200 bg-neutral-100">
+        {Boolean(scrollHintText) && (
+          <div className="absolute -top-8 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>
+        )}
+        <div />
+        <div className="flex items-center">
+          <div className="select-none p-2 font-mono text-sm text-neutral-500">
+            {grid.clientDataSource.rowCount
+              ? `(${grid.clientDataSource.rowCount} rows)`
+              : ''}
+          </div>
+          <div className="h-3 w-[1px] bg-neutral-200" />
+          <button
+            className="flex h-full items-center p-2"
+            onClick={(): void =>
+              grid.setPaginationEnabled(!grid.isPaginationEnabled)
+            }
+          >
+            <Switch
+              checked={grid.isPaginationEnabled}
+              classes={{
+                root: 'p-0 w-6 h-5 flex items-center',
+                input: 'w-2',
+                checked: '!translate-x-2 ease-in-out duration-100 transition',
+                thumb: cn('w-2 h-2', {
+                  'bg-sky-600': grid.isPaginationEnabled,
+                  'bg-neutral-500': !grid.isPaginationEnabled,
+                }),
+                switchBase:
+                  'p-0.5 mt-1 translate-x-0 ease-in-out duration-100 transition',
+                track: cn('h-3 w-5 border', {
+                  '!bg-sky-100 border-sky-600': grid.isPaginationEnabled,
+                  '!bg-neutral-100 border-neutral-500':
+                    !grid.isPaginationEnabled,
+                }),
+              }}
+              disableRipple={true}
+              disableFocusRipple={true}
+            />
+            <div
+              className={cn('text-sm', {
+                'text-sky-600': grid.isPaginationEnabled,
+                'text-neutral-500': !grid.isPaginationEnabled,
+              })}
+            >
+              Pagination
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
   );
 });

package/src/server/REPLServerClient.ts

@@ -28,9 +28,9 @@ import type {
   RelationType,
   DataCubeExecutionInput,
   DataCubeExecutionResult,
+  DataCubeGetBaseQueryResult,
 } from './models/DataCubeEngineModels.js';
 import type { V1_ValueSpecification } from '@finos/legend-graph';
-import type { DataCubeQuery } from './models/DataCubeQuery.js';
 
 export class REPLServerClient {
   private readonly networkClient: NetworkClient;
@@ -72,7 +72,7 @@ export class REPLServerClient {
     return this.networkClient.post(`${this.dataCube}/getQueryCode`, input);
   }
 
-  async getBaseQuery(): Promise<PlainObject<DataCubeQuery>> {
+  async getBaseQuery(): Promise<PlainObject<DataCubeGetBaseQueryResult>> {
     return this.networkClient.get(`${this.dataCube}/getBaseQuery`);
   }
 

package/src/server/models/DataCubeEngineModels.ts

@@ -23,7 +23,7 @@ import {
   V1_serializeValueSpecification,
   V1_lambdaModelSchema,
 } from '@finos/legend-graph';
-import type { DataCubeQueryColumn } from './DataCubeQuery.js';
+import { DataCubeQuery, type DataCubeQueryColumn } from './DataCubeQuery.js';
 
 export class DataCubeGetQueryCodeInput {
   query!: V1_ValueSpecification; // TODO: @akphi - consider if we should update this to use Lambda instead
@@ -82,3 +82,25 @@ export type DataCubeExecutionResult = {
 export type RelationType = {
   columns: DataCubeQueryColumn[];
 };
+
+export class DataCubeGetBaseQueryResult {
+  query!: DataCubeQuery;
+  timestamp!: number;
+  partialQuery!: V1_ValueSpecification;
+  sourceQuery!: V1_ValueSpecification;
+
+  static readonly serialization = new SerializationFactory(
+    createModelSchema(DataCubeGetBaseQueryResult, {
+      partialQuery: custom(
+        (val) => V1_serializeValueSpecification(val, []),
+        (val) => V1_deserializeValueSpecification(val, []),
+      ),
+      query: usingModelSchema(DataCubeQuery.serialization.schema),
+      sourceQuery: custom(
+        (val) => V1_serializeValueSpecification(val, []),
+        (val) => V1_deserializeValueSpecification(val, []),
+      ),
+      timestamp: primitive(),
+    }),
+  );
+}

package/{lib/grid.css → src/stores/dataCube/DataCubeDefaultConfig.ts}

@@ -1,4 +1,4 @@
-/** @license @finos/legend-application-repl v0.0.27
+/**
  * Copyright (c) 2020-present, Goldman Sachs
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-@import"@ag-grid-community/styles/ag-grid.css";@import"@ag-grid-community/styles/ag-theme-balham.css"/*# sourceMappingURL=grid.css.map */
+export const DATA_CUBE_DEFAULT_REPORT_NAME = 'New Report';

package/src/stores/dataCube/DataCubeState.ts

@@ -14,35 +14,36 @@
  * limitations under the License.
  */
 
-import { flowResult } from 'mobx';
-import type { REPLStore } from './DataCubeStore.js';
+import type { REPLStore } from './REPLStore.js';
 import { DataCubeGridState } from './grid/DataCubeGridState.js';
 import { DataCubeEditorState } from './editor/DataCubeEditorState.js';
-import type { DataCubeQuery } from '../../server/models/DataCubeQuery.js';
 import { ActionState, assertErrorThrown } from '@finos/legend-shared';
 import { DataCubeEngine } from './core/DataCubeEngine.js';
 import { DataCubeQuerySnapshotManager } from './core/DataCubeQuerySnapshotManager.js';
-import { buildSnapshotFromQuery } from './core/DataCubeQueryAnalyzer.js';
 import type { LegendREPLApplicationStore } from '../LegendREPLBaseStore.js';
+import { DataCubeCoreState } from './core/DataCubeCoreState.js';
+import { validateAndBuildQuerySnapshot } from './core/DataCubeQuerySnapshotBuilder.js';
 
 export class DataCubeState {
-  readonly editorStore: REPLStore;
-  readonly applicationStore: LegendREPLApplicationStore;
+  readonly replStore: REPLStore;
+  readonly application: LegendREPLApplicationStore;
   readonly engine: DataCubeEngine;
   readonly snapshotManager: DataCubeQuerySnapshotManager;
+
+  readonly core: DataCubeCoreState;
   readonly grid: DataCubeGridState;
   readonly editor: DataCubeEditorState;
-  readonly initState = ActionState.create();
 
-  baseQuery!: DataCubeQuery;
+  readonly initState = ActionState.create();
 
-  constructor(editorStore: REPLStore) {
-    this.editorStore = editorStore;
-    this.applicationStore = editorStore.applicationStore;
-    this.engine = new DataCubeEngine(this.editorStore.client);
+  constructor(replStore: REPLStore) {
+    this.replStore = replStore;
+    this.application = replStore.applicationStore;
+    this.engine = new DataCubeEngine(this.replStore.client);
 
     // 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);
   }
@@ -50,19 +51,24 @@ export class DataCubeState {
   async initialize(): Promise<void> {
     this.initState.inProgress();
     try {
-      await flowResult(this.grid.initialize());
-      this.snapshotManager.registerSubscriber(this.grid);
-      this.snapshotManager.registerSubscriber(this.editor);
-
-      this.baseQuery = await this.engine.getBaseQuery();
-      const initialSnapshot = await buildSnapshotFromQuery(
-        this.baseQuery,
-        this.engine,
+      await Promise.all(
+        [this.core, this.editor, this.grid].map(async (state) => {
+          this.snapshotManager.registerSubscriber(state);
+          await state.initialize();
+        }),
+      );
+      const result = await this.engine.getBaseQuery();
+      const initialSnapshot = validateAndBuildQuerySnapshot(
+        result.partialQuery,
+        result.sourceQuery,
+        result.query,
       );
+      initialSnapshot.timestamp = result.timestamp;
       this.snapshotManager.broadcastSnapshot(initialSnapshot);
       this.initState.complete();
     } catch (error: unknown) {
       assertErrorThrown(error);
+      this.application.notificationService.notifyError(error);
       this.initState.fail();
     }
   }

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

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { action, makeObservable, observable } from 'mobx';
+import type { DataCubeState } from '../DataCubeState.js';
+import { DataCubeQuerySnapshotSubscriber } from './DataCubeQuerySnapshotSubscriber.js';
+import type { DataCubeQuerySnapshot } from './DataCubeQuerySnapshot.js';
+import { DATA_CUBE_DEFAULT_REPORT_NAME } from '../DataCubeDefaultConfig.js';
+import type { DataCubeQuery } from '../../../server/models/DataCubeQuery.js';
+import { formatDate } from '@finos/legend-shared';
+
+export class DataCubeCoreState extends DataCubeQuerySnapshotSubscriber {
+  baseQuery!: DataCubeQuery;
+  name = DATA_CUBE_DEFAULT_REPORT_NAME;
+  private startTime?: number | undefined;
+
+  constructor(dataCube: DataCubeState) {
+    super(dataCube);
+
+    makeObservable(this, {
+      name: observable,
+      setName: action,
+    });
+  }
+
+  setName(val: string): void {
+    this.name = val;
+  }
+
+  override async applySnapshot(snapshot: DataCubeQuerySnapshot): Promise<void> {
+    const data = snapshot.data;
+    this.setName(data.name);
+    if (!this.startTime) {
+      this.startTime = snapshot.timestamp;
+    }
+    this.application.layoutService.setWindowTitle(
+      `\u25A6 ${data.name}${this.startTime ? ` - ${formatDate(new Date(this.startTime), 'HH:mm:ss EEE MMM dd yyyy')}` : ''}`,
+    );
+  }
+
+  override async initialize(): Promise<void> {
+    // do nothing
+  }
+}

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

@@ -24,8 +24,10 @@ import {
   V1_buildExecutionResult,
 } from '@finos/legend-graph';
 import type { REPLServerClient } from '../../../server/REPLServerClient.js';
-import { type CompletionItem } from '../../../server/models/DataCubeEngineModels.js';
-import { DataCubeQuery } from '../../../server/models/DataCubeQuery.js';
+import {
+  DataCubeGetBaseQueryResult,
+  type CompletionItem,
+} from '../../../server/models/DataCubeEngineModels.js';
 import { guaranteeType } from '@finos/legend-shared';
 
 export class DataCubeEngine {
@@ -59,8 +61,8 @@ export class DataCubeEngine {
     );
   }
 
-  async getBaseQuery(): Promise<DataCubeQuery> {
-    return DataCubeQuery.serialization.fromJson(
+  async getBaseQuery(): Promise<DataCubeGetBaseQueryResult> {
+    return DataCubeGetBaseQueryResult.serialization.fromJson(
       await this.client.getBaseQuery(),
     );
   }