@finos/legend-cube-builder 0.0.3 → 0.0.4

package/src/components/editors/CubeJoinEditor.tsx

@@ -14,9 +14,7 @@
  * limitations under the License.
  */
 
-import { TimesIcon } from '@finos/legend-art';
 import {
-  areCompatibleTypes,
   getDuplicateJoinColumns,
   isJoinType,
   JOIN_TYPE_LABELS,
@@ -28,103 +26,15 @@ import { guaranteeType, noop } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
-import {
-  CUBE_TABLE_FLAG_LABELS,
-  READ_ONLY_CUBE_TITLE,
-} from '../../__lib__/LegendCubeLabels.js';
-import { CubeTableFlag } from '../../graph-manager/CubeEngine.js';
-import {
-  type CubeJoinKeyPair,
-  CubeJoinDraft,
-  isUntypedColumn,
-} from '../../stores/editors/CubeJoinDraft.js';
+import { READ_ONLY_CUBE_TITLE } from '../../__lib__/LegendCubeLabels.js';
+import { CubeJoinDraft } from '../../stores/editors/CubeJoinDraft.js';
 import { CubeButton } from '../CubeButton.js';
-import { CubeColumnPicker } from './CubeColumnPicker.js';
+import { CubeJoinKeyRows } from './CubeJoinKeyRows.js';
 import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
 
-const TYPE_UNKNOWN = CUBE_TABLE_FLAG_LABELS[CubeTableFlag.TYPE_UNKNOWN];
-
-const CubeJoinKeyRow = observer(
-  (props: {
-    editorProps: CubeNodeEditorProps;
-    draft: CubeJoinDraft;
-    pair: CubeJoinKeyPair;
-    index: number;
-    leftSchema: Schema;
-    rightSchema: Schema;
-  }) => {
-    const { editorProps, draft, pair, index, leftSchema, rightSchema } = props;
-    const { editorState, readOnly } = editorProps;
-    const { query } = editorState.document;
-    const { analysis, modelOutline } = editorState;
-    const [leftId, rightId] = query.getInputIds(draft.original.id);
-    const leftType = leftSchema.type(pair.left);
-    const rightType = rightSchema.type(pair.right);
-    const isIncompatible =
-      leftType !== undefined &&
-      rightType !== undefined &&
-      !areCompatibleTypes(leftType, rightType);
-    const isUntyped =
-      (leftId !== undefined &&
-        Boolean(pair.left) &&
-        isUntypedColumn(modelOutline, query, analysis, leftId, pair.left)) ||
-      (rightId !== undefined &&
-        Boolean(pair.right) &&
-        isUntypedColumn(modelOutline, query, analysis, rightId, pair.right));
-    const position = index + 1;
-    return (
-      <li className="flex flex-col gap-1 border-b border-[var(--color-border-subtle)] py-1">
-        <div className="grid grid-cols-[1fr_auto_1fr_auto] items-center gap-1">
-          <CubeColumnPicker
-            label={`Left join column ${position}`}
-            schema={leftSchema}
-            value={pair.left}
-            invalid={isIncompatible}
-            disabled={readOnly}
-            onChange={(name) => draft.setLeftColumn(pair.key, name)}
-          />
-          <span className="text-[var(--color-text-secondary)]">=</span>
-          <CubeColumnPicker
-            label={`Right join column ${position}`}
-            schema={rightSchema}
-            value={pair.right}
-            invalid={isIncompatible}
-            disabled={readOnly}
-            onChange={(name) => draft.setRightColumn(pair.key, name)}
-          />
-          <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 join columns ${position}`}
-            title="Remove these join columns"
-            disabled={readOnly}
-            onClick={() => draft.removePair(pair.key)}
-          >
-            <TimesIcon />
-          </button>
-        </div>
-        {isIncompatible && (
-          <div className="text-sm text-[var(--color-status-error)]">
-            {`${leftType.displayName} and ${rightType.displayName} can't be compared`}
-          </div>
-        )}
-        {isUntyped && (
-          <div
-            className="text-sm text-[var(--color-status-warn)]"
-            title={TYPE_UNKNOWN.description}
-          >
-            {`${TYPE_UNKNOWN.label}: the column's real type is not known to Cube, so the engine may not match its values`}
-          </div>
-        )}
-      </li>
-    );
-  },
-);
-
 /**
- * The Join editor (spec §17.6): the join type, pairs of key columns, a left
- * one from the Left input and a right one from the Right input, and Swap
- * Inputs. A pair whose types can't be compared is marked; one on a column
- * Cube can't type is warned about, not blocked.
+ * The Join editor (spec §17.6): the join type, pairs of key columns
+ * (`CubeJoinKeyRows`), and Swap Inputs.
  */
 export const CubeJoinEditor = observer((props: CubeNodeEditorProps) => {
   const { editorState, inputSchemas, readOnly } = props;
@@ -145,10 +55,6 @@ export const CubeJoinEditor = observer((props: CubeNodeEditorProps) => {
   const fix = duplicates.length
     ? planJoinDuplicateFix(edited, leftSchema, rightSchema)
     : undefined;
-  const canAddPair =
-    !readOnly &&
-    draft.pairs.length <
-      Math.min(leftSchema.columns.length, rightSchema.columns.length);
   return (
     <div className="flex flex-col gap-2 text-base">
       <div className="flex items-center gap-2">
@@ -180,38 +86,12 @@ export const CubeJoinEditor = observer((props: CubeNodeEditorProps) => {
           Swap Inputs
         </CubeButton>
       </div>
-      <div className="grid grid-cols-[1fr_auto_1fr_auto] gap-1 text-sm text-[var(--color-text-secondary)]">
-        <span>Left</span>
-        <span />
-        <span>Right</span>
-        <span />
-      </div>
-      <ul aria-label="Join columns">
-        {draft.pairs.map((pair, index) => (
-          <CubeJoinKeyRow
-            key={pair.key}
-            editorProps={props}
-            draft={draft}
-            pair={pair}
-            index={index}
-            leftSchema={leftSchema}
-            rightSchema={rightSchema}
-          />
-        ))}
-      </ul>
-      <div>
-        <CubeButton
-          title={
-            canAddPair
-              ? 'Add a pair of join columns'
-              : 'Every column of an input is already a join column'
-          }
-          disabled={!canAddPair}
-          onClick={() => draft.addPair()}
-        >
-          Add join columns
-        </CubeButton>
-      </div>
+      <CubeJoinKeyRows
+        editorProps={props}
+        draft={draft}
+        leftSchema={leftSchema}
+        rightSchema={rightSchema}
+      />
       {duplicates.length > 0 && (
         <div className="text-sm text-[var(--color-status-warn)]">
           <div>
@@ -220,7 +100,7 @@ export const CubeJoinEditor = observer((props: CubeNodeEditorProps) => {
           </div>
           <ul aria-label="Columns in both inputs">
             {duplicates.map((name, index) => (
-              <li key={name} className="font-mono">
+              <li key={name} className="break-all font-mono">
                 {fix
                   ? `${name} → ${fix.left[index]?.to} (Left), ${fix.right[index]?.to} (Right)`
                   : name}

package/src/components/editors/CubeJoinKeyRows.tsx

@@ -0,0 +1,183 @@
+/**
+ * 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 { TimesIcon } from '@finos/legend-art';
+import {
+  areCompatibleTypes,
+  isDateOrTimestampType,
+  type Schema,
+} from '@finos/legend-cube';
+import { observer } from 'mobx-react-lite';
+import {
+  CUBE_TABLE_FLAG_LABELS,
+  DATE_OR_TIMESTAMP_WARNING,
+} from '../../__lib__/LegendCubeLabels.js';
+import { CubeTableFlag } from '../../graph-manager/CubeEngine.js';
+import { isUntypedColumn } from '../../stores/editors/CubeJoinDraft.js';
+import type {
+  CubeJoinKeyPair,
+  CubeJoinKeysDraft,
+} from '../../stores/editors/CubeJoinKeyPairs.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeColumnPicker } from './CubeColumnPicker.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+
+const TYPE_UNKNOWN = CUBE_TABLE_FLAG_LABELS[CubeTableFlag.TYPE_UNKNOWN];
+
+const CubeJoinKeyRow = observer(
+  (props: {
+    editorProps: CubeNodeEditorProps;
+    draft: CubeJoinKeysDraft;
+    pair: CubeJoinKeyPair;
+    index: number;
+    leftSchema: Schema;
+    rightSchema: Schema;
+  }) => {
+    const { editorProps, draft, pair, index, leftSchema, rightSchema } = props;
+    const { editorState, readOnly } = editorProps;
+    const { query } = editorState.document;
+    const { analysis, modelOutline } = editorState;
+    const [leftId, rightId] = query.getInputIds(draft.original.id);
+    const leftType = leftSchema.type(pair.left);
+    const rightType = rightSchema.type(pair.right);
+    const isIncompatible =
+      leftType !== undefined &&
+      rightType !== undefined &&
+      !areCompatibleTypes(leftType, rightType);
+    const isUntyped =
+      (leftId !== undefined &&
+        Boolean(pair.left) &&
+        isUntypedColumn(modelOutline, query, analysis, leftId, pair.left)) ||
+      (rightId !== undefined &&
+        Boolean(pair.right) &&
+        isUntypedColumn(modelOutline, query, analysis, rightId, pair.right));
+    // a converted Date (Convert types): its dates match timestamps only at midnight
+    const isDateOrTimestamp =
+      !isIncompatible &&
+      [leftType, rightType].some(
+        (type) => type !== undefined && isDateOrTimestampType(type),
+      );
+    const position = index + 1;
+    return (
+      <li className="flex flex-col gap-1 border-b border-[var(--color-border-subtle)] py-1">
+        <div className="grid grid-cols-[1fr_auto_1fr_auto] items-center gap-1">
+          <CubeColumnPicker
+            label={`Left join column ${position}`}
+            schema={leftSchema}
+            value={pair.left}
+            invalid={isIncompatible}
+            disabled={readOnly}
+            onChange={(name) => draft.setLeftColumn(pair.key, name)}
+          />
+          <span className="text-[var(--color-text-secondary)]">=</span>
+          <CubeColumnPicker
+            label={`Right join column ${position}`}
+            schema={rightSchema}
+            value={pair.right}
+            invalid={isIncompatible}
+            disabled={readOnly}
+            onChange={(name) => draft.setRightColumn(pair.key, name)}
+          />
+          <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 join columns ${position}`}
+            title="Remove these join columns"
+            disabled={readOnly}
+            onClick={() => draft.removePair(pair.key)}
+          >
+            <TimesIcon />
+          </button>
+        </div>
+        {isIncompatible && (
+          <div className="text-sm text-[var(--color-status-error)]">
+            {`${leftType.displayName} and ${rightType.displayName} can't be compared`}
+          </div>
+        )}
+        {isDateOrTimestamp && (
+          <div className="text-sm text-[var(--color-status-warn)]">
+            {DATE_OR_TIMESTAMP_WARNING}
+          </div>
+        )}
+        {isUntyped && (
+          <div
+            className="text-sm text-[var(--color-status-warn)]"
+            title={TYPE_UNKNOWN.description}
+          >
+            {`${TYPE_UNKNOWN.label}: the column's real type is not known to Cube, so the engine may not match its values`}
+          </div>
+        )}
+      </li>
+    );
+  },
+);
+
+/**
+ * The pairs of key columns of a node that joins its two inputs (a Join's, spec
+ * §17.6; a Difference's, PLAN §11.7): a left one from the Left input and a
+ * right one from the Right input on each row, and a button that adds a pair.
+ * A pair whose types can't be compared is marked; one on a column Cube can't
+ * type is warned about, not blocked.
+ */
+export const CubeJoinKeyRows = observer(
+  (props: {
+    editorProps: CubeNodeEditorProps;
+    draft: CubeJoinKeysDraft;
+    leftSchema: Schema;
+    rightSchema: Schema;
+  }) => {
+    const { editorProps, draft, leftSchema, rightSchema } = props;
+    const canAddPair =
+      !editorProps.readOnly &&
+      draft.pairs.length <
+        Math.min(leftSchema.columns.length, rightSchema.columns.length);
+    return (
+      <>
+        <div className="grid grid-cols-[1fr_auto_1fr_auto] gap-1 text-sm text-[var(--color-text-secondary)]">
+          <span>Left</span>
+          <span />
+          <span>Right</span>
+          <span />
+        </div>
+        <ul aria-label="Join columns">
+          {draft.pairs.map((pair, index) => (
+            <CubeJoinKeyRow
+              key={pair.key}
+              editorProps={editorProps}
+              draft={draft}
+              pair={pair}
+              index={index}
+              leftSchema={leftSchema}
+              rightSchema={rightSchema}
+            />
+          ))}
+        </ul>
+        <div>
+          <CubeButton
+            title={
+              canAddPair
+                ? 'Add a pair of join columns'
+                : 'Every column of an input is already a join column'
+            }
+            disabled={!canAddPair}
+            onClick={() => draft.addPair()}
+          >
+            Add join columns
+          </CubeButton>
+        </div>
+      </>
+    );
+  },
+);

package/src/components/editors/CubeNodeEditorPanel.tsx

@@ -18,21 +18,27 @@ 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,
   SELECT_NODE_TOOLTIP,
 } from '../../__lib__/LegendCubeHelpText.js';
-import { READ_ONLY_CUBE_TITLE } from '../../__lib__/LegendCubeLabels.js';
+import {
+  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 +48,58 @@ const validateEdited = (
 ): string[] => {
   const errors: string[] = [];
   node.validate(inputSchemas, errors);
-  return [...new Set(errors)];
+  // waiting for the engine to type an Extend is no problem (PLAN §11.7)
+  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 +114,22 @@ 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;
     const problems =
-      isEditable && !inputProblems.length
+      isEditable && !inputProblems.length && waiting === undefined
         ? validateEdited(edited, inputSchemas)
         : [];
     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,8 +137,8 @@ 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}
@@ -134,16 +180,18 @@ export const CubeNodeEditorPanel = observer(
             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 +223,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,9 +258,14 @@ 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')
+              }
+              disabled={
+                readOnly ||
+                !nodeEditor.hasChanges ||
+                draft.applyDisabledReason !== undefined
               }
-              disabled={readOnly || !nodeEditor.hasChanges}
               onClick={() => nodeEditor.apply()}
             >
               Apply