@finos/legend-cube-builder 0.0.3 → 0.0.5

package/src/components/CubeLambdaImportBanner.tsx

@@ -0,0 +1,97 @@
+/**
+ * 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 { observer } from 'mobx-react-lite';
+import { LEGEND_CUBE_TEST_ID } from '../__lib__/LegendCubeTesting.js';
+import {
+  CUBE_LAMBDA_IMPORT_MESSAGE,
+  CubeLambdaFidelity,
+  type CubeLambdaImportState,
+} from '../stores/CubeLambdaImportState.js';
+import { CubeButton } from './CubeButton.js';
+
+/**
+ * The lambda the page opened on (PLAN §11.18), in the graph region: while it
+ * is read, why it couldn't be, or that Cube writes it another way
+ */
+export const CubeLambdaImportBanner = observer(
+  (props: { lambdaImport: CubeLambdaImportState }) => {
+    const { lambdaImport } = props;
+    const { label = 'the query', error, fidelity, notes } = lambdaImport;
+    if (lambdaImport.isReading) {
+      return (
+        <div
+          className="shrink-0 border-b border-[var(--color-border-default)] px-2 py-1 text-base text-[var(--color-text-secondary)]"
+          role="status"
+        >
+          {CUBE_LAMBDA_IMPORT_MESSAGE.READING(label)}
+        </div>
+      );
+    }
+    if (error !== undefined) {
+      return (
+        <div
+          className="flex shrink-0 items-start gap-2 border-b border-[var(--color-border-default)] bg-[var(--color-status-error-bg)] px-2 py-1 text-base text-[var(--color-status-error)]"
+          role="alert"
+          data-testid={LEGEND_CUBE_TEST_ID.LAMBDA_IMPORT}
+        >
+          <span className="min-w-0 flex-1 break-words">
+            <span className="font-medium">
+              {CUBE_LAMBDA_IMPORT_MESSAGE.CANT_READ(label)}:
+            </span>{' '}
+            {error.message}
+            {error.detail !== undefined && (
+              <details>
+                <summary className="cursor-pointer">Details</summary>
+                <pre className="whitespace-pre-wrap text-sm">
+                  {error.detail}
+                </pre>
+              </details>
+            )}
+          </span>
+          <CubeButton onClick={() => lambdaImport.dismiss()}>
+            Dismiss
+          </CubeButton>
+        </div>
+      );
+    }
+    const warnings = [
+      ...(fidelity === CubeLambdaFidelity.REWRITTEN
+        ? [CUBE_LAMBDA_IMPORT_MESSAGE.REWRITTEN(label)]
+        : fidelity === CubeLambdaFidelity.UNCHECKED
+          ? [CUBE_LAMBDA_IMPORT_MESSAGE.UNCHECKED(label)]
+          : []),
+      ...notes,
+    ];
+    if (!warnings.length) {
+      return null;
+    }
+    return (
+      <div
+        className="flex shrink-0 items-start gap-2 border-b border-[var(--color-border-default)] bg-[var(--color-status-warn-bg)] px-2 py-1 text-base text-[var(--color-text-primary)]"
+        role="status"
+        data-testid={LEGEND_CUBE_TEST_ID.LAMBDA_IMPORT}
+      >
+        <span className="min-w-0 flex-1 break-words">
+          {warnings.map((warning) => (
+            <div key={warning}>{warning}</div>
+          ))}
+        </span>
+        <CubeButton onClick={() => lambdaImport.dismiss()}>Dismiss</CubeButton>
+      </div>
+    );
+  },
+);

package/src/components/CubeNodeIcon.tsx

@@ -19,12 +19,21 @@ import {
   AlignMiddleIcon,
   AlignTopIcon,
   ArrowsJoinIcon,
+  CalculatorIcon,
+  CodeIcon,
+  CompareIcon,
   CompressIcon,
   DataCubeIcon,
+  DatabaseImportIcon,
   clsx,
   FilterIcon,
+  FunctionIcon,
+  LayerGroupIcon,
+  PackageIcon,
   PencilIcon,
   QuestionSquareIcon,
+  RobotIcon,
+  SigmaIcon,
   SortIcon,
   TableIcon,
 } from '@finos/legend-art';
@@ -34,13 +43,24 @@ const NODE_ICONS: Readonly<
   Record<string, React.FC<{ className?: string; title?: string }>>
 > = {
   table: TableIcon,
+  function: CodeIcon,
+  dataProduct: PackageIcon,
+  ingest: DatabaseImportIcon,
+  service: RobotIcon,
   filter: FilterIcon,
+  expressionFilter: FunctionIcon,
   join: ArrowsJoinIcon,
+  concat: LayerGroupIcon,
+  difference: CompareIcon,
+  extend: CalculatorIcon,
   limit: AlignTopIcon,
   drop: AlignBottomIcon,
   slice: AlignMiddleIcon,
   distinct: CompressIcon,
   restrict: DataCubeIcon.TableColumns,
+  group: DataCubeIcon.TableGroupBy,
+  pivot: DataCubeIcon.TablePivot,
+  partition: SigmaIcon,
   rename: PencilIcon,
   sort: SortIcon,
 };

package/src/components/CubeSchemaColumnsTable.tsx

@@ -0,0 +1,54 @@
+/**
+ * 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 type { Schema } from '@finos/legend-cube';
+import {
+  getColumnTypeLabel,
+  getExactColumnTypeLabel,
+} from '../__lib__/LegendCubeLabels.js';
+import { CubeColumnTypeIcon } from './editors/CubeColumnPicker.js';
+
+/** A source's columns, with their precise types and whether they can be empty */
+export const CubeSchemaColumnsTable: React.FC<{ schema: Schema }> = ({
+  schema,
+}) => (
+  <table className="w-full text-base" aria-label="Columns">
+    <thead>
+      <tr className="text-left text-[var(--color-text-secondary)]">
+        <th className="font-normal">Column</th>
+        <th className="font-normal">Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      {schema.columns.map((column) => (
+        <tr key={column.name}>
+          <td className="break-all pr-2">{column.name}</td>
+          <td
+            title={`${getExactColumnTypeLabel(column)} (${column.type.fullName})`}
+          >
+            <span className="flex items-center gap-1">
+              <CubeColumnTypeIcon
+                type={column.type}
+                className="text-[var(--color-text-secondary)]"
+              />
+              {getColumnTypeLabel(column)}
+            </span>
+          </td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+);

package/src/components/canvas/CubeCanvas.tsx

@@ -36,7 +36,9 @@ import { observer } from 'mobx-react-lite';
 import { useEffect, useMemo, useRef } from 'react';
 import { useDrop } from 'react-dnd';
 import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import { canAddCubeNode } from '../../stores/CubeAddPlacement.js';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import { isCubeSampleDataOffered } from '../../stores/CubeHost.js';
 import {
   buildCubeCanvasEdges,
   buildCubeCanvasNodes,
@@ -56,6 +58,7 @@ import {
 import { CubeCanvasEdge } from './CubeCanvasEdge.js';
 import { layoutCubeQuery } from './CubeCanvasLayout.js';
 import { CubeCanvasNode } from './CubeCanvasNode.js';
+import { CubeNodeEditorPopper } from '../editors/CubeNodeEditorPopper.js';
 
 // React Flow re-renders every node when these change identity
 const NODE_TYPES = { [CUBE_CANVAS_NODE_TYPE]: CubeCanvasNode };
@@ -63,7 +66,8 @@ const EDGE_TYPES = { [CUBE_CANVAS_EDGE_TYPE]: CubeCanvasEdge };
 const PRO_OPTIONS = { hideAttribution: true };
 /** Small, so it covers little of a short canvas */
 const MINI_MAP_STYLE = { width: 120, height: 80 };
-const FIT_VIEW_OPTIONS = { padding: 0.2, maxZoom: 1 };
+// little padding, so a long flow keeps its text as large as it can
+const FIT_VIEW_OPTIONS = { padding: 0.1, maxZoom: 1 };
 
 /**
  * Whether dragging from one handle to another may connect the two nodes: out
@@ -93,9 +97,8 @@ const CubeCanvasFlow = observer((props: { editorState: CubeEditorState }) => {
   );
   const edges = useMemo(() => buildCubeCanvasEdges(query), [query]);
   // the view fits the graph again whenever the layout moves a node, or the
-  // canvas changes size (e.g. the node editor opens beside it, or the
-  // splitter above the grid moves), once React Flow has measured every node:
-  // it fits only measured ones
+  // canvas changes size (e.g. the splitter above the grid moves), once React
+  // Flow has measured every node: it fits only measured ones
   const layoutSignature = useMemo(
     () => JSON.stringify([...positions]),
     [positions],
@@ -135,7 +138,10 @@ const CubeCanvasFlow = observer((props: { editorState: CubeEditorState }) => {
           return;
         }
         if (event.ctrlKey || event.metaKey) {
-          editorState.select(flowNode.id);
+          // applies and closes the open editor first, opening none (spec §17.5)
+          if (editorState.nodeEditor.finish()) {
+            editorState.select(flowNode.id);
+          }
         } else {
           editorState.nodeEditor.open(flowNode.id);
         }
@@ -152,22 +158,69 @@ const CubeCanvasFlow = observer((props: { editorState: CubeEditorState }) => {
           target.classList.contains('react-flow__node')
             ? target.dataset.id
             : undefined;
-        if (
-          nodeId === undefined ||
-          (event.key !== 'Enter' && event.key !== ' ')
-        ) {
+        if (nodeId === undefined) {
+          return;
+        }
+        // the focused step's keys (the review of the demo, 2026-10-13): only
+        // on the step itself, never in an editor's field
+        const command = event.ctrlKey || event.metaKey;
+        const key = event.key.toLowerCase();
+        const stepAction =
+          !command && (key === 'delete' || key === 'backspace')
+            ? editorState.canRemoveNode(nodeId)
+              ? () => editorState.removeNode(nodeId)
+              : undefined
+            : command && key === 'c'
+              ? editorState.canCopyNode(nodeId)
+                ? () => editorState.copyNode(nodeId)
+                : undefined
+              : command && key === 'v'
+                ? editorState.canPaste
+                  ? () => editorState.pasteNode(nodeId)
+                  : undefined
+                : command && key === 'd'
+                  ? editorState.canDuplicateNode(nodeId)
+                    ? () => editorState.duplicateNode(nodeId)
+                    : undefined
+                  : null;
+        if (stepAction !== null) {
+          event.preventDefault();
+          // the open editor applies first, as for any change to the query
+          if (stepAction && editorState.nodeEditor.finish()) {
+            stepAction();
+          }
+          return;
+        }
+        if (event.key !== 'Enter' && event.key !== ' ') {
           return;
         }
         event.preventDefault();
         if (event.ctrlKey || event.metaKey) {
-          editorState.select(nodeId);
+          if (editorState.nodeEditor.finish()) {
+            editorState.select(nodeId);
+          }
         } else {
           editorState.nodeEditor.open(nodeId);
+          // the keyboard goes on in the editor, once it is shown
+          window.setTimeout(() =>
+            document
+              .querySelector<HTMLElement>(
+                `[data-testid="${LEGEND_CUBE_TEST_ID.NODE_EDITOR}"]`,
+              )
+              ?.focus(),
+          );
         }
       }}
       isValidConnection={(connection) =>
         !readOnly && isCubeCanvasConnectionValid(query, connection)
       }
+      // a connection changes the query, so the open editor applies first,
+      // whether the handles are dragged or clicked
+      onConnectStart={() => editorState.nodeEditor.finish()}
+      // a click on the canvas's background closes the floating editor; a
+      // press there that pans leaves it open
+      onPaneClick={() => editorState.nodeEditor.finish()}
+      onClickConnectStart={() => editorState.nodeEditor.finish()}
       onConnect={(connection) => {
         if (connection.targetHandle) {
           editorState.connect(
@@ -192,6 +245,7 @@ const CubeCanvasFlow = observer((props: { editorState: CubeEditorState }) => {
       <Background />
       <Controls showInteractive={false} />
       <MiniMap pannable={true} zoomable={true} style={MINI_MAP_STYLE} />
+      <CubeNodeEditorPopper editorState={editorState} positions={positions} />
     </ReactFlow>
   );
 });
@@ -199,9 +253,10 @@ const CubeCanvasFlow = observer((props: { editorState: CubeEditorState }) => {
 /**
  * The query as a graph, laid out left to right (spec §17.3). Click a node to
  * edit it, Ctrl or Cmd-click it to run the query up to it, drag from a node's
- * output to another node's input to connect them. A palette item dropped
- * around the nodes is added unconnected. Right-click it, or a node, for the
- * context menu.
+ * output to another node's input to connect them. A transform dropped
+ * around the nodes goes after the selected node; a source, dropped anywhere,
+ * opens the source dialog on its tab (PLAN §11.8). Right-click it, or a
+ * node, for the context menu.
  */
 export const CubeCanvas = observer(
   (props: { editorState: CubeEditorState }) => {
@@ -210,7 +265,8 @@ export const CubeCanvas = observer(
     const [, dropConnector] = useDrop<CubePaletteDragItem>(
       () => ({
         accept: [CUBE_DND_TYPE.PALETTE_ITEM],
-        canDrop: () => !editorState.readOnly,
+        canDrop: (item) =>
+          !editorState.readOnly && canAddCubeNode(editorState, item.nodeType),
         // a node under the pointer, whether it took the drop or refused it,
         // keeps it from the canvas
         drop: (item, monitor) =>
@@ -231,21 +287,39 @@ export const CubeCanvas = observer(
       >
         <ContextMenu
           className="h-full w-full"
+          // an empty query has no menu: there is nothing to add after (U3)
+          disabled={editorState.document.query.isEmpty}
           content={<CubeCanvasContextMenu editorState={editorState} />}
           menuProps={{ elevation: 7 }}
         >
           {editorState.document.query.isEmpty ? (
             <div className="flex h-full items-center justify-center p-4 text-base text-[var(--color-text-secondary)]">
               <span>
-                No tables yet:{' '}
                 <button
                   className="text-[var(--color-accent)] underline disabled:text-[var(--color-text-disabled)] disabled:no-underline"
-                  disabled={editorState.readOnly}
-                  onClick={() => editorState.sourcePicker.open()}
+                  title={editorState.sourcePicker.disabledReason}
+                  disabled={
+                    editorState.sourcePicker.disabledReason !== undefined
+                  }
+                  onClick={() => editorState.sourcePicker.openToChoose()}
                 >
-                  add a table
-                </button>{' '}
-                to start.
+                  Connect to a source
+                </button>
+                {isCubeSampleDataOffered(editorState.host) ? (
+                  <>
+                    {' '}
+                    to start a new one, or{' '}
+                    <button
+                      className="text-[var(--color-accent)] underline"
+                      onClick={() => editorState.examples.open()}
+                    >
+                      open an example
+                    </button>
+                    .
+                  </>
+                ) : (
+                  ' to start a new one.'
+                )}
               </span>
             </div>
           ) : (

package/src/components/canvas/CubeCanvasContextMenu.tsx

@@ -18,21 +18,26 @@ import {
   MenuContent,
   MenuContentDivider,
   MenuContentItem,
-  MenuContentItemIcon,
-  MenuContentItemLabel,
 } from '@finos/legend-art';
-import type { AnyNodeDefinition } from '@finos/legend-cube';
 import { observer } from 'mobx-react-lite';
 import { forwardRef } from 'react';
+import {
+  RUN_THIS_STEP_LABEL,
+  SELECT_NODE_TOOLTIP,
+} from '../../__lib__/LegendCubeHelpText.js';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
-import { CubeNodeIcon } from '../CubeNodeIcon.js';
+import { CubeAddMenuItems } from '../CubeAddItems.js';
 
 /**
  * The canvas's context menu (spec §17.4): the palette, then what can be done
- * to the node it was opened on. On a node, a palette item is added after it;
- * around the nodes, on its own. Every item shows, disabled when it can't be
- * done, so Swap Inputs can be found. The node comes through props: a menu
- * opened around the nodes has none.
+ * to the node it was opened on. On a node, a transform is added after it;
+ * around the nodes, after the selected node; a source opens the source
+ * dialog on its tab (PLAN §11.8, U3 and U4). Every item shows, disabled when
+ * it can't be done, so Swap Inputs can be found. The node comes through
+ * props: a menu opened around the nodes has none. Each item applies the node
+ * editor first, so its edits are never dropped; a palette item adds nothing
+ * when they had to be. Swap Inputs on the edited node is its editor's own,
+ * which applies and follows it.
  */
 export const CubeCanvasContextMenu = observer(
   forwardRef<
@@ -41,45 +46,72 @@ export const CubeCanvasContextMenu = observer(
   >(function CubeCanvasContextMenu(props, ref) {
     const { editorState, nodeId } = props;
     const { query } = editorState.document;
-    const { registry } = editorState;
-    const paletteItem = (definition: AnyNodeDefinition): React.ReactNode => (
-      <MenuContentItem
-        key={definition.type}
-        disabled={!editorState.canAddNode(definition.type, nodeId)}
-        onClick={() => editorState.addNode(definition.type, nodeId)}
-      >
-        <MenuContentItemIcon>
-          <CubeNodeIcon icon={definition.icon} />
-        </MenuContentItemIcon>
-        <MenuContentItemLabel>
-          {definition.label}
-          {definition.beta ? ' (BETA)' : ''}
-        </MenuContentItemLabel>
-      </MenuContentItem>
-    );
+    const finishing =
+      (run: () => void): (() => void) =>
+      () => {
+        if (editorState.nodeEditor.finish()) {
+          run();
+        }
+      };
     return (
       <MenuContent ref={ref}>
-        {registry.sources.map(paletteItem)}
-        <MenuContentDivider />
-        {registry.transforms.map(paletteItem)}
+        <CubeAddMenuItems editorState={editorState} nodeId={nodeId} />
         <MenuContentDivider />
         <MenuContentItem
-          title="Execute runs the query up to this node"
+          title={SELECT_NODE_TOOLTIP}
           disabled={nodeId === undefined || !query.canSelect(nodeId)}
-          onClick={() => nodeId !== undefined && editorState.select(nodeId)}
+          onClick={finishing(
+            () => nodeId !== undefined && editorState.select(nodeId),
+          )}
+        >
+          {RUN_THIS_STEP_LABEL}
+        </MenuContentItem>
+        <MenuContentItem
+          title="Copy this step, to paste it after another (Ctrl/Cmd+C)"
+          disabled={nodeId === undefined || !editorState.canCopyNode(nodeId)}
+          onClick={finishing(
+            () => nodeId !== undefined && editorState.copyNode(nodeId),
+          )}
+        >
+          Copy
+        </MenuContentItem>
+        <MenuContentItem
+          title="Paste the step copied after this one (Ctrl/Cmd+V)"
+          disabled={!editorState.canPaste}
+          onClick={finishing(() => editorState.pasteNode(nodeId))}
+        >
+          Paste
+        </MenuContentItem>
+        <MenuContentItem
+          title="Add a copy of this step after it (Ctrl/Cmd+D)"
+          disabled={
+            nodeId === undefined || !editorState.canDuplicateNode(nodeId)
+          }
+          onClick={finishing(
+            () => nodeId !== undefined && editorState.duplicateNode(nodeId),
+          )}
         >
-          Select
+          Duplicate
         </MenuContentItem>
         <MenuContentItem
           disabled={nodeId === undefined || !editorState.canRemoveNode(nodeId)}
-          onClick={() => nodeId !== undefined && editorState.removeNode(nodeId)}
+          onClick={finishing(
+            () => nodeId !== undefined && editorState.removeNode(nodeId),
+          )}
         >
           Remove
         </MenuContentItem>
         <MenuContentItem
           title="Swap the node's two inputs, e.g. a Join's Left and Right"
           disabled={nodeId === undefined || !editorState.canSwapInputs(nodeId)}
-          onClick={() => nodeId !== undefined && editorState.swapInputs(nodeId)}
+          onClick={
+            nodeId !== undefined && nodeId === editorState.nodeEditor.nodeId
+              ? // its own editor applies, swaps and stays open on it
+                () => editorState.nodeEditor.swapInputs()
+              : finishing(
+                  () => nodeId !== undefined && editorState.swapInputs(nodeId),
+                )
+          }
         >
           Swap Inputs
         </MenuContentItem>

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);
   }
 };