@finos/legend-cube-builder 0.0.3 → 0.0.5

package/src/components/editors/CubePartitionEditor.tsx

@@ -0,0 +1,208 @@
+/**
+ * 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 {
+  AggregationFunction,
+  getAvailableAggregations,
+  isSortableType,
+  type Schema,
+  validateColumnAggregation,
+  WINDOW_RANK_FUNCTIONS,
+  WINDOW_ROW_FUNCTIONS,
+} from '@finos/legend-cube';
+import { guaranteeType } from '@finos/legend-shared';
+import { observer } from 'mobx-react-lite';
+import {
+  COLUMN_NAME_RULES_HINT,
+  CUBE_PARTITION_COLUMN_DISABLED_REASON,
+  getPartitionNoColumnText,
+  PARTITION_EDITOR_NOTES,
+  READ_ONLY_CUBE_TITLE,
+} from '../../__lib__/LegendCubeLabels.js';
+import type { CubeAggregationRow } from '../../stores/editors/CubeAggregationRows.js';
+import { CubePartitionDraft } from '../../stores/editors/CubePartitionDraft.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeAggregationRowEditor } from './CubeAggregationRowEditor.js';
+import { CubeColumnChecklist } from './CubeColumnChecklist.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+import {
+  CubeSortRowEditor,
+  getSortRowProblems,
+  getTakenSortColumns,
+} from './CubeSortRowEditor.js';
+
+const FUNCTIONS = 'Window functions';
+const COLUMNS = 'Partition columns';
+const SORTS = 'Sort columns';
+
+/** The functions that take no column, after the column functions */
+const NO_COLUMN_FUNCTIONS: readonly string[] = [
+  AggregationFunction.COUNT_ROWS,
+  ...WINDOW_RANK_FUNCTIONS,
+];
+
+/**
+ * The functions a row can take: those its column's type offers, or every
+ * column function before a column is picked, then the row functions (Lag,
+ * Lead, First, Last) on a column a window can sort by, then Count rows and
+ * the rank functions; a function the row holds that isn't among them (an
+ * unknown one kept as saved, or one its column doesn't offer) stays listed,
+ * so the problem can be seen and fixed
+ */
+const functionOptions = (row: CubeAggregationRow, schema: Schema): string[] => {
+  const type = row.column ? schema.lookup(row.column)?.type : undefined;
+  const offered: string[] = [
+    ...(type
+      ? getAvailableAggregations(type)
+      : Object.values(AggregationFunction).filter(
+          (fn) => fn !== AggregationFunction.COUNT_ROWS,
+        )),
+    ...(type === undefined || isSortableType(type) ? WINDOW_ROW_FUNCTIONS : []),
+    ...NO_COLUMN_FUNCTIONS,
+  ];
+  return row.function && !offered.includes(row.function)
+    ? [row.function, ...offered]
+    : offered;
+};
+
+/**
+ * The Partition editor (spec §17.6, PLAN §11.6, §11.9), in the original's
+ * order (Q4): rows of window function column, function, its offset or bucket
+ * count when it takes one, and output name; the
+ * partition columns, each ticked (a column that can't be compared is shown
+ * but can't be ticked); then the sort rows, as a Sort's. Each row shows its
+ * first problem, as the node checks it. Window functions can always be added;
+ * a sort row only while a sortable column has none. The lists scroll on their
+ * own, so the editor fits wherever it is shown.
+ */
+export const CubePartitionEditor = observer((props: CubeNodeEditorProps) => {
+  const { readOnly } = props;
+  const draft = guaranteeType(props.draft, CubePartitionDraft);
+  const [schema] = props.inputSchemas as [Schema];
+  const { aggregations, aggregationUse, sortRows } = draft;
+  // a row's problem, as the node Apply stores will judge it (the original
+  // until something changes, whose blank sort key still counts as a sort);
+  // a row left out has none
+  const { aggregationUse: judgedUse } = draft.build();
+  let aggregationIndex = 0;
+  const problems = draft.rows.map((row) => {
+    if (!draft.isBuiltRow(row)) {
+      return undefined;
+    }
+    const errors: string[] = [];
+    validateColumnAggregation(
+      aggregations,
+      aggregationIndex,
+      schema,
+      errors,
+      judgedUse,
+    );
+    aggregationIndex += 1;
+    return errors[0];
+  });
+  const sortProblems = getSortRowProblems(sortRows, schema);
+  const sortable = schema.columns.filter((column) =>
+    isSortableType(column.type),
+  );
+  const canAddSortRow = !readOnly && sortRows.length < sortable.length;
+  return (
+    <div className="flex flex-col gap-2 text-base">
+      <span>{FUNCTIONS}</span>
+      <ul aria-label={FUNCTIONS}>
+        {draft.rows.map((row, index) => (
+          <CubeAggregationRowEditor
+            key={row.key}
+            row={row}
+            position={index + 1}
+            schema={schema}
+            use={aggregationUse}
+            functions={functionOptions(row, schema)}
+            noColumnText={getPartitionNoColumnText}
+            problem={problems[index]}
+            readOnly={readOnly}
+            onColumn={(column) => draft.setColumn(row.key, column)}
+            onFunction={(fn) => draft.setFunction(row.key, fn)}
+            onSetting={(setting, text) =>
+              draft.setSetting(row.key, setting, text)
+            }
+            onName={(name) => draft.setName(row.key, name)}
+            onRemove={() => draft.removeRow(row.key)}
+          />
+        ))}
+      </ul>
+      <div>
+        <CubeButton
+          title="Add a window function"
+          disabled={readOnly}
+          onClick={() => draft.addRow()}
+        >
+          Add window function
+        </CubeButton>
+      </div>
+      <CubeColumnChecklist
+        label={COLUMNS}
+        schema={schema}
+        picked={draft.columns}
+        disabledReason={CUBE_PARTITION_COLUMN_DISABLED_REASON}
+        clearTitle="Untick every partition column: one window over all the rows"
+        readOnly={readOnly}
+        onToggle={(name) => draft.toggleColumn(name, schema)}
+        onClear={() => draft.clearColumns()}
+      />
+      <span>{SORTS}</span>
+      <ul aria-label={SORTS}>
+        {sortRows.map((row, index) => (
+          <CubeSortRowEditor
+            key={row.key}
+            row={row}
+            position={index + 1}
+            count={sortRows.length}
+            schema={schema}
+            takenColumns={getTakenSortColumns(sortRows, row)}
+            problem={sortProblems[index]}
+            readOnly={readOnly}
+            onColumn={(column) => draft.setSortColumn(row.key, column)}
+            onDirection={(direction) =>
+              draft.setSortDirection(row.key, direction)
+            }
+            onMove={(offset) => draft.moveSortRow(row.key, offset)}
+            onRemove={() => draft.removeSortRow(row.key)}
+          />
+        ))}
+      </ul>
+      <div>
+        <CubeButton
+          title={
+            readOnly
+              ? READ_ONLY_CUBE_TITLE
+              : canAddSortRow
+                ? 'Add a column to sort the window by'
+                : 'Every column that can be sorted already has a row'
+          }
+          disabled={!canAddSortRow}
+          onClick={() => draft.addSortRow()}
+        >
+          Add sort column
+        </CubeButton>
+      </div>
+      <ul className="flex list-disc flex-col gap-1 pl-4 text-sm text-[var(--color-text-secondary)]">
+        {[...PARTITION_EDITOR_NOTES, COLUMN_NAME_RULES_HINT].map((note) => (
+          <li key={note}>{note}</li>
+        ))}
+      </ul>
+    </div>
+  );
+});

package/src/components/editors/CubePivotEditor.tsx

@@ -0,0 +1,277 @@
+/**
+ * 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 {
+  AggregationFunction,
+  getAggregationDisplayName,
+  getAvailableAggregations,
+  getLiteralText,
+  getPivotColumnNames,
+  isPivotableType,
+  isSortableType,
+  type LiteralValue,
+  type Schema,
+} from '@finos/legend-cube';
+import { guaranteeType } from '@finos/legend-shared';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import {
+  getPivotValuesCutNotice,
+  PIVOT_COLUMN_DISABLED_REASON,
+  PIVOT_EDITOR_NOTES,
+  PIVOT_NO_VALUES_NOTICE,
+} from '../../__lib__/LegendCubeLabels.js';
+import { CubePivotDraft } from '../../stores/editors/CubePivotDraft.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeColumnChecklist } from './CubeColumnChecklist.js';
+import { CubeColumnPicker } from './CubeColumnPicker.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+
+const ROWS = 'Row columns';
+
+/**
+ * The functions the aggregation can take: those its column's type offers,
+ * or every column function before one is picked, then Count rows, never
+ * Distinct Value (PLAN §11.12); one it holds that isn't among them stays
+ * listed, so the problem can be seen and fixed
+ */
+const functionOptions = (
+  fn: string,
+  column: string | undefined,
+  schema: Schema,
+): string[] => {
+  const type = column ? schema.lookup(column)?.type : undefined;
+  const offered: string[] = [
+    ...(type
+      ? getAvailableAggregations(type)
+      : Object.values(AggregationFunction).filter(
+          (each) => each !== AggregationFunction.COUNT_ROWS,
+        )
+    ).filter((each) => each !== AggregationFunction.DISTINCT_VALUE),
+    AggregationFunction.COUNT_ROWS,
+  ];
+  return fn && !offered.includes(fn) ? [fn, ...offered] : offered;
+};
+
+const sameValue = (a: LiteralValue, b: LiteralValue): boolean =>
+  a.kind === b.kind && a.value === b.value;
+
+/** The values to tick: those loaded, then those picked that weren't */
+const listedValues = (draft: CubePivotDraft): LiteralValue[] => {
+  const loaded = draft.loaded?.values ?? [];
+  return [
+    ...loaded,
+    ...draft.values.filter(
+      (value) => !loaded.some((each) => sameValue(each, value)),
+    ),
+  ];
+};
+
+/**
+ * The Pivot editor (PLAN §11.12): the row columns, ticked; the pivot column;
+ * its values, loaded from the engine and ticked, each named as its column
+ * will be; then the aggregation, a function and its column. The node's
+ * problems show under it, as for any node.
+ */
+export const CubePivotEditor = observer((props: CubeNodeEditorProps) => {
+  const { readOnly } = props;
+  const draft = guaranteeType(props.draft, CubePivotDraft);
+  const [schema] = props.inputSchemas as [Schema];
+  const { aggregation } = draft;
+  const takesNoColumn = aggregation.function === AggregationFunction.COUNT_ROWS;
+  const values = listedValues(draft);
+  const names = getPivotColumnNames(draft.rows, draft.values);
+  return (
+    <div className="flex flex-col gap-2 text-base">
+      <CubeColumnChecklist
+        label={ROWS}
+        schema={schema}
+        picked={draft.rows}
+        unpickableReason={(column) =>
+          column.name === draft.column
+            ? PIVOT_COLUMN_DISABLED_REASON.PIVOT_COLUMN
+            : column.name === aggregation.column
+              ? PIVOT_COLUMN_DISABLED_REASON.AGGREGATED
+              : isSortableType(column.type)
+                ? undefined
+                : PIVOT_COLUMN_DISABLED_REASON.NOT_GROUPABLE
+        }
+        clearTitle="Untick every row column: one row for all the rows"
+        readOnly={readOnly}
+        onToggle={(name) => draft.toggleRow(name, schema)}
+        onClear={() => draft.clearRows()}
+      />
+      <div className="flex items-center gap-2">
+        <span className="shrink-0">Pivot column</span>
+        <CubeColumnPicker
+          label="Pivot column"
+          schema={schema}
+          value={draft.column}
+          disabled={readOnly}
+          onChange={(name) => draft.setColumn(name)}
+          isColumnDisabled={(column) =>
+            !isPivotableType(column.type)
+              ? PIVOT_COLUMN_DISABLED_REASON.NOT_PIVOTABLE
+              : draft.rows.includes(column.name)
+                ? PIVOT_COLUMN_DISABLED_REASON.ROW_COLUMN
+                : column.name === aggregation.column
+                  ? PIVOT_COLUMN_DISABLED_REASON.AGGREGATED
+                  : undefined
+          }
+        />
+      </div>
+      <div className="flex items-center gap-2">
+        <span>Values</span>
+        <span className="flex-1" />
+        <CubeButton
+          title="Ask the engine for the pivot column's values"
+          disabled={readOnly || !draft.column || draft.loading}
+          onClick={() => {
+            flowResult(draft.loadValues()).catch(
+              draft.editorState.host.applicationStore.alertUnhandledError,
+            );
+          }}
+        >
+          {draft.loading ? 'Loading…' : 'Load values'}
+        </CubeButton>
+        <CubeButton
+          title="Tick every value listed that can be"
+          disabled={readOnly || !draft.loaded?.values.length}
+          onClick={() => draft.pickAllValues()}
+        >
+          All
+        </CubeButton>
+        <CubeButton
+          title="Untick every value"
+          aria-label="None of the values"
+          disabled={readOnly || !draft.values.length}
+          onClick={() => draft.clearValues()}
+        >
+          None
+        </CubeButton>
+      </div>
+      {draft.loadError && (
+        <div className="text-sm text-[var(--color-status-error)]">
+          {draft.loadError}
+        </div>
+      )}
+      {values.length > 0 && (
+        <ul
+          aria-label="Values"
+          className="max-h-40 overflow-y-auto rounded-sm border border-[var(--color-border-subtle)]"
+        >
+          {values.map((value) => {
+            const text = getLiteralText(value);
+            const picked = draft.values.some((each) => sameValue(each, value));
+            const reason = draft.untickableReason(value);
+            const name =
+              names[draft.values.findIndex((each) => sameValue(each, value))];
+            return (
+              <li key={`${value.kind}:${text}`}>
+                <label
+                  className={clsx(
+                    'flex items-center gap-2 px-2',
+                    reason !== undefined && 'text-[var(--color-text-disabled)]',
+                  )}
+                  title={reason}
+                >
+                  <input
+                    type="checkbox"
+                    checked={picked}
+                    disabled={readOnly || (reason !== undefined && !picked)}
+                    onChange={() => draft.toggleValue(value)}
+                  />
+                  <span className="min-w-0 truncate">
+                    {text === '' ? '(empty text)' : text}
+                  </span>
+                  {reason !== undefined && !picked && (
+                    <span className="shrink-0 text-sm text-[var(--color-text-secondary)]">
+                      {`(${reason})`}
+                    </span>
+                  )}
+                  {picked && name !== undefined && name !== text && (
+                    <span className="text-sm text-[var(--color-text-secondary)]">
+                      {`as ${name}`}
+                    </span>
+                  )}
+                </label>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+      {draft.loaded?.values.length === 0 && (
+        <div className="text-sm text-[var(--color-text-secondary)]">
+          {PIVOT_NO_VALUES_NOTICE}
+        </div>
+      )}
+      {draft.loaded?.more && (
+        <div className="text-sm text-[var(--color-text-secondary)]">
+          {getPivotValuesCutNotice(draft.loaded.values.length)}
+        </div>
+      )}
+      <div className="flex items-center gap-2">
+        <span className="shrink-0">Aggregation</span>
+        <select
+          aria-label="Aggregation function"
+          className="h-6 w-36 shrink-0 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base"
+          value={aggregation.function}
+          disabled={readOnly}
+          onChange={(event) => draft.setFunction(event.target.value)}
+        >
+          {!aggregation.function && (
+            <option value="" disabled={true}>
+              Pick a function
+            </option>
+          )}
+          {functionOptions(
+            aggregation.function,
+            aggregation.column,
+            schema,
+          ).map((fn) => (
+            <option key={fn} value={fn}>
+              {getAggregationDisplayName(fn)}
+            </option>
+          ))}
+        </select>
+        {takesNoColumn ? (
+          <span className="text-[var(--color-text-secondary)]">Every row</span>
+        ) : (
+          <CubeColumnPicker
+            label="Aggregation column"
+            schema={schema}
+            value={aggregation.column}
+            disabled={readOnly}
+            onChange={(name) => draft.setAggregationColumn(name)}
+            isColumnDisabled={(column) =>
+              column.name === draft.column
+                ? PIVOT_COLUMN_DISABLED_REASON.PIVOT_COLUMN
+                : draft.rows.includes(column.name)
+                  ? PIVOT_COLUMN_DISABLED_REASON.ROW_COLUMN
+                  : undefined
+            }
+          />
+        )}
+      </div>
+      <ul className="flex list-disc flex-col gap-1 pl-4 text-sm text-[var(--color-text-secondary)]">
+        {PIVOT_EDITOR_NOTES.map((note) => (
+          <li key={note}>{note}</li>
+        ))}
+      </ul>
+    </div>
+  );
+});

package/src/components/editors/CubeRenameEditor.tsx

@@ -18,7 +18,10 @@ 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 {
+  COLUMN_NAME_RULES_HINT,
+  READ_ONLY_CUBE_TITLE,
+} from '../../__lib__/LegendCubeLabels.js';
 import {
   type CubeRenameRow,
   CubeRenameDraft,
@@ -109,7 +112,7 @@ export const CubeRenameEditor = observer((props: CubeNodeEditorProps) => {
   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">
+      <ul aria-label="Column renames">
         {draft.rows.map((row, index) => (
           <CubeRenameRowEditor
             key={row.key}
@@ -125,9 +128,11 @@ export const CubeRenameEditor = observer((props: CubeNodeEditorProps) => {
       <div>
         <CubeButton
           title={
-            canAddRow
-              ? 'Add a column to rename'
-              : 'Every column of the input already has a row'
+            readOnly
+              ? READ_ONLY_CUBE_TITLE
+              : canAddRow
+                ? 'Add a column to rename'
+                : 'Every column of the input already has a row'
           }
           disabled={!canAddRow}
           onClick={() => draft.addRow()}

package/src/components/editors/CubeRestrictEditor.tsx

@@ -17,7 +17,10 @@
 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 {
+  getColumnTypeLabel,
+  getExactColumnTypeLabel,
+} from '../../__lib__/LegendCubeLabels.js';
 import { CubeRestrictDraft } from '../../stores/editors/CubeRestrictDraft.js';
 import { CubeButton } from '../CubeButton.js';
 import { CubeColumnTypeIcon } from './CubeColumnPicker.js';
@@ -61,7 +64,7 @@ export const CubeRestrictEditor = observer((props: CubeNodeEditorProps) => {
       </div>
       <ul
         aria-label={KEEP}
-        className="max-h-80 overflow-auto rounded-sm border border-[var(--color-border-subtle)]"
+        className="rounded-sm border border-[var(--color-border-subtle)]"
       >
         {schema.columns.map((column) => (
           <li key={column.name}>
@@ -77,7 +80,10 @@ export const CubeRestrictEditor = observer((props: CubeNodeEditorProps) => {
                 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)]">
+              <span
+                className="shrink-0 text-sm text-[var(--color-text-muted)]"
+                title={getExactColumnTypeLabel(column)}
+              >
                 {getColumnTypeLabel(column)}
               </span>
             </label>

package/src/components/editors/CubeServiceSourceEditor.tsx

@@ -0,0 +1,77 @@
+/**
+ * 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 { ServiceSource } from '@finos/legend-cube';
+import { PanelLoadingIndicator } from '@finos/legend-art';
+import { guaranteeType } from '@finos/legend-shared';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { CUBE_PENDING_LABEL } from '../../__lib__/LegendCubeLabels.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeSchemaColumnsTable } from '../CubeSchemaColumnsTable.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+
+/**
+ * A service (PLAN §6.4), in progress: which service it is, its columns once
+ * Cube can read services, else why it can't, and Refresh, which types it
+ * again
+ */
+export const CubeServiceSourceEditor = observer(
+  (props: CubeNodeEditorProps) => {
+    const { editorState } = props;
+    const source = guaranteeType(props.draft.original, ServiceSource);
+    const { resolution } = source;
+    const refreshing = editorState.isPendingSource(source);
+    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">
+          <dt className="text-[var(--color-text-secondary)]">Service</dt>
+          <dd className="min-w-0 break-all">{source.service}</dd>
+          <dt className="text-[var(--color-text-secondary)]">Pattern</dt>
+          <dd className="min-w-0 break-all">{source.pattern}</dd>
+        </dl>
+        <div className="flex items-center gap-2">
+          <CubeButton
+            title="Read the service's columns again"
+            disabled={refreshing}
+            onClick={() => {
+              flowResult(editorState.refreshSource(source.id)).catch(
+                editorState.host.applicationStore.alertUnhandledError,
+              );
+            }}
+          >
+            Refresh
+          </CubeButton>
+          {refreshing && (
+            <span className="text-base text-[var(--color-text-secondary)]">
+              {CUBE_PENDING_LABEL.REFRESHING_SOURCE}
+            </span>
+          )}
+        </div>
+        <PanelLoadingIndicator isLoading={refreshing} />
+        {resolution.kind === 'resolved' ? (
+          <CubeSchemaColumnsTable schema={resolution.schema} />
+        ) : (
+          <div className="whitespace-pre-wrap text-base text-[var(--color-text-secondary)]">
+            {resolution.kind === 'failed'
+              ? resolution.message
+              : 'The service has not been typed yet.'}
+          </div>
+        )}
+      </div>
+    );
+  },
+);