@finos/legend-cube-builder 0.0.3 → 0.0.4

package/src/__test-utils__/FakeCubeIngestCatalog.ts

@@ -0,0 +1,180 @@
+/**
+ * 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 { jest } from '@jest/globals';
+import { PrimitiveType, Schema, SchemaColumn } from '@finos/legend-cube';
+import { CubeDataProductEnvironmentType } from '../graph-manager/CubeDataProduct.js';
+import {
+  CubeEngineError,
+  CubeEngineErrorKind,
+} from '../graph-manager/CubeEngine.js';
+import {
+  type CubeIngestCatalog,
+  CubeIngestDataSet,
+  CubeIngestDefinitionCandidate,
+  CubeIngestEnvironment,
+  CubeIngestProducer,
+} from '../graph-manager/CubeIngestCatalog.js';
+
+// A fake of the deployed ingest definitions, for the Ingest tab's and the
+// editor's tests: producer deployment 1234 deploys two definitions from
+// com.example:sales, 5678 none
+
+const { PRODUCTION, PRODUCTION_PARALLEL } = CubeDataProductEnvironmentType;
+
+export const FAKE_INGEST_ORDERS = 'sales::ingest::OrdersIngest';
+export const FAKE_INGEST_DESKS = 'sales::ingest::DesksIngest';
+
+export const fakeIngestUrnOf = (
+  definition: string,
+  environmentType = PRODUCTION,
+): string =>
+  `urn:lakehouse:${environmentType === PRODUCTION ? 'prod' : 'prod-parallel'}:ingest:definition:alloy-git:com.example~sales~${definition}`;
+
+export const FAKE_INGEST_TRADES_SCHEMA = new Schema([
+  new SchemaColumn('TRADE_ID', PrimitiveType.get('Integer'), false),
+  new SchemaColumn(
+    'DESK',
+    PrimitiveType.get('meta::pure::precisePrimitives::Varchar', [20]),
+    true,
+  ),
+]);
+
+export const FAKE_INGEST_DESKS_SCHEMA = new Schema([
+  new SchemaColumn('DESK', PrimitiveType.get('String'), false),
+]);
+
+const DATA_SETS: ReadonlyMap<string, readonly CubeIngestDataSet[]> = new Map([
+  [
+    FAKE_INGEST_ORDERS,
+    [
+      new CubeIngestDataSet({
+        name: 'TRADES',
+        schema: FAKE_INGEST_TRADES_SCHEMA,
+        primaryKey: ['TRADE_ID'],
+      }),
+      new CubeIngestDataSet({
+        name: 'DAILY',
+        disabledReason:
+          'It is a materialized view, which Cube does not support yet',
+      }),
+    ],
+  ],
+  [
+    FAKE_INGEST_DESKS,
+    [
+      new CubeIngestDataSet({
+        name: 'DESKS',
+        schema: FAKE_INGEST_DESKS_SCHEMA,
+      }),
+    ],
+  ],
+]);
+
+const definitionOf = (urn: string): string =>
+  urn.slice(urn.lastIndexOf('~') + 1);
+
+export interface FakeCubeIngestCatalog {
+  catalog: CubeIngestCatalog;
+  resolveEnvironment: jest.Mock<CubeIngestCatalog['resolveEnvironment']>;
+  listProducers: jest.Mock<CubeIngestCatalog['listProducers']>;
+  listDefinitions: jest.Mock<CubeIngestCatalog['listDefinitions']>;
+  describe: jest.Mock<CubeIngestCatalog['describe']>;
+  resolveSchemas: jest.Mock<CubeIngestCatalog['resolveSchemas']>;
+}
+
+/** A fresh fake: build one per test, since jest.fn keeps its calls across tests */
+export const createFakeCubeIngestCatalog = (): FakeCubeIngestCatalog => {
+  const resolveEnvironment = jest.fn<CubeIngestCatalog['resolveEnvironment']>(
+    async (environmentType) =>
+      Promise.resolve(
+        new CubeIngestEnvironment({
+          environmentType,
+          name: 'env-a',
+          runtimeEnvironment:
+            environmentType === PRODUCTION_PARALLEL
+              ? 'lakehouse-ingest-env-a-pp'
+              : 'lakehouse-ingest-env-a',
+        }),
+      ),
+  );
+  const listProducers = jest.fn<CubeIngestCatalog['listProducers']>(async () =>
+    Promise.resolve(
+      ['1234', '5678'].map(
+        (deploymentId) =>
+          new CubeIngestProducer({
+            deploymentId,
+            urn: `urn:lakehouse:prod:producer:deployment:${deploymentId}`,
+          }),
+      ),
+    ),
+  );
+  const listDefinitions = jest.fn<CubeIngestCatalog['listDefinitions']>(
+    async (environmentType, producerDeploymentId) =>
+      Promise.resolve(
+        producerDeploymentId === '1234'
+          ? {
+              candidates: [FAKE_INGEST_ORDERS, FAKE_INGEST_DESKS].map(
+                (definition) =>
+                  new CubeIngestDefinitionCandidate({
+                    urn: fakeIngestUrnOf(definition, environmentType),
+                    definition,
+                    groupId: 'com.example',
+                    artifactId: 'sales',
+                  }),
+              ),
+              droppedCount: 1,
+            }
+          : { candidates: [], droppedCount: 0 },
+      ),
+  );
+  const describe = jest.fn<CubeIngestCatalog['describe']>(async (urn) =>
+    Promise.resolve(DATA_SETS.get(definitionOf(urn)) ?? []),
+  );
+  const resolveSchemas = jest.fn<CubeIngestCatalog['resolveSchemas']>(
+    async (_environmentType, sources) =>
+      Promise.resolve(
+        new Map(
+          [...sources].map(([nodeId, source]) => [
+            nodeId,
+            DATA_SETS.get(source.ingestDefinition)?.find(
+              (dataSet) => dataSet.name === source.dataSet,
+            )?.schema ??
+              new CubeEngineError(
+                CubeEngineErrorKind.COMPILE,
+                `Ingest definition ${source.ingestDefinition} has no data set ${source.dataSet}`,
+                nodeId,
+              ),
+          ]),
+        ),
+      ),
+  );
+  return {
+    catalog: {
+      environmentTypes: [PRODUCTION, PRODUCTION_PARALLEL],
+      resolveEnvironment,
+      listProducers,
+      listDefinitions,
+      describe,
+      resolveSchemas,
+    },
+    resolveEnvironment,
+    listProducers,
+    listDefinitions,
+    describe,
+    resolveSchemas,
+  };
+};

package/src/__test-utils__/FakeCubeProjectCatalog.ts

@@ -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 { jest } from '@jest/globals';
+import type { CubeModelOutline } from '../graph-manager/CubeEngine.js';
+import type { CubeProjectCatalog } from '../graph-manager/CubeProjectCatalog.js';
+import { FAKE_NORTHWIND_OUTLINE } from './FakeCubeEngine.js';
+
+// A fake of the depot's published projects, for the Project tab's and the
+// editor's tests: com.example:sales at 1.10.0 and 1.9.0 holds the fake
+// engine's Northwind Database (so the fake types its tables) and a Database
+// no runtime connects to; com.example:reference has one version
+
+export const FAKE_PROJECT_GROUP = 'com.example';
+export const FAKE_PLANNED_DATABASE = 'sales::store::PlannedDb';
+
+export const FAKE_SALES_OUTLINE: CubeModelOutline = {
+  databases: [
+    ...FAKE_NORTHWIND_OUTLINE.databases,
+    {
+      path: FAKE_PLANNED_DATABASE,
+      schemas: [
+        {
+          name: 'PLANNED',
+          tables: [
+            {
+              name: 'FORECASTS',
+              isView: false,
+              columnCount: 2,
+              flags: [],
+              untypedColumns: [],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  runtimes: FAKE_NORTHWIND_OUTLINE.runtimes,
+};
+
+export interface FakeCubeProjectCatalog {
+  readonly catalog: CubeProjectCatalog;
+  readonly listProjects: jest.Mock<CubeProjectCatalog['listProjects']>;
+  readonly listVersions: jest.Mock<CubeProjectCatalog['listVersions']>;
+  readonly loadOutline: jest.Mock<CubeProjectCatalog['loadOutline']>;
+}
+
+/** A fresh fake: build one per test, since jest.fn keeps its calls across tests */
+export const createFakeCubeProjectCatalog = (): FakeCubeProjectCatalog => {
+  const listProjects = jest.fn<CubeProjectCatalog['listProjects']>(async () =>
+    Promise.resolve([
+      { groupId: FAKE_PROJECT_GROUP, artifactId: 'reference' },
+      { groupId: FAKE_PROJECT_GROUP, artifactId: 'sales' },
+    ]),
+  );
+  const listVersions = jest.fn<CubeProjectCatalog['listVersions']>(
+    async (project) =>
+      Promise.resolve(
+        project.artifactId === 'sales' ? ['1.10.0', '1.9.0'] : ['2.0.0'],
+      ),
+  );
+  const loadOutline = jest.fn<CubeProjectCatalog['loadOutline']>(
+    async (project) =>
+      Promise.resolve(
+        project.artifactId === 'sales'
+          ? FAKE_SALES_OUTLINE
+          : { databases: [], runtimes: [] },
+      ),
+  );
+  return {
+    catalog: { listProjects, listVersions, loadOutline },
+    listProjects,
+    listVersions,
+    loadOutline,
+  };
+};

package/src/components/CubeAddItems.tsx

@@ -0,0 +1,179 @@
+/**
+ * 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 {
+  CaretDownIcon,
+  clsx,
+  DropdownMenu,
+  DropdownMenuItem,
+  MenuContentDivider,
+  MenuContentItem,
+  MenuContentItemIcon,
+  MenuContentItemLabel,
+  useDropdownMenu,
+} from '@finos/legend-art';
+import type { AnyNodeDefinition } from '@finos/legend-cube';
+import { observer } from 'mobx-react-lite';
+import {
+  OTHER_SOURCE_KIND_TITLE,
+  READ_ONLY_CUBE_TITLE,
+} from '../__lib__/LegendCubeLabels.js';
+import { addCubeNode, canAddCubeNode } from '../stores/CubeAddPlacement.js';
+import type { CubeEditorState } from '../stores/CubeEditorState.js';
+import { CubeNodeIcon } from './CubeNodeIcon.js';
+
+/** An item that adds a node, as the palette, the context menu and 'Add Items' list it */
+interface CubeAddItem {
+  readonly definition: AnyNodeDefinition;
+  readonly label: string;
+  readonly disabled: boolean;
+  /** Why a source can't be added */
+  readonly title: string | undefined;
+  readonly add: () => void;
+}
+
+/**
+ * The items that add a node, as the palette lists them (spec §17.2): the
+ * sources the cube can take, then the transforms. Each adds where the
+ * placement rule puts it (PLAN §11.8): after `nodeId` when given, else after
+ * the selected node; a source opens the source dialog on its tab. An item
+ * that can't be added is listed, disabled; a source says why. Read in an
+ * observer's render.
+ */
+const getCubeAddItems = (
+  editorState: CubeEditorState,
+  nodeId?: string,
+): { sources: CubeAddItem[]; transforms: CubeAddItem[] } => {
+  const item = (definition: AnyNodeDefinition): CubeAddItem => {
+    const disabled = !canAddCubeNode(editorState, definition.type, nodeId);
+    return {
+      definition,
+      label: `${definition.label}${definition.beta ? ' (BETA)' : ''}`,
+      disabled,
+      title:
+        disabled && definition.kind === 'source'
+          ? (editorState.sourcePicker.disabledReason ?? OTHER_SOURCE_KIND_TITLE)
+          : undefined,
+      add: () => addCubeNode(editorState, definition.type, nodeId),
+    };
+  };
+  return {
+    sources: editorState.offeredSources.map(item),
+    transforms: editorState.registry.transforms.map(item),
+  };
+};
+
+/** The items, as the canvas's context menu lists them (spec §17.4) */
+export const CubeAddMenuItems = observer(
+  (props: { editorState: CubeEditorState; nodeId?: string | undefined }) => {
+    const { sources, transforms } = getCubeAddItems(
+      props.editorState,
+      props.nodeId,
+    );
+    const menuItem = (item: CubeAddItem): React.ReactNode => (
+      <MenuContentItem
+        key={item.definition.type}
+        disabled={item.disabled}
+        title={item.title}
+        onClick={item.add}
+      >
+        <MenuContentItemIcon>
+          <CubeNodeIcon icon={item.definition.icon} />
+        </MenuContentItemIcon>
+        <MenuContentItemLabel>{item.label}</MenuContentItemLabel>
+      </MenuContentItem>
+    );
+    return (
+      <>
+        {sources.map(menuItem)}
+        <MenuContentDivider />
+        {transforms.map(menuItem)}
+      </>
+    );
+  },
+);
+
+/**
+ * 'Add Items ▾' in the graph's header (spec §17.1, QUESTIONS.md U3(a)): the
+ * palette's items, a transform added after the selected node, a source
+ * through the source dialog. It opens no node editor. Its menu takes the
+ * arrow keys, Enter and Escape, and gives the focus back to its button.
+ */
+export const CubeAddItemsMenu = observer(
+  (props: { editorState: CubeEditorState }) => {
+    const { editorState } = props;
+    const { readOnly } = editorState;
+    const [openMenu, closeMenu, menuProps, isOpen] = useDropdownMenu();
+    const { sources, transforms } = getCubeAddItems(editorState);
+    const menuItem = (item: CubeAddItem): React.ReactNode => (
+      <DropdownMenuItem
+        key={item.definition.type}
+        className={clsx(
+          'flex items-center gap-2 px-2 text-base',
+          item.disabled && '!cursor-not-allowed opacity-50',
+        )}
+        // not MUI's disabled, which takes the pointer away: a disabled
+        // source's reason shows on hover
+        aria-disabled={item.disabled}
+        title={item.title}
+        onClick={() => {
+          if (!item.disabled) {
+            closeMenu();
+            item.add();
+          }
+        }}
+      >
+        <CubeNodeIcon icon={item.definition.icon} />
+        <span>{item.label}</span>
+      </DropdownMenuItem>
+    );
+    return (
+      <>
+        <button
+          type="button"
+          className="flex h-6 shrink-0 items-center gap-1 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-elevated)] px-2 text-base text-[var(--color-text-primary)] enabled:cursor-pointer enabled:hover:bg-[var(--color-bg-hover)] disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]"
+          disabled={readOnly}
+          title={
+            readOnly
+              ? READ_ONLY_CUBE_TITLE
+              : 'Add a source, or a step after the selected node'
+          }
+          aria-haspopup="menu"
+          aria-expanded={isOpen}
+          onClick={openMenu}
+        >
+          Add Items
+          <CaretDownIcon aria-hidden={true} />
+        </button>
+        <DropdownMenu
+          {...menuProps}
+          menuProps={{
+            elevation: 7,
+            slotProps: {
+              root: { slotProps: { backdrop: { invisible: true } } },
+              // the keyboard reaches a disabled source too, to read why
+              list: { disabledItemsFocusable: true },
+            },
+          }}
+        >
+          {sources.map(menuItem)}
+          <MenuContentDivider />
+          {transforms.map(menuItem)}
+        </DropdownMenu>
+      </>
+    );
+  },
+);

package/src/components/CubeEditor.tsx

@@ -35,22 +35,25 @@ import {
 } from '../__lib__/LegendCubeLabels.js';
 import { LEGEND_CUBE_TEST_ID } from '../__lib__/LegendCubeTesting.js';
 import { CubeEditorState } from '../stores/CubeEditorState.js';
+import {
+  type CubeEntrySource,
+  CubeEntrySourceState,
+} from '../stores/CubeEntrySource.js';
 import type { CubeHost } from '../stores/CubeHost.js';
+import { CubeAddItemsMenu } from './CubeAddItems.js';
 import { CubeButton } from './CubeButton.js';
 import { CubeCanvas } from './canvas/CubeCanvas.js';
-import { CubeNodeEditorPanel } from './editors/CubeNodeEditorPanel.js';
+import { CubeEntrySourceBanner } from './CubeEntrySourceBanner.js';
 import { CubeGridRegion } from './grid/CubeGridRegion.js';
 import { CubePalette } from './palette/CubePalette.js';
 import { CubeShowPureDialog } from './show-pure/CubeShowPureDialog.js';
+import { CubeExamplesDialog } from './examples/CubeExamplesDialog.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);
@@ -85,12 +88,17 @@ const CubeGraphHeader = observer((props: { editorState: CubeEditorState }) => {
             {CUBE_PENDING_LABEL.RESOLVING_SOURCE}
           </span>
         )}
+        {editorState.isTypingExtends && (
+          <span className="shrink-0 text-base text-[var(--color-text-secondary)]">
+            {CUBE_PENDING_LABEL.TYPING_COLUMNS}
+          </span>
+        )}
+        <CubeAddItemsMenu editorState={editorState} />
         <CubeButton
-          title={readOnly ? READ_ONLY_CUBE_TITLE : undefined}
-          disabled={readOnly}
-          onClick={() => editorState.sourcePicker.open()}
+          title="Open an example cube, or start one on sample data"
+          onClick={() => editorState.examples.open()}
         >
-          Add table
+          Examples
         </CubeButton>
         <CubeButton
           title={
@@ -98,8 +106,8 @@ const CubeGraphHeader = observer((props: { editorState: CubeEditorState }) => {
               ? READ_ONLY_CUBE_TITLE
               : `Undo the last change (${UNDO_SHORTCUT_LABEL})`
           }
-          disabled={!editorState.canUndo}
-          onClick={() => editorState.undo()}
+          disabled={!editorState.canUndo && !editorState.hasEditsToApply}
+          onClick={() => editorState.undoEdited()}
         >
           Undo
         </CubeButton>
@@ -111,6 +119,10 @@ const CubeGraphHeader = observer((props: { editorState: CubeEditorState }) => {
           }
           disabled={!editorState.execution.canExecute}
           onClick={() => {
+            // what it shows includes the node editor's edits, as Execute runs them
+            if (!editorState.nodeEditor.finishApplied()) {
+              return;
+            }
             flowResult(editorState.showPure.open()).catch(
               editorState.host.applicationStore.alertUnhandledError,
             );
@@ -125,15 +137,19 @@ const CubeGraphHeader = observer((props: { editorState: CubeEditorState }) => {
               : "Show the cube's spec, to copy or download"
           }
           disabled={readOnly}
-          onClick={() => editorState.specTransfer.openExport()}
+          onClick={() => {
+            if (editorState.nodeEditor.finishApplied()) {
+              editorState.specTransfer.openExport();
+            }
+          }}
         >
-          Export (dev)
+          Export
         </CubeButton>
         <CubeButton
           title="Open a cube from its spec, in place of this one"
           onClick={() => editorState.specTransfer.openImport()}
         >
-          Import (dev)
+          Import
         </CubeButton>
         <CubeButton
           title={
@@ -141,12 +157,21 @@ const CubeGraphHeader = observer((props: { editorState: CubeEditorState }) => {
               ? 'Hide the graph, leaving more room for the results'
               : 'Show the graph'
           }
-          onClick={() => editorState.setShowGraph(!showGraph)}
+          onClick={() => {
+            // the floating editor goes with the graph, applying its edits
+            if (!showGraph || editorState.nodeEditor.finish()) {
+              editorState.setShowGraph(!showGraph);
+            }
+          }}
         >
           {showGraph ? 'Hide graph' : 'Show graph'}
         </CubeButton>
       </div>
-      <PanelLoadingIndicator isLoading={editorState.isResolvingSources} />
+      <PanelLoadingIndicator
+        isLoading={
+          editorState.isResolvingSources || editorState.isTypingExtends
+        }
+      />
       {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)]"
@@ -170,6 +195,7 @@ const CubeGraphHeader = observer((props: { editorState: CubeEditorState }) => {
         </div>
       )}
       <CubeSourcePicker editorState={editorState} />
+      <CubeExamplesDialog editorState={editorState} />
       <CubeSpecTransferDialog editorState={editorState} />
       <CubeShowPureDialog editorState={editorState} />
     </div>
@@ -178,7 +204,8 @@ const CubeGraphHeader = observer((props: { editorState: CubeEditorState }) => {
 
 /**
  * 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
+ * shown (PLAN §7.1); hiding the graph leaves its header. A node's editor
+ * floats below the node (PLAN §11.8). The host gives it
  * the engine, the models and the application store; the page's state lives
  * as long as the page.
  */
@@ -187,17 +214,26 @@ export const CubeEditor = observer(
     host: CubeHost;
     /** The cube to open; an empty one by default */
     initialDocument?: CubeDocument | undefined;
+    /** A source a link asks the page to start with, on an empty cube (spec §17.15) */
+    initialSource?: CubeEntrySource | undefined;
   }) => {
     const [editorState] = useState(
       () => new CubeEditorState(props.host, props.initialDocument),
     );
     useEffect(() => () => editorState.dispose(), [editorState]);
+    const [entry] = useState(() => new CubeEntrySourceState(editorState));
+    const { initialSource } = props;
+    useEffect(() => {
+      if (initialSource) {
+        flowResult(entry.open(initialSource)).catch(
+          editorState.host.applicationStore.alertUnhandledError,
+        );
+      }
+      // only as the page opens
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     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
@@ -209,30 +245,23 @@ export const CubeEditor = observer(
         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 className="flex h-full min-w-0 flex-1 flex-col">
+          <CubeGraphHeader editorState={editorState} />
+          <CubeEntrySourceBanner entry={entry} />
+          <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>
       </div>
     );
   },