@finos/legend-cube-builder 0.0.2 → 0.0.4

package/src/components/editors/CubeSourceEditor.tsx

@@ -23,11 +23,14 @@ import { guaranteeType } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import {
-  CUBE_PENDING_LABEL,
-  getColumnTypeLabel,
-} from '../../__lib__/LegendCubeLabels.js';
+  CUBE_DIRECT_CONNECTION_FALLBACK_LABEL,
+  getCubeConnectionSummaryLabel,
+} from '../../__lib__/LegendCubeDirectConnectionLabels.js';
+import { CUBE_PENDING_LABEL } from '../../__lib__/LegendCubeLabels.js';
+import { getCubeDirectConnection } from '../../graph-manager/CubeDirectConnection.js';
+import { getCubeProjectCoordinates } from '../../graph-manager/CubeProject.js';
 import { CubeButton } from '../CubeButton.js';
-import { CubeColumnTypeIcon } from './CubeColumnPicker.js';
+import { CubeSchemaColumnsTable } from '../CubeSchemaColumnsTable.js';
 import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
 
 /**
@@ -40,12 +43,43 @@ export const CubeSourceEditor = observer((props: CubeNodeEditorProps) => {
   const source = guaranteeType(props.draft.original, RelationalTableSource);
   const refreshing = editorState.isPendingSource(source);
   const { resolution } = source;
-  const warnings = editorState.warnings.get(source.key) ?? [];
+  // a direct cube's tables all belong to a Database Cube builds: its
+  // connection says where they come from (PLAN §6.8)
+  const model = editorState.document.context?.model;
+  const connection = model ? getCubeDirectConnection(model) : undefined;
+  const description =
+    connection &&
+    editorState.host.connectionExplorer?.describeConnection(connection);
+  // a project cube's tables come from its project at the saved version (PLAN §6.3)
+  const project = model ? getCubeProjectCoordinates(model) : undefined;
   return (
     <div className="relative flex flex-col gap-2">
       <dl className="grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 text-base">
-        <dt className="text-[var(--color-text-secondary)]">Database</dt>
-        <dd className="min-w-0 break-all">{source.database}</dd>
+        {connection ? (
+          <>
+            <dt className="text-[var(--color-text-secondary)]">Connection</dt>
+            <dd className="min-w-0 break-words">
+              {description?.supported
+                ? getCubeConnectionSummaryLabel(description.summary)
+                : CUBE_DIRECT_CONNECTION_FALLBACK_LABEL}
+            </dd>
+          </>
+        ) : (
+          <>
+            {project && (
+              <>
+                <dt className="text-[var(--color-text-secondary)]">Project</dt>
+                <dd className="min-w-0 break-all">
+                  {project.groupId}:{project.artifactId}
+                </dd>
+                <dt className="text-[var(--color-text-secondary)]">Version</dt>
+                <dd>{project.versionId}</dd>
+              </>
+            )}
+            <dt className="text-[var(--color-text-secondary)]">Database</dt>
+            <dd className="min-w-0 break-all">{source.database}</dd>
+          </>
+        )}
         <dt className="text-[var(--color-text-secondary)]">Schema</dt>
         <dd>{getRelationalDisplayName(source.schema)}</dd>
         <dt className="text-[var(--color-text-secondary)]">Table</dt>
@@ -70,40 +104,8 @@ export const CubeSourceEditor = observer((props: CubeNodeEditorProps) => {
         )}
       </div>
       <PanelLoadingIndicator isLoading={refreshing} />
-      {warnings.map((warning) => (
-        <div
-          key={warning}
-          className="text-sm text-[var(--color-status-warn)]"
-          role="status"
-        >
-          {warning}
-        </div>
-      ))}
       {resolution.kind === 'resolved' ? (
-        <table className="w-full text-base" aria-label="Columns">
-          <thead>
-            <tr className="text-left text-[var(--color-text-secondary)]">
-              <th className="font-normal">Column</th>
-              <th className="font-normal">Type</th>
-            </tr>
-          </thead>
-          <tbody>
-            {resolution.schema.columns.map((column) => (
-              <tr key={column.name}>
-                <td className="break-all pr-2">{column.name}</td>
-                <td title={column.type.fullName}>
-                  <span className="flex items-center gap-1">
-                    <CubeColumnTypeIcon
-                      type={column.type}
-                      className="text-[var(--color-text-secondary)]"
-                    />
-                    {getColumnTypeLabel(column)}
-                  </span>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
+        <CubeSchemaColumnsTable schema={resolution.schema} />
       ) : (
         <div className="text-base text-[var(--color-text-secondary)]">
           {resolution.kind === 'failed'

package/src/components/editors/CubeValueEditor.tsx

@@ -283,7 +283,8 @@ export const CubeValueEditor: React.FC<{
   return (
     <ul aria-label={label} className="flex min-w-0 flex-1 flex-col gap-1">
       {items.map((item, index) => (
-        // values can repeat, and they hold no state of their own
+        // values can repeat and have no id. A row's only state is its text
+        // while typed, which blur commits before another row can be removed
         // eslint-disable-next-line react/no-array-index-key
         <li key={index} className="flex items-center gap-1">
           <CubeSingleValueEditor

package/src/components/editors/CubeWarehouseControl.tsx

@@ -0,0 +1,113 @@
+/**
+ * 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 type { CubeContext } from '@finos/legend-cube';
+import { observer } from 'mobx-react-lite';
+import { useEffect, useRef, useState } from 'react';
+import {
+  CUBE_WAREHOUSE_APPLY_TITLE,
+  getCubeWarehouseErrorHint,
+} from '../../__lib__/LegendCubeDataProductLabels.js';
+import { READ_ONLY_CUBE_TITLE } from '../../__lib__/LegendCubeLabels.js';
+import {
+  CubeDataProductRunErrorKind,
+  type CubeDataProductRuntimeState,
+} from '../../stores/CubeDataProductRuntimeState.js';
+import { CubeButton } from '../CubeButton.js';
+
+/**
+ * The warehouse a lakehouse cube runs on, edited in place: Apply, Enter, or
+ * closing the node editor, runs the cube on another one, as one undo step. Text typed but not
+ * applied belongs to the cube's context it was typed on; once the context
+ * changes, e.g. on Undo, the control shows the cube's warehouse again.
+ * Below it, after a run the warehouse failed, what to do about it
+ */
+export const CubeWarehouseControl = observer(
+  (props: { runtime: CubeDataProductRuntimeState; readOnly: boolean }) => {
+    const { runtime, readOnly } = props;
+    const { context } = runtime.editorState.document;
+    const current = runtime.effectiveWarehouse ?? '';
+    const [draft, setDraft] = useState<
+      { context: CubeContext | undefined; text: string } | undefined
+    >();
+    const text =
+      draft !== undefined && draft.context === context ? draft.text : current;
+    const disabled = readOnly || !runtime.canEditWarehouse;
+    const canApply =
+      !disabled && text.trim().length > 0 && text.trim() !== current;
+    const apply = (): void => {
+      if (canApply && runtime.setWarehouse(text)) {
+        setDraft(undefined);
+      }
+    };
+    // closing the node editor applies, as for every edit (PLAN §11.8),
+    // without remembering it for the viewer's next cubes: Undo takes it back
+    const latest = useRef({ text, canApply });
+    latest.current = { text, canApply };
+    useEffect(
+      () =>
+        runtime.editorState.nodeEditor.addFlusher(
+          () => {
+            if (
+              latest.current.canApply &&
+              runtime.setWarehouse(latest.current.text, { remember: false })
+            ) {
+              setDraft(undefined);
+            }
+          },
+          { isPending: () => latest.current.canApply },
+        ),
+      [runtime],
+    );
+    return (
+      <>
+        <span className="flex min-w-0 items-center gap-1">
+          <input
+            className="h-6 min-w-0 flex-1 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base text-[var(--color-text-primary)] disabled:text-[var(--color-text-secondary)]"
+            aria-label="Warehouse"
+            spellCheck={false}
+            disabled={disabled}
+            title={readOnly ? READ_ONLY_CUBE_TITLE : undefined}
+            value={text}
+            onChange={(event) =>
+              setDraft({ context, text: event.target.value })
+            }
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                apply();
+              }
+            }}
+          />
+          <CubeButton
+            title={readOnly ? READ_ONLY_CUBE_TITLE : CUBE_WAREHOUSE_APPLY_TITLE}
+            disabled={!canApply}
+            onClick={apply}
+          >
+            Apply
+          </CubeButton>
+        </span>
+        {runtime.runErrorKind === CubeDataProductRunErrorKind.WAREHOUSE && (
+          <span
+            className="mt-1 block text-sm text-[var(--color-status-error)]"
+            role="alert"
+          >
+            {getCubeWarehouseErrorHint(current, runtime.canEditWarehouse)}
+          </span>
+        )}
+      </>
+    );
+  },
+);

package/src/components/editors/useCubeNodeEditorDismiss.ts

@@ -0,0 +1,103 @@
+/**
+ * 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 { useEffect } from 'react';
+import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import { returnFocusToCubeCanvasNode } from '../canvas/CubeCanvasNodeFocus.js';
+
+/**
+ * What a press outside the floating editor leaves alone (PLAN §11.8):
+ * a node, whose click applies and opens it or selects it; the canvas's
+ * background, controls and minimap, so panning or zooming keeps the editor
+ * (a plain click on the background closes it, through the canvas); the
+ * splitter above the results, as the editor follows its node when the
+ * canvas is resized; and MUI's layers, where a dropdown, menu or dialog
+ * opened from the editor lives.
+ */
+const LEFT_ALONE =
+  '.react-flow__node, .react-flow__pane, .react-flow__controls, .react-flow__minimap, .reflex-splitter, .MuiModal-root, .MuiPopover-root, .MuiPopper-root';
+
+/** An Escape there is the results grid's, e.g. closing its menu */
+const GRID_LAYERS = '.ag-popup, .ag-menu';
+
+/** Whether a press on the target, outside the editor, closes it */
+export const isCubeNodeEditorDismissedBy = (
+  target: EventTarget | null,
+  editor: Element | null,
+): boolean =>
+  target instanceof Element &&
+  !editor?.contains(target) &&
+  target.closest(LEFT_ALONE) === null;
+
+/**
+ * Closes the floating node editor, applying its edits, on a press of the
+ * main button outside it, or on Escape (PLAN §11.8, spec §17.5). A press
+ * closes it as it goes down, before the click, so a button pressed outside
+ * (Execute, Undo) acts on the applied edits. Nothing closes it while a Cube
+ * dialog is open or something opened from it holds it; an Escape a field or
+ * a dialog already used is theirs, and so is one in the results grid's menu.
+ * A surface opened from the editor and shown elsewhere (a portal) must be
+ * one of MUI's layers, or hold the editor open (`nodeEditor.holdOpen()`),
+ * or a press in it closes the editor.
+ */
+export const useCubeNodeEditorDismiss = (
+  editorState: CubeEditorState,
+  editorRef: React.RefObject<Element | null>,
+): void => {
+  const isOpen = editorState.nodeEditor.nodeId !== undefined;
+  useEffect(() => {
+    if (!isOpen) {
+      return undefined;
+    }
+    const canDismiss = (): boolean =>
+      !editorState.isDialogOpen && !editorState.nodeEditor.isHeld;
+    const onPointerDown = (event: PointerEvent): void => {
+      if (
+        event.button === 0 &&
+        // on macOS, Ctrl with the main button is a right-click
+        !event.ctrlKey &&
+        canDismiss() &&
+        isCubeNodeEditorDismissedBy(event.target, editorRef.current)
+      ) {
+        editorState.nodeEditor.finish();
+      }
+    };
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (
+        event.key === 'Escape' &&
+        !event.defaultPrevented &&
+        !(
+          event.target instanceof Element &&
+          event.target.closest(GRID_LAYERS) !== null
+        ) &&
+        canDismiss()
+      ) {
+        const { nodeId } = editorState.nodeEditor;
+        const focused = document.activeElement;
+        if (editorState.nodeEditor.finish() && nodeId !== undefined) {
+          returnFocusToCubeCanvasNode(nodeId, editorRef.current, focused);
+        }
+      }
+    };
+    // capturing, so a press that something else stops still closes it
+    document.addEventListener('pointerdown', onPointerDown, true);
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown, true);
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [editorState, editorRef, isOpen]);
+};

package/src/components/examples/CubeExamplesDialog.tsx

@@ -0,0 +1,199 @@
+/**
+ * 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 {
+  ChartIcon,
+  ChevronRightIcon,
+  Dialog,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalFooterButton,
+  ModalHeader,
+  ShoppingCartIcon,
+  TrophyIcon,
+} from '@finos/legend-art';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { Fragment, useMemo } from 'react';
+import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import type {
+  CubeExample,
+  CubeExampleDataset,
+} from '../../stores/CubeExamples.js';
+import { CubeNodeIcon } from '../CubeNodeIcon.js';
+
+/** Each dataset's icon, by dataset id */
+const DATASET_ICONS: Readonly<
+  Record<string, React.FC<{ className?: string }>>
+> = {
+  northwind: ShoppingCartIcon,
+  sports: TrophyIcon,
+  trades: ChartIcon,
+};
+
+const DatasetIcon = (props: { dataset: string; className: string }) => {
+  const Icon = DATASET_ICONS[props.dataset] ?? ChartIcon;
+  return <Icon className={props.className} />;
+};
+
+const CARD =
+  'flex h-full w-full flex-col gap-1 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-panel)] p-3 text-left hover:border-[var(--color-accent)] hover:bg-[var(--color-bg-hover)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--color-accent)]';
+
+/** A dataset: starts a new cube on its model */
+const DatasetCard = observer(
+  (props: { editorState: CubeEditorState; dataset: CubeExampleDataset }) => {
+    const { editorState, dataset } = props;
+    return (
+      <button
+        type="button"
+        className={`${CARD} border-l-4 border-l-[var(--color-accent)]`}
+        title={`Start a new cube on ${dataset.name}, from its first table`}
+        onClick={() => editorState.examples.startOnDataset(dataset)}
+      >
+        <span className="flex items-center gap-2 text-lg font-medium text-[var(--color-text-primary)]">
+          <DatasetIcon
+            dataset={dataset.id}
+            className="shrink-0 text-xl text-[var(--color-accent)]"
+          />
+          {dataset.name}
+        </span>
+        <span className="text-base text-[var(--color-text-secondary)]">
+          {dataset.description}
+        </span>
+        <span className="mt-auto pt-1 text-sm text-[var(--color-text-muted)]">
+          {dataset.tables.join(' · ')}
+        </span>
+        <span className="text-sm text-[var(--color-accent)]">
+          Start a new cube →
+        </span>
+      </button>
+    );
+  },
+);
+
+/** An example cube: opens in place of the cube and runs */
+const ExampleCard = observer(
+  (props: { editorState: CubeEditorState; example: CubeExample }) => {
+    const { editorState, example } = props;
+    const { registry } = editorState;
+    // the example's nodes, in order, as their icons
+    const steps = useMemo(
+      () =>
+        example
+          .createDocument()
+          .query.nodes.map((node) => registry.get(node.type))
+          .filter((definition) => definition !== undefined)
+          .map((definition) => ({
+            icon: definition.icon,
+            label: definition.label,
+          })),
+      [example, registry],
+    );
+    return (
+      <button
+        type="button"
+        className={CARD}
+        title={`Open ${example.name}: it replaces this cube and runs`}
+        onClick={() => {
+          flowResult(editorState.examples.openExample(example)).catch(
+            editorState.host.applicationStore.alertUnhandledError,
+          );
+        }}
+      >
+        <span className="flex items-center gap-2 text-base font-medium text-[var(--color-text-primary)]">
+          <DatasetIcon
+            dataset={example.dataset}
+            className="shrink-0 text-[var(--color-text-secondary)]"
+          />
+          {example.name}
+        </span>
+        <span className="text-sm text-[var(--color-text-secondary)]">
+          {example.description}
+        </span>
+        <span
+          className="mt-auto flex flex-wrap items-center gap-1 pt-2 text-[var(--color-text-muted)]"
+          aria-label={`Steps: ${steps.map((step) => step.label).join(', ')}`}
+        >
+          {steps.map((step, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <Fragment key={index}>
+              {index > 0 && <ChevronRightIcon className="text-xs" />}
+              <span title={step.label}>
+                <CubeNodeIcon icon={step.icon} />
+              </span>
+            </Fragment>
+          ))}
+        </span>
+      </button>
+    );
+  },
+);
+
+/**
+ * The Examples dialog (PLAN §6.9): a row per sample dataset, its card first,
+ * then its example cubes. Either replaces the cube, and Undo brings it back.
+ */
+export const CubeExamplesDialog = observer(
+  (props: { editorState: CubeEditorState }) => {
+    const { editorState } = props;
+    const { examples } = editorState;
+    const { applicationStore } = editorState.host;
+    const darkMode =
+      !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
+    return (
+      <Dialog open={examples.isOpen} onClose={() => examples.close()}>
+        <Modal darkMode={darkMode} className="w-[960px] max-w-full">
+          <ModalHeader>
+            <div className="modal__title">Examples</div>
+          </ModalHeader>
+          <ModalBody>
+            <div className="mb-3 text-base text-[var(--color-text-secondary)]">
+              Sample data to explore. Open an example cube, or start a new cube
+              on a dataset. Either replaces this cube: Undo brings it back.
+            </div>
+            <div
+              className="grid grid-cols-1 gap-3 sm:grid-cols-3"
+              aria-label="Examples"
+            >
+              {examples.datasets.map((dataset) => (
+                <Fragment key={dataset.id}>
+                  <DatasetCard editorState={editorState} dataset={dataset} />
+                  {examples.examplesOf(dataset).map((example) => (
+                    <ExampleCard
+                      key={example.id}
+                      editorState={editorState}
+                      example={example}
+                    />
+                  ))}
+                </Fragment>
+              ))}
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              darkMode={darkMode}
+              formatText={false}
+              type="secondary"
+              text="Close"
+              onClick={() => examples.close()}
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);

package/src/components/grid/CubeGridRegion.tsx

@@ -15,10 +15,10 @@
  */
 
 import { PanelLoadingIndicator } from '@finos/legend-art';
-import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
 import { EXECUTE_SHORTCUT_LABEL } from '../../__lib__/LegendCubeCommand.js';
+import { getCubeWarehouseErrorHint } from '../../__lib__/LegendCubeDataProductLabels.js';
 import {
   CUBE_PENDING_LABEL,
   formatDisabledReasons,
@@ -27,6 +27,10 @@ import {
   ROW_LIMIT_WARNING_THRESHOLD,
 } from '../../__lib__/LegendCubeLabels.js';
 import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import {
+  CubeDataProductRunErrorKind,
+  type CubeDataProductRuntimeState,
+} from '../../stores/CubeDataProductRuntimeState.js';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
 import { CubeButton } from '../CubeButton.js';
 import { CubeResultGrid } from './CubeResultGrid.js';
@@ -91,15 +95,9 @@ const CubeGridToolbar = observer(
     onToggleSql: () => void;
   }) => {
     const { editorState, showSql, onToggleSql } = props;
-    const { execution, host } = editorState;
-    const { applicationStore } = host;
+    const { execution } = editorState;
     const { result } = execution;
     const disabledReasons = execution.disabledReasons;
-    const execute = (): void => {
-      flowResult(execution.execute()).catch(
-        applicationStore.alertUnhandledError,
-      );
-    };
     return (
       <div
         className="flex h-8 shrink-0 items-center gap-3 border-b border-[var(--color-border-default)] bg-[var(--color-bg-panel-header)] px-2"
@@ -118,7 +116,8 @@ const CubeGridToolbar = observer(
                 ? `${formatDisabledReasons(disabledReasons)}\n(${EXECUTE_SHORTCUT_LABEL})`
                 : `Run the query up to the selected node (${EXECUTE_SHORTCUT_LABEL})`
             }
-            onClick={execute}
+            // the node editor's edits apply first, so they run (spec §17.5)
+            onClick={() => editorState.executeEdited()}
           >
             Execute
           </CubeButton>
@@ -132,7 +131,7 @@ const CubeGridToolbar = observer(
         {execution.isStale && (
           <span
             className="rounded-sm bg-[var(--color-status-warn-bg)] px-1 text-base text-[var(--color-status-warn)]"
-            title="The query or the row limit changed since this run"
+            title="The query, the warehouse or the row limit changed since this run"
           >
             Stale: execute again to refresh
           </span>
@@ -194,6 +193,42 @@ const CubeSqlPanel = observer((props: { editorState: CubeEditorState }) => {
   );
 });
 
+/**
+ * On a data product cube, what to do about a run refused for its warehouse,
+ * or for lack of access to the data: links to ask for it in the marketplace
+ */
+const CubeDataProductRunErrorHelp = observer(
+  (props: { runtime: CubeDataProductRuntimeState }) => {
+    const { runtime } = props;
+    if (runtime.runErrorKind === CubeDataProductRunErrorKind.WAREHOUSE) {
+      return (
+        <div className="mt-1 text-[var(--color-text-secondary)]">
+          {getCubeWarehouseErrorHint(
+            runtime.effectiveWarehouse ?? '',
+            runtime.canEditWarehouse,
+          )}
+        </div>
+      );
+    }
+    const links = runtime.accessRequestLinks;
+    return links.length ? (
+      <div className="mt-1 flex flex-wrap gap-x-3">
+        {links.map((link) => (
+          <a
+            key={link.key}
+            className="text-[var(--color-accent)] underline"
+            href={link.url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {link.label}
+          </a>
+        ))}
+      </div>
+    ) : null;
+  },
+);
+
 const CubeExecutionError = observer(
   (props: { editorState: CubeEditorState }) => {
     const error = props.editorState.execution.error;
@@ -226,6 +261,9 @@ const CubeExecutionError = observer(
             </pre>
           </details>
         )}
+        <CubeDataProductRunErrorHelp
+          runtime={props.editorState.dataProductRuntime}
+        />
       </div>
     );
   },
@@ -259,6 +297,7 @@ export const CubeGridRegion = observer(
           ) : execution.result ? (
             <CubeResultGrid
               key={execution.result.id}
+              editorState={editorState}
               result={execution.result}
               darkMode={darkMode}
             />