@finos/legend-cube-builder 0.0.4 → 0.0.6

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,
@@ -34,22 +37,31 @@ import {
   UNSAVED_CUBE_NAME,
 } from '../__lib__/LegendCubeLabels.js';
 import { LEGEND_CUBE_TEST_ID } from '../__lib__/LegendCubeTesting.js';
+import { CUBE_TOUR_ANCHOR, cubeTourAnchor } from '../__lib__/LegendCubeTour.js';
 import { CubeEditorState } from '../stores/CubeEditorState.js';
 import {
   type CubeEntrySource,
   CubeEntrySourceState,
 } from '../stores/CubeEntrySource.js';
-import type { CubeHost } from '../stores/CubeHost.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 { 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 { CubeJsonViewerDialog } from './grid/CubeJsonViewerDialog.js';
+import { CubeJsonExplorerDialog } from './grid/CubeJsonExplorerDialog.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';
+import { CubeTour } from './tour/CubeTour.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;
@@ -65,142 +77,151 @@ 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>
-        )}
-        {editorState.isTypingExtends && (
-          <span className="shrink-0 text-base text-[var(--color-text-secondary)]">
-            {CUBE_PENDING_LABEL.TYPING_COLUMNS}
+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>
-        )}
-        <CubeAddItemsMenu editorState={editorState} />
-        <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={
-            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;
+          {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"
+              {...cubeTourAnchor(CUBE_TOUR_ANCHOR.EXAMPLES)}
+              onClick={() => editorState.examples.open()}
+            >
+              Examples
+            </CubeButton>
+          )}
+          <CubeButton
+            {...cubeTourAnchor(CUBE_TOUR_ANCHOR.VIEW)}
+            title={
+              readOnly
+                ? READ_ONLY_CUBE_TITLE
+                : `Undo the last change (${UNDO_SHORTCUT_LABEL})`
             }
-            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={() => {
-            if (editorState.nodeEditor.finishApplied()) {
-              editorState.specTransfer.openExport();
+            disabled={!editorState.canUndo && !editorState.hasEditsToApply}
+            onClick={() => editorState.undoEdited()}
+          >
+            Undo
+          </CubeButton>
+          <CubeButton
+            {...cubeTourAnchor(CUBE_TOUR_ANCHOR.VIEW)}
+            title={`Redo the last change undone (${REDO_SHORTCUT_LABEL})`}
+            disabled={!editorState.canRedo}
+            onClick={() => editorState.redoEdited()}
+          >
+            Redo
+          </CubeButton>
+          <CubeButton
+            {...cubeTourAnchor(CUBE_TOUR_ANCHOR.VIEW)}
+            title={
+              editorState.execution.canExecute
+                ? 'Show the Pure query that Execute runs'
+                : formatDisabledReasons(editorState.execution.disabledReasons)
             }
-          }}
-        >
-          Export
-        </CubeButton>
-        <CubeButton
-          title="Open a cube from its spec, in place of this one"
-          onClick={() => editorState.specTransfer.openImport()}
-        >
-          Import
-        </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);
+            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
+            {...cubeTourAnchor(CUBE_TOUR_ANCHOR.VIEW)}
+            title={
+              showGraph
+                ? 'Hide the graph, leaving more room for the results'
+                : 'Show the graph'
             }
-          }}
-        >
-          {showGraph ? 'Hide graph' : 'Show graph'}
-        </CubeButton>
-      </div>
-      <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)]"
-          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
+            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} />
-      <CubeExamplesDialog 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} />
+        <CubeJsonViewerDialog editorState={editorState} />
+        <CubeJsonExplorerDialog editorState={editorState} />
+        <CubeDevSettingsDialog editorState={editorState} />
+      </div>
+    );
+  },
+);
 
 /**
  * The Legend Cube page: the query above, its results below, both always
@@ -216,19 +237,31 @@ export const CubeEditor = observer(
     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 } = props;
+    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
     }, []);
@@ -238,16 +271,23 @@ export const CubeEditor = observer(
     // 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);
+    // the page, whose controls the tour points at
+    const [page, setPage] = useState<HTMLDivElement | null>(null);
 
     return (
       <div
+        ref={setPage}
         className="legend-cube flex bg-[var(--color-bg-app)] text-[var(--color-text-primary)]"
         data-testid={LEGEND_CUBE_TEST_ID.EDITOR}
       >
         <CubePalette editorState={editorState} />
         <div className="flex h-full min-w-0 flex-1 flex-col">
-          <CubeGraphHeader editorState={editorState} />
+          <CubeGraphHeader
+            editorState={editorState}
+            headerActions={props.headerActions}
+          />
           <CubeEntrySourceBanner entry={entry} />
+          <CubeLambdaImportBanner lambdaImport={editorState.lambdaImport} />
           <ResizablePanelGroup orientation="horizontal">
             <ResizablePanel
               {...graphPanel.collapsiblePanel}
@@ -262,6 +302,7 @@ export const CubeEditor = observer(
             </ResizablePanel>
           </ResizablePanelGroup>
         </div>
+        <CubeTour editorState={editorState} root={page} />
       </div>
     );
   },

package/src/components/CubeFileMenu.tsx

@@ -0,0 +1,129 @@
+/**
+ * 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 { CUBE_TOUR_ANCHOR, cubeTourAnchor } from '../__lib__/LegendCubeTour.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"
+          {...cubeTourAnchor(CUBE_TOUR_ANCHOR.CUBE_MENU)}
+          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>
+      </>
+    );
+  },
+);

package/src/components/CubeLambdaImportBanner.tsx

@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import { LEGEND_CUBE_TEST_ID } from '../__lib__/LegendCubeTesting.js';
+import {
+  CUBE_LAMBDA_IMPORT_MESSAGE,
+  CubeLambdaFidelity,
+  type CubeLambdaImportState,
+} from '../stores/CubeLambdaImportState.js';
+import { CubeButton } from './CubeButton.js';
+
+/**
+ * The lambda the page opened on (PLAN §11.18), in the graph region: while it
+ * is read, why it couldn't be, or that Cube writes it another way
+ */
+export const CubeLambdaImportBanner = observer(
+  (props: { lambdaImport: CubeLambdaImportState }) => {
+    const { lambdaImport } = props;
+    const { label = 'the query', error, fidelity, notes } = lambdaImport;
+    if (lambdaImport.isReading) {
+      return (
+        <div
+          className="shrink-0 border-b border-[var(--color-border-default)] px-2 py-1 text-base text-[var(--color-text-secondary)]"
+          role="status"
+        >
+          {CUBE_LAMBDA_IMPORT_MESSAGE.READING(label)}
+        </div>
+      );
+    }
+    if (error !== undefined) {
+      return (
+        <div
+          className="flex shrink-0 items-start gap-2 border-b border-[var(--color-border-default)] bg-[var(--color-status-error-bg)] px-2 py-1 text-base text-[var(--color-status-error)]"
+          role="alert"
+          data-testid={LEGEND_CUBE_TEST_ID.LAMBDA_IMPORT}
+        >
+          <span className="min-w-0 flex-1 break-words">
+            <span className="font-medium">
+              {CUBE_LAMBDA_IMPORT_MESSAGE.CANT_READ(label)}:
+            </span>{' '}
+            {error.message}
+            {error.detail !== undefined && (
+              <details>
+                <summary className="cursor-pointer">Details</summary>
+                <pre className="whitespace-pre-wrap text-sm">
+                  {error.detail}
+                </pre>
+              </details>
+            )}
+          </span>
+          <CubeButton onClick={() => lambdaImport.dismiss()}>
+            Dismiss
+          </CubeButton>
+        </div>
+      );
+    }
+    const warnings = [
+      ...(fidelity === CubeLambdaFidelity.REWRITTEN
+        ? [CUBE_LAMBDA_IMPORT_MESSAGE.REWRITTEN(label)]
+        : fidelity === CubeLambdaFidelity.UNCHECKED
+          ? [CUBE_LAMBDA_IMPORT_MESSAGE.UNCHECKED(label)]
+          : []),
+      ...notes,
+    ];
+    if (!warnings.length) {
+      return null;
+    }
+    return (
+      <div
+        className="flex shrink-0 items-start gap-2 border-b border-[var(--color-border-default)] bg-[var(--color-status-warn-bg)] px-2 py-1 text-base text-[var(--color-text-primary)]"
+        role="status"
+        data-testid={LEGEND_CUBE_TEST_ID.LAMBDA_IMPORT}
+      >
+        <span className="min-w-0 flex-1 break-words">
+          {warnings.map((warning) => (
+            <div key={warning}>{warning}</div>
+          ))}
+        </span>
+        <CubeButton onClick={() => lambdaImport.dismiss()}>Dismiss</CubeButton>
+      </div>
+    );
+  },
+);

package/src/components/CubeNodeIcon.tsx

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