@finos/legend-cube-builder 0.0.2 → 0.0.3

package/src/components/editors/CubeRenameEditor.tsx

@@ -0,0 +1,143 @@
+/**
+ * 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, TimesIcon } from '@finos/legend-art';
+import { type Schema, validateRenameMapping } from '@finos/legend-cube';
+import { guaranteeType } from '@finos/legend-shared';
+import { observer } from 'mobx-react-lite';
+import { COLUMN_NAME_RULES_HINT } from '../../__lib__/LegendCubeLabels.js';
+import {
+  type CubeRenameRow,
+  CubeRenameDraft,
+} from '../../stores/editors/CubeRenameDraft.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeColumnPicker } from './CubeColumnPicker.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+
+const CubeRenameRowEditor = observer(
+  (props: {
+    draft: CubeRenameDraft;
+    row: CubeRenameRow;
+    position: number;
+    schema: Schema;
+    problem: string | undefined;
+    readOnly: boolean;
+  }) => {
+    const { draft, row, position, schema, problem, readOnly } = props;
+    return (
+      <li className="flex flex-col gap-1 border-b border-[var(--color-border-subtle)] py-1">
+        <div className="grid grid-cols-[1fr_auto_1fr_auto] items-center gap-1">
+          <CubeColumnPicker
+            label={`Old column ${position}`}
+            schema={schema}
+            value={row.from}
+            disabled={readOnly}
+            onChange={(name) => draft.setFrom(row.key, name)}
+          />
+          <span className="text-[var(--color-text-secondary)]">→</span>
+          <input
+            aria-label={`New column name ${position}`}
+            aria-invalid={problem !== undefined}
+            title={problem}
+            className={clsx(
+              'h-6 min-w-0 rounded-sm border bg-[var(--color-bg-input)] px-1 text-base',
+              problem
+                ? 'border-[var(--color-status-error)]'
+                : 'border-[var(--color-border-default)]',
+            )}
+            type="text"
+            spellCheck={false}
+            value={row.to}
+            disabled={readOnly}
+            onChange={(event) => draft.setTo(row.key, event.target.value)}
+          />
+          <button
+            className="flex h-6 w-6 items-center justify-center text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] disabled:text-[var(--color-text-disabled)]"
+            aria-label={`Remove rename ${position}`}
+            title="Remove this rename"
+            disabled={readOnly}
+            onClick={() => draft.removeRow(row.key)}
+          >
+            <TimesIcon />
+          </button>
+        </div>
+        {problem && (
+          <div className="text-sm text-[var(--color-status-error)]">
+            {problem}
+          </div>
+        )}
+      </li>
+    );
+  },
+);
+
+/**
+ * The Rename editor (spec §17.6): rows of an old column, picked from the
+ * input, and its new name, typed. Each row shows its first problem, as the
+ * node checks it, and the rule for new names stays shown under the rows. The
+ * rows scroll on their own, so the editor fits wherever it is shown.
+ */
+export const CubeRenameEditor = observer((props: CubeNodeEditorProps) => {
+  const { readOnly } = props;
+  const draft = guaranteeType(props.draft, CubeRenameDraft);
+  const [schema] = props.inputSchemas as [Schema];
+  const { mappings } = draft;
+  // a row's problem, as the node will judge it; a blank row has none
+  let mappingIndex = 0;
+  const problems = draft.rows.map((row) => {
+    if (!row.from && !row.to) {
+      return undefined;
+    }
+    const errors: string[] = [];
+    validateRenameMapping(mappings, mappingIndex, schema, errors);
+    mappingIndex += 1;
+    return errors[0];
+  });
+  const canAddRow = !readOnly && draft.rows.length < schema.columns.length;
+  return (
+    <div className="flex flex-col gap-2 text-base">
+      <ul aria-label="Column renames" className="max-h-80 overflow-auto">
+        {draft.rows.map((row, index) => (
+          <CubeRenameRowEditor
+            key={row.key}
+            draft={draft}
+            row={row}
+            position={index + 1}
+            schema={schema}
+            problem={problems[index]}
+            readOnly={readOnly}
+          />
+        ))}
+      </ul>
+      <div>
+        <CubeButton
+          title={
+            canAddRow
+              ? 'Add a column to rename'
+              : 'Every column of the input already has a row'
+          }
+          disabled={!canAddRow}
+          onClick={() => draft.addRow()}
+        >
+          Add column to rename
+        </CubeButton>
+      </div>
+      <div className="text-sm text-[var(--color-text-secondary)]">
+        {COLUMN_NAME_RULES_HINT}
+      </div>
+    </div>
+  );
+});

package/src/components/editors/CubeRestrictEditor.tsx

@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Schema } from '@finos/legend-cube';
+import { guaranteeType } from '@finos/legend-shared';
+import { observer } from 'mobx-react-lite';
+import { getColumnTypeLabel } from '../../__lib__/LegendCubeLabels.js';
+import { CubeRestrictDraft } from '../../stores/editors/CubeRestrictDraft.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeColumnTypeIcon } from './CubeColumnPicker.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+
+const KEEP = 'Columns to keep';
+
+/**
+ * The Restrict editor (spec §17.6): the input's columns, in its order, each
+ * ticked to keep it. A saved column the input doesn't have stays listed, last
+ * and ticked, until it is unticked. The list scrolls on its own, so the
+ * editor fits wherever it is shown.
+ */
+export const CubeRestrictEditor = observer((props: CubeNodeEditorProps) => {
+  const { readOnly } = props;
+  const draft = guaranteeType(props.draft, CubeRestrictDraft);
+  const [schema] = props.inputSchemas as [Schema];
+  // each once, though a saved restrict may repeat one (validation reports it)
+  const missing = Array.from(
+    new Set(draft.columns.filter((name) => !schema.lookup(name))),
+  );
+  return (
+    <div className="flex flex-col gap-2 text-base">
+      <div className="flex items-center gap-2">
+        <span>{KEEP}</span>
+        <span className="flex-1" />
+        <CubeButton
+          title="Keep every column of the input"
+          disabled={readOnly}
+          onClick={() => draft.selectAll(schema)}
+        >
+          All
+        </CubeButton>
+        <CubeButton
+          title="Untick every column"
+          disabled={readOnly}
+          onClick={() => draft.clear()}
+        >
+          None
+        </CubeButton>
+      </div>
+      <ul
+        aria-label={KEEP}
+        className="max-h-80 overflow-auto rounded-sm border border-[var(--color-border-subtle)]"
+      >
+        {schema.columns.map((column) => (
+          <li key={column.name}>
+            <label className="flex items-center gap-2 px-1 py-0.5">
+              <input
+                type="checkbox"
+                checked={draft.columns.includes(column.name)}
+                disabled={readOnly}
+                onChange={() => draft.toggleColumn(column.name, schema)}
+              />
+              <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)}
+              </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={() => draft.toggleColumn(name, schema)}
+              />
+              <span className="min-w-0 truncate">{name || '(blank)'}</span>
+              <span className="shrink-0 text-sm">(not in the input)</span>
+            </label>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+});

package/src/components/editors/CubeRowCountEditor.tsx

@@ -0,0 +1,53 @@
+/**
+ * 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 { Drop, isPositiveWholeNumber, Limit } from '@finos/legend-cube';
+import { guaranteeType } from '@finos/legend-shared';
+import { observer } from 'mobx-react-lite';
+import { CubeRowCountDraft } from '../../stores/editors/CubeRowCountDraft.js';
+import { CubeIntegerField } from './CubeIntegerField.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+
+/** The field's label for each node type the editor serves */
+const ROW_COUNT_LABELS: Readonly<Record<string, string>> = {
+  [Drop.TYPE]: 'Rows to drop',
+  [Limit.TYPE]: 'Rows to keep',
+};
+
+/**
+ * The editor of a node whose one setting is a number of rows, a Limit or a
+ * Drop (spec §17.6: one integer field). Clearing the field leaves the size empty,
+ * which the panel reports; it never falls back to the default.
+ */
+export const CubeRowCountEditor = observer((props: CubeNodeEditorProps) => {
+  const { readOnly } = props;
+  const draft = guaranteeType(props.draft, CubeRowCountDraft);
+  const label = ROW_COUNT_LABELS[draft.original.type] ?? 'Rows';
+  return (
+    <div className="flex flex-col gap-2 text-base">
+      <label className="flex items-center gap-2">
+        <span>{label}</span>
+        <CubeIntegerField
+          label={label}
+          text={draft.sizeText}
+          invalid={!isPositiveWholeNumber(draft.size)}
+          disabled={readOnly}
+          onChange={(text) => draft.setSizeText(text)}
+        />
+      </label>
+    </div>
+  );
+});

package/src/components/editors/CubeSliceEditor.tsx

@@ -0,0 +1,69 @@
+/**
+ * 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 { isRowIndex } from '@finos/legend-cube';
+import { guaranteeType } from '@finos/legend-shared';
+import { observer } from 'mobx-react-lite';
+import { SLICE_RANGE_HINT } from '../../__lib__/LegendCubeLabels.js';
+import { CubeSliceDraft } from '../../stores/editors/CubeSliceDraft.js';
+import { CubeIntegerField } from './CubeIntegerField.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+
+const START = 'Start row index';
+const STOP = 'Stop row index';
+
+/**
+ * The Slice editor (spec §17.6): the start and stop row indexes, counting
+ * from 0, the start row kept and the stop row not (D5). A cleared field
+ * leaves its bound empty, which the panel reports.
+ */
+export const CubeSliceEditor = observer((props: CubeNodeEditorProps) => {
+  const { readOnly } = props;
+  const draft = guaranteeType(props.draft, CubeSliceDraft);
+  const { start, stop } = draft;
+  const validStart = isRowIndex(start);
+  const validStop = isRowIndex(stop);
+  // the stop is marked when it doesn't come after the start, too
+  const outOfOrder =
+    validStart && validStop && (start as number) >= (stop as number);
+  return (
+    <div className="flex flex-col gap-2 text-base">
+      <label className="flex items-center gap-2">
+        <span className="w-28">{START}</span>
+        <CubeIntegerField
+          label={START}
+          text={draft.startText}
+          invalid={!validStart}
+          disabled={readOnly}
+          onChange={(text) => draft.setStartText(text)}
+        />
+      </label>
+      <label className="flex items-center gap-2">
+        <span className="w-28">{STOP}</span>
+        <CubeIntegerField
+          label={STOP}
+          text={draft.stopText}
+          invalid={!validStop || outOfOrder}
+          disabled={readOnly}
+          onChange={(text) => draft.setStopText(text)}
+        />
+      </label>
+      <div className="text-sm text-[var(--color-text-secondary)]">
+        {SLICE_RANGE_HINT}
+      </div>
+    </div>
+  );
+});

package/src/components/editors/CubeSortEditor.tsx

@@ -0,0 +1,206 @@
+/**
+ * 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 { ArrowDownIcon, ArrowUpIcon, TimesIcon } from '@finos/legend-art';
+import {
+  isSortableType,
+  isSortDirection,
+  MESSAGE_CANNOT_HAVE_DUPLICATES,
+  type Schema,
+  type SchemaColumn,
+  SORT_DIRECTION_DESCRIPTIONS,
+  SORT_DIRECTIONS,
+  validateSortKey,
+} from '@finos/legend-cube';
+import { guaranteeType } from '@finos/legend-shared';
+import { observer } from 'mobx-react-lite';
+import { CUBE_SORT_COLUMN_DISABLED_REASON } from '../../__lib__/LegendCubeLabels.js';
+import {
+  type CubeSortRow,
+  CubeSortDraft,
+} from '../../stores/editors/CubeSortDraft.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeColumnPicker } from './CubeColumnPicker.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+
+const ROW_BUTTON_CLASS =
+  'flex h-6 w-6 items-center justify-center text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] disabled:text-[var(--color-text-disabled)]';
+
+const CubeSortRowEditor = observer(
+  (props: {
+    draft: CubeSortDraft;
+    row: CubeSortRow;
+    position: number;
+    count: number;
+    schema: Schema;
+    /** The columns of the other rows, which this row can't take */
+    takenColumns: ReadonlySet<string>;
+    problem: string | undefined;
+    readOnly: boolean;
+  }) => {
+    const {
+      draft,
+      row,
+      position,
+      count,
+      schema,
+      takenColumns,
+      problem,
+      readOnly,
+    } = props;
+    const isColumnDisabled = (column: SchemaColumn): string | undefined =>
+      !isSortableType(column.type)
+        ? CUBE_SORT_COLUMN_DISABLED_REASON.NOT_SORTABLE
+        : takenColumns.has(column.name)
+          ? CUBE_SORT_COLUMN_DISABLED_REASON.TAKEN
+          : undefined;
+    return (
+      <li className="flex flex-col gap-1 border-b border-[var(--color-border-subtle)] py-1">
+        <div className="grid grid-cols-[1fr_auto_auto_auto_auto] items-center gap-1">
+          <CubeColumnPicker
+            label={`Sort column ${position}`}
+            schema={schema}
+            value={row.column}
+            disabled={readOnly}
+            invalid={problem !== undefined}
+            isColumnDisabled={isColumnDisabled}
+            onChange={(name) => draft.setColumn(row.key, name)}
+          />
+          <select
+            aria-label={`Sort direction ${position}`}
+            className="h-6 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base"
+            value={row.direction}
+            disabled={readOnly}
+            onChange={(event) => {
+              const direction = event.target.value;
+              if (isSortDirection(direction)) {
+                draft.setDirection(row.key, direction);
+              }
+            }}
+          >
+            {SORT_DIRECTIONS.map((direction) => (
+              <option key={direction} value={direction}>
+                {SORT_DIRECTION_DESCRIPTIONS[direction]}
+              </option>
+            ))}
+          </select>
+          <button
+            className={ROW_BUTTON_CLASS}
+            aria-label={`Move sort column ${position} up`}
+            title="Sort by this column before the one above"
+            disabled={readOnly || position === 1}
+            onClick={() => draft.moveRow(row.key, -1)}
+          >
+            <ArrowUpIcon />
+          </button>
+          <button
+            className={ROW_BUTTON_CLASS}
+            aria-label={`Move sort column ${position} down`}
+            title="Sort by this column after the one below"
+            disabled={readOnly || position === count}
+            onClick={() => draft.moveRow(row.key, 1)}
+          >
+            <ArrowDownIcon />
+          </button>
+          <button
+            className={ROW_BUTTON_CLASS}
+            aria-label={`Remove sort column ${position}`}
+            title="Remove this sort column"
+            disabled={readOnly}
+            onClick={() => draft.removeRow(row.key)}
+          >
+            <TimesIcon />
+          </button>
+        </div>
+        {problem && (
+          <div className="text-sm text-[var(--color-status-error)]">
+            {problem}
+          </div>
+        )}
+      </li>
+    );
+  },
+);
+
+/**
+ * The Sort editor (spec §17.6: an ordered list of column and direction rows,
+ * added, removed and reordered). The first row sorts first. A column that
+ * can't be sorted, or that another row has, can't be picked; a saved one
+ * stays shown with its problem. The rows scroll on their own, so the editor
+ * fits wherever it is shown.
+ */
+export const CubeSortEditor = observer((props: CubeNodeEditorProps) => {
+  const { readOnly } = props;
+  const draft = guaranteeType(props.draft, CubeSortDraft);
+  const [schema] = props.inputSchemas as [Schema];
+  const { rows } = draft;
+  // a row's problem, as the node will judge it; a blank row has none
+  const problems = rows.map((row, index) => {
+    if (!row.column) {
+      return undefined;
+    }
+    const errors: string[] = [];
+    validateSortKey(row, schema, errors);
+    return (
+      errors[0] ??
+      (rows.slice(0, index).some(({ column }) => column === row.column)
+        ? MESSAGE_CANNOT_HAVE_DUPLICATES('Sort columns')
+        : undefined)
+    );
+  });
+  const sortable = schema.columns.filter((column) =>
+    isSortableType(column.type),
+  );
+  const canAddRow = !readOnly && rows.length < sortable.length;
+  return (
+    <div className="flex flex-col gap-2 text-base">
+      <ul aria-label="Sort columns" className="max-h-80 overflow-auto">
+        {rows.map((row, index) => (
+          <CubeSortRowEditor
+            key={row.key}
+            draft={draft}
+            row={row}
+            position={index + 1}
+            count={rows.length}
+            schema={schema}
+            takenColumns={
+              new Set(
+                rows
+                  .filter((other) => other.key !== row.key && other.column)
+                  .map(({ column }) => column),
+              )
+            }
+            problem={problems[index]}
+            readOnly={readOnly}
+          />
+        ))}
+      </ul>
+      <div>
+        <CubeButton
+          title={
+            canAddRow
+              ? 'Add a column to sort by'
+              : 'Every column that can be sorted already has a row'
+          }
+          disabled={!canAddRow}
+          onClick={() => draft.addRow()}
+        >
+          Add sort column
+        </CubeButton>
+      </div>
+    </div>
+  );
+});

package/src/components/editors/CubeSourceEditor.tsx

@@ -40,7 +40,6 @@ export const CubeSourceEditor = observer((props: CubeNodeEditorProps) => {
   const source = guaranteeType(props.draft.original, RelationalTableSource);
   const refreshing = editorState.isPendingSource(source);
   const { resolution } = source;
-  const warnings = editorState.warnings.get(source.key) ?? [];
   return (
     <div className="relative flex flex-col gap-2">
       <dl className="grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 text-base">
@@ -70,15 +69,6 @@ export const CubeSourceEditor = observer((props: CubeNodeEditorProps) => {
         )}
       </div>
       <PanelLoadingIndicator isLoading={refreshing} />
-      {warnings.map((warning) => (
-        <div
-          key={warning}
-          className="text-sm text-[var(--color-status-warn)]"
-          role="status"
-        >
-          {warning}
-        </div>
-      ))}
       {resolution.kind === 'resolved' ? (
         <table className="w-full text-base" aria-label="Columns">
           <thead>

package/src/components/editors/CubeValueEditor.tsx

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

package/src/components/grid/CubeGridRegion.tsx

@@ -259,6 +259,7 @@ export const CubeGridRegion = observer(
           ) : execution.result ? (
             <CubeResultGrid
               key={execution.result.id}
+              editorState={editorState}
               result={execution.result}
               darkMode={darkMode}
             />