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

package/src/components/editors/CubeSortEditor.tsx

@@ -0,0 +1,206 @@
+/**
+ * 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, TimesIcon } from '@finos/legend-art';
+import {
+  isSortableType,
+  isSortDirection,
+  MESSAGE_CANNOT_HAVE_DUPLICATES,
+  type Schema,
+  type SchemaColumn,
+  SORT_DIRECTION_DESCRIPTIONS,
+  SORT_DIRECTIONS,
+  validateSortKey,
+} from '@finos/legend-cube';
+import { guaranteeType } from '@finos/legend-shared';
+import { observer } from 'mobx-react-lite';
+import { CUBE_SORT_COLUMN_DISABLED_REASON } from '../../__lib__/LegendCubeLabels.js';
+import {
+  type CubeSortRow,
+  CubeSortDraft,
+} from '../../stores/editors/CubeSortDraft.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeColumnPicker } from './CubeColumnPicker.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+
+const ROW_BUTTON_CLASS =
+  'flex h-6 w-6 items-center justify-center text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] disabled:text-[var(--color-text-disabled)]';
+
+const CubeSortRowEditor = observer(
+  (props: {
+    draft: CubeSortDraft;
+    row: CubeSortRow;
+    position: number;
+    count: number;
+    schema: Schema;
+    /** The columns of the other rows, which this row can't take */
+    takenColumns: ReadonlySet<string>;
+    problem: string | undefined;
+    readOnly: boolean;
+  }) => {
+    const {
+      draft,
+      row,
+      position,
+      count,
+      schema,
+      takenColumns,
+      problem,
+      readOnly,
+    } = props;
+    const isColumnDisabled = (column: SchemaColumn): string | undefined =>
+      !isSortableType(column.type)
+        ? CUBE_SORT_COLUMN_DISABLED_REASON.NOT_SORTABLE
+        : takenColumns.has(column.name)
+          ? CUBE_SORT_COLUMN_DISABLED_REASON.TAKEN
+          : undefined;
+    return (
+      <li className="flex flex-col gap-1 border-b border-[var(--color-border-subtle)] py-1">
+        <div className="grid grid-cols-[1fr_auto_auto_auto_auto] items-center gap-1">
+          <CubeColumnPicker
+            label={`Sort column ${position}`}
+            schema={schema}
+            value={row.column}
+            disabled={readOnly}
+            invalid={problem !== undefined}
+            isColumnDisabled={isColumnDisabled}
+            onChange={(name) => draft.setColumn(row.key, name)}
+          />
+          <select
+            aria-label={`Sort direction ${position}`}
+            className="h-6 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base"
+            value={row.direction}
+            disabled={readOnly}
+            onChange={(event) => {
+              const direction = event.target.value;
+              if (isSortDirection(direction)) {
+                draft.setDirection(row.key, direction);
+              }
+            }}
+          >
+            {SORT_DIRECTIONS.map((direction) => (
+              <option key={direction} value={direction}>
+                {SORT_DIRECTION_DESCRIPTIONS[direction]}
+              </option>
+            ))}
+          </select>
+          <button
+            className={ROW_BUTTON_CLASS}
+            aria-label={`Move sort column ${position} up`}
+            title="Sort by this column before the one above"
+            disabled={readOnly || position === 1}
+            onClick={() => draft.moveRow(row.key, -1)}
+          >
+            <ArrowUpIcon />
+          </button>
+          <button
+            className={ROW_BUTTON_CLASS}
+            aria-label={`Move sort column ${position} down`}
+            title="Sort by this column after the one below"
+            disabled={readOnly || position === count}
+            onClick={() => draft.moveRow(row.key, 1)}
+          >
+            <ArrowDownIcon />
+          </button>
+          <button
+            className={ROW_BUTTON_CLASS}
+            aria-label={`Remove sort column ${position}`}
+            title="Remove this sort column"
+            disabled={readOnly}
+            onClick={() => draft.removeRow(row.key)}
+          >
+            <TimesIcon />
+          </button>
+        </div>
+        {problem && (
+          <div className="text-sm text-[var(--color-status-error)]">
+            {problem}
+          </div>
+        )}
+      </li>
+    );
+  },
+);
+
+/**
+ * The Sort editor (spec §17.6: an ordered list of column and direction rows,
+ * added, removed and reordered). The first row sorts first. A column that
+ * can't be sorted, or that another row has, can't be picked; a saved one
+ * stays shown with its problem. The rows scroll on their own, so the editor
+ * fits wherever it is shown.
+ */
+export const CubeSortEditor = observer((props: CubeNodeEditorProps) => {
+  const { readOnly } = props;
+  const draft = guaranteeType(props.draft, CubeSortDraft);
+  const [schema] = props.inputSchemas as [Schema];
+  const { rows } = draft;
+  // a row's problem, as the node will judge it; a blank row has none
+  const problems = rows.map((row, index) => {
+    if (!row.column) {
+      return undefined;
+    }
+    const errors: string[] = [];
+    validateSortKey(row, schema, errors);
+    return (
+      errors[0] ??
+      (rows.slice(0, index).some(({ column }) => column === row.column)
+        ? MESSAGE_CANNOT_HAVE_DUPLICATES('Sort columns')
+        : undefined)
+    );
+  });
+  const sortable = schema.columns.filter((column) =>
+    isSortableType(column.type),
+  );
+  const canAddRow = !readOnly && rows.length < sortable.length;
+  return (
+    <div className="flex flex-col gap-2 text-base">
+      <ul aria-label="Sort columns" className="max-h-80 overflow-auto">
+        {rows.map((row, index) => (
+          <CubeSortRowEditor
+            key={row.key}
+            draft={draft}
+            row={row}
+            position={index + 1}
+            count={rows.length}
+            schema={schema}
+            takenColumns={
+              new Set(
+                rows
+                  .filter((other) => other.key !== row.key && other.column)
+                  .map(({ column }) => column),
+              )
+            }
+            problem={problems[index]}
+            readOnly={readOnly}
+          />
+        ))}
+      </ul>
+      <div>
+        <CubeButton
+          title={
+            canAddRow
+              ? 'Add a column to sort by'
+              : 'Every column that can be sorted already has a row'
+          }
+          disabled={!canAddRow}
+          onClick={() => draft.addRow()}
+        >
+          Add sort column
+        </CubeButton>
+      </div>
+    </div>
+  );
+});

package/src/components/editors/CubeSourceEditor.tsx

@@ -0,0 +1,106 @@
+/**
+ * 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 { PanelLoadingIndicator } from '@finos/legend-art';
+import {
+  getRelationalDisplayName,
+  RelationalTableSource,
+} from '@finos/legend-cube';
+import { guaranteeType } from '@finos/legend-shared';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import {
+  CUBE_PENDING_LABEL,
+  getColumnTypeLabel,
+} from '../../__lib__/LegendCubeLabels.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeColumnTypeIcon } from './CubeColumnPicker.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+
+/**
+ * A table source (spec §17.6): where it reads from, its columns as the engine
+ * typed them, and Refresh, which types the table again. Nothing here is
+ * edited, so a refresh is no undo step.
+ */
+export const CubeSourceEditor = observer((props: CubeNodeEditorProps) => {
+  const { editorState } = props;
+  const source = guaranteeType(props.draft.original, RelationalTableSource);
+  const refreshing = editorState.isPendingSource(source);
+  const { resolution } = source;
+  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)]">Database</dt>
+        <dd className="min-w-0 break-all">{source.database}</dd>
+        <dt className="text-[var(--color-text-secondary)]">Schema</dt>
+        <dd>{getRelationalDisplayName(source.schema)}</dd>
+        <dt className="text-[var(--color-text-secondary)]">Table</dt>
+        <dd>{getRelationalDisplayName(source.table)}</dd>
+      </dl>
+      <div className="flex items-center gap-2">
+        <CubeButton
+          title="Type the table again with the engine, e.g. after its columns changed"
+          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' ? (
+        <table className="w-full text-base" aria-label="Columns">
+          <thead>
+            <tr className="text-left text-[var(--color-text-secondary)]">
+              <th className="font-normal">Column</th>
+              <th className="font-normal">Type</th>
+            </tr>
+          </thead>
+          <tbody>
+            {resolution.schema.columns.map((column) => (
+              <tr key={column.name}>
+                <td className="break-all pr-2">{column.name}</td>
+                <td title={column.type.fullName}>
+                  <span className="flex items-center gap-1">
+                    <CubeColumnTypeIcon
+                      type={column.type}
+                      className="text-[var(--color-text-secondary)]"
+                    />
+                    {getColumnTypeLabel(column)}
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      ) : (
+        <div className="text-base text-[var(--color-text-secondary)]">
+          {resolution.kind === 'failed'
+            ? resolution.message
+            : 'The table has not been typed yet.'}
+        </div>
+      )}
+    </div>
+  );
+});

package/src/components/editors/CubeValueEditor.tsx

@@ -0,0 +1,333 @@
+/**
+ * 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 {
+  BLANK_PLACEHOLDER,
+  checkValue,
+  type CubeType,
+  type FilterValue,
+  type FilterValueItem,
+  type FilterValueShape,
+  getLiteralText,
+  isEnumType,
+  isFilterValueList,
+  MESSAGE_FILTER_VALUE_INVALID,
+  MESSAGE_FILTER_VALUE_OUT_OF_RANGE,
+  parseValue,
+  TypeFamily,
+} from '@finos/legend-cube';
+import { useEffect, useRef, useState } from 'react';
+
+/** Why a value is not one of the type, worded as the validation says it; nothing for a valid one or none */
+export const getValueProblem = (
+  item: FilterValueItem | undefined,
+  type: CubeType,
+): string | undefined => {
+  const problem = checkValue(item, type);
+  if (!problem || problem.reason === 'required') {
+    return undefined;
+  }
+  return problem.reason === 'invalid'
+    ? MESSAGE_FILTER_VALUE_INVALID(problem.text, type.displayName)
+    : MESSAGE_FILTER_VALUE_OUT_OF_RANGE(problem.text, type.displayName);
+};
+
+/** A value as typed and shown: a literal's text, or the text that is not a value */
+const getItemText = (item: FilterValueItem | undefined): string =>
+  item === undefined
+    ? ''
+    : item.kind === 'invalid'
+      ? item.text
+      : getLiteralText(item);
+
+const INPUT_CLASS =
+  'h-6 min-w-0 flex-1 rounded-sm border bg-[var(--color-bg-input)] px-1 text-base';
+
+const DATE_TIME_WITHOUT_SECONDS = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/u;
+
+/**
+ * The text a date-time input gives, with its seconds: a browser leaves out
+ * zero seconds (`1997-01-01T10:30`), and the engine truncates a date-time
+ * without them
+ */
+export const withDateTimeSeconds = (text: string): string =>
+  DATE_TIME_WITHOUT_SECONDS.test(text) ? `${text}:00` : text;
+
+/** The input a type's values are typed in (spec §17.7) */
+const getInputType = (type: CubeType): string =>
+  type.family === TypeFamily.STRICT_DATE
+    ? 'date'
+    : type.family === TypeFamily.DATETIME
+      ? 'datetime-local'
+      : 'text';
+
+/**
+ * Picks one of a fixed set of values, never typed: an enumeration's values,
+ * or true and false. A value that is not one of them (e.g. after the column
+ * changed) stays shown, marked.
+ */
+const CubeValueSelect: React.FC<{
+  label: string;
+  type: CubeType;
+  item: FilterValueItem | undefined;
+  onChange: (item: FilterValueItem | undefined) => void;
+  disabled: boolean;
+}> = (props) => {
+  const { label, type, item, onChange, disabled } = props;
+  const choices = isEnumType(type) ? type.values : ['true', 'false'];
+  const text = getItemText(item);
+  const problem = getValueProblem(item, type);
+  return (
+    <select
+      aria-label={label}
+      aria-invalid={problem !== undefined}
+      title={problem}
+      className={clsx(
+        INPUT_CLASS,
+        problem
+          ? 'border-[var(--color-status-error)]'
+          : 'border-[var(--color-border-default)]',
+      )}
+      value={text}
+      disabled={disabled}
+      onChange={(event) => onChange(parseValue(event.target.value, type))}
+    >
+      <option value="">{BLANK_PLACEHOLDER}</option>
+      {text && !choices.includes(text) && (
+        <option value={text} disabled={true}>
+          {text}
+        </option>
+      )}
+      {choices.map((choice) => (
+        <option key={choice} value={choice}>
+          {choice}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+/**
+ * One typed value (spec §17.7): shown as text, or `(blank)`, until clicked;
+ * then typed, and read when the input loses focus or on Enter. Text that is
+ * not a value of the type is kept, to be fixed, and marked in both modes.
+ * Leaving a blank value without typing keeps it blank; Enter on it confirms
+ * an empty text, a value of a STRING column. Enter and Escape give the focus
+ * back to the value; leaving it by focus leaves the focus where it went.
+ */
+const CubeValueText: React.FC<{
+  label: string;
+  type: CubeType;
+  item: FilterValueItem | undefined;
+  onChange: (item: FilterValueItem | undefined) => void;
+  disabled: boolean;
+}> = (props) => {
+  const { label, type, item, onChange, disabled } = props;
+  const [editedText, setEditedText] = useState<string | undefined>(undefined);
+  const [returnFocus, setReturnFocus] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  /** Enter and Escape, as the input being typed handles them now */
+  const onKeyRef = useRef<(key: string) => void>(() => undefined);
+  const isTyping = editedText !== undefined;
+  // a native listener: Chrome's date input gives React no Enter keydown
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!isTyping || !input) {
+      return undefined;
+    }
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (event.key === 'Enter' || event.key === 'Escape') {
+        // or the key's press would reach the value it gives the focus to,
+        // and open it again
+        event.preventDefault();
+        onKeyRef.current(event.key);
+      }
+    };
+    input.addEventListener('keydown', onKeyDown);
+    return () => input.removeEventListener('keydown', onKeyDown);
+  }, [isTyping]);
+  const text = getItemText(item);
+  const problem = getValueProblem(item, type);
+  const markClass = problem
+    ? 'border-[var(--color-status-error)] text-[var(--color-status-error)]'
+    : 'border-[var(--color-border-default)]';
+  if (editedText === undefined) {
+    return (
+      <button
+        aria-label={label}
+        aria-invalid={problem !== undefined}
+        title={problem ?? 'Click to change'}
+        className={clsx(INPUT_CLASS, 'truncate text-left', markClass, {
+          'text-[var(--color-text-muted)]': item === undefined,
+        })}
+        disabled={disabled}
+        // back from typing with Enter or Escape
+        autoFocus={returnFocus}
+        onClick={() => setEditedText(text)}
+      >
+        {item === undefined
+          ? BLANK_PLACEHOLDER
+          : item.kind === 'string' && !item.value
+            ? '""'
+            : text}
+      </button>
+    );
+  }
+  const commit = (confirmed: boolean): void => {
+    setEditedText(undefined);
+    const typed =
+      type.family === TypeFamily.DATETIME
+        ? withDateTimeSeconds(editedText)
+        : editedText;
+    if (
+      typed !== text ||
+      (confirmed && item === undefined && type.family === TypeFamily.STRING)
+    ) {
+      onChange(parseValue(typed, type));
+    }
+  };
+  onKeyRef.current = (key: string): void => {
+    if (key === 'Enter') {
+      setReturnFocus(true);
+      commit(true);
+    } else if (key === 'Escape') {
+      setReturnFocus(true);
+      setEditedText(undefined);
+    }
+  };
+  return (
+    <input
+      aria-label={label}
+      aria-invalid={problem !== undefined}
+      title={problem}
+      className={clsx(INPUT_CLASS, markClass)}
+      type={getInputType(type)}
+      // seconds are needed: the engine truncates a date-time without them
+      step={type.family === TypeFamily.DATETIME ? 1 : undefined}
+      // the input replaces the button the user just clicked
+      autoFocus={true}
+      value={editedText}
+      onChange={(event) => setEditedText(event.target.value)}
+      ref={inputRef}
+      onBlur={() => {
+        setReturnFocus(false);
+        commit(false);
+      }}
+    />
+  );
+};
+
+/** One value of a column type, picked or typed as the type wants */
+const CubeSingleValueEditor: React.FC<{
+  label: string;
+  type: CubeType;
+  item: FilterValueItem | undefined;
+  onChange: (item: FilterValueItem | undefined) => void;
+  disabled: boolean;
+}> = (props) =>
+  props.type.family === TypeFamily.ENUM ||
+  props.type.family === TypeFamily.BOOLEAN ? (
+    <CubeValueSelect {...props} />
+  ) : (
+    <CubeValueText {...props} />
+  );
+
+/**
+ * The value of a condition, as its operator wants it (spec §17.7): none,
+ * one, or a list (In and NotIn), each value entered as its column's type
+ * wants (`parseValue`): a date input for dates, a picker for an enumeration
+ * or a boolean, text for the rest.
+ */
+export const CubeValueEditor: React.FC<{
+  /** What the value is for: the editor's accessible name, e.g. `Filter value` */
+  label: string;
+  type: CubeType;
+  shape: FilterValueShape;
+  value: FilterValue | undefined;
+  onChange: (value: FilterValue | undefined) => void;
+  disabled?: boolean | undefined;
+}> = (props) => {
+  const { label, type, shape, value, onChange } = props;
+  const disabled = Boolean(props.disabled);
+  if (shape === 'none') {
+    return null;
+  }
+  if (shape === 'single') {
+    return (
+      <CubeSingleValueEditor
+        label={label}
+        type={type}
+        item={isFilterValueList(value) ? undefined : value}
+        onChange={onChange}
+        disabled={disabled}
+      />
+    );
+  }
+  const items = isFilterValueList(value) ? value : value ? [value] : [];
+  const setItems = (next: readonly FilterValueItem[]): void =>
+    onChange(next.length ? next : undefined);
+  return (
+    <ul aria-label={label} className="flex min-w-0 flex-1 flex-col gap-1">
+      {items.map((item, index) => (
+        // values can repeat and have no id. A row's only state is its text
+        // while typed, which blur commits before another row can be removed
+        // eslint-disable-next-line react/no-array-index-key
+        <li key={index} className="flex items-center gap-1">
+          <CubeSingleValueEditor
+            label={`${label} ${index + 1}`}
+            type={type}
+            item={item}
+            disabled={disabled}
+            onChange={(changed) =>
+              setItems(
+                changed === undefined
+                  ? items.filter((_, other) => other !== index)
+                  : items.map((other, position) =>
+                      position === index ? changed : other,
+                    ),
+              )
+            }
+          />
+          <button
+            className="flex h-6 w-6 shrink-0 items-center justify-center text-[var(--color-text-secondary)] disabled:text-[var(--color-text-disabled)]"
+            aria-label={`Remove ${label.toLowerCase()} ${index + 1}`}
+            disabled={disabled}
+            onClick={() =>
+              setItems(items.filter((_, other) => other !== index))
+            }
+          >
+            <TimesIcon />
+          </button>
+        </li>
+      ))}
+      <li className="flex items-center gap-1">
+        <CubeSingleValueEditor
+          // always blank: what it adds goes to the list above
+          label={`Add ${label.toLowerCase()}`}
+          type={type}
+          item={undefined}
+          disabled={disabled}
+          onChange={(added) => {
+            if (added !== undefined) {
+              setItems([...items, added]);
+            }
+          }}
+        />
+      </li>
+    </ul>
+  );
+};