@finos/legend-cube-builder 0.0.5 → 0.0.6

package/src/components/grid/CubeJsonExplorerDialog.tsx

@@ -0,0 +1,304 @@
+/**
+ * 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,
+  Dialog,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalFooterButton,
+  ModalHeader,
+} from '@finos/legend-art';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { CUBE_JSON_EXPLODE_OFFER_TITLE } from '../../__lib__/LegendCubeLabels.js';
+import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import type { CubeJsonExplorerState } from '../../stores/variant/CubeJsonExplorerState.js';
+import {
+  type CubeJsonField,
+  filterCubeJsonFields,
+} from '../../stores/variant/CubeJsonOffers.js';
+import { CubeButton } from '../CubeButton.js';
+import { CUBE_PRIMARY_BUTTON_DARK_MODE } from '../CubeDialogTheme.js';
+
+const format = (count: number): string => count.toLocaleString('en-US');
+
+/** A share, 0 to 1, as a whole percentage */
+const percentOf = (share: number): number => Math.round(share * 100);
+
+/** A field's name: its last key, or the column's for the column itself */
+const nameOf = (
+  explorer: CubeJsonExplorerState,
+  field: CubeJsonField,
+): string => field.path.at(-1) ?? explorer.column?.name ?? '';
+
+/** What was read, on one line: the first values or every row, and why it stopped */
+const CubeJsonExplorerStatus = observer(
+  (props: { explorer: CubeJsonExplorerState }) => {
+    const { explorer } = props;
+    const { sample, column } = explorer;
+    let text: string;
+    if (explorer.isReading) {
+      text = `Reading ${column?.name ?? ''}…`;
+    } else if (!sample) {
+      text = '';
+    } else {
+      const values = sample.rows - sample.unreadable;
+      const unreadable = sample.unreadable
+        ? ` (${format(sample.unreadable)} not JSON)`
+        : '';
+      text = sample.complete
+        ? `All ${format(sample.rows)} values read${unreadable}: the fields, their types and shares cover the whole column.`
+        : `The first ${format(sample.rows)} values read${unreadable}: the types and shares are from this sample.`;
+      if (values === 0) {
+        text = `No JSON in the ${format(sample.rows)} values read.`;
+      }
+    }
+    return (
+      <div className="mb-2 flex min-h-6 items-center gap-2 text-sm text-[var(--color-text-secondary)]">
+        <span role="status">{text}</span>
+        {explorer.isReading ? (
+          <CubeButton onClick={() => explorer.stop()}>Stop</CubeButton>
+        ) : (
+          sample &&
+          !sample.complete && (
+            <CubeButton
+              title="Read every value of the column, for the shape of the whole column: listed in Runs, and it can be stopped"
+              onClick={() => {
+                // a failed read shows its message in the dialog
+                flowResult(explorer.read(true)).catch(() => undefined);
+              }}
+            >
+              Read every row
+            </CubeButton>
+          )
+        )}
+      </div>
+    );
+  },
+);
+
+/** A field of the tree, and its fields, indented */
+const CubeJsonFieldRow = observer(
+  (props: {
+    explorer: CubeJsonExplorerState;
+    field: CubeJsonField;
+    depth: number;
+  }) => {
+    const { explorer, field, depth } = props;
+    const selected =
+      JSON.stringify(field.path) === JSON.stringify(explorer.selectedPath);
+    const share = percentOf(field.presence);
+    return (
+      <>
+        <button
+          type="button"
+          className={clsx(
+            'flex w-full items-baseline gap-2 py-0.5 pr-2 text-left hover:bg-[var(--color-bg-hover)]',
+            { 'bg-[var(--color-bg-selected)]': selected },
+          )}
+          style={{ paddingLeft: `${8 + depth * 16}px` }}
+          aria-pressed={selected}
+          aria-label={`Field ${[explorer.column?.name ?? '', ...field.path].join('.')}`}
+          onClick={() => explorer.select(field.path)}
+        >
+          <span className="break-all font-mono text-sm text-[var(--color-text-primary)]">
+            {nameOf(explorer, field)}
+          </span>
+          <span className="text-xs text-[var(--color-text-secondary)]">
+            {field.description}
+          </span>
+          {share < 100 && (
+            <span
+              className="ml-auto text-xs text-[var(--color-text-muted)]"
+              title={
+                field.path.length
+                  ? `In ${share}% of the objects it could be in`
+                  : `In ${share}% of the rows read`
+              }
+            >
+              {share}%
+            </span>
+          )}
+        </button>
+        {field.children.map((child) => (
+          <CubeJsonFieldRow
+            key={JSON.stringify(child.path)}
+            explorer={explorer}
+            field={child}
+            depth={depth + 1}
+          />
+        ))}
+      </>
+    );
+  },
+);
+
+/** The selected field: where it is, what it held, and the columns it can become, to tick */
+const CubeJsonFieldOffers = observer(
+  (props: { explorer: CubeJsonExplorerState }) => {
+    const { explorer } = props;
+    const field = explorer.selectedField;
+    if (!field) {
+      return null;
+    }
+    const { offers } = field;
+    const share = percentOf(field.presence);
+    return (
+      <div className="flex flex-col gap-2 p-2">
+        <div className="break-all font-mono text-sm text-[var(--color-text-primary)]">
+          {[explorer.column?.name ?? '', ...field.path].join(' › ')}
+        </div>
+        <div className="text-sm text-[var(--color-text-secondary)]">
+          {field.description}
+          {share < 100
+            ? ` · in ${share}% of ${field.path.length ? 'the objects it could be in' : 'the rows read'}`
+            : ''}
+        </div>
+        {field.topValues.length > 0 && (
+          <div className="break-all text-xs text-[var(--color-text-secondary)]">
+            Values seen: {field.topValues.join(', ')}
+          </div>
+        )}
+        {offers.length ? (
+          <div role="group" aria-label="Columns it can become">
+            {offers.map((offer) => (
+              <label
+                key={offer.key}
+                className="flex cursor-pointer items-baseline gap-2 py-0.5 text-sm"
+                title={offer.code ?? CUBE_JSON_EXPLODE_OFFER_TITLE}
+              >
+                <input
+                  type="checkbox"
+                  checked={explorer.isTicked(field.path, offer)}
+                  onChange={() => explorer.toggle(field.path, offer)}
+                />
+                <span className="text-[var(--color-text-primary)]">
+                  {offer.label}
+                </span>
+                <span className="text-xs text-[var(--color-text-muted)]">
+                  {offer.explode ? 'Explode Array' : offer.type} · {offer.name}
+                </span>
+              </label>
+            ))}
+          </div>
+        ) : (
+          <div className="text-sm text-[var(--color-text-muted)]">
+            {field.children.length
+              ? 'Pick one of its fields.'
+              : 'Nothing to make of it.'}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+/**
+ * Explore JSON (PLAN §11.20): a Variant column's fields, read from its first
+ * values or every row, each with what it held and how often; the selected
+ * field's offers, ticked and added as one Extend after the node that ran
+ */
+export const CubeJsonExplorerDialog = observer(
+  (props: { editorState: CubeEditorState }) => {
+    const { editorState } = props;
+    const explorer = editorState.jsonExplorer;
+    const { applicationStore } = editorState.host;
+    const darkMode =
+      !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
+    const fields = explorer.fields
+      ? filterCubeJsonFields(explorer.fields, explorer.search)
+      : undefined;
+    const count = explorer.tickedOffers.length;
+    const add = (): void => {
+      flowResult(explorer.add()).catch(applicationStore.alertUnhandledError);
+    };
+    return (
+      <Dialog open={explorer.isOpen} onClose={() => explorer.close()}>
+        <Modal darkMode={darkMode} className="w-[960px] max-w-full">
+          <ModalHeader>
+            <div className="modal__title">{`Explore JSON: ${explorer.column?.name ?? ''}`}</div>
+          </ModalHeader>
+          <ModalBody>
+            <div data-testid={LEGEND_CUBE_TEST_ID.JSON_EXPLORER}>
+              <CubeJsonExplorerStatus explorer={explorer} />
+              {explorer.error && (
+                <div
+                  role="alert"
+                  className="mb-2 break-words text-sm text-[var(--color-status-error)]"
+                >
+                  {explorer.error}
+                </div>
+              )}
+              {explorer.fields && (
+                <div className="grid h-[50vh] grid-cols-2 gap-2">
+                  <div className="flex min-h-0 flex-col rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-panel)]">
+                    <input
+                      className="m-1 rounded-sm border border-[var(--color-border-default)] px-1 text-sm"
+                      placeholder="Find a field"
+                      aria-label="Find a field"
+                      value={explorer.search}
+                      onChange={(event) =>
+                        explorer.setSearch(event.target.value)
+                      }
+                    />
+                    <div
+                      className="min-h-0 flex-1 overflow-auto"
+                      aria-label="Fields"
+                    >
+                      {fields ? (
+                        <CubeJsonFieldRow
+                          explorer={explorer}
+                          field={fields}
+                          depth={0}
+                        />
+                      ) : (
+                        <div className="p-2 text-sm text-[var(--color-text-muted)]">
+                          No field matches.
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <div className="min-h-0 overflow-auto rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-panel)]">
+                    <CubeJsonFieldOffers explorer={explorer} />
+                  </div>
+                </div>
+              )}
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              darkMode={CUBE_PRIMARY_BUTTON_DARK_MODE}
+              formatText={false}
+              text={count === 1 ? 'Add 1 column' : `Add ${count} columns`}
+              disabled={!count || explorer.isAdding || explorer.isReading}
+              onClick={add}
+            />
+            <ModalFooterButton
+              darkMode={darkMode}
+              formatText={false}
+              type="secondary"
+              text="Cancel"
+              onClick={() => explorer.close()}
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);

package/src/components/grid/CubeJsonViewerDialog.tsx

@@ -0,0 +1,190 @@
+/**
+ * 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,
+  CaretRightIcon,
+  Dialog,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalFooterButton,
+  ModalHeader,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import {
+  type CubeJsonNode,
+  formatCubeJsonPretty,
+} from '../../stores/variant/CubeJson.js';
+import { CUBE_PRIMARY_BUTTON_DARK_MODE } from '../CubeDialogTheme.js';
+
+/** Levels open when the dialog opens: the document and its first fields */
+const OPEN_DEPTH = 2;
+
+/** What a closed object or array holds, e.g. `{2 keys}`, `[3 items]` */
+const summarize = (node: CubeJsonNode): string =>
+  node.kind === 'object'
+    ? `{${node.entries.length} ${node.entries.length === 1 ? 'key' : 'keys'}}`
+    : node.kind === 'array'
+      ? `[${node.items.length} ${node.items.length === 1 ? 'item' : 'items'}]`
+      : '';
+
+/** A scalar, coloured by its kind: strings quoted, numbers as written */
+const CubeJsonScalar: React.FC<{ node: CubeJsonNode }> = ({ node }) =>
+  node.kind === 'string' ? (
+    <span className="break-all text-[var(--color-category-enumeration)]">
+      {JSON.stringify(node.value)}
+    </span>
+  ) : node.kind === 'number' ? (
+    <span className="text-[var(--color-category-primitive)]">{node.text}</span>
+  ) : node.kind === 'boolean' ? (
+    <span className="text-[var(--color-category-class)]">
+      {String(node.value)}
+    </span>
+  ) : (
+    <span className="text-[var(--color-text-muted)]">null</span>
+  );
+
+/** One entry of the tree: its key or index, and its value, open or closed */
+const CubeJsonTreeNode: React.FC<{
+  label: string | undefined;
+  node: CubeJsonNode;
+  depth: number;
+}> = ({ label, node, depth }) => {
+  const [open, setOpen] = useState(depth < OPEN_DEPTH);
+  const children =
+    node.kind === 'object'
+      ? node.entries.map(([key, value]) => [key, value] as const)
+      : node.kind === 'array'
+        ? node.items.map((item, index) => [`[${index}]`, item] as const)
+        : undefined;
+  const name =
+    label === undefined ? undefined : (
+      <span className="font-medium text-[var(--color-text-primary)]">
+        {label}:{' '}
+      </span>
+    );
+  if (!children) {
+    return (
+      <div className="py-px pl-5 font-mono text-sm">
+        {name}
+        <CubeJsonScalar node={node} />
+      </div>
+    );
+  }
+  return (
+    <div className="font-mono text-sm">
+      <button
+        type="button"
+        className="flex items-center gap-1 py-px text-left hover:bg-[var(--color-bg-hover)]"
+        aria-expanded={open}
+        aria-label={`${open ? 'Close' : 'Open'} ${label ?? 'the document'}`}
+        onClick={() => setOpen(!open)}
+      >
+        {open ? (
+          <CaretDownIcon aria-hidden={true} />
+        ) : (
+          <CaretRightIcon aria-hidden={true} />
+        )}
+        {name}
+        <span className="text-[var(--color-text-secondary)]">
+          {summarize(node)}
+        </span>
+      </button>
+      {open && (
+        <div className="ml-2 border-l border-[var(--color-border-subtle)] pl-2">
+          {children.map(([key, value]) => (
+            <CubeJsonTreeNode
+              key={key}
+              label={key}
+              node={value}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Open JSON (PLAN §11.20): a Variant cell's document as a tree, each object
+ * and array open to `OPEN_DEPTH` and opened or closed by a click, with Copy
+ * JSON (indented, numbers as written); text that isn't JSON is shown as it is
+ */
+export const CubeJsonViewerDialog = observer(
+  (props: { editorState: CubeEditorState }) => {
+    const { editorState } = props;
+    const viewer = editorState.jsonViewer;
+    const { applicationStore } = editorState.host;
+    const darkMode =
+      !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
+    const document = viewer.document;
+    const copy = (): void => {
+      const text = document
+        ? formatCubeJsonPretty(document)
+        : (viewer.text ?? '');
+      applicationStore.clipboardService
+        .copyTextToClipboard(text)
+        .catch(applicationStore.alertUnhandledError);
+    };
+    return (
+      <Dialog open={viewer.isOpen} onClose={() => viewer.close()}>
+        <Modal darkMode={darkMode} className="w-[720px] max-w-full">
+          <ModalHeader>
+            <div className="modal__title">{`JSON of ${viewer.column ?? ''}`}</div>
+          </ModalHeader>
+          <ModalBody>
+            <div
+              className="max-h-[60vh] overflow-auto rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-panel)] p-2"
+              aria-label="JSON document"
+              data-testid={LEGEND_CUBE_TEST_ID.JSON_VIEWER}
+            >
+              {document ? (
+                <CubeJsonTreeNode
+                  key={viewer.text}
+                  label={undefined}
+                  node={document}
+                  depth={0}
+                />
+              ) : (
+                <div className="break-all font-mono text-sm">{viewer.text}</div>
+              )}
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              darkMode={CUBE_PRIMARY_BUTTON_DARK_MODE}
+              formatText={false}
+              text="Copy JSON"
+              onClick={copy}
+            />
+            <ModalFooterButton
+              darkMode={darkMode}
+              formatText={false}
+              type="secondary"
+              text="Close"
+              onClick={() => viewer.close()}
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);

package/src/components/grid/CubeResultGrid.tsx

@@ -19,11 +19,12 @@ import {
   AggregationFunction,
   type CheckedDrilldown,
   type ColumnFormat,
+  type CubeType,
   DEFAULT_PRESENTATION,
   foldColumnName,
   getColumnFormat,
   type Presentation,
-  type TypeFamily,
+  TypeFamily,
 } from '@finos/legend-cube';
 import {
   DataGrid,
@@ -34,17 +35,30 @@ import {
   type DataGridGetContextMenuItemsParams,
   type DataGridIAggFuncParams,
   type DataGridMenuItemDef,
+  type DataGridOptions,
 } from '@finos/legend-lego/data-grid';
 import { flowResult } from 'mobx';
 import { memo, useCallback, useMemo } from 'react';
 import {
   CUBE_FORMAT_NOT_A_NUMBER,
+  CUBE_JSON_DISABLED_REASON,
   NULL_CELL_TEXT,
   READ_ONLY_CUBE_TITLE,
 } from '../../__lib__/LegendCubeLabels.js';
 import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
-import type { CubeResultValue } from '../../graph-manager/CubeEngine.js';
+import {
+  CUBE_TOUR_ANCHOR,
+  cubeTourAnchor,
+} from '../../__lib__/LegendCubeTour.js';
+import {
+  CubeEngineError,
+  type CubeResultValue,
+} from '../../graph-manager/CubeEngine.js';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import {
+  addCubeJsonParseColumn,
+  isCubeJsonDocumentText,
+} from '../../stores/variant/CubeJsonParse.js';
 import type { CubeExecutionResult } from '../../stores/CubeExecutionState.js';
 import { getCubeExportFileName } from '../../stores/CubeExportState.js';
 import {
@@ -170,6 +184,126 @@ const CUBE_GRID_MENU_ITEMS: readonly DataGridDefaultMenuItem[] = [
   'copyWithHeaders',
 ];
 
+/**
+ * Explore JSON… on a Variant column (PLAN §11.20), in its cells' menu and its
+ * header's: the column's fields, and the columns they can become
+ */
+export const getCubeExploreJsonItem = <Row extends CubeAnyRow>(
+  editorState: CubeEditorState,
+  columnName: string,
+): DataGridMenuItemDef<Row> => {
+  const column = editorState.execution.result?.schema.columns.find(
+    ({ name }) => name === columnName,
+  );
+  const reason = editorState.jsonExplorer.getDisabledReason();
+  return {
+    name: 'Explore JSON…',
+    disabled: reason !== undefined || !column,
+    ...(reason === undefined ? {} : { tooltip: reason }),
+    action: () => {
+      if (column && reason === undefined) {
+        flowResult(editorState.jsonExplorer.open(column)).catch(
+          editorState.host.applicationStore.alertUnhandledError,
+        );
+      }
+    },
+  };
+};
+
+/**
+ * A JSON cell's items (PLAN §11.20): on a Variant cell, Open JSON shows a run
+ * row's document as a tree (a group row's cell, or an empty one, has none to
+ * show), and Explore JSON…; on a text cell holding a JSON object or array,
+ * Parse as JSON
+ */
+const getCubeVariantMenuItems = <Row extends CubeAnyRow>(
+  editorState: CubeEditorState,
+  column: { readonly name: string; readonly type: CubeType },
+  cell: CubeResultValue,
+  kind: CubeGridCellKind,
+): DataGridMenuItemDef<Row>[] => {
+  // a text cell holding a JSON object or array: Parse as JSON
+  if (
+    column.type.family === TypeFamily.STRING &&
+    kind === CubeGridCellKind.VALUE &&
+    typeof cell === 'string' &&
+    isCubeJsonDocumentText(cell)
+  ) {
+    const reason = editorState.jsonExplorer.getDisabledReason();
+    const { applicationStore } = editorState.host;
+    return [
+      {
+        name: 'Parse as JSON',
+        disabled: reason !== undefined,
+        ...(reason === undefined ? {} : { tooltip: reason }),
+        action: () => {
+          if (reason === undefined) {
+            addCubeJsonParseColumn(editorState, column.name).catch(
+              (error: unknown) =>
+                applicationStore.notificationService.notifyError(
+                  error instanceof CubeEngineError
+                    ? error.firstLine
+                    : String(error),
+                ),
+            );
+          }
+        },
+      },
+    ];
+  }
+  if (column.type.family !== TypeFamily.VARIANT) {
+    return [];
+  }
+  const reason =
+    kind !== CubeGridCellKind.VALUE
+      ? CUBE_JSON_DISABLED_REASON.NOT_A_ROW
+      : typeof cell !== 'string'
+        ? CUBE_JSON_DISABLED_REASON.EMPTY
+        : undefined;
+  return [
+    {
+      name: 'Open JSON',
+      disabled: reason !== undefined,
+      ...(reason === undefined ? {} : { tooltip: reason }),
+      action: () => {
+        if (typeof cell === 'string') {
+          editorState.jsonViewer.open(column.name, cell);
+        }
+      },
+    },
+    getCubeExploreJsonItem<Row>(editorState, column.name),
+  ];
+};
+
+/** What ag-grid gives a column header's menu */
+export type CubeGridHeaderMenuParams<Row extends CubeAnyRow> = Parameters<
+  NonNullable<DataGridOptions<Row>['getMainMenuItems']>
+>[0];
+
+/**
+ * A column header's menu: ag-grid's own items, after Explore JSON… on a
+ * Variant column (PLAN §11.20)
+ */
+export const getCubeGridHeaderMenuItems = <Row extends CubeAnyRow>(
+  editorState: CubeEditorState,
+  params: CubeGridHeaderMenuParams<Row>,
+): (DataGridDefaultMenuItem | DataGridMenuItemDef<Row>)[] => {
+  const defaults = params.defaultItems;
+  const colId = params.column?.getColId();
+  const column = colId?.startsWith(COLUMN_ID_PREFIX)
+    ? editorState.execution.result?.schema.columns[
+        Number(colId.slice(COLUMN_ID_PREFIX.length))
+      ]
+    : undefined;
+  return column?.type.family === TypeFamily.VARIANT
+    ? [
+        getCubeExploreJsonItem<Row>(editorState, column.name),
+        'separator',
+        ...defaults,
+      ]
+    : defaults;
+};
+
 /**
  * The grid's context menu (spec §12.4, PLAN §11.10), curated: on a cell,
  * 'Drilldown by' its column and the quick actions, then a separator; then,
@@ -224,6 +358,7 @@ export const getCubeGridContextMenuItems = <Row extends CubeAnyRow>(
         action: () => quickAction.apply(),
       };
     }),
+    ...getCubeVariantMenuItems<Row>(editorState, column, cell, kind),
     'separator',
     {
       name: 'Format Column…',
@@ -497,6 +632,11 @@ export const CubeResultGrid = memo(
         getCubeGridContextMenuItems(editorState, params),
       [editorState],
     );
+    const getMainMenuItems = useCallback(
+      (params: CubeGridHeaderMenuParams<CubeRow>) =>
+        getCubeGridHeaderMenuItems(editorState, params),
+      [editorState],
+    );
     const columnDefs = useMemo(
       () =>
         buildCubeColumnDefs<CubeRow>(
@@ -529,6 +669,7 @@ export const CubeResultGrid = memo(
           'ag-theme-balham-dark': darkMode,
         })}
         data-testid={LEGEND_CUBE_TEST_ID.RESULT_GRID}
+        {...cubeTourAnchor(CUBE_TOUR_ANCHOR.RESULTS)}
       >
         <DataGrid<CubeRow>
           rowData={result.rows as CubeRow[]}
@@ -536,6 +677,7 @@ export const CubeResultGrid = memo(
           suppressFieldDotNotation={true}
           tooltipShowDelay={500}
           getContextMenuItems={getContextMenuItems}
+          getMainMenuItems={getMainMenuItems}
           // local mode (spec §12.1): ag-grid's own grouping, pivot and
           // filters on the run's rows, with their panels and totals
           defaultColDef={LOCAL_COLUMN_DEFAULTS}