@finos/legend-cube-builder 0.0.2 → 0.0.4

package/src/components/canvas/CubeCanvasDnd.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { addCubeNode, canAddCubeNode } from '../../stores/CubeAddPlacement.js';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
 
 // Drag and drop on the canvas (spec §17.3): palette items and nodes are
@@ -42,8 +43,9 @@ const isNodeDragItem = (item: CubeDragItem): item is CubeNodeDragItem =>
 
 /**
  * Whether dropping the item on the node does anything, which also decides
- * whether the node lights up under it: a palette item is spliced in after
- * the node, another node connects to it or else moves after it
+ * whether the node lights up under it: a transform is spliced in after the
+ * node, another node connects to it or else moves after it. A source is the
+ * canvas's, whatever node it is dropped on (PLAN §11.8, U4).
  */
 export const canDropOnCubeNode = (
   editorState: CubeEditorState,
@@ -52,7 +54,8 @@ export const canDropOnCubeNode = (
 ): boolean =>
   isNodeDragItem(item)
     ? editorState.canDropNode(item.nodeId, targetId)
-    : editorState.canAddNode(item.nodeType, targetId);
+    : editorState.registry.get(item.nodeType)?.kind !== 'source' &&
+      canAddCubeNode(editorState, item.nodeType, targetId);
 
 export const dropOnCubeNode = (
   editorState: CubeEditorState,
@@ -62,21 +65,25 @@ export const dropOnCubeNode = (
   if (isNodeDragItem(item)) {
     editorState.dropNode(item.nodeId, targetId);
   } else {
-    editorState.addNode(item.nodeType, targetId);
+    addCubeNode(editorState, item.nodeType, targetId);
   }
 };
 
 /**
- * A palette item dropped on the canvas around the nodes: a transform is
- * added unconnected, a source opens the picker. A drop on a node is the
- * node's, taken or refused, never the canvas's.
+ * A palette item dropped on the canvas (PLAN §11.8, U3 and U4): a transform
+ * around the nodes goes after the selected node; a source opens the source
+ * dialog on its tab, even dropped on a node, which leaves it to the canvas.
+ * A transform dropped on a node is the node's, taken or refused.
  */
 export const dropOnCubeCanvas = (
   editorState: CubeEditorState,
   item: CubeDragItem,
   isOverNode: boolean,
 ): void => {
-  if (!isOverNode && !isNodeDragItem(item)) {
-    editorState.addNode(item.nodeType);
+  if (
+    !isNodeDragItem(item) &&
+    (!isOverNode || editorState.registry.get(item.nodeType)?.kind === 'source')
+  ) {
+    addCubeNode(editorState, item.nodeType);
   }
 };

package/src/components/canvas/CubeCanvasElements.ts

@@ -17,6 +17,7 @@
 import {
   isIncompleteError,
   isSchemasError,
+  isTypingError,
   type Query,
   type QueryNode,
 } from '@finos/legend-cube';
@@ -117,6 +118,8 @@ export interface CubeCanvasNodeStatus {
   readonly isResolving: boolean;
   /** The last run failed on it */
   readonly hasEngineError: boolean;
+  /** It has a warning, stored (a table that changed) or derived (a lost sort order) */
+  readonly hasWarnings: boolean;
   /** Its errors, then its warnings, its description and its id, one a line */
   readonly tooltip: string;
 }
@@ -128,17 +131,23 @@ export const getCubeCanvasNodeStatus = (
   const ownErrors = editorState.analysis.validity.get(node.id);
   // the tooltip adds the engine's error; the states keep it apart
   const errors = editorState.getNodeErrors(node.id);
-  const warnings = editorState.warnings.get(node.key) ?? [];
+  const warnings = editorState.getNodeWarnings(node);
   return {
     isCapture: editorState.document.query.selected === node.id,
     isInvalid: (ownErrors ?? []).some(
-      (error) => !isIncompleteError(error) && !isSchemasError(error),
+      (error) =>
+        !isIncompleteError(error) &&
+        !isSchemasError(error) &&
+        !isTypingError(error),
     ),
     isIncomplete: (ownErrors ?? []).some(
       (error) => isIncompleteError(error) || isSchemasError(error),
     ),
-    isResolving: editorState.isPendingSource(node),
+    // a source typed again, or an Extend waiting for its columns' types
+    isResolving:
+      editorState.isPendingSource(node) || editorState.isTypingNode(node),
     hasEngineError: editorState.hostIssues.has(node.id),
+    hasWarnings: warnings.length > 0,
     tooltip: [
       ...(ownErrors ? [] : [MISSING_VALIDITY_TOOLTIP]),
       ...errors,

package/src/components/canvas/CubeCanvasNode.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { clsx, ContextMenu } from '@finos/legend-art';
+import { clsx, ContextMenu, Tooltip, WarningIcon } from '@finos/legend-art';
 import { Handle, type NodeProps, Position } from '@xyflow/react';
 import { observer } from 'mobx-react-lite';
 import { useRef } from 'react';
@@ -55,7 +55,11 @@ export const CubeCanvasNode = observer(
     const [, dragConnector] = useDrag<CubeNodeDragItem>(
       () => ({
         type: CUBE_DND_TYPE.NODE,
-        item: { nodeId: node.id },
+        // the drop changes the query, so the open editor applies first
+        item: () => {
+          editorState.nodeEditor.finish();
+          return { nodeId: node.id };
+        },
         canDrag: () => !editorState.readOnly,
       }),
       [editorState, node.id],
@@ -94,41 +98,63 @@ export const CubeCanvasNode = observer(
             style={{ top: getInputHandleOffset(index, node.ports.length) }}
           />
         ))}
-        <div
-          ref={ref}
-          className={clsx(
-            // React Flow must leave the mouse to the HTML drag: 'nodrag' keeps
-            // it from moving the node, 'nopan' from panning the canvas
-            'legend-cube__node nodrag nopan flex h-full w-full items-center gap-2 rounded border bg-[var(--color-bg-panel)] px-2 text-base text-[var(--color-text-primary)]',
-            status.isInvalid
-              ? 'border-[var(--color-status-error)]'
-              : status.isIncomplete
-                ? 'border-dashed border-[var(--color-status-warn)]'
-                : 'border-[var(--color-border-default)]',
-            {
-              'legend-cube__node--selected ring-2 ring-[var(--color-accent)]':
-                status.isCapture,
-              'legend-cube__node--invalid': status.isInvalid,
-              'legend-cube__node--incomplete': status.isIncomplete,
-              'legend-cube__node--resolving animate-pulse': status.isResolving,
-              'legend-cube__node--engine-error bg-[var(--color-status-error-bg)]':
-                status.hasEngineError,
-              'legend-cube__node--drop-target outline-dashed outline-2 outline-[var(--color-accent)]':
-                isDropTarget,
-            },
-          )}
-          title={status.tooltip}
-          aria-current={status.isCapture}
-          data-testid={LEGEND_CUBE_TEST_ID.CANVAS_NODE}
+        <Tooltip
+          // after a moment, above the node, one message a line (U1(c))
+          title={<div className="whitespace-pre-line">{status.tooltip}</div>}
+          placement="top"
+          enterDelay={500}
+          enterNextDelay={500}
+          disableInteractive={true}
+          // it describes the node, whose name stays its description
+          describeChild={true}
+          slotProps={{ tooltip: { className: 'max-w-[40rem]' } }}
         >
-          <CubeNodeIcon
-            icon={editorState.registry.get(node.type)?.icon}
-            className="shrink-0 text-lg text-[var(--color-text-secondary)]"
-          />
-          <span className="line-clamp-2 min-w-0 break-words leading-tight">
-            {node.describe()}
-          </span>
-        </div>
+          <div
+            ref={ref}
+            className={clsx(
+              // React Flow must leave the mouse to the HTML drag: 'nodrag' keeps
+              // it from moving the node, 'nopan' from panning the canvas
+              'legend-cube__node nodrag nopan flex h-full w-full items-center gap-2 rounded border bg-[var(--color-bg-panel)] px-2 text-base text-[var(--color-text-primary)]',
+              status.isInvalid
+                ? 'border-[var(--color-status-error)]'
+                : status.isIncomplete
+                  ? 'border-dashed border-[var(--color-status-warn)]'
+                  : 'border-[var(--color-border-default)]',
+              {
+                'legend-cube__node--selected ring-2 ring-[var(--color-accent)]':
+                  status.isCapture,
+                'legend-cube__node--invalid': status.isInvalid,
+                'legend-cube__node--incomplete': status.isIncomplete,
+                'legend-cube__node--resolving animate-pulse':
+                  status.isResolving,
+                'legend-cube__node--engine-error bg-[var(--color-status-error-bg)]':
+                  status.hasEngineError,
+                'legend-cube__node--warning': status.hasWarnings,
+                'legend-cube__node--drop-target outline-dashed outline-2 outline-[var(--color-accent)]':
+                  isDropTarget,
+              },
+            )}
+            // the tooltip's text, for assistive technology and tests
+            aria-description={status.tooltip}
+            aria-current={status.isCapture}
+            data-testid={LEGEND_CUBE_TEST_ID.CANVAS_NODE}
+          >
+            <CubeNodeIcon
+              icon={editorState.registry.get(node.type)?.icon}
+              className="shrink-0 text-lg text-[var(--color-text-secondary)]"
+            />
+            <span className="line-clamp-2 min-w-0 break-words leading-tight">
+              {node.describe()}
+            </span>
+            {status.hasWarnings && (
+              // the warning's text is in the node's tooltip
+              <WarningIcon
+                className="ml-auto shrink-0 text-[var(--color-status-warn)]"
+                aria-hidden={true}
+              />
+            )}
+          </div>
+        </Tooltip>
         <Handle
           id={CUBE_OUTPUT_HANDLE_ID}
           type="source"

package/src/components/canvas/CubeCanvasNodeFocus.ts

@@ -0,0 +1,37 @@
+/**
+ * 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.
+ */
+
+/**
+ * Gives the keyboard focus back to a node on the canvas, as its editor
+ * closes from the keyboard (PLAN §11.8), when the focus was in the editor or
+ * nowhere: focus the user put elsewhere stays there
+ */
+export const returnFocusToCubeCanvasNode = (
+  nodeId: string,
+  editor: Element | null,
+  focused: Element | null,
+): void => {
+  if (
+    focused !== null &&
+    focused !== document.body &&
+    !editor?.contains(focused)
+  ) {
+    return;
+  }
+  Array.from(document.querySelectorAll<HTMLElement>('.react-flow__node'))
+    .find((element) => element.dataset.id === nodeId)
+    ?.focus();
+};

package/src/components/canvas/CubeNodeEditorAnchor.ts

@@ -0,0 +1,82 @@
+/**
+ * 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 {
+  CUBE_CANVAS_NODE_HEIGHT,
+  CUBE_CANVAS_NODE_WIDTH,
+  type CubeCanvasPosition,
+} from './CubeCanvasLayout.js';
+
+/** A rectangle on the screen, in pixels from the window's top-left corner */
+export interface CubeScreenRect {
+  readonly left: number;
+  readonly top: number;
+  readonly width: number;
+  readonly height: number;
+}
+
+/** React Flow's viewport: the pan, then the zoom */
+export type CubeCanvasTransform = readonly [
+  translateX: number,
+  translateY: number,
+  zoom: number,
+];
+
+/**
+ * Where a node is on the screen: its place in the layout, moved by the
+ * canvas's pan and zoom, inside the canvas's own place on the screen. Every
+ * node is the same size (PLAN §7.2), so nothing is measured.
+ */
+export const getCubeNodeScreenRect = (
+  position: CubeCanvasPosition,
+  transform: CubeCanvasTransform,
+  canvas: Pick<CubeScreenRect, 'left' | 'top'>,
+): CubeScreenRect => {
+  const [translateX, translateY, zoom] = transform;
+  return {
+    left: canvas.left + translateX + position.x * zoom,
+    top: canvas.top + translateY + position.y * zoom,
+    width: CUBE_CANVAS_NODE_WIDTH * zoom,
+    height: CUBE_CANVAS_NODE_HEIGHT * zoom,
+  };
+};
+
+/**
+ * Whether any of the node shows inside the canvas: a node panned out of
+ * view hides its editor, which stays open with its edits. A canvas not laid
+ * out yet (no size) hides nothing.
+ */
+export const isCubeNodeInView = (
+  node: CubeScreenRect,
+  canvas: CubeScreenRect,
+): boolean =>
+  canvas.width <= 0 ||
+  canvas.height <= 0 ||
+  (node.left < canvas.left + canvas.width &&
+    node.left + node.width > canvas.left &&
+    node.top < canvas.top + canvas.height &&
+    node.top + node.height > canvas.top);
+
+/** The rectangle as the DOM gives one, for a positioning library to read */
+export const toDOMRect = (rect: CubeScreenRect): DOMRect =>
+  ({
+    ...rect,
+    x: rect.left,
+    y: rect.top,
+    right: rect.left + rect.width,
+    bottom: rect.top + rect.height,
+    toJSON: () => rect,
+  }) as DOMRect;

package/src/components/editors/CubeAggregationRowEditor.tsx

@@ -0,0 +1,224 @@
+/**
+ * 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 { clsx, TimesIcon } from '@finos/legend-art';
+import {
+  AggregationSetting,
+  getAggregationDisplayName,
+  getAggregationSetting,
+  isAggregationFunctionOf,
+  type AggregationUse,
+  type Schema,
+} from '@finos/legend-cube';
+import { observer } from 'mobx-react-lite';
+import {
+  type CubeAggregationRow,
+  takesNoAggregationColumn,
+} from '../../stores/editors/CubeAggregationRows.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeColumnPicker } from './CubeColumnPicker.js';
+
+/** Which control of a row a problem is about: its column, its function, its setting, or its name */
+const problemControl = (
+  problem: string | undefined,
+): 'column' | 'function' | 'setting' | 'name' | undefined =>
+  problem === undefined
+    ? undefined
+    : problem.startsWith('Aggregation column')
+      ? 'column'
+      : /^Aggregation function "[^"]*" needs (?:an offset|a bucket count) that is a whole number of at least 1\.$/u.test(
+            problem,
+          )
+        ? 'setting'
+        : problem.startsWith('Aggregation function')
+          ? 'function'
+          : 'name';
+
+/** How a setting's field is named and explained (PLAN §11.9) */
+const SETTING_FIELDS: Readonly<
+  Record<AggregationSetting, { label: string; title: string }>
+> = Object.freeze({
+  [AggregationSetting.OFFSET]: {
+    label: 'offset',
+    title: 'How many rows back (Lag) or ahead (Lead), in the sort order',
+  },
+  [AggregationSetting.BUCKETS]: {
+    label: 'buckets',
+    title: 'How many buckets of near-equal size to split each partition into',
+  },
+});
+
+/**
+ * One aggregation row (Group, PLAN §11.5; Partition, §11.6): its column, or
+ * for a function that takes none a short text in its place (with a button to
+ * clear a column it holds anyway), then its function, its output name and a
+ * remove button, then its first problem. A function that takes a setting
+ * (Lag's and Lead's offset, NTile's bucket count) has a field for it before
+ * the name. The control the problem is about is marked. The function list is
+ * given, so each editor offers its own; a function the use doesn't know is
+ * shown as unknown.
+ */
+export const CubeAggregationRowEditor = observer(
+  (props: {
+    row: CubeAggregationRow;
+    position: number;
+    schema: Schema;
+    use: AggregationUse;
+    /** The functions the row can take, in order */
+    functions: readonly string[];
+    /** What a function that takes no column shows in the column's place */
+    noColumnText: (fn: string) => string;
+    problem: string | undefined;
+    readOnly: boolean;
+    onColumn: (column: string) => void;
+    onFunction: (fn: string) => void;
+    /** Types the function's setting; only the editors whose functions take one give it */
+    onSetting?: (setting: AggregationSetting, text: string) => void;
+    onName: (name: string) => void;
+    onRemove: () => void;
+  }) => {
+    const {
+      row,
+      position,
+      schema,
+      use,
+      functions,
+      noColumnText,
+      problem,
+      readOnly,
+      onColumn,
+      onFunction,
+      onSetting,
+      onName,
+      onRemove,
+    } = props;
+    const takesNoColumn = takesNoAggregationColumn(row.function, use);
+    const setting = isAggregationFunctionOf(row.function, use)
+      ? getAggregationSetting(row.function)
+      : undefined;
+    const marked = problemControl(problem);
+    // in sentence case: `Count rows`, `Dense rank`
+    const shownAs = getAggregationDisplayName(row.function);
+    const sentence = `${shownAs.charAt(0)}${shownAs.slice(1).toLowerCase()}`;
+    return (
+      <li className="flex flex-col gap-1 border-b border-[var(--color-border-subtle)] py-1">
+        <div className="flex min-h-6 items-center gap-1">
+          {takesNoColumn ? (
+            <span className="flex min-w-0 items-center gap-1 text-[var(--color-text-secondary)]">
+              {noColumnText(row.function)}
+              {row.column !== undefined && (
+                <CubeButton
+                  title={`${sentence} takes no column: clear it`}
+                  disabled={readOnly}
+                  onClick={() => onFunction(row.function)}
+                >
+                  {`Clear column ${position}`}
+                </CubeButton>
+              )}
+            </span>
+          ) : (
+            <CubeColumnPicker
+              label={`Aggregation column ${position}`}
+              schema={schema}
+              value={row.column}
+              disabled={readOnly}
+              invalid={marked === 'column'}
+              onChange={onColumn}
+            />
+          )}
+        </div>
+        <div className="flex items-center gap-1">
+          <select
+            aria-label={`Aggregation function ${position}`}
+            aria-invalid={marked === 'function'}
+            title={marked === 'function' ? problem : undefined}
+            className={clsx(
+              'h-6 w-36 shrink-0 rounded-sm border bg-[var(--color-bg-input)] px-1 text-base',
+              marked === 'function'
+                ? 'border-[var(--color-status-error)]'
+                : 'border-[var(--color-border-default)]',
+            )}
+            value={row.function}
+            disabled={readOnly}
+            onChange={(event) => onFunction(event.target.value)}
+          >
+            {!row.function && (
+              <option value="" disabled={true}>
+                Pick a function
+              </option>
+            )}
+            {functions.map((fn) => (
+              <option key={fn} value={fn}>
+                {`${getAggregationDisplayName(fn)}${isAggregationFunctionOf(fn, use) ? '' : ' (unknown)'}`}
+              </option>
+            ))}
+          </select>
+          {setting !== undefined && onSetting && (
+            <input
+              aria-label={`Aggregation ${SETTING_FIELDS[setting].label} ${position}`}
+              aria-invalid={marked === 'setting'}
+              title={
+                marked === 'setting' ? problem : SETTING_FIELDS[setting].title
+              }
+              className={clsx(
+                'h-6 w-14 shrink-0 rounded-sm border bg-[var(--color-bg-input)] px-1 text-right text-base',
+                marked === 'setting'
+                  ? 'border-[var(--color-status-error)]'
+                  : 'border-[var(--color-border-default)]',
+              )}
+              type="text"
+              inputMode="numeric"
+              spellCheck={false}
+              value={row.settings[setting] ?? ''}
+              disabled={readOnly}
+              onChange={(event) => onSetting(setting, event.target.value)}
+            />
+          )}
+          <input
+            aria-label={`Aggregation output name ${position}`}
+            aria-invalid={marked === 'name'}
+            title={marked === 'name' ? problem : undefined}
+            className={clsx(
+              'h-6 min-w-0 flex-1 rounded-sm border bg-[var(--color-bg-input)] px-1 text-base',
+              marked === 'name'
+                ? 'border-[var(--color-status-error)]'
+                : 'border-[var(--color-border-default)]',
+            )}
+            type="text"
+            spellCheck={false}
+            value={row.name}
+            disabled={readOnly}
+            onChange={(event) => onName(event.target.value)}
+          />
+          <button
+            className="flex h-6 w-6 items-center justify-center text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] disabled:text-[var(--color-text-disabled)]"
+            aria-label={`Remove aggregation ${position}`}
+            title="Remove this aggregation"
+            disabled={readOnly}
+            onClick={onRemove}
+          >
+            <TimesIcon />
+          </button>
+        </div>
+        {problem && (
+          <div className="text-sm text-[var(--color-status-error)]">
+            {problem}
+          </div>
+        )}
+      </li>
+    );
+  },
+);