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

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>
+    );
+  },
+);

package/src/components/source-picker/CubeSourcePicker.tsx

@@ -0,0 +1,304 @@
+/**
+ * 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,
+  Dialog,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalFooterButton,
+  ModalHeader,
+  PanelLoadingIndicator,
+} from '@finos/legend-art';
+import { getRelationalDisplayName } from '@finos/legend-cube';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useId } from 'react';
+import {
+  CUBE_PENDING_LABEL,
+  CUBE_TABLE_FLAG_LABELS,
+} from '../../__lib__/LegendCubeLabels.js';
+import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import { isTableSelectable } from '../../stores/CubeSourcePickerState.js';
+import { CubeButton } from '../CubeButton.js';
+
+/** One step of the picker: a labelled list of choices, read-only when the cube fixes it */
+const CubePickerStep: React.FC<{
+  label: string;
+  value: string | undefined;
+  options: readonly { value: string; label: string }[];
+  disabled?: boolean;
+  onChange: (value: string | undefined) => void;
+}> = ({ label, value, options, disabled, onChange }) => {
+  const id = useId();
+  return (
+    <div className="flex items-center gap-2">
+      <label className="w-20 shrink-0 text-base" htmlFor={id}>
+        {label}
+      </label>
+      <select
+        id={id}
+        className="h-7 min-w-0 flex-1 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base text-[var(--color-text-primary)] disabled:text-[var(--color-text-secondary)]"
+        value={value ?? ''}
+        disabled={Boolean(disabled) || !options.length}
+        onChange={(event) => onChange(event.target.value || undefined)}
+      >
+        {value === undefined && <option value="">Choose…</option>}
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+/**
+ * Adds a table to the cube (PLAN §6.2.7): a minimal dialog, which M3
+ * redesigns. The table lands with its schema; the first one fixes the cube's
+ * model and runtime.
+ */
+/** The Model option that offers a text box for Pure text */
+const PASTE_MODEL_OPTION = 'paste';
+
+export const CubeSourcePicker = observer(
+  (props: { editorState: CubeEditorState }) => {
+    const { editorState } = props;
+    const picker = editorState.sourcePicker;
+    const { applicationStore } = editorState.host;
+    const darkMode =
+      !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
+    const isFixed = picker.fixedContext !== undefined;
+    const fixedModelLabel =
+      picker.models.find(
+        (model) =>
+          JSON.stringify(model.model) ===
+          JSON.stringify(picker.fixedContext?.model),
+      )?.label ?? "The cube's model";
+    const confirm = (): void => {
+      flowResult(picker.confirm()).catch(applicationStore.alertUnhandledError);
+    };
+
+    return (
+      <Dialog open={picker.isOpen} onClose={() => picker.close()}>
+        <Modal darkMode={darkMode} className="w-[640px] max-w-full">
+          <ModalHeader>
+            <div className="modal__title">Add a table</div>
+          </ModalHeader>
+          <PanelLoadingIndicator
+            isLoading={picker.isLoadingModel || picker.isResolving}
+          />
+          <ModalBody>
+            <div className="flex flex-col gap-2">
+              <CubePickerStep
+                label="Model"
+                value={
+                  isFixed
+                    ? 'fixed'
+                    : picker.isPastingModel
+                      ? PASTE_MODEL_OPTION
+                      : picker.models.find(
+                          (model) => model.model === picker.model,
+                        )?.id
+                }
+                options={
+                  isFixed
+                    ? [{ value: 'fixed', label: fixedModelLabel }]
+                    : [
+                        ...picker.models.map((model) => ({
+                          value: model.id,
+                          label: model.label,
+                        })),
+                        {
+                          value: PASTE_MODEL_OPTION,
+                          label: 'Paste Pure model…',
+                        },
+                      ]
+                }
+                disabled={isFixed}
+                onChange={(id) => {
+                  if (id === PASTE_MODEL_OPTION) {
+                    picker.startPastingModel();
+                    return;
+                  }
+                  const model = picker.models.find(
+                    (candidate) => candidate.id === id,
+                  );
+                  if (model) {
+                    flowResult(picker.selectModel(model.model)).catch(
+                      applicationStore.alertUnhandledError,
+                    );
+                  }
+                }}
+              />
+              {picker.isPastingModel && !isFixed && (
+                <div className="flex flex-col gap-1">
+                  <textarea
+                    className="h-40 w-full resize-y rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] p-1 font-mono text-sm text-[var(--color-text-primary)]"
+                    aria-label="Pure model"
+                    placeholder={
+                      '###Relational\nDatabase my::Database ( … )\n\n###Runtime\nRuntime my::Runtime { … }'
+                    }
+                    spellCheck={false}
+                    value={picker.pastedModelText}
+                    onChange={(event) =>
+                      picker.setPastedModelText(event.target.value)
+                    }
+                  />
+                  <div className="flex items-center gap-2">
+                    <CubeButton
+                      disabled={
+                        !picker.pastedModelText.trim() || picker.isLoadingModel
+                      }
+                      onClick={() => {
+                        flowResult(picker.loadPastedModel()).catch(
+                          applicationStore.alertUnhandledError,
+                        );
+                      }}
+                    >
+                      Load model
+                    </CubeButton>
+                    <span className="text-sm text-[var(--color-text-muted)]">
+                      The cube keeps the model&apos;s text, which counts towards
+                      the 1 MiB a cube spec can hold.
+                    </span>
+                  </div>
+                </div>
+              )}
+              {picker.isLoadingModel && (
+                <div className="text-base text-[var(--color-text-secondary)]">
+                  {CUBE_PENDING_LABEL.LOADING_MODEL}
+                </div>
+              )}
+              <CubePickerStep
+                label="Database"
+                value={picker.databasePath}
+                options={picker.databases.map((database) => ({
+                  value: database.path,
+                  label: database.path,
+                }))}
+                disabled={picker.fixedDatabasePath !== undefined}
+                onChange={(path) => picker.selectDatabase(path)}
+              />
+              <CubePickerStep
+                label="Runtime"
+                value={picker.runtimePath}
+                options={picker.runtimes.map((runtime) => ({
+                  value: runtime.path,
+                  label: runtime.path,
+                }))}
+                disabled={picker.fixedContext?.runtime !== undefined}
+                onChange={(path) => picker.selectRuntime(path)}
+              />
+              <CubePickerStep
+                label="Schema"
+                value={picker.schemaName}
+                options={picker.schemas.map((schema) => ({
+                  value: schema.name,
+                  label: getRelationalDisplayName(schema.name),
+                }))}
+                onChange={(name) => picker.selectSchema(name)}
+              />
+              {picker.schemaName !== undefined && (
+                <div className="flex flex-col gap-1">
+                  <input
+                    className="h-7 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base text-[var(--color-text-primary)]"
+                    placeholder="Search tables"
+                    aria-label="Search tables"
+                    value={picker.tableSearch}
+                    onChange={(event) =>
+                      picker.setTableSearch(event.target.value)
+                    }
+                  />
+                  <ul
+                    className="h-56 overflow-auto rounded-sm border border-[var(--color-border-subtle)]"
+                    aria-label="Tables"
+                  >
+                    {picker.tables.map((table) => {
+                      const selectable = isTableSelectable(table);
+                      const isPicked = picker.tableName === table.name;
+                      return (
+                        <li key={table.name}>
+                          <button
+                            type="button"
+                            className={clsx(
+                              'flex w-full items-center gap-2 px-2 py-1 text-left text-base enabled:hover:bg-[var(--color-bg-hover)] disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]',
+                              { 'bg-[var(--color-bg-selected)]': isPicked },
+                            )}
+                            aria-pressed={isPicked}
+                            disabled={!selectable}
+                            onClick={() => picker.selectTable(table.name)}
+                          >
+                            <span className="min-w-0 flex-1 truncate">
+                              {getRelationalDisplayName(table.name)}
+                            </span>
+                            {table.flags.map((flag) => (
+                              <span
+                                key={flag}
+                                className="rounded-sm bg-[var(--color-status-warn-bg)] px-1 text-sm text-[var(--color-status-warn)]"
+                                title={CUBE_TABLE_FLAG_LABELS[flag].description}
+                              >
+                                {CUBE_TABLE_FLAG_LABELS[flag].label}
+                              </span>
+                            ))}
+                            <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
+                              {table.columnCount} columns
+                            </span>
+                          </button>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+              )}
+              {picker.isResolving && (
+                <div className="text-base text-[var(--color-text-secondary)]">
+                  {CUBE_PENDING_LABEL.RESOLVING_SOURCE}
+                </div>
+              )}
+              {picker.error !== undefined && (
+                <div
+                  className="text-base text-[var(--color-status-error)]"
+                  role="alert"
+                >
+                  {picker.error}
+                </div>
+              )}
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              darkMode={darkMode}
+              formatText={false}
+              text="Add"
+              disabled={!picker.canConfirm}
+              onClick={confirm}
+            />
+            <ModalFooterButton
+              darkMode={darkMode}
+              formatText={false}
+              type="secondary"
+              text="Cancel"
+              onClick={() => picker.close()}
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);