@finos/legend-cube-builder 0.0.3 → 0.0.5

package/src/components/editors/CubeNodeEditorPanel.tsx

@@ -18,21 +18,30 @@ import { QuestionCircleIcon, TimesIcon, WarningIcon } from '@finos/legend-art';
 import {
   isIncompleteError,
   isSchemasError,
+  isTypingError,
   type QueryNode,
   type Schema,
   UnknownNode,
 } from '@finos/legend-cube';
 import { observer } from 'mobx-react-lite';
+import { useEffect, useId, useRef } from 'react';
 import {
   CUBE_NODE_HELP_TEXT,
+  RUN_THIS_STEP_LABEL,
+  RUNNING_NODE_LABEL,
   SELECT_NODE_TOOLTIP,
 } from '../../__lib__/LegendCubeHelpText.js';
-import { READ_ONLY_CUBE_TITLE } from '../../__lib__/LegendCubeLabels.js';
+import {
+  getCubeNodeBadge,
+  READ_ONLY_CUBE_TITLE,
+  toEditorTitle,
+} from '../../__lib__/LegendCubeLabels.js';
 import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
 import { CUBE_NODE_DRAFT_FACTORIES } from '../../stores/editors/CubeNodeDraftRegistry.js';
 import { CubeButton } from '../CubeButton.js';
 import { CubeNodeIcon } from '../CubeNodeIcon.js';
+import { returnFocusToCubeCanvasNode } from '../canvas/CubeCanvasNodeFocus.js';
 import { CUBE_NODE_EDITORS } from './CubeNodeEditorRegistry.js';
 
 /** The problems of the edited node against its inputs, as Apply would leave it */
@@ -42,26 +51,59 @@ const validateEdited = (
 ): string[] => {
   const errors: string[] = [];
   node.validate(inputSchemas, errors);
-  return [...new Set(errors)];
+  // waiting for the engine to type an Extend, or check a filter's condition,
+  // is no problem (PLAN §11.7, §11.11)
+  return [...new Set(errors)].filter((error) => !isTypingError(error));
 };
 
 /**
- * The node editor, in a side panel (spec §17.5): the node's label and id, its
- * help, Select, and its type's editor. Edits stay in the panel until Apply
- * or closing it; Cancel drops them. While an input is missing or invalid,
- * the panel shows why instead of the editor, since there would be no
- * columns to pick.
+ * The node editor's frame (spec §17.5, PLAN §11.8): a title bar with the
+ * node's label and id, its help and Select; a body of 80px to a third of
+ * the window, which scrolls, with its type's editor; then its problems and
+ * Apply and Cancel, which stay in view. Edits stay in the editor until
+ * Apply or closing it; Cancel drops them. While an input is missing or
+ * invalid, the body shows why instead of the editor, since there would be
+ * no columns to pick.
  */
 export const CubeNodeEditorPanel = observer(
   (props: { editorState: CubeEditorState }) => {
     const { editorState } = props;
     const { nodeEditor, readOnly } = editorState;
+    const rootRef = useRef<HTMLDivElement>(null);
+    const titleId = useId();
+    // finishing first moves the focus out of a field in the editor, so text
+    // typed but not yet stored (a filter value is stored on blur) is applied
+    useEffect(
+      () =>
+        nodeEditor.addFlusher(
+          () => {
+            const focused = document.activeElement;
+            if (
+              focused instanceof HTMLElement &&
+              rootRef.current?.contains(focused)
+            ) {
+              focused.blur();
+            }
+          },
+          { first: true },
+        ),
+      [nodeEditor],
+    );
     const { node, draft, edited } = nodeEditor;
     if (!node || !draft || !edited) {
       return null;
     }
     const { query } = editorState.document;
     const definition = editorState.registry.get(node.type);
+    /** Closes the editor; the keyboard focus goes back to its node */
+    const closing = (close: () => unknown): void => {
+      const focused = document.activeElement;
+      const editor = rootRef.current;
+      close();
+      if (nodeEditor.nodeId === undefined) {
+        returnFocusToCubeCanvasNode(node.id, editor, focused);
+      }
+    };
     const isCapture = query.selected === node.id;
     const inputProblems = editorState
       .getNodeErrors(node.id)
@@ -76,14 +118,28 @@ export const CubeNodeEditorPanel = observer(
       .filter((schema): schema is Schema => schema !== undefined);
     const Editor = CUBE_NODE_EDITORS.get(node.type);
     const isEditable = CUBE_NODE_DRAFT_FACTORIES.has(node.type);
+    // a draft that waits, e.g. on a Validate, says why in place of its problems
+    const waiting = draft.applyDisabledReason;
+    // the node's own, then those of the database it runs on (PLAN §11.11)
     const problems =
-      isEditable && !inputProblems.length
-        ? validateEdited(edited, inputSchemas)
+      isEditable && !inputProblems.length && waiting === undefined
+        ? [
+            ...new Set([
+              ...validateEdited(edited, inputSchemas),
+              ...editorState.getNodeDatabaseProblems(query, edited),
+            ]),
+          ]
         : [];
     const warnings = editorState.getNodeWarnings(node);
     return (
       <div
-        className="flex h-full flex-col border-l border-[var(--color-border-default)] bg-[var(--color-bg-panel)]"
+        ref={rootRef}
+        className="flex flex-col rounded border border-[var(--color-border-default)] bg-[var(--color-bg-panel)] shadow-lg"
+        role="dialog"
+        aria-modal={false}
+        // focusable, so opening a node from the keyboard moves into it
+        tabIndex={-1}
+        aria-labelledby={titleId}
         data-testid={LEGEND_CUBE_TEST_ID.NODE_EDITOR}
       >
         <div className="flex h-8 shrink-0 items-center gap-2 border-b border-[var(--color-border-default)] bg-[var(--color-bg-panel-header)] px-2">
@@ -91,15 +147,15 @@ export const CubeNodeEditorPanel = observer(
             icon={definition?.icon}
             className="shrink-0 text-[var(--color-text-secondary)]"
           />
-          <span className="min-w-0 truncate text-lg font-medium">
-            {definition?.label ?? 'Unknown'}
+          <span id={titleId} className="min-w-0 truncate text-lg font-medium">
+            {toEditorTitle(definition?.label ?? 'Unknown')}
           </span>
           <span className="shrink-0 text-base text-[var(--color-text-muted)]">
             {node.id}
           </span>
-          {definition?.beta && (
+          {definition && getCubeNodeBadge(definition) && (
             <span className="shrink-0 rounded-sm bg-[var(--color-accent)] px-1 text-xs font-medium text-[var(--color-text-on-accent)]">
-              BETA
+              {getCubeNodeBadge(definition)}
             </span>
           )}
           <span
@@ -116,10 +172,10 @@ export const CubeNodeEditorPanel = observer(
           <span className="flex-1" />
           {isCapture ? (
             <span
-              className="shrink-0 text-base text-[var(--color-text-secondary)]"
-              title={SELECT_NODE_TOOLTIP}
+              className="shrink-0 rounded-sm bg-[var(--color-accent)] px-1 text-sm font-medium text-[var(--color-text-on-accent)]"
+              title="This is the step that runs: Execute shows its rows"
             >
-              (Selected)
+              {`▶ ${RUNNING_NODE_LABEL}`}
             </span>
           ) : (
             <button
@@ -127,23 +183,25 @@ export const CubeNodeEditorPanel = observer(
               title={SELECT_NODE_TOOLTIP}
               onClick={() => editorState.select(node.id)}
             >
-              Select
+              {RUN_THIS_STEP_LABEL}
             </button>
           )}
           <button
             className="flex h-6 w-6 shrink-0 items-center justify-center text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]"
             title={
               nodeEditor.hasChanges && !readOnly
-                ? 'Close, applying the changes'
+                ? draft.applyDisabledReason !== undefined
+                  ? `Can't close yet: ${draft.applyDisabledReason}, or Cancel`
+                  : 'Close, applying the changes'
                 : 'Close'
             }
             aria-label="Close the editor"
-            onClick={() => nodeEditor.close()}
+            onClick={() => closing(() => nodeEditor.finish())}
           >
             <TimesIcon />
           </button>
         </div>
-        <div className="min-h-0 flex-1 overflow-auto p-2">
+        <div className="max-h-[33vh] min-h-[80px] overflow-y-auto p-2">
           {warnings.map((warning) => (
             <div
               key={warning}
@@ -175,23 +233,33 @@ export const CubeNodeEditorPanel = observer(
               {`${node.describe()}: this node can't be edited.`}
             </div>
           )}
-          {problems.length > 0 && (
-            <div
-              className="mt-3 border-t border-[var(--color-border-subtle)] pt-2 text-base text-[var(--color-status-error)]"
-              role="alert"
-              aria-label="Problems"
-            >
-              {problems.map((problem) => (
-                <div key={problem}>{problem}</div>
-              ))}
-            </div>
-          )}
         </div>
+        {isEditable && !inputProblems.length && waiting !== undefined && (
+          // in place of the problems, under the body too
+          <div
+            className="shrink-0 break-words border-t border-[var(--color-border-default)] px-2 py-1 text-base text-[var(--color-text-secondary)]"
+            role="status"
+          >
+            {waiting}
+          </div>
+        )}
+        {problems.length > 0 && (
+          // under the body, so they stay in view while it scrolls
+          <div
+            className="max-h-[56px] shrink-0 overflow-y-auto break-words border-t border-[var(--color-border-default)] px-2 py-1 text-base text-[var(--color-status-error)]"
+            role="alert"
+            aria-label="Problems"
+          >
+            {problems.map((problem) => (
+              <div key={problem}>{problem}</div>
+            ))}
+          </div>
+        )}
         {isEditable && (
           <div className="flex h-10 shrink-0 items-center justify-end gap-2 border-t border-[var(--color-border-default)] px-2">
             <CubeButton
               title="Drop the changes and close"
-              onClick={() => nodeEditor.cancel()}
+              onClick={() => closing(() => nodeEditor.cancel())}
             >
               Cancel
             </CubeButton>
@@ -200,10 +268,17 @@ export const CubeNodeEditorPanel = observer(
               title={
                 readOnly
                   ? READ_ONLY_CUBE_TITLE
-                  : 'Store the changes, as one step to undo'
+                  : (draft.applyDisabledReason ??
+                    'Store the changes as one step to undo, and close')
+              }
+              disabled={
+                readOnly ||
+                !nodeEditor.hasChanges ||
+                draft.applyDisabledReason !== undefined
               }
-              disabled={readOnly || !nodeEditor.hasChanges}
-              onClick={() => nodeEditor.apply()}
+              // Apply closes, as the other ways out but Cancel do (UX
+              // audit B4, user, 2026-10-11)
+              onClick={() => closing(() => nodeEditor.finish())}
             >
               Apply
             </CubeButton>

package/src/components/editors/CubeNodeEditorPopper.tsx

@@ -0,0 +1,191 @@
+/**
+ * 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 { BasePopper } from '@finos/legend-art';
+import { useStore } from '@xyflow/react';
+import { observer } from 'mobx-react-lite';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { noop } from '@finos/legend-shared';
+import { autorun } from 'mobx';
+import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import type { CubeCanvasPosition } from '../canvas/CubeCanvasLayout.js';
+import {
+  getCubeNodeScreenRect,
+  isCubeNodeInView,
+  toDOMRect,
+} from '../canvas/CubeNodeEditorAnchor.js';
+import { returnFocusToCubeCanvasNode } from '../canvas/CubeCanvasNodeFocus.js';
+import { CubeNodeEditorPanel } from './CubeNodeEditorPanel.js';
+import { useCubeNodeEditorDismiss } from './useCubeNodeEditorDismiss.js';
+
+/**
+ * Every node type's editor is this wide (U1: 27rem, read at a 16px root;
+ * Legend's root is 62.5%, so it is written in pixels)
+ */
+export const CUBE_NODE_EDITOR_WIDTH = 432;
+
+/**
+ * Above the canvas and the grid, below MUI's dialogs (1300), so a dialog
+ * opened from the editor covers it; inside the dialog that hosts the page,
+ * if one does, so the page's own dialog doesn't
+ */
+export const CUBE_NODE_EDITOR_Z_INDEX = 1250;
+
+/** The gap between the node and its editor, and between the editor and the window's edges */
+const GAP = 8;
+
+const MODIFIERS = [
+  { name: 'offset', options: { offset: [0, GAP] } },
+  {
+    name: 'flip',
+    options: { fallbackPlacements: ['top'], padding: GAP },
+  },
+  {
+    name: 'preventOverflow',
+    options: {
+      rootBoundary: 'viewport',
+      padding: GAP,
+      altAxis: true,
+      tether: false,
+    },
+  },
+];
+
+type CubePopperInstance = NonNullable<
+  Extract<
+    React.ComponentProps<typeof BasePopper>['popperRef'],
+    React.RefObject<unknown>
+  >['current']
+>;
+
+/**
+ * The node editor, floating below its node (PLAN §11.8, spec §17.5): one
+ * width for every node type, over the results grid if it must be, inside the
+ * window, above the node when there is no room below. It is rendered inside
+ * the canvas, whose pan and zoom it follows, and shown in a layer of its own
+ * so the canvas doesn't clip it. A node panned out of view hides its editor,
+ * which stays open with its edits.
+ */
+export const CubeNodeEditorPopper = observer(
+  (props: {
+    editorState: CubeEditorState;
+    /** Where the layout put each node */
+    positions: ReadonlyMap<string, CubeCanvasPosition>;
+  }) => {
+    const { editorState, positions } = props;
+    const { nodeId } = editorState.nodeEditor;
+    const transform = useStore((state) => state.transform);
+    const canvas = useStore((state) => state.domNode);
+    // a canvas that changes size may show or hide the node
+    useStore((state) => state.width);
+    useStore((state) => state.height);
+    const position = nodeId === undefined ? undefined : positions.get(nodeId);
+    const editorRef = useRef<HTMLDivElement>(null);
+    useCubeNodeEditorDismiss(editorState, editorRef);
+    // MUI's layer mounts its content a render later: watch the element itself
+    const [editorElement, setEditorElement] = useState<HTMLDivElement | null>(
+      null,
+    );
+    const popperRef = useRef<CubePopperInstance>(null);
+    // the editor placed again whenever its own content changes its size, e.g. a
+    // row added, so it stays inside the window
+    useEffect(() => {
+      if (!editorElement || typeof ResizeObserver === 'undefined') {
+        return undefined;
+      }
+      const resizeObserver = new ResizeObserver(() => {
+        popperRef.current?.update().catch(noop());
+      });
+      resizeObserver.observe(editorElement);
+      return () => resizeObserver.disconnect();
+    }, [editorElement]);
+    // the keyboard goes back to the node a shortcut closed the editor of
+    useEffect(
+      () =>
+        autorun(() => {
+          const target = editorState.nodeEditor.nodeToFocus;
+          if (target !== undefined) {
+            returnFocusToCubeCanvasNode(target, null, document.activeElement);
+            editorState.nodeEditor.clearNodeToFocus();
+          }
+        }),
+      [editorState],
+    );
+    // the popper reads the node's place whenever it positions the editor,
+    // which it does on every render, so one anchor serves the whole pan or
+    // zoom
+    const latest = useRef({ position, transform, canvas });
+    latest.current = { position, transform, canvas };
+    const anchor = useMemo(
+      () => ({
+        getBoundingClientRect: (): DOMRect => {
+          const current = latest.current;
+          return toDOMRect(
+            current.position && current.canvas
+              ? getCubeNodeScreenRect(
+                  current.position,
+                  current.transform,
+                  current.canvas.getBoundingClientRect(),
+                )
+              : { left: 0, top: 0, width: 0, height: 0 },
+          );
+        },
+      }),
+      [],
+    );
+    if (nodeId === undefined || !position || !canvas) {
+      return null;
+    }
+    const canvasRect = canvas.getBoundingClientRect();
+    const inView = isCubeNodeInView(
+      getCubeNodeScreenRect(position, transform, canvasRect),
+      canvasRect,
+    );
+    return (
+      <BasePopper
+        open={true}
+        // the editor inside is the dialog; the layer is no tooltip
+        role="presentation"
+        popperRef={popperRef}
+        anchorEl={anchor}
+        // a page hosted in a dialog, as Studio hosts Cube, keeps the editor
+        // in the dialog's layer, above the page: on the body, under the
+        // dialogs' z-index, the dialog would hide it
+        container={canvas.closest<HTMLElement>('.MuiDialog-root')}
+        placement="bottom"
+        modifiers={MODIFIERS}
+        style={{
+          zIndex: CUBE_NODE_EDITOR_Z_INDEX,
+          width: CUBE_NODE_EDITOR_WIDTH,
+          visibility: inView ? undefined : 'hidden',
+        }}
+      >
+        {/* a right-click in the editor is the editor's, never the canvas's menu */}
+        <div
+          // portalled out of `.legend-cube`, so its styles name the layer too
+          className="legend-cube__node-editor-layer"
+          ref={(element) => {
+            editorRef.current = element;
+            setEditorElement(element);
+          }}
+          onContextMenu={(event) => event.stopPropagation()}
+        >
+          <CubeNodeEditorPanel editorState={editorState} />
+        </div>
+      </BasePopper>
+    );
+  },
+);

package/src/components/editors/CubeNodeEditorRegistry.ts

@@ -15,23 +15,45 @@
  */
 
 import {
+  Concat,
+  DataProductAccessPointSource,
+  Difference,
+  IngestDatasetSource,
   Distinct,
   Drop,
+  ExpressionFilter,
+  Pivot,
+  Extend,
   Filter,
+  FunctionSource,
+  Group,
   Join,
   Limit,
+  Partition,
   RelationalTableSource,
   Rename,
   Restrict,
   type Schema,
+  ServiceSource,
   Slice,
   Sort,
 } from '@finos/legend-cube';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
 import type { CubeNodeDraft } from '../../stores/editors/CubeNodeDraft.js';
+import { CubeConcatEditor } from './CubeConcatEditor.js';
+import { CubeDataProductSourceEditor } from './CubeDataProductSourceEditor.js';
+import { CubeExpressionFilterEditor } from './CubeExpressionFilterEditor.js';
+import { CubePivotEditor } from './CubePivotEditor.js';
+import { CubeDifferenceEditor } from './CubeDifferenceEditor.js';
+import { CubeIngestSourceEditor } from './CubeIngestSourceEditor.js';
+import { CubeServiceSourceEditor } from './CubeServiceSourceEditor.js';
+import { CubeFunctionSourceEditor } from './CubeFunctionSourceEditor.js';
 import { CubeDistinctEditor } from './CubeDistinctEditor.js';
+import { CubeExtendEditor } from './CubeExtendEditor.js';
 import { CubeFilterEditor } from './CubeFilterEditor.js';
+import { CubeGroupEditor } from './CubeGroupEditor.js';
 import { CubeJoinEditor } from './CubeJoinEditor.js';
+import { CubePartitionEditor } from './CubePartitionEditor.js';
 import { CubeRenameEditor } from './CubeRenameEditor.js';
 import { CubeRestrictEditor } from './CubeRestrictEditor.js';
 import { CubeRowCountEditor } from './CubeRowCountEditor.js';
@@ -69,8 +91,15 @@ export const CUBE_NODE_EDITORS: ReadonlyMap<
   React.FC<CubeNodeEditorProps>
 > = new Map<string, React.FC<CubeNodeEditorProps>>([
   [RelationalTableSource.TYPE, CubeSourceEditor],
+  [FunctionSource.TYPE, CubeFunctionSourceEditor],
+  [DataProductAccessPointSource.TYPE, CubeDataProductSourceEditor],
+  [IngestDatasetSource.TYPE, CubeIngestSourceEditor],
+  [ServiceSource.TYPE, CubeServiceSourceEditor],
   [Sort.TYPE, CubeSortEditor],
+  [Group.TYPE, CubeGroupEditor],
   [Filter.TYPE, CubeFilterEditor],
+  [ExpressionFilter.TYPE, CubeExpressionFilterEditor],
+  [Pivot.TYPE, CubePivotEditor],
   [Restrict.TYPE, CubeRestrictEditor],
   [Rename.TYPE, CubeRenameEditor],
   [Distinct.TYPE, CubeDistinctEditor],
@@ -78,4 +107,8 @@ export const CUBE_NODE_EDITORS: ReadonlyMap<
   [Drop.TYPE, CubeRowCountEditor],
   [Limit.TYPE, CubeRowCountEditor],
   [Slice.TYPE, CubeSliceEditor],
+  [Concat.TYPE, CubeConcatEditor],
+  [Difference.TYPE, CubeDifferenceEditor],
+  [Partition.TYPE, CubePartitionEditor],
+  [Extend.TYPE, CubeExtendEditor],
 ]);