@finos/legend-application-repl 0.0.30 → 0.0.32

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

@@ -19,16 +19,37 @@ 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 { ClipboardModule } from '@ag-grid-enterprise/clipboard';
 import { MenuModule } from '@ag-grid-enterprise/menu';
 import { AgGridReact } from '@ag-grid-community/react';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useREPLStore } from '../../REPLStoreProvider.js';
-import { DataCubeIcon, Switch, cn } from '@finos/legend-art';
+import { DataCubeIcon, Switch, cn, Global, css } from '@finos/legend-art';
 import {
-  INTERNAL__GRID_CLIENT_HEADER_HEIGHT,
-  INTERNAL__GRID_CLIENT_ROW_BUFFER,
-  INTERNAL__GRID_CLIENT_ROW_HEIGHT,
+  generateBackgroundColorUtilityClassName,
+  generateFontCaseUtilityClassName,
+  generateFontFamilyUtilityClassName,
+  generateFontSizeUtilityClassName,
+  generateFontUnderlineUtilityClassName,
+  generateTextAlignUtilityClassName,
+  generateTextColorUtilityClassName,
+  INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME,
 } from '../../../stores/dataCube/grid/DataCubeGridClientEngine.js';
+import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';
+import {
+  DataCubeFont,
+  DataCubeFontCase,
+  DataCubeFontFormatUnderlineVariant,
+  DataCubeFontTextAlignment,
+  DEFAULT_ROW_BACKGROUND_COLOR,
+  DEFAULT_ROW_HIGHLIGHT_BACKGROUND_COLOR,
+} from '../../../stores/dataCube/core/DataCubeQueryEngine.js';
+import { isNonNullable } from '@finos/legend-shared';
+import type {
+  DataCubeConfiguration,
+  DataCubeConfigurationColorKey,
+} from '../../../stores/dataCube/core/DataCubeConfiguration.js';
+import { generateBaseGridOptions } from '../../../stores/dataCube/grid/DataCubeGridQuerySnapshotAnalyzer.js';
 
 // NOTE: This is a workaround to prevent ag-grid license key check from flooding the console screen
 // with its stack trace in Chrome.
@@ -40,12 +61,292 @@ console.error = (message?: unknown, ...agrs: unknown[]): void => {
   console.log(`%c ${message}`, 'color: silver'); // eslint-disable-line no-console
 };
 
-export const DataCubeGrid = observer(() => {
+function textColorStyle(
+  key: DataCubeConfigurationColorKey,
+  configuration: DataCubeConfiguration,
+) {
+  return `${Array.from(
+    new Set([
+      configuration[`${key}ForegroundColor`],
+      ...configuration.columns
+        .map((column) => column[`${key}ForegroundColor`])
+        .filter(isNonNullable),
+    ]).values(),
+  )
+    .map(
+      (color) =>
+        `.${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT} .${generateTextColorUtilityClassName(color, key)}{color:${color};}`,
+    )
+    .join('\n')}`;
+}
+
+function backgroundColorStyle(
+  key: DataCubeConfigurationColorKey,
+  configuration: DataCubeConfiguration,
+) {
+  return `${Array.from(
+    new Set([
+      configuration[`${key}BackgroundColor`],
+      ...configuration.columns
+        .map((column) => column[`${key}BackgroundColor`])
+        .filter(isNonNullable),
+    ]).values(),
+  )
+    .map(
+      (color) =>
+        `.${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT} .${generateBackgroundColorUtilityClassName(color, key)}{background-color:${color};}`,
+    )
+    .join('\n')};`;
+}
+
+export const DataCubeGridStyleController = observer(() => {
   const replStore = useREPLStore();
-  const dataCubeState = replStore.dataCubeState;
-  const grid = dataCubeState.grid;
+  const dataCube = replStore.dataCube;
+  const grid = dataCube.grid;
+  const configuration = grid.queryConfiguration;
 
-  const [scrollHintText, setScrollHintText] = useState('');
+  return (
+    <Global
+      styles={css`
+        .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT} {
+          --ag-odd-row-background-color: ${grid.queryConfiguration
+            .alternateRowsStandardMode && !grid.queryConfiguration.alternateRows
+            ? DEFAULT_ROW_HIGHLIGHT_BACKGROUND_COLOR
+            : DEFAULT_ROW_BACKGROUND_COLOR};
+          --ag-cell-horizontal-border: ${grid.queryConfiguration
+            .showVerticalGridLines
+            ? `1px solid
+            ${grid.queryConfiguration.gridLineColor}`
+            : 'none'};
+          --ag-row-border-color: ${grid.queryConfiguration
+            .showHorizontalGridLines
+            ? grid.queryConfiguration.gridLineColor
+            : 'transparent'};
+        }
+        .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT}
+          .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.HIGHLIGHT_ROW} {
+          background-color: ${grid.queryConfiguration.alternateRows
+            ? grid.queryConfiguration.alternateRowsColor
+            : DEFAULT_ROW_BACKGROUND_COLOR};
+        }
+        ${[
+          DataCubeFont.ARIAL,
+          DataCubeFont.ROBOTO,
+          DataCubeFont.ROBOTO_CONDENSED,
+        ]
+          .map(
+            (fontFamily) =>
+              `.${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT} .${generateFontFamilyUtilityClassName(fontFamily)}{font-family:${fontFamily},sans-serif;}`,
+          )
+          .join('\n')}
+        ${[
+          DataCubeFont.GEORGIA,
+          DataCubeFont.ROBOTO_SERIF,
+          DataCubeFont.TIMES_NEW_ROMAN,
+        ]
+          .map(
+            (fontFamily) =>
+              `.${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT} .${generateFontFamilyUtilityClassName(fontFamily)}{font-family:${fontFamily},serif;}`,
+          )
+          .join('\n')}
+        ${[
+          DataCubeFont.JERBRAINS_MONO,
+          DataCubeFont.ROBOTO_MONO,
+          DataCubeFont.UBUNTU_MONO,
+        ]
+          .map(
+            (fontFamily) =>
+              `.${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT} .${generateFontFamilyUtilityClassName(fontFamily)}{font-family:${fontFamily},monospace;}`,
+          )
+          .join('\n')}
+          .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.FONT_BOLD} {
+          font-weight: 700;
+        }
+        ${[
+          4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 32, 36,
+          48, 72,
+        ]
+          .map(
+            (fontSize) =>
+              `.${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT} .${generateFontSizeUtilityClassName(fontSize)}{font-size:${fontSize}px;}`,
+          )
+          .join('\n')}
+        .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT}
+          .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.FONT_ITALIC} {
+          font-style: italic;
+        }
+        ${[
+          DataCubeFontFormatUnderlineVariant.SOLID,
+          DataCubeFontFormatUnderlineVariant.DASHED,
+          DataCubeFontFormatUnderlineVariant.DOTTED,
+          DataCubeFontFormatUnderlineVariant.DOUBLE,
+          DataCubeFontFormatUnderlineVariant.WAVY,
+        ]
+          .map(
+            (variant) =>
+              `.${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT} .${generateFontUnderlineUtilityClassName(variant)}{text-decoration:underline ${variant};}`,
+          )
+          .join('\n')}
+        .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT} .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.FONT_STRIKETHROUGH} {
+          text-decoration: line-through;
+        }
+        ${[
+          DataCubeFontCase.LOWERCASE,
+          DataCubeFontCase.UPPERCASE,
+          DataCubeFontCase.CAPITALIZE,
+        ]
+          .map(
+            (fontCase) =>
+              `.${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT} .${generateFontCaseUtilityClassName(fontCase)}{text-transform:${fontCase};}`,
+          )
+          .join('\n')}
+        ${[
+          DataCubeFontTextAlignment.LEFT,
+          DataCubeFontTextAlignment.CENTER,
+          DataCubeFontTextAlignment.RIGHT,
+        ]
+          .map(
+            (alignment) =>
+              `.${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT} .${generateTextAlignUtilityClassName(alignment)}{text-align:${alignment};}`,
+          )
+          .join('\n')};
+        ${backgroundColorStyle('normal', configuration)}
+        ${backgroundColorStyle('zero', configuration)}
+        ${backgroundColorStyle('negative', configuration)}
+        ${backgroundColorStyle('error', configuration)}
+        ${textColorStyle('normal', configuration)}
+        ${textColorStyle('zero', configuration)}
+        ${textColorStyle('negative', configuration)}
+        ${textColorStyle('error', configuration)}
+        .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT}
+          .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.BLUR} {
+          filter: blur(3px);
+        }
+        .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT}
+          .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.BLUR}:hover {
+          filter: none;
+        }
+      `}
+    />
+  );
+});
+
+const DataCubeGridStatusBar = observer(() => {
+  const replStore = useREPLStore();
+  const dataCube = replStore.dataCube;
+  const grid = dataCube.grid;
+  const scrollHintText = grid.scrollHintText;
+
+  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>
+      )}
+      <div />
+      <div className="flex h-full items-center">
+        <div className="flex h-full items-center px-2 font-mono text-sm text-neutral-500">
+          {grid.clientDataSource.rowCount
+            ? `Rows: ${grid.clientDataSource.rowCount}`
+            : ''}
+        </div>
+        {grid.datasourceConfiguration.limit !== undefined &&
+          grid.queryConfiguration.showWarningForTruncatedResult && (
+            // TODO: if we want to properly warn if the data has been truncated due to row limit,
+            // this would require us to fetch n+1 rows when limit=n
+            // This is feature is not difficult to implement, but it would be implemented most cleanly
+            // when we change the query execution engine to return the total number of rows,
+            // so for now, we simply just warn about truncation whenever a limit != -1 is specified
+            <>
+              <div className="h-3 w-[1px] bg-neutral-200" />
+              <div className="flex h-full items-center px-2 text-orange-500">
+                <DataCubeIcon.Warning className="stroke-[3px]" />
+                <div className="ml-1 text-sm font-semibold">{`Results truncated to fit within row limit (${grid.datasourceConfiguration.limit})`}</div>
+              </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>
+  );
+});
+
+const DataCubeGridClient = observer(() => {
+  const replStore = useREPLStore();
+  const dataCube = replStore.dataCube;
+  const grid = dataCube.grid;
+
+  return (
+    <div className="relative h-[calc(100%_-_20px)] w-full">
+      <AgGridReact
+        className="data-cube-grid ag-theme-balham"
+        rowModelType="serverSide"
+        serverSideDatasource={grid.clientDataSource}
+        context={{
+          dataCube,
+        }}
+        onGridReady={(params): void => {
+          grid.configureClient(params.api);
+          // restore original error logging
+          console.error = __INTERNAL__original_console_error; // eslint-disable-line no-console
+        }}
+        modules={[
+          // community
+          ClientSideRowModelModule,
+          // enterprise
+          ServerSideRowModelModule,
+          RowGroupingModule,
+          MenuModule,
+          ClipboardModule,
+          RangeSelectionModule,
+        ]}
+        {...generateBaseGridOptions(dataCube)}
+      />
+    </div>
+  );
+});
+
+export const DataCubeGrid = observer(() => {
+  const replStore = useREPLStore();
+  const dataCube = replStore.dataCube;
+  const grid = dataCube.grid;
 
   useEffect(() => {
     if (grid.clientLicenseKey) {
@@ -54,117 +355,10 @@ export const DataCubeGrid = observer(() => {
   }, [grid.clientLicenseKey]);
 
   return (
-    <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
-          }}
-          // -------------------------------------- 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 className="flex-1">
+      <DataCubeGridStyleController />
+      <DataCubeGridClient />
+      <DataCubeGridStatusBar />
     </div>
   );
 });

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

@@ -0,0 +1,45 @@
+/**
+ * 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 {
+  useGridMenuItem,
+  type CustomMenuItemProps,
+} from '@ag-grid-community/react';
+import { WIP_Badge } from '../editor/DataCubeEditorShared.js';
+
+export function WIP_GridMenuItem({
+  name,
+  subMenu,
+  checked,
+}: CustomMenuItemProps) {
+  useGridMenuItem({
+    configureDefaults: () => true,
+  });
+
+  return (
+    <div>
+      <span className="ag-menu-option-part ag-menu-option-icon"></span>
+      <span className="ag-menu-option-part ag-menu-option-text !inline-flex items-center">
+        <span className="opacity-50">{name}</span>
+        <WIP_Badge />
+      </span>
+      <span className="ag-menu-option-part ag-menu-option-shortcut"></span>
+      <span className="ag-menu-option-part ag-menu-option-popup-pointer select-none">
+        {subMenu && <span className="ag-icon ag-icon-small-right"></span>}
+      </span>
+    </div>
+  );
+}