@finos/legend-cube-builder 0.0.0-stage → 0.0.3

package/src/components/editors/CubeNodeEditorPanel.tsx

@@ -0,0 +1,215 @@
+/**
+ * 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 { QuestionCircleIcon, TimesIcon, WarningIcon } from '@finos/legend-art';
+import {
+  isIncompleteError,
+  isSchemasError,
+  type QueryNode,
+  type Schema,
+  UnknownNode,
+} from '@finos/legend-cube';
+import { observer } from 'mobx-react-lite';
+import {
+  CUBE_NODE_HELP_TEXT,
+  SELECT_NODE_TOOLTIP,
+} from '../../__lib__/LegendCubeHelpText.js';
+import { READ_ONLY_CUBE_TITLE } 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 { CUBE_NODE_EDITORS } from './CubeNodeEditorRegistry.js';
+
+/** The problems of the edited node against its inputs, as Apply would leave it */
+const validateEdited = (
+  node: QueryNode,
+  inputSchemas: readonly Schema[],
+): string[] => {
+  const errors: string[] = [];
+  node.validate(inputSchemas, errors);
+  return [...new Set(errors)];
+};
+
+/**
+ * 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.
+ */
+export const CubeNodeEditorPanel = observer(
+  (props: { editorState: CubeEditorState }) => {
+    const { editorState } = props;
+    const { nodeEditor, readOnly } = editorState;
+    const { node, draft, edited } = nodeEditor;
+    if (!node || !draft || !edited) {
+      return null;
+    }
+    const { query } = editorState.document;
+    const definition = editorState.registry.get(node.type);
+    const isCapture = query.selected === node.id;
+    const inputProblems = editorState
+      .getNodeErrors(node.id)
+      .filter((error) => isSchemasError(error) || isIncompleteError(error));
+    const inputSchemas = query
+      .getInputIds(node.id)
+      .map((inputId) =>
+        inputId === undefined
+          ? undefined
+          : editorState.analysis.schemas.get(inputId),
+      )
+      .filter((schema): schema is Schema => schema !== undefined);
+    const Editor = CUBE_NODE_EDITORS.get(node.type);
+    const isEditable = CUBE_NODE_DRAFT_FACTORIES.has(node.type);
+    const problems =
+      isEditable && !inputProblems.length
+        ? 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)]"
+        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">
+          <CubeNodeIcon
+            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>
+          <span className="shrink-0 text-base text-[var(--color-text-muted)]">
+            {node.id}
+          </span>
+          {definition?.beta && (
+            <span className="shrink-0 rounded-sm bg-[var(--color-accent)] px-1 text-xs font-medium text-[var(--color-text-on-accent)]">
+              BETA
+            </span>
+          )}
+          <span
+            className="shrink-0 text-[var(--color-text-secondary)]"
+            title={
+              CUBE_NODE_HELP_TEXT[node.type] ??
+              CUBE_NODE_HELP_TEXT[UnknownNode.TYPE]
+            }
+            role="img"
+            aria-label="Help"
+          >
+            <QuestionCircleIcon />
+          </span>
+          <span className="flex-1" />
+          {isCapture ? (
+            <span
+              className="shrink-0 text-base text-[var(--color-text-secondary)]"
+              title={SELECT_NODE_TOOLTIP}
+            >
+              (Selected)
+            </span>
+          ) : (
+            <button
+              className="shrink-0 text-base text-[var(--color-accent)] underline"
+              title={SELECT_NODE_TOOLTIP}
+              onClick={() => editorState.select(node.id)}
+            >
+              Select
+            </button>
+          )}
+          <button
+            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'
+                : 'Close'
+            }
+            aria-label="Close the editor"
+            onClick={() => nodeEditor.close()}
+          >
+            <TimesIcon />
+          </button>
+        </div>
+        <div className="min-h-0 flex-1 overflow-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)]"
+              role="alert"
+            >
+              {inputProblems.map((problem) => (
+                <div key={problem}>{problem}</div>
+              ))}
+            </div>
+          ) : Editor ? (
+            <Editor
+              editorState={editorState}
+              draft={draft}
+              inputSchemas={inputSchemas}
+              readOnly={readOnly}
+            />
+          ) : (
+            <div className="text-base text-[var(--color-text-secondary)]">
+              {`${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 && (
+          <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()}
+            >
+              Cancel
+            </CubeButton>
+            <CubeButton
+              primary={true}
+              title={
+                readOnly
+                  ? READ_ONLY_CUBE_TITLE
+                  : 'Store the changes, as one step to undo'
+              }
+              disabled={readOnly || !nodeEditor.hasChanges}
+              onClick={() => nodeEditor.apply()}
+            >
+              Apply
+            </CubeButton>
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/editors/CubeNodeEditorRegistry.ts

@@ -0,0 +1,81 @@
+/**
+ * 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 {
+  Distinct,
+  Drop,
+  Filter,
+  Join,
+  Limit,
+  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 { CubeDistinctEditor } from './CubeDistinctEditor.js';
+import { CubeFilterEditor } from './CubeFilterEditor.js';
+import { CubeJoinEditor } from './CubeJoinEditor.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';
+
+/**
+ * What the panel gives a node type's editor (PLAN §7.4). Edits go to the
+ * draft, which the panel's Apply stores; an action on the document goes
+ * through `editorState.nodeEditor` (e.g. `swapInputs`), which applies the
+ * draft first, so the panel never loses its edits under a replaced node.
+ */
+export interface CubeNodeEditorProps {
+  readonly editorState: CubeEditorState;
+  /** The node's draft, made by its type's factory in `CUBE_NODE_DRAFT_FACTORIES` */
+  readonly draft: CubeNodeDraft;
+  /**
+   * The schemas of the node's inputs, in port order, e.g. a Join's Left then
+   * Right. All are there: the panel shows the upstream error instead of the
+   * editor while an input is missing or invalid.
+   */
+  readonly inputSchemas: readonly Schema[];
+  /** The cube was saved by a newer version: show, don't edit */
+  readonly readOnly: boolean;
+}
+
+/**
+ * The editor of each node type, by type. A type without one shows its
+ * description; a type with one either has a draft factory in
+ * `CUBE_NODE_DRAFT_FACTORIES` or edits nothing (a source).
+ */
+export const CUBE_NODE_EDITORS: ReadonlyMap<
+  string,
+  React.FC<CubeNodeEditorProps>
+> = new Map<string, React.FC<CubeNodeEditorProps>>([
+  [RelationalTableSource.TYPE, CubeSourceEditor],
+  [Sort.TYPE, CubeSortEditor],
+  [Filter.TYPE, CubeFilterEditor],
+  [Restrict.TYPE, CubeRestrictEditor],
+  [Rename.TYPE, CubeRenameEditor],
+  [Distinct.TYPE, CubeDistinctEditor],
+  [Join.TYPE, CubeJoinEditor],
+  [Drop.TYPE, CubeRowCountEditor],
+  [Limit.TYPE, CubeRowCountEditor],
+  [Slice.TYPE, CubeSliceEditor],
+]);

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>
+  );
+});