@finos/legend-cube-builder 0.0.2 → 0.0.4

package/src/components/editors/CubeNodeEditorPanel.tsx

@@ -14,25 +14,31 @@
  * limitations under the License.
  */
 
-import { QuestionCircleIcon, TimesIcon } from '@finos/legend-art';
+import { QuestionCircleIcon, TimesIcon, WarningIcon } from '@finos/legend-art';
 import {
   isIncompleteError,
   isSchemasError,
+  isTypingError,
   type QueryNode,
   type Schema,
   UnknownNode,
 } from '@finos/legend-cube';
 import { observer } from 'mobx-react-lite';
+import { useEffect, useId, useRef } from 'react';
 import {
   CUBE_NODE_HELP_TEXT,
   SELECT_NODE_TOOLTIP,
 } from '../../__lib__/LegendCubeHelpText.js';
-import { READ_ONLY_CUBE_TITLE } from '../../__lib__/LegendCubeLabels.js';
+import {
+  READ_ONLY_CUBE_TITLE,
+  toEditorTitle,
+} from '../../__lib__/LegendCubeLabels.js';
 import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
 import { CUBE_NODE_DRAFT_FACTORIES } from '../../stores/editors/CubeNodeDraftRegistry.js';
 import { CubeButton } from '../CubeButton.js';
 import { CubeNodeIcon } from '../CubeNodeIcon.js';
+import { returnFocusToCubeCanvasNode } from '../canvas/CubeCanvasNodeFocus.js';
 import { CUBE_NODE_EDITORS } from './CubeNodeEditorRegistry.js';
 
 /** The problems of the edited node against its inputs, as Apply would leave it */
@@ -42,26 +48,58 @@ const validateEdited = (
 ): string[] => {
   const errors: string[] = [];
   node.validate(inputSchemas, errors);
-  return [...new Set(errors)];
+  // waiting for the engine to type an Extend is no problem (PLAN §11.7)
+  return [...new Set(errors)].filter((error) => !isTypingError(error));
 };
 
 /**
- * The node editor, in a side panel (spec §17.5): the node's label and id, its
- * help, Select, and its type's editor. Edits stay in the panel until Apply
- * or closing it; Cancel drops them. While an input is missing or invalid,
- * the panel shows why instead of the editor, since there would be no
- * columns to pick.
+ * The node editor's frame (spec §17.5, PLAN §11.8): a title bar with the
+ * node's label and id, its help and Select; a body of 80px to a third of
+ * the window, which scrolls, with its type's editor; then its problems and
+ * Apply and Cancel, which stay in view. Edits stay in the editor until
+ * Apply or closing it; Cancel drops them. While an input is missing or
+ * invalid, the body shows why instead of the editor, since there would be
+ * no columns to pick.
  */
 export const CubeNodeEditorPanel = observer(
   (props: { editorState: CubeEditorState }) => {
     const { editorState } = props;
     const { nodeEditor, readOnly } = editorState;
+    const rootRef = useRef<HTMLDivElement>(null);
+    const titleId = useId();
+    // finishing first moves the focus out of a field in the editor, so text
+    // typed but not yet stored (a filter value is stored on blur) is applied
+    useEffect(
+      () =>
+        nodeEditor.addFlusher(
+          () => {
+            const focused = document.activeElement;
+            if (
+              focused instanceof HTMLElement &&
+              rootRef.current?.contains(focused)
+            ) {
+              focused.blur();
+            }
+          },
+          { first: true },
+        ),
+      [nodeEditor],
+    );
     const { node, draft, edited } = nodeEditor;
     if (!node || !draft || !edited) {
       return null;
     }
     const { query } = editorState.document;
     const definition = editorState.registry.get(node.type);
+    /** Closes the editor; the keyboard focus goes back to its node */
+    const closing = (close: () => unknown): void => {
+      const focused = document.activeElement;
+      const editor = rootRef.current;
+      close();
+      if (nodeEditor.nodeId === undefined) {
+        returnFocusToCubeCanvasNode(node.id, editor, focused);
+      }
+    };
     const isCapture = query.selected === node.id;
     const inputProblems = editorState
       .getNodeErrors(node.id)
@@ -76,13 +114,22 @@ export const CubeNodeEditorPanel = observer(
       .filter((schema): schema is Schema => schema !== undefined);
     const Editor = CUBE_NODE_EDITORS.get(node.type);
     const isEditable = CUBE_NODE_DRAFT_FACTORIES.has(node.type);
+    // a draft that waits, e.g. on a Validate, says why in place of its problems
+    const waiting = draft.applyDisabledReason;
     const problems =
-      isEditable && !inputProblems.length
+      isEditable && !inputProblems.length && waiting === undefined
         ? validateEdited(edited, inputSchemas)
         : [];
+    const warnings = editorState.getNodeWarnings(node);
     return (
       <div
-        className="flex h-full flex-col border-l border-[var(--color-border-default)] bg-[var(--color-bg-panel)]"
+        ref={rootRef}
+        className="flex flex-col rounded border border-[var(--color-border-default)] bg-[var(--color-bg-panel)] shadow-lg"
+        role="dialog"
+        aria-modal={false}
+        // focusable, so opening a node from the keyboard moves into it
+        tabIndex={-1}
+        aria-labelledby={titleId}
         data-testid={LEGEND_CUBE_TEST_ID.NODE_EDITOR}
       >
         <div className="flex h-8 shrink-0 items-center gap-2 border-b border-[var(--color-border-default)] bg-[var(--color-bg-panel-header)] px-2">
@@ -90,8 +137,8 @@ export const CubeNodeEditorPanel = observer(
             icon={definition?.icon}
             className="shrink-0 text-[var(--color-text-secondary)]"
           />
-          <span className="min-w-0 truncate text-lg font-medium">
-            {definition?.label ?? 'Unknown'}
+          <span id={titleId} className="min-w-0 truncate text-lg font-medium">
+            {toEditorTitle(definition?.label ?? 'Unknown')}
           </span>
           <span className="shrink-0 text-base text-[var(--color-text-muted)]">
             {node.id}
@@ -133,16 +180,28 @@ export const CubeNodeEditorPanel = observer(
             className="flex h-6 w-6 shrink-0 items-center justify-center text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]"
             title={
               nodeEditor.hasChanges && !readOnly
-                ? 'Close, applying the changes'
+                ? draft.applyDisabledReason !== undefined
+                  ? `Can't close yet: ${draft.applyDisabledReason}, or Cancel`
+                  : 'Close, applying the changes'
                 : 'Close'
             }
             aria-label="Close the editor"
-            onClick={() => nodeEditor.close()}
+            onClick={() => closing(() => nodeEditor.finish())}
           >
             <TimesIcon />
           </button>
         </div>
-        <div className="min-h-0 flex-1 overflow-auto p-2">
+        <div className="max-h-[33vh] min-h-[80px] overflow-y-auto p-2">
+          {warnings.map((warning) => (
+            <div
+              key={warning}
+              className="mb-2 flex gap-1 text-sm text-[var(--color-status-warn)]"
+              role="status"
+            >
+              <WarningIcon className="mt-0.5 shrink-0" aria-hidden={true} />
+              <span>{warning}</span>
+            </div>
+          ))}
           {inputProblems.length ? (
             <div
               className="text-base text-[var(--color-status-warn)]"
@@ -164,23 +223,33 @@ export const CubeNodeEditorPanel = observer(
               {`${node.describe()}: this node can't be edited.`}
             </div>
           )}
-          {problems.length > 0 && (
-            <div
-              className="mt-3 border-t border-[var(--color-border-subtle)] pt-2 text-base text-[var(--color-status-error)]"
-              role="alert"
-              aria-label="Problems"
-            >
-              {problems.map((problem) => (
-                <div key={problem}>{problem}</div>
-              ))}
-            </div>
-          )}
         </div>
+        {isEditable && !inputProblems.length && waiting !== undefined && (
+          // in place of the problems, under the body too
+          <div
+            className="shrink-0 break-words border-t border-[var(--color-border-default)] px-2 py-1 text-base text-[var(--color-text-secondary)]"
+            role="status"
+          >
+            {waiting}
+          </div>
+        )}
+        {problems.length > 0 && (
+          // under the body, so they stay in view while it scrolls
+          <div
+            className="max-h-[56px] shrink-0 overflow-y-auto break-words border-t border-[var(--color-border-default)] px-2 py-1 text-base text-[var(--color-status-error)]"
+            role="alert"
+            aria-label="Problems"
+          >
+            {problems.map((problem) => (
+              <div key={problem}>{problem}</div>
+            ))}
+          </div>
+        )}
         {isEditable && (
           <div className="flex h-10 shrink-0 items-center justify-end gap-2 border-t border-[var(--color-border-default)] px-2">
             <CubeButton
               title="Drop the changes and close"
-              onClick={() => nodeEditor.cancel()}
+              onClick={() => closing(() => nodeEditor.cancel())}
             >
               Cancel
             </CubeButton>
@@ -189,9 +258,14 @@ export const CubeNodeEditorPanel = observer(
               title={
                 readOnly
                   ? READ_ONLY_CUBE_TITLE
-                  : 'Store the changes, as one step to undo'
+                  : (draft.applyDisabledReason ??
+                    'Store the changes, as one step to undo')
+              }
+              disabled={
+                readOnly ||
+                !nodeEditor.hasChanges ||
+                draft.applyDisabledReason !== undefined
               }
-              disabled={readOnly || !nodeEditor.hasChanges}
               onClick={() => nodeEditor.apply()}
             >
               Apply

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,15 +15,42 @@
  */
 
 import {
+  Concat,
+  DataProductAccessPointSource,
+  Difference,
+  IngestDatasetSource,
+  Distinct,
+  Drop,
+  Extend,
   Filter,
+  Group,
   Join,
+  Limit,
+  Partition,
   RelationalTableSource,
+  Rename,
+  Restrict,
   type Schema,
+  Slice,
+  Sort,
 } 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';
+import { CubeSliceEditor } from './CubeSliceEditor.js';
+import { CubeSortEditor } from './CubeSortEditor.js';
 import { CubeSourceEditor } from './CubeSourceEditor.js';
 
 /**
@@ -56,6 +83,20 @@ 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],
+  [Distinct.TYPE, CubeDistinctEditor],
   [Join.TYPE, CubeJoinEditor],
+  [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>
+  );
+});