Unload graphviz after use; show warning in case of graphviz error

Author: tkleinke

desktop/src/app/components/matrix/edges-builder.ts

@@ -127,7 +127,6 @@ export module EdgesBuilder {
     }
 
 
-
     function getIncludedRelationTargetIds(targetId: string, graphDocuments: Array<Document>,
                                           totalDocuments: Array<Document>,
                                           relations: GraphRelationsConfiguration,

desktop/src/app/components/matrix/export-graph.ts

@@ -1,5 +1,4 @@
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
-import { Graphviz } from '@hpcc-js/wasm-graphviz';
 import { AppState } from '../../services/app-state';
 import { getAsynchronousFs } from '../../services/get-asynchronous-fs';
 import { M } from '../messages/m';
@@ -13,16 +12,16 @@ const remote = window.require('@electron/remote');
  * @author Thomas Kleinke
  */
 export async function exportGraph(dotGraph: string, projectName: string, trenchIdentifier: string, appState: AppState,
-                                  graphviz: Graphviz, modalService: NgbModal, fileFilterLabel: string) {
+                                  modalService: NgbModal, fileFilterLabel: string) {
 
     const filePath: string = await chooseFilepath(projectName, trenchIdentifier, appState, fileFilterLabel);
     if (!filePath) throw 'canceled';
 
     const modalRef: NgbModalRef = openExportModal(modalService);
-    await AngularUtility.refresh();
+    await AngularUtility.refresh(500);
 
     try {
-        await writeFile(filePath, graphviz.dot(dotGraph, 'dot'));
+        await writeFile(filePath, dotGraph);
     } catch (errWithParams) {
         throw errWithParams;
     } finally {

desktop/src/app/components/matrix/matrix-view.component.ts

@@ -50,7 +50,7 @@ const SUPPORTED_OPERATION_CATEGORIES = ['Trench', 'ExcavationArea'];
  */
 export class MatrixViewComponent implements OnInit {
 
-    // The latest svg calculated with GraphViz via DotBuilder based on our component's current settings.
+    public dotGraph: string|undefined;
     public graph: string|undefined;
 
     public graphFromSelection: boolean = false;
@@ -59,12 +59,11 @@ export class MatrixViewComponent implements OnInit {
     public operations: Array<FieldDocument> = [];
     public selectedOperation: FieldDocument|undefined;
     public configuredOperationCategories: string[] = [];
+    public graphvizFailure: boolean = false;
 
-    private graphviz: Graphviz;
     private featureDocuments: Array<FeatureDocument> = [];
     private totalFeatureDocuments: Array<FeatureDocument> = [];
     private operationsLoaded: boolean = false;
-    private dotGraph: string;
 
 
     constructor(private projectConfiguration: ProjectConfiguration,
@@ -114,7 +113,6 @@ export class MatrixViewComponent implements OnInit {
 
     async ngOnInit() {
 
-        this.graphviz = await Graphviz.load();
         await this.matrixState.load();
         await this.populateOperations();
 
@@ -169,39 +167,57 @@ export class MatrixViewComponent implements OnInit {
 
     public async calculateGraph() {
 
+        this.dotGraph = undefined;
         this.graph = undefined;
+        this.graphvizFailure = false;
+        let dotGraph: string;
 
         this.loading.start();
-        await AngularUtility.refresh(100);
 
-        const edges: { [resourceId: string]: Edges } = EdgesBuilder.build(
-            this.featureDocuments,
-            this.totalFeatureDocuments,
-            MatrixViewComponent.getRelationConfiguration(this.matrixState.getRelationsMode())
-        );
-
-        this.dotGraph = DotBuilder.build(
-            this.projectConfiguration,
-            this.getPeriodMap(this.featureDocuments, this.matrixState.getClusterMode()),
-            edges,
-            this.matrixState.getLineMode() === 'curved'
-        );
-
-        this.graph = this.graphviz.dot(this.dotGraph);
+        await AngularUtility.blurActiveElement();
+        await AngularUtility.refresh(500);
 
-        this.loading.stop();
+        try {
+            const edges: { [resourceId: string]: Edges } = EdgesBuilder.build(
+                this.featureDocuments,
+                this.totalFeatureDocuments,
+                MatrixViewComponent.getRelationConfiguration(this.matrixState.getRelationsMode())
+            );
+    
+            dotGraph = DotBuilder.build(
+                this.projectConfiguration,
+                this.getPeriodMap(this.featureDocuments, this.matrixState.getClusterMode()),
+                edges,
+                this.matrixState.getLineMode() === 'curved'
+            );
+        } catch (err) {
+            console.error(err);
+            this.messages.add([M.MATRIX_ERROR_GENERIC]);
+            return this.loading.stop();
+        }
+  
+        try {
+            const graphviz: Graphviz = await Graphviz.load();
+            this.graph = graphviz.dot(dotGraph);
+        } catch (err) {
+            this.graphvizFailure = true;
+        } finally {
+            Graphviz.unload();
+            this.dotGraph = dotGraph;
+            this.loading.stop();
+        }
     }
 
-
     public async exportGraph() {
 
+        if (!this.dotGraph) return;
+
         try {
             await exportGraph(
                 this.dotGraph,
                 this.settingsProvider.getSettings().selectedProject,
                 this.selectedOperation.resource.identifier,
                 this.appState,
-                this.graphviz,
                 this.modalService,
                 $localize `:@@matrix.export.dotFile:Graphviz-Dot-Datei`
             ); 

desktop/src/app/components/matrix/matrix-view.html

@@ -119,6 +119,7 @@
 
         <div id="export-button"
              class="btn btn-primary btn-square ms-2"
+             [class.disabled]="!dotGraph"
              ngbTooltip="Matrix exportieren"
              i18n-ngbTooltip="@@matrix.view.tooltips.export"
              placement="left"
@@ -166,6 +167,14 @@
         </em>
     </div>
 
+    <div *ngIf="graphvizFailure"
+         class="col-8 text-center alert alert-warning matrix-alert">
+        <em i18n="@@matrix.view.tooBigWarning">
+            Die Matrix überschreitet die maximale Darstellungsgröße. Bitte verwenden Sie die Exportfunktion, um die
+            Matrix zur Anzeige in einem externen Viewer zu speichern.
+        </em>
+    </div>
+
     <graph [graph]="graph"
            [selection]="selection"
            (onSelectForEdit)="edit($event)">

desktop/src/app/components/messages/m.ts

@@ -267,6 +267,9 @@ export class M extends MD { // = Messages Dictionary. For reasons of brevity of
     public static CONFIGURATION_ERROR_IMPORT_UNSUPPORTED_VERSION = 'configuration.error.unsupportedVersion';
     public static CONFIGURATION_ERROR_NO_PROJECT_LANGUAGES = 'configuration.error.noProjectLanguages';
 
+    // Matrix Package
+    public static MATRIX_ERROR_GENERIC = 'matrix.error.generic';
+
     public msgs : { [id: string]: MessageTemplate } = {};
 
 
@@ -1123,5 +1126,9 @@ export class M extends MD { // = Messages Dictionary. For reasons of brevity of
             content: $localize `:@@messages.configuration.error.noProjectLanguages:Bitte wählen Sie mindestens eine Projektsprache aus.`,
             level: 'danger'
         };
+        this.msgs[M.MATRIX_ERROR_GENERIC] = {
+            content: $localize `:@@messages.matrix.error.generic:Bei der Generierung der Matrix ist ein Fehler aufgetreten.`,
+            level: 'danger'
+        };
     }
 }