@finos/legend-cube-builder 0.0.2 → 0.0.4

package/src/components/editors/CubeColumnChecklist.tsx

@@ -0,0 +1,130 @@
+/**
+ * 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 {
+  isSortableType,
+  type Schema,
+  type SchemaColumn,
+} from '@finos/legend-cube';
+import { observer } from 'mobx-react-lite';
+import { getColumnTypeLabel } from '../../__lib__/LegendCubeLabels.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeColumnTypeIcon } from './CubeColumnPicker.js';
+
+/**
+ * The input's columns, each ticked to pick it (a Group's keys, PLAN §11.5; a
+ * Partition's columns, §11.6; a Difference's difference columns, §11.7), with
+ * a button that unticks them all. A column that can't be picked, by default
+ * one that can't be compared, is shown but can't be ticked, with the reason; a
+ * picked column the input lacks stays listed, marked, until it is unticked.
+ * The list scrolls on its own.
+ */
+export const CubeColumnChecklist = observer(
+  (props: {
+    /** The list's heading and accessible name */
+    label: string;
+    schema: Schema;
+    picked: readonly string[];
+    /** Why a column that can't be compared can't be ticked */
+    disabledReason?: string;
+    /** Why a column can't be ticked, `undefined` when it can; by default, `disabledReason` for one that can't be compared */
+    unpickableReason?: (column: SchemaColumn) => string | undefined;
+    /** The title of the button that unticks every column */
+    clearTitle: string;
+    readOnly: boolean;
+    onToggle: (name: string) => void;
+    onClear: () => void;
+  }) => {
+    const {
+      label,
+      schema,
+      picked,
+      disabledReason,
+      unpickableReason = (column: SchemaColumn): string | undefined =>
+        isSortableType(column.type) ? undefined : (disabledReason ?? ''),
+      clearTitle,
+      readOnly,
+      onToggle,
+      onClear,
+    } = props;
+    // each once, though a saved node may repeat one (validation reports it)
+    const missing = Array.from(
+      new Set(picked.filter((name) => !schema.lookup(name))),
+    );
+    return (
+      <>
+        <div className="flex items-center gap-2">
+          <span>{label}</span>
+          <span className="flex-1" />
+          <CubeButton title={clearTitle} disabled={readOnly} onClick={onClear}>
+            None
+          </CubeButton>
+        </div>
+        <ul
+          aria-label={label}
+          className="rounded-sm border border-[var(--color-border-subtle)]"
+        >
+          {schema.columns.map((column) => {
+            const reason = unpickableReason(column);
+            const pickable = reason === undefined;
+            return (
+              <li key={column.name}>
+                <label
+                  className={clsx(
+                    'flex items-center gap-2 px-1 py-0.5',
+                    !pickable && 'text-[var(--color-text-disabled)]',
+                  )}
+                >
+                  <input
+                    type="checkbox"
+                    checked={picked.includes(column.name)}
+                    disabled={
+                      readOnly || (!pickable && !picked.includes(column.name))
+                    }
+                    onChange={() => onToggle(column.name)}
+                  />
+                  <CubeColumnTypeIcon
+                    type={column.type}
+                    className="text-[var(--color-text-secondary)]"
+                  />
+                  <span className="min-w-0 truncate">{column.name}</span>
+                  <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
+                    {`${getColumnTypeLabel(column)}${pickable ? '' : ` (${reason})`}`}
+                  </span>
+                </label>
+              </li>
+            );
+          })}
+          {missing.map((name) => (
+            <li key={`missing:${name}`}>
+              <label className="flex items-center gap-2 px-1 py-0.5 text-[var(--color-status-error)]">
+                <input
+                  type="checkbox"
+                  checked={true}
+                  disabled={readOnly}
+                  onChange={() => onToggle(name)}
+                />
+                <span className="min-w-0 truncate">{name || '(blank)'}</span>
+                <span className="shrink-0 text-sm">(not in the input)</span>
+              </label>
+            </li>
+          ))}
+        </ul>
+      </>
+    );
+  },
+);

package/src/components/editors/CubeColumnPicker.tsx

@@ -23,7 +23,12 @@ import {
   StringTypeIcon,
   ToggleIcon,
 } from '@finos/legend-art';
-import { type CubeType, type Schema, TypeFamily } from '@finos/legend-cube';
+import {
+  type CubeType,
+  type Schema,
+  type SchemaColumn,
+  TypeFamily,
+} from '@finos/legend-cube';
 import { getColumnTypeLabel } from '../../__lib__/LegendCubeLabels.js';
 
 const FAMILY_ICONS: Readonly<
@@ -55,7 +60,9 @@ export const CubeColumnTypeIcon: React.FC<{
  * columns of the actual input). Each option names its type, e.g.
  * `CUSTOMER_ID: Varchar(5)?`; the picked column's type shows beside, with
  * its family's icon and its full type in the tooltip. A column the input
- * doesn't have stays shown, so the problem can be seen and fixed.
+ * doesn't have stays shown, so the problem can be seen and fixed. A column
+ * the editor can't take here is shown, with the reason `isColumnDisabled`
+ * gives after its type, but can't be picked.
  */
 export const CubeColumnPicker: React.FC<{
   /** What the column is for, e.g. `Left join column 1`: the picker's accessible name */
@@ -67,8 +74,21 @@ export const CubeColumnPicker: React.FC<{
   disabled?: boolean | undefined;
   /** Marks the pick as wrong, e.g. a type that doesn't match */
   invalid?: boolean | undefined;
+  /**
+   * Why a column can't be picked, shown after its type, e.g. a Sort's Variant
+   * column, or one another row has; `undefined` when it can be
+   */
+  isColumnDisabled?: ((column: SchemaColumn) => string | undefined) | undefined;
 }> = (props) => {
-  const { label, schema, value, onChange, disabled, invalid } = props;
+  const {
+    label,
+    schema,
+    value,
+    onChange,
+    disabled,
+    invalid,
+    isColumnDisabled,
+  } = props;
   const picked = value ? schema.lookup(value) : undefined;
   return (
     <div className="flex min-w-0 items-center gap-1">
@@ -90,15 +110,19 @@ export const CubeColumnPicker: React.FC<{
             {value ? `${value} (not in the input)` : 'Pick a column'}
           </option>
         )}
-        {schema.columns.map((column) => (
-          <option
-            key={column.name}
-            value={column.name}
-            title={column.type.fullName}
-          >
-            {`${column.name}: ${getColumnTypeLabel(column)}`}
-          </option>
-        ))}
+        {schema.columns.map((column) => {
+          const reason = isColumnDisabled?.(column);
+          return (
+            <option
+              key={column.name}
+              value={column.name}
+              title={column.type.fullName}
+              disabled={reason !== undefined}
+            >
+              {`${column.name}: ${getColumnTypeLabel(column)}${reason === undefined ? '' : ` (${reason})`}`}
+            </option>
+          );
+        })}
       </select>
       {picked && (
         <span

package/src/components/editors/CubeConcatEditor.tsx

@@ -0,0 +1,374 @@
+/**
+ * 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 {
+  CONCAT_PORT_LABELS,
+  getConcatConvertedType,
+  planConcatRename,
+  planConcatRestrict,
+  type Schema,
+  type SchemaColumn,
+  validateConcatSchemas,
+} from '@finos/legend-cube';
+import { guaranteeType, noop } from '@finos/legend-shared';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
+import {
+  CONCAT_CONVERT_FIX_TEXT,
+  CONCAT_CONVERT_FIX_TITLE,
+  CONCAT_CONVERT_TYPES_HINT,
+  CONCAT_EDITOR_TEXT,
+  CONCAT_FIX_NEEDS_CONVERT_TEXT,
+  CONCAT_RENAME_FIX_TEXT,
+  CONCAT_RENAME_FIX_TITLE,
+  CUBE_TABLE_FLAG_LABELS,
+  getColumnTypeLabel,
+  getConcatRestrictFixText,
+  getConcatRestrictFixTitle,
+  getConcatUntypedWarning,
+  READ_ONLY_CUBE_TITLE,
+} from '../../__lib__/LegendCubeLabels.js';
+import { CubeTableFlag } from '../../graph-manager/CubeEngine.js';
+import { CubeConcatDraft } from '../../stores/editors/CubeConcatDraft.js';
+import { isUntypedColumn } from '../../stores/editors/CubeJoinDraft.js';
+import { CubeButton } from '../CubeButton.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+
+const TYPE_UNKNOWN = CUBE_TABLE_FLAG_LABELS[CubeTableFlag.TYPE_UNKNOWN];
+
+/**
+ * A column's type as the table shows it: its display name, or its path when
+ * the other input's type differs but has the same short name (two
+ * enumerations `a::Region` and `b::Region`), with `?` when it takes NULL
+ */
+const typeLabel = (
+  column: SchemaColumn,
+  other: SchemaColumn | undefined,
+): string =>
+  other &&
+  !column.type.equals(other.type) &&
+  column.type.displayName === other.type.displayName
+    ? `${column.type.fullName}${column.nullable ? '?' : ''}`
+    : getColumnTypeLabel(column);
+
+/**
+ * One input's column at a position, its name and type marked where they
+ * differ from the other input's; converting types, a type converted to the
+ * one both share is shown with it, not marked
+ */
+const CubeConcatCell = (props: {
+  column: SchemaColumn | undefined;
+  other: SchemaColumn | undefined;
+  otherLabel: string;
+  widenTypes: boolean;
+}) => {
+  const { column, other, otherLabel, widenTypes } = props;
+  if (!column) {
+    return (
+      <td
+        className="px-1 py-0.5 text-[var(--color-status-error)]"
+        title={`Only the ${otherLabel.toLowerCase()} input has a column here`}
+      >
+        (none)
+      </td>
+    );
+  }
+  const isOtherName = other !== undefined && column.name !== other.name;
+  const isOtherType = other !== undefined && !column.type.equals(other.type);
+  const converted =
+    isOtherType && widenTypes && !isOtherName
+      ? getConcatConvertedType(column.type, other.type)
+      : undefined;
+  const isTypeProblem = isOtherType && !converted;
+  return (
+    <td className="min-w-0 px-1 py-0.5">
+      <div
+        className={clsx(
+          'truncate font-mono',
+          isOtherName && 'text-[var(--color-status-error)]',
+        )}
+        title={
+          isOtherName
+            ? `The ${otherLabel.toLowerCase()} input has ${other.name} here`
+            : column.name
+        }
+      >
+        {column.name}
+      </div>
+      <div
+        className={clsx(
+          'truncate text-sm',
+          isTypeProblem
+            ? 'text-[var(--color-status-error)]'
+            : 'text-[var(--color-text-muted)]',
+        )}
+        title={
+          isOtherType
+            ? `The ${otherLabel.toLowerCase()} input has ${typeLabel(other, column)} here${converted ? `: both are converted to ${converted.displayName}` : ''}`
+            : undefined
+        }
+      >
+        {converted
+          ? `${typeLabel(column, other)} → ${converted.displayName}`
+          : typeLabel(column, other)}
+      </div>
+    </td>
+  );
+};
+
+/**
+ * An autofix the Concat editor offers: what it will do, the columns it
+ * changes, and its button
+ */
+const CubeConcatFix = (props: {
+  text: string;
+  label: string;
+  changes: readonly string[];
+  button: string;
+  title: string;
+  readOnly: boolean;
+  disabled: boolean;
+  onFix: () => void;
+}) => {
+  const { text, label, changes, button, title, readOnly, disabled, onFix } =
+    props;
+  return (
+    <div className="break-words text-sm text-[var(--color-status-warn)]">
+      <div>{text}</div>
+      <ul aria-label={label}>
+        {changes.map((change) => (
+          <li key={change} className="font-mono">
+            {change}
+          </li>
+        ))}
+      </ul>
+      <div className="mt-1">
+        <CubeButton
+          title={readOnly ? READ_ONLY_CUBE_TITLE : title}
+          disabled={disabled}
+          onClick={onFix}
+        >
+          {button}
+        </CubeButton>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * The Concat editor (spec §17.6, PLAN §11.5): what Concat requires, then its
+ * inputs' columns side by side, by position, each name or type that differs
+ * from the other input's marked, and a column only one input has. Nullability
+ * is shown, never compared. When an M2 node spliced in before an input makes
+ * it valid, a button adds it (Q6): a Rename that gives the second input's
+ * columns the first input's names, or a Restrict that drops the columns only
+ * the wider input has. Its one setting, Convert types (Q5), converts types
+ * that differ within numbers, strings or dates to the type they share, shown
+ * in the table; when it would make the inputs match, the editor offers it. A
+ * column whose real type Cube doesn't know is warned about. The panel lists
+ * the problems.
+ */
+export const CubeConcatEditor = observer((props: CubeNodeEditorProps) => {
+  const { editorState, inputSchemas, readOnly } = props;
+  const { nodeEditor } = editorState;
+  const draft = guaranteeType(props.draft, CubeConcatDraft);
+  const { widenTypes } = draft;
+  const [first, second] = inputSchemas as [Schema, Schema];
+  const [firstLabel, secondLabel] = CONCAT_PORT_LABELS as [string, string];
+  const { query } = editorState.document;
+  const { analysis, modelOutline } = editorState;
+  const model = editorState.document.context?.model;
+  useEffect(() => {
+    flowResult(editorState.loadModelOutline()).catch(noop());
+  }, [editorState, model]);
+  const inputIds = query.getInputIds(draft.original.id);
+  const positions = Array.from(
+    { length: Math.max(first.columns.length, second.columns.length) },
+    (_, index) => index,
+  );
+  // the fixes the store would make, with the setting as the panel has it
+  const rename = planConcatRename(first, second, widenTypes);
+  const restrict = planConcatRestrict(first, second, widenTypes);
+  const [restrictedInput, otherInput] = (
+    restrict?.input === 1
+      ? [secondLabel, firstLabel]
+      : [firstLabel, secondLabel]
+  ).map((label) => label.toLowerCase()) as [string, string];
+  // each column of either input whose real type Cube doesn't know
+  const untypedNames = [first, second].map((schema, side) => {
+    const inputId = inputIds[side];
+    return new Set(
+      inputId === undefined
+        ? []
+        : schema
+            .names()
+            .filter((name) =>
+              isUntypedColumn(modelOutline, query, analysis, inputId, name),
+            ),
+    );
+  }) as [Set<string>, Set<string>];
+  const untyped = [first, second].flatMap((schema, side) =>
+    schema
+      .names()
+      .filter((name) => untypedNames[side]?.has(name))
+      .map(
+        (name) =>
+          `${name} (${(side ? secondLabel : firstLabel).toLowerCase()} input)`,
+      ),
+  );
+  // each type that differs, which converting types would make match; never
+  // offered for a column whose real type Cube doesn't know, which the
+  // database may not convert
+  const converts = first.columns.flatMap((column, index) => {
+    const other = second.columns[index];
+    const converted = other && getConcatConvertedType(column.type, other.type);
+    return other && converted && !column.type.equals(other.type)
+      ? [{ column, other, converted }]
+      : [];
+  });
+  const conversions =
+    !widenTypes &&
+    !validateConcatSchemas(first, second) &&
+    validateConcatSchemas(first, second, undefined, true) &&
+    converts.every(
+      ({ column, other }) =>
+        !untypedNames[0].has(column.name) && !untypedNames[1].has(other.name),
+    )
+      ? converts.map(
+          ({ column, other, converted }) =>
+            `${column.name}: ${column.type.displayName} and ${other.type.displayName} → ${converted.displayName}`,
+        )
+      : [];
+  // a Rename or Restrict the inputs would get only with Convert types ticked:
+  // the problems name the names or counts, never the types, so say so
+  const isFixOnceConverted =
+    !widenTypes &&
+    !rename &&
+    !restrict &&
+    !conversions.length &&
+    !untyped.length &&
+    (planConcatRename(first, second, true) !== undefined ||
+      planConcatRestrict(first, second, true) !== undefined);
+  return (
+    <div className="flex flex-col gap-2 text-base">
+      <div className="text-[var(--color-text-secondary)]">
+        {CONCAT_EDITOR_TEXT}
+      </div>
+      <label
+        className="flex items-center gap-2"
+        title={CONCAT_CONVERT_TYPES_HINT}
+      >
+        <input
+          type="checkbox"
+          checked={widenTypes}
+          disabled={readOnly}
+          onChange={(event) => draft.setWidenTypes(event.target.checked)}
+        />
+        Convert types
+      </label>
+      {isFixOnceConverted && (
+        <div className="text-sm text-[var(--color-status-warn)]">
+          {CONCAT_FIX_NEEDS_CONVERT_TEXT}
+        </div>
+      )}
+      <table
+        aria-label="Columns by position"
+        className="w-full table-fixed border-collapse"
+      >
+        <thead>
+          <tr className="border-b border-[var(--color-border-subtle)] text-left text-sm text-[var(--color-text-secondary)]">
+            <th className="w-8 px-1 font-normal">#</th>
+            <th className="px-1 font-normal">{firstLabel}</th>
+            <th className="px-1 font-normal">{secondLabel}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {positions.map((index) => (
+            <tr
+              key={index}
+              className="border-b border-[var(--color-border-subtle)] align-top"
+            >
+              <th
+                scope="row"
+                className="px-1 py-0.5 text-left font-normal text-[var(--color-text-secondary)]"
+              >
+                {index + 1}
+              </th>
+              <CubeConcatCell
+                column={first.columns[index]}
+                other={second.columns[index]}
+                otherLabel={secondLabel}
+                widenTypes={widenTypes}
+              />
+              <CubeConcatCell
+                column={second.columns[index]}
+                other={first.columns[index]}
+                otherLabel={firstLabel}
+                widenTypes={widenTypes}
+              />
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {conversions.length > 0 && (
+        <CubeConcatFix
+          text={CONCAT_CONVERT_FIX_TEXT}
+          label="Types to convert"
+          changes={conversions}
+          button="Convert types"
+          title={CONCAT_CONVERT_FIX_TITLE}
+          readOnly={readOnly}
+          disabled={readOnly}
+          onFix={() => draft.setWidenTypes(true)}
+        />
+      )}
+      {rename && (
+        <CubeConcatFix
+          text={CONCAT_RENAME_FIX_TEXT}
+          label="Columns to rename"
+          changes={rename.map(({ from, to }) => `${from} → ${to}`)}
+          button="Rename them"
+          title={CONCAT_RENAME_FIX_TITLE}
+          readOnly={readOnly}
+          disabled={!nodeEditor.canRenameConcatInput}
+          onFix={() => nodeEditor.renameConcatInput()}
+        />
+      )}
+      {restrict && (
+        <CubeConcatFix
+          text={getConcatRestrictFixText(restrictedInput, otherInput)}
+          label="Columns to drop"
+          changes={restrict.dropped}
+          button="Drop them"
+          title={getConcatRestrictFixTitle(restrictedInput, otherInput)}
+          readOnly={readOnly}
+          disabled={!nodeEditor.canRestrictConcatInput}
+          onFix={() => nodeEditor.restrictConcatInput()}
+        />
+      )}
+      {untyped.length > 0 && (
+        <div
+          className="break-words text-sm text-[var(--color-status-warn)]"
+          title={TYPE_UNKNOWN.description}
+        >
+          {getConcatUntypedWarning(untyped)}
+        </div>
+      )}
+    </div>
+  );
+});