@finos/legend-cube-builder 0.0.3 → 0.0.5

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

@@ -0,0 +1,352 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { clsx } from '@finos/legend-art';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useId } from 'react';
+import { CubeTablePreview } from './CubeTablePreview.js';
+import {
+  CUBE_CSV_HELP_TEXT,
+  CUBE_DIRECT_HELP_TEXT,
+  CUBE_DIRECT_PENDING_LABEL,
+  getCubeConnectionSummaryLabel,
+  getHiddenColumnsLabel,
+} from '../../__lib__/LegendCubeDirectConnectionLabels.js';
+import {
+  CUBE_PENDING_LABEL,
+  CUBE_TABLE_FLAG_LABELS,
+} from '../../__lib__/LegendCubeLabels.js';
+import { CubeDirectDatabaseType } from '../../graph-manager/CubeConnectionExplorer.js';
+import {
+  type CubeDirectConnectionTabState,
+  isExploredTableSelectable,
+} from '../../stores/source-picker/CubeDirectConnectionTabState.js';
+import {
+  CUBE_PICKER_LIST_CLASS,
+  CubePickerListItem,
+} from './CubePickerListItem.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubePickerStep } from './CubePickerStep.js';
+
+const INPUT_CLASS =
+  'rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base text-[var(--color-text-primary)]';
+
+/** The databases a direct connection can reach this round, as the form offers them (R44) */
+const DATABASE_TYPE_OPTIONS = [
+  { value: CubeDirectDatabaseType.H2, label: 'H2' },
+  { value: CubeDirectDatabaseType.DUCKDB, label: 'DuckDB' },
+];
+
+/**
+ * Loads a CSV, pasted or from a file, into the in-memory DuckDB database:
+ * Add writes it into the setup SQL as a table, which the viewer can edit
+ */
+const CubeCsvLoader = observer(
+  (props: { tab: CubeDirectConnectionTabState }) => {
+    const { tab } = props;
+    const { applicationStore } = tab.editorState.host;
+    const tableNameId = useId();
+    const fileId = useId();
+    return (
+      <details className="flex flex-col gap-1" aria-label="Load a CSV">
+        <summary className="cursor-pointer text-base">Load a CSV</summary>
+        <div className="mt-1 flex flex-col gap-2">
+          <span className="text-sm text-[var(--color-text-muted)]">
+            {CUBE_CSV_HELP_TEXT}
+          </span>
+          <div className="flex items-center gap-2">
+            <label className="w-20 shrink-0 text-base" htmlFor={fileId}>
+              CSV file
+            </label>
+            <input
+              id={fileId}
+              type="file"
+              accept=".csv,text/csv,text/plain"
+              className="min-w-0 flex-1 text-base"
+              onChange={(event) => {
+                const file = event.target.files?.[0];
+                // choosing the same file again reads it again
+                event.target.value = '';
+                if (file) {
+                  flowResult(tab.loadCsvFile(file)).catch(
+                    applicationStore.alertUnhandledError,
+                  );
+                }
+              }}
+            />
+          </div>
+          <textarea
+            aria-label="CSV"
+            className={clsx(
+              INPUT_CLASS,
+              'h-24 w-full resize-y p-1 font-mono text-sm',
+            )}
+            placeholder="Or paste a CSV here, its first row naming the columns"
+            spellCheck={false}
+            value={tab.csvText}
+            onChange={(event) => tab.setCsvText(event.target.value)}
+          />
+          <div className="flex items-center gap-2">
+            <label className="w-20 shrink-0 text-base" htmlFor={tableNameId}>
+              Table
+            </label>
+            <input
+              id={tableNameId}
+              className={clsx(INPUT_CLASS, 'h-7 min-w-0 flex-1')}
+              placeholder="csv_data"
+              spellCheck={false}
+              value={tab.csvTableName}
+              onChange={(event) => tab.setCsvTableName(event.target.value)}
+            />
+            <CubeButton disabled={!tab.canAddCsv} onClick={() => tab.addCsv()}>
+              Add to setup SQL
+            </CubeButton>
+          </div>
+          {tab.csvNote !== undefined && (
+            <span
+              role="status"
+              className={clsx(
+                'text-sm',
+                tab.csvNote.isError
+                  ? 'text-[var(--color-status-error)]'
+                  : 'text-[var(--color-text-secondary)]',
+              )}
+            >
+              {tab.csvNote.message}
+            </span>
+          )}
+        </div>
+      </details>
+    );
+  },
+);
+
+/** The form of a connection the cube doesn't have yet */
+const CubeConnectionForm = observer(
+  (props: { tab: CubeDirectConnectionTabState }) => {
+    const { tab } = props;
+    const setupSqlId = useId();
+    const pathId = useId();
+    return (
+      <div className="flex flex-col gap-2">
+        <CubePickerStep
+          label="Database"
+          value={tab.databaseType}
+          options={DATABASE_TYPE_OPTIONS}
+          onChange={(value) => {
+            if (value) {
+              tab.setDatabaseType(value as CubeDirectDatabaseType);
+            }
+          }}
+        />
+        {tab.databaseType === CubeDirectDatabaseType.DUCKDB && (
+          <div className="flex items-center gap-2">
+            <label className="w-20 shrink-0 text-base" htmlFor={pathId}>
+              File
+            </label>
+            <input
+              id={pathId}
+              className={clsx(INPUT_CLASS, 'h-7 min-w-0 flex-1')}
+              placeholder="In memory"
+              title={CUBE_DIRECT_HELP_TEXT.DUCKDB_PATH}
+              spellCheck={false}
+              value={tab.duckDbPath}
+              onChange={(event) => tab.setDuckDbPath(event.target.value)}
+            />
+          </div>
+        )}
+        {tab.databaseType === CubeDirectDatabaseType.DUCKDB && (
+          <CubeCsvLoader tab={tab} />
+        )}
+        <div className="flex flex-col gap-1">
+          <label className="text-base" htmlFor={setupSqlId}>
+            Setup SQL
+          </label>
+          <textarea
+            id={setupSqlId}
+            className={clsx(
+              INPUT_CLASS,
+              'h-32 w-full resize-y p-1 font-mono text-sm',
+            )}
+            spellCheck={false}
+            value={tab.setupSqlText}
+            onChange={(event) => tab.setSetupSqlText(event.target.value)}
+          />
+          <span className="text-sm text-[var(--color-text-muted)]">
+            {CUBE_DIRECT_HELP_TEXT.SETUP_SQL}
+          </span>
+          {tab.formProblem !== undefined && (
+            <span className="text-sm text-[var(--color-status-warn)]">
+              {tab.formProblem}
+            </span>
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+/**
+ * The source picker's database connection tab (PLAN §6.8): a connection,
+ * tested by listing its schemas, then a schema's tables. The picker's own
+ * Add button adds the picked table.
+ */
+export const CubeDirectConnectionTab = observer(
+  (props: { tab: CubeDirectConnectionTabState }) => {
+    const { tab } = props;
+    const { applicationStore } = tab.editorState.host;
+    const { description, fixedConnection } = tab;
+    return (
+      <div className="flex flex-col gap-2">
+        {fixedConnection ? (
+          <div className="flex flex-col gap-1">
+            <div className="text-base" aria-label="Connection">
+              {description?.supported
+                ? getCubeConnectionSummaryLabel(description.summary)
+                : "Cube can't use the cube's connection:"}
+            </div>
+            {description && !description.supported && (
+              <ul className="list-disc pl-5 text-base text-[var(--color-status-error)]">
+                {description.problems.map((problem) => (
+                  <li key={problem}>{problem}</li>
+                ))}
+              </ul>
+            )}
+            <span className="text-sm text-[var(--color-text-muted)]">
+              {CUBE_DIRECT_HELP_TEXT.FIXED_CONNECTION}
+            </span>
+          </div>
+        ) : (
+          <CubeConnectionForm tab={tab} />
+        )}
+        <div className="flex items-center gap-2">
+          <CubeButton
+            disabled={!tab.canTest}
+            onClick={() => {
+              flowResult(tab.testConnection()).catch(
+                applicationStore.alertUnhandledError,
+              );
+            }}
+          >
+            {fixedConnection ? 'List schemas' : 'Test connection'}
+          </CubeButton>
+          {tab.isTesting && (
+            <span className="text-base text-[var(--color-text-secondary)]">
+              {CUBE_DIRECT_PENDING_LABEL.TESTING_CONNECTION}
+            </span>
+          )}
+        </div>
+        {tab.schemas !== undefined && tab.schemas.length > 0 && (
+          <CubePickerStep
+            label="Schema"
+            value={tab.schemaName}
+            options={tab.schemas.map((schema) => ({
+              value: schema,
+              label: schema,
+            }))}
+            onChange={(name) => tab.selectSchema(name)}
+          />
+        )}
+        {tab.isListing && (
+          <div className="text-base text-[var(--color-text-secondary)]">
+            {CUBE_DIRECT_PENDING_LABEL.LISTING_TABLES}
+          </div>
+        )}
+        {tab.schemaTables !== undefined && (
+          <div className="flex flex-col gap-1">
+            <input
+              className={clsx(INPUT_CLASS, 'h-7')}
+              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 = isExploredTableSelectable(table);
+                const isPicked = tab.tableNames.includes(table.storedName);
+                const hidden = getHiddenColumnsLabel(table.hiddenColumnCount);
+                return (
+                  <CubePickerListItem
+                    key={table.storedName}
+                    picked={isPicked}
+                    disabled={!selectable}
+                    adds={true}
+                    onPick={() => tab.selectTable(table.storedName)}
+                    onToggle={() => tab.toggleTable(table.storedName)}
+                    toggleLabel={table.name}
+                  >
+                    <span className="min-w-0 flex-1 truncate">
+                      {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
+                      {hidden !== undefined && `, ${hidden}`}
+                    </span>
+                  </CubePickerListItem>
+                );
+              })}
+            </ul>
+            {tab.previewTableName !== undefined && (
+              <CubeTablePreview
+                name={
+                  tab.tables.find(
+                    (table) => table.storedName === tab.previewTableName,
+                  )?.name ?? tab.previewTableName
+                }
+                columns={tab.previewedColumns}
+              />
+            )}
+          </div>
+        )}
+        {tab.isResolving && (
+          <div className="text-base text-[var(--color-text-secondary)]">
+            {CUBE_PENDING_LABEL.RESOLVING_SOURCE}
+          </div>
+        )}
+        {tab.error !== undefined && (
+          <div
+            className="flex flex-col gap-1 text-base text-[var(--color-status-error)]"
+            role="alert"
+          >
+            <span>{tab.error.message}</span>
+            {tab.error.detail !== undefined && (
+              <details className="text-sm">
+                <summary className="cursor-pointer">Details</summary>
+                <pre className="whitespace-pre-wrap break-words">
+                  {tab.error.detail}
+                </pre>
+              </details>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

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>
+        )}
+      </>
+    );
+  },
+);