@finos/legend-cube-builder 0.0.4 → 0.0.5

package/src/components/canvas/CubeCanvas.tsx

@@ -38,6 +38,7 @@ 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,
@@ -65,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
@@ -156,10 +158,40 @@ 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();
@@ -272,15 +304,22 @@ export const CubeCanvas = observer(
                   onClick={() => editorState.sourcePicker.openToChoose()}
                 >
                   Connect to a source
-                </button>{' '}
-                to start a new one, or{' '}
-                <button
-                  className="text-[var(--color-accent)] underline"
-                  onClick={() => editorState.examples.open()}
-                >
-                  open an example
                 </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

@@ -21,6 +21,10 @@ import {
 } from '@finos/legend-art';
 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 { CubeAddMenuItems } from '../CubeAddItems.js';
 
@@ -54,13 +58,40 @@ export const CubeCanvasContextMenu = observer(
         <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={finishing(
             () => nodeId !== undefined && editorState.select(nodeId),
           )}
         >
-          Select
+          {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),
+          )}
+        >
+          Duplicate
         </MenuContentItem>
         <MenuContentItem
           disabled={nodeId === undefined || !editorState.canRemoveNode(nodeId)}

package/src/components/canvas/CubeCanvasElements.ts

@@ -15,11 +15,18 @@
  */
 
 import {
+  DataProductAccessPointSource,
+  FunctionSource,
+  getLiteralText,
+  getRelationalDisplayName,
+  IngestDatasetSource,
   isIncompleteError,
   isSchemasError,
   isTypingError,
   type Query,
   type QueryNode,
+  RelationalTableSource,
+  ServiceSource,
 } from '@finos/legend-cube';
 import { type Edge, MarkerType, type Node, Position } from '@xyflow/react';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
@@ -120,7 +127,10 @@ export interface CubeCanvasNodeStatus {
   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 */
+  /**
+   * Its errors, then its warnings and its description, one a line; not its
+   * id, which is internal (UX audit A5, 2026-10-11)
+   */
   readonly tooltip: string;
 }
 
@@ -152,8 +162,71 @@ export const getCubeCanvasNodeStatus = (
       ...(ownErrors ? [] : [MISSING_VALIDITY_TOOLTIP]),
       ...errors,
       ...warnings,
-      node.describe(),
-      node.id,
+      // a node not set yet has no description to add (the review of the demo)
+      ...(node.isUnset() ? [] : [node.describe()]),
     ].join('\n'),
   };
 };
+
+/** What a node not set yet shows under its type's name */
+export const CUBE_NODE_NOT_SET_LABEL = 'Not set';
+
+/**
+ * What a node shows on the canvas: a source shows its name, with where it
+ * comes from as a muted second line (`TRADES`, from `TRADES_SAMPLE`); every
+ * other node, and a source not resolved yet, its description. The tooltip
+ * keeps the full description (UX audit B9, 2026-10-11).
+ */
+export const getCubeCanvasNodeLabel = (
+  node: QueryNode,
+  /** The node type's name, e.g. "Join Another Input", shown on a node not set yet */
+  typeLabel?: string | undefined,
+): { title: string; detail?: string | undefined } => {
+  if (node.isUnset() && typeLabel !== undefined) {
+    // "Join Another Input", then a muted "Not set", in place of "Join additional input"
+    return { title: typeLabel, detail: CUBE_NODE_NOT_SET_LABEL };
+  }
+  if (
+    (node instanceof RelationalTableSource ||
+      node instanceof DataProductAccessPointSource ||
+      node instanceof IngestDatasetSource ||
+      node instanceof ServiceSource ||
+      node instanceof FunctionSource) &&
+    node.resolution.kind === 'unresolved'
+  ) {
+    return { title: node.describe() };
+  }
+  if (node instanceof RelationalTableSource) {
+    return {
+      title: getRelationalDisplayName(node.table),
+      detail: getRelationalDisplayName(node.schema),
+    };
+  }
+  if (node instanceof DataProductAccessPointSource) {
+    return { title: node.accessPoint, detail: node.dataProductName };
+  }
+  if (node instanceof IngestDatasetSource) {
+    return { title: node.dataSet, detail: node.ingestDefinitionName };
+  }
+  if (node instanceof FunctionSource) {
+    // its values, as the call takes them: `100000, (none)`
+    return {
+      title: node.functionName,
+      detail: node.values.length
+        ? node.values
+            .map((value) =>
+              value === undefined
+                ? '(none)'
+                : value.kind === 'invalid'
+                  ? value.text
+                  : getLiteralText(value),
+            )
+            .join(', ')
+        : undefined,
+    };
+  }
+  if (node instanceof ServiceSource) {
+    return { title: node.serviceName, detail: node.pattern };
+  }
+  return { title: node.describe() };
+};

package/src/components/canvas/CubeCanvasLayout.ts

@@ -21,7 +21,7 @@ import type { Connection, Query } from '@finos/legend-cube';
 export const CUBE_CANVAS_NODE_WIDTH = 200;
 export const CUBE_CANVAS_NODE_HEIGHT = 72;
 
-const RANK_SEPARATION = 80;
+const RANK_SEPARATION = 56;
 const NODE_SEPARATION = 32;
 
 /** A node's top-left corner on the canvas */

package/src/components/canvas/CubeCanvasNode.tsx

@@ -18,12 +18,14 @@ 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';
+import { RUNNING_NODE_LABEL } from '../../__lib__/LegendCubeHelpText.js';
 import { useDrag, useDrop } from 'react-dnd';
 import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
 import { CubeNodeIcon } from '../CubeNodeIcon.js';
 import {
   CUBE_OUTPUT_HANDLE_ID,
   type CubeCanvasFlowNode,
+  getCubeCanvasNodeLabel,
   getCubeCanvasNodeStatus,
   getInputHandleOffset,
 } from './CubeCanvasElements.js';
@@ -50,6 +52,10 @@ export const CubeCanvasNode = observer(
     const { node } = props.data;
     const editorState = useCubeCanvasEditorState();
     const status = getCubeCanvasNodeStatus(editorState, node);
+    const label = getCubeCanvasNodeLabel(
+      node,
+      editorState.registry.get(node.type)?.label,
+    );
     const connectable = !editorState.readOnly && node.acceptsNewInputs;
     const ref = useRef<HTMLDivElement>(null);
     const [, dragConnector] = useDrag<CubeNodeDragItem>(
@@ -114,7 +120,7 @@ export const CubeCanvasNode = observer(
             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)]',
+              'legend-cube__node nodrag nopan relative 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
@@ -143,8 +149,20 @@ export const CubeCanvasNode = observer(
               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 className="flex min-w-0 flex-col leading-tight">
+              <span
+                className={clsx(
+                  'break-words',
+                  label.detail === undefined ? 'line-clamp-2' : 'line-clamp-1',
+                )}
+              >
+                {label.title}
+              </span>
+              {label.detail !== undefined && (
+                <span className="truncate text-sm text-[var(--color-text-muted)]">
+                  {label.detail}
+                </span>
+              )}
             </span>
             {status.hasWarnings && (
               // the warning's text is in the node's tooltip
@@ -153,6 +171,15 @@ export const CubeCanvasNode = observer(
                 aria-hidden={true}
               />
             )}
+            {status.isCapture && (
+              // the step Execute runs, marked on its corner
+              <span
+                className="absolute -top-2 right-2 rounded-sm bg-[var(--color-accent)] px-1 text-xs font-medium leading-4 text-[var(--color-text-on-accent)]"
+                data-testid={LEGEND_CUBE_TEST_ID.RUNNING_NODE_BADGE}
+              >
+                {`▶ ${RUNNING_NODE_LABEL}`}
+              </span>
+            )}
           </div>
         </Tooltip>
         <Handle

package/src/components/dev-settings/CubeDevSettings.tsx

@@ -0,0 +1,154 @@
+/**
+ * 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 {
+  Dialog,
+  DropdownMenu,
+  DropdownMenuItem,
+  MenuIcon,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalFooterButton,
+  ModalHeader,
+  PanelForm,
+  PanelFormBooleanField,
+  PanelFormTextField,
+  useDropdownMenu,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+
+/** Why Dev Settings can't change anything */
+const DEV_SETTINGS_UNAVAILABLE =
+  "This Legend deployment doesn't let Legend Cube's engine clients be changed.";
+
+/**
+ * The page's menu, at the top left, as Legend Query's editor has one: Dev
+ * Settings (PLAN §11.16)
+ */
+export const CubePageMenu = observer(
+  (props: { editorState: CubeEditorState }) => {
+    const { editorState } = props;
+    const [openMenu, closeMenu, menuProps, isOpen] = useDropdownMenu();
+    return (
+      <>
+        <button
+          type="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="Menu"
+          aria-haspopup="menu"
+          aria-expanded={isOpen}
+          onClick={openMenu}
+        >
+          <MenuIcon />
+        </button>
+        <DropdownMenu
+          {...menuProps}
+          menuProps={{
+            elevation: 7,
+            slotProps: {
+              root: { slotProps: { backdrop: { invisible: true } } },
+            },
+          }}
+        >
+          <DropdownMenuItem
+            className="px-2 text-base"
+            onClick={() => {
+              closeMenu();
+              editorState.devSettings.open();
+            }}
+          >
+            Dev Settings
+          </DropdownMenuItem>
+        </DropdownMenu>
+      </>
+    );
+  },
+);
+
+/**
+ * Dev Settings, as Legend Query's editor offers them: the engine client's
+ * URL and its request compression, for Cube's engine clients
+ */
+export const CubeDevSettingsDialog = observer(
+  (props: { editorState: CubeEditorState }) => {
+    const { editorState } = props;
+    const { devSettings } = editorState;
+    const { applicationStore } = editorState.host;
+    const darkMode =
+      !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
+    return (
+      <Dialog open={devSettings.isOpen} onClose={() => devSettings.close()}>
+        <Modal darkMode={darkMode} className="w-[600px] max-w-full">
+          <ModalHeader>
+            <div className="modal__title">Dev Settings</div>
+          </ModalHeader>
+          <ModalBody>
+            {!devSettings.isAvailable && (
+              <div className="mb-2 text-base text-[var(--color-text-secondary)]">
+                {DEV_SETTINGS_UNAVAILABLE}
+              </div>
+            )}
+            <PanelForm>
+              <PanelFormTextField
+                name="Engine client base URL"
+                prompt={`The engine Legend Cube's requests go to, from the next one. The deployment's: ${devSettings.defaultBaseUrl ?? 'none'}`}
+                value={devSettings.baseUrlText}
+                isReadOnly={!devSettings.isAvailable}
+                update={(value) => devSettings.setBaseUrlText(value ?? '')}
+                errorMessage={devSettings.baseUrlError}
+                darkMode={darkMode}
+                fullWidth={true}
+              />
+              <PanelFormBooleanField
+                name="Engine client request payload compression"
+                prompt="Specifies if request payload should be compressed. Off, the browser's Network tab shows each request's JSON."
+                value={devSettings.requestCompression}
+                isReadOnly={!devSettings.isAvailable}
+                update={() =>
+                  devSettings.setRequestCompression(
+                    !devSettings.requestCompression,
+                  )
+                }
+              />
+            </PanelForm>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              darkMode={darkMode}
+              formatText={false}
+              type="secondary"
+              text="Reset engine URL"
+              disabled={
+                !devSettings.isAvailable ||
+                devSettings.baseUrlText === (devSettings.defaultBaseUrl ?? '')
+              }
+              onClick={() => devSettings.resetBaseUrl()}
+            />
+            <ModalFooterButton
+              darkMode={darkMode}
+              formatText={false}
+              type="secondary"
+              text="Close"
+              onClick={() => devSettings.close()}
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);

package/src/components/editors/CubeColumnChecklist.tsx

@@ -21,7 +21,10 @@ import {
   type SchemaColumn,
 } from '@finos/legend-cube';
 import { observer } from 'mobx-react-lite';
-import { getColumnTypeLabel } from '../../__lib__/LegendCubeLabels.js';
+import {
+  getColumnTypeLabel,
+  getExactColumnTypeLabel,
+} from '../../__lib__/LegendCubeLabels.js';
 import { CubeButton } from '../CubeButton.js';
 import { CubeColumnTypeIcon } from './CubeColumnPicker.js';
 
@@ -102,7 +105,10 @@ export const CubeColumnChecklist = observer(
                     className="text-[var(--color-text-secondary)]"
                   />
                   <span className="min-w-0 truncate">{column.name}</span>
-                  <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
+                  <span
+                    className="shrink-0 text-sm text-[var(--color-text-muted)]"
+                    title={getExactColumnTypeLabel(column)}
+                  >
                     {`${getColumnTypeLabel(column)}${pickable ? '' : ` (${reason})`}`}
                   </span>
                 </label>

package/src/components/editors/CubeColumnPicker.tsx

@@ -29,7 +29,10 @@ import {
   type SchemaColumn,
   TypeFamily,
 } from '@finos/legend-cube';
-import { getColumnTypeLabel } from '../../__lib__/LegendCubeLabels.js';
+import {
+  getColumnTypeLabel,
+  getExactColumnTypeLabel,
+} from '../../__lib__/LegendCubeLabels.js';
 
 const FAMILY_ICONS: Readonly<
   Partial<Record<TypeFamily, React.FC<{ className?: string }>>>
@@ -116,7 +119,7 @@ export const CubeColumnPicker: React.FC<{
             <option
               key={column.name}
               value={column.name}
-              title={column.type.fullName}
+              title={`${getExactColumnTypeLabel(column)} (${column.type.fullName})`}
               disabled={reason !== undefined}
             >
               {`${column.name}: ${getColumnTypeLabel(column)}${reason === undefined ? '' : ` (${reason})`}`}
@@ -127,7 +130,7 @@ export const CubeColumnPicker: React.FC<{
       {picked && (
         <span
           className="flex shrink-0 items-center gap-1 text-sm text-[var(--color-text-secondary)]"
-          title={picked.type.fullName}
+          title={`${getExactColumnTypeLabel(picked)} (${picked.type.fullName})`}
         >
           <CubeColumnTypeIcon type={picked.type} />
           {getColumnTypeLabel(picked)}

package/src/components/editors/CubeConcatEditor.tsx

@@ -37,7 +37,7 @@ import {
   CONCAT_RENAME_FIX_TEXT,
   CONCAT_RENAME_FIX_TITLE,
   CUBE_TABLE_FLAG_LABELS,
-  getColumnTypeLabel,
+  getExactColumnTypeLabel,
   getConcatRestrictFixText,
   getConcatRestrictFixTitle,
   getConcatUntypedWarning,
@@ -64,7 +64,7 @@ const typeLabel = (
   !column.type.equals(other.type) &&
   column.type.displayName === other.type.displayName
     ? `${column.type.fullName}${column.nullable ? '?' : ''}`
-    : getColumnTypeLabel(column);
+    : getExactColumnTypeLabel(column);
 
 /**
  * One input's column at a position, its name and type marked where they