@finos/legend-cube-builder 0.0.4 → 0.0.6

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

@@ -0,0 +1,244 @@
+/**
+ * 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 { getFunctionParameterValueError } from '@finos/legend-cube';
+import { observer } from 'mobx-react-lite';
+import { useId } from 'react';
+import { CUBE_FUNCTION_MESSAGE } from '../../__lib__/LegendCubeFunctionLabels.js';
+import type { CubeOutlineFunction } from '../../graph-manager/CubeEngine.js';
+import {
+  CubeModelReadKind,
+  type CubeInlineModelTabState,
+} from '../../stores/source-picker/CubeInlineModelTabState.js';
+import {
+  CUBE_PICKER_LIST_CLASS,
+  CubePickerListItem,
+} from './CubePickerListItem.js';
+import { CubePickerStep } from './CubePickerStep.js';
+
+const INPUT_CLASS =
+  'h-7 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)]';
+
+const lastSegment = (path: string): string => {
+  const index = path.lastIndexOf('::');
+  return index < 0 ? path : path.slice(index + 2);
+};
+
+/** A function's parameters as the list shows them: `(min: Float, status?: String)` */
+export const getCubeFunctionParametersLabel = (
+  fn: CubeOutlineFunction,
+): string =>
+  `(${fn.parameters
+    .map(
+      (parameter) =>
+        `${parameter.name}${parameter.multiplicity === '[0..1]' ? '?' : ''}: ${lastSegment(parameter.type)}`,
+    )
+    .join(', ')})`;
+
+/** Tables or functions: what a model's tab reads (PLAN §6.5) */
+export const CubeReadKindToggle = observer(
+  (props: { tab: CubeInlineModelTabState }) => {
+    const { tab } = props;
+    const option = (kind: CubeModelReadKind, label: string) => (
+      <button
+        type="button"
+        className={`h-6 px-3 text-base ${
+          tab.readKind === kind
+            ? 'bg-[var(--color-bg-selected)] font-medium text-[var(--color-text-primary)]'
+            : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)]'
+        }`}
+        aria-pressed={tab.readKind === kind}
+        onClick={() => tab.setReadKind(kind)}
+      >
+        {label}
+      </button>
+    );
+    return (
+      <div className="flex items-center gap-2">
+        <span className="w-20 shrink-0 text-base">Read</span>
+        <div
+          className="flex overflow-hidden rounded-sm border border-[var(--color-border-default)]"
+          role="group"
+          aria-label="Read"
+        >
+          {option(CubeModelReadKind.TABLE, 'Tables')}
+          {option(CubeModelReadKind.FUNCTION, 'Functions')}
+        </div>
+      </div>
+    );
+  },
+);
+
+/** A parameter's value, checked as it is typed */
+const CubeFunctionParameterInput = observer(
+  (props: { tab: CubeInlineModelTabState; index: number }) => {
+    const { tab, index } = props;
+    const id = useId();
+    const parameter = tab.functionParameters[index];
+    if (!parameter) {
+      return null;
+    }
+    const text = tab.functionValueTexts[index] ?? '';
+    const error = text
+      ? getFunctionParameterValueError(parameter, tab.functionValues[index])
+      : undefined;
+    return (
+      <div className="flex flex-col gap-0.5">
+        <div className="flex items-center gap-2">
+          <label
+            className="w-32 shrink-0 truncate text-base"
+            htmlFor={id}
+            title={parameter.name}
+          >
+            {parameter.name}
+          </label>
+          <input
+            id={id}
+            className={INPUT_CLASS}
+            placeholder={`${parameter.type.displayName}${parameter.optional ? ', optional' : ''}`}
+            aria-invalid={error !== undefined}
+            value={text}
+            onChange={(event) =>
+              tab.setFunctionValueText(index, event.target.value)
+            }
+          />
+        </div>
+        {error !== undefined && (
+          <span className="pl-[8.5rem] text-sm text-[var(--color-status-error)]">
+            {error}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+/**
+ * The function steps of a model's tab (PLAN §6.5): the model's functions
+ * that return a relation, then the picked one's runtime (its own, or one of
+ * the model's), a value for each parameter, and the columns it declares
+ */
+export const CubeFunctionSteps = observer(
+  (props: { tab: CubeInlineModelTabState }) => {
+    const { tab } = props;
+    const picked = tab.pickedFunction;
+    const allFunctions = tab.outline?.functions ?? [];
+    return (
+      <>
+        {tab.outline && (
+          <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 functions"
+              aria-label="Search functions"
+              value={tab.functionSearch}
+              onChange={(event) => tab.setFunctionSearch(event.target.value)}
+            />
+            {tab.functions.length ? (
+              <ul
+                className={`h-40 overflow-auto ${CUBE_PICKER_LIST_CLASS}`}
+                aria-label="Functions"
+              >
+                {tab.functions.map((fn) => (
+                  <CubePickerListItem
+                    key={fn.signature}
+                    picked={tab.functionSignature === fn.signature}
+                    disabled={fn.problem !== undefined}
+                    title={fn.problem}
+                    adds={fn.parameters.length === 0}
+                    onPick={() => tab.selectFunction(fn.signature)}
+                  >
+                    <span className="min-w-0 flex-1 truncate">
+                      {lastSegment(fn.path)}
+                      <span className="text-[var(--color-text-muted)]">
+                        {getCubeFunctionParametersLabel(fn)}
+                      </span>
+                    </span>
+                    <span className="max-w-[40%] shrink-0 truncate text-sm text-[var(--color-text-muted)]">
+                      {fn.problem ??
+                        (fn.runtime !== undefined
+                          ? `runs on ${lastSegment(fn.runtime)}`
+                          : `${fn.columns.length} columns`)}
+                    </span>
+                  </CubePickerListItem>
+                ))}
+              </ul>
+            ) : (
+              <div className="text-base text-[var(--color-text-secondary)]">
+                {allFunctions.length
+                  ? CUBE_FUNCTION_MESSAGE.NO_MATCH
+                  : CUBE_FUNCTION_MESSAGE.NONE}
+              </div>
+            )}
+          </div>
+        )}
+        {picked && (
+          <section
+            aria-label="Function details"
+            className="flex flex-col gap-2"
+          >
+            <span className="break-all text-sm text-[var(--color-text-muted)]">
+              {picked.path}
+            </span>
+            {picked.runtime !== undefined ? (
+              <div className="flex items-center gap-2 text-base">
+                <span className="w-20 shrink-0">Runtime</span>
+                <span aria-label="Runtime" className="break-all">
+                  {CUBE_FUNCTION_MESSAGE.RUNS_ON(picked.runtime)}
+                </span>
+              </div>
+            ) : (
+              <CubePickerStep
+                label="Runtime"
+                value={tab.functionRuntimePath}
+                options={tab.functionRuntimes.map((runtime) => ({
+                  value: runtime.path,
+                  label: runtime.path,
+                }))}
+                disabled={tab.fixedContext?.runtime !== undefined}
+                onChange={(path) => tab.selectFunctionRuntime(path)}
+              />
+            )}
+            {tab.functionParameters.map((parameter, index) => (
+              <CubeFunctionParameterInput
+                key={parameter.name}
+                tab={tab}
+                index={index}
+              />
+            ))}
+            {picked.columns.length > 0 && (
+              <span className="text-sm text-[var(--color-text-muted)]">
+                {`Columns: ${picked.columns
+                  .map(
+                    (column) => `${column.name} (${lastSegment(column.type)})`,
+                  )
+                  .join(', ')}`}
+              </span>
+            )}
+            {tab.functionProblem !== undefined && (
+              <span
+                className="text-base text-[var(--color-status-error)]"
+                role="alert"
+              >
+                {tab.functionProblem}
+              </span>
+            )}
+          </section>
+        )}
+      </>
+    );
+  },
+);

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

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