@finos/legend-cube-builder 0.0.0-stage → 0.0.2

package/src/components/CubeEditor.tsx

@@ -0,0 +1,239 @@
+/**
+ * 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 {
+  getCollapsiblePanelGroupProps,
+  PanelLoadingIndicator,
+  ResizablePanel,
+  ResizablePanelGroup,
+  ResizablePanelSplitter,
+} from '@finos/legend-art';
+import { useCommands } from '@finos/legend-application';
+import type { CubeDocument } from '@finos/legend-cube';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useEffect, useState } from 'react';
+import { UNDO_SHORTCUT_LABEL } from '../__lib__/LegendCubeCommand.js';
+import {
+  CUBE_PENDING_LABEL,
+  formatDisabledReasons,
+  READ_ONLY_CUBE_TITLE,
+  UNSAVED_CUBE_NAME,
+} from '../__lib__/LegendCubeLabels.js';
+import { LEGEND_CUBE_TEST_ID } from '../__lib__/LegendCubeTesting.js';
+import { CubeEditorState } from '../stores/CubeEditorState.js';
+import type { CubeHost } from '../stores/CubeHost.js';
+import { CubeButton } from './CubeButton.js';
+import { CubeCanvas } from './canvas/CubeCanvas.js';
+import { CubeNodeEditorPanel } from './editors/CubeNodeEditorPanel.js';
+import { CubeGridRegion } from './grid/CubeGridRegion.js';
+import { CubePalette } from './palette/CubePalette.js';
+import { CubeShowPureDialog } from './show-pure/CubeShowPureDialog.js';
+import { CubeSourcePicker } from './source-picker/CubeSourcePicker.js';
+import { CubeSpecTransferDialog } from './spec-transfer/CubeSpecTransferDialog.js';
+
+/** The graph never takes more of the window's height than this, so the results stay in view (spec §17.3) */
+const MAX_GRAPH_SHARE_OF_WINDOW = 0.6;
+
+/** How wide the node editor opens, in pixels */
+const NODE_EDITOR_WIDTH = 400;
+
+/** The tallest the graph region may be, following the window's height */
+const useMaxGraphHeight = (): number => {
+  const [windowHeight, setWindowHeight] = useState(() => window.innerHeight);
+  useEffect(() => {
+    const onResize = (): void => setWindowHeight(window.innerHeight);
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
+  return Math.round(windowHeight * MAX_GRAPH_SHARE_OF_WINDOW);
+};
+
+/**
+ * The graph region's header, above the graph and the results: the cube's
+ * name, its actions, its pending and read-only notes, and its dialogs. It
+ * stays when the graph is hidden; its buttons wrap when the page is narrow.
+ */
+const CubeGraphHeader = observer((props: { editorState: CubeEditorState }) => {
+  const { editorState } = props;
+  const { readOnly } = editorState;
+  const { showGraph } = editorState.document.meta.presentation;
+  return (
+    <div
+      className="flex shrink-0 flex-col bg-[var(--color-bg-panel)]"
+      data-testid={LEGEND_CUBE_TEST_ID.GRAPH_REGION}
+    >
+      <div className="flex min-h-8 shrink-0 flex-wrap items-center gap-2 border-b border-[var(--color-border-default)] bg-[var(--color-bg-panel-header)] px-2 py-1">
+        <span className="min-w-24 flex-1 truncate text-lg font-medium">
+          {editorState.document.name ?? UNSAVED_CUBE_NAME}
+        </span>
+        {editorState.isResolvingSources && (
+          <span className="shrink-0 text-base text-[var(--color-text-secondary)]">
+            {CUBE_PENDING_LABEL.RESOLVING_SOURCE}
+          </span>
+        )}
+        <CubeButton
+          title={readOnly ? READ_ONLY_CUBE_TITLE : undefined}
+          disabled={readOnly}
+          onClick={() => editorState.sourcePicker.open()}
+        >
+          Add table
+        </CubeButton>
+        <CubeButton
+          title={
+            readOnly
+              ? READ_ONLY_CUBE_TITLE
+              : `Undo the last change (${UNDO_SHORTCUT_LABEL})`
+          }
+          disabled={!editorState.canUndo}
+          onClick={() => editorState.undo()}
+        >
+          Undo
+        </CubeButton>
+        <CubeButton
+          title={
+            editorState.execution.canExecute
+              ? 'Show the Pure query that Execute runs'
+              : formatDisabledReasons(editorState.execution.disabledReasons)
+          }
+          disabled={!editorState.execution.canExecute}
+          onClick={() => {
+            flowResult(editorState.showPure.open()).catch(
+              editorState.host.applicationStore.alertUnhandledError,
+            );
+          }}
+        >
+          Show Pure
+        </CubeButton>
+        <CubeButton
+          title={
+            readOnly
+              ? READ_ONLY_CUBE_TITLE
+              : "Show the cube's spec, to copy or download"
+          }
+          disabled={readOnly}
+          onClick={() => editorState.specTransfer.openExport()}
+        >
+          Export (dev)
+        </CubeButton>
+        <CubeButton
+          title="Open a cube from its spec, in place of this one"
+          onClick={() => editorState.specTransfer.openImport()}
+        >
+          Import (dev)
+        </CubeButton>
+        <CubeButton
+          title={
+            showGraph
+              ? 'Hide the graph, leaving more room for the results'
+              : 'Show the graph'
+          }
+          onClick={() => editorState.setShowGraph(!showGraph)}
+        >
+          {showGraph ? 'Hide graph' : 'Show graph'}
+        </CubeButton>
+      </div>
+      <PanelLoadingIndicator isLoading={editorState.isResolvingSources} />
+      {readOnly && (
+        <div
+          className="shrink-0 border-b border-[var(--color-border-default)] bg-[var(--color-status-warn-bg)] px-2 py-1 text-base text-[var(--color-status-warn)]"
+          role="status"
+        >
+          {READ_ONLY_CUBE_TITLE}. You can view and run it.
+        </div>
+      )}
+      {editorState.nodeEditor.notice && (
+        <div
+          className="flex shrink-0 items-center gap-2 border-b border-[var(--color-border-default)] bg-[var(--color-status-warn-bg)] px-2 py-1 text-base text-[var(--color-status-warn)]"
+          role="status"
+          data-testid={LEGEND_CUBE_TEST_ID.EDITOR_NOTICE}
+        >
+          <span className="min-w-0 flex-1">
+            {editorState.nodeEditor.notice}
+          </span>
+          <CubeButton onClick={() => editorState.nodeEditor.dismissNotice()}>
+            Dismiss
+          </CubeButton>
+        </div>
+      )}
+      <CubeSourcePicker editorState={editorState} />
+      <CubeSpecTransferDialog editorState={editorState} />
+      <CubeShowPureDialog editorState={editorState} />
+    </div>
+  );
+});
+
+/**
+ * The Legend Cube page: the query above, its results below, both always
+ * shown (PLAN §7.1); hiding the graph leaves its header. The host gives it
+ * the engine, the models and the application store; the page's state lives
+ * as long as the page.
+ */
+export const CubeEditor = observer(
+  (props: {
+    host: CubeHost;
+    /** The cube to open; an empty one by default */
+    initialDocument?: CubeDocument | undefined;
+  }) => {
+    const [editorState] = useState(
+      () => new CubeEditorState(props.host, props.initialDocument),
+    );
+    useEffect(() => () => editorState.dispose(), [editorState]);
+    useCommands(editorState);
+    const maxGraphHeight = useMaxGraphHeight();
+    const isEditorOpen = editorState.nodeEditor.nodeId !== undefined;
+    const editorPanel = getCollapsiblePanelGroupProps(!isEditorOpen, {
+      size: NODE_EDITOR_WIDTH,
+    });
+    const { showGraph } = editorState.document.meta.presentation;
+    // hiding the graph collapses its panel: the header and the results stay
+    // where they are, so the grid keeps its state
+    const graphPanel = getCollapsiblePanelGroupProps(!showGraph);
+
+    return (
+      <div
+        className="legend-cube flex bg-[var(--color-bg-app)] text-[var(--color-text-primary)]"
+        data-testid={LEGEND_CUBE_TEST_ID.EDITOR}
+      >
+        <CubePalette editorState={editorState} />
+        <ResizablePanelGroup orientation="vertical">
+          <ResizablePanel {...editorPanel.remainingPanel} minSize={320}>
+            <div className="flex h-full min-w-0 flex-1 flex-col">
+              <CubeGraphHeader editorState={editorState} />
+              <ResizablePanelGroup orientation="horizontal">
+                <ResizablePanel
+                  {...graphPanel.collapsiblePanel}
+                  minSize={showGraph ? 96 : 0}
+                  maxSize={maxGraphHeight}
+                >
+                  {showGraph && <CubeCanvas editorState={editorState} />}
+                </ResizablePanel>
+                <ResizablePanelSplitter className={showGraph ? '' : 'hidden'} />
+                <ResizablePanel {...graphPanel.remainingPanel} minSize={96}>
+                  <CubeGridRegion editorState={editorState} />
+                </ResizablePanel>
+              </ResizablePanelGroup>
+            </div>
+          </ResizablePanel>
+          <ResizablePanelSplitter className={isEditorOpen ? '' : 'hidden'} />
+          <ResizablePanel {...editorPanel.collapsiblePanel} direction={-1}>
+            <CubeNodeEditorPanel editorState={editorState} />
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    );
+  },
+);

package/src/components/CubeNodeIcon.tsx

@@ -0,0 +1,47 @@
+/**
+ * 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 {
+  ArrowsJoinIcon,
+  clsx,
+  FilterIcon,
+  QuestionSquareIcon,
+  TableIcon,
+} from '@finos/legend-art';
+
+/** The icon of each icon name a node definition gives (`NodeDefinition.icon`) */
+const NODE_ICONS: Readonly<
+  Record<string, React.FC<{ className?: string; title?: string }>>
+> = {
+  table: TableIcon,
+  filter: FilterIcon,
+  join: ArrowsJoinIcon,
+};
+
+/** Whether a node definition's icon name maps to an icon, rather than the question mark */
+export const hasCubeNodeIcon = (name: string): boolean =>
+  Object.hasOwn(NODE_ICONS, name);
+
+/** A node type's icon; an unknown name, or an Unknown node, gets a question mark */
+export const CubeNodeIcon: React.FC<{
+  icon: string | undefined;
+  className?: string;
+}> = (props) => {
+  const { icon, className } = props;
+  const Icon =
+    (icon === undefined ? undefined : NODE_ICONS[icon]) ?? QuestionSquareIcon;
+  return <Icon className={clsx(className)} />;
+};

package/src/components/canvas/CubeCanvas.tsx

@@ -0,0 +1,260 @@
+/**
+ * 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 { ContextMenu } from '@finos/legend-art';
+import type { Query } from '@finos/legend-cube';
+import { noop } from '@finos/legend-shared';
+import {
+  Background,
+  type Connection as FlowConnection,
+  Controls,
+  type Edge,
+  MiniMap,
+  ReactFlow,
+  ReactFlowProvider,
+  useNodesInitialized,
+  useReactFlow,
+  useStore,
+} from '@xyflow/react';
+// imported here, not in the builder's stylesheet, so it loads with the Cube
+// page's chunk: Query's reactflow 11 lineage viewer uses the same class names
+import '@xyflow/react/dist/style.css';
+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 type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import {
+  buildCubeCanvasEdges,
+  buildCubeCanvasNodes,
+  CUBE_CANVAS_EDGE_TYPE,
+  CUBE_CANVAS_NODE_TYPE,
+  CUBE_OUTPUT_HANDLE_ID,
+  type CubeCanvasFlowEdge,
+  type CubeCanvasFlowNode,
+} from './CubeCanvasElements.js';
+import { CubeCanvasContext } from './CubeCanvasContext.js';
+import { CubeCanvasContextMenu } from './CubeCanvasContextMenu.js';
+import {
+  CUBE_DND_TYPE,
+  type CubePaletteDragItem,
+  dropOnCubeCanvas,
+} from './CubeCanvasDnd.js';
+import { CubeCanvasEdge } from './CubeCanvasEdge.js';
+import { layoutCubeQuery } from './CubeCanvasLayout.js';
+import { CubeCanvasNode } from './CubeCanvasNode.js';
+
+// React Flow re-renders every node when these change identity
+const NODE_TYPES = { [CUBE_CANVAS_NODE_TYPE]: CubeCanvasNode };
+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 };
+
+/**
+ * Whether dragging from one handle to another may connect the two nodes: out
+ * of a node's output, into a free input port that the query lets it feed
+ */
+export const isCubeCanvasConnectionValid = (
+  query: Query,
+  connection: FlowConnection | Edge,
+): boolean =>
+  connection.sourceHandle === CUBE_OUTPUT_HANDLE_ID &&
+  typeof connection.targetHandle === 'string' &&
+  query.canConnect(
+    connection.source,
+    connection.target,
+    connection.targetHandle,
+  );
+
+const CubeCanvasFlow = observer((props: { editorState: CubeEditorState }) => {
+  const { editorState } = props;
+  const { query } = editorState.document;
+  const { readOnly } = editorState;
+  const { fitView } = useReactFlow();
+  const positions = useMemo(() => layoutCubeQuery(query), [query]);
+  const nodes = useMemo(
+    () => buildCubeCanvasNodes(query, positions),
+    [query, positions],
+  );
+  const edges = useMemo(() => buildCubeCanvasEdges(query), [query]);
+  // the view fits the graph again whenever the layout moves a node, or the
+  // canvas gets wider or narrower (e.g. the node editor opens beside it),
+  // once React Flow has measured every node: it fits only measured ones
+  const layoutSignature = useMemo(
+    () => JSON.stringify([...positions]),
+    [positions],
+  );
+  const nodesInitialized = useNodesInitialized();
+  const canvasWidth = useStore((state) => state.width);
+  useEffect(() => {
+    if (!nodesInitialized) {
+      return undefined;
+    }
+    const timer = window.setTimeout(() => {
+      fitView(FIT_VIEW_OPTIONS).catch(noop());
+    }, 0);
+    return () => window.clearTimeout(timer);
+  }, [layoutSignature, canvasWidth, nodesInitialized, fitView]);
+
+  return (
+    <ReactFlow<CubeCanvasFlowNode, CubeCanvasFlowEdge>
+      nodes={nodes}
+      edges={edges}
+      nodeTypes={NODE_TYPES}
+      edgeTypes={EDGE_TYPES}
+      // the layout places the nodes; nothing is selected or deleted in React Flow
+      nodesDraggable={false}
+      nodesConnectable={!readOnly}
+      elementsSelectable={false}
+      deleteKeyCode={null}
+      selectionKeyCode={null}
+      multiSelectionKeyCode={null}
+      onNodeClick={(event, flowNode) => {
+        // a click on a handle starts or ends a connection, not a node click
+        if (
+          event.target instanceof Element &&
+          event.target.closest('.react-flow__handle')
+        ) {
+          return;
+        }
+        if (event.ctrlKey || event.metaKey) {
+          editorState.select(flowNode.id);
+        } else {
+          editorState.nodeEditor.open(flowNode.id);
+        }
+      }}
+      // React Flow's own keyboard help speaks of selecting, moving and
+      // deleting nodes, which Cube doesn't do; Enter and Space open a node's
+      // editor instead, and Ctrl or Cmd with them select it
+      disableKeyboardA11y={true}
+      edgesFocusable={false}
+      onKeyDown={(event) => {
+        const target = event.target;
+        const nodeId =
+          target instanceof HTMLElement &&
+          target.classList.contains('react-flow__node')
+            ? target.dataset.id
+            : undefined;
+        if (
+          nodeId === undefined ||
+          (event.key !== 'Enter' && event.key !== ' ')
+        ) {
+          return;
+        }
+        event.preventDefault();
+        if (event.ctrlKey || event.metaKey) {
+          editorState.select(nodeId);
+        } else {
+          editorState.nodeEditor.open(nodeId);
+        }
+      }}
+      isValidConnection={(connection) =>
+        !readOnly && isCubeCanvasConnectionValid(query, connection)
+      }
+      onConnect={(connection) => {
+        if (connection.targetHandle) {
+          editorState.connect(
+            connection.source,
+            connection.target,
+            connection.targetHandle,
+          );
+        }
+      }}
+      colorMode={
+        editorState.host.applicationStore.layoutService
+          .TEMPORARY__isLightColorThemeEnabled
+          ? 'light'
+          : 'dark'
+      }
+      proOptions={PRO_OPTIONS}
+      fitView={true}
+      fitViewOptions={FIT_VIEW_OPTIONS}
+      minZoom={0.2}
+      maxZoom={1.5}
+    >
+      <Background />
+      <Controls showInteractive={false} />
+      <MiniMap pannable={true} zoomable={true} style={MINI_MAP_STYLE} />
+    </ReactFlow>
+  );
+});
+
+/**
+ * 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.
+ */
+export const CubeCanvas = observer(
+  (props: { editorState: CubeEditorState }) => {
+    const { editorState } = props;
+    const ref = useRef<HTMLDivElement>(null);
+    const [, dropConnector] = useDrop<CubePaletteDragItem>(
+      () => ({
+        accept: [CUBE_DND_TYPE.PALETTE_ITEM],
+        canDrop: () => !editorState.readOnly,
+        // a node under the pointer, whether it took the drop or refused it,
+        // keeps it from the canvas
+        drop: (item, monitor) =>
+          dropOnCubeCanvas(
+            editorState,
+            item,
+            monitor.didDrop() || !monitor.isOver({ shallow: true }),
+          ),
+      }),
+      [editorState],
+    );
+    dropConnector(ref);
+    return (
+      <div
+        ref={ref}
+        className="relative h-full w-full"
+        data-testid={LEGEND_CUBE_TEST_ID.CANVAS}
+      >
+        <ContextMenu
+          className="h-full w-full"
+          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()}
+                >
+                  add a table
+                </button>{' '}
+                to start.
+              </span>
+            </div>
+          ) : (
+            <CubeCanvasContext.Provider value={editorState}>
+              <ReactFlowProvider>
+                <CubeCanvasFlow editorState={editorState} />
+              </ReactFlowProvider>
+            </CubeCanvasContext.Provider>
+          )}
+        </ContextMenu>
+      </div>
+    );
+  },
+);

package/src/components/canvas/CubeCanvasContext.ts

@@ -0,0 +1,31 @@
+/**
+ * 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 { guaranteeNonNullable } from '@finos/legend-shared';
+import { createContext, useContext } from 'react';
+import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+
+// React Flow renders the canvas's nodes itself, so they reach the page's
+// state through a context rather than props
+export const CubeCanvasContext = createContext<CubeEditorState | undefined>(
+  undefined,
+);
+
+export const useCubeCanvasEditorState = (): CubeEditorState =>
+  guaranteeNonNullable(
+    useContext(CubeCanvasContext),
+    `A canvas node must be rendered inside the Cube canvas`,
+  );

package/src/components/canvas/CubeCanvasContextMenu.tsx

@@ -0,0 +1,89 @@
+/**
+ * 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 {
+  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 type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import { CubeNodeIcon } from '../CubeNodeIcon.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.
+ */
+export const CubeCanvasContextMenu = observer(
+  forwardRef<
+    HTMLDivElement,
+    { editorState: CubeEditorState; nodeId?: string | undefined }
+  >(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>
+    );
+    return (
+      <MenuContent ref={ref}>
+        {registry.sources.map(paletteItem)}
+        <MenuContentDivider />
+        {registry.transforms.map(paletteItem)}
+        <MenuContentDivider />
+        <MenuContentItem
+          title="Execute runs the query up to this node"
+          disabled={nodeId === undefined || !query.canSelect(nodeId)}
+          onClick={() => nodeId !== undefined && editorState.select(nodeId)}
+        >
+          Select
+        </MenuContentItem>
+        <MenuContentItem
+          disabled={nodeId === undefined || !editorState.canRemoveNode(nodeId)}
+          onClick={() => 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)}
+        >
+          Swap Inputs
+        </MenuContentItem>
+      </MenuContent>
+    );
+  }),
+);