@finos/legend-extension-dsl-diagram 2.0.2 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-extension-dsl-diagram",
-  "version": "2.0.2",
+  "version": "4.0.0",
   "description": "Legend extension for Diagram DSL",
   "keywords": [
     "legend",
@@ -43,35 +43,36 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "3.0.2",
-    "@finos/legend-art": "1.0.0",
-    "@finos/legend-graph": "6.0.1",
-    "@finos/legend-model-storage": "1.0.0",
-    "@finos/legend-shared": "2.0.0",
-    "@finos/legend-studio": "9.0.2",
-    "@types/react": "17.0.44",
-    "mobx": "6.5.0",
-    "mobx-react-lite": "3.3.0",
-    "react": "17.0.2",
-    "react-dnd": "15.1.2",
-    "react-dom": "17.0.2",
-    "react-resize-detector": "7.0.0",
+    "@finos/legend-application": "4.0.1",
+    "@finos/legend-art": "2.0.1",
+    "@finos/legend-graph": "8.0.1",
+    "@finos/legend-model-storage": "2.0.1",
+    "@finos/legend-shared": "3.0.1",
+    "@finos/legend-studio": "10.1.0",
+    "@types/react": "18.0.14",
+    "mobx": "6.6.0",
+    "mobx-react-lite": "3.4.0",
+    "react": "18.2.0",
+    "react-dnd": "16.0.1",
+    "react-dom": "18.2.0",
+    "react-resize-detector": "7.1.2",
     "serializr": "2.0.5"
   },
   "devDependencies": {
-    "@finos/legend-dev-utils": "1.0.0",
-    "@testing-library/react": "12.1.5",
+    "@finos/legend-dev-utils": "2.0.1",
+    "@jest/globals": "28.1.1",
+    "@testing-library/react": "13.3.0",
     "cross-env": "7.0.3",
-    "eslint": "8.14.0",
-    "jest": "28.0.3",
+    "eslint": "8.18.0",
+    "jest": "28.1.1",
     "jest-canvas-mock": "2.4.0",
     "npm-run-all": "4.1.5",
     "rimraf": "3.0.2",
-    "sass": "1.51.0",
-    "typescript": "4.6.4"
+    "sass": "1.52.3",
+    "typescript": "4.7.4"
   },
   "peerDependencies": {
-    "react": "^17.0.0"
+    "react": "^18.0.0"
   },
   "publishConfig": {
     "directory": "build/publishContent"

package/src/DSLDiagram_Extension.ts

@@ -16,19 +16,16 @@
 
 import packageJson from '../package.json';
 import { AbstractPreset } from '@finos/legend-shared';
-import { DSLDiagram_PureGraphManagerPlugin } from './graphManager/DSLDiagram_PureGraphManagerPlugin';
-import { DSLDiagram_PureProtocolProcessorPlugin } from './models/protocols/pure/DSLDiagram_PureProtocolProcessorPlugin';
-import type { GraphPluginManager } from '@finos/legend-graph';
-import { DSLDiagram_PureGraphPlugin } from './graph/DSLDiagram_PureGraphPlugin';
+import { DSLDiagram_PureGraphManagerPlugin } from './graphManager/DSLDiagram_PureGraphManagerPlugin.js';
+import { DSLDiagram_PureProtocolProcessorPlugin } from './models/protocols/pure/DSLDiagram_PureProtocolProcessorPlugin.js';
+import { DSLDiagram_PureGraphPlugin } from './graph/DSLDiagram_PureGraphPlugin.js';
 
 export class DSLDiagram_GraphPreset extends AbstractPreset {
   constructor() {
-    super(packageJson.extensions.graphPreset, packageJson.version);
-  }
-
-  install(pluginManager: GraphPluginManager): void {
-    new DSLDiagram_PureGraphPlugin().install(pluginManager);
-    new DSLDiagram_PureGraphManagerPlugin().install(pluginManager);
-    new DSLDiagram_PureProtocolProcessorPlugin().install(pluginManager);
+    super(packageJson.extensions.graphPreset, packageJson.version, [
+      new DSLDiagram_PureGraphPlugin(),
+      new DSLDiagram_PureGraphManagerPlugin(),
+      new DSLDiagram_PureProtocolProcessorPlugin(),
+    ]);
   }
 }

package/src/DiagramRenderer.ts

@@ -36,19 +36,30 @@ import {
   GenericType,
   Property,
   Multiplicity,
+  getAllSuperclasses,
+  getAllOwnClassProperties,
+  generateMultiplicityString,
+  getRawGenericType,
 } from '@finos/legend-graph';
 import { action, makeObservable, observable } from 'mobx';
-import type { Diagram } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram';
-import { Rectangle } from './models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Rectangle';
-import { Point } from './models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Point';
-import { PositionedRectangle } from './models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_PositionedRectangle';
-import { ClassView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassView';
-import type { PropertyHolderView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_PropertyHolderView';
-import { GeneralizationView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_GeneralizationView';
-import { RelationshipView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_RelationshipView';
-import { PropertyView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_PropertyView';
-import { getElementPosition } from './helpers/DiagramHelper';
-import { AssociationView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_AssociationView';
+import type { Diagram } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram.js';
+import { Rectangle } from './models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Rectangle.js';
+import { Point } from './models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Point.js';
+import { PositionedRectangle } from './models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_PositionedRectangle.js';
+import { ClassView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassView.js';
+import type { PropertyHolderView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_PropertyHolderView.js';
+import { GeneralizationView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_GeneralizationView.js';
+import { RelationshipView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_RelationshipView.js';
+import { PropertyView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_PropertyView.js';
+import {
+  boxContains,
+  buildBottomRightCornerBox,
+  getBottomRightCornerPoint,
+  getElementPosition,
+  rotatePointX,
+  rotatePointY,
+} from './helpers/DSLDiagram_Helper.js';
+import { AssociationView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_AssociationView.js';
 import { class_addProperty, class_addSuperType } from '@finos/legend-studio';
 import {
   classView_setHideProperties,
@@ -74,7 +85,7 @@ import {
   relationshipView_changePoint,
   relationshipView_simplifyPath,
   relationshipView_setPath,
-} from './stores/studio/DSLDiagram_GraphModifierHelper';
+} from './stores/studio/DSLDiagram_GraphModifierHelper.js';
 
 export enum DIAGRAM_INTERACTION_MODE {
   LAYOUT,
@@ -595,11 +606,11 @@ export class DiagramRenderer {
               // Do not allow creating self-inheritance
               startClassView.class.value !== targetClassView.class.value &&
               // Avoid creating inhertance that already existed
-              !startClassView.class.value.allSuperclasses.includes(
+              !getAllSuperclasses(startClassView.class.value).includes(
                 targetClassView.class.value,
               ) &&
               // Avoid loop (might be expensive)
-              !targetClassView.class.value.allSuperclasses.includes(
+              !getAllSuperclasses(targetClassView.class.value).includes(
                 startClassView.class.value,
               )
             ) {
@@ -762,8 +773,8 @@ export class DiagramRenderer {
           );
           minX = Math.min(minX, box.position.x);
           minY = Math.min(minY, box.position.y);
-          maxX = Math.max(maxX, box.edgePoint().x);
-          maxY = Math.max(maxY, box.edgePoint().y);
+          maxX = Math.max(maxX, getBottomRightCornerPoint(box).x);
+          maxY = Math.max(maxY, getBottomRightCornerPoint(box).y);
         }
         // if (relationshipView.from.name) {
         //   var box = this.displayText(fullPath[1], fullPath[0], relationshipView.from.classView, relationshipView.property, this.ctx);
@@ -924,7 +935,7 @@ export class DiagramRenderer {
             );
           }
           // Add property view
-          addedClass.getAllOwnedProperties().forEach((property) => {
+          getAllOwnClassProperties(addedClass).forEach((property) => {
             if (property.genericType.value.rawType === _class) {
               diagram_addPropertyView(
                 this.diagram,
@@ -938,7 +949,7 @@ export class DiagramRenderer {
               );
             }
           });
-          _class.getAllOwnedProperties().forEach((property) => {
+          getAllOwnClassProperties(_class).forEach((property) => {
             if (property.genericType.value.rawType === addedClass) {
               diagram_addPropertyView(
                 this.diagram,
@@ -1394,14 +1405,14 @@ export class DiagramRenderer {
     this.ctx.font = `${(this.fontSize - 1) * (measureOnly ? 1 : this.zoom)}px ${
       this.fontFamily
     }`;
+    const multiplicityString = generateMultiplicityString(
+      property.multiplicity.lowerBound,
+      property.multiplicity.upperBound,
+    );
     if (!measureOnly) {
-      this.ctx.fillText(
-        `[${property.multiplicity.str}]`,
-        propX + txtMeasure,
-        propY,
-      );
+      this.ctx.fillText(`[${multiplicityString}]`, propX + txtMeasure, propY);
     }
-    txtMeasure += this.ctx.measureText(`[${property.multiplicity.str}]`).width;
+    txtMeasure += this.ctx.measureText(`[${multiplicityString}]`).width;
     return txtMeasure;
   }
 
@@ -1451,7 +1462,7 @@ export class DiagramRenderer {
 
     // Calculate box for properties
     if (!classView.hideProperties) {
-      classView.class.value.getAllOwnedProperties().forEach((property) => {
+      getAllOwnClassProperties(classView.class.value).forEach((property) => {
         if (!this.hasPropertyView(classView, property)) {
           const propertyTextMeasure = this.drawClassViewProperty(
             classView,
@@ -1632,7 +1643,7 @@ export class DiagramRenderer {
       );
       this.ctx.stroke();
 
-      for (const property of classView.class.value.getAllOwnedProperties()) {
+      for (const property of getAllOwnClassProperties(classView.class.value)) {
         if (!this.hasPropertyView(classView, property)) {
           this.ctx.fillStyle =
             property instanceof DerivedProperty
@@ -1671,8 +1682,12 @@ export class DiagramRenderer {
   ): PositionedRectangle {
     this.ctx.font = `${this.fontSize}px ${this.fontFamily}`;
     const propertyName = getPropertyDisplayName(property);
+    const multiplictyString = generateMultiplicityString(
+      property.multiplicity.lowerBound,
+      property.multiplicity.upperBound,
+    );
     const textSize = this.ctx.measureText(propertyName).width;
-    const mulSize = this.ctx.measureText(property.multiplicity.str).width;
+    const mulSize = this.ctx.measureText(multiplictyString).width;
     this.ctx.font = `${this.fontSize * this.zoom}px ${this.fontFamily}`;
     const posX = textPositionX(textSize);
     const posY = textPositionY(textSize);
@@ -1689,7 +1704,7 @@ export class DiagramRenderer {
     );
     if (!measureOnly) {
       this.ctx.fillText(
-        property.multiplicity.str,
+        multiplictyString,
         multiplicityPosition.x,
         multiplicityPosition.y,
       );
@@ -2006,34 +2021,34 @@ export class DiagramRenderer {
     this.ctx.beginPath();
     this.ctx.moveTo(
       resultX +
-        (this.screenOffset.x + (this.triangle[0] as Point).rotateX(angle)) *
+        (this.screenOffset.x + rotatePointX(this.triangle[0] as Point, angle)) *
           this.zoom,
       resultY +
-        (this.screenOffset.y + (this.triangle[0] as Point).rotateY(angle)) *
+        (this.screenOffset.y + rotatePointY(this.triangle[0] as Point, angle)) *
           this.zoom,
     );
     this.ctx.lineTo(
       resultX +
-        (this.screenOffset.x + (this.triangle[1] as Point).rotateX(angle)) *
+        (this.screenOffset.x + rotatePointX(this.triangle[1] as Point, angle)) *
           this.zoom,
       resultY +
-        (this.screenOffset.y + (this.triangle[1] as Point).rotateY(angle)) *
+        (this.screenOffset.y + rotatePointY(this.triangle[1] as Point, angle)) *
           this.zoom,
     );
     this.ctx.lineTo(
       resultX +
-        (this.screenOffset.x + (this.triangle[2] as Point).rotateX(angle)) *
+        (this.screenOffset.x + rotatePointX(this.triangle[2] as Point, angle)) *
           this.zoom,
       resultY +
-        (this.screenOffset.y + (this.triangle[2] as Point).rotateY(angle)) *
+        (this.screenOffset.y + rotatePointY(this.triangle[2] as Point, angle)) *
           this.zoom,
     );
     this.ctx.lineTo(
       resultX +
-        (this.screenOffset.x + (this.triangle[0] as Point).rotateX(angle)) *
+        (this.screenOffset.x + rotatePointX(this.triangle[0] as Point, angle)) *
           this.zoom,
       resultY +
-        (this.screenOffset.y + (this.triangle[0] as Point).rotateY(angle)) *
+        (this.screenOffset.y + rotatePointY(this.triangle[0] as Point, angle)) *
           this.zoom,
     );
     this.ctx.fillStyle = this.generalizationViewInheritanceTriangeFillColor;
@@ -2341,7 +2356,7 @@ export class DiagramRenderer {
     else if ('ArrowDown' === e.key) {
       const views = uniqBy(
         this.selectedClasses.flatMap((x) =>
-          x.class.value.subclasses.flatMap(
+          x.class.value._subclasses.flatMap(
             (c) =>
               new ClassView(
                 this.diagram,
@@ -2629,12 +2644,10 @@ export class DiagramRenderer {
           for (let i = this.diagram.classViews.length - 1; i >= 0; i--) {
             const targetClassView = this.diagram.classViews[i] as ClassView;
             if (
-              targetClassView
-                .buildBottomRightCornerBox()
-                .contains(
-                  eventPointInModelCoordinate.x,
-                  eventPointInModelCoordinate.y,
-                )
+              buildBottomRightCornerBox(targetClassView).contains(
+                eventPointInModelCoordinate.x,
+                eventPointInModelCoordinate.y,
+              )
             ) {
               this.setSelectedClasses([]);
               this.setSelectedClassCorner(this.diagram.classViews[i]);
@@ -2996,8 +3009,8 @@ export class DiagramRenderer {
             this.setSelectedClasses([]);
             for (const classView of this.diagram.classViews) {
               if (
-                this.selection.boxContains(classView) ||
-                classView.boxContains(this.selection)
+                boxContains(this.selection, classView) ||
+                boxContains(classView, this.selection)
               ) {
                 this.setSelectedClasses([...this.selectedClasses, classView]);
               }
@@ -3057,12 +3070,10 @@ export class DiagramRenderer {
 
           // Check hover class corner
           if (
-            classView
-              .buildBottomRightCornerBox()
-              .contains(
-                eventPointInModelCoordinate.x,
-                eventPointInModelCoordinate.y,
-              )
+            buildBottomRightCornerBox(classView).contains(
+              eventPointInModelCoordinate.x,
+              eventPointInModelCoordinate.y,
+            )
           ) {
             this.setMouseOverClassCorner(classView);
           }
@@ -3115,7 +3126,7 @@ export class DiagramRenderer {
           cursorY += this.classViewSpaceY;
 
           // Check hover class property
-          for (const property of _class.getAllOwnedProperties()) {
+          for (const property of getAllOwnClassProperties(_class)) {
             if (!this.hasPropertyView(classView, property)) {
               this.ctx.font = `${(this.fontSize - 1) * this.zoom}px ${
                 this.fontFamily
@@ -3204,7 +3215,7 @@ export class DiagramRenderer {
                 diagram,
                 uuid(),
                 PackageableElementExplicitReference.create(
-                  generation.value.getRawType(Class),
+                  getRawGenericType(generation.value, Class),
                 ),
               ),
           ),

package/src/components/studio/ClassDiagramPreview.tsx

@@ -19,8 +19,8 @@ import { useResizeDetector } from 'react-resize-detector';
 import { observer } from 'mobx-react-lite';
 import { useApplicationStore } from '@finos/legend-application';
 import type { Class } from '@finos/legend-graph';
-import { InheritanceDiagramRenderer } from './InheritanceDiagramRenderer';
-import { DSL_DIAGRAM_TEST_ID } from './DSLDiagram_TestID';
+import { InheritanceDiagramRenderer } from './InheritanceDiagramRenderer.js';
+import { DSL_DIAGRAM_TEST_ID } from './DSLDiagram_TestID.js';
 import { useEditorStore } from '@finos/legend-studio';
 
 export const ClassDiagramPreview = observer((props: { _class: Class }) => {

package/src/components/studio/DSLDiagram_LegendStudioDocumentation.ts

@@ -14,20 +14,27 @@
  * limitations under the License.
  */
 
+import type { LegendApplicationDocumentationEntryConfig } from '@finos/legend-application';
+
 export enum DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY {
-  GRAMMAR_PARSER = 'dsl-diagram__grammar-parser',
-  GRAMMAR_DIAGRAM_ELEMENT = 'dsl-diagram__grammar-diagram-element',
+  GRAMMAR_PARSER = 'dsl-diagram.grammar.parser',
+  GRAMMAR_ELEMENT_DIAGRAM = 'dsl-diagram.grammar.element.diagram',
 }
 
-export const DSL_DIAGRAM_DOCUMENTATION_ENTRIES = {
+export const DSL_DIAGRAM_DOCUMENTATION_ENTRIES: Record<
+  string,
+  LegendApplicationDocumentationEntryConfig
+> = {
   [DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY.GRAMMAR_PARSER]: {
+    title: `What is Diagram DSL about?`,
     markdownText: {
-      value: `DSL Diagram (\`###Diagram\`) concerns with visualizing data models and their relationship`,
+      value: `\`Diagram DSL\`  (coressponding to \`###Diagram\` section in \`Pure\`) concerns with visualizing data models and their relationship`,
     },
   },
-  [DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY.GRAMMAR_DIAGRAM_ELEMENT]: {
+  [DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY.GRAMMAR_ELEMENT_DIAGRAM]: {
+    title: `What is a diagram element?`,
     markdownText: {
-      value: `A diagram element specifies the visualization/rendering of data models and their relationship`,
+      value: `A \`Diagram\` element specifies the visualization/rendering of data models and their relationship`,
     },
   },
 };

package/src/components/studio/DSLDiagram_LegendStudioPlugin.tsx

@@ -38,10 +38,10 @@ import {
 } from '@finos/legend-studio';
 import { ShapesIcon } from '@finos/legend-art';
 import type { Class, PackageableElement } from '@finos/legend-graph';
-import { Diagram } from '../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram';
-import { DiagramEditorState } from '../../stores/studio/DiagramEditorState';
-import { DiagramEditor } from './DiagramEditor';
-import { ClassDiagramPreview } from './ClassDiagramPreview';
+import { Diagram } from '../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram.js';
+import { DiagramEditorState } from '../../stores/studio/DiagramEditorState.js';
+import { DiagramEditor } from './DiagramEditor.js';
+import { ClassDiagramPreview } from './ClassDiagramPreview.js';
 import {
   type LegendApplicationDocumentationEntry,
   type LegendApplicationKeyedDocumentationEntry,
@@ -50,17 +50,17 @@ import {
 import {
   PURE_GRAMMAR_DIAGRAM_ELEMENT_TYPE_LABEL,
   PURE_GRAMMAR_DIAGRAM_PARSER_NAME,
-} from '../../graphManager/DSLDiagram_PureGraphManagerPlugin';
+} from '../../graphManager/DSLDiagram_PureGraphManagerPlugin.js';
 import {
   DSL_DIAGRAM_DOCUMENTATION_ENTRIES,
   DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY,
-} from './DSLDiagram_LegendStudioDocumentation';
+} from './DSLDiagram_LegendStudioDocumentation.js';
 import {
   EMPTY_DIAGRAM_SNIPPET,
   getDiagramSnippetWithGeneralizationView,
   getDiagramSnippetWithOneClassView,
   getDiagramSnippetWithPropertyView,
-} from './DSLDiagram_CodeSnippets';
+} from './DSLDiagram_CodeSnippets.js';
 
 const DIAGRAM_ELEMENT_TYPE = 'DIAGRAM';
 const DIAGRAM_ELEMENT_PROJECT_EXPLORER_DND_TYPE = 'PROJECT_EXPLORER_DIAGRAM';
@@ -203,8 +203,8 @@ export class DSLDiagram_LegendStudioPlugin
       ): LegendApplicationDocumentationEntry | undefined => {
         if (parserKeyword === PURE_GRAMMAR_DIAGRAM_PARSER_NAME) {
           if (elementKeyword === PURE_GRAMMAR_DIAGRAM_ELEMENT_TYPE_LABEL) {
-            return editorStore.applicationStore.docRegistry.getEntry(
-              DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY.GRAMMAR_DIAGRAM_ELEMENT,
+            return editorStore.applicationStore.documentationService.getDocEntry(
+              DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY.GRAMMAR_ELEMENT_DIAGRAM,
             );
           }
         }
@@ -220,7 +220,7 @@ export class DSLDiagram_LegendStudioPlugin
         parserKeyword: string,
       ): LegendApplicationDocumentationEntry | undefined => {
         if (parserKeyword === PURE_GRAMMAR_DIAGRAM_PARSER_NAME) {
-          return editorStore.applicationStore.docRegistry.getEntry(
+          return editorStore.applicationStore.documentationService.getDocEntry(
             DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY.GRAMMAR_PARSER,
           );
         }
@@ -235,9 +235,10 @@ export class DSLDiagram_LegendStudioPlugin
         {
           text: PURE_GRAMMAR_DIAGRAM_PARSER_NAME,
           description: `(dsl)`,
-          documentation: editorStore.applicationStore.docRegistry.getEntry(
-            DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY.GRAMMAR_PARSER,
-          ),
+          documentation:
+            editorStore.applicationStore.documentationService.getDocEntry(
+              DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY.GRAMMAR_PARSER,
+            ),
           insertText: PURE_GRAMMAR_DIAGRAM_PARSER_NAME,
         },
       ],

package/src/components/studio/DSLDiagram_LegendStudioPlugin_Extension.tsx

@@ -15,8 +15,8 @@
  */
 
 import type { DSL_LegendStudioPlugin_Extension } from '@finos/legend-studio';
-import type { ClassView } from '../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassView';
-import type { DiagramEditorState } from '../../stores/studio/DiagramEditorState';
+import type { ClassView } from '../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassView.js';
+import type { DiagramEditorState } from '../../stores/studio/DiagramEditorState.js';
 
 export type ClassViewContextMenuItemRendererConfiguration = {
   key: string;

package/src/components/studio/DiagramEditor.tsx

@@ -30,7 +30,7 @@ import {
   DIAGRAM_INTERACTION_MODE,
   DIAGRAM_RELATIONSHIP_EDIT_MODE,
   DIAGRAM_ZOOM_LEVELS,
-} from '../../DiagramRenderer';
+} from '../../DiagramRenderer.js';
 import {
   type DiagramEditorInlineClassCreatorState,
   type DiagramEditorInlineClassRenamerState,
@@ -38,7 +38,7 @@ import {
   DIAGRAM_EDITOR_SIDE_PANEL_TAB,
   DiagramEditorClassViewEditorSidePanelState,
   DiagramEditorState,
-} from '../../stores/studio/DiagramEditorState';
+} from '../../stores/studio/DiagramEditorState.js';
 import {
   type ResizablePanelHandlerProps,
   ContextMenu,
@@ -104,14 +104,14 @@ import {
   property_setGenericType,
   property_setMultiplicity,
 } from '@finos/legend-studio';
-import { cleanUpDeadReferencesInDiagram } from '../../helpers/DiagramHelper';
-import { Point } from '../../models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Point';
-import type { DSLDiagram_LegendStudioPlugin_Extension } from './DSLDiagram_LegendStudioPlugin_Extension';
+import { cleanUpDeadReferencesInDiagram } from '../../helpers/DSLDiagram_Helper.js';
+import { Point } from '../../models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Point.js';
+import type { DSLDiagram_LegendStudioPlugin_Extension } from './DSLDiagram_LegendStudioPlugin_Extension.js';
 import {
   classView_setHideProperties,
   classView_setHideStereotypes,
   classView_setHideTaggedValues,
-} from '../../stores/studio/DSLDiagram_GraphModifierHelper';
+} from '../../stores/studio/DSLDiagram_GraphModifierHelper.js';
 
 const DiagramEditorContextMenu = observer(
   forwardRef<

package/src/components/studio/InheritanceDiagramRenderer.ts

@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { DiagramRenderer } from '../../DiagramRenderer';
+import { DiagramRenderer } from '../../DiagramRenderer.js';
 import { uuid } from '@finos/legend-shared';
 import {
   type Class,
   PackageableElementExplicitReference,
 } from '@finos/legend-graph';
-import { Diagram } from '../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram';
-import { ClassView } from '../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassView';
+import { Diagram } from '../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram.js';
+import { ClassView } from '../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassView.js';
 
 export class InheritanceDiagramRenderer extends DiagramRenderer {
   constructor(div: HTMLDivElement, _class: Class) {

package/src/graph/DSLDiagram_PureGraphPlugin.ts

@@ -22,8 +22,8 @@ import {
   type PackageableElement,
   type PureModel,
 } from '@finos/legend-graph';
-import { Diagram } from '../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram';
-import { cleanUpDeadReferencesInDiagram } from '../helpers/DiagramHelper';
+import { Diagram } from '../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram.js';
+import { cleanUpDeadReferencesInDiagram } from '../helpers/DSLDiagram_Helper.js';
 
 export class DSLDiagram_PureGraphPlugin extends PureGraphPlugin {
   constructor() {

package/src/graphManager/DSLDiagram_GraphManagerHelper.ts

@@ -16,7 +16,7 @@
 
 import type { BasicModel, PureModel } from '@finos/legend-graph';
 import { guaranteeNonNullable } from '@finos/legend-shared';
-import { Diagram } from '../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram';
+import { Diagram } from '../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram.js';
 
 export const getDiagram = (path: string, graph: PureModel): Diagram =>
   graph.getExtensionElement(path, Diagram, `Can't find diagram '${path}'`);

package/src/graphManager/DSLDiagram_PureGraphManagerPlugin.ts

@@ -22,8 +22,8 @@ import {
   type PackageableElement,
   type PureGrammarElementLabeler,
 } from '@finos/legend-graph';
-import { Diagram } from '../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram';
-import { observe_Diagram } from './action/changeDetection/DSLDiagram_ObserverHelper';
+import { Diagram } from '../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram.js';
+import { observe_Diagram } from './action/changeDetection/DSLDiagram_ObserverHelper.js';
 
 export const PURE_GRAMMAR_DIAGRAM_PARSER_NAME = 'Diagram';
 export const PURE_GRAMMAR_DIAGRAM_ELEMENT_TYPE_LABEL = 'Diagram';

package/src/graphManager/action/changeDetection/DSLDiagram_ObserverHelper.ts

@@ -21,20 +21,20 @@ import {
   skipObserved,
 } from '@finos/legend-graph';
 import { computed, makeObservable, observable, override } from 'mobx';
-import type { AssociationView } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_AssociationView';
-import type { ClassView } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassView';
-import type { ClassViewReference } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassViewReference';
-import type { Diagram } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram';
-import type { GeneralizationView } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_GeneralizationView';
-import type { PropertyView } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_PropertyView';
-import type { RelationshipEdgeView } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_RelationshipEdgeView';
-import type { RelationshipView } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_RelationshipView';
-import type { PositionedRectangle } from '../../../models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_PositionedRectangle';
+import type { AssociationView } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_AssociationView.js';
+import type { ClassView } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassView.js';
+import type { ClassViewReference } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassViewReference.js';
+import type { Diagram } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram.js';
+import type { GeneralizationView } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_GeneralizationView.js';
+import type { PropertyView } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_PropertyView.js';
+import type { RelationshipViewEnd } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_RelationshipViewEnd.js';
+import type { RelationshipView } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_RelationshipView.js';
+import type { PositionedRectangle } from '../../../models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_PositionedRectangle.js';
 
 export const observe_PositionedRectangle = skipObserved(
   (metamodel: PositionedRectangle): PositionedRectangle =>
     makeObservable(metamodel, {
-      dummyObservable: observable,
+      _dummyObservable: observable,
     }),
 );
 
@@ -69,7 +69,7 @@ export const observe_ClassView = skipObserved(
 );
 
 export const observe_RelationShipEdgeView = skipObserved(
-  (metamodel: RelationshipEdgeView): RelationshipEdgeView => {
+  (metamodel: RelationshipViewEnd): RelationshipViewEnd => {
     observe_ClassViewReference(metamodel.classView);
 
     return metamodel;