@finos/legend-cube-builder 0.0.2 → 0.0.4

package/src/components/editors/CubeDataProductSourceEditor.tsx

@@ -0,0 +1,134 @@
+/**
+ * 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 { DataProductAccessPointSource } 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_DATA_PRODUCT_ENVIRONMENT_LABELS,
+  CUBE_SNAPSHOT_VERSION_LABEL,
+} from '../../__lib__/LegendCubeDataProductLabels.js';
+import { CUBE_PENDING_LABEL } from '../../__lib__/LegendCubeLabels.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeSchemaColumnsTable } from '../CubeSchemaColumnsTable.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+import { CubeWarehouseControl } from './CubeWarehouseControl.js';
+
+/**
+ * A data product's access point (PLAN §6.8): where it reads from, the
+ * cube's project, class and warehouse, which can be edited, its columns as
+ * the deployed artifact types them, and Refresh, which reads them again
+ */
+export const CubeDataProductSourceEditor = observer(
+  (props: CubeNodeEditorProps) => {
+    const { editorState, readOnly } = props;
+    const source = guaranteeType(
+      props.draft.original,
+      DataProductAccessPointSource,
+    );
+    const { resolution } = source;
+    const refreshing = editorState.isPendingSource(source);
+    const runtime = editorState.dataProductRuntime;
+    const { project } = runtime;
+    const marketplaceLink = project
+      ? editorState.host.dataProductCatalog?.getMarketplaceLink({
+          dataProductId: source.dataProductId,
+          deploymentId: source.deploymentId,
+          environmentType: project.environmentType,
+          accessPointGroup: source.accessPointGroup,
+        })
+      : undefined;
+    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)]">Data product</dt>
+          <dd className="min-w-0 break-all" title={source.dataProduct}>
+            {source.dataProductName}
+            {marketplaceLink !== undefined && (
+              <a
+                className="ml-2 text-[var(--color-accent)] underline"
+                href={marketplaceLink}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Open in Marketplace
+              </a>
+            )}
+          </dd>
+          <dt className="text-[var(--color-text-secondary)]">Access point</dt>
+          <dd className="min-w-0 break-all">{source.accessPoint}</dd>
+          <dt className="text-[var(--color-text-secondary)]">Group</dt>
+          <dd className="min-w-0 break-all">{source.accessPointGroup}</dd>
+          {project && (
+            <>
+              <dt className="text-[var(--color-text-secondary)]">Project</dt>
+              <dd className="min-w-0 break-all">
+                {`${project.groupId}:${project.artifactId}:${project.versionId}`}
+                {runtime.isSnapshot && (
+                  <span className="block text-sm text-[var(--color-status-warn)]">
+                    {CUBE_SNAPSHOT_VERSION_LABEL}
+                  </span>
+                )}
+              </dd>
+              <dt className="text-[var(--color-text-secondary)]">
+                Environment
+              </dt>
+              <dd className="min-w-0 break-all">
+                {CUBE_DATA_PRODUCT_ENVIRONMENT_LABELS[project.environmentType]}
+              </dd>
+              <dt className="self-center text-[var(--color-text-secondary)]">
+                Warehouse
+              </dt>
+              <dd className="min-w-0">
+                <CubeWarehouseControl runtime={runtime} readOnly={readOnly} />
+              </dd>
+            </>
+          )}
+        </dl>
+        <div className="flex items-center gap-2">
+          <CubeButton
+            title="Read the access point's columns again from the deployed data product"
+            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="text-base text-[var(--color-text-secondary)]">
+            {resolution.kind === 'failed'
+              ? resolution.message
+              : 'The access point has not been typed yet.'}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/editors/CubeDifferenceEditor.tsx

@@ -0,0 +1,87 @@
+/**
+ * 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, noop } from '@finos/legend-shared';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
+import { DIFFERENCE_EDITOR_NOTES } from '../../__lib__/LegendCubeLabels.js';
+import {
+  CubeDifferenceDraft,
+  getDifferenceColumnUnpickableReason,
+} from '../../stores/editors/CubeDifferenceDraft.js';
+import { joinKeyListsOf } from '../../stores/editors/CubeJoinKeyPairs.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeColumnChecklist } from './CubeColumnChecklist.js';
+import { CubeJoinKeyRows } from './CubeJoinKeyRows.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+
+const DIFFERENCE_COLUMNS = 'Difference columns';
+
+/**
+ * The Difference editor (spec §17.6, PLAN §11.7): Swap Inputs, pairs of key
+ * columns (`CubeJoinKeyRows`), and the Left input's columns to tick as
+ * difference columns, those that can't be one shown with the reason.
+ */
+export const CubeDifferenceEditor = observer((props: CubeNodeEditorProps) => {
+  const { editorState, inputSchemas, readOnly } = props;
+  const draft = guaranteeType(props.draft, CubeDifferenceDraft);
+  const [leftSchema, rightSchema] = inputSchemas as [Schema, Schema];
+  const model = editorState.document.context?.model;
+  useEffect(() => {
+    flowResult(editorState.loadModelOutline()).catch(noop());
+  }, [editorState, model]);
+  const joinColumns = joinKeyListsOf(draft.pairs).flat();
+  return (
+    <div className="flex flex-col gap-2 text-base">
+      <div className="flex items-center gap-2">
+        <span>Join columns</span>
+        <span className="flex-1" />
+        <CubeButton
+          title="Swap the Left and Right inputs; the join columns follow them, so x_1 is then the other input's. Applies your changes too."
+          disabled={!editorState.nodeEditor.canSwapInputs}
+          onClick={() => editorState.nodeEditor.swapInputs()}
+        >
+          Swap Inputs
+        </CubeButton>
+      </div>
+      <CubeJoinKeyRows
+        editorProps={props}
+        draft={draft}
+        leftSchema={leftSchema}
+        rightSchema={rightSchema}
+      />
+      <CubeColumnChecklist
+        label={DIFFERENCE_COLUMNS}
+        schema={leftSchema}
+        picked={draft.differenceColumns}
+        unpickableReason={(column) =>
+          getDifferenceColumnUnpickableReason(column, rightSchema, joinColumns)
+        }
+        clearTitle="Untick every difference column"
+        readOnly={readOnly}
+        onToggle={(name) => draft.toggleDifferenceColumn(name, leftSchema)}
+        onClear={() => draft.clearDifferenceColumns()}
+      />
+      <ul className="flex list-disc flex-col gap-1 pl-4 text-sm text-[var(--color-text-secondary)]">
+        {DIFFERENCE_EDITOR_NOTES.map((note) => (
+          <li key={note}>{note}</li>
+        ))}
+      </ul>
+    </div>
+  );
+});

package/src/components/editors/CubeDistinctEditor.tsx

@@ -0,0 +1,28 @@
+/**
+ * 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 { observer } from 'mobx-react-lite';
+import { DISTINCT_EDITOR_TEXT } from '../../__lib__/LegendCubeLabels.js';
+
+/**
+ * The Distinct editor (spec §17.6: "nothing — description only"). Distinct
+ * has no settings, so it has no draft, and the panel shows no Apply or Cancel.
+ */
+export const CubeDistinctEditor = observer(() => (
+  <div className="text-base text-[var(--color-text-secondary)]">
+    {DISTINCT_EDITOR_TEXT}
+  </div>
+));

package/src/components/editors/CubeExtendEditor.tsx

@@ -0,0 +1,271 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  ExpandIcon,
+  CompressIcon,
+  TimesIcon,
+} from '@finos/legend-art';
+import type { Schema } from '@finos/legend-cube';
+import { CompilationError, SourceInformation } from '@finos/legend-graph';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
+import { guaranteeType } from '@finos/legend-shared';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import {
+  COLUMN_NAME_RULES_HINT,
+  EXTEND_EDITOR_NOTES,
+  getColumnTypeLabel,
+  READ_ONLY_CUBE_TITLE,
+} from '../../__lib__/LegendCubeLabels.js';
+import {
+  type CubeExtendRow,
+  CubeExtendDraft,
+} from '../../stores/editors/CubeExtendDraft.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeColumnTypeIcon } from './CubeColumnPicker.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+
+/** The code editor's language: legend-code-editor's `CODE_EDITOR_LANGUAGE.PURE` */
+const PURE = 'pure';
+
+/** How an expression reads a column: `$x.NAME`, or `$x.'a name'` for one that isn't an identifier */
+const columnAccessOf = (name: string): string =>
+  /^[A-Za-z_][A-Za-z0-9_]*$/u.test(name)
+    ? `$x.${name}`
+    : `$x.'${name.replace(/\\/gu, '\\\\').replace(/'/gu, "\\'")}'`;
+
+/** The error the code editor marks, from a row's problem located in its code */
+const markerOf = (row: CubeExtendRow): CompilationError | undefined => {
+  const { problem } = row;
+  const location = problem?.location;
+  if (!problem || !location) {
+    return undefined;
+  }
+  const error = new CompilationError(problem.message);
+  error.sourceInformation = new SourceInformation(
+    location.sourceId,
+    location.startLine,
+    location.startColumn,
+    location.endLine,
+    location.endColumn,
+  );
+  return error;
+};
+
+/** What a row says under its code: its problem, its type once validated, or that it waits */
+const CubeExtendRowStatus = observer((props: { row: CubeExtendRow }) => {
+  const { row } = props;
+  if (row.problem) {
+    return (
+      <div className="text-sm text-[var(--color-status-error)]">
+        <div>{row.problem.message}</div>
+        {row.problem.hint && (
+          <div className="text-[var(--color-text-secondary)]">
+            {row.problem.hint}
+          </div>
+        )}
+      </div>
+    );
+  }
+  if (row.checked?.code !== row.code) {
+    return (
+      <div className="text-sm text-[var(--color-text-muted)]">
+        Not validated yet
+      </div>
+    );
+  }
+  return row.type ? (
+    <div className="flex items-center gap-1 text-sm text-[var(--color-text-secondary)]">
+      <CubeColumnTypeIcon type={row.type} />
+      {/* every new column can be empty (PLAN §11.7) */}
+      {`${row.type.displayName}, can be empty`}
+    </div>
+  ) : null;
+});
+
+const CubeExtendRowEditor = observer(
+  (props: {
+    draft: CubeExtendDraft;
+    row: CubeExtendRow;
+    position: number;
+    count: number;
+    readOnly: boolean;
+    onFocus: () => void;
+  }) => {
+    const { draft, row, position, count, readOnly, onFocus } = props;
+    const [expanded, setExpanded] = useState(false);
+    const disabled = readOnly || draft.validating;
+    return (
+      <li className="flex flex-col gap-1 border-b border-[var(--color-border-subtle)] py-1">
+        <div className="flex items-center gap-1">
+          <input
+            className="h-6 min-w-0 flex-1 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base"
+            aria-label={`Column name ${position}`}
+            value={row.name}
+            disabled={disabled}
+            spellCheck={false}
+            onFocus={onFocus}
+            onChange={(event) => draft.setName(row.key, event.target.value)}
+          />
+          <button
+            className="flex h-6 w-6 items-center justify-center text-[var(--color-text-secondary)] disabled:text-[var(--color-text-disabled)]"
+            aria-label={`Move column ${position} up`}
+            title="Move up: a column can use the ones above it"
+            disabled={disabled || position === 1}
+            onClick={() => draft.moveRow(row.key, -1)}
+          >
+            <ArrowUpIcon />
+          </button>
+          <button
+            className="flex h-6 w-6 items-center justify-center text-[var(--color-text-secondary)] disabled:text-[var(--color-text-disabled)]"
+            aria-label={`Move column ${position} down`}
+            title="Move down"
+            disabled={disabled || position === count}
+            onClick={() => draft.moveRow(row.key, 1)}
+          >
+            <ArrowDownIcon />
+          </button>
+          <button
+            className="flex h-6 w-6 items-center justify-center text-[var(--color-text-secondary)] disabled:text-[var(--color-text-disabled)]"
+            aria-label={`Expand expression ${position}`}
+            title={expanded ? 'Show fewer lines' : 'Show more lines'}
+            onClick={() => setExpanded(!expanded)}
+          >
+            {expanded ? <CompressIcon /> : <ExpandIcon />}
+          </button>
+          <button
+            className="flex h-6 w-6 items-center justify-center text-[var(--color-text-secondary)] disabled:text-[var(--color-text-disabled)]"
+            aria-label={`Remove column ${position}`}
+            title="Remove this column"
+            disabled={disabled}
+            onClick={() => draft.removeRow(row.key)}
+          >
+            <TimesIcon />
+          </button>
+        </div>
+        <div
+          aria-label={`Expression ${position}`}
+          className="overflow-hidden rounded-sm border border-[var(--color-border-default)]"
+          style={{ height: expanded ? 240 : 72 }}
+          onFocus={onFocus}
+        >
+          <CodeEditor
+            inputValue={row.code}
+            updateInput={(code) => draft.setCode(row.key, code)}
+            language={PURE}
+            isReadOnly={disabled}
+            hideMinimap={true}
+            hideGutter={true}
+            hideActionBar={true}
+            error={markerOf(row)}
+            extraEditorOptions={{
+              lineNumbers: 'off',
+              wordWrap: 'on',
+              scrollBeyondLastLine: false,
+            }}
+          />
+        </div>
+        <CubeExtendRowStatus row={row} />
+      </li>
+    );
+  },
+);
+
+/**
+ * The Extend editor (spec §17.6, PLAN §11.7): a row per new column, its name
+ * and its expression in a code editor, Validate (F10), which the engine does,
+ * and the input's columns, which a click writes into the row last used.
+ */
+export const CubeExtendEditor = observer((props: CubeNodeEditorProps) => {
+  const { inputSchemas, readOnly } = props;
+  const draft = guaranteeType(props.draft, CubeExtendDraft);
+  const [schema] = inputSchemas as [Schema];
+  const [focusedKey, setFocusedKey] = useState<number | undefined>();
+  const target =
+    draft.rows.find((row) => row.key === focusedKey) ?? draft.rows.at(-1);
+  return (
+    <div className="flex flex-col gap-2 text-base">
+      <span>New columns</span>
+      <ul aria-label="New columns">
+        {draft.rows.map((row, index) => (
+          <CubeExtendRowEditor
+            key={row.key}
+            draft={draft}
+            row={row}
+            position={index + 1}
+            count={draft.rows.length}
+            readOnly={readOnly}
+            onFocus={() => setFocusedKey(row.key)}
+          />
+        ))}
+      </ul>
+      <div className="flex items-center gap-2">
+        <CubeButton
+          title={readOnly ? READ_ONLY_CUBE_TITLE : 'Add a new column'}
+          disabled={readOnly || draft.validating}
+          onClick={() => draft.addRow()}
+        >
+          Add column
+        </CubeButton>
+        <CubeButton
+          primary={!draft.isValidated}
+          title="Check the expressions with the engine, type them, and plan them for this cube's database (F10)"
+          disabled={readOnly || draft.validating}
+          onClick={() => {
+            flowResult(draft.validate()).catch(
+              props.editorState.host.applicationStore.alertUnhandledError,
+            );
+          }}
+        >
+          {draft.validating ? 'Validating…' : 'Validate'}
+        </CubeButton>
+      </div>
+      <span>Input columns</span>
+      <ul aria-label="Input columns" className="flex flex-wrap gap-1">
+        {schema.columns.map((column) => (
+          <li key={column.name}>
+            <button
+              className="flex items-center gap-1 rounded-sm border border-[var(--color-border-subtle)] px-1 text-sm hover:bg-[var(--color-bg-hover)] disabled:text-[var(--color-text-disabled)]"
+              title={`Write ${columnAccessOf(column.name)} at the end of the expression last used (${getColumnTypeLabel(column)})`}
+              disabled={readOnly || draft.validating || !target}
+              onClick={() => {
+                if (target) {
+                  const separator = /\s$/u.test(target.code) ? '' : ' ';
+                  draft.setCode(
+                    target.key,
+                    `${target.code}${separator}${columnAccessOf(column.name)}`,
+                  );
+                }
+              }}
+            >
+              <CubeColumnTypeIcon type={column.type} />
+              {column.name}
+            </button>
+          </li>
+        ))}
+      </ul>
+      <ul className="flex list-disc flex-col gap-1 pl-4 text-sm text-[var(--color-text-secondary)]">
+        {[...EXTEND_EDITOR_NOTES, COLUMN_NAME_RULES_HINT].map((note) => (
+          <li key={note}>{note}</li>
+        ))}
+      </ul>
+    </div>
+  );
+});

package/src/components/editors/CubeFilterEditor.tsx

@@ -23,6 +23,7 @@ import {
   type FilterRule,
   getAvailableOperators,
   getFilterValueShape,
+  isDateOrTimestampType,
   isExactFloatComparison,
   isFilterOperator,
   MESSAGE_FILTER_UNSUPPORTED,
@@ -33,6 +34,7 @@ import {
 import { guaranteeType } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
 import {
+  DATE_OR_TIMESTAMP_WARNING,
   FILTER_FLOAT_COMPARISON_HINT,
   FILTER_NULL_NOTE,
 } from '../../__lib__/LegendCubeLabels.js';
@@ -149,6 +151,11 @@ const CubeFilterCondition = observer(
             {FILTER_FLOAT_COMPARISON_HINT}
           </div>
         )}
+        {type && shape !== 'none' && isDateOrTimestampType(type) && (
+          <div className="text-sm text-[var(--color-status-warn)]">
+            {DATE_OR_TIMESTAMP_WARNING}
+          </div>
+        )}
       </li>
     );
   },

package/src/components/editors/CubeGroupEditor.tsx

@@ -0,0 +1,135 @@
+/**
+ * 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,
+  GROUP_AGGREGATION_USE,
+  type Schema,
+  validateColumnAggregation,
+} from '@finos/legend-cube';
+import { guaranteeType } from '@finos/legend-shared';
+import { observer } from 'mobx-react-lite';
+import {
+  COLUMN_NAME_RULES_HINT,
+  CUBE_GROUP_COLUMN_DISABLED_REASON,
+  GROUP_EDITOR_NOTES,
+} from '../../__lib__/LegendCubeLabels.js';
+import {
+  type CubeGroupRow,
+  CubeGroupDraft,
+  isBuiltGroupRow,
+} from '../../stores/editors/CubeGroupDraft.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeAggregationRowEditor } from './CubeAggregationRowEditor.js';
+import { CubeColumnChecklist } from './CubeColumnChecklist.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+
+const KEYS = 'Group columns';
+
+/**
+ * The functions a row can take: those its column's type offers, or every
+ * column function before a column is picked, then Count rows; 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: CubeGroupRow, 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,
+        )),
+    AggregationFunction.COUNT_ROWS,
+  ];
+  return row.function && !offered.includes(row.function)
+    ? [row.function, ...offered]
+    : offered;
+};
+
+/**
+ * The Group editor (spec §17.6, PLAN §11.5): the input's columns, each ticked
+ * to group by it (a column that can't be compared is shown but can't be
+ * ticked), then rows of aggregation column, function and output name. Each
+ * row shows its first problem, as the node checks it. Rows can always be
+ * added: a column can be aggregated several ways. The lists scroll on their
+ * own, so the editor fits wherever it is shown.
+ */
+export const CubeGroupEditor = observer((props: CubeNodeEditorProps) => {
+  const { readOnly } = props;
+  const draft = guaranteeType(props.draft, CubeGroupDraft);
+  const [schema] = props.inputSchemas as [Schema];
+  const { aggregations } = draft;
+  // a row's problem, as the node will judge it; a row left out has none
+  let aggregationIndex = 0;
+  const problems = draft.rows.map((row) => {
+    if (!isBuiltGroupRow(row)) {
+      return undefined;
+    }
+    const errors: string[] = [];
+    validateColumnAggregation(aggregations, aggregationIndex, schema, errors);
+    aggregationIndex += 1;
+    return errors[0];
+  });
+  return (
+    <div className="flex flex-col gap-2 text-base">
+      <CubeColumnChecklist
+        label={KEYS}
+        schema={schema}
+        picked={draft.columns}
+        disabledReason={CUBE_GROUP_COLUMN_DISABLED_REASON}
+        clearTitle="Untick every group column: one row for all the rows"
+        readOnly={readOnly}
+        onToggle={(name) => draft.toggleColumn(name, schema)}
+        onClear={() => draft.clearColumns()}
+      />
+      <ul aria-label="Aggregations">
+        {draft.rows.map((row, index) => (
+          <CubeAggregationRowEditor
+            key={row.key}
+            row={row}
+            position={index + 1}
+            schema={schema}
+            use={GROUP_AGGREGATION_USE}
+            functions={functionOptions(row, schema)}
+            noColumnText={() => 'Every row'}
+            problem={problems[index]}
+            readOnly={readOnly}
+            onColumn={(column) => draft.setColumn(row.key, column)}
+            onFunction={(fn) => draft.setFunction(row.key, fn)}
+            onName={(name) => draft.setName(row.key, name)}
+            onRemove={() => draft.removeRow(row.key)}
+          />
+        ))}
+      </ul>
+      <div>
+        <CubeButton
+          title="Add an aggregation"
+          disabled={readOnly}
+          onClick={() => draft.addRow()}
+        >
+          Add aggregation
+        </CubeButton>
+      </div>
+      <ul className="flex list-disc flex-col gap-1 pl-4 text-sm text-[var(--color-text-secondary)]">
+        {[...GROUP_EDITOR_NOTES, COLUMN_NAME_RULES_HINT].map((note) => (
+          <li key={note}>{note}</li>
+        ))}
+      </ul>
+    </div>
+  );
+});