@finos/legend-cube-builder 0.0.3 → 0.0.4

package/src/components/editors/CubeNodeEditorPopper.tsx

@@ -0,0 +1,183 @@
+/**
+ * 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 { BasePopper } from '@finos/legend-art';
+import { useStore } from '@xyflow/react';
+import { observer } from 'mobx-react-lite';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { noop } from '@finos/legend-shared';
+import { autorun } from 'mobx';
+import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import type { CubeCanvasPosition } from '../canvas/CubeCanvasLayout.js';
+import {
+  getCubeNodeScreenRect,
+  isCubeNodeInView,
+  toDOMRect,
+} from '../canvas/CubeNodeEditorAnchor.js';
+import { returnFocusToCubeCanvasNode } from '../canvas/CubeCanvasNodeFocus.js';
+import { CubeNodeEditorPanel } from './CubeNodeEditorPanel.js';
+import { useCubeNodeEditorDismiss } from './useCubeNodeEditorDismiss.js';
+
+/**
+ * Every node type's editor is this wide (U1: 27rem, read at a 16px root;
+ * Legend's root is 62.5%, so it is written in pixels)
+ */
+export const CUBE_NODE_EDITOR_WIDTH = 432;
+
+/** Above the canvas and the grid, below MUI's dialogs (1300), so a dialog opened from the editor covers it */
+export const CUBE_NODE_EDITOR_Z_INDEX = 1250;
+
+/** The gap between the node and its editor, and between the editor and the window's edges */
+const GAP = 8;
+
+const MODIFIERS = [
+  { name: 'offset', options: { offset: [0, GAP] } },
+  {
+    name: 'flip',
+    options: { fallbackPlacements: ['top'], padding: GAP },
+  },
+  {
+    name: 'preventOverflow',
+    options: {
+      rootBoundary: 'viewport',
+      padding: GAP,
+      altAxis: true,
+      tether: false,
+    },
+  },
+];
+
+type CubePopperInstance = NonNullable<
+  Extract<
+    React.ComponentProps<typeof BasePopper>['popperRef'],
+    React.RefObject<unknown>
+  >['current']
+>;
+
+/**
+ * The node editor, floating below its node (PLAN §11.8, spec §17.5): one
+ * width for every node type, over the results grid if it must be, inside the
+ * window, above the node when there is no room below. It is rendered inside
+ * the canvas, whose pan and zoom it follows, and shown in a layer of its own
+ * so the canvas doesn't clip it. A node panned out of view hides its editor,
+ * which stays open with its edits.
+ */
+export const CubeNodeEditorPopper = observer(
+  (props: {
+    editorState: CubeEditorState;
+    /** Where the layout put each node */
+    positions: ReadonlyMap<string, CubeCanvasPosition>;
+  }) => {
+    const { editorState, positions } = props;
+    const { nodeId } = editorState.nodeEditor;
+    const transform = useStore((state) => state.transform);
+    const canvas = useStore((state) => state.domNode);
+    // a canvas that changes size may show or hide the node
+    useStore((state) => state.width);
+    useStore((state) => state.height);
+    const position = nodeId === undefined ? undefined : positions.get(nodeId);
+    const editorRef = useRef<HTMLDivElement>(null);
+    useCubeNodeEditorDismiss(editorState, editorRef);
+    // MUI's layer mounts its content a render later: watch the element itself
+    const [editorElement, setEditorElement] = useState<HTMLDivElement | null>(
+      null,
+    );
+    const popperRef = useRef<CubePopperInstance>(null);
+    // the editor placed again whenever its own content changes its size, e.g. a
+    // row added, so it stays inside the window
+    useEffect(() => {
+      if (!editorElement || typeof ResizeObserver === 'undefined') {
+        return undefined;
+      }
+      const resizeObserver = new ResizeObserver(() => {
+        popperRef.current?.update().catch(noop());
+      });
+      resizeObserver.observe(editorElement);
+      return () => resizeObserver.disconnect();
+    }, [editorElement]);
+    // the keyboard goes back to the node a shortcut closed the editor of
+    useEffect(
+      () =>
+        autorun(() => {
+          const target = editorState.nodeEditor.nodeToFocus;
+          if (target !== undefined) {
+            returnFocusToCubeCanvasNode(target, null, document.activeElement);
+            editorState.nodeEditor.clearNodeToFocus();
+          }
+        }),
+      [editorState],
+    );
+    // the popper reads the node's place whenever it positions the editor,
+    // which it does on every render, so one anchor serves the whole pan or
+    // zoom
+    const latest = useRef({ position, transform, canvas });
+    latest.current = { position, transform, canvas };
+    const anchor = useMemo(
+      () => ({
+        getBoundingClientRect: (): DOMRect => {
+          const current = latest.current;
+          return toDOMRect(
+            current.position && current.canvas
+              ? getCubeNodeScreenRect(
+                  current.position,
+                  current.transform,
+                  current.canvas.getBoundingClientRect(),
+                )
+              : { left: 0, top: 0, width: 0, height: 0 },
+          );
+        },
+      }),
+      [],
+    );
+    if (nodeId === undefined || !position || !canvas) {
+      return null;
+    }
+    const canvasRect = canvas.getBoundingClientRect();
+    const inView = isCubeNodeInView(
+      getCubeNodeScreenRect(position, transform, canvasRect),
+      canvasRect,
+    );
+    return (
+      <BasePopper
+        open={true}
+        // the editor inside is the dialog; the layer is no tooltip
+        role="presentation"
+        popperRef={popperRef}
+        anchorEl={anchor}
+        placement="bottom"
+        modifiers={MODIFIERS}
+        style={{
+          zIndex: CUBE_NODE_EDITOR_Z_INDEX,
+          width: CUBE_NODE_EDITOR_WIDTH,
+          visibility: inView ? undefined : 'hidden',
+        }}
+      >
+        {/* a right-click in the editor is the editor's, never the canvas's menu */}
+        <div
+          // portalled out of `.legend-cube`, so its styles name the layer too
+          className="legend-cube__node-editor-layer"
+          ref={(element) => {
+            editorRef.current = element;
+            setEditorElement(element);
+          }}
+          onContextMenu={(event) => event.stopPropagation()}
+        >
+          <CubeNodeEditorPanel editorState={editorState} />
+        </div>
+      </BasePopper>
+    );
+  },
+);

package/src/components/editors/CubeNodeEditorRegistry.ts

@@ -15,11 +15,18 @@
  */
 
 import {
+  Concat,
+  DataProductAccessPointSource,
+  Difference,
+  IngestDatasetSource,
   Distinct,
   Drop,
+  Extend,
   Filter,
+  Group,
   Join,
   Limit,
+  Partition,
   RelationalTableSource,
   Rename,
   Restrict,
@@ -29,9 +36,16 @@ import {
 } from '@finos/legend-cube';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
 import type { CubeNodeDraft } from '../../stores/editors/CubeNodeDraft.js';
+import { CubeConcatEditor } from './CubeConcatEditor.js';
+import { CubeDataProductSourceEditor } from './CubeDataProductSourceEditor.js';
+import { CubeDifferenceEditor } from './CubeDifferenceEditor.js';
+import { CubeIngestSourceEditor } from './CubeIngestSourceEditor.js';
 import { CubeDistinctEditor } from './CubeDistinctEditor.js';
+import { CubeExtendEditor } from './CubeExtendEditor.js';
 import { CubeFilterEditor } from './CubeFilterEditor.js';
+import { CubeGroupEditor } from './CubeGroupEditor.js';
 import { CubeJoinEditor } from './CubeJoinEditor.js';
+import { CubePartitionEditor } from './CubePartitionEditor.js';
 import { CubeRenameEditor } from './CubeRenameEditor.js';
 import { CubeRestrictEditor } from './CubeRestrictEditor.js';
 import { CubeRowCountEditor } from './CubeRowCountEditor.js';
@@ -69,7 +83,10 @@ export const CUBE_NODE_EDITORS: ReadonlyMap<
   React.FC<CubeNodeEditorProps>
 > = new Map<string, React.FC<CubeNodeEditorProps>>([
   [RelationalTableSource.TYPE, CubeSourceEditor],
+  [DataProductAccessPointSource.TYPE, CubeDataProductSourceEditor],
+  [IngestDatasetSource.TYPE, CubeIngestSourceEditor],
   [Sort.TYPE, CubeSortEditor],
+  [Group.TYPE, CubeGroupEditor],
   [Filter.TYPE, CubeFilterEditor],
   [Restrict.TYPE, CubeRestrictEditor],
   [Rename.TYPE, CubeRenameEditor],
@@ -78,4 +95,8 @@ export const CUBE_NODE_EDITORS: ReadonlyMap<
   [Drop.TYPE, CubeRowCountEditor],
   [Limit.TYPE, CubeRowCountEditor],
   [Slice.TYPE, CubeSliceEditor],
+  [Concat.TYPE, CubeConcatEditor],
+  [Difference.TYPE, CubeDifferenceEditor],
+  [Partition.TYPE, CubePartitionEditor],
+  [Extend.TYPE, CubeExtendEditor],
 ]);

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/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

@@ -61,7 +61,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}>

package/src/components/editors/CubeSortEditor.tsx

@@ -14,126 +14,18 @@
  * 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 { isSortableType, type Schema } 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 { READ_ONLY_CUBE_TITLE } from '../../__lib__/LegendCubeLabels.js';
+import { 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>
-    );
-  },
-);
+import {
+  CubeSortRowEditor,
+  getSortRowProblems,
+  getTakenSortColumns,
+} from './CubeSortRowEditor.js';
 
 /**
  * The Sort editor (spec §17.6: an ordered list of column and direction rows,
@@ -147,53 +39,39 @@ export const CubeSortEditor = observer((props: CubeNodeEditorProps) => {
   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 problems = getSortRowProblems(rows, schema);
   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">
+      <ul aria-label="Sort columns">
         {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),
-              )
-            }
+            takenColumns={getTakenSortColumns(rows, row)}
             problem={problems[index]}
             readOnly={readOnly}
+            onColumn={(column) => draft.setColumn(row.key, column)}
+            onDirection={(direction) => draft.setDirection(row.key, direction)}
+            onMove={(offset) => draft.moveRow(row.key, offset)}
+            onRemove={() => draft.removeRow(row.key)}
           />
         ))}
       </ul>
       <div>
         <CubeButton
           title={
-            canAddRow
-              ? 'Add a column to sort by'
-              : 'Every column that can be sorted already has a row'
+            readOnly
+              ? READ_ONLY_CUBE_TITLE
+              : canAddRow
+                ? 'Add a column to sort by'
+                : 'Every column that can be sorted already has a row'
           }
           disabled={!canAddRow}
           onClick={() => draft.addRow()}