@finos/legend-cube-builder 0.0.2 → 0.0.4

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,47 +15,116 @@
  */
 
 import { clsx } from '@finos/legend-art';
+import type { TypeFamily } from '@finos/legend-cube';
 import {
   DataGrid,
   type DataGridCellRendererParams,
   type DataGridColumnDefinition,
+  type DataGridDefaultMenuItem,
+  type DataGridGetContextMenuItemsParams,
+  type DataGridMenuItemDef,
 } from '@finos/legend-lego/data-grid';
-import { memo, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { NULL_CELL_TEXT } from '../../__lib__/LegendCubeLabels.js';
 import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
 import type { CubeResultValue } from '../../graph-manager/CubeEngine.js';
+import type { CubeEditorState } from '../../stores/CubeEditorState.js';
 import type { CubeExecutionResult } from '../../stores/CubeExecutionState.js';
-import { compareCellValues, isNumericFamily } from './CubeGridValues.js';
+import { getCubeGridQuickActions } from '../../stores/CubeGridQuickActions.js';
+import {
+  compareCellValues,
+  formatCellValue,
+  isNumericFamily,
+} from './CubeGridValues.js';
 
 type CubeRow = readonly CubeResultValue[];
 
+/** A column's id in the grid: its position, as `c<position>` */
+const COLUMN_ID_PREFIX = 'c';
+
+/**
+ * The grid's context menu (spec §12.4): on a cell, its quick actions, then
+ * ag-grid's own items, which M7 curates; elsewhere ag-grid's only. Read when
+ * the menu opens, so it reflects the cube and the run as they are then.
+ */
+export const getCubeGridContextMenuItems = (
+  editorState: CubeEditorState,
+  params: DataGridGetContextMenuItemsParams<CubeRow>,
+): (DataGridDefaultMenuItem | DataGridMenuItemDef<CubeRow>)[] => {
+  const defaultItems = params.defaultItems ?? [];
+  const colId = params.column?.getColId();
+  if (!colId?.startsWith(COLUMN_ID_PREFIX)) {
+    return defaultItems;
+  }
+  const position = Number(colId.slice(COLUMN_ID_PREFIX.length));
+  const cell = params.node?.data?.[position] ?? null;
+  const actions = getCubeGridQuickActions(editorState, position, cell);
+  if (!actions.length) {
+    return defaultItems;
+  }
+  return [
+    ...actions.map((quickAction): DataGridMenuItemDef<CubeRow> => {
+      const tooltip = quickAction.disabledReason ?? quickAction.hint;
+      return {
+        name: quickAction.label,
+        disabled: quickAction.disabledReason !== undefined,
+        ...(tooltip === undefined ? {} : { tooltip }),
+        action: () => quickAction.apply(),
+      };
+    }),
+    'separator',
+    ...defaultItems,
+  ];
+};
+
+/**
+ * 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
  * node, by position, so any column name works. Numbers are right-aligned and
- * shown and sorted exactly as the engine wrote them.
+ * shown and sorted exactly as the engine wrote them. A cell's context menu
+ * offers the quick actions (`getCubeGridContextMenuItems`).
  */
 export const CubeResultGrid = memo(
-  (props: { result: CubeExecutionResult; darkMode: boolean }) => {
-    const { result, darkMode } = props;
+  (props: {
+    editorState: CubeEditorState;
+    result: CubeExecutionResult;
+    darkMode: boolean;
+  }) => {
+    const { editorState, result, darkMode } = props;
+    const getContextMenuItems = useCallback(
+      (params: DataGridGetContextMenuItemsParams<CubeRow>) =>
+        getCubeGridContextMenuItems(editorState, params),
+      [editorState],
+    );
     const columnDefs = useMemo(
       (): DataGridColumnDefinition<CubeRow, CubeResultValue>[] =>
         result.schema.columns.map((column, position) => {
           const numeric = isNumericFamily(column.type.family);
           return {
-            colId: `c${position}`,
+            colId: `${COLUMN_ID_PREFIX}${position}`,
             headerName: column.name,
             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 }
               : {}),
@@ -76,6 +145,7 @@ export const CubeResultGrid = memo(
           columnDefs={columnDefs}
           suppressFieldDotNotation={true}
           tooltipShowDelay={500}
+          getContextMenuItems={getContextMenuItems}
         />
       </div>
     );

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}