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

package/src/components/grid/CubeGridValues.ts

@@ -0,0 +1,125 @@
+/**
+ * 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 { TypeFamily } from '@finos/legend-cube';
+import type { CubeResultValue } from '../../graph-manager/CubeEngine.js';
+
+// How the grid shows and sorts values (PLAN §9, Settled before M1.8).
+// Integer and Decimal values arrive as their exact text and are never turned
+// into JS numbers, which would lose digits.
+
+const NUMERIC_FAMILIES: ReadonlySet<TypeFamily> = new Set([
+  TypeFamily.INTEGER,
+  TypeFamily.FLOAT,
+  TypeFamily.DECIMAL,
+  TypeFamily.NUMBER,
+]);
+
+export const isNumericFamily = (family: TypeFamily): boolean =>
+  NUMERIC_FAMILIES.has(family);
+
+const NUMBER_TEXT =
+  /^(?<sign>[+-]?)(?<whole>\d*)(?:\.(?<fraction>\d*))?(?:[eE](?<exponent>[+-]?\d+))?$/u;
+
+/** A number's text as sign, digits without leading or trailing zeros, and the position of the decimal point */
+const parseNumberText = (
+  text: string,
+): { negative: boolean; digits: string; point: number } | undefined => {
+  const groups = NUMBER_TEXT.exec(text.trim())?.groups;
+  if (!groups || (!groups.whole && !groups.fraction)) {
+    return undefined;
+  }
+  const {
+    sign,
+    whole = '',
+    fraction = '',
+    exponent = '0',
+  } = groups as Partial<Record<string, string>>;
+  const allDigits = whole + fraction;
+  const leadingZeros = allDigits.length - allDigits.replace(/^0+/u, '').length;
+  const digits = allDigits.slice(leadingZeros).replace(/0+$/u, '');
+  return {
+    negative: sign === '-' && digits !== '',
+    digits,
+    point: whole.length - leadingZeros + Number(exponent),
+  };
+};
+
+const compareMagnitudes = (
+  left: { digits: string; point: number },
+  right: { digits: string; point: number },
+): number => {
+  if (!left.digits || !right.digits) {
+    return (left.digits ? 1 : 0) - (right.digits ? 1 : 0);
+  }
+  if (left.point !== right.point) {
+    return left.point < right.point ? -1 : 1;
+  }
+  const length = Math.max(left.digits.length, right.digits.length);
+  const a = left.digits.padEnd(length, '0');
+  const b = right.digits.padEnd(length, '0');
+  return a === b ? 0 : a < b ? -1 : 1;
+};
+
+/** Compares two numbers written as text, digit for digit: `'9' < '10'`, `'9007199254740993' > '9007199254740992'` */
+export const compareNumberText = (left: string, right: string): number => {
+  const a = parseNumberText(left);
+  const b = parseNumberText(right);
+  if (!a || !b) {
+    // not a number: keep a stable order by text
+    return left < right ? -1 : left > right ? 1 : 0;
+  }
+  if (a.negative !== b.negative) {
+    return a.negative ? -1 : 1;
+  }
+  const magnitude = compareMagnitudes(a, b);
+  return a.negative ? -magnitude : magnitude;
+};
+
+/** Orders a column's values: nulls first, then numbers by value whether they are JS numbers or exact text */
+export const compareCellValues = (
+  left: CubeResultValue | undefined,
+  right: CubeResultValue | undefined,
+): number => {
+  if (
+    left === null ||
+    left === undefined ||
+    right === null ||
+    right === undefined
+  ) {
+    return (left ?? null) === null ? ((right ?? null) === null ? 0 : -1) : 1;
+  }
+  if (typeof left === 'number' && typeof right === 'number') {
+    return left - right;
+  }
+  if (
+    (typeof left === 'string' || typeof left === 'number') &&
+    (typeof right === 'string' || typeof right === 'number')
+  ) {
+    return compareNumberText(String(left), String(right));
+  }
+  return String(left) < String(right)
+    ? -1
+    : String(left) > String(right)
+      ? 1
+      : 0;
+};
+
+/** A run's duration for the toolbar: milliseconds under a second, else seconds */
+export const formatDuration = (durationMs: number): string =>
+  durationMs < 1000
+    ? `${Math.round(durationMs)} ms`
+    : `${(durationMs / 1000).toFixed(1)} s`;

package/src/components/grid/CubeResultGrid.tsx

@@ -0,0 +1,84 @@
+/**
+ * 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 {
+  DataGrid,
+  type DataGridCellRendererParams,
+  type DataGridColumnDefinition,
+} from '@finos/legend-lego/data-grid';
+import { memo, useMemo } from 'react';
+import { NULL_CELL_TEXT } from '../../__lib__/LegendCubeLabels.js';
+import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import type { CubeResultValue } from '../../graph-manager/CubeEngine.js';
+import type { CubeExecutionResult } from '../../stores/CubeExecutionState.js';
+import { compareCellValues, isNumericFamily } from './CubeGridValues.js';
+
+type CubeRow = readonly CubeResultValue[];
+
+const CubeCell: React.FC<
+  DataGridCellRendererParams<CubeRow, CubeResultValue>
+> = (props) =>
+  props.value === null || props.value === undefined ? (
+    <span className="text-[var(--color-text-muted)]">{NULL_CELL_TEXT}</span>
+  ) : (
+    <>{String(props.value)}</>
+  );
+
+/**
+ * The rows of a run (PLAN §9): columns from Cube's own schema of the capture
+ * node, by position, so any column name works. Numbers are right-aligned and
+ * shown and sorted exactly as the engine wrote them.
+ */
+export const CubeResultGrid = memo(
+  (props: { result: CubeExecutionResult; darkMode: boolean }) => {
+    const { result, darkMode } = props;
+    const columnDefs = useMemo(
+      (): DataGridColumnDefinition<CubeRow, CubeResultValue>[] =>
+        result.schema.columns.map((column, position) => {
+          const numeric = isNumericFamily(column.type.family);
+          return {
+            colId: `c${position}`,
+            headerName: column.name,
+            headerTooltip: `${column.type.displayName}${column.nullable ? '?' : ''} (${column.type.fullName})`,
+            valueGetter: (params) => params.data?.[position] ?? null,
+            cellRenderer: CubeCell,
+            ...(numeric
+              ? { type: 'rightAligned', comparator: compareCellValues }
+              : {}),
+          };
+        }),
+      [result],
+    );
+    return (
+      <div
+        className={clsx('h-full w-full', {
+          'ag-theme-balham': !darkMode,
+          'ag-theme-balham-dark': darkMode,
+        })}
+        data-testid={LEGEND_CUBE_TEST_ID.RESULT_GRID}
+      >
+        <DataGrid<CubeRow>
+          rowData={result.rows as CubeRow[]}
+          columnDefs={columnDefs}
+          suppressFieldDotNotation={true}
+          tooltipShowDelay={500}
+        />
+      </div>
+    );
+  },
+);
+CubeResultGrid.displayName = 'CubeResultGrid';

package/src/components/palette/CubePalette.tsx

@@ -0,0 +1,177 @@
+/**
+ * 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 { ChevronLeftIcon, ChevronRightIcon, clsx } from '@finos/legend-art';
+import type { AnyNodeDefinition } from '@finos/legend-cube';
+import { observer } from 'mobx-react-lite';
+import { useRef } from 'react';
+import { useDrag } from 'react-dnd';
+import { READ_ONLY_CUBE_TITLE } from '../../__lib__/LegendCubeLabels.js';
+import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import {
+  CUBE_DND_TYPE,
+  type CubePaletteDragItem,
+} from '../canvas/CubeCanvasDnd.js';
+import { CubeNodeIcon } from '../CubeNodeIcon.js';
+
+/** Shown in the palette while the cube has no node yet (spec §17.2, worded for the canvas) */
+export const PALETTE_EMPTY_HINT = 'Drag items onto the canvas.';
+
+/** What an item does, for its tooltip */
+const describeItem = (definition: AnyNodeDefinition): string =>
+  definition.kind === 'source'
+    ? 'Click, or drop it on the canvas, to pick a table'
+    : 'Drag it onto a node to add it after that node, or onto the canvas to add it on its own; click to add it on its own';
+
+const CubePaletteItem = observer(
+  (props: {
+    editorState: CubeEditorState;
+    definition: AnyNodeDefinition;
+    collapsed: boolean;
+  }) => {
+    const { editorState, definition, collapsed } = props;
+    const { readOnly } = editorState;
+    const ref = useRef<HTMLDivElement>(null);
+    const [, dragConnector] = useDrag<CubePaletteDragItem>(
+      () => ({
+        type: CUBE_DND_TYPE.PALETTE_ITEM,
+        item: { nodeType: definition.type },
+        canDrag: () => !editorState.readOnly,
+      }),
+      [editorState, definition.type],
+    );
+    dragConnector(ref);
+    const label = `${definition.label}${definition.beta ? ' (BETA)' : ''}`;
+    const add = (): void => {
+      if (!readOnly) {
+        editorState.addNode(definition.type);
+      }
+    };
+    return (
+      // a div, not a button: browsers won't drag a button
+      <div
+        ref={ref}
+        role="button"
+        tabIndex={readOnly ? -1 : 0}
+        aria-disabled={readOnly}
+        aria-label={label}
+        className={clsx(
+          'flex h-8 shrink-0 items-center gap-2 px-3 text-base',
+          readOnly
+            ? 'cursor-not-allowed text-[var(--color-text-disabled)]'
+            : 'cursor-grab hover:bg-[var(--color-bg-hover)]',
+        )}
+        title={
+          readOnly
+            ? READ_ONLY_CUBE_TITLE
+            : collapsed
+              ? `${label}: ${describeItem(definition)}`
+              : describeItem(definition)
+        }
+        onClick={add}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            add();
+          }
+        }}
+        data-testid={LEGEND_CUBE_TEST_ID.PALETTE_ITEM}
+      >
+        <CubeNodeIcon
+          icon={definition.icon}
+          className="shrink-0 text-[var(--color-text-secondary)]"
+        />
+        {!collapsed && (
+          <span className="min-w-0 flex-1 truncate">{definition.label}</span>
+        )}
+        {!collapsed && definition.beta && (
+          <span className="shrink-0 rounded-sm bg-[var(--color-accent)] px-1 text-xs font-medium text-[var(--color-text-on-accent)]">
+            BETA
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+/**
+ * The sidebar of node types to add (spec §17.2): the sources, then the
+ * transforms in menu order, read from the registry, as the context menu is.
+ * Collapsed, it shows icons only; that choice is kept per user.
+ */
+export const CubePalette = observer(
+  (props: { editorState: CubeEditorState }) => {
+    const { editorState } = props;
+    const collapsed = editorState.isPaletteCollapsed;
+    const { registry } = editorState;
+    return (
+      <div
+        className={clsx(
+          'flex h-full shrink-0 flex-col border-r border-[var(--color-border-default)] bg-[var(--color-bg-panel)]',
+          collapsed ? 'w-10' : 'w-56',
+        )}
+        data-testid={LEGEND_CUBE_TEST_ID.PALETTE}
+      >
+        <div className="flex h-8 shrink-0 items-center border-b border-[var(--color-border-default)] bg-[var(--color-bg-panel-header)] px-2">
+          {!collapsed && (
+            <span className="min-w-0 flex-1 truncate text-base font-medium">
+              Add to the query
+            </span>
+          )}
+          <button
+            className="flex h-6 w-6 shrink-0 items-center justify-center text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]"
+            title={collapsed ? 'Expand the palette' : 'Collapse the palette'}
+            onClick={() => editorState.setPaletteCollapsed(!collapsed)}
+          >
+            {collapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}
+          </button>
+        </div>
+        <div
+          className="flex min-h-0 shrink flex-col overflow-auto py-1"
+          role="group"
+          aria-label="Palette"
+        >
+          {registry.sources.map((definition) => (
+            <CubePaletteItem
+              key={definition.type}
+              editorState={editorState}
+              definition={definition}
+              collapsed={collapsed}
+            />
+          ))}
+          <div
+            className="mx-2 my-1 shrink-0 border-t border-[var(--color-border-default)]"
+            role="separator"
+          />
+          {registry.transforms.map((definition) => (
+            <CubePaletteItem
+              key={definition.type}
+              editorState={editorState}
+              definition={definition}
+              collapsed={collapsed}
+            />
+          ))}
+        </div>
+        {!collapsed && editorState.document.query.isEmpty && (
+          <div className="shrink-0 px-3 py-2 text-sm text-[var(--color-text-muted)]">
+            {PALETTE_EMPTY_HINT}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/show-pure/CubeShowPureDialog.tsx

@@ -0,0 +1,101 @@
+/**
+ * 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,
+  PanelLoadingIndicator,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { CUBE_PENDING_LABEL } from '../../__lib__/LegendCubeLabels.js';
+import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+
+/** The Pure text of what Execute would run, read-only, with Copy */
+export const CubeShowPureDialog = observer(
+  (props: { editorState: CubeEditorState }) => {
+    const { editorState } = props;
+    const showPure = editorState.showPure;
+    const { applicationStore } = editorState.host;
+    const darkMode =
+      !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
+    const { text, error } = showPure;
+
+    return (
+      <Dialog open={showPure.isOpen} onClose={() => showPure.close()}>
+        <Modal darkMode={darkMode} className="w-[800px] max-w-full">
+          <ModalHeader>
+            <div className="modal__title">Pure query</div>
+          </ModalHeader>
+          <PanelLoadingIndicator isLoading={showPure.isRendering} />
+          <ModalBody>
+            <div className="flex flex-col gap-2">
+              {showPure.isRendering && (
+                <div className="text-base text-[var(--color-text-secondary)]">
+                  {CUBE_PENDING_LABEL.RENDERING_QUERY}
+                </div>
+              )}
+              {text !== undefined && (
+                <pre
+                  className="max-h-[60vh] overflow-auto whitespace-pre rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] p-2 font-mono text-sm text-[var(--color-text-primary)]"
+                  aria-label="Pure query"
+                >
+                  {text}
+                </pre>
+              )}
+              {error && (
+                <div
+                  className="whitespace-pre-wrap break-words text-base text-[var(--color-status-error)]"
+                  role="alert"
+                >
+                  {error.detail}
+                </div>
+              )}
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              darkMode={darkMode}
+              formatText={false}
+              text="Copy to Clipboard"
+              disabled={text === undefined}
+              onClick={() => {
+                if (text !== undefined) {
+                  applicationStore.clipboardService
+                    .copyTextToClipboard(text, {
+                      notifySuccessMessage:
+                        'Pure query copied to the clipboard',
+                    })
+                    .catch(applicationStore.alertUnhandledError);
+                }
+              }}
+            />
+            <ModalFooterButton
+              darkMode={darkMode}
+              formatText={false}
+              type="secondary"
+              text="Close"
+              onClick={() => showPure.close()}
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);