@finos/legend-cube-builder 0.0.5 → 0.0.6

package/src/components/grid/CubeServerSideGrid.tsx

@@ -27,6 +27,10 @@ import {
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { NULL_CELL_TEXT } from '../../__lib__/LegendCubeLabels.js';
 import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import {
+  CUBE_TOUR_ANCHOR,
+  cubeTourAnchor,
+} from '../../__lib__/LegendCubeTour.js';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
 import type { CubeExecutionResult } from '../../stores/CubeExecutionState.js';
 import type {
@@ -37,7 +41,9 @@ import { formatCellValue } from './CubeGridValues.js';
 import {
   buildCubeColumnDefs,
   CUBE_EXCEL_STYLES,
+  type CubeGridHeaderMenuParams,
   getCubeGridContextMenuItems,
+  getCubeGridHeaderMenuItems,
   keepCubeColumnWidths,
 } from './CubeResultGrid.js';
 
@@ -102,6 +108,11 @@ export const CubeServerSideGrid = memo(
         getCubeGridContextMenuItems(editorState, params),
       [editorState],
     );
+    const getMainMenuItems = useCallback(
+      (params: CubeGridHeaderMenuParams<CubeGridRowData>) =>
+        getCubeGridHeaderMenuItems(editorState, params),
+      [editorState],
+    );
     const columnDefs = useMemo(
       (): DataGridColumnDefinition<CubeGridRowData>[] =>
         buildCubeColumnDefs<CubeGridRowData>(
@@ -154,6 +165,7 @@ export const CubeServerSideGrid = memo(
           'ag-theme-balham-dark': darkMode,
         })}
         data-testid={LEGEND_CUBE_TEST_ID.RESULT_GRID}
+        {...cubeTourAnchor(CUBE_TOUR_ANCHOR.RESULTS)}
       >
         <DataGrid<CubeGridRowData>
           rowModelType="serverSide"
@@ -163,6 +175,7 @@ export const CubeServerSideGrid = memo(
           suppressFieldDotNotation={true}
           tooltipShowDelay={500}
           getContextMenuItems={getContextMenuItems}
+          getMainMenuItems={getMainMenuItems}
           serverSideSortAllLevels={true}
           excelStyles={CUBE_EXCEL_STYLES}
           onColumnResized={(event) =>

package/src/components/palette/CubePalette.tsx

@@ -31,6 +31,10 @@ import {
   READ_ONLY_CUBE_TITLE,
 } from '../../__lib__/LegendCubeLabels.js';
 import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import {
+  CUBE_TOUR_ANCHOR,
+  cubeTourAnchor,
+} from '../../__lib__/LegendCubeTour.js';
 import {
   addCubeNode,
   getCubeAddDatabaseProblem,
@@ -109,6 +113,11 @@ const CubePaletteItem = observer(
         tabIndex={disabled ? -1 : 0}
         aria-disabled={disabled}
         aria-label={label}
+        {...cubeTourAnchor(
+          definition.kind === 'source'
+            ? CUBE_TOUR_ANCHOR.SOURCES
+            : CUBE_TOUR_ANCHOR.STEPS,
+        )}
         className={clsx(
           'flex h-8 shrink-0 items-center gap-2 px-3 text-base',
           disabled

package/src/components/source-picker/CubeIngestTab.tsx

@@ -16,7 +16,7 @@
 
 import { clsx } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
-import { useId } from 'react';
+import { Fragment, useId } from 'react';
 import { CUBE_DATA_PRODUCT_ENVIRONMENT_LABELS } from '../../__lib__/LegendCubeDataProductLabels.js';
 import { getDroppedDefinitionsLabel } from '../../__lib__/LegendCubeIngestLabels.js';
 import {
@@ -62,11 +62,16 @@ const CubeIngestTabAlert: React.FC<{
 );
 
 /**
- * A definition's data sets, as both Ingest screens list them, each picked or
- * ticked to add; the one picked last previewed
+ * The data sets of the opened definitions, as both Ingest screens list them,
+ * each picked or ticked to add, under its definition's name when several are
+ * opened; the one picked last previewed
  */
 const CubeIngestDataSets = observer((props: { tab: CubeIngestTabState }) => {
   const { tab } = props;
+  const read = tab.definitions.filter(
+    (definition) => tab.getDataSets(definition.urn) !== undefined,
+  );
+  const grouped = tab.definitions.length > 1;
   return (
     <>
       {tab.isDescribing && (
@@ -74,34 +79,56 @@ const CubeIngestDataSets = observer((props: { tab: CubeIngestTabState }) => {
           reading the definition
         </div>
       )}
-      {tab.dataSets && (
+      {read.length > 0 && (
         <ul
-          className={`max-h-40 overflow-auto ${CUBE_PICKER_LIST_CLASS}`}
+          className={`max-h-48 overflow-auto ${CUBE_PICKER_LIST_CLASS}`}
           aria-label="Data sets"
         >
-          {tab.dataSets.map((dataSet) => (
-            <CubePickerListItem
-              key={dataSet.name}
-              picked={tab.isDataSetPicked(dataSet.name)}
-              disabled={!dataSet.isPickable}
-              title={dataSet.disabledReason}
-              adds={true}
-              onPick={() => tab.selectDataSet(dataSet.name)}
-              onToggle={() => tab.toggleDataSet(dataSet.name)}
-              toggleLabel={dataSet.name}
-            >
-              <span className="min-w-0 flex-1 truncate">{dataSet.name}</span>
-              <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
-                {dataSet.isPickable
-                  ? `${dataSet.schema?.columns.length ?? 0} columns`
-                  : dataSet.disabledReason}
-              </span>
-            </CubePickerListItem>
+          {read.map((definition) => (
+            <Fragment key={definition.urn}>
+              {grouped && (
+                <li className="px-2 pt-1 text-sm text-[var(--color-text-muted)]">
+                  {definition.name}
+                </li>
+              )}
+              {(tab.getDataSets(definition.urn) ?? []).map((dataSet) => (
+                <CubePickerListItem
+                  key={dataSet.name}
+                  picked={tab.isDataSetPicked(dataSet.name, definition.urn)}
+                  disabled={!dataSet.isPickable}
+                  title={dataSet.disabledReason}
+                  adds={true}
+                  onPick={() => tab.selectDataSet(dataSet.name, definition.urn)}
+                  onToggle={() =>
+                    tab.toggleDataSet(dataSet.name, definition.urn)
+                  }
+                  toggleLabel={
+                    grouped
+                      ? `${dataSet.name} of ${definition.name}`
+                      : dataSet.name
+                  }
+                >
+                  <span className="min-w-0 flex-1 truncate">
+                    {dataSet.name}
+                  </span>
+                  <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
+                    {dataSet.isPickable
+                      ? `${dataSet.schema?.columns.length ?? 0} columns`
+                      : dataSet.disabledReason}
+                  </span>
+                </CubePickerListItem>
+              ))}
+            </Fragment>
           ))}
         </ul>
       )}
       {tab.dataSet?.schema && (
-        <section aria-label="Data set preview">
+        <section aria-label="Data set preview" className="flex flex-col gap-1">
+          {grouped && (
+            <span className="text-sm text-[var(--color-text-muted)]">
+              {`${tab.dataSet.name} of ${tab.previewedDefinition?.name ?? ''}`}
+            </span>
+          )}
           <CubeSchemaColumnsTable schema={tab.dataSet.schema} />
         </section>
       )}
@@ -111,8 +138,9 @@ const CubeIngestDataSets = observer((props: { tab: CubeIngestTabState }) => {
 
 /**
  * The Ingest tab on a host reading one project's definitions (Studio): the
- * project's definitions by name, each path muted beside it, then a
- * definition's data sets; the runtime its runs use is named, not picked
+ * project's definitions by name, each path muted beside it, then the data
+ * sets of the one picked, or of several ticked; the runtime its runs use is
+ * named, not picked
  */
 const CubeProjectIngestTab = observer((props: { tab: CubeIngestTabState }) => {
   const { tab } = props;
@@ -142,9 +170,11 @@ const CubeProjectIngestTab = observer((props: { tab: CubeIngestTabState }) => {
           {candidates.map((candidate) => (
             <CubePickerListItem
               key={candidate.urn}
-              picked={tab.definition?.urn === candidate.urn}
+              picked={tab.isDefinitionOpened(candidate)}
               title={candidate.definition}
               onPick={() => tab.selectDefinition(candidate)}
+              onToggle={() => tab.toggleDefinition(candidate)}
+              toggleLabel={candidate.name}
             >
               <span className="shrink-0">{candidate.name}</span>
               <span className="min-w-0 flex-1 truncate text-sm text-[var(--color-text-muted)]">
@@ -178,8 +208,8 @@ const CubeProjectIngestTab = observer((props: { tab: CubeIngestTabState }) => {
 
 /**
  * The source dialog's Ingest tab (PLAN §6.7): Mode, the viewer's
- * environment (read-only), a producer deployment, one of its definitions,
- * then a data set with its columns. The cube's first data set fixes the
+ * environment (read-only), a producer deployment, one of its definitions, or
+ * several ticked, then data sets with their columns. The cube's first data set fixes the
  * Mode, the producer deployment and the warehouse.
  */
 export const CubeIngestTab = observer((props: { tab: CubeIngestTabState }) => {
@@ -256,13 +286,15 @@ export const CubeIngestTab = observer((props: { tab: CubeIngestTabState }) => {
           aria-label="Ingest definitions"
         >
           {tab.shownDefinitions.map((candidate) => {
-            const isPicked = tab.definition?.urn === candidate.urn;
+            const isPicked = tab.isDefinitionOpened(candidate);
             return (
               <CubePickerListItem
                 key={candidate.urn}
                 picked={isPicked}
                 title={candidate.definition}
                 onPick={() => tab.selectDefinition(candidate)}
+                onToggle={() => tab.toggleDefinition(candidate)}
+                toggleLabel={candidate.name}
               >
                 <span className="min-w-0 flex-1 truncate">
                   {candidate.name}

package/src/components/tour/CubeTour.tsx

@@ -0,0 +1,317 @@
+/**
+ * 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 { BasePopper } from '@finos/legend-art';
+import { noop } from '@finos/legend-shared';
+import { observer } from 'mobx-react-lite';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  CUBE_TOUR_ANCHOR_ATTRIBUTE,
+  CUBE_TOUR_LABEL,
+  type CUBE_TOUR_ANCHOR,
+  type CubeTourStep,
+} from '../../__lib__/LegendCubeTour.js';
+import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import { CubeButton } from '../CubeButton.js';
+
+/**
+ * Above the canvas, the grid and the node editor (1250), below MUI's dialogs
+ * (1300); inside the dialog that hosts the page, if one does
+ */
+export const CUBE_TOUR_Z_INDEX = 1290;
+
+/** Room around the controls shown, and between them and the card */
+const PADDING = 4;
+const GAP = 12;
+/** The card's width (Legend's root is 62.5%, so it is written in pixels) */
+const CARD_WIDTH = 340;
+const DIM = 'rgba(0, 0, 0, 0.45)';
+
+const MODIFIERS = [
+  { name: 'offset', options: { offset: [0, GAP + PADDING] } },
+  { name: 'flip', options: { padding: GAP } },
+  {
+    name: 'preventOverflow',
+    options: { rootBoundary: 'viewport', padding: GAP, altAxis: true },
+  },
+];
+
+type CubePopperInstance = NonNullable<
+  Extract<
+    React.ComponentProps<typeof BasePopper>['popperRef'],
+    React.RefObject<unknown>
+  >['current']
+>;
+
+interface Box {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+/** The page's controls that carry the anchor */
+const findAnchored = (root: Element, anchor: CUBE_TOUR_ANCHOR): Element[] =>
+  Array.from(
+    root.querySelectorAll(`[${CUBE_TOUR_ANCHOR_ATTRIBUTE}~="${anchor}"]`),
+  );
+
+/** The box around the anchor's controls that have a size; none if none has */
+const boxOf = (root: Element, anchor: CUBE_TOUR_ANCHOR): Box | undefined =>
+  findAnchored(root, anchor)
+    .map((element) => element.getBoundingClientRect())
+    .filter((rect) => rect.width > 0 || rect.height > 0)
+    .reduce<Box | undefined>((box, rect) => {
+      if (!box) {
+        return {
+          left: rect.left,
+          top: rect.top,
+          width: rect.width,
+          height: rect.height,
+        };
+      }
+      const left = Math.min(box.left, rect.left);
+      const top = Math.min(box.top, rect.top);
+      return {
+        left,
+        top,
+        width: Math.max(box.left + box.width, rect.right) - left,
+        height: Math.max(box.top + box.height, rect.bottom) - top,
+      };
+    }, undefined);
+
+const isSameBox = (a: Box | undefined, b: Box | undefined): boolean =>
+  a === b ||
+  (a !== undefined &&
+    b !== undefined &&
+    a.left === b.left &&
+    a.top === b.top &&
+    a.width === b.width &&
+    a.height === b.height);
+
+/**
+ * The editor's guided tour (PLAN §11.21): the page dimmed but for the
+ * current step's controls, and a card beside them, or in the middle of the
+ * page for a step that points at nothing. The controls are followed as the
+ * page moves them (a panel resized, the grid loaded). Clicks on the page
+ * are held while it shows; Esc ends it, the arrow keys move through it.
+ */
+export const CubeTour = observer(
+  (props: {
+    editorState: CubeEditorState;
+    /** The page, whose controls the steps point at */
+    root: HTMLElement | null;
+  }) => {
+    const { editorState, root } = props;
+    const { tour } = editorState;
+    const { step } = tour;
+    const titleId = useId();
+    const textId = useId();
+    const [box, setBox] = useState<Box | undefined>(undefined);
+    const popperRef = useRef<CubePopperInstance>(null);
+    const isShown = useMemo(
+      () =>
+        (candidate: CubeTourStep): boolean =>
+          candidate.anchor === undefined ||
+          (root !== null && findAnchored(root, candidate.anchor).length > 0),
+      [root],
+    );
+
+    // the step's controls followed, frame by frame, while it shows
+    const anchor = step?.anchor;
+    useEffect(() => {
+      if (anchor === undefined || !root) {
+        setBox(undefined);
+        return undefined;
+      }
+      let frame = 0;
+      const follow = (): void => {
+        const next = boxOf(root, anchor);
+        setBox((current) => (isSameBox(current, next) ? current : next));
+        frame = requestAnimationFrame(follow);
+      };
+      follow();
+      return () => cancelAnimationFrame(frame);
+    }, [anchor, root]);
+    useEffect(() => {
+      popperRef.current?.update().catch(noop());
+    }, [box]);
+
+    // the tour's keys come first: the page's shortcuts wait while it shows
+    const isOpen = step !== undefined;
+    useEffect(() => {
+      if (!isOpen) {
+        return undefined;
+      }
+      const onKeyDown = (event: KeyboardEvent): void => {
+        if (event.key === 'Escape') {
+          tour.close();
+        } else if (event.key === 'ArrowRight') {
+          tour.move(1, isShown);
+        } else if (event.key === 'ArrowLeft') {
+          tour.move(-1, isShown);
+        } else {
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+      };
+      window.addEventListener('keydown', onKeyDown, true);
+      return () => window.removeEventListener('keydown', onKeyDown, true);
+    }, [isOpen, tour, isShown]);
+
+    const spotlight = useMemo(
+      () =>
+        box && {
+          left: box.left - PADDING,
+          top: box.top - PADDING,
+          width: box.width + 2 * PADDING,
+          height: box.height + 2 * PADDING,
+        },
+      [box],
+    );
+    // the popper reads the spotlight wherever it places the card
+    const latest = useRef(spotlight);
+    latest.current = spotlight;
+    const virtualAnchor = useMemo(
+      () => ({
+        getBoundingClientRect: (): DOMRect => {
+          const current = latest.current ?? {
+            left: 0,
+            top: 0,
+            width: 0,
+            height: 0,
+          };
+          return DOMRect.fromRect({
+            x: current.left,
+            y: current.top,
+            width: current.width,
+            height: current.height,
+          });
+        },
+      }),
+      [],
+    );
+
+    if (!step || !root) {
+      return null;
+    }
+    // counted over the whole tour, steady while an example loads and adds
+    // the controls of later steps; a step skipped skips its number
+    const position = tour.index + 1;
+    const isLast = tour.steps.filter(isShown).at(-1) === step;
+    // a page hosted in a dialog, as Studio hosts Cube, keeps the tour in the
+    // dialog's layer, above the page
+    const container =
+      root.closest<HTMLElement>('.MuiDialog-root') ?? root.ownerDocument.body;
+    const card = (
+      <div
+        // a new card for each step, so its Next button takes the focus
+        key={tour.index}
+        className="legend-cube__tour flex flex-col gap-2 rounded-md border border-[var(--color-border-default)] bg-[var(--color-bg-elevated)] p-3 text-[var(--color-text-primary)] shadow-lg"
+        style={{ width: CARD_WIDTH, maxWidth: `calc(100vw - ${2 * GAP}px)` }}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        aria-describedby={textId}
+      >
+        <div className="flex items-baseline gap-2">
+          <h2 id={titleId} className="min-w-0 flex-1 text-lg font-medium">
+            {step.title}
+          </h2>
+          <span className="shrink-0 text-sm text-[var(--color-text-secondary)]">
+            {CUBE_TOUR_LABEL.progress(position, tour.steps.length)}
+          </span>
+        </div>
+        <p id={textId} className="text-base leading-snug">
+          {step.text}
+          {tour.openedExample && tour.index === 0 && (
+            <> {CUBE_TOUR_LABEL.EXAMPLE_OPENED}</>
+          )}
+        </p>
+        <div className="flex items-center gap-2">
+          {!isLast && (
+            <button
+              type="button"
+              className="text-sm text-[var(--color-text-secondary)] underline hover:text-[var(--color-text-primary)]"
+              onClick={() => tour.close()}
+            >
+              {CUBE_TOUR_LABEL.END}
+            </button>
+          )}
+          <span className="flex-1" />
+          {position > 1 && (
+            <CubeButton onClick={() => tour.move(-1, isShown)}>
+              {CUBE_TOUR_LABEL.BACK}
+            </CubeButton>
+          )}
+          <CubeButton
+            primary={true}
+            // the keyboard follows the tour: Enter moves on
+            autoFocus={true}
+            onClick={() => tour.move(1, isShown)}
+          >
+            {isLast ? CUBE_TOUR_LABEL.DONE : CUBE_TOUR_LABEL.NEXT}
+          </CubeButton>
+        </div>
+      </div>
+    );
+    return createPortal(
+      <div
+        className="legend-cube__tour-layer"
+        style={{ position: 'fixed', inset: 0, zIndex: CUBE_TOUR_Z_INDEX }}
+        // the page underneath takes no clicks, and shows no menu, meanwhile
+        onContextMenu={(event) => event.preventDefault()}
+      >
+        {spotlight ? (
+          <>
+            <div
+              aria-hidden={true}
+              style={{
+                position: 'fixed',
+                ...spotlight,
+                borderRadius: 6,
+                boxShadow: `0 0 0 2px var(--color-accent), 0 0 0 9999px ${DIM}`,
+                pointerEvents: 'none',
+              }}
+            />
+            <BasePopper
+              open={true}
+              role="presentation"
+              popperRef={popperRef}
+              anchorEl={virtualAnchor}
+              container={container}
+              placement={step.placement ?? 'bottom'}
+              modifiers={MODIFIERS}
+              style={{ zIndex: CUBE_TOUR_Z_INDEX + 1 }}
+            >
+              {card}
+            </BasePopper>
+          </>
+        ) : (
+          <div
+            className="flex items-center justify-center"
+            style={{ position: 'fixed', inset: 0, background: DIM }}
+          >
+            {card}
+          </div>
+        )}
+      </div>,
+      container,
+    );
+  },
+);

package/src/index.ts

@@ -63,6 +63,13 @@ export {
   isCubeProjectHost,
   isCubeSampleDataOffered,
 } from './stores/CubeHost.js';
+export {
+  buildLegendCubeLakehouseServices,
+  buildLegendCubeProjectCatalog,
+  LegendCubeHost,
+  type LegendCubeHostConfig,
+  type LegendCubeHostParts,
+} from './stores/LegendCubeHost.js';
 export { getCubeRememberedWarehouse } from './stores/CubeDataProductWarehouse.js';
 export {
   CUBE_LAMBDA_IMPORT_MESSAGE,

package/src/stores/CubeEditorState.ts

@@ -104,6 +104,7 @@ import {
 import { recheckCubeFunctionSources } from './CubeFunctionRecheck.js';
 import { CubeDataProductRuntimeState } from './CubeDataProductRuntimeState.js';
 import { CubeExamplesState } from './CubeExamplesState.js';
+import { CubeTourState } from './CubeTourState.js';
 import { CubeExportState } from './CubeExportState.js';
 import { CubeGridFetcher } from './CubeGridFetcher.js';
 import { CubeGridState } from './CubeGridState.js';
@@ -123,6 +124,8 @@ import { getCubeExtendUpstream } from './CubeExtendTyping.js';
 import { type CubeHost, loadCubeModelOutline } from './CubeHost.js';
 import { CubeNodeEditorState } from './CubeNodeEditorState.js';
 import { CubeShowPureState } from './CubeShowPureState.js';
+import { CubeJsonViewerState } from './variant/CubeJsonViewerState.js';
+import { CubeJsonExplorerState } from './variant/CubeJsonExplorerState.js';
 import { CubeLambdaImportState } from './CubeLambdaImportState.js';
 import { CubeSourcePickerState } from './CubeSourcePickerState.js';
 import { CubeSpecTransferState } from './CubeSpecTransferState.js';
@@ -199,6 +202,12 @@ export class CubeEditorState implements CommandRegistrar {
   readonly specTransfer: CubeSpecTransferState;
   readonly examples: CubeExamplesState;
   readonly showPure: CubeShowPureState;
+  /** The editor's guided tour (PLAN §11.21) */
+  readonly tour: CubeTourState;
+  /** Open JSON: a Variant cell's document as a tree (PLAN §11.20) */
+  readonly jsonViewer = new CubeJsonViewerState();
+  /** Explore JSON: a Variant column's fields, and the columns they can become (PLAN §11.20) */
+  readonly jsonExplorer: CubeJsonExplorerState;
   /** Import Pure: the lambda the page opened on, read into the cube (PLAN §11.18) */
   readonly lambdaImport: CubeLambdaImportState;
   readonly nodeEditor: CubeNodeEditorState;
@@ -316,6 +325,7 @@ export class CubeEditorState implements CommandRegistrar {
       connect: action,
       addNode: action,
       addConfiguredNode: action,
+      addConfiguredNodes: action,
       dropNode: action,
       removeNode: action,
       copiedNode: observable.ref,
@@ -368,6 +378,8 @@ export class CubeEditorState implements CommandRegistrar {
     this.specTransfer = new CubeSpecTransferState(this);
     this.examples = new CubeExamplesState(this);
     this.showPure = new CubeShowPureState(this);
+    this.tour = new CubeTourState(this);
+    this.jsonExplorer = new CubeJsonExplorerState(this);
     this.lambdaImport = new CubeLambdaImportState(this);
     this.nodeEditor = new CubeNodeEditorState(this);
     this.rechecking = reaction(
@@ -762,7 +774,7 @@ export class CubeEditorState implements CommandRegistrar {
     }
   }
 
-  /** One of Cube's dialogs is open: the source picker, Examples, the group rows' settings, Import or Export, Show Pure */
+  /** One of Cube's dialogs is open: the source picker, Examples, the group rows' settings, Import or Export, Show Pure, or the tour */
   get isDialogOpen(): boolean {
     return (
       this.sourcePicker.isOpen ||
@@ -770,7 +782,8 @@ export class CubeEditorState implements CommandRegistrar {
       this.grid.isSettingsShown ||
       this.grid.formatColumn !== undefined ||
       this.specTransfer.mode !== undefined ||
-      this.showPure.isOpen
+      this.showPure.isOpen ||
+      this.tour.isOpen
     );
   }
 
@@ -1505,11 +1518,29 @@ export class CubeEditorState implements CommandRegistrar {
    * read-only cube, or when the query can't take it.
    */
   addConfiguredNode(node: QueryNode, afterId?: string): void {
-    const { query } = this.document;
-    if (this.readOnly || !query.canAdd(node, afterId)) {
+    this.addConfiguredNodes([node], afterId);
+  }
+
+  /**
+   * Adds nodes made elsewhere one after another, the first spliced in after
+   * `afterId`, as one undo step, the last then running when that one did
+   * (Explore JSON's Extend then Explode Array). Does nothing in a read-only
+   * cube, or when the query can't take one of them.
+   */
+  addConfiguredNodes(nodes: readonly QueryNode[], afterId?: string): void {
+    if (this.readOnly || !nodes.length) {
       return;
     }
-    this.applyQuery(query.add(node, afterId));
+    let query = this.document.query;
+    let after = afterId;
+    for (const node of nodes) {
+      if (!query.canAdd(node, after)) {
+        return;
+      }
+      query = query.add(node, after);
+      after = node.id;
+    }
+    this.applyQuery(query);
   }
 
   /** Whether dropping a node on another does anything: connect it, or else move it after it */