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

package/src/components/editors/CubeFilterEditor.tsx

@@ -0,0 +1,309 @@
+/**
+ * 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 {
+  ColumnComparisonFilter,
+  CompositeFilter,
+  CompositeFilterOperator,
+  FILTER_OPERATOR_DESCRIPTIONS,
+  type FilterRule,
+  getAvailableOperators,
+  getFilterValueShape,
+  isExactFloatComparison,
+  isFilterOperator,
+  MESSAGE_FILTER_UNSUPPORTED,
+  NEGATIVE_OPERATORS,
+  NotFilter,
+  type Schema,
+} from '@finos/legend-cube';
+import { guaranteeType } from '@finos/legend-shared';
+import { observer } from 'mobx-react-lite';
+import {
+  FILTER_FLOAT_COMPARISON_HINT,
+  FILTER_NULL_NOTE,
+} from '../../__lib__/LegendCubeLabels.js';
+import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import { CubeFilterDraft } from '../../stores/editors/CubeFilterDraft.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeColumnPicker } from './CubeColumnPicker.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+import { CubeValueEditor } from './CubeValueEditor.js';
+
+const SMALL_BUTTON =
+  'flex h-6 shrink-0 items-center justify-center rounded-sm px-1 text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] disabled:text-[var(--color-text-disabled)]';
+
+interface CubeFilterRuleProps {
+  readonly draft: CubeFilterDraft;
+  readonly schema: Schema;
+  readonly readOnly: boolean;
+  /** The Not the rule sits in, if any: the rule's own Not toggle undoes it */
+  readonly negation?: NotFilter | undefined;
+}
+
+const CubeRemoveRuleButton: React.FC<
+  CubeFilterRuleProps & { rule: FilterRule; label: string }
+> = (props) => (
+  <button
+    className={SMALL_BUTTON}
+    aria-label={props.label}
+    title={props.label}
+    disabled={props.readOnly}
+    onClick={() => props.draft.removeRule(props.rule.key)}
+  >
+    <TimesIcon />
+  </button>
+);
+
+/**
+ * A condition: column, operator and its negation and removal on one line,
+ * the value below, with the whole width of the panel
+ */
+const CubeFilterCondition = observer(
+  (props: CubeFilterRuleProps & { rule: ColumnComparisonFilter }) => {
+    const { draft, schema, readOnly, rule, negation } = props;
+    const type = schema.type(rule.columnName);
+    const operators = type ? getAvailableOperators(type) : [];
+    const shape = getFilterValueShape(rule.operator);
+    const isNegated =
+      negation !== undefined || NEGATIVE_OPERATORS.includes(rule.operator);
+    return (
+      <li
+        className="flex flex-col gap-1 py-1"
+        data-testid={LEGEND_CUBE_TEST_ID.FILTER_CONDITION}
+      >
+        <div className="flex items-center gap-1">
+          <div className="min-w-0 flex-1">
+            <CubeColumnPicker
+              label="Filter column"
+              schema={schema}
+              value={rule.columnName}
+              disabled={readOnly}
+              onChange={(name) => draft.setColumn(rule.key, name, schema)}
+            />
+          </div>
+          <select
+            aria-label="Filter operator"
+            className="h-6 min-w-0 max-w-[45%] shrink rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base"
+            value={rule.operator}
+            disabled={readOnly || !type}
+            onChange={(event) => {
+              if (isFilterOperator(event.target.value)) {
+                draft.setOperator(rule.key, event.target.value);
+              }
+            }}
+          >
+            {!operators.includes(rule.operator) && (
+              <option value={rule.operator} disabled={true}>
+                {FILTER_OPERATOR_DESCRIPTIONS[rule.operator]}
+              </option>
+            )}
+            {operators.map((operator) => (
+              <option key={operator} value={operator}>
+                {FILTER_OPERATOR_DESCRIPTIONS[operator]}
+              </option>
+            ))}
+          </select>
+          <button
+            className={clsx(SMALL_BUTTON, {
+              'text-[var(--color-accent)]': isNegated,
+            })}
+            aria-label="Negate the condition"
+            aria-pressed={isNegated}
+            title="Negate the condition, e.g. is and is not"
+            disabled={readOnly || !type}
+            // a condition in a Not leaves it; otherwise its operator turns
+            onClick={() => draft.toggleNegation(negation?.key ?? rule.key)}
+          >
+            Not
+          </button>
+          <CubeRemoveRuleButton {...props} label="Remove the condition" />
+        </div>
+        {type && shape !== 'none' && (
+          <div className="flex min-w-0">
+            <CubeValueEditor
+              label="Filter value"
+              type={type}
+              shape={shape}
+              value={rule.value}
+              disabled={readOnly}
+              onChange={(value) => draft.setValue(rule.key, value)}
+            />
+          </div>
+        )}
+        {type && isExactFloatComparison(rule.operator, type) && (
+          <div className="text-sm text-[var(--color-text-secondary)]">
+            {FILTER_FLOAT_COMPARISON_HINT}
+          </div>
+        )}
+      </li>
+    );
+  },
+);
+
+/** Any rule of the tree, by kind */
+const CubeFilterRuleEditor = observer(
+  (props: CubeFilterRuleProps & { rule: FilterRule }) => {
+    const { rule } = props;
+    if (rule instanceof ColumnComparisonFilter) {
+      return <CubeFilterCondition {...props} rule={rule} />;
+    }
+    if (rule instanceof CompositeFilter) {
+      return (
+        <li>
+          {/* a group holds rules, so the two render each other */}
+          {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}
+          <CubeFilterGroup {...props} group={rule} isTop={false} />
+        </li>
+      );
+    }
+    if (rule instanceof NotFilter) {
+      return (
+        <li className="flex items-start gap-1">
+          <button
+            className={clsx(SMALL_BUTTON, 'text-[var(--color-accent)]')}
+            aria-label="Remove the negation"
+            aria-pressed={true}
+            title="Remove the negation"
+            disabled={props.readOnly}
+            onClick={() => props.draft.toggleNegation(rule.key)}
+          >
+            Not
+          </button>
+          <ul className="min-w-0 flex-1">
+            <CubeFilterRuleEditor {...props} rule={rule.rule} negation={rule} />
+          </ul>
+        </li>
+      );
+    }
+    // a rule this version can't read stays as it is
+    return (
+      <li className="flex items-center gap-1 py-1 text-base text-[var(--color-status-warn)]">
+        <span className="flex-1">{MESSAGE_FILTER_UNSUPPORTED}</span>
+        <CubeRemoveRuleButton {...props} label="Remove the filter" />
+      </li>
+    );
+  },
+);
+
+/** An And/Or group: its rules, and buttons to add to it */
+const CubeFilterGroup = observer(
+  (props: CubeFilterRuleProps & { group: CompositeFilter; isTop: boolean }) => {
+    const { draft, readOnly, group, isTop, negation } = props;
+    return (
+      <div
+        className={clsx('flex flex-col gap-1', {
+          'rounded-sm border border-[var(--color-border-subtle)] p-1': !isTop,
+        })}
+      >
+        <div className="flex items-center gap-1 text-sm">
+          <select
+            aria-label={
+              isTop ? 'Combine the conditions with' : 'Combine the group with'
+            }
+            className="h-6 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base"
+            value={group.operator}
+            disabled={readOnly}
+            onChange={(event) =>
+              draft.setGroupOperator(
+                group.key,
+                event.target.value === CompositeFilterOperator.OR
+                  ? CompositeFilterOperator.OR
+                  : CompositeFilterOperator.AND,
+              )
+            }
+          >
+            <option value={CompositeFilterOperator.AND}>All of (and)</option>
+            <option value={CompositeFilterOperator.OR}>Any of (or)</option>
+          </select>
+          <span className="flex-1" />
+          {!isTop && (
+            <>
+              <button
+                className={clsx(SMALL_BUTTON, {
+                  'text-[var(--color-accent)]': negation !== undefined,
+                })}
+                aria-label="Negate the group"
+                aria-pressed={negation !== undefined}
+                title="Keep the rows the group doesn't match"
+                disabled={readOnly}
+                // a group in a Not leaves it
+                onClick={() => draft.toggleNegation(negation?.key ?? group.key)}
+              >
+                Not
+              </button>
+              <CubeRemoveRuleButton
+                {...props}
+                rule={group}
+                label="Remove the group"
+              />
+            </>
+          )}
+        </div>
+        <ul className="flex flex-col pl-2">
+          {group.rules.map((rule) => (
+            <CubeFilterRuleEditor
+              key={rule.key}
+              {...props}
+              rule={rule}
+              // the group's Not is not its rules'
+              negation={undefined}
+            />
+          ))}
+        </ul>
+        <div className="flex gap-1">
+          <CubeButton
+            disabled={readOnly}
+            onClick={() => draft.addCondition(group.key)}
+          >
+            {isTop ? 'Add condition' : 'Add condition to the group'}
+          </CubeButton>
+          <CubeButton
+            disabled={readOnly}
+            onClick={() => draft.addGroup(group.key)}
+          >
+            {isTop ? 'Add group' : 'Add group to the group'}
+          </CubeButton>
+        </div>
+      </div>
+    );
+  },
+);
+
+/**
+ * The Filter editor (spec §8.5): conditions of a column, an operator and a
+ * value, in And/Or groups, each of which can be negated. Operators follow
+ * the column's type; values are read as its type, and text that isn't one is
+ * kept, marked, to be fixed. Blank conditions are not stored.
+ */
+export const CubeFilterEditor = observer((props: CubeNodeEditorProps) => {
+  const draft = guaranteeType(props.draft, CubeFilterDraft);
+  const [schema] = props.inputSchemas as [Schema];
+  return (
+    <div className="flex flex-col gap-2">
+      <CubeFilterGroup
+        draft={draft}
+        schema={schema}
+        readOnly={props.readOnly}
+        group={draft.tree}
+        isTop={true}
+      />
+      <div className="text-sm text-[var(--color-text-secondary)]">
+        {FILTER_NULL_NOTE}
+      </div>
+    </div>
+  );
+});

package/src/components/editors/CubeIntegerField.tsx

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { clsx } from '@finos/legend-art';
+
+/**
+ * A field for a whole number, such as a size or a row index. It shows the
+ * text as typed and reports every keystroke, so the panel checks the edited
+ * node as the user types. Enter and Escape do nothing special: Apply is the
+ * panel's, and Ctrl+Z is the field's own undo.
+ */
+export const CubeIntegerField: React.FC<{
+  label: string;
+  text: string;
+  invalid: boolean;
+  disabled: boolean;
+  onChange: (text: string) => void;
+}> = (props) => {
+  const { label, text, invalid, disabled, onChange } = props;
+  return (
+    <input
+      aria-label={label}
+      aria-invalid={invalid}
+      className={clsx(
+        'h-6 w-24 rounded-sm border bg-[var(--color-bg-input)] px-1 text-base',
+        invalid
+          ? 'border-[var(--color-status-error)] text-[var(--color-status-error)]'
+          : 'border-[var(--color-border-default)]',
+      )}
+      type="text"
+      inputMode="numeric"
+      spellCheck={false}
+      value={text}
+      disabled={disabled}
+      onChange={(event) => onChange(event.target.value)}
+    />
+  );
+};

package/src/components/editors/CubeJoinEditor.tsx

@@ -0,0 +1,247 @@
+/**
+ * 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 { TimesIcon } from '@finos/legend-art';
+import {
+  areCompatibleTypes,
+  getDuplicateJoinColumns,
+  isJoinType,
+  JOIN_TYPE_LABELS,
+  JOIN_TYPES,
+  planJoinDuplicateFix,
+  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 {
+  CUBE_TABLE_FLAG_LABELS,
+  READ_ONLY_CUBE_TITLE,
+} from '../../__lib__/LegendCubeLabels.js';
+import { CubeTableFlag } from '../../graph-manager/CubeEngine.js';
+import {
+  type CubeJoinKeyPair,
+  CubeJoinDraft,
+  isUntypedColumn,
+} from '../../stores/editors/CubeJoinDraft.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeColumnPicker } from './CubeColumnPicker.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+
+const TYPE_UNKNOWN = CUBE_TABLE_FLAG_LABELS[CubeTableFlag.TYPE_UNKNOWN];
+
+const CubeJoinKeyRow = observer(
+  (props: {
+    editorProps: CubeNodeEditorProps;
+    draft: CubeJoinDraft;
+    pair: CubeJoinKeyPair;
+    index: number;
+    leftSchema: Schema;
+    rightSchema: Schema;
+  }) => {
+    const { editorProps, draft, pair, index, leftSchema, rightSchema } = props;
+    const { editorState, readOnly } = editorProps;
+    const { query } = editorState.document;
+    const { analysis, modelOutline } = editorState;
+    const [leftId, rightId] = query.getInputIds(draft.original.id);
+    const leftType = leftSchema.type(pair.left);
+    const rightType = rightSchema.type(pair.right);
+    const isIncompatible =
+      leftType !== undefined &&
+      rightType !== undefined &&
+      !areCompatibleTypes(leftType, rightType);
+    const isUntyped =
+      (leftId !== undefined &&
+        Boolean(pair.left) &&
+        isUntypedColumn(modelOutline, query, analysis, leftId, pair.left)) ||
+      (rightId !== undefined &&
+        Boolean(pair.right) &&
+        isUntypedColumn(modelOutline, query, analysis, rightId, pair.right));
+    const position = index + 1;
+    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={`Left join column ${position}`}
+            schema={leftSchema}
+            value={pair.left}
+            invalid={isIncompatible}
+            disabled={readOnly}
+            onChange={(name) => draft.setLeftColumn(pair.key, name)}
+          />
+          <span className="text-[var(--color-text-secondary)]">=</span>
+          <CubeColumnPicker
+            label={`Right join column ${position}`}
+            schema={rightSchema}
+            value={pair.right}
+            invalid={isIncompatible}
+            disabled={readOnly}
+            onChange={(name) => draft.setRightColumn(pair.key, name)}
+          />
+          <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 join columns ${position}`}
+            title="Remove these join columns"
+            disabled={readOnly}
+            onClick={() => draft.removePair(pair.key)}
+          >
+            <TimesIcon />
+          </button>
+        </div>
+        {isIncompatible && (
+          <div className="text-sm text-[var(--color-status-error)]">
+            {`${leftType.displayName} and ${rightType.displayName} can't be compared`}
+          </div>
+        )}
+        {isUntyped && (
+          <div
+            className="text-sm text-[var(--color-status-warn)]"
+            title={TYPE_UNKNOWN.description}
+          >
+            {`${TYPE_UNKNOWN.label}: the column's real type is not known to Cube, so the engine may not match its values`}
+          </div>
+        )}
+      </li>
+    );
+  },
+);
+
+/**
+ * The Join editor (spec §17.6): the join type, pairs of key columns, a left
+ * one from the Left input and a right one from the Right input, and Swap
+ * Inputs. A pair whose types can't be compared is marked; one on a column
+ * Cube can't type is warned about, not blocked.
+ */
+export const CubeJoinEditor = observer((props: CubeNodeEditorProps) => {
+  const { editorState, inputSchemas, readOnly } = props;
+  const draft = guaranteeType(props.draft, CubeJoinDraft);
+  const [leftSchema, rightSchema] = inputSchemas as [Schema, Schema];
+  const model = editorState.document.context?.model;
+  useEffect(() => {
+    flowResult(editorState.loadModelOutline()).catch(noop());
+  }, [editorState, model]);
+  const edited = draft.build();
+  const duplicates = getDuplicateJoinColumns(
+    leftSchema,
+    rightSchema,
+    edited.leftColumns,
+    edited.rightColumns,
+  );
+  // the names the autofix would give, to show beside each shared column
+  const fix = duplicates.length
+    ? planJoinDuplicateFix(edited, leftSchema, rightSchema)
+    : undefined;
+  const canAddPair =
+    !readOnly &&
+    draft.pairs.length <
+      Math.min(leftSchema.columns.length, rightSchema.columns.length);
+  return (
+    <div className="flex flex-col gap-2 text-base">
+      <div className="flex items-center gap-2">
+        <label className="flex items-center gap-2">
+          Join type
+          <select
+            className="h-6 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base"
+            value={draft.joinType}
+            disabled={readOnly}
+            onChange={(event) => {
+              if (isJoinType(event.target.value)) {
+                draft.setJoinType(event.target.value);
+              }
+            }}
+          >
+            {JOIN_TYPES.map((joinType) => (
+              <option key={joinType} value={joinType}>
+                {JOIN_TYPE_LABELS[joinType]}
+              </option>
+            ))}
+          </select>
+        </label>
+        <span className="flex-1" />
+        <CubeButton
+          title="Swap the Left and Right inputs; the join columns follow them. Applies your changes too."
+          disabled={!editorState.nodeEditor.canSwapInputs}
+          onClick={() => editorState.nodeEditor.swapInputs()}
+        >
+          Swap Inputs
+        </CubeButton>
+      </div>
+      <div className="grid grid-cols-[1fr_auto_1fr_auto] gap-1 text-sm text-[var(--color-text-secondary)]">
+        <span>Left</span>
+        <span />
+        <span>Right</span>
+        <span />
+      </div>
+      <ul aria-label="Join columns">
+        {draft.pairs.map((pair, index) => (
+          <CubeJoinKeyRow
+            key={pair.key}
+            editorProps={props}
+            draft={draft}
+            pair={pair}
+            index={index}
+            leftSchema={leftSchema}
+            rightSchema={rightSchema}
+          />
+        ))}
+      </ul>
+      <div>
+        <CubeButton
+          title={
+            canAddPair
+              ? 'Add a pair of join columns'
+              : 'Every column of an input is already a join column'
+          }
+          disabled={!canAddPair}
+          onClick={() => draft.addPair()}
+        >
+          Add join columns
+        </CubeButton>
+      </div>
+      {duplicates.length > 0 && (
+        <div className="text-sm text-[var(--color-status-warn)]">
+          <div>
+            In both inputs and not joined on, so the output can&apos;t keep
+            both:
+          </div>
+          <ul aria-label="Columns in both inputs">
+            {duplicates.map((name, index) => (
+              <li key={name} className="font-mono">
+                {fix
+                  ? `${name} → ${fix.left[index]?.to} (Left), ${fix.right[index]?.to} (Right)`
+                  : name}
+              </li>
+            ))}
+          </ul>
+          <div className="mt-1">
+            <CubeButton
+              title={
+                readOnly
+                  ? READ_ONLY_CUBE_TITLE
+                  : 'Add a Rename before each input that gives these columns new names. Applies your changes too, as one step to undo.'
+              }
+              disabled={!editorState.nodeEditor.canRenameDuplicateColumns}
+              onClick={() => editorState.nodeEditor.renameDuplicateColumns()}
+            >
+              Rename them
+            </CubeButton>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});