@finos/legend-cube-builder 0.0.4 → 0.0.5

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

@@ -28,16 +28,19 @@ import type {
   CubeIngestTabError,
   CubeIngestTabState,
 } from '../../stores/source-picker/CubeIngestTabState.js';
+import {
+  CUBE_PICKER_LIST_CLASS,
+  CubePickerListItem,
+} from './CubePickerListItem.js';
 import { CubeButton } from '../CubeButton.js';
 import { CubeSchemaColumnsTable } from '../CubeSchemaColumnsTable.js';
 import { CubePickerStep } from './CubePickerStep.js';
+import { CUBE_PROJECT_SOURCE_LABEL } from '../../__lib__/LegendCubeProjectSourceLabels.js';
+import { isCubeProjectHost } from '../../stores/CubeHost.js';
 
 const INPUT_CLASS =
   'h-7 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)]';
 
-const LIST_ITEM_CLASS =
-  'flex w-full items-center gap-2 px-2 py-1 text-left text-base enabled:hover:bg-[var(--color-bg-hover)] disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]';
-
 /** An error as the tab shows it: its first line, the rest on demand, and an action when it has one */
 const CubeIngestTabAlert: React.FC<{
   error: CubeIngestTabError;
@@ -58,6 +61,121 @@ const CubeIngestTabAlert: React.FC<{
   </div>
 );
 
+/**
+ * A definition's data sets, as both Ingest screens list them, each picked or
+ * ticked to add; the one picked last previewed
+ */
+const CubeIngestDataSets = observer((props: { tab: CubeIngestTabState }) => {
+  const { tab } = props;
+  return (
+    <>
+      {tab.isDescribing && (
+        <div className="text-base text-[var(--color-text-secondary)]">
+          reading the definition
+        </div>
+      )}
+      {tab.dataSets && (
+        <ul
+          className={`max-h-40 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>
+          ))}
+        </ul>
+      )}
+      {tab.dataSet?.schema && (
+        <section aria-label="Data set preview">
+          <CubeSchemaColumnsTable schema={tab.dataSet.schema} />
+        </section>
+      )}
+    </>
+  );
+});
+
+/**
+ * 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
+ */
+const CubeProjectIngestTab = observer((props: { tab: CubeIngestTabState }) => {
+  const { tab } = props;
+  const candidates = tab.definitionList?.candidates;
+  return (
+    <div className="flex flex-col gap-2">
+      <span
+        className="text-sm text-[var(--color-text-muted)]"
+        aria-label="Runtime"
+      >
+        {tab.environment
+          ? CUBE_PROJECT_SOURCE_LABEL.RUNS_ON(tab.environment.name)
+          : tab.isLoadingEnvironment
+            ? CUBE_PROJECT_SOURCE_LABEL.READING_RUNTIME
+            : ''}
+      </span>
+      {tab.isListingDefinitions && (
+        <div className="text-base text-[var(--color-text-secondary)]">
+          listing ingest definitions
+        </div>
+      )}
+      {candidates && (
+        <ul
+          className={`max-h-40 overflow-auto ${CUBE_PICKER_LIST_CLASS}`}
+          aria-label="Ingest definitions"
+        >
+          {candidates.map((candidate) => (
+            <CubePickerListItem
+              key={candidate.urn}
+              picked={tab.definition?.urn === candidate.urn}
+              title={candidate.definition}
+              onPick={() => tab.selectDefinition(candidate)}
+            >
+              <span className="shrink-0">{candidate.name}</span>
+              <span className="min-w-0 flex-1 truncate text-sm text-[var(--color-text-muted)]">
+                {candidate.definition}
+              </span>
+            </CubePickerListItem>
+          ))}
+        </ul>
+      )}
+      {candidates?.length === 0 && (
+        <span className="text-sm text-[var(--color-text-muted)]">
+          {CUBE_PROJECT_SOURCE_LABEL.NO_INGEST_DEFINITIONS}
+        </span>
+      )}
+      <CubeIngestDataSets tab={tab} />
+      {tab.isAdding && (
+        <div className="text-base text-[var(--color-text-secondary)]">
+          {CUBE_PENDING_LABEL.RESOLVING_SOURCE}
+        </div>
+      )}
+      {tab.error !== undefined && (
+        <CubeIngestTabAlert error={tab.error}>
+          <div>
+            <CubeButton onClick={() => tab.retry()}>Retry</CubeButton>
+          </div>
+        </CubeIngestTabAlert>
+      )}
+    </div>
+  );
+});
+
 /**
  * The source dialog's Ingest tab (PLAN §6.7): Mode, the viewer's
  * environment (read-only), a producer deployment, one of its definitions,
@@ -71,22 +189,31 @@ export const CubeIngestTab = observer((props: { tab: CubeIngestTabState }) => {
   const dropped = getDroppedDefinitionsLabel(
     tab.definitionList?.droppedCount ?? 0,
   );
+  // a host reading one project's definitions, as Studio, lists them alone:
+  // no class, deployment or warehouse to pick, its runtime named instead
+  const projectScoped = isCubeProjectHost(tab.editorState.host);
+  if (projectScoped) {
+    return <CubeProjectIngestTab tab={tab} />;
+  }
   return (
     <div className="flex flex-col gap-2">
-      <CubePickerStep
-        label="Mode"
-        value={tab.environmentType}
-        options={(tab.catalog?.environmentTypes ?? []).map((type) => ({
-          value: type,
-          label: CUBE_DATA_PRODUCT_ENVIRONMENT_LABELS[type],
-        }))}
-        disabled={settings !== undefined}
-        onChange={(value) => {
-          if (value) {
-            tab.setEnvironmentType(value as CubeDataProductEnvironmentType);
-          }
-        }}
-      />
+      {/* a host with one class, as Studio, offers no choice of Mode */}
+      {(tab.catalog?.environmentTypes.length ?? 0) > 1 && (
+        <CubePickerStep
+          label="Mode"
+          value={tab.environmentType}
+          options={(tab.catalog?.environmentTypes ?? []).map((type) => ({
+            value: type,
+            label: CUBE_DATA_PRODUCT_ENVIRONMENT_LABELS[type],
+          }))}
+          disabled={settings !== undefined}
+          onChange={(value) => {
+            if (value) {
+              tab.setEnvironmentType(value as CubeDataProductEnvironmentType);
+            }
+          }}
+        />
+      )}
       <div className="flex items-center gap-2 text-base">
         <span className="w-20 shrink-0">Environment</span>
         <span aria-label="Environment">
@@ -125,30 +252,25 @@ export const CubeIngestTab = observer((props: { tab: CubeIngestTabState }) => {
       )}
       {tab.definitionList && (
         <ul
-          className="max-h-40 overflow-auto rounded-sm border border-[var(--color-border-subtle)]"
+          className={`max-h-40 overflow-auto ${CUBE_PICKER_LIST_CLASS}`}
           aria-label="Ingest definitions"
         >
           {tab.shownDefinitions.map((candidate) => {
             const isPicked = tab.definition?.urn === candidate.urn;
             return (
-              <li key={candidate.urn}>
-                <button
-                  type="button"
-                  className={clsx(LIST_ITEM_CLASS, {
-                    'bg-[var(--color-bg-selected)]': isPicked,
-                  })}
-                  aria-pressed={isPicked}
-                  title={candidate.definition}
-                  onClick={() => tab.selectDefinition(candidate)}
-                >
-                  <span className="min-w-0 flex-1 truncate">
-                    {candidate.name}
-                  </span>
-                  <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
-                    {`${candidate.groupId}:${candidate.artifactId}`}
-                  </span>
-                </button>
-              </li>
+              <CubePickerListItem
+                key={candidate.urn}
+                picked={isPicked}
+                title={candidate.definition}
+                onPick={() => tab.selectDefinition(candidate)}
+              >
+                <span className="min-w-0 flex-1 truncate">
+                  {candidate.name}
+                </span>
+                <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
+                  {`${candidate.groupId}:${candidate.artifactId}`}
+                </span>
+              </CubePickerListItem>
             );
           })}
         </ul>
@@ -158,49 +280,7 @@ export const CubeIngestTab = observer((props: { tab: CubeIngestTabState }) => {
           {dropped}
         </span>
       )}
-      {tab.isDescribing && (
-        <div className="text-base text-[var(--color-text-secondary)]">
-          reading the definition
-        </div>
-      )}
-      {tab.dataSets && (
-        <ul
-          className="max-h-40 overflow-auto rounded-sm border border-[var(--color-border-subtle)]"
-          aria-label="Data sets"
-        >
-          {tab.dataSets.map((dataSet) => {
-            const isPicked = tab.dataSetName === dataSet.name;
-            return (
-              <li key={dataSet.name}>
-                <button
-                  type="button"
-                  className={clsx(LIST_ITEM_CLASS, {
-                    'bg-[var(--color-bg-selected)]': isPicked,
-                  })}
-                  aria-pressed={isPicked}
-                  disabled={!dataSet.isPickable}
-                  title={dataSet.disabledReason}
-                  onClick={() => tab.selectDataSet(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>
-                </button>
-              </li>
-            );
-          })}
-        </ul>
-      )}
-      {tab.dataSet?.schema && (
-        <section aria-label="Data set preview">
-          <CubeSchemaColumnsTable schema={tab.dataSet.schema} />
-        </section>
-      )}
+      <CubeIngestDataSets tab={tab} />
       <div className="flex items-center gap-2">
         <label className="w-20 shrink-0 text-base" htmlFor={warehouseId}>
           Warehouse

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

@@ -14,7 +14,10 @@
  * limitations under the License.
  */
 
-import { clsx } from '@finos/legend-art';
+import {
+  CUBE_PICKER_LIST_CLASS,
+  CubePickerListItem,
+} from './CubePickerListItem.js';
 import { getRelationalDisplayName } from '@finos/legend-cube';
 import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
@@ -24,18 +27,114 @@ import {
 } from '../../__lib__/LegendCubeLabels.js';
 import {
   type CubeInlineModelTabState,
+  CubeModelReadKind,
   isTableSelectable,
 } from '../../stores/source-picker/CubeInlineModelTabState.js';
+import { CubeFunctionSteps, CubeReadKindToggle } from './CubeFunctionSteps.js';
 import { CubePickerStep } from './CubePickerStep.js';
+import { CubeTablePreview } from './CubeTablePreview.js';
+
+/** A model's table steps: a database, a runtime keyed by it, a schema and a table */
+const CubeTableSteps = observer((props: { tab: CubeInlineModelTabState }) => {
+  const { tab } = props;
+  return (
+    <>
+      <CubePickerStep
+        label="Database"
+        value={tab.databasePath}
+        options={tab.databases.map((database) => ({
+          value: database.path,
+          label: database.path,
+        }))}
+        disabled={tab.fixedDatabasePath !== undefined}
+        onChange={(path) => tab.selectDatabase(path)}
+      />
+      <CubePickerStep
+        label="Runtime"
+        value={tab.runtimePath}
+        options={tab.runtimes.map((runtime) => ({
+          value: runtime.path,
+          label: runtime.path,
+        }))}
+        disabled={tab.fixedContext?.runtime !== undefined}
+        onChange={(path) => tab.selectRuntime(path)}
+      />
+      <CubePickerStep
+        label="Schema"
+        value={tab.schemaName}
+        options={tab.schemas.map((schema) => ({
+          value: schema.name,
+          label: getRelationalDisplayName(schema.name),
+        }))}
+        onChange={(name) => tab.selectSchema(name)}
+      />
+      {tab.schemaName !== undefined && (
+        <div className="flex flex-col gap-1">
+          <input
+            className="h-7 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base text-[var(--color-text-primary)]"
+            placeholder="Search tables"
+            aria-label="Search tables"
+            value={tab.tableSearch}
+            onChange={(event) => tab.setTableSearch(event.target.value)}
+          />
+          <ul
+            className={`h-56 overflow-auto ${CUBE_PICKER_LIST_CLASS}`}
+            aria-label="Tables"
+          >
+            {tab.tables.map((table) => {
+              const selectable = isTableSelectable(table);
+              const isPicked = tab.tableNames.includes(table.name);
+              return (
+                <CubePickerListItem
+                  key={table.name}
+                  picked={isPicked}
+                  disabled={!selectable}
+                  adds={true}
+                  onPick={() => tab.selectTable(table.name)}
+                  onToggle={() => tab.toggleTable(table.name)}
+                  toggleLabel={getRelationalDisplayName(table.name)}
+                >
+                  <span className="min-w-0 flex-1 truncate">
+                    {getRelationalDisplayName(table.name)}
+                  </span>
+                  {table.flags.map((flag) => (
+                    <span
+                      key={flag}
+                      className="rounded-sm bg-[var(--color-status-warn-bg)] px-1 text-sm text-[var(--color-status-warn)]"
+                      title={CUBE_TABLE_FLAG_LABELS[flag].description}
+                    >
+                      {CUBE_TABLE_FLAG_LABELS[flag].label}
+                    </span>
+                  ))}
+                  <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
+                    {table.columnCount} columns
+                  </span>
+                </CubePickerListItem>
+              );
+            })}
+          </ul>
+          {tab.previewTableName !== undefined && (
+            <CubeTablePreview
+              name={getRelationalDisplayName(tab.previewTableName)}
+              columns={tab.previewedColumns}
+            />
+          )}
+        </div>
+      )}
+    </>
+  );
+});
 
 /**
  * The steps after a model is picked, shared by the Sample Data and Project
- * Database tabs: its loading, then a database, a runtime keyed by it, a schema
- * and a table, and why the last step failed
+ * Database tabs: its loading, then tables or functions (shown when the
+ * model has functions, PLAN §6.5), the steps to one, and why the last step
+ * failed
  */
 export const CubeOutlineSteps = observer(
   (props: { tab: CubeInlineModelTabState }) => {
     const { tab } = props;
+    const readsFunctions = tab.readKind === CubeModelReadKind.FUNCTION;
     return (
       <>
         {tab.isLoadingModel && (
@@ -43,84 +142,14 @@ export const CubeOutlineSteps = observer(
             {CUBE_PENDING_LABEL.LOADING_MODEL}
           </div>
         )}
-        <CubePickerStep
-          label="Database"
-          value={tab.databasePath}
-          options={tab.databases.map((database) => ({
-            value: database.path,
-            label: database.path,
-          }))}
-          disabled={tab.fixedDatabasePath !== undefined}
-          onChange={(path) => tab.selectDatabase(path)}
-        />
-        <CubePickerStep
-          label="Runtime"
-          value={tab.runtimePath}
-          options={tab.runtimes.map((runtime) => ({
-            value: runtime.path,
-            label: runtime.path,
-          }))}
-          disabled={tab.fixedContext?.runtime !== undefined}
-          onChange={(path) => tab.selectRuntime(path)}
-        />
-        <CubePickerStep
-          label="Schema"
-          value={tab.schemaName}
-          options={tab.schemas.map((schema) => ({
-            value: schema.name,
-            label: getRelationalDisplayName(schema.name),
-          }))}
-          onChange={(name) => tab.selectSchema(name)}
-        />
-        {tab.schemaName !== undefined && (
-          <div className="flex flex-col gap-1">
-            <input
-              className="h-7 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base text-[var(--color-text-primary)]"
-              placeholder="Search tables"
-              aria-label="Search tables"
-              value={tab.tableSearch}
-              onChange={(event) => tab.setTableSearch(event.target.value)}
-            />
-            <ul
-              className="h-56 overflow-auto rounded-sm border border-[var(--color-border-subtle)]"
-              aria-label="Tables"
-            >
-              {tab.tables.map((table) => {
-                const selectable = isTableSelectable(table);
-                const isPicked = tab.tableName === table.name;
-                return (
-                  <li key={table.name}>
-                    <button
-                      type="button"
-                      className={clsx(
-                        'flex w-full items-center gap-2 px-2 py-1 text-left text-base enabled:hover:bg-[var(--color-bg-hover)] disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]',
-                        { 'bg-[var(--color-bg-selected)]': isPicked },
-                      )}
-                      aria-pressed={isPicked}
-                      disabled={!selectable}
-                      onClick={() => tab.selectTable(table.name)}
-                    >
-                      <span className="min-w-0 flex-1 truncate">
-                        {getRelationalDisplayName(table.name)}
-                      </span>
-                      {table.flags.map((flag) => (
-                        <span
-                          key={flag}
-                          className="rounded-sm bg-[var(--color-status-warn-bg)] px-1 text-sm text-[var(--color-status-warn)]"
-                          title={CUBE_TABLE_FLAG_LABELS[flag].description}
-                        >
-                          {CUBE_TABLE_FLAG_LABELS[flag].label}
-                        </span>
-                      ))}
-                      <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
-                        {table.columnCount} columns
-                      </span>
-                    </button>
-                  </li>
-                );
-              })}
-            </ul>
-          </div>
+        {tab.readKinds.length > 1 &&
+          (readsFunctions || Boolean(tab.outline?.functions?.length)) && (
+            <CubeReadKindToggle tab={tab} />
+          )}
+        {readsFunctions ? (
+          <CubeFunctionSteps tab={tab} />
+        ) : (
+          <CubeTableSteps tab={tab} />
         )}
         {tab.isResolving && (
           <div className="text-base text-[var(--color-text-secondary)]">

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

@@ -0,0 +1,118 @@
+/**
+ * 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 { CheckIcon, clsx } from '@finos/legend-art';
+import { createContext, useContext } from 'react';
+
+/**
+ * The source dialog's Add, for a list row that adds what it picks on a
+ * double-click or Enter; nothing outside the dialog
+ */
+export const CubePickerConfirmContext = createContext<(() => void) | undefined>(
+  undefined,
+);
+
+/** A list of the source dialog: rows on the input background, so hover shows */
+export const CUBE_PICKER_LIST_CLASS =
+  'rounded-sm border border-[var(--color-border-subtle)] bg-[var(--color-bg-input)]';
+
+/**
+ * A row of a list in the source dialog: a table, a data set, an access
+ * point, or a step towards one (a data product, an ingest definition).
+ * The picked row shows an accent bar, a check and a stronger background,
+ * which hovering doesn't hide. A row that picks what Add adds (`adds`) adds
+ * it on a double-click, or on Enter once picked (UX audit A1-A3, 2026-10-11).
+ * A row of a list that picks several (`onToggle`) has a checkbox beside it,
+ * which adds it to the picked rows or takes it out, as a Cmd or Ctrl click on
+ * the row does; a plain click picks the row alone, and a double-click adds it
+ * alone.
+ */
+export const CubePickerListItem: React.FC<{
+  picked: boolean;
+  disabled?: boolean | undefined;
+  title?: string | undefined;
+  /** Whether picking this row is the last choice before Add */
+  adds?: boolean | undefined;
+  onPick: () => void;
+  /** Adds the row to the picked ones or takes it out, in a list that picks several */
+  onToggle?: (() => void) | undefined;
+  /** What the row's checkbox is called, e.g. the table's name */
+  toggleLabel?: string | undefined;
+  children: React.ReactNode;
+}> = (props) => {
+  const {
+    picked,
+    disabled,
+    title,
+    adds,
+    onPick,
+    onToggle,
+    toggleLabel,
+    children,
+  } = props;
+  const confirm = useContext(CubePickerConfirmContext);
+  return (
+    <li className={onToggle ? 'flex items-center' : undefined}>
+      {onToggle && (
+        <input
+          type="checkbox"
+          className="ml-2 shrink-0"
+          aria-label={`Pick ${toggleLabel ?? 'this row'}`}
+          checked={picked}
+          disabled={disabled}
+          onChange={onToggle}
+        />
+      )}
+      <button
+        type="button"
+        className={clsx(
+          'flex w-full items-center gap-2 border-l-[3px] px-2 py-1 text-left text-base disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]',
+          picked
+            ? 'border-[var(--color-accent)] bg-[var(--color-bg-selected)] font-medium'
+            : 'border-transparent enabled:hover:bg-[var(--color-bg-hover)]',
+        )}
+        aria-pressed={picked}
+        disabled={disabled}
+        title={title}
+        onClick={(event) => {
+          if (onToggle && (event.metaKey || event.ctrlKey)) {
+            onToggle();
+          } else {
+            onPick();
+          }
+        }}
+        onDoubleClick={() => {
+          if (adds && !disabled) {
+            onPick();
+            confirm?.();
+          }
+        }}
+        onKeyDown={(event) => {
+          // Enter on the picked row adds it; on another row, it picks it
+          if (event.key === 'Enter' && adds && picked && confirm) {
+            event.preventDefault();
+            confirm();
+          }
+        }}
+      >
+        {children}
+        <span className="flex w-4 shrink-0 justify-center text-[var(--color-accent)]">
+          {picked && <CheckIcon aria-hidden={true} />}
+        </span>
+      </button>
+    </li>
+  );
+};

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

@@ -17,6 +17,7 @@
 import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { CUBE_PROJECT_LABEL } from '../../__lib__/LegendCubeProjectLabels.js';
+import { CubeModelReadKind } from '../../stores/source-picker/CubeInlineModelTabState.js';
 import {
   type CubeProjectTabState,
   getCubeProjectKey,
@@ -26,9 +27,10 @@ import { CubeOutlineSteps } from './CubeInlineModelTab.js';
 import { CubePickerStep } from './CubePickerStep.js';
 
 /**
- * The source dialog's Project Database tab (PLAN §6.3): a published project,
- * one of its released versions, then, as in the Sample Data tab, one of its
- * own Databases, a runtime keyed by it, a schema and a table
+ * The source dialog's Project Database and Project Function tabs (PLAN
+ * §6.3, §6.5): a published project, one of its released versions, then, as
+ * in the Sample Data tab, one of its own Databases, a runtime keyed by it, a
+ * schema and a table; or one of its own functions, its runtime and values
  */
 export const CubeProjectTab = observer(
   (props: { tab: CubeProjectTabState }) => {
@@ -37,6 +39,7 @@ export const CubeProjectTab = observer(
     // the cube's model is fixed, even one Cube can't read as a project
     const isFixed = tab.fixedContext !== undefined;
     const noRuntime =
+      tab.readKind === CubeModelReadKind.TABLE &&
       tab.databasePath !== undefined &&
       !tab.isLoadingModel &&
       tab.runtimes.length === 0;