@finos/legend-application-studio 28.21.51 → 28.21.53

package/src/components/editor/embedded-cube/EmbeddedCubeEditor.tsx

@@ -0,0 +1,452 @@
+/**
+ * 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,
+  TimesIcon,
+} from '@finos/legend-art';
+import {
+  buildCubeRunningStepLambda,
+  CubeButton,
+  CubeEditor,
+  formatDisabledReasons,
+  type CubeEditorState,
+} from '@finos/legend-cube-builder';
+import type { IngestDefinition } from '@finos/legend-graph';
+import { noop, type PlainObject } from '@finos/legend-shared';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import type { EmbeddedCubeState } from '../../../stores/editor/embedded-cube/EmbeddedCubeState.js';
+import { LegendStudioCubeHost } from '../../../stores/editor/embedded-cube/LegendStudioCubeHost.js';
+
+export const EMBEDDED_CUBE_TEST_ID = {
+  DIALOG: 'embedded-cube__dialog',
+  ADD_MATERIALIZED_VIEW: 'embedded-cube__add-materialized-view',
+  SAVE_MATERIALIZED_VIEW: 'embedded-cube__save-materialized-view',
+};
+
+/**
+ * The classification of the view's data: one of the classifications a data
+ * product's access points offer, or typed when Studio's config gives none
+ */
+const MaterializedViewClassification = observer(
+  (props: {
+    embeddedCubeState: EmbeddedCubeState;
+    sensitivity: string;
+    setSensitivity: (sensitivity: string) => void;
+  }) => {
+    const { embeddedCubeState, sensitivity, setSensitivity } = props;
+    const { classifications } = embeddedCubeState;
+    return (
+      <label className="flex flex-col gap-1 text-base">
+        Data classification
+        {classifications.length ? (
+          <select
+            className="input--dark h-8 rounded-sm px-2"
+            aria-label="Data classification"
+            value={sensitivity}
+            onChange={(event) => setSensitivity(event.target.value)}
+          >
+            <option value="" disabled={true}>
+              Pick a classification
+            </option>
+            {classifications.map((classification) => (
+              <option key={classification} value={classification}>
+                {classification}
+              </option>
+            ))}
+          </select>
+        ) : (
+          <input
+            className="input--dark h-8 rounded-sm px-2"
+            aria-label="Data classification"
+            placeholder="Classification"
+            spellCheck={false}
+            value={sensitivity}
+            onChange={(event) => setSensitivity(event.target.value)}
+          />
+        )}
+      </label>
+    );
+  },
+);
+
+/**
+ * The view's primary key: none or some of the columns it can take, those of
+ * the step that runs but the milestoning ones, kept in the order of the
+ * columns
+ */
+const MaterializedViewPrimaryKey: React.FC<{
+  columns: readonly string[];
+  primaryKey: readonly string[];
+  setPrimaryKey: (primaryKey: string[]) => void;
+}> = ({ columns, primaryKey, setPrimaryKey }) => (
+  <fieldset className="flex min-w-0 flex-col gap-1 text-base">
+    <legend>Primary key</legend>
+    <span className="text-sm text-[var(--color-text-muted)]">
+      The columns that identify a row, if any
+    </span>
+    <ul className="max-h-40 overflow-auto" aria-label="Primary key columns">
+      {columns.map((column) => (
+        <li key={column}>
+          <label className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              checked={primaryKey.includes(column)}
+              onChange={() =>
+                setPrimaryKey(
+                  primaryKey.includes(column)
+                    ? primaryKey.filter((each) => each !== column)
+                    : columns.filter(
+                        (each) => each === column || primaryKey.includes(each),
+                      ),
+                )
+              }
+            />
+            <span className="min-w-0 truncate">{column}</span>
+          </label>
+        </li>
+      ))}
+    </ul>
+  </fieldset>
+);
+
+/** What a header button gives its dialog */
+interface MaterializedViewDialogInput {
+  /** The step that runs, as a lambda with no runtime and no row limit */
+  readonly lambda: PlainObject;
+  /** The columns of the step that runs, the view's; none when Cube doesn't know them */
+  readonly columns: readonly string[] | undefined;
+  /** Why Save MatView asks again; none to add a new view */
+  readonly saveProblems?: readonly string[] | undefined;
+}
+
+/**
+ * Names the materialized view, classifies its data and picks its primary
+ * key, then adds it to the ingest definition (Add MatView). For the view
+ * opened to edit, asks again for what it can't be saved with as it was, the
+ * classification of its data or a primary key whose column is gone, then
+ * saves it in place (Save MatView)
+ */
+const MaterializedViewDialog = observer(
+  (props: {
+    embeddedCubeState: EmbeddedCubeState;
+    input: MaterializedViewDialogInput;
+    close: () => void;
+  }) => {
+    const { embeddedCubeState, input, close } = props;
+    const { lambda, saveProblems } = input;
+    const saved = saveProblems ? embeddedCubeState.matViewDataSet : undefined;
+    // the columns the key can take; a view saved when Cube doesn't know the
+    // step's columns keeps its key
+    const columns = embeddedCubeState.getMaterializedViewKeyColumns(
+      input.columns ?? saved?.primaryKey ?? [],
+    );
+    // as Cube's dialogs: the dialog follows the theme, and its primary button
+    // is an accent button in every theme (legend-art's light one is grey)
+    const darkMode =
+      !embeddedCubeState.editorStore.applicationStore.layoutService
+        .TEMPORARY__isLightColorThemeEnabled;
+    const [name, setName] = useState('');
+    // a view saved again starts on its own classification, if it can keep it,
+    // and on the columns of its key the step still has
+    const [sensitivity, setSensitivity] = useState(() =>
+      saved?.sensitivity !== undefined &&
+      embeddedCubeState.getMaterializedViewClassificationProblem(
+        saved.sensitivity,
+      ) === undefined
+        ? saved.sensitivity
+        : '',
+    );
+    const [primaryKey, setPrimaryKey] = useState(() =>
+      columns.filter((column) => saved?.primaryKey.includes(column)),
+    );
+    const nameProblem = saveProblems
+      ? undefined
+      : embeddedCubeState.getMaterializedViewNameProblem(name);
+    const problem =
+      nameProblem ??
+      embeddedCubeState.getMaterializedViewClassificationProblem(sensitivity);
+    const verb = saveProblems ? 'Save' : 'Add';
+    const confirm = (): void => {
+      if (problem !== undefined) {
+        return;
+      }
+      if (saveProblems) {
+        embeddedCubeState.saveMaterializedView(lambda, {
+          primaryKey,
+          sensitivity,
+        });
+      } else {
+        embeddedCubeState.addMaterializedView(name, lambda, {
+          primaryKey,
+          sensitivity,
+        });
+      }
+    };
+    return (
+      <Dialog open={true} onClose={close}>
+        <Modal darkMode={darkMode} className="w-[440px] max-w-full">
+          <ModalHeader>
+            <div className="modal__title">{`${verb} MatView`}</div>
+          </ModalHeader>
+          <ModalBody>
+            <form
+              className="flex flex-col gap-2"
+              data-testid={
+                saveProblems
+                  ? EMBEDDED_CUBE_TEST_ID.SAVE_MATERIALIZED_VIEW
+                  : EMBEDDED_CUBE_TEST_ID.ADD_MATERIALIZED_VIEW
+              }
+              onSubmit={(event) => {
+                event.preventDefault();
+                confirm();
+              }}
+            >
+              {saveProblems ? (
+                <>
+                  <div className="text-base">
+                    {`${embeddedCubeState.matView} of ${embeddedCubeState.ingest?.name ?? 'the ingest definition'} can't be saved as it was:`}
+                  </div>
+                  <ul
+                    aria-label="Why Save MatView asks"
+                    className="list-disc pl-5 text-sm text-[var(--color-status-warn)]"
+                  >
+                    {saveProblems.map((each) => (
+                      <li key={each}>{each}</li>
+                    ))}
+                  </ul>
+                </>
+              ) : (
+                <>
+                  <label className="flex flex-col gap-1 text-base">
+                    {`A data set of ${embeddedCubeState.ingest?.name ?? 'the ingest definition'}, whose rows are the cube's`}
+                    <input
+                      className="input--dark h-8 rounded-sm px-2"
+                      aria-label="Materialized view name"
+                      placeholder="Name"
+                      spellCheck={false}
+                      autoFocus={true}
+                      value={name}
+                      onChange={(event) => setName(event.target.value)}
+                    />
+                  </label>
+                  {name.trim() && nameProblem && (
+                    <div className="text-sm text-[var(--color-status-error)]">
+                      {nameProblem}
+                    </div>
+                  )}
+                </>
+              )}
+              <MaterializedViewClassification
+                embeddedCubeState={embeddedCubeState}
+                sensitivity={sensitivity}
+                setSensitivity={setSensitivity}
+              />
+              <MaterializedViewPrimaryKey
+                columns={columns}
+                primaryKey={primaryKey}
+                setPrimaryKey={setPrimaryKey}
+              />
+            </form>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              darkMode={true}
+              formatText={false}
+              text={verb}
+              title={problem ?? `${verb} the materialized view`}
+              disabled={problem !== undefined}
+              onClick={confirm}
+            />
+            <ModalFooterButton
+              darkMode={darkMode}
+              formatText={false}
+              type="secondary"
+              text="Cancel"
+              onClick={close}
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);
+
+/**
+ * Cube's header button: the step that runs, as a lambda with no runtime and
+ * no row limit, becomes a materialized view of the ingest definition (Add
+ * MatView, named, classified and keyed in a dialog), or replaces the one
+ * opened to edit (Save MatView), at once unless its classification or its
+ * key must be asked again
+ */
+const MaterializedViewButton = observer(
+  (props: {
+    embeddedCubeState: EmbeddedCubeState;
+    editorState: CubeEditorState;
+  }) => {
+    const { embeddedCubeState, editorState } = props;
+    const { execution } = editorState;
+    const { matView } = embeddedCubeState;
+    const [dialogInput, setDialogInput] = useState<
+      MaterializedViewDialogInput | undefined
+    >();
+    const [isBuilding, setIsBuilding] = useState(false);
+    const start = (): void => {
+      // the open step editor's edits go in first, as for Execute
+      if (!editorState.nodeEditor.finishApplied()) {
+        return;
+      }
+      // the columns of the step that runs, read with its lambda
+      const selected = editorState.document.query.selected;
+      const columns = (
+        selected === undefined
+          ? undefined
+          : editorState.analysis.schemas.get(selected)
+      )?.columns.map((column) => column.name);
+      setIsBuilding(true);
+      buildCubeRunningStepLambda(editorState)
+        .then((lambda) => {
+          if (matView === undefined) {
+            setDialogInput({ lambda, columns });
+            return;
+          }
+          const saveProblems =
+            embeddedCubeState.getMaterializedViewSaveProblems(columns);
+          if (saveProblems.length) {
+            setDialogInput({ lambda, columns, saveProblems });
+          } else {
+            embeddedCubeState.saveMaterializedView(lambda);
+          }
+        })
+        .catch(editorState.host.applicationStore.alertUnhandledError)
+        .finally(() => setIsBuilding(false));
+    };
+    return (
+      <>
+        <CubeButton
+          primary={true}
+          title={
+            !execution.canExecute
+              ? formatDisabledReasons(execution.disabledReasons)
+              : matView === undefined
+                ? 'Add the step that runs to the ingest definition, as a materialized view'
+                : `Replace materialized view ${matView} with the step that runs`
+          }
+          disabled={!execution.canExecute || isBuilding}
+          onClick={start}
+        >
+          {matView === undefined ? 'Add MatView' : 'Save MatView'}
+        </CubeButton>
+        {dialogInput && (
+          <MaterializedViewDialog
+            embeddedCubeState={embeddedCubeState}
+            input={dialogInput}
+            close={() => setDialogInput(undefined)}
+          />
+        )}
+      </>
+    );
+  },
+);
+
+/**
+ * Legend Cube, full screen over the editor, building a materialized view of
+ * the ingest definition it was opened from (Create MatView), or
+ * editing one of its views, read back into the cube (Edit MatView). Loaded
+ * on the first opening, with Cube (`EmbeddedCube`)
+ */
+export const EmbeddedCubeEditor = observer(
+  (props: {
+    embeddedCubeState: EmbeddedCubeState;
+    ingest: IngestDefinition;
+  }) => {
+    const { embeddedCubeState, ingest } = props;
+    const { editorStore } = embeddedCubeState;
+    // a new host for each opening, so each starts on an empty cube
+    const [host] = useState(() => new LegendStudioCubeHost(editorStore));
+    const { matView } = embeddedCubeState;
+    // the view as it was when opened: the cube is read from it once
+    const [initialLambda] = useState(() => {
+      const lambda = embeddedCubeState.matViewLambda;
+      return lambda && matView !== undefined
+        ? { lambda, label: `materialized view ${matView}` }
+        : undefined;
+    });
+    const darkMode =
+      !editorStore.applicationStore.layoutService
+        .TEMPORARY__isLightColorThemeEnabled;
+    return (
+      <Dialog
+        open={true}
+        onClose={noop} // closed by its own button only, so a cube isn't lost by Escape
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper:
+            'editor-modal__content query-builder__dialog__container__content',
+        }}
+      >
+        <Modal
+          darkMode={darkMode}
+          className="editor-modal query-builder__dialog query-builder__dialog--expanded"
+        >
+          <div
+            className="query-builder__dialog__header"
+            data-testid={EMBEDDED_CUBE_TEST_ID.DIALOG}
+          >
+            <div className="min-w-0 flex-1 truncate px-4 text-lg font-medium text-[var(--color-state-disabled-on-accent)]">
+              {matView === undefined
+                ? `Create MatView for ${ingest.path} with Cube`
+                : `Edit MatView ${matView} of ${ingest.path} with Cube`}
+            </div>
+            <div className="query-builder__dialog__header__actions">
+              <button
+                className="query-builder__dialog__header__action"
+                tabIndex={-1}
+                onClick={() => embeddedCubeState.close()}
+                title={
+                  matView === undefined
+                    ? 'Close Cube, adding nothing'
+                    : 'Close Cube, saving nothing'
+                }
+              >
+                <TimesIcon />
+              </button>
+            </div>
+          </div>
+          <div className="query-builder__dialog__content">
+            <CubeEditor
+              host={host}
+              initialLambda={initialLambda}
+              headerActions={(editorState) => (
+                <MaterializedViewButton
+                  embeddedCubeState={embeddedCubeState}
+                  editorState={editorState}
+                />
+              )}
+            />
+          </div>
+        </Modal>
+      </Dialog>
+    );
+  },
+);

package/src/components/extensions/Core_LegendStudioApplicationPlugin.tsx

@@ -40,6 +40,7 @@ import { LEGEND_STUDIO_SETTING_CONFIG } from '../../__lib__/LegendStudioSetting.
 import { setupPureLanguageService } from '@finos/legend-code-editor';
 import { configureCodeEditorComponent } from '@finos/legend-lego/code-editor';
 import { STO_RELATIONAL_LEGEND_STUDIO_COMMAND_CONFIG } from '../../__lib__/STO_Relational_LegendStudioCommand.js';
+import { LEGEND_CUBE_COMMAND_CONFIG } from '@finos/legend-cube-builder';
 import { ShowcaseManager } from '../ShowcaseManager.js';
 import { CabinetIcon } from '@finos/legend-art';
 import { ShowcaseManagerState } from '../../stores/ShowcaseManagerState.js';
@@ -120,6 +121,9 @@ export class Core_LegendStudioApplicationPlugin extends LegendStudioApplicationP
       ...collectKeyedCommandConfigEntriesFromConfig(
         STO_RELATIONAL_LEGEND_STUDIO_COMMAND_CONFIG,
       ),
+      // Legend Cube's shortcuts (F9, Ctrl/Cmd+Z), for Create MatView with
+      // Cube: Studio's own are off while the cube is open
+      ...collectKeyedCommandConfigEntriesFromConfig(LEGEND_CUBE_COMMAND_CONFIG),
     ];
   }
 

package/src/stores/editor/EditorStore.ts

@@ -111,6 +111,7 @@ import {
 import { GlobalTestRunnerState } from './sidebar-state/testable/GlobalTestRunnerState.js';
 import type { LegendStudioApplicationStore } from '../LegendStudioBaseStore.js';
 import { EmbeddedQueryBuilderState } from './EmbeddedQueryBuilderState.js';
+import { EmbeddedCubeState } from './embedded-cube/EmbeddedCubeState.js';
 import { LEGEND_STUDIO_COMMAND_KEY } from '../../__lib__/LegendStudioCommand.js';
 import { EditorTabManagerState } from './EditorTabManagerState.js';
 import { GraphEditFormModeState } from './GraphEditFormModeState.js';
@@ -198,6 +199,7 @@ export class EditorStore implements CommandRegistrar {
   modelImporterState: ModelImporterState;
   projectConfigurationEditorState: ProjectConfigurationEditorState;
   embeddedQueryBuilderState: EmbeddedQueryBuilderState;
+  embeddedCubeState: EmbeddedCubeState;
   embeddedDataCubeViewerState: QueryBuilderDataCubeViewerState | undefined;
   newElementState: NewElementState;
   /**
@@ -297,6 +299,7 @@ export class EditorStore implements CommandRegistrar {
       this,
     );
     this.embeddedQueryBuilderState = new EmbeddedQueryBuilderState(this);
+    this.embeddedCubeState = new EmbeddedCubeState(this);
     // side bar panels
     this.explorerTreeState = new ExplorerTreeState(this);
     this.projectOverviewState = new ProjectOverviewState(this, this.sdlcState);
@@ -445,9 +448,11 @@ export class EditorStore implements CommandRegistrar {
    */
   createEditorCommandTrigger(additionalChecker?: () => boolean): () => boolean {
     return (): boolean =>
-      // we don't want to leak any hotkeys when we have embedded query builder open
+      // we don't want to leak any hotkeys when we have embedded query builder
+      // or Legend Cube open, e.g. Studio's F9 compiles where Cube's executes
       // TODO?: we probably should come up with a more generic mechanism for this
       !this.embeddedQueryBuilderState.queryBuilderState &&
+      !this.embeddedCubeState.isOpen &&
       (!additionalChecker || additionalChecker());
   }