Fix Entity instance in collapse mode, fix and improve tooltip (#195)

* fix tooltip

* add samm version and aspect version in tooltip

* fix github action error

* fix entity intance name when collapsed

* remove console logs

* fix code review comments

Author: larisaVasile

core/libs/loader-filters/src/lib/filters/properties-filter.ts

@@ -23,7 +23,7 @@ import {
   DefaultUnit,
 } from '@ame/meta-model';
 import {ArrowStyle, ChildrenArray, FilterLoader, ModelFilter, ModelTree, ModelTreeOptions} from '../models';
-import {ShapeGeometry, basicShapeGeometry, circleShapeGeometry} from '@ame/shared';
+import {ShapeGeometry, basicShapeGeometry, smallCircleShapeGeometry} from '@ame/shared';
 import {MxGraphHelper} from '@ame/mx-graph';
 import {Injector} from '@angular/core';
 import {ShapeSettingsStateService} from '@ame/editor';
@@ -140,8 +140,8 @@ export class PropertiesFilterLoader implements FilterLoader {
     if (element instanceof DefaultAspect) {
       return basicShapeGeometry;
     }
-
-    return element instanceof DefaultProperty ? basicShapeGeometry : circleShapeGeometry;
+    
+    return element instanceof DefaultProperty ? basicShapeGeometry : smallCircleShapeGeometry;
   }
 
   getMxGraphStyle(element: BaseMetaModelElement): string {

core/libs/mx-graph/src/lib/helpers/mx-graph-helper.ts

@@ -144,7 +144,7 @@ export class MxGraphHelper {
       .some(firstEdge =>
         graph
           .getIncomingEdges(firstEdge.source)
-          .some(secondEdge => MxGraphHelper.getModelElement(secondEdge.source) instanceof DefaultStructuredValue),
+          .some(secondEdge => MxGraphHelper.getModelElement(secondEdge.source) instanceof DefaultStructuredValue)
       );
   }
 
@@ -332,11 +332,27 @@ export class MxGraphHelper {
       title.style.width = cell.geometry.width + 'px';
     }
     title.title = isSmallShape ? '' : modelElement.name;
+
     title.innerText = modelElement.name?.length > 24 ? modelElement.name?.substring(0, 21) + '...' : modelElement.name;
+    if (cell.collapsed) {
+      const isEntityInstance = modelElement instanceof DefaultEntityInstance;
+      if (isEntityInstance) {
+        title.innerText = this.formatSmallName(modelElement.name);
+      }
+    }
+
     title.classList.add('element-name');
     return title;
   }
 
+  private static formatSmallName(name: string) {
+    if (name.length < 4) {
+      return name;
+    } else {
+      return name.charAt(0) + '..' + name.charAt(name.length - 1);
+    }
+  }
+
   static createPropertiesLabel(cell: mxgraph.mxCell) {
     const modelElement = MxGraphHelper.getModelElement(cell);
     if (!modelElement) {

core/libs/mx-graph/src/lib/helpers/mx-graph-visitor-helper.ts

@@ -480,8 +480,14 @@ export class MxGraphVisitorHelper {
       const aspectVersionedNamespace = rdfModel.getAspectModelUrn().replace('#', '');
       const [elementVersionedNamespace] = modelElement.aspectModelUrn.split('#');
 
+      let metaModelVersion =  modelElement.metaModelVersion;
+      if(modelElement instanceof DefaultEntityInstance){
+        metaModelVersion = modelElement.entity.metaModelVersion;
+      }
+
       return {
-        version: modelElement.metaModelVersion,
+        version: RdfModelUtil.getNamespaceVersionFromRdf(rdfModel.absoluteAspectModelFileName),
+        sammVersion: metaModelVersion,
         namespace: elementNamespace,
         external: modelElement.isExternalReference(),
         predefined: !!(modelElement as DefaultCharacteristic)?.isPredefined?.(),
@@ -494,4 +500,5 @@ export class MxGraphVisitorHelper {
       return null;
     }
   }
+
 }

core/libs/mx-graph/src/lib/models/model-style.ts

@@ -40,7 +40,7 @@ export enum ModelStyle {
   ENTITY = 'entity',
   UNIT = 'unit',
   TRAIT = 'trait',
-  ENTITY_VALUE = 'entityValue',
+  ENTITY_INSTANCE = 'entityInstance',
   ABSTRACT_ENTITY = 'abstractEntity',
   EVENT = 'event',
 }
@@ -76,7 +76,7 @@ export class ModelStyleResolver {
     } else if (metaModelElement instanceof DefaultUnit) {
       return ModelStyle.UNIT;
     } else if (metaModelElement instanceof DefaultEntityInstance) {
-      return ModelStyle.ENTITY_VALUE;
+      return ModelStyle.ENTITY_INSTANCE;
     } else if (metaModelElement instanceof DefaultEvent) {
       return ModelStyle.EVENT;
     }
@@ -93,4 +93,5 @@ export interface ModelBaseProperties {
   sameNamespace: boolean;
   sameVersionedNamespace: boolean;
   isAbstract: boolean;
+  sammVersion: string;
 }

core/libs/mx-graph/src/lib/services/mx-graph-setup.service.ts

@@ -129,7 +129,8 @@ export class MxGraphSetupService {
       const table = document.createElement('table');
       if (!configuration?.baseProperties.isPredefined) {
         table.innerHTML += `<tr><td>Namespace</td><td>${configuration?.baseProperties.namespace}</td></tr>`;
-        table.innerHTML += `<tr><td>Version</td><td>${configuration?.baseProperties.version}</td></tr>`;
+        table.innerHTML += `<tr><td>SAMM Version</td><td>${configuration?.baseProperties.sammVersion}</td></tr>`;
+        table.innerHTML += `<tr><td>Model Version</td><td>${configuration?.baseProperties.version}</td></tr>`;
 
         if (configuration?.baseProperties.fileName) {
           table.innerHTML += `<tr><td>File</td><td>${configuration?.baseProperties.fileName}</td></tr>`;

core/libs/mx-graph/src/lib/services/mx-graph.service.ts

@@ -320,6 +320,7 @@ export class MxGraphService {
         if (MxGraphHelper.isComplexEnumeration(modelElement)) {
           this.mxGraphShapeOverlayService.removeOverlay(cell, MxGraphHelper.getRightOverlayButton(cell));
         }
+
         cell.overlays?.forEach(overlay => {
           overlay.image.width = overlayGeometry.collapsedWidth;
           overlay.image.height = overlayGeometry.collapsedHeight;

core/libs/shared/src/lib/constants/shape-geometry.ts

@@ -12,7 +12,7 @@
  */
 
 export type ShapeGeometry = {
-  type: 'basic' | 'circle' | 'small' | 'overlay';
+  type: 'basic' | 'circle' | 'small' | 'overlay'| 'smallCircle';
   expandedWith: number;
   expandedHeight: number;
   collapsedWidth: number;
@@ -40,7 +40,7 @@ export const smallBasicShapeGeometry: ShapeGeometry = {
   type: 'small',
   expandedWith: 80,
   expandedHeight: 35,
-  collapsedWidth: 30,
+  collapsedWidth: 46,
   collapsedHeight: 30,
 };
 
@@ -52,6 +52,14 @@ export const overlayGeometry: ShapeGeometry = {
   collapsedHeight: 16,
 };
 
+export const smallCircleShapeGeometry: ShapeGeometry = {
+  type: 'smallCircle',
+  expandedWith: 45,
+  expandedHeight: 45,
+  collapsedWidth: 20,
+  collapsedHeight: 20,
+};
+
 export enum ModelHierarchicalLayout {
   expandedIntraCellSpacing = 30,
   expandedInterRankCellSpacing = 30,