@finos/legend-application-studio 28.19.105 → 28.19.106

package/src/components/editor/editor-group/dataProduct/DataProductEditor.tsx

@@ -86,6 +86,7 @@ import {
   type ChangeEventHandler,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useRef,
   useState,
 } from 'react';
@@ -1337,47 +1338,104 @@ export const CompatibleDiagramsEditor = observer(
       },
     );
 
+    const hasMappingSet = group.mapping.value.path !== '';
+    const noDiagramsInProject =
+      groupState.getCompatibleDiagramOptions().length === 0 &&
+      group.diagrams.length === 0;
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [isAddingDiagram, setIsAddingDiagram] = useState(false);
+
+    const handleGenerateFromMapping = (): void => {
+      setIsGenerating(true);
+      flowResult(groupState.generateDiagramFromMapping())
+        .catch(
+          groupState.state.editorStore.applicationStore.alertUnhandledError,
+        )
+        .finally(() => setIsGenerating(false));
+    };
+
     const NewDiagramComponent = observer(
       (newDiagramProps: {
         onFinishEditing: () => void;
       }): React.ReactElement => {
         const { onFinishEditing } = newDiagramProps;
 
+        useLayoutEffect(() => {
+          setIsAddingDiagram(true);
+          return () => setIsAddingDiagram(false);
+        }, []);
+
         return (
-          <div className="panel__content__form__section__list__new-item__input">
-            <CustomSelectorInput
-              options={groupState.getCompatibleDiagramOptions()}
-              onChange={(event: {
-                label: string;
-                value: PackageableElement;
-              }) => {
-                onFinishEditing();
-                handleAddDiagram(event);
-              }}
-              placeholder="Select a diagram to add..."
-              darkMode={
-                !groupState.state.editorStore.applicationStore.layoutService
-                  .TEMPORARY__isLightColorThemeEnabled
-              }
-            />
-          </div>
+          <>
+            <div className="panel__content__form__section__list__new-item__input">
+              <CustomSelectorInput
+                options={groupState.getCompatibleDiagramOptions()}
+                onChange={(event: {
+                  label: string;
+                  value: PackageableElement;
+                }) => {
+                  onFinishEditing();
+                  handleAddDiagram(event);
+                }}
+                placeholder="Select a diagram to add..."
+                darkMode={
+                  !groupState.state.editorStore.applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
+              />
+            </div>
+            {noDiagramsInProject &&
+              hasMappingSet &&
+              !groupState.state.isReadOnly && (
+                <button
+                  className="panel__content__form__section__list__new-item__cancel-btn btn btn--dark"
+                  disabled={isGenerating}
+                  onClick={() => {
+                    onFinishEditing();
+                    handleGenerateFromMapping();
+                  }}
+                  title="Auto-generate a diagram from the mapping"
+                  tabIndex={-1}
+                >
+                  {isGenerating ? 'Generating...' : 'Generate from Mapping'}
+                </button>
+              )}
+          </>
         );
       },
     );
 
     return (
-      <ListEditor
-        title="Diagrams"
-        prompt="Add diagrams to include in this Data Product. Diagrams are required to showcase and explain your curated data models"
-        items={group.diagrams}
-        keySelector={(element: DataProductDiagram) => element.diagram.name}
-        ItemComponent={DiagramComponent}
-        NewItemComponent={NewDiagramComponent}
-        handleRemoveItem={handleRemoveDiagram}
-        isReadOnly={groupState.state.isReadOnly}
-        emptyMessage="⚠ No Diagrams specified. Add at least one diagram to this Data Product."
-        emptyClassName="data-product-editor__empty-diagram"
-      />
+      <div className="data-product-editor__diagrams-section">
+        <ListEditor
+          title="Diagrams"
+          prompt="Add diagrams to include in this Data Product. Diagrams are required to showcase and explain your curated data models"
+          items={group.diagrams}
+          keySelector={(element: DataProductDiagram) => element.diagram.name}
+          ItemComponent={DiagramComponent}
+          NewItemComponent={NewDiagramComponent}
+          handleRemoveItem={handleRemoveDiagram}
+          isReadOnly={groupState.state.isReadOnly}
+          emptyMessage="⚠ No Diagrams specified. Add at least one diagram to this Data Product."
+          emptyClassName="data-product-editor__empty-diagram"
+        />
+        {noDiagramsInProject &&
+          !isAddingDiagram &&
+          hasMappingSet &&
+          !groupState.state.isReadOnly && (
+            <div className="data-product-editor__generate-diagram-btn">
+              <button
+                className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
+                disabled={isGenerating}
+                onClick={handleGenerateFromMapping}
+                title="Generate a Diagram from the Mapping"
+                tabIndex={-1}
+              >
+                {isGenerating ? 'Generating...' : 'Generate from Mapping'}
+              </button>
+            </div>
+          )}
+      </div>
     );
   },
 );

package/src/components/editor/editor-group/mapping-editor/MappingEditor.tsx

@@ -37,6 +37,8 @@ import {
   MenuContentItem,
   MenuContent,
   LockIcon,
+  PanelHeader,
+  ShapesIcon,
 } from '@finos/legend-art';
 import { ClassMappingEditor } from './ClassMappingEditor.js';
 import { EnumerationMappingEditor } from './EnumerationMappingEditor.js';
@@ -48,6 +50,7 @@ import {
   MAPPING_ELEMENT_TYPE,
   getMappingElementLabel,
   MAPPING_EDITOR_TAB,
+  onGeneratingDiagramFromMapping,
 } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.js';
 import { MappingElementState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingElementState.js';
 import { MappingExplorer } from './MappingExplorer.js';
@@ -353,6 +356,11 @@ export const MappingEditor = observer(() => {
     (tab: MAPPING_EDITOR_TAB): (() => void) =>
     (): void =>
       mappingEditorState.setSelectedTab(tab);
+  const generateDiagram = (): void => {
+    flowResult(onGeneratingDiagramFromMapping(mapping, editorStore)).catch(
+      editorStore.applicationStore.alertUnhandledError,
+    );
+  };
   return (
     <div
       data-testid={LEGEND_STUDIO_TEST_ID.MAPPING_EDITOR}
@@ -370,6 +378,24 @@ export const MappingEditor = observer(() => {
             <div className="panel__header__title__content">{mapping.name}</div>
           </div>
         </div>
+        <PanelHeader title="General" darkMode={true}>
+          <div className="panel__header__actions">
+            <div className="btn__dropdown-combo btn__dropdown-combo--primary">
+              <button
+                className="btn__dropdown-combo__label"
+                onClick={generateDiagram}
+                title="Generate Diagram"
+                tabIndex={-1}
+                style={{ width: 'auto', whiteSpace: 'nowrap' }}
+              >
+                <ShapesIcon className="btn__dropdown-combo__label__icon" />
+                <div className="btn__dropdown-combo__label__title">
+                  Generate Diagram
+                </div>
+              </button>
+            </div>
+          </div>
+        </PanelHeader>
         <div className="panel__header service-editor__header--with-tabs">
           <div className="uml-element-editor__tabs">
             {Object.values(MAPPING_EDITOR_TAB).map((tab) => (

package/src/stores/LegendStudioBaseStore.ts

@@ -215,7 +215,6 @@ export class LegendStudioBaseStore {
           SDLCServerClient.authorizeCallbackUrl(
             this.applicationStore.config.sdlcServerUrl,
             this.applicationStore.navigationService.navigator.getCurrentAddress(),
-            this.applicationStore.config.sdlcServerClient,
           ),
         );
       } else {

package/src/stores/editor/editor-state/element-editor-state/dataProduct/DataProductEditorState.ts

@@ -120,6 +120,7 @@ import type {
 import { deserialize } from 'serializr';
 import { Diagram } from '@finos/legend-extension-dsl-diagram';
 import { LegendStudioTelemetryHelper } from '../../../../../__lib__/LegendStudioTelemetryHelper.js';
+import { onGeneratingDiagramFromMapping } from '../mapping/MappingEditorState.js';
 
 export enum DATA_PRODUCT_TAB {
   HOME = 'Home',
@@ -769,6 +770,10 @@ export class ModelAccessPointGroupState extends AccessPointGroupState {
     super(val, editorState);
     this.value = val;
     this.editorState = editorState;
+
+    makeObservable(this, {
+      generateDiagramFromMapping: flow,
+    });
   }
 
   override hasErrors(): boolean {
@@ -817,6 +822,22 @@ export class ModelAccessPointGroupState extends AccessPointGroupState {
     modelAccessPointGroup_removeDiagram(this.value, diagram);
   };
 
+  *generateDiagramFromMapping(): GeneratorFn<void> {
+    const mapping = this.value.mapping.value;
+    if (mapping.path === '') {
+      return;
+    }
+    const diagram = (yield flowResult(
+      onGeneratingDiagramFromMapping(mapping, this.state.editorStore),
+    )) as Diagram | undefined;
+    if (diagram) {
+      const newDiagram = observe_DataProductDiagram(new DataProductDiagram());
+      newDiagram.title = diagram.name;
+      newDiagram.diagram = diagram;
+      modelAccessPointGroup_addDiagram(this.value, newDiagram);
+    }
+  }
+
   addFeaturedElement(element: DataProductElement): void {
     const elementPointer = observe_DataProductElementScope(
       new DataProductElementScope(),

package/src/stores/editor/editor-state/element-editor-state/mapping/MappingDiagramGenerator.ts

@@ -0,0 +1,90 @@
+/**
+ * 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 {
+  ClassView,
+  Diagram,
+  GeneralizationView,
+  PropertyView,
+} from '@finos/legend-extension-dsl-diagram';
+import {
+  Class,
+  getAllOwnClassProperties,
+  getMappingCompatibleClasses,
+  PackageableElementExplicitReference,
+  PropertyExplicitReference,
+  type Mapping,
+} from '@finos/legend-graph';
+import { uuid } from '@finos/legend-shared';
+
+export const generateMappingDiagram = (
+  mapping: Mapping,
+  allClasses: Class[],
+): Diagram => {
+  let diagramName = mapping.name.replace(/mapping/i, 'Diagram');
+  if (diagramName === mapping.name) {
+    diagramName = `${mapping.name}GeneratedDiagram`;
+  }
+  const diagram = new Diagram(diagramName);
+  const classesInMapping = getMappingCompatibleClasses(mapping, allClasses);
+  diagram.classViews = classesInMapping.map(
+    (clazz) =>
+      new ClassView(
+        diagram,
+        uuid(),
+        PackageableElementExplicitReference.create(clazz),
+      ),
+  );
+  diagram.propertyViews = diagram.classViews.flatMap((classView) => {
+    return getAllOwnClassProperties(classView.class.value)
+      .filter(
+        (property) =>
+          property.genericType.value.rawType instanceof Class &&
+          classesInMapping.includes(property.genericType.value.rawType),
+      )
+      .map((property) => {
+        const targetClass = property.genericType.value.rawType as Class;
+        const targetView = diagram.classViews.find(
+          (view) => view.class.value === targetClass,
+        );
+        if (!targetView) {
+          throw new Error(
+            `Target class ${targetClass.name} for property ${property.name} not found in diagram`,
+          );
+        }
+        return new PropertyView(
+          diagram,
+          PropertyExplicitReference.create(property),
+          classView,
+          targetView,
+        );
+      });
+  });
+  diagram.classViews.forEach((classView) => {
+    diagram.classViews
+      .filter((view) =>
+        view.class.value.generalizations
+          .map((g) => g.value.rawType)
+          .includes(classView.class.value),
+      )
+      .forEach((childView) => {
+        diagram.generalizationViews.push(
+          new GeneralizationView(diagram, childView, classView),
+        );
+      });
+  });
+  return diagram;
+};

package/src/stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.ts

@@ -130,6 +130,11 @@ import { MappingTestableState } from './testable/MappingTestableState.js';
 import { MappingTestMigrationState } from './legacy/MappingTestMigrationState.js';
 import { relationFunction_setRelationFunction } from '../../../../graph-modifier/STO_RelationFunction_GraphModifierHelper.js';
 import { RelationFunctionInstanceSetImplementationState } from './RelationFunctionInstanceSetImplementationState.js';
+import { generateMappingDiagram } from './MappingDiagramGenerator.js';
+import {
+  observe_Diagram,
+  type Diagram,
+} from '@finos/legend-extension-dsl-diagram';
 
 export interface MappingExplorerTreeNodeData extends TreeNodeData {
   mappingElement: MappingElement;
@@ -615,6 +620,35 @@ const reprocessMappingElementNodes = (
   return { rootIds, nodes };
 };
 
+export const onGeneratingDiagramFromMapping = flow(function* (
+  mapping: Mapping,
+  editorStore: EditorStore,
+): GeneratorFn<Diagram | undefined> {
+  try {
+    const diagram = generateMappingDiagram(
+      mapping,
+      editorStore.graphManagerState.usableClasses,
+    );
+    observe_Diagram(diagram);
+    editorStore.graphManagerState.graph.addElement(
+      diagram,
+      mapping.package?.path.replace(/mapping/, 'diagram'),
+    );
+    editorStore.graphEditorMode.openElement(diagram);
+    yield flowResult(editorStore.explorerTreeState.build());
+    editorStore.applicationStore.notificationService.notifySuccess(
+      `Successfully generated diagram ${diagram.path} from mapping ${mapping.name}`,
+    );
+    return diagram;
+  } catch (error) {
+    assertErrorThrown(error);
+    editorStore.applicationStore.notificationService.notifyError(
+      `Failed to generate diagram from mapping ${mapping.name}: ${error.message}`,
+    );
+    return undefined;
+  }
+});
+
 export interface MappingElementSpec {
   showTarget: boolean;
   // whether or not to open the new mapping element tab as an adjacent tab, this behavior is similar to Chrome

package/tsconfig.json

@@ -143,6 +143,7 @@
     "./src/stores/editor/editor-state/element-editor-state/function-activator/testable/FunctionTestableState.ts",
     "./src/stores/editor/editor-state/element-editor-state/ingest/IngestDefinitionEditorState.ts",
     "./src/stores/editor/editor-state/element-editor-state/mapping/FlatDataInstanceSetImplementationState.ts",
+    "./src/stores/editor/editor-state/element-editor-state/mapping/MappingDiagramGenerator.ts",
     "./src/stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.ts",
     "./src/stores/editor/editor-state/element-editor-state/mapping/MappingElementDecorator.ts",
     "./src/stores/editor/editor-state/element-editor-state/mapping/MappingElementState.ts",