Fix/modular element not found (#139)

* Fix notification error message after loading external reference

see #135

Author: michelu89

core/apps/ame/src/app/startup.service.ts

@@ -11,9 +11,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import {NamespacesCacheService} from '@ame/cache';
-import {EditorService, FileHandlingService, ShapeSettingsService} from '@ame/editor';
-import {BaseMetaModelElement} from '@ame/meta-model';
+import {EditorService, FileHandlingService} from '@ame/editor';
 import {MigratorService} from '@ame/migrator';
 import {MxGraphService} from '@ame/mx-graph';
 import {
@@ -24,9 +22,9 @@ import {
   ModelSavingTrackerService,
   StartupPayload,
 } from '@ame/shared';
-import {Injectable, NgZone, inject} from '@angular/core';
+import {inject, Injectable, NgZone} from '@angular/core';
 import {NavigationEnd, Router} from '@angular/router';
-import {Observable, filter, of, sample, switchMap, take, tap} from 'rxjs';
+import {filter, Observable, of, sample, switchMap, take, tap} from 'rxjs';
 import {SidebarStateService} from '@ame/sidebar';
 import {LanguageTranslationService} from '@ame/translation';
 
@@ -42,8 +40,6 @@ export class StartupService {
     private modelSaveTracker: ModelSavingTrackerService,
     private electronTunnelService: ElectronTunnelService,
     private loadingScreenService: LoadingScreenService,
-    private shapeSettingsSettings: ShapeSettingsService,
-    private namespaceCacheService: NamespacesCacheService,
     private fileHandlingService: FileHandlingService,
     private mxGraphService: MxGraphService,
     private translate: LanguageTranslationService,
@@ -91,29 +87,15 @@ export class StartupService {
                 rdfAspectModel: model,
                 namespaceFileName: options ? `${options.namespace}:${options.file}` : '',
                 fromWorkspace: options?.fromWorkspace,
+                editElementUrn: options?.editElement,
               })
             : of(this.fileHandlingService.createEmptyModel()),
         ),
       ),
       tap(() => {
-        this.editElement(options?.editElement);
         this.modelSaveTracker.updateSavedModel();
         this.loadingScreenService.close();
       }),
     );
   }
-
-  editElement(modelUrn: string) {
-    if (!modelUrn) {
-      return;
-    }
-
-    const element = this.namespaceCacheService.currentCachedFile.getElement<BaseMetaModelElement>(modelUrn);
-    if (element) {
-      this.shapeSettingsSettings.editModel(element);
-      requestAnimationFrame(() => {
-        this.mxGraphService.navigateToCellByUrn(element.aspectModelUrn);
-      });
-    }
-  }
 }

core/apps/ame/src/assets/i18n/en.json

@@ -430,6 +430,10 @@
         "LOCATE_ELEMENT": "Locate element",
         "OPEN_ELEMENT": "Open element",
         "OPEN_ELEMENT_IN_NEW_WINDOW": "Open element in new window"
+      },
+      "NOTIFICATION": {
+        "EDIT_VIEW_UNAVAILABLE": "Edit View Unavailable",
+        "EDIT_VIEW_UNAVAILABLE_MESSAGE": "The element you`re trying to edit doesn`t exist. Please check if the element ID is correct or if it has been removed."
       }
     }
   },

core/electron-libs/windows-manager.js

@@ -346,6 +346,7 @@ class WindowsManager {
       if (!id) {
         return;
       }
+
       event.sender.send(RESPONSE_WINDOW_DATA, {id, options});
     };
 

core/libs/cache/src/lib/cached-file.ts

@@ -86,6 +86,10 @@ export class CachedFile {
     return [...this.cachedElements.values()];
   }
 
+  hasCachedElements(): boolean {
+    return this.cachedElements.size > 0;
+  }
+
   updateCachedElementKey(oldKey: string, newKey: string) {
     const resolvedEntry = this.cachedElements.get(oldKey);
     if (resolvedEntry) {
@@ -190,4 +194,8 @@ export class CachedFile {
   clearAnonymousElements() {
     this.anonymousElements = [];
   }
+
+  clearCache() {
+    this.cachedElements.clear();
+  }
 }

core/libs/editor/src/lib/editor-dialog/services/shape-settings.service.ts

@@ -14,11 +14,13 @@
 import {Injectable, NgZone} from '@angular/core';
 import {BaseMetaModelElement} from '@ame/meta-model';
 import {mxEvent, MxGraphAttributeService, MxGraphHelper, MxGraphService, MxGraphShapeSelectorService, mxUtils} from '@ame/mx-graph';
-import {BindingsService} from '@ame/shared';
+import {BindingsService, NotificationsService} from '@ame/shared';
 import {EditorService} from '../../editor.service';
 import {ShapeSettingsStateService} from './shape-settings-state.service';
 import {OpenReferencedElementService} from '../../open-element-window/open-element-window.service';
 import {BehaviorSubject} from 'rxjs';
+import {NamespacesCacheService} from '@ame/cache';
+import {LanguageTranslationService} from '@ame/translation';
 
 @Injectable({providedIn: 'root'})
 export class ShapeSettingsService {
@@ -31,10 +33,13 @@ export class ShapeSettingsService {
     private mxGraphAttributeService: MxGraphAttributeService,
     private mxGraphService: MxGraphService,
     private mxGraphShapeSelectorService: MxGraphShapeSelectorService,
+    private notificationsService: NotificationsService,
     private bindingsService: BindingsService,
     private editorService: EditorService,
     private shapeSettingsStateService: ShapeSettingsStateService,
     private openReferencedElementService: OpenReferencedElementService,
+    private namespaceCacheService: NamespacesCacheService,
+    private translate: LanguageTranslationService,
     private ngZone: NgZone,
   ) {}
 
@@ -112,4 +117,18 @@ export class ShapeSettingsService {
     this.shapeSettingsStateService.openShapeSettings();
     this.modelElement = elementModel;
   }
+
+  editModelByUrn(elementUrn: string) {
+    const element = this.namespaceCacheService.currentCachedFile.getElement<BaseMetaModelElement>(elementUrn);
+    if (!element) {
+      this.notificationsService.error({
+        title: this.translate.language.EDITOR_CANVAS.SHAPE_SETTING.NOTIFICATION.EDIT_VIEW_UNAVAILABLE,
+        message: this.translate.language.EDITOR_CANVAS.SHAPE_SETTING.NOTIFICATION.EDIT_VIEW_UNAVAILABLE_MESSAGE,
+      });
+
+      return;
+    }
+
+    this.editModel(element);
+  }
 }

core/libs/editor/src/lib/editor-toolbar/services/file-handling.service.ts

@@ -514,7 +514,7 @@ export class FileHandlingService {
       .synchronizeModelToRdf()
       .pipe(finalize(() => subscription$.unsubscribe()))
       .subscribe((): void => {
-        if (!this.modelService.getLoadedAspectModel().aspect) {
+        if (!this.namespaceCacheService.currentCachedFile.hasCachedElements()) {
           this.notificationsService.info({
             title: this.translate.language.NOTIFICATION_DIALOG.NO_ASPECT_TITLE,
             timeout: 5000,

core/libs/editor/src/lib/editor.service.ts

@@ -11,7 +11,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import {inject, Injectable, NgZone} from '@angular/core';
+import {inject, Injectable, Injector, NgZone} from '@angular/core';
 import {
   AlertService,
   BrowserService,
@@ -71,7 +71,7 @@ import {ModelService, RdfService} from '@ame/rdf/services';
 import {RdfModel} from '@ame/rdf/utils';
 import {OpenApi, ViolationError} from './editor-toolbar';
 import {FILTER_ATTRIBUTES, FilterAttributesService, FiltersService} from '@ame/loader-filters';
-import {ShapeSettingsStateService} from './editor-dialog';
+import {ShapeSettingsService, ShapeSettingsStateService} from './editor-dialog';
 import {LargeFileWarningService} from './large-file-warning-dialog/large-file-warning-dialog.service';
 import {LoadModelPayload} from './models/load-model-payload.interface';
 import {LanguageTranslationService} from '@ame/translation';
@@ -91,21 +91,16 @@ export class EditorService {
   private isAllShapesExpandedSubject = new BehaviorSubject<boolean>(true);
 
   public isAllShapesExpanded$ = this.isAllShapesExpandedSubject.asObservable();
-  public loadModel$ = new BehaviorSubject<any>(null);
   public delayedBindings: Array<any> = [];
 
-  public get savedRdf$() {
-    return this.lastSavedRDF$.asObservable();
-  }
-
-  public get currentCachedFile(): CachedFile {
-    return this.namespaceCacheService.currentCachedFile;
-  }
-
   private get settings() {
     return this.configurationService.getSettings();
   }
 
+  get shapeSettingsService(): ShapeSettingsService {
+    return this.injector.get(ShapeSettingsService);
+  }
+
   constructor(
     private mxGraphService: MxGraphService,
     private mxGraphSetupService: MxGraphSetupService,
@@ -133,6 +128,7 @@ export class EditorService {
     private loadingScreenService: LoadingScreenService,
     private translate: LanguageTranslationService,
     private browserService: BrowserService,
+    private injector: Injector,
     private ngZone: NgZone,
   ) {
     if (!environment.production) {
@@ -262,6 +258,7 @@ export class EditorService {
           loadedRdfModel,
           payload.rdfAspectModel,
           payload.namespaceFileName || loadedRdfModel.absoluteAspectModelFileName,
+          payload.editElementUrn,
         ),
       ),
       tap(() => {
@@ -343,12 +340,17 @@ export class EditorService {
     return this.modelApiService.generateOpenApiSpec(serializedModel, openApi);
   }
 
-  private loadCurrentModel(loadedRdfModel: RdfModel, rdfAspectModel: string, namespaceFileName: string): Observable<Aspect> {
+  private loadCurrentModel(
+    loadedRdfModel: RdfModel,
+    rdfAspectModel: string,
+    namespaceFileName: string,
+    editElementUrn?: string,
+  ): Observable<Aspect> {
     return this.modelService.loadRdfModel(loadedRdfModel, rdfAspectModel, namespaceFileName).pipe(
       first(),
       tap((aspect: Aspect) => {
         this.removeOldGraph();
-        this.initializeNewGraph();
+        this.initializeNewGraph(editElementUrn);
         this.titleService.updateTitle(namespaceFileName || aspect?.aspectModelUrn, aspect ? 'Aspect' : 'Shared');
       }),
       catchError(error => {
@@ -364,7 +366,7 @@ export class EditorService {
     this.mxGraphService.deleteAllShapes();
   }
 
-  private initializeNewGraph() {
+  private initializeNewGraph(editElementUrn?: string): void {
     try {
       const rdfModel = this.modelService.currentRdfModel;
       const mxGraphRenderer = new MxGraphRenderer(
@@ -376,52 +378,70 @@ export class EditorService {
       );
 
       const elements = this.namespaceCacheService.currentCachedFile.getAllElements();
-      this.largeFileWarningService
-        .openDialog(elements.length)
-        .pipe(
-          first(),
-          filter(response => response !== 'cancel'),
-          tap(() => {
-            this.loadingScreenService.close();
-            requestAnimationFrame(() => {
-              this.loadingScreenService.open({title: this.translate.language.LOADING_SCREEN_DIALOG.MODEL_GENERATION});
-            });
-          }),
-          delay(500), // Modal animation waiting before apps is blocked by mxGraph
-          switchMap(() => {
-            return this.mxGraphService.updateGraph(() => {
-              this.mxGraphService.firstTimeFold = true;
-              MxGraphHelper.filterMode = this.filtersService.currentFilter.filterType;
-              const rootElements = elements.filter(e => !e.parents.length);
-              const filtered = this.filtersService.filter(rootElements);
-
-              for (const elementTree of filtered) {
-                mxGraphRenderer.render(elementTree, null);
-              }
-
-              this.mxGraphAttributeService.inCollapsedMode && this.mxGraphService.foldCells();
-            });
-          }),
-        )
-        .subscribe({
-          next: () => {
-            this.mxGraphService.formatShapes(true);
-            this.mxGraphSetupService.centerGraph();
-            localStorage.removeItem(ValidateStatus.validating);
-            this.loadingScreenService.close();
-          },
-          error: () => {
-            this.loadingScreenService.close();
-          },
-        });
+      this.prepareGraphUpdate(mxGraphRenderer, elements, editElementUrn);
     } catch (error) {
       console.groupCollapsed('editor.service', error);
       console.groupEnd();
-
       throwError(() => error);
     }
   }
 
+  private prepareGraphUpdate(mxGraphRenderer: MxGraphRenderer, elements: BaseMetaModelElement[], editElementUrn?: string): void {
+    this.largeFileWarningService
+      .openDialog(elements.length)
+      .pipe(
+        first(),
+        filter(response => response !== 'cancel'),
+        tap(() => this.toggleLoadingScreen()),
+        delay(500), // Wait for modal animation
+        switchMap(() => this.graphUpdateWorkflow(mxGraphRenderer, elements)),
+      )
+      .subscribe({
+        next: () => this.finalizeGraphUpdate(editElementUrn),
+        error: () => this.loadingScreenService.close(),
+      });
+  }
+
+  private toggleLoadingScreen(): void {
+    this.loadingScreenService.close();
+    requestAnimationFrame(() => {
+      this.loadingScreenService.open({title: this.translate.language.LOADING_SCREEN_DIALOG.MODEL_GENERATION});
+    });
+  }
+
+  private graphUpdateWorkflow(mxGraphRenderer: MxGraphRenderer, elements: BaseMetaModelElement[]): Observable<boolean> {
+    return this.mxGraphService.updateGraph(() => {
+      this.mxGraphService.firstTimeFold = true;
+      MxGraphHelper.filterMode = this.filtersService.currentFilter.filterType;
+      const rootElements = elements.filter(e => !e.parents.length);
+      const filtered = this.filtersService.filter(rootElements);
+
+      for (const elementTree of filtered) {
+        mxGraphRenderer.render(elementTree, null);
+      }
+
+      if (this.mxGraphAttributeService.inCollapsedMode) {
+        this.mxGraphService.foldCells();
+      }
+    });
+  }
+
+  private finalizeGraphUpdate(editElementUrn?: string): void {
+    this.mxGraphService.formatShapes(true);
+    this.handleEditOrCenterView(editElementUrn);
+    localStorage.removeItem(ValidateStatus.validating);
+    this.loadingScreenService.close();
+  }
+
+  private handleEditOrCenterView(editElementUrn: string | null): void {
+    if (editElementUrn) {
+      this.shapeSettingsService.editModelByUrn(editElementUrn);
+      this.mxGraphService.navigateToCellByUrn(editElementUrn);
+    } else {
+      this.mxGraphSetupService.centerGraph();
+    }
+  }
+
   makeDraggable(element: HTMLDivElement, dragElement: HTMLDivElement) {
     const ds = mxUtils.makeDraggable(
       element,

core/libs/editor/src/lib/large-file-warning-dialog/large-file-warning-dialog.ts

@@ -13,6 +13,7 @@
 
 import {Component, Inject} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {NamespacesCacheService} from '@ame/cache';
 
 @Component({
   templateUrl: './large-file-warning-dialog.html',
@@ -21,13 +22,15 @@ export class LargeFileWarningComponent {
   public elementsCount: number;
 
   constructor(
+    private namespacesCacheService: NamespacesCacheService,
     private dialogRef: MatDialogRef<LargeFileWarningComponent>,
     @Inject(MAT_DIALOG_DATA) private data: {elementsCount: number},
   ) {
     this.elementsCount = data?.elementsCount || 0;
   }
 
   close(response: 'open' | 'cancel') {
+    if (response === 'cancel') this.namespacesCacheService.currentCachedFile.clearCache();
     this.dialogRef.close(response);
   }
 }

core/libs/editor/src/lib/models/load-model-payload.interface.ts

@@ -16,4 +16,5 @@ export interface LoadModelPayload {
   namespaceFileName?: string;
   isDefault?: boolean;
   fromWorkspace?: boolean;
+  editElementUrn?: string;
 }