@finos/legend-cube-builder 0.0.3 → 0.0.5

package/src/components/CubeEditor.tsx

@@ -26,7 +26,10 @@ 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 {
+  REDO_SHORTCUT_LABEL,
+  UNDO_SHORTCUT_LABEL,
+} from '../__lib__/LegendCubeCommand.js';
 import {
   CUBE_PENDING_LABEL,
   formatDisabledReasons,
@@ -35,22 +38,30 @@ import {
 } 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 {
+  type CubeEntrySource,
+  CubeEntrySourceState,
+} from '../stores/CubeEntrySource.js';
+import type { CubeInitialLambda } from '../stores/CubeLambdaImportState.js';
+import { type CubeHost, isCubeSampleDataOffered } 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 { CubeLambdaImportBanner } from './CubeLambdaImportBanner.js';
 import { CubeGridRegion } from './grid/CubeGridRegion.js';
 import { CubePalette } from './palette/CubePalette.js';
+import { CubeDevSettingsDialog } from './dev-settings/CubeDevSettings.js';
 import { CubeShowPureDialog } from './show-pure/CubeShowPureDialog.js';
+import { CubeExamplesDialog } from './examples/CubeExamplesDialog.js';
+import { CubeFileMenu } from './CubeFileMenu.js';
 import { CubeSourcePicker } from './source-picker/CubeSourcePicker.js';
 import { CubeSpecTransferDialog } from './spec-transfer/CubeSpecTransferDialog.js';
+import { CubeImportPureDialog } from './spec-transfer/CubeImportPureDialog.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);
@@ -62,123 +73,149 @@ const useMaxGraphHeight = (): number => {
   return Math.round(windowHeight * MAX_GRAPH_SHARE_OF_WINDOW);
 };
 
+/** The buttons a host adds to the header, given the page's state */
+export type CubeHeaderActions = (
+  editorState: CubeEditorState,
+) => React.ReactNode;
+
 /**
  * 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}
+const CubeGraphHeader = observer(
+  (props: {
+    editorState: CubeEditorState;
+    headerActions?: CubeHeaderActions | undefined;
+  }) => {
+    const { editorState, headerActions } = 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>
-          <CubeButton onClick={() => editorState.nodeEditor.dismissNotice()}>
-            Dismiss
+          {editorState.isResolvingSources && (
+            <span className="shrink-0 text-base text-[var(--color-text-secondary)]">
+              {CUBE_PENDING_LABEL.RESOLVING_SOURCE}
+            </span>
+          )}
+          {editorState.isCheckingExpressions && (
+            <span className="shrink-0 text-base text-[var(--color-text-secondary)]">
+              {CUBE_PENDING_LABEL.CHECKING_EXPRESSIONS}
+            </span>
+          )}
+          <CubeFileMenu editorState={editorState} />
+          <CubeAddItemsMenu editorState={editorState} />
+          {isCubeSampleDataOffered(editorState.host) && (
+            <CubeButton
+              title="Open an example cube, or start one on sample data"
+              onClick={() => editorState.examples.open()}
+            >
+              Examples
+            </CubeButton>
+          )}
+          <CubeButton
+            title={
+              readOnly
+                ? READ_ONLY_CUBE_TITLE
+                : `Undo the last change (${UNDO_SHORTCUT_LABEL})`
+            }
+            disabled={!editorState.canUndo && !editorState.hasEditsToApply}
+            onClick={() => editorState.undoEdited()}
+          >
+            Undo
+          </CubeButton>
+          <CubeButton
+            title={`Redo the last change undone (${REDO_SHORTCUT_LABEL})`}
+            disabled={!editorState.canRedo}
+            onClick={() => editorState.redoEdited()}
+          >
+            Redo
           </CubeButton>
+          <CubeButton
+            title={
+              editorState.execution.canExecute
+                ? 'Show the Pure query that Execute runs'
+                : formatDisabledReasons(editorState.execution.disabledReasons)
+            }
+            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,
+              );
+            }}
+          >
+            Show Pure
+          </CubeButton>
+          <CubeButton
+            title={
+              showGraph
+                ? 'Hide the graph, leaving more room for the results'
+                : 'Show the graph'
+            }
+            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>
+          {headerActions?.(editorState)}
         </div>
-      )}
-      <CubeSourcePicker editorState={editorState} />
-      <CubeSpecTransferDialog editorState={editorState} />
-      <CubeShowPureDialog editorState={editorState} />
-    </div>
-  );
-});
+        <PanelLoadingIndicator
+          isLoading={
+            editorState.isResolvingSources || editorState.isCheckingExpressions
+          }
+        />
+        {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} />
+        <CubeExamplesDialog editorState={editorState} />
+        <CubeSpecTransferDialog editorState={editorState} />
+        <CubeImportPureDialog editorState={editorState} />
+        <CubeShowPureDialog editorState={editorState} />
+        <CubeDevSettingsDialog 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
+ * 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 +224,38 @@ 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;
+    /**
+     * A lambda the host opens the page on, read into the cube (Import Pure,
+     * PLAN §11.18), e.g. Studio's materialized view to edit
+     */
+    initialLambda?: CubeInitialLambda | undefined;
+    /** The host's own buttons, at the end of the header, e.g. Studio's Add MatView */
+    headerActions?: CubeHeaderActions | undefined;
   }) => {
     const [editorState] = useState(
       () => new CubeEditorState(props.host, props.initialDocument),
     );
     useEffect(() => () => editorState.dispose(), [editorState]);
+    const [entry] = useState(() => new CubeEntrySourceState(editorState));
+    const { initialSource, initialLambda } = props;
+    useEffect(() => {
+      if (initialSource) {
+        flowResult(entry.open(initialSource)).catch(
+          editorState.host.applicationStore.alertUnhandledError,
+        );
+      }
+      if (initialLambda) {
+        flowResult(editorState.lambdaImport.open(initialLambda)).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 +267,27 @@ 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}
+            headerActions={props.headerActions}
+          />
+          <CubeEntrySourceBanner entry={entry} />
+          <CubeLambdaImportBanner lambdaImport={editorState.lambdaImport} />
+          <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>
     );
   },

package/src/components/CubeEntrySourceBanner.tsx

@@ -0,0 +1,64 @@
+/**
+ * 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_ENTRY_SOURCE_ERROR_TITLE,
+  type CubeEntrySourceState,
+} from '../stores/CubeEntrySource.js';
+import { CubeButton } from './CubeButton.js';
+
+/** Why the source a link named couldn't be added, in the graph region (spec §17.13, U9(b)) */
+export const CubeEntrySourceBanner = observer(
+  (props: { entry: CubeEntrySourceState }) => {
+    const { entry } = props;
+    if (entry.isOpening) {
+      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"
+        >
+          Opening the linked source…
+        </div>
+      );
+    }
+    if (entry.error === undefined) {
+      return null;
+    }
+    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.ENTRY_SOURCE_ERROR}
+      >
+        <span className="min-w-0 flex-1 break-words">
+          <span className="font-medium">{CUBE_ENTRY_SOURCE_ERROR_TITLE}</span>{' '}
+          {entry.error.message}
+          {entry.error.detail !== undefined && (
+            <details>
+              <summary className="cursor-pointer">Details</summary>
+              <pre className="whitespace-pre-wrap text-sm">
+                {entry.error.detail}
+              </pre>
+            </details>
+          )}
+        </span>
+        <CubeButton onClick={() => entry.dismissError()}>Dismiss</CubeButton>
+      </div>
+    );
+  },
+);

package/src/components/CubeFileMenu.tsx

@@ -0,0 +1,127 @@
+/**
+ * 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,
+  useDropdownMenu,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { READ_ONLY_CUBE_TITLE } from '../__lib__/LegendCubeLabels.js';
+import type { CubeEditorState } from '../stores/CubeEditorState.js';
+
+interface CubeFileMenuItem {
+  readonly label: string;
+  readonly title: string;
+  readonly disabled: boolean;
+  readonly run: () => void;
+}
+
+/**
+ * 'Cube ▾' in the graph's header (the review of the demo, 2026-10-13): what
+ * acts on the cube as a whole, New, Import, Import Pure and Export, under one button, so
+ * the header keeps the actions used while building. A disabled item says why
+ * on hover.
+ */
+export const CubeFileMenu = observer(
+  (props: { editorState: CubeEditorState }) => {
+    const { editorState } = props;
+    const { readOnly } = editorState;
+    const [openMenu, closeMenu, menuProps, isOpen] = useDropdownMenu();
+    const items: CubeFileMenuItem[] = [
+      {
+        label: 'New',
+        title: editorState.isEmptyCube
+          ? 'This cube is new already'
+          : 'Start a new, empty cube in place of this one (Undo brings it back)',
+        disabled: editorState.isEmptyCube,
+        run: () => editorState.startNewCube(),
+      },
+      {
+        label: 'Import',
+        title: 'Open a cube from its spec, in place of this one',
+        disabled: false,
+        run: () => editorState.specTransfer.openImport(),
+      },
+      {
+        label: 'Import Pure',
+        title: 'Read a Pure query into steps, in place of this cube',
+        disabled: false,
+        run: () => editorState.lambdaImport.openDialog(),
+      },
+      {
+        label: 'Export',
+        title: readOnly
+          ? READ_ONLY_CUBE_TITLE
+          : "Show the cube's spec, to copy or download",
+        disabled: readOnly,
+        run: () => {
+          if (editorState.nodeEditor.finishApplied()) {
+            editorState.specTransfer.openExport();
+          }
+        },
+      },
+    ];
+    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)]"
+          title="New, Import, Import Pure and Export"
+          aria-haspopup="menu"
+          aria-expanded={isOpen}
+          onClick={openMenu}
+        >
+          Cube
+          <CaretDownIcon aria-hidden={true} />
+        </button>
+        <DropdownMenu
+          {...menuProps}
+          menuProps={{
+            elevation: 7,
+            slotProps: {
+              root: { slotProps: { backdrop: { invisible: true } } },
+              list: { disabledItemsFocusable: true },
+            },
+          }}
+        >
+          {items.map((item) => (
+            <DropdownMenuItem
+              key={item.label}
+              className={clsx(
+                'px-2 text-base',
+                item.disabled && '!cursor-not-allowed opacity-50',
+              )}
+              // not MUI's disabled, which takes the pointer away: the reason shows on hover
+              aria-disabled={item.disabled}
+              title={item.title}
+              onClick={() => {
+                if (!item.disabled) {
+                  closeMenu();
+                  item.run();
+                }
+              }}
+            >
+              {item.label}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenu>
+      </>
+    );
+  },
+);