@finos/legend-cube-builder 0.0.4 → 0.0.6

package/src/components/grid/CubeDrilldownBar.tsx

@@ -0,0 +1,219 @@
+/**
+ * Copyright (c) 2026-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 {
+  Dialog,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalFooterButton,
+  ModalHeader,
+  TimesIcon,
+} from '@finos/legend-art';
+import {
+  type AggregationFunction,
+  foldColumnName,
+  getAggregationDisplayName,
+  getDefaultDrilldownAggregation,
+  getDrilldownAggregations,
+} from '@finos/legend-cube';
+import { observer } from 'mobx-react-lite';
+import { READ_ONLY_CUBE_TITLE } from '../../__lib__/LegendCubeLabels.js';
+import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import { CubeButton } from '../CubeButton.js';
+
+/** The value of the setting that leaves a column empty on group rows */
+const NO_AGGREGATION = '';
+
+/**
+ * How a group row shows each column of the run that isn't a level (PLAN
+ * §11.10): a function its type offers, or nothing; the default (a number's
+ * Sum, nothing for any other column) is marked
+ */
+export const CubeDrilldownSettingsDialog = observer(
+  (props: { editorState: CubeEditorState }) => {
+    const { editorState } = props;
+    const { grid } = editorState;
+    const { result } = editorState.execution;
+    const drilldown = grid.drilldown;
+    const darkMode =
+      !editorState.host.applicationStore.layoutService
+        .TEMPORARY__isLightColorThemeEnabled;
+    if (!result || !drilldown) {
+      return null;
+    }
+    const levels = new Set(drilldown.columns.map(foldColumnName));
+    const label = (fn: AggregationFunction | null, isDefault: boolean) =>
+      `${fn === null ? 'Nothing' : getAggregationDisplayName(fn)}${isDefault ? ' (default)' : ''}`;
+    return (
+      <Dialog open={grid.isSettingsShown} onClose={() => grid.closeSettings()}>
+        <Modal darkMode={darkMode} className="w-[520px] max-w-full">
+          <ModalHeader>
+            <div className="modal__title">Group rows</div>
+          </ModalHeader>
+          <ModalBody>
+            <p className="mb-2 text-base text-[var(--color-text-secondary)]">
+              {`What each group row shows in the columns the results don't drill down by.`}
+            </p>
+            <div
+              className="grid max-h-[50vh] grid-cols-[1fr_auto] items-center gap-x-3 gap-y-1 overflow-auto"
+              data-testid={LEGEND_CUBE_TEST_ID.DRILLDOWN_SETTINGS}
+            >
+              {result.schema.columns
+                .filter(({ name }) => !levels.has(foldColumnName(name)))
+                .map(({ name, type }) => {
+                  const fallback = getDefaultDrilldownAggregation(type);
+                  const current = drilldown.aggregationOf(name);
+                  return [
+                    <label
+                      key={`${name}:label`}
+                      htmlFor={`cube-drilldown-${name}`}
+                      className="truncate text-base"
+                      title={`${name} (${type.displayName})`}
+                    >
+                      {name}
+                    </label>,
+                    <select
+                      key={`${name}:select`}
+                      id={`cube-drilldown-${name}`}
+                      aria-label={`Group rows' ${name}`}
+                      className="h-6 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base text-[var(--color-text-primary)]"
+                      value={current ?? NO_AGGREGATION}
+                      disabled={editorState.readOnly}
+                      title={
+                        editorState.readOnly ? READ_ONLY_CUBE_TITLE : undefined
+                      }
+                      onChange={(event) =>
+                        grid.setAggregation(
+                          name,
+                          event.target.value === NO_AGGREGATION
+                            ? null
+                            : (event.target.value as AggregationFunction),
+                        )
+                      }
+                    >
+                      <option value={NO_AGGREGATION}>
+                        {label(null, fallback === null)}
+                      </option>
+                      {getDrilldownAggregations(type).map((fn) => (
+                        <option key={fn} value={fn}>
+                          {label(fn, fallback === fn)}
+                        </option>
+                      ))}
+                    </select>,
+                  ];
+                })}
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              darkMode={darkMode}
+              formatText={false}
+              type="secondary"
+              text="Close"
+              onClick={() => grid.closeSettings()}
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);
+
+/**
+ * The drill-down above the grid in server-side mode (PLAN §11.10): its
+ * levels, outermost first, each removable; what it can't use, and why; the
+ * group rows' settings; and Clear. Shown while the cube has a drill-down.
+ */
+export const CubeDrilldownBar = observer(
+  (props: { editorState: CubeEditorState }) => {
+    const { editorState } = props;
+    const { grid } = editorState;
+    const saved = editorState.document.meta.drilldown;
+    const drilldown = grid.drilldown;
+    if (
+      !saved ||
+      !drilldown ||
+      (!saved.columns.length && !drilldown.problems.length)
+    ) {
+      return null;
+    }
+    const { readOnly } = editorState;
+    return (
+      <div
+        className="flex min-h-8 shrink-0 flex-wrap items-center gap-2 border-b border-[var(--color-border-default)] px-2 py-1 text-base"
+        data-testid={LEGEND_CUBE_TEST_ID.DRILLDOWN_BAR}
+      >
+        <span className="text-[var(--color-text-secondary)]">
+          Drill down by
+        </span>
+        {drilldown.columns.map((column, index) => (
+          <span key={column} className="flex items-center gap-1">
+            {index > 0 && (
+              <span className="text-[var(--color-text-muted)]">›</span>
+            )}
+            <span className="flex items-center gap-1 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-elevated)] px-1">
+              {column}
+              <button
+                type="button"
+                className="text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] disabled:opacity-50"
+                aria-label={`Stop drilling down by ${column}`}
+                title={
+                  readOnly
+                    ? READ_ONLY_CUBE_TITLE
+                    : `Stop drilling down by ${column}`
+                }
+                disabled={readOnly}
+                onClick={() =>
+                  grid.removeLevel(
+                    saved.columns.findIndex(
+                      (level) =>
+                        foldColumnName(level) === foldColumnName(column),
+                    ),
+                  )
+                }
+              >
+                <TimesIcon />
+              </button>
+            </span>
+          </span>
+        ))}
+        {drilldown.problems.length > 0 && (
+          <span
+            className="text-[var(--color-status-warn)]"
+            role="status"
+            title={drilldown.problems.join('\n')}
+          >
+            {drilldown.problems.length === 1
+              ? drilldown.problems[0]
+              : `${drilldown.problems.length} drill-down settings can't be used here.`}
+          </span>
+        )}
+        <span className="flex-1" />
+        <CubeButton onClick={() => grid.openSettings()}>Group rows…</CubeButton>
+        <CubeButton
+          disabled={readOnly}
+          title={readOnly ? READ_ONLY_CUBE_TITLE : 'Stop drilling down'}
+          onClick={() => grid.clearDrilldown()}
+        >
+          Clear
+        </CubeButton>
+        <CubeDrilldownSettingsDialog editorState={editorState} />
+      </div>
+    );
+  },
+);

package/src/components/grid/CubeGridRegion.tsx

@@ -22,18 +22,32 @@ import { getCubeWarehouseErrorHint } from '../../__lib__/LegendCubeDataProductLa
 import {
   CUBE_PENDING_LABEL,
   formatDisabledReasons,
+  getLevelTruncationMessage,
   getRowLimitError,
   getTruncationMessage,
   ROW_LIMIT_WARNING_THRESHOLD,
 } from '../../__lib__/LegendCubeLabels.js';
 import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import {
+  CUBE_TOUR_ANCHOR,
+  cubeTourAnchor,
+} from '../../__lib__/LegendCubeTour.js';
 import {
   CubeDataProductRunErrorKind,
   type CubeDataProductRuntimeState,
 } from '../../stores/CubeDataProductRuntimeState.js';
+import type { CubeEngineError } from '../../graph-manager/CubeEngine.js';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import type { CubeExecutionResult } from '../../stores/CubeExecutionState.js';
 import { CubeButton } from '../CubeButton.js';
+import { CubeGridMode } from '../../stores/CubeGridState.js';
+import { parseWholeNumberText } from '../../stores/editors/CubeIntegerText.js';
 import { CubeResultGrid } from './CubeResultGrid.js';
+import { CubeColumnFormatDialog } from './CubeColumnFormatDialog.js';
+import { CubeDrilldownBar } from './CubeDrilldownBar.js';
+import { CubeSqlDialog } from './CubeSqlDialog.js';
+import { CubeRunStatsPanel } from './CubeRunStatsPanel.js';
+import { CubeServerSideGrid } from './CubeServerSideGrid.js';
 import { formatDuration } from './CubeGridValues.js';
 
 /** The first line of an error is shown, at most this long; the rest is under Details */
@@ -45,14 +59,18 @@ const CubeRowLimitInput = observer(
     const [draft, setDraft] = useState(String(editorState.rowLimit));
     const [error, setError] = useState<string | undefined>();
     const commit = (): void => {
-      const problem = getRowLimitError(draft);
+      const value = parseWholeNumberText(draft);
+      const problem = getRowLimitError(value);
       setError(problem);
-      if (!problem) {
-        editorState.setRowLimit(Number(draft.trim()));
+      if (!problem && value !== undefined) {
+        editorState.setRowLimit(value);
       }
     };
     return (
-      <div className="flex items-center gap-1">
+      <div
+        className="flex items-center gap-1"
+        {...cubeTourAnchor(CUBE_TOUR_ANCHOR.EXECUTE)}
+      >
         <label className="flex items-center gap-1 text-base">
           Rows
           <input
@@ -88,13 +106,55 @@ const CubeRowLimitInput = observer(
   },
 );
 
+/** Server-side or local: how the grid shows the run (spec §12.1, PLAN §11.10) */
+const CubeGridModeToggle = observer(
+  (props: { editorState: CubeEditorState }) => {
+    const { grid } = props.editorState;
+    const option = (mode: CubeGridMode, label: string, title: string) => (
+      <button
+        type="button"
+        className={`h-6 px-2 text-base ${
+          grid.mode === mode
+            ? 'bg-[var(--color-bg-selected)] font-medium text-[var(--color-text-primary)]'
+            : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)]'
+        }`}
+        aria-pressed={grid.mode === mode}
+        title={title}
+        onClick={() => grid.setMode(mode)}
+      >
+        {label}
+      </button>
+    );
+    return (
+      <div
+        className="flex overflow-hidden rounded-sm border border-[var(--color-border-default)]"
+        role="group"
+        aria-label="Grid mode"
+        {...cubeTourAnchor(CUBE_TOUR_ANCHOR.GRID_MODE)}
+      >
+        {option(
+          CubeGridMode.SERVER_SIDE,
+          'Server-side',
+          'Each sort and drill-down level runs on the engine, over every row of the query',
+        )}
+        {option(
+          CubeGridMode.LOCAL,
+          'Local',
+          "The run's rows, grouped, pivoted and filtered in the browser",
+        )}
+      </div>
+    );
+  },
+);
+
 const CubeGridToolbar = observer(
   (props: {
     editorState: CubeEditorState;
-    showSql: boolean;
-    onToggleSql: () => void;
+    onShowSql: () => void;
+    showRuns: boolean;
+    onToggleRuns: () => void;
   }) => {
-    const { editorState, showSql, onToggleSql } = props;
+    const { editorState, onShowSql, showRuns, onToggleRuns } = props;
     const { execution } = editorState;
     const { result } = execution;
     const disabledReasons = execution.disabledReasons;
@@ -104,12 +164,17 @@ const CubeGridToolbar = observer(
         data-testid={LEGEND_CUBE_TEST_ID.GRID_TOOLBAR}
       >
         {execution.isRunning ? (
-          <CubeButton title="Stop the run" onClick={() => execution.stop()}>
+          <CubeButton
+            title="Stop the run"
+            {...cubeTourAnchor(CUBE_TOUR_ANCHOR.EXECUTE)}
+            onClick={() => execution.stop()}
+          >
             Stop
           </CubeButton>
         ) : (
           <CubeButton
             primary={true}
+            {...cubeTourAnchor(CUBE_TOUR_ANCHOR.EXECUTE)}
             disabled={!execution.canExecute}
             title={
               disabledReasons.length
@@ -123,6 +188,7 @@ const CubeGridToolbar = observer(
           </CubeButton>
         )}
         <CubeRowLimitInput editorState={editorState} />
+        <CubeGridModeToggle editorState={editorState} />
         {execution.isRunning && (
           <span className="text-base text-[var(--color-text-secondary)]">
             {CUBE_PENDING_LABEL.EXECUTING_QUERY}
@@ -146,53 +212,55 @@ const CubeGridToolbar = observer(
                 {getTruncationMessage(result.rowLimit)}
               </span>
             )}
+            {editorState.grid.isServerSide &&
+              editorState.grid.hasLimitedLevel && (
+                <span className="text-base text-[var(--color-status-warn)]">
+                  {getLevelTruncationMessage(result.rowLimit)}
+                </span>
+              )}
+            {editorState.export.isExporting && (
+              <>
+                <span className="text-base text-[var(--color-text-secondary)]">
+                  {CUBE_PENDING_LABEL.EXPORTING_CSV}
+                </span>
+                <CubeButton
+                  title="Stop the export"
+                  onClick={() => editorState.export.stop()}
+                >
+                  Stop export
+                </CubeButton>
+              </>
+            )}
+            {editorState.grid.isServerSide && editorState.grid.fetching > 0 && (
+              <span className="text-base text-[var(--color-text-secondary)]">
+                {CUBE_PENDING_LABEL.FETCHING_ROWS}
+              </span>
+            )}
             {result.sql.length > 0 && (
-              <CubeButton aria-expanded={showSql} onClick={onToggleSql}>
-                {showSql ? 'Hide SQL' : 'Show SQL'}
+              <CubeButton
+                aria-haspopup="dialog"
+                {...cubeTourAnchor(CUBE_TOUR_ANCHOR.SHOW_SQL)}
+                onClick={onShowSql}
+              >
+                Show SQL
               </CubeButton>
             )}
           </>
         )}
+        <span className="flex-1" />
+        <CubeButton
+          aria-expanded={showRuns}
+          {...cubeTourAnchor(CUBE_TOUR_ANCHOR.RUNS)}
+          title="The latest runs, fetches and exports, with their SQL"
+          onClick={onToggleRuns}
+        >
+          {`Runs (${editorState.runStats.entries.length})`}
+        </CubeButton>
       </div>
     );
   },
 );
 
-/** The SQL the run's database ran, with Copy */
-const CubeSqlPanel = observer((props: { editorState: CubeEditorState }) => {
-  const { editorState } = props;
-  const { applicationStore } = editorState.host;
-  const sql = editorState.execution.result?.sql ?? [];
-  if (!sql.length) {
-    return null;
-  }
-  const copySql = (): void => {
-    applicationStore.clipboardService
-      .copyTextToClipboard(sql.join('\n\n'))
-      .catch(applicationStore.alertUnhandledError);
-  };
-  return (
-    <div
-      className="flex max-h-40 shrink-0 gap-2 overflow-auto border-b border-[var(--color-border-default)] p-2"
-      data-testid={LEGEND_CUBE_TEST_ID.SQL_PANEL}
-    >
-      <div className="min-w-0 flex-1">
-        {sql.map((statement, index) => (
-          <pre
-            // statements hold no state, and the same one may run twice
-            // eslint-disable-next-line react/no-array-index-key
-            key={index}
-            className="whitespace-pre-wrap font-mono text-sm"
-          >
-            {statement}
-          </pre>
-        ))}
-      </div>
-      <CubeButton onClick={copySql}>Copy SQL</CubeButton>
-    </div>
-  );
-});
-
 /**
  * On a data product cube, what to do about a run refused for its warehouse,
  * or for lack of access to the data: links to ask for it in the marketplace
@@ -230,11 +298,8 @@ const CubeDataProductRunErrorHelp = observer(
 );
 
 const CubeExecutionError = observer(
-  (props: { editorState: CubeEditorState }) => {
-    const error = props.editorState.execution.error;
-    if (!error) {
-      return null;
-    }
+  (props: { editorState: CubeEditorState; error: CubeEngineError }) => {
+    const { error } = props;
     const isCut = error.firstLine.length > MAX_ERROR_LINE_LENGTH;
     const firstLine = isCut
       ? `${error.firstLine.slice(0, MAX_ERROR_LINE_LENGTH)}…`
@@ -269,12 +334,73 @@ const CubeExecutionError = observer(
   },
 );
 
+/**
+ * The run's rows as the grid's mode shows them: in server-side mode built
+ * anew for each run and each drill-down, with a fetch's error above it
+ */
+const CubeRunGrid = observer(
+  (props: {
+    editorState: CubeEditorState;
+    result: CubeExecutionResult;
+    darkMode: boolean;
+  }) => {
+    const { editorState, result, darkMode } = props;
+    const { grid } = editorState;
+    const exportError = editorState.export.error && (
+      <CubeExecutionError
+        editorState={editorState}
+        error={editorState.export.error}
+      />
+    );
+    if (!grid.isServerSide) {
+      return (
+        <div className="flex h-full flex-col">
+          {exportError}
+          <div className="min-h-0 flex-1">
+            <CubeResultGrid
+              key={result.id}
+              editorState={editorState}
+              result={result}
+              presentation={editorState.document.meta.presentation}
+              darkMode={darkMode}
+            />
+          </div>
+        </div>
+      );
+    }
+    const drilldown = editorState.document.meta.drilldown;
+    return (
+      <div className="flex h-full flex-col">
+        <CubeDrilldownBar editorState={editorState} />
+        {exportError}
+        {grid.fetchError && (
+          <CubeExecutionError
+            editorState={editorState}
+            error={grid.fetchError}
+          />
+        )}
+        <div className="min-h-0 flex-1">
+          <CubeServerSideGrid
+            key={`${result.id}:${JSON.stringify(drilldown ?? null)}`}
+            editorState={editorState}
+            result={result}
+            levels={grid.drilldown?.columns ?? []}
+            presentation={editorState.document.meta.presentation}
+            darkMode={darkMode}
+          />
+        </div>
+      </div>
+    );
+  },
+);
+
 /** The results: Execute, the row limit and the run's stats above the grid (PLAN §9) */
 export const CubeGridRegion = observer(
   (props: { editorState: CubeEditorState }) => {
     const { editorState } = props;
     const { execution, host } = editorState;
     const [showSql, setShowSql] = useState(false);
+    const [showRuns, setShowRuns] = useState(false);
     const darkMode =
       !host.applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
     return (
@@ -285,18 +411,26 @@ export const CubeGridRegion = observer(
         <PanelLoadingIndicator isLoading={execution.isRunning} />
         <CubeGridToolbar
           editorState={editorState}
-          showSql={showSql}
-          onToggleSql={() => setShowSql(!showSql)}
+          onShowSql={() => setShowSql(true)}
+          showRuns={showRuns}
+          onToggleRuns={() => setShowRuns(!showRuns)}
         />
+        {showRuns && <CubeRunStatsPanel editorState={editorState} />}
+        <CubeColumnFormatDialog editorState={editorState} />
         {showSql && !execution.isRunning && (
-          <CubeSqlPanel editorState={editorState} />
+          <CubeSqlDialog
+            editorState={editorState}
+            onClose={() => setShowSql(false)}
+          />
         )}
         <div className="min-h-0 flex-1">
           {execution.error ? (
-            <CubeExecutionError editorState={editorState} />
+            <CubeExecutionError
+              editorState={editorState}
+              error={execution.error}
+            />
           ) : execution.result ? (
-            <CubeResultGrid
-              key={execution.result.id}
+            <CubeRunGrid
               editorState={editorState}
               result={execution.result}
               darkMode={darkMode}