@finos/legend-cube-builder 0.0.3 → 0.0.4

package/src/components/grid/CubeGridRegion.tsx

@@ -15,10 +15,10 @@
  */
 
 import { PanelLoadingIndicator } from '@finos/legend-art';
-import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
 import { EXECUTE_SHORTCUT_LABEL } from '../../__lib__/LegendCubeCommand.js';
+import { getCubeWarehouseErrorHint } from '../../__lib__/LegendCubeDataProductLabels.js';
 import {
   CUBE_PENDING_LABEL,
   formatDisabledReasons,
@@ -27,6 +27,10 @@ import {
   ROW_LIMIT_WARNING_THRESHOLD,
 } from '../../__lib__/LegendCubeLabels.js';
 import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import {
+  CubeDataProductRunErrorKind,
+  type CubeDataProductRuntimeState,
+} from '../../stores/CubeDataProductRuntimeState.js';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
 import { CubeButton } from '../CubeButton.js';
 import { CubeResultGrid } from './CubeResultGrid.js';
@@ -91,15 +95,9 @@ const CubeGridToolbar = observer(
     onToggleSql: () => void;
   }) => {
     const { editorState, showSql, onToggleSql } = props;
-    const { execution, host } = editorState;
-    const { applicationStore } = host;
+    const { execution } = editorState;
     const { result } = execution;
     const disabledReasons = execution.disabledReasons;
-    const execute = (): void => {
-      flowResult(execution.execute()).catch(
-        applicationStore.alertUnhandledError,
-      );
-    };
     return (
       <div
         className="flex h-8 shrink-0 items-center gap-3 border-b border-[var(--color-border-default)] bg-[var(--color-bg-panel-header)] px-2"
@@ -118,7 +116,8 @@ const CubeGridToolbar = observer(
                 ? `${formatDisabledReasons(disabledReasons)}\n(${EXECUTE_SHORTCUT_LABEL})`
                 : `Run the query up to the selected node (${EXECUTE_SHORTCUT_LABEL})`
             }
-            onClick={execute}
+            // the node editor's edits apply first, so they run (spec §17.5)
+            onClick={() => editorState.executeEdited()}
           >
             Execute
           </CubeButton>
@@ -132,7 +131,7 @@ const CubeGridToolbar = observer(
         {execution.isStale && (
           <span
             className="rounded-sm bg-[var(--color-status-warn-bg)] px-1 text-base text-[var(--color-status-warn)]"
-            title="The query or the row limit changed since this run"
+            title="The query, the warehouse or the row limit changed since this run"
           >
             Stale: execute again to refresh
           </span>
@@ -194,6 +193,42 @@ const CubeSqlPanel = observer((props: { editorState: CubeEditorState }) => {
   );
 });
 
+/**
+ * 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
+ */
+const CubeDataProductRunErrorHelp = observer(
+  (props: { runtime: CubeDataProductRuntimeState }) => {
+    const { runtime } = props;
+    if (runtime.runErrorKind === CubeDataProductRunErrorKind.WAREHOUSE) {
+      return (
+        <div className="mt-1 text-[var(--color-text-secondary)]">
+          {getCubeWarehouseErrorHint(
+            runtime.effectiveWarehouse ?? '',
+            runtime.canEditWarehouse,
+          )}
+        </div>
+      );
+    }
+    const links = runtime.accessRequestLinks;
+    return links.length ? (
+      <div className="mt-1 flex flex-wrap gap-x-3">
+        {links.map((link) => (
+          <a
+            key={link.key}
+            className="text-[var(--color-accent)] underline"
+            href={link.url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {link.label}
+          </a>
+        ))}
+      </div>
+    ) : null;
+  },
+);
+
 const CubeExecutionError = observer(
   (props: { editorState: CubeEditorState }) => {
     const error = props.editorState.execution.error;
@@ -226,6 +261,9 @@ const CubeExecutionError = observer(
             </pre>
           </details>
         )}
+        <CubeDataProductRunErrorHelp
+          runtime={props.editorState.dataProductRuntime}
+        />
       </div>
     );
   },

package/src/components/grid/CubeGridValues.ts

@@ -123,3 +123,58 @@ export const formatDuration = (durationMs: number): string =>
   durationMs < 1000
     ? `${Math.round(durationMs)} ms`
     : `${(durationMs / 1000).toFixed(1)} s`;
+
+/** The decimal places a Float value shows in the grid */
+export const CUBE_GRID_FLOAT_DECIMAL_PLACES = 2;
+
+const PLAIN_NUMBER_TEXT = /^(?<sign>-?)(?<whole>\d+)(?<fraction>\.\d*)?$/u;
+
+/**
+ * Number text with a comma between each group of three digits of its whole
+ * part ("31102024.71" reads "31,102,024.71"); any other text is kept as it is
+ */
+export const groupThousands = (text: string): string => {
+  const groups = PLAIN_NUMBER_TEXT.exec(text)?.groups;
+  if (!groups) {
+    return text;
+  }
+  const { sign = '', whole = '', fraction = '' } = groups;
+  return `${sign}${whole.replace(/\B(?=(?:\d{3})+(?!\d))/gu, ',')}${fraction}`;
+};
+
+/**
+ * How the grid shows a value of a column of the family (PLAN §9, user,
+ * 2026-10-10): Decimal and Number values keep every digit,
+ * their thousands grouped; Float values are rounded to
+ * `CUBE_GRID_FLOAT_DECIMAL_PLACES` places, grouped too; Integer values, and
+ * everything else, show as they are, so ids and years get no commas. The
+ * value itself is unchanged, so copying a cell copies its exact value.
+ */
+export const formatCellValue = (
+  value: Exclude<CubeResultValue, null>,
+  family: TypeFamily,
+): string => {
+  const text = String(value);
+  switch (family) {
+    case TypeFamily.DECIMAL:
+    case TypeFamily.NUMBER:
+      return groupThousands(text);
+    case TypeFamily.FLOAT: {
+      const number = typeof value === 'number' ? value : Number(text);
+      if (
+        typeof value === 'boolean' ||
+        text.trim() === '' ||
+        !Number.isFinite(number)
+      ) {
+        return text;
+      }
+      const rounded = number.toFixed(CUBE_GRID_FLOAT_DECIMAL_PLACES);
+      // a value that rounds to zero shows no sign
+      return groupThousands(
+        Number(rounded) === 0 ? rounded.replace(/^-/u, '') : rounded,
+      );
+    }
+    default:
+      return text;
+  }
+};

package/src/components/grid/CubeResultGrid.tsx

@@ -15,6 +15,7 @@
  */
 
 import { clsx } from '@finos/legend-art';
+import type { TypeFamily } from '@finos/legend-cube';
 import {
   DataGrid,
   type DataGridCellRendererParams,
@@ -30,7 +31,11 @@ import type { CubeResultValue } from '../../graph-manager/CubeEngine.js';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
 import type { CubeExecutionResult } from '../../stores/CubeExecutionState.js';
 import { getCubeGridQuickActions } from '../../stores/CubeGridQuickActions.js';
-import { compareCellValues, isNumericFamily } from './CubeGridValues.js';
+import {
+  compareCellValues,
+  formatCellValue,
+  isNumericFamily,
+} from './CubeGridValues.js';
 
 type CubeRow = readonly CubeResultValue[];
 
@@ -72,14 +77,24 @@ export const getCubeGridContextMenuItems = (
   ];
 };
 
+/**
+ * A cell: its value as the column's family shows it (`formatCellValue`), with
+ * the exact value on hover when the two differ
+ */
 const CubeCell: React.FC<
-  DataGridCellRendererParams<CubeRow, CubeResultValue>
-> = (props) =>
-  props.value === null || props.value === undefined ? (
-    <span className="text-[var(--color-text-muted)]">{NULL_CELL_TEXT}</span>
-  ) : (
-    <>{String(props.value)}</>
-  );
+  DataGridCellRendererParams<CubeRow, CubeResultValue> & {
+    family: TypeFamily;
+  }
+> = (props) => {
+  if (props.value === null || props.value === undefined) {
+    return (
+      <span className="text-[var(--color-text-muted)]">{NULL_CELL_TEXT}</span>
+    );
+  }
+  const exact = String(props.value);
+  const shown = formatCellValue(props.value, props.family);
+  return shown === exact ? <>{exact}</> : <span title={exact}>{shown}</span>;
+};
 
 /**
  * The rows of a run (PLAN §9): columns from Cube's own schema of the capture
@@ -109,6 +124,7 @@ export const CubeResultGrid = memo(
             headerTooltip: `${column.type.displayName}${column.nullable ? '?' : ''} (${column.type.fullName})`,
             valueGetter: (params) => params.data?.[position] ?? null,
             cellRenderer: CubeCell,
+            cellRendererParams: { family: column.type.family },
             ...(numeric
               ? { type: 'rightAligned', comparator: compareCellValues }
               : {}),

package/src/components/palette/CubePalette.tsx

@@ -15,12 +15,19 @@
  */
 
 import { ChevronLeftIcon, ChevronRightIcon, clsx } from '@finos/legend-art';
-import type { AnyNodeDefinition } from '@finos/legend-cube';
+import {
+  type AnyNodeDefinition,
+  DataProductAccessPointSource,
+} from '@finos/legend-cube';
 import { observer } from 'mobx-react-lite';
 import { useRef } from 'react';
 import { useDrag } from 'react-dnd';
-import { READ_ONLY_CUBE_TITLE } from '../../__lib__/LegendCubeLabels.js';
+import {
+  OTHER_SOURCE_KIND_TITLE,
+  READ_ONLY_CUBE_TITLE,
+} from '../../__lib__/LegendCubeLabels.js';
 import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import { addCubeNode } from '../../stores/CubeAddPlacement.js';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
 import {
   CUBE_DND_TYPE,
@@ -34,8 +41,8 @@ export const PALETTE_EMPTY_HINT = 'Drag items onto the canvas.';
 /** What an item does, for its tooltip */
 const describeItem = (definition: AnyNodeDefinition): string =>
   definition.kind === 'source'
-    ? 'Click, or drop it on the canvas, to pick a table'
-    : 'Drag it onto a node to add it after that node, or onto the canvas to add it on its own; click to add it on its own';
+    ? `Click, or drop it on the canvas, to pick ${definition.type === DataProductAccessPointSource.TYPE ? 'an access point' : 'a table'}`
+    : 'Click, or drop it on the canvas, to add it after the selected node; drop it on a node to add it after that node';
 
 const CubePaletteItem = observer(
   (props: {
@@ -45,20 +52,29 @@ const CubePaletteItem = observer(
   }) => {
     const { editorState, definition, collapsed } = props;
     const { readOnly } = editorState;
+    // a source of the other kind than the cube's can't be added (PLAN §6.8)
+    const otherKind =
+      !readOnly &&
+      definition.kind === 'source' &&
+      !editorState.canAddNode(definition.type);
+    const disabled = readOnly || otherKind;
     const ref = useRef<HTMLDivElement>(null);
     const [, dragConnector] = useDrag<CubePaletteDragItem>(
       () => ({
         type: CUBE_DND_TYPE.PALETTE_ITEM,
         item: { nodeType: definition.type },
-        canDrag: () => !editorState.readOnly,
+        canDrag: () =>
+          !editorState.readOnly &&
+          (definition.kind !== 'source' ||
+            editorState.canAddNode(definition.type)),
       }),
-      [editorState, definition.type],
+      [editorState, definition.type, definition.kind],
     );
     dragConnector(ref);
     const label = `${definition.label}${definition.beta ? ' (BETA)' : ''}`;
     const add = (): void => {
-      if (!readOnly) {
-        editorState.addNode(definition.type);
+      if (!disabled) {
+        addCubeNode(editorState, definition.type);
       }
     };
     return (
@@ -66,21 +82,23 @@ const CubePaletteItem = observer(
       <div
         ref={ref}
         role="button"
-        tabIndex={readOnly ? -1 : 0}
-        aria-disabled={readOnly}
+        tabIndex={disabled ? -1 : 0}
+        aria-disabled={disabled}
         aria-label={label}
         className={clsx(
           'flex h-8 shrink-0 items-center gap-2 px-3 text-base',
-          readOnly
+          disabled
             ? 'cursor-not-allowed text-[var(--color-text-disabled)]'
             : 'cursor-grab hover:bg-[var(--color-bg-hover)]',
         )}
         title={
           readOnly
             ? READ_ONLY_CUBE_TITLE
-            : collapsed
-              ? `${label}: ${describeItem(definition)}`
-              : describeItem(definition)
+            : otherKind
+              ? OTHER_SOURCE_KIND_TITLE
+              : collapsed
+                ? `${label}: ${describeItem(definition)}`
+                : describeItem(definition)
         }
         onClick={add}
         onKeyDown={(event) => {
@@ -145,7 +163,7 @@ export const CubePalette = observer(
           role="group"
           aria-label="Palette"
         >
-          {registry.sources.map((definition) => (
+          {editorState.offeredSources.map((definition) => (
             <CubePaletteItem
               key={definition.type}
               editorState={editorState}