@finos/legend-cube-builder 0.0.4 → 0.0.6

package/src/components/grid/CubeRunStatsPanel.tsx

@@ -0,0 +1,156 @@
+/**
+ * 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 { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import {
+  type CubeRunStat,
+  MAX_CUBE_RUN_STATS,
+} from '../../stores/CubeRunStatsState.js';
+import { CubeButton } from '../CubeButton.js';
+import { formatDuration } from './CubeGridValues.js';
+import { formatCubeSql, formatCubeSqlStatement } from './CubeSqlFormat.js';
+
+/** Why a run has no Pure nor JSON: it failed before its lambda was written */
+const NO_LAMBDA_TITLE = 'This run failed before its query was written';
+
+/** A run's time of day, as the viewer's clock shows it */
+const formatTime = (finishedAt: number): string =>
+  new Date(finishedAt).toLocaleTimeString();
+
+/**
+ * The page's latest runs, newest first (spec §12.6, PLAN §11.10): each
+ * Execute, fetch of the grid's rows, export and Pivot value load, with when
+ * it finished, how long it took, and its SQL to read and copy; its Pure, as
+ * it ran, and its lambda's JSON, and why it failed (PLAN §11.16)
+ */
+export const CubeRunStatsPanel = observer(
+  (props: { editorState: CubeEditorState }) => {
+    const { editorState } = props;
+    const { applicationStore } = editorState.host;
+    const { entries } = editorState.runStats;
+    const copy = (sql: readonly string[]): void => {
+      applicationStore.clipboardService
+        .copyTextToClipboard(formatCubeSql(sql))
+        .catch(applicationStore.alertUnhandledError);
+    };
+    const showPure = (entry: CubeRunStat): void => {
+      flowResult(editorState.showPure.openRun(entry)).catch(
+        applicationStore.alertUnhandledError,
+      );
+    };
+    const copyJson = (entry: CubeRunStat): void => {
+      if (entry.lambda !== undefined) {
+        applicationStore.clipboardService
+          .copyTextToClipboard(
+            editorState.host.engine.serializeLambda(entry.lambda),
+            { notifySuccessMessage: 'The lambda JSON was copied' },
+          )
+          .catch(applicationStore.alertUnhandledError);
+      }
+    };
+    return (
+      <div
+        className="max-h-60 shrink-0 overflow-auto border-b border-[var(--color-border-default)] p-2 text-base"
+        data-testid={LEGEND_CUBE_TEST_ID.RUN_STATS}
+      >
+        {!entries.length ? (
+          <div className="text-[var(--color-text-secondary)]">
+            Nothing has run yet.
+          </div>
+        ) : (
+          <ol className="flex flex-col gap-1" aria-label="Latest runs">
+            {entries.map((entry) => (
+              <li key={entry.id} className="flex flex-col">
+                <div className="flex items-center gap-3">
+                  <span className="min-w-0 flex-1 truncate" title={entry.label}>
+                    {entry.label}
+                  </span>
+                  <span className="text-[var(--color-text-secondary)]">
+                    {formatTime(entry.finishedAt)}
+                  </span>
+                  <span className="w-16 text-right text-[var(--color-text-secondary)]">
+                    {formatDuration(entry.durationMs)}
+                  </span>
+                  <CubeButton
+                    disabled={entry.lambda === undefined}
+                    title={
+                      entry.lambda === undefined
+                        ? NO_LAMBDA_TITLE
+                        : 'Show the Pure query this run sent'
+                    }
+                    onClick={() => showPure(entry)}
+                  >
+                    Show Pure
+                  </CubeButton>
+                  <CubeButton
+                    disabled={entry.lambda === undefined}
+                    title={
+                      entry.lambda === undefined
+                        ? NO_LAMBDA_TITLE
+                        : 'Copy the lambda this run sent, as the engine received it'
+                    }
+                    onClick={() => copyJson(entry)}
+                  >
+                    Copy JSON
+                  </CubeButton>
+                  <CubeButton
+                    disabled={!entry.sql.length}
+                    title={
+                      entry.sql.length
+                        ? 'Copy the SQL'
+                        : 'The engine gave no SQL for this run'
+                    }
+                    onClick={() => copy(entry.sql)}
+                  >
+                    Copy SQL
+                  </CubeButton>
+                </div>
+                {entry.error !== undefined && (
+                  <div className="whitespace-pre-wrap break-words text-sm text-[var(--color-status-error)]">
+                    {`Failed: ${entry.error}`}
+                  </div>
+                )}
+                {entry.sql.length > 0 && (
+                  <details>
+                    <summary className="cursor-pointer text-sm text-[var(--color-text-secondary)]">
+                      SQL
+                    </summary>
+                    {entry.sql.map((statement, index) => (
+                      <pre
+                        // statements hold no state, and the same one may run twice
+                        // eslint-disable-next-line react/no-array-index-key
+                        key={index}
+                        className="whitespace-pre-wrap font-mono text-sm"
+                      >
+                        {formatCubeSqlStatement(statement)}
+                      </pre>
+                    ))}
+                  </details>
+                )}
+              </li>
+            ))}
+          </ol>
+        )}
+        <div className="mt-1 text-sm text-[var(--color-text-muted)]">
+          {`The latest ${MAX_CUBE_RUN_STATS} runs on this page are kept.`}
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/grid/CubeServerSideGrid.tsx

@@ -0,0 +1,213 @@
+/**
+ * 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 { clsx } from '@finos/legend-art';
+import type { Presentation, TypeFamily } from '@finos/legend-cube';
+import {
+  DataGrid,
+  type DataGridCellRendererParams,
+  type DataGridColumnDefinition,
+  type DataGridGetContextMenuItemsParams,
+  type DataGridServerSideDatasource,
+  type DataGridServerSideGetRowsParams,
+} from '@finos/legend-lego/data-grid';
+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 {
+  CubeGridRowData,
+  CubeGridSortRequest,
+} from '../../stores/CubeGridState.js';
+import { formatCellValue } from './CubeGridValues.js';
+import {
+  buildCubeColumnDefs,
+  CUBE_EXCEL_STYLES,
+  type CubeGridHeaderMenuParams,
+  getCubeGridContextMenuItems,
+  getCubeGridHeaderMenuItems,
+  keepCubeColumnWidths,
+} from './CubeResultGrid.js';
+
+/** A group row's key as text, for export and copy: `(null)` for an empty one; nothing on a run row */
+const groupKeyText = (row: CubeGridRowData | undefined): string => {
+  if (!row?.isGroup) {
+    return '';
+  }
+  const key = row.keys.at(-1) ?? null;
+  return key === null ? NULL_CELL_TEXT : String(key);
+};
+
+/** A group's key in the groups' column, as its level's column shows a value */
+const CubeGroupKey: React.FC<
+  DataGridCellRendererParams<CubeGridRowData> & {
+    families: readonly TypeFamily[];
+  }
+> = (props) => {
+  const { data, families } = props;
+  if (!data?.isGroup) {
+    return null;
+  }
+  const key = data.keys.at(-1) ?? null;
+  const family = families[data.keys.length - 1];
+  if (key === null || family === undefined) {
+    return (
+      <span className="text-[var(--color-text-muted)]">{NULL_CELL_TEXT}</span>
+    );
+  }
+  return <>{formatCellValue(key, family)}</>;
+};
+
+/**
+ * The rows of a run in server-side mode (spec §12.1, PLAN §11.10): ag-grid's
+ * server-side row model asks for each level as it is shown, sorted by its
+ * headers, and the grid's state answers from the run on screen. With a
+ * drill-down, the levels are groups of the run's rows, each expandable down
+ * to the rows, shown in a column of their own with each group's count.
+ * Every level is answered whole, cut at the run's row limit, and ag-grid's
+ * blocks are taken from it.
+ */
+export const CubeServerSideGrid = memo(
+  (props: {
+    editorState: CubeEditorState;
+    result: CubeExecutionResult;
+    /** The drill-down's levels, as the run names them: the grid is built anew when they change */
+    levels: readonly string[];
+    presentation: Presentation;
+    darkMode: boolean;
+  }) => {
+    const { editorState, result, levels, presentation, darkMode } = props;
+    const { grid } = editorState;
+    // a new grid for each run and drill-down (its key): its own token, taken
+    // before ag-grid's first request, and its levels say anew
+    const [token] = useState(() => grid.beginGrid());
+    useEffect(() => {
+      grid.resetLevels();
+    }, [grid]);
+    const { drilldown } = grid;
+    const getContextMenuItems = useCallback(
+      (params: DataGridGetContextMenuItemsParams<CubeGridRowData>) =>
+        getCubeGridContextMenuItems(editorState, params),
+      [editorState],
+    );
+    const getMainMenuItems = useCallback(
+      (params: CubeGridHeaderMenuParams<CubeGridRowData>) =>
+        getCubeGridHeaderMenuItems(editorState, params),
+      [editorState],
+    );
+    const columnDefs = useMemo(
+      (): DataGridColumnDefinition<CubeGridRowData>[] =>
+        buildCubeColumnDefs<CubeGridRowData>(
+          result,
+          (row, position) => row?.cells[position],
+          presentation,
+          drilldown,
+        ),
+      [result, presentation, drilldown],
+    );
+    const families = useMemo(
+      () =>
+        levels.map(
+          (level) => result.schema.lookup(level)?.type.family as TypeFamily,
+        ),
+      [result, levels],
+    );
+    const datasource = useMemo(
+      (): DataGridServerSideDatasource<CubeGridRowData> => ({
+        getRows: (params: DataGridServerSideGetRowsParams<CubeGridRowData>) => {
+          const keys = params.parentNode.data?.keys ?? [];
+          const { startRow = 0, endRow, sortModel } = params.request;
+          grid
+            .loadRows(
+              result,
+              keys,
+              sortModel as readonly CubeGridSortRequest[],
+              token,
+            )
+            .then((rows) => {
+              // rows the grid no longer shows are left alone
+              if (rows) {
+                params.success({
+                  rowData: rows.slice(startRow, endRow ?? rows.length),
+                  rowCount: rows.length,
+                });
+              }
+            })
+            // the grid region shows the error
+            .catch(() => params.fail());
+        },
+      }),
+      [grid, result, token],
+    );
+    const hasLevels = levels.length > 0;
+    return (
+      <div
+        className={clsx('h-full w-full', {
+          'ag-theme-balham': !darkMode,
+          'ag-theme-balham-dark': darkMode,
+        })}
+        data-testid={LEGEND_CUBE_TEST_ID.RESULT_GRID}
+        {...cubeTourAnchor(CUBE_TOUR_ANCHOR.RESULTS)}
+      >
+        <DataGrid<CubeGridRowData>
+          rowModelType="serverSide"
+          serverSideDatasource={datasource}
+          columnDefs={columnDefs}
+          getRowId={(params) => params.data.id}
+          suppressFieldDotNotation={true}
+          tooltipShowDelay={500}
+          getContextMenuItems={getContextMenuItems}
+          getMainMenuItems={getMainMenuItems}
+          serverSideSortAllLevels={true}
+          excelStyles={CUBE_EXCEL_STYLES}
+          onColumnResized={(event) =>
+            keepCubeColumnWidths(editorState, result, event)
+          }
+          {...(hasLevels
+            ? {
+                treeData: true,
+                isServerSideGroup: (data: CubeGridRowData) => data.isGroup,
+                getServerSideGroupKey: (data: CubeGridRowData) => data.id,
+                getChildCount: (data: CubeGridRowData) => data.count ?? 0,
+                autoGroupColumnDef: {
+                  // the key, as export and copy read it, not the row's id
+                  valueGetter: (params: {
+                    data: CubeGridRowData | undefined;
+                  }) => groupKeyText(params.data),
+                  headerName: levels.join(' › '),
+                  // the groups stay in view as the grid scrolls sideways
+                  pinned: 'left' as const,
+                  headerTooltip: `The groups, by ${levels.join(', then ')}`,
+                  minWidth: 200,
+                  sortable: true,
+                  cellRendererParams: {
+                    innerRenderer: CubeGroupKey,
+                    innerRendererParams: { families },
+                  },
+                },
+              }
+            : {})}
+        />
+      </div>
+    );
+  },
+);
+CubeServerSideGrid.displayName = 'CubeServerSideGrid';

package/src/components/grid/CubeSqlDialog.tsx

@@ -0,0 +1,90 @@
+/**
+ * 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 {
+  Dialog,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalFooterButton,
+  ModalHeader,
+} from '@finos/legend-art';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
+import { observer } from 'mobx-react-lite';
+import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import { formatCubeSql } from './CubeSqlFormat.js';
+import { CUBE_PRIMARY_BUTTON_DARK_MODE } from '../CubeDialogTheme.js';
+
+/** The code editor's language: legend-code-editor's `CODE_EDITOR_LANGUAGE.SQL` */
+const SQL_LANGUAGE = 'sql';
+
+/** The SQL the run's database ran, formatted, with Copy: a dialog, as Legend Query's executed SQL */
+export const CubeSqlDialog = observer(
+  (props: { editorState: CubeEditorState; onClose: () => void }) => {
+    const { editorState, onClose } = props;
+    const { applicationStore } = editorState.host;
+    const sql = editorState.execution.result?.sql ?? [];
+    const darkMode =
+      !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
+    const text = formatCubeSql(sql);
+    const copySql = (): void => {
+      applicationStore.clipboardService
+        .copyTextToClipboard(text)
+        .catch(applicationStore.alertUnhandledError);
+    };
+    return (
+      <Dialog open={sql.length > 0} onClose={onClose}>
+        <Modal darkMode={darkMode} className="w-[960px] max-w-full">
+          <ModalHeader>
+            <div className="modal__title">Executed SQL</div>
+          </ModalHeader>
+          <ModalBody>
+            <div
+              className="h-[60vh] w-full overflow-hidden rounded-sm border border-[var(--color-border-default)]"
+              aria-label="Executed SQL"
+              data-testid={LEGEND_CUBE_TEST_ID.SQL_PANEL}
+            >
+              <CodeEditor
+                inputValue={text}
+                isReadOnly={true}
+                language={SQL_LANGUAGE}
+                hideMinimap={true}
+                hideActionBar={true}
+                extraEditorOptions={{ scrollBeyondLastLine: false }}
+              />
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              darkMode={CUBE_PRIMARY_BUTTON_DARK_MODE}
+              formatText={false}
+              text="Copy SQL"
+              onClick={copySql}
+            />
+            <ModalFooterButton
+              darkMode={darkMode}
+              formatText={false}
+              type="secondary"
+              text="Close"
+              onClick={onClose}
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);

package/src/components/grid/CubeSqlFormat.ts

@@ -0,0 +1,37 @@
+/**
+ * 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 { format } from 'sql-formatter';
+
+/** A statement laid out on lines, as Legend Query shows its SQL; as it came when it can't be read */
+export const formatCubeSqlStatement = (statement: string): string => {
+  try {
+    return format(statement, { language: 'sql' });
+  } catch {
+    return statement;
+  }
+};
+
+/** A run's statements, each formatted, numbered as Legend Query numbers them when there are several */
+export const formatCubeSql = (statements: readonly string[]): string =>
+  statements.length === 1
+    ? formatCubeSqlStatement(statements[0] as string)
+    : statements
+        .map(
+          (statement, index) =>
+            `--QUERY #${index + 1}\n${formatCubeSqlStatement(statement)}`,
+        )
+        .join('\n\n');

package/src/components/palette/CubePalette.tsx

@@ -18,30 +18,50 @@ import { ChevronLeftIcon, ChevronRightIcon, clsx } from '@finos/legend-art';
 import {
   type AnyNodeDefinition,
   DataProductAccessPointSource,
+  FunctionSource,
+  IngestDatasetSource,
+  ServiceSource,
 } from '@finos/legend-cube';
 import { observer } from 'mobx-react-lite';
 import { useRef } from 'react';
 import { useDrag } from 'react-dnd';
 import {
+  getCubeNodeBadge,
   OTHER_SOURCE_KIND_TITLE,
   READ_ONLY_CUBE_TITLE,
 } from '../../__lib__/LegendCubeLabels.js';
 import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
-import { addCubeNode } from '../../stores/CubeAddPlacement.js';
+import {
+  CUBE_TOUR_ANCHOR,
+  cubeTourAnchor,
+} from '../../__lib__/LegendCubeTour.js';
+import {
+  addCubeNode,
+  getCubeAddDatabaseProblem,
+} from '../../stores/CubeAddPlacement.js';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
 import {
   CUBE_DND_TYPE,
   type CubePaletteDragItem,
 } from '../canvas/CubeCanvasDnd.js';
 import { CubeNodeIcon } from '../CubeNodeIcon.js';
+import { CubePageMenu } from '../dev-settings/CubeDevSettings.js';
 
 /** Shown in the palette while the cube has no node yet (spec §17.2, worded for the canvas) */
 export const PALETTE_EMPTY_HINT = 'Drag items onto the canvas.';
 
+/** What a source item picks, for its tooltip: a table, unless its type says otherwise */
+const SOURCE_PICKS: Readonly<Record<string, string>> = {
+  [FunctionSource.TYPE]: 'a function',
+  [DataProductAccessPointSource.TYPE]: 'an access point',
+  [IngestDatasetSource.TYPE]: 'a data set',
+  [ServiceSource.TYPE]: 'a service',
+};
+
 /** What an item does, for its tooltip */
 const describeItem = (definition: AnyNodeDefinition): string =>
   definition.kind === 'source'
-    ? `Click, or drop it on the canvas, to pick ${definition.type === DataProductAccessPointSource.TYPE ? 'an access point' : 'a table'}`
+    ? `Click, or drop it on the canvas, to pick ${SOURCE_PICKS[definition.type] ?? 'a table'}`
     : 'Click, or drop it on the canvas, to add it after the selected node; drop it on a node to add it after that node';
 
 const CubePaletteItem = observer(
@@ -57,7 +77,12 @@ const CubePaletteItem = observer(
       !readOnly &&
       definition.kind === 'source' &&
       !editorState.canAddNode(definition.type);
-    const disabled = readOnly || otherKind;
+    // nor a transform its database can't run, after the selected node (PLAN §11.12)
+    const databaseProblem =
+      readOnly || definition.kind === 'source'
+        ? undefined
+        : getCubeAddDatabaseProblem(editorState, definition.type);
+    const disabled = readOnly || otherKind || databaseProblem !== undefined;
     const ref = useRef<HTMLDivElement>(null);
     const [, dragConnector] = useDrag<CubePaletteDragItem>(
       () => ({
@@ -65,13 +90,16 @@ const CubePaletteItem = observer(
         item: { nodeType: definition.type },
         canDrag: () =>
           !editorState.readOnly &&
-          (definition.kind !== 'source' ||
-            editorState.canAddNode(definition.type)),
+          (definition.kind === 'source'
+            ? editorState.canAddNode(definition.type)
+            : getCubeAddDatabaseProblem(editorState, definition.type) ===
+              undefined),
       }),
       [editorState, definition.type, definition.kind],
     );
     dragConnector(ref);
-    const label = `${definition.label}${definition.beta ? ' (BETA)' : ''}`;
+    const badge = getCubeNodeBadge(definition);
+    const label = `${definition.label}${badge ? ` (${badge})` : ''}`;
     const add = (): void => {
       if (!disabled) {
         addCubeNode(editorState, definition.type);
@@ -85,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
@@ -96,9 +129,11 @@ const CubePaletteItem = observer(
             ? READ_ONLY_CUBE_TITLE
             : otherKind
               ? OTHER_SOURCE_KIND_TITLE
-              : collapsed
-                ? `${label}: ${describeItem(definition)}`
-                : describeItem(definition)
+              : databaseProblem !== undefined
+                ? databaseProblem
+                : collapsed
+                  ? `${label}: ${describeItem(definition)}`
+                  : describeItem(definition)
         }
         onClick={add}
         onKeyDown={(event) => {
@@ -116,9 +151,9 @@ const CubePaletteItem = observer(
         {!collapsed && (
           <span className="min-w-0 flex-1 truncate">{definition.label}</span>
         )}
-        {!collapsed && definition.beta && (
+        {!collapsed && badge && (
           <span className="shrink-0 rounded-sm bg-[var(--color-accent)] px-1 text-xs font-medium text-[var(--color-text-on-accent)]">
-            BETA
+            {badge}
           </span>
         )}
       </div>
@@ -144,7 +179,14 @@ export const CubePalette = observer(
         )}
         data-testid={LEGEND_CUBE_TEST_ID.PALETTE}
       >
-        <div className="flex h-8 shrink-0 items-center border-b border-[var(--color-border-default)] bg-[var(--color-bg-panel-header)] px-2">
+        <div
+          className={clsx(
+            'flex shrink-0 items-center border-b border-[var(--color-border-default)] bg-[var(--color-bg-panel-header)] px-2',
+            // collapsed, the menu sits above the button that expands it
+            collapsed ? 'flex-col py-1' : 'h-8 gap-1',
+          )}
+        >
+          <CubePageMenu editorState={editorState} />
           {!collapsed && (
             <span className="min-w-0 flex-1 truncate text-base font-medium">
               Add to the query