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

package/src/components/editors/CubeNodeEditorPanel.tsx

@@ -0,0 +1,204 @@
+/**
+ * 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 { QuestionCircleIcon, TimesIcon } from '@finos/legend-art';
+import {
+  isIncompleteError,
+  isSchemasError,
+  type QueryNode,
+  type Schema,
+  UnknownNode,
+} from '@finos/legend-cube';
+import { observer } from 'mobx-react-lite';
+import {
+  CUBE_NODE_HELP_TEXT,
+  SELECT_NODE_TOOLTIP,
+} from '../../__lib__/LegendCubeHelpText.js';
+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_NODE_DRAFT_FACTORIES } from '../../stores/editors/CubeNodeDraftRegistry.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeNodeIcon } from '../CubeNodeIcon.js';
+import { CUBE_NODE_EDITORS } from './CubeNodeEditorRegistry.js';
+
+/** The problems of the edited node against its inputs, as Apply would leave it */
+const validateEdited = (
+  node: QueryNode,
+  inputSchemas: readonly Schema[],
+): string[] => {
+  const errors: string[] = [];
+  node.validate(inputSchemas, errors);
+  return [...new Set(errors)];
+};
+
+/**
+ * The node editor, in a side panel (spec §17.5): the node's label and id, its
+ * help, Select, and its type's editor. Edits stay in the panel until Apply
+ * or closing it; Cancel drops them. While an input is missing or invalid,
+ * the panel shows why instead of the editor, since there would be no
+ * columns to pick.
+ */
+export const CubeNodeEditorPanel = observer(
+  (props: { editorState: CubeEditorState }) => {
+    const { editorState } = props;
+    const { nodeEditor, readOnly } = editorState;
+    const { node, draft, edited } = nodeEditor;
+    if (!node || !draft || !edited) {
+      return null;
+    }
+    const { query } = editorState.document;
+    const definition = editorState.registry.get(node.type);
+    const isCapture = query.selected === node.id;
+    const inputProblems = editorState
+      .getNodeErrors(node.id)
+      .filter((error) => isSchemasError(error) || isIncompleteError(error));
+    const inputSchemas = query
+      .getInputIds(node.id)
+      .map((inputId) =>
+        inputId === undefined
+          ? undefined
+          : editorState.analysis.schemas.get(inputId),
+      )
+      .filter((schema): schema is Schema => schema !== undefined);
+    const Editor = CUBE_NODE_EDITORS.get(node.type);
+    const isEditable = CUBE_NODE_DRAFT_FACTORIES.has(node.type);
+    const problems =
+      isEditable && !inputProblems.length
+        ? validateEdited(edited, inputSchemas)
+        : [];
+    return (
+      <div
+        className="flex h-full flex-col border-l border-[var(--color-border-default)] bg-[var(--color-bg-panel)]"
+        data-testid={LEGEND_CUBE_TEST_ID.NODE_EDITOR}
+      >
+        <div className="flex h-8 shrink-0 items-center gap-2 border-b border-[var(--color-border-default)] bg-[var(--color-bg-panel-header)] px-2">
+          <CubeNodeIcon
+            icon={definition?.icon}
+            className="shrink-0 text-[var(--color-text-secondary)]"
+          />
+          <span className="min-w-0 truncate text-lg font-medium">
+            {definition?.label ?? 'Unknown'}
+          </span>
+          <span className="shrink-0 text-base text-[var(--color-text-muted)]">
+            {node.id}
+          </span>
+          {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>
+          )}
+          <span
+            className="shrink-0 text-[var(--color-text-secondary)]"
+            title={
+              CUBE_NODE_HELP_TEXT[node.type] ??
+              CUBE_NODE_HELP_TEXT[UnknownNode.TYPE]
+            }
+            role="img"
+            aria-label="Help"
+          >
+            <QuestionCircleIcon />
+          </span>
+          <span className="flex-1" />
+          {isCapture ? (
+            <span
+              className="shrink-0 text-base text-[var(--color-text-secondary)]"
+              title={SELECT_NODE_TOOLTIP}
+            >
+              (Selected)
+            </span>
+          ) : (
+            <button
+              className="shrink-0 text-base text-[var(--color-accent)] underline"
+              title={SELECT_NODE_TOOLTIP}
+              onClick={() => editorState.select(node.id)}
+            >
+              Select
+            </button>
+          )}
+          <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={
+              nodeEditor.hasChanges && !readOnly
+                ? 'Close, applying the changes'
+                : 'Close'
+            }
+            aria-label="Close the editor"
+            onClick={() => nodeEditor.close()}
+          >
+            <TimesIcon />
+          </button>
+        </div>
+        <div className="min-h-0 flex-1 overflow-auto p-2">
+          {inputProblems.length ? (
+            <div
+              className="text-base text-[var(--color-status-warn)]"
+              role="alert"
+            >
+              {inputProblems.map((problem) => (
+                <div key={problem}>{problem}</div>
+              ))}
+            </div>
+          ) : Editor ? (
+            <Editor
+              editorState={editorState}
+              draft={draft}
+              inputSchemas={inputSchemas}
+              readOnly={readOnly}
+            />
+          ) : (
+            <div className="text-base text-[var(--color-text-secondary)]">
+              {`${node.describe()}: this node can't be edited.`}
+            </div>
+          )}
+          {problems.length > 0 && (
+            <div
+              className="mt-3 border-t border-[var(--color-border-subtle)] pt-2 text-base text-[var(--color-status-error)]"
+              role="alert"
+              aria-label="Problems"
+            >
+              {problems.map((problem) => (
+                <div key={problem}>{problem}</div>
+              ))}
+            </div>
+          )}
+        </div>
+        {isEditable && (
+          <div className="flex h-10 shrink-0 items-center justify-end gap-2 border-t border-[var(--color-border-default)] px-2">
+            <CubeButton
+              title="Drop the changes and close"
+              onClick={() => nodeEditor.cancel()}
+            >
+              Cancel
+            </CubeButton>
+            <CubeButton
+              primary={true}
+              title={
+                readOnly
+                  ? READ_ONLY_CUBE_TITLE
+                  : 'Store the changes, as one step to undo'
+              }
+              disabled={readOnly || !nodeEditor.hasChanges}
+              onClick={() => nodeEditor.apply()}
+            >
+              Apply
+            </CubeButton>
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/editors/CubeNodeEditorRegistry.ts

@@ -0,0 +1,61 @@
+/**
+ * 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 {
+  Filter,
+  Join,
+  RelationalTableSource,
+  type Schema,
+} from '@finos/legend-cube';
+import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import type { CubeNodeDraft } from '../../stores/editors/CubeNodeDraft.js';
+import { CubeFilterEditor } from './CubeFilterEditor.js';
+import { CubeJoinEditor } from './CubeJoinEditor.js';
+import { CubeSourceEditor } from './CubeSourceEditor.js';
+
+/**
+ * What the panel gives a node type's editor (PLAN §7.4). Edits go to the
+ * draft, which the panel's Apply stores; an action on the document goes
+ * through `editorState.nodeEditor` (e.g. `swapInputs`), which applies the
+ * draft first, so the panel never loses its edits under a replaced node.
+ */
+export interface CubeNodeEditorProps {
+  readonly editorState: CubeEditorState;
+  /** The node's draft, made by its type's factory in `CUBE_NODE_DRAFT_FACTORIES` */
+  readonly draft: CubeNodeDraft;
+  /**
+   * The schemas of the node's inputs, in port order, e.g. a Join's Left then
+   * Right. All are there: the panel shows the upstream error instead of the
+   * editor while an input is missing or invalid.
+   */
+  readonly inputSchemas: readonly Schema[];
+  /** The cube was saved by a newer version: show, don't edit */
+  readonly readOnly: boolean;
+}
+
+/**
+ * The editor of each node type, by type. A type without one shows its
+ * description; a type with one either has a draft factory in
+ * `CUBE_NODE_DRAFT_FACTORIES` or edits nothing (a source).
+ */
+export const CUBE_NODE_EDITORS: ReadonlyMap<
+  string,
+  React.FC<CubeNodeEditorProps>
+> = new Map<string, React.FC<CubeNodeEditorProps>>([
+  [RelationalTableSource.TYPE, CubeSourceEditor],
+  [Filter.TYPE, CubeFilterEditor],
+  [Join.TYPE, CubeJoinEditor],
+]);

package/src/components/editors/CubeSourceEditor.tsx

@@ -0,0 +1,116 @@
+/**
+ * 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;
+  const warnings = editorState.warnings.get(source.key) ?? [];
+  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} />
+      {warnings.map((warning) => (
+        <div
+          key={warning}
+          className="text-sm text-[var(--color-status-warn)]"
+          role="status"
+        >
+          {warning}
+        </div>
+      ))}
+      {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>
+  );
+});