@finos/legend-cube-builder 0.0.4 → 0.0.6

package/src/components/editors/CubePivotEditor.tsx

@@ -0,0 +1,277 @@
+/**
+ * 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';
+import {
+  AggregationFunction,
+  getAggregationDisplayName,
+  getAvailableAggregations,
+  getLiteralText,
+  getPivotColumnNames,
+  isPivotableType,
+  isSortableType,
+  type LiteralValue,
+  type Schema,
+} from '@finos/legend-cube';
+import { guaranteeType } from '@finos/legend-shared';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import {
+  getPivotValuesCutNotice,
+  PIVOT_COLUMN_DISABLED_REASON,
+  PIVOT_EDITOR_NOTES,
+  PIVOT_NO_VALUES_NOTICE,
+} from '../../__lib__/LegendCubeLabels.js';
+import { CubePivotDraft } from '../../stores/editors/CubePivotDraft.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeColumnChecklist } from './CubeColumnChecklist.js';
+import { CubeColumnPicker } from './CubeColumnPicker.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+
+const ROWS = 'Row columns';
+
+/**
+ * The functions the aggregation can take: those its column's type offers,
+ * or every column function before one is picked, then Count rows, never
+ * Distinct Value (PLAN §11.12); one it holds that isn't among them stays
+ * listed, so the problem can be seen and fixed
+ */
+const functionOptions = (
+  fn: string,
+  column: string | undefined,
+  schema: Schema,
+): string[] => {
+  const type = column ? schema.lookup(column)?.type : undefined;
+  const offered: string[] = [
+    ...(type
+      ? getAvailableAggregations(type)
+      : Object.values(AggregationFunction).filter(
+          (each) => each !== AggregationFunction.COUNT_ROWS,
+        )
+    ).filter((each) => each !== AggregationFunction.DISTINCT_VALUE),
+    AggregationFunction.COUNT_ROWS,
+  ];
+  return fn && !offered.includes(fn) ? [fn, ...offered] : offered;
+};
+
+const sameValue = (a: LiteralValue, b: LiteralValue): boolean =>
+  a.kind === b.kind && a.value === b.value;
+
+/** The values to tick: those loaded, then those picked that weren't */
+const listedValues = (draft: CubePivotDraft): LiteralValue[] => {
+  const loaded = draft.loaded?.values ?? [];
+  return [
+    ...loaded,
+    ...draft.values.filter(
+      (value) => !loaded.some((each) => sameValue(each, value)),
+    ),
+  ];
+};
+
+/**
+ * The Pivot editor (PLAN §11.12): the row columns, ticked; the pivot column;
+ * its values, loaded from the engine and ticked, each named as its column
+ * will be; then the aggregation, a function and its column. The node's
+ * problems show under it, as for any node.
+ */
+export const CubePivotEditor = observer((props: CubeNodeEditorProps) => {
+  const { readOnly } = props;
+  const draft = guaranteeType(props.draft, CubePivotDraft);
+  const [schema] = props.inputSchemas as [Schema];
+  const { aggregation } = draft;
+  const takesNoColumn = aggregation.function === AggregationFunction.COUNT_ROWS;
+  const values = listedValues(draft);
+  const names = getPivotColumnNames(draft.rows, draft.values);
+  return (
+    <div className="flex flex-col gap-2 text-base">
+      <CubeColumnChecklist
+        label={ROWS}
+        schema={schema}
+        picked={draft.rows}
+        unpickableReason={(column) =>
+          column.name === draft.column
+            ? PIVOT_COLUMN_DISABLED_REASON.PIVOT_COLUMN
+            : column.name === aggregation.column
+              ? PIVOT_COLUMN_DISABLED_REASON.AGGREGATED
+              : isSortableType(column.type)
+                ? undefined
+                : PIVOT_COLUMN_DISABLED_REASON.NOT_GROUPABLE
+        }
+        clearTitle="Untick every row column: one row for all the rows"
+        readOnly={readOnly}
+        onToggle={(name) => draft.toggleRow(name, schema)}
+        onClear={() => draft.clearRows()}
+      />
+      <div className="flex items-center gap-2">
+        <span className="shrink-0">Pivot column</span>
+        <CubeColumnPicker
+          label="Pivot column"
+          schema={schema}
+          value={draft.column}
+          disabled={readOnly}
+          onChange={(name) => draft.setColumn(name)}
+          isColumnDisabled={(column) =>
+            !isPivotableType(column.type)
+              ? PIVOT_COLUMN_DISABLED_REASON.NOT_PIVOTABLE
+              : draft.rows.includes(column.name)
+                ? PIVOT_COLUMN_DISABLED_REASON.ROW_COLUMN
+                : column.name === aggregation.column
+                  ? PIVOT_COLUMN_DISABLED_REASON.AGGREGATED
+                  : undefined
+          }
+        />
+      </div>
+      <div className="flex items-center gap-2">
+        <span>Values</span>
+        <span className="flex-1" />
+        <CubeButton
+          title="Ask the engine for the pivot column's values"
+          disabled={readOnly || !draft.column || draft.loading}
+          onClick={() => {
+            flowResult(draft.loadValues()).catch(
+              draft.editorState.host.applicationStore.alertUnhandledError,
+            );
+          }}
+        >
+          {draft.loading ? 'Loading…' : 'Load values'}
+        </CubeButton>
+        <CubeButton
+          title="Tick every value listed that can be"
+          disabled={readOnly || !draft.loaded?.values.length}
+          onClick={() => draft.pickAllValues()}
+        >
+          All
+        </CubeButton>
+        <CubeButton
+          title="Untick every value"
+          aria-label="None of the values"
+          disabled={readOnly || !draft.values.length}
+          onClick={() => draft.clearValues()}
+        >
+          None
+        </CubeButton>
+      </div>
+      {draft.loadError && (
+        <div className="text-sm text-[var(--color-status-error)]">
+          {draft.loadError}
+        </div>
+      )}
+      {values.length > 0 && (
+        <ul
+          aria-label="Values"
+          className="max-h-40 overflow-y-auto rounded-sm border border-[var(--color-border-subtle)]"
+        >
+          {values.map((value) => {
+            const text = getLiteralText(value);
+            const picked = draft.values.some((each) => sameValue(each, value));
+            const reason = draft.untickableReason(value);
+            const name =
+              names[draft.values.findIndex((each) => sameValue(each, value))];
+            return (
+              <li key={`${value.kind}:${text}`}>
+                <label
+                  className={clsx(
+                    'flex items-center gap-2 px-2',
+                    reason !== undefined && 'text-[var(--color-text-disabled)]',
+                  )}
+                  title={reason}
+                >
+                  <input
+                    type="checkbox"
+                    checked={picked}
+                    disabled={readOnly || (reason !== undefined && !picked)}
+                    onChange={() => draft.toggleValue(value)}
+                  />
+                  <span className="min-w-0 truncate">
+                    {text === '' ? '(empty text)' : text}
+                  </span>
+                  {reason !== undefined && !picked && (
+                    <span className="shrink-0 text-sm text-[var(--color-text-secondary)]">
+                      {`(${reason})`}
+                    </span>
+                  )}
+                  {picked && name !== undefined && name !== text && (
+                    <span className="text-sm text-[var(--color-text-secondary)]">
+                      {`as ${name}`}
+                    </span>
+                  )}
+                </label>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+      {draft.loaded?.values.length === 0 && (
+        <div className="text-sm text-[var(--color-text-secondary)]">
+          {PIVOT_NO_VALUES_NOTICE}
+        </div>
+      )}
+      {draft.loaded?.more && (
+        <div className="text-sm text-[var(--color-text-secondary)]">
+          {getPivotValuesCutNotice(draft.loaded.values.length)}
+        </div>
+      )}
+      <div className="flex items-center gap-2">
+        <span className="shrink-0">Aggregation</span>
+        <select
+          aria-label="Aggregation function"
+          className="h-6 w-36 shrink-0 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base"
+          value={aggregation.function}
+          disabled={readOnly}
+          onChange={(event) => draft.setFunction(event.target.value)}
+        >
+          {!aggregation.function && (
+            <option value="" disabled={true}>
+              Pick a function
+            </option>
+          )}
+          {functionOptions(
+            aggregation.function,
+            aggregation.column,
+            schema,
+          ).map((fn) => (
+            <option key={fn} value={fn}>
+              {getAggregationDisplayName(fn)}
+            </option>
+          ))}
+        </select>
+        {takesNoColumn ? (
+          <span className="text-[var(--color-text-secondary)]">Every row</span>
+        ) : (
+          <CubeColumnPicker
+            label="Aggregation column"
+            schema={schema}
+            value={aggregation.column}
+            disabled={readOnly}
+            onChange={(name) => draft.setAggregationColumn(name)}
+            isColumnDisabled={(column) =>
+              column.name === draft.column
+                ? PIVOT_COLUMN_DISABLED_REASON.PIVOT_COLUMN
+                : draft.rows.includes(column.name)
+                  ? PIVOT_COLUMN_DISABLED_REASON.ROW_COLUMN
+                  : undefined
+            }
+          />
+        )}
+      </div>
+      <ul className="flex list-disc flex-col gap-1 pl-4 text-sm text-[var(--color-text-secondary)]">
+        {PIVOT_EDITOR_NOTES.map((note) => (
+          <li key={note}>{note}</li>
+        ))}
+      </ul>
+    </div>
+  );
+});

package/src/components/editors/CubeRestrictEditor.tsx

@@ -17,7 +17,10 @@
 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 {
+  getColumnTypeLabel,
+  getExactColumnTypeLabel,
+} from '../../__lib__/LegendCubeLabels.js';
 import { CubeRestrictDraft } from '../../stores/editors/CubeRestrictDraft.js';
 import { CubeButton } from '../CubeButton.js';
 import { CubeColumnTypeIcon } from './CubeColumnPicker.js';
@@ -77,7 +80,10 @@ export const CubeRestrictEditor = observer((props: CubeNodeEditorProps) => {
                 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)]">
+              <span
+                className="shrink-0 text-sm text-[var(--color-text-muted)]"
+                title={getExactColumnTypeLabel(column)}
+              >
                 {getColumnTypeLabel(column)}
               </span>
             </label>

package/src/components/editors/CubeServiceSourceEditor.tsx

@@ -0,0 +1,77 @@
+/**
+ * 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 { ServiceSource } 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_PENDING_LABEL } from '../../__lib__/LegendCubeLabels.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeSchemaColumnsTable } from '../CubeSchemaColumnsTable.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+
+/**
+ * A service (PLAN §6.4), in progress: which service it is, its columns once
+ * Cube can read services, else why it can't, and Refresh, which types it
+ * again
+ */
+export const CubeServiceSourceEditor = observer(
+  (props: CubeNodeEditorProps) => {
+    const { editorState } = props;
+    const source = guaranteeType(props.draft.original, ServiceSource);
+    const { resolution } = source;
+    const refreshing = editorState.isPendingSource(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)]">Service</dt>
+          <dd className="min-w-0 break-all">{source.service}</dd>
+          <dt className="text-[var(--color-text-secondary)]">Pattern</dt>
+          <dd className="min-w-0 break-all">{source.pattern}</dd>
+        </dl>
+        <div className="flex items-center gap-2">
+          <CubeButton
+            title="Read the service's columns again"
+            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="whitespace-pre-wrap text-base text-[var(--color-text-secondary)]">
+            {resolution.kind === 'failed'
+              ? resolution.message
+              : 'The service has not been typed yet.'}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/grid/CubeColumnFormatDialog.tsx

@@ -0,0 +1,289 @@
+/**
+ * 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 {
+  Dialog,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalFooterButton,
+  ModalHeader,
+} from '@finos/legend-art';
+import {
+  type ColumnFormat,
+  ColumnFormatStyle,
+  foldColumnName,
+  getColumnFormat,
+} from '@finos/legend-cube';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import {
+  formatColumnValue,
+  getColumnFormatProblem,
+  getCubeCurrencyCodes,
+} from './CubeGridValues.js';
+import { CUBE_PRIMARY_BUTTON_DARK_MODE } from '../CubeDialogTheme.js';
+
+const STYLE_LABELS: Readonly<Record<ColumnFormatStyle, string>> = {
+  [ColumnFormatStyle.NUMBER]: 'Number',
+  [ColumnFormatStyle.CURRENCY]: 'Currency',
+  [ColumnFormatStyle.PERCENT]: 'Percent',
+};
+
+/** The values the preview formats: a negative and a fraction */
+const PREVIEW_VALUES = ['-1234567.891', '0.25'];
+
+const DEFAULT_FORMAT: ColumnFormat = {
+  style: ColumnFormatStyle.NUMBER,
+  grouping: true,
+  redIfNegative: false,
+  parenthesesIfNegative: false,
+};
+
+const inputClass =
+  'h-6 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base text-[var(--color-text-primary)]';
+
+/** The dialog's form, for the column whose format it edits */
+const CubeColumnFormatForm = observer(
+  (props: { editorState: CubeEditorState; column: string }) => {
+    const { editorState, column } = props;
+    const { grid } = editorState;
+    const hints = editorState.document.meta.presentation.columnHints ?? [];
+    const current = getColumnFormat(hints, column);
+    const ownFormat = hints.some(
+      (hint) =>
+        hint.column !== undefined &&
+        foldColumnName(hint.column) === foldColumnName(column),
+    );
+    // the column shows the format of every number column (review of M7)
+    const sharedFormat =
+      !ownFormat && hints.some((hint) => hint.column === undefined);
+    const [format, setFormat] = useState<ColumnFormat>(
+      current ?? DEFAULT_FORMAT,
+    );
+    const [places, setPlaces] = useState(
+      current?.decimalPlaces === undefined ? '' : String(current.decimalPlaces),
+    );
+    const [applyToAll, setApplyToAll] = useState(false);
+    const darkMode =
+      !editorState.host.applicationStore.layoutService
+        .TEMPORARY__isLightColorThemeEnabled;
+    const placesError =
+      places.trim() === '' || /^(?:1?\d|20)$/u.test(places.trim())
+        ? undefined
+        : 'Decimal places are a whole number from 0 to 20, or blank for all.';
+    const edited: ColumnFormat = {
+      ...format,
+      ...(format.style === ColumnFormatStyle.CURRENCY
+        ? { currency: format.currency ?? 'USD' }
+        : { currency: undefined }),
+      decimalPlaces:
+        places.trim() === '' || placesError ? undefined : Number(places),
+    };
+    const problem = getColumnFormatProblem(edited);
+    const flag = (
+      key: 'grouping' | 'redIfNegative' | 'parenthesesIfNegative',
+      label: string,
+    ) => (
+      <label className="flex items-center gap-2 text-base">
+        <input
+          type="checkbox"
+          checked={format[key]}
+          onChange={(event) =>
+            setFormat({ ...format, [key]: event.target.checked })
+          }
+        />
+        {label}
+      </label>
+    );
+    const close = (): void => grid.closeFormat();
+    return (
+      <Modal darkMode={darkMode} className="w-[460px] max-w-full">
+        <ModalHeader>
+          <div className="modal__title">{`Format ${column}`}</div>
+        </ModalHeader>
+        <ModalBody>
+          <div
+            className="flex flex-col gap-2"
+            data-testid={LEGEND_CUBE_TEST_ID.COLUMN_FORMAT}
+          >
+            <label className="flex items-center justify-between gap-2 text-base">
+              Style
+              <select
+                className={inputClass}
+                aria-label="Style"
+                value={format.style}
+                onChange={(event) =>
+                  setFormat({ ...format, style: event.target.value })
+                }
+              >
+                {Object.values(ColumnFormatStyle).map((style) => (
+                  <option key={style} value={style}>
+                    {STYLE_LABELS[style]}
+                  </option>
+                ))}
+              </select>
+            </label>
+            {format.style === ColumnFormatStyle.CURRENCY && (
+              <label className="flex items-center justify-between gap-2 text-base">
+                Currency
+                <select
+                  className={inputClass}
+                  aria-label="Currency"
+                  value={edited.currency}
+                  onChange={(event) =>
+                    setFormat({ ...format, currency: event.target.value })
+                  }
+                >
+                  {getCubeCurrencyCodes().map((code) => (
+                    <option key={code} value={code}>
+                      {code}
+                    </option>
+                  ))}
+                </select>
+              </label>
+            )}
+            <label className="flex items-center justify-between gap-2 text-base">
+              Decimal places
+              <input
+                className={`${inputClass} w-20 text-right`}
+                aria-label="Decimal places"
+                aria-invalid={placesError !== undefined}
+                placeholder="All"
+                value={places}
+                onChange={(event) => setPlaces(event.target.value)}
+              />
+            </label>
+            {placesError && (
+              <div
+                className="text-sm text-[var(--color-status-error)]"
+                role="alert"
+              >
+                {placesError}
+              </div>
+            )}
+            {flag('grouping', 'Thousands separators')}
+            {flag('redIfNegative', 'Red if negative')}
+            {flag('parenthesesIfNegative', 'Parentheses if negative')}
+            <label className="flex items-center gap-2 text-base">
+              <input
+                type="checkbox"
+                checked={applyToAll}
+                onChange={(event) => setApplyToAll(event.target.checked)}
+              />
+              Apply to every number column
+            </label>
+            <div className="text-base" aria-label="Preview">
+              <span className="text-[var(--color-text-secondary)]">
+                Preview:{' '}
+              </span>
+              {problem ??
+                PREVIEW_VALUES.map((value) => {
+                  const shown = formatColumnValue(value, edited);
+                  return (
+                    <span
+                      key={value}
+                      className={
+                        edited.redIfNegative && shown?.negative
+                          ? 'mr-3 text-[var(--color-status-error)]'
+                          : 'mr-3'
+                      }
+                    >
+                      {shown?.text ?? value}
+                    </span>
+                  );
+                })}
+            </div>
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          {ownFormat && (
+            <ModalFooterButton
+              darkMode={darkMode}
+              formatText={false}
+              type="secondary"
+              text="Remove Format"
+              onClick={() => {
+                grid.setColumnFormat(column, undefined);
+                close();
+              }}
+            />
+          )}
+          {sharedFormat && (
+            <ModalFooterButton
+              darkMode={darkMode}
+              formatText={false}
+              type="secondary"
+              text="Remove Format of Every Number Column"
+              onClick={() => {
+                grid.setColumnFormat(undefined, undefined);
+                close();
+              }}
+            />
+          )}
+          <ModalFooterButton
+            darkMode={CUBE_PRIMARY_BUTTON_DARK_MODE}
+            formatText={false}
+            text="Apply"
+            disabled={placesError !== undefined || problem !== undefined}
+            onClick={() => {
+              grid.setColumnFormat(applyToAll ? undefined : column, edited);
+              close();
+            }}
+          />
+          <ModalFooterButton
+            darkMode={darkMode}
+            formatText={false}
+            type="secondary"
+            text="Cancel"
+            onClick={close}
+          />
+        </ModalFooter>
+      </Modal>
+    );
+  },
+);
+
+/**
+ * Formats a number column (spec §13.1, PLAN §11.10): a number, a currency by
+ * its ISO 4217 code, or a percent; its decimal places, thousands separators,
+ * and negatives in red or in parentheses; for the column, or every number
+ * column. An undo step that leaves the rows current.
+ */
+export const CubeColumnFormatDialog = observer(
+  (props: { editorState: CubeEditorState }) => {
+    const { editorState } = props;
+    const column = editorState.grid.formatColumn;
+    return (
+      <Dialog
+        open={column !== undefined}
+        onClose={() => editorState.grid.closeFormat()}
+      >
+        {column !== undefined ? (
+          <CubeColumnFormatForm
+            key={column}
+            editorState={editorState}
+            column={column}
+          />
+        ) : (
+          <div />
+        )}
+      </Dialog>
+    );
+  },
+);