fix: pre-dams: graph: need to double click on upstream/downstream basins when...

fix: pre-dams: graph: need to double click on upstream/downstream basins when on error to turn them to red

refs #500 #560

e2e/calculate-button-validation.e2e-spec.ts

@@ -90,7 +90,7 @@ describe("Calculate button - ", () => {
             // Mermaid changed the way ids are generated, it preprends "flowchart-" and appends a number to the id given in the graph description
             const upstream = element(by.css("g[id^='flowchart-amont-']"));
             // should be displayed in error
-            expect(await upstream.getAttribute('class')).toContain("node-error");
+            expect(await upstream.getAttribute('class')).toContain("node-highlighted-error"); // upstream item is now selected by default (was 'node-error')
         });
 
         it("add basin, invalid data in Q input", async () => {
@@ -123,7 +123,7 @@ describe("Calculate button - ", () => {
             calcPage.checkCalcButtonEnabled(false);
 
             // upstream item displayed in error ?
-            expect(await upstream.getAttribute('class')).toContain("node-error");
+            expect(await upstream.getAttribute('class')).toContain("node-highlighted-error"); // upstream item is now selected by default (was 'node-error')
 
             // valid data in Q input
             await inputQ.clear();

src/app/components/modules-diagram/modules-diagram.component.ts

@@ -167,7 +167,7 @@ export class ModulesDiagramComponent implements AfterContentInit, AfterViewCheck
     }
 
     public get hasNotes(): boolean {
-        return !! Session.getInstance().documentation;
+        return !! Session.getInstance().documentation; // what ? "!!" ?
     }
 
     /**
@@ -283,7 +283,7 @@ export class ModulesDiagramComponent implements AfterContentInit, AfterViewCheck
      */
     private formIsOpen(uid: string) {
         for (const f of this.formulaireService.formulaires) {
-            if (MermaidUtil.isMermaidId(f.currentNub.uid, uid)) {
+            if (MermaidUtil.isMermaidEqualIds(f.currentNub.uid, uid)) {
                 return true;
             }
         }

src/app/components/pb-schema/pb-schema.component.ts

@@ -313,7 +313,14 @@ export class PbSchemaComponent implements AfterViewInit, AfterContentInit, OnIni
      * @param itemId id to find
      */
     private matchMermaidIds(ids: string[], itemId: string): boolean {
-        return ids.find(id => MermaidUtil.isMermaidId(id, itemId)) !== undefined;
+        return ids.find(id => MermaidUtil.isMermaidEqualIds(id, itemId)) !== undefined;
+    }
+
+    /**
+     * return upstream (and downstream) basin objet
+     */
+    private get upstreamBassin(): PbBassin {
+        return (this.model as unknown) as PbBassin;
     }
 
     /**
@@ -326,14 +333,14 @@ export class PbSchemaComponent implements AfterViewInit, AfterContentInit, OnIni
         item.classList.add("node-highlighted");
         // find what was clicked
         if (this.matchMermaidIds([this.upstreamId, this.downstreamId], item.id)) {
-            this._selectedItem = undefined;
+            this._selectedItem = this.upstreamBassin;
         } else {
             this._selectedItem = this.model.findChild(item.id);
         }
         this.highlightErrorItems(item.id);
         // show proper form and hide results
         this.nodeSelected.emit({
-            node: this._selectedItem
+            node: this._selectedItem === this.upstreamBassin ? undefined : this._selectedItem
         });
         // exit fullscreen
         this.exitFullscreen();
@@ -405,7 +412,9 @@ export class PbSchemaComponent implements AfterViewInit, AfterContentInit, OnIni
     private itemDescription(item: PbCloison | PbBassin): string {
         let desc = "";
         if (item !== undefined) {
-            desc = this.i18nService.localizeMessage(item.description);
+            if (item.description !== undefined) {
+                desc = this.i18nService.localizeMessage(item.description);
+            }
             if (item instanceof PbCloison) {
                 // there might be multiple walls between the same pair of basins
                 if (item.uid in this.pbSchema.wallsSuffixes) {
@@ -421,7 +430,7 @@ export class PbSchemaComponent implements AfterViewInit, AfterContentInit, OnIni
      */
     private selectNodeOnSchema(element: PbBassin | PbCloison) {
         this.nativeElement.querySelectorAll("g.node").forEach(item => {
-            if (element !== undefined && MermaidUtil.isMermaidId(element.uid, item.id)) {
+            if (element !== undefined && MermaidUtil.isMermaidEqualIds(element.uid, item.id)) {
                 this.selectNode(item);
             }
         });
@@ -434,8 +443,9 @@ export class PbSchemaComponent implements AfterViewInit, AfterContentInit, OnIni
         let done = false; // optimisation : simulate break in forEach
         this.nativeElement.querySelectorAll("g.node").forEach(item => {
             if (!done) {
-                if (MermaidUtil.isMermaidId("amont", item.id)) {
+                if (MermaidUtil.isMermaidEqualIds("amont", item.id)) {
                     this.selectNode(item);
+                    this._selectedItem = this.upstreamBassin;
                     done = true;
                 }
             }
@@ -452,7 +462,7 @@ export class PbSchemaComponent implements AfterViewInit, AfterContentInit, OnIni
     }
 
     public get enableRemoveButton() {
-        if (this._selectedItem === undefined) {
+        if (this._selectedItem === this.upstreamBassin) {
             return false;
         }
         // if deleting a PbCloison would replace it by a new one at
@@ -587,7 +597,7 @@ export class PbSchemaComponent implements AfterViewInit, AfterContentInit, OnIni
         if (this._selectedItem instanceof PbBassin) {
             this.model.moveBasin(this._selectedItem.uid, this.model.findBasinPosition(this._selectedItem.uid) - 1);
         }
-        const basin = this._selectedItem;
+        const basin = this._selectedItem; // utilité ?
         this.clearResults();
         this.refreshWithSelection(this._selectedItem.uid);
         this.calculatorComponent.showPBInputData = true;
@@ -697,23 +707,35 @@ export class PbSchemaComponent implements AfterViewInit, AfterContentInit, OnIni
         });
     }
 
+    /**
+     * turn 'aval', 'amont' and Mermaid ids to nub real uid
+     */
+    private toNubUid(id: string): string {
+        if (id !== undefined && id !== null) {
+            if (this.matchMermaidIds([this.upstreamId, this.downstreamId], id)) {
+                return this.model.uid;
+            }
+            if (id.startsWith("flowchart-")) { // Mermaid style id (ie. flowchart-id-xx)
+                return id.split('-')[1];
+            }
+        }
+        return id;
+    }
+
     private highlightErrorItems(selectedUid: string) {
         this.nativeElement.querySelectorAll("g.node").forEach(item => {
             item.classList.remove("node-error");
             item.classList.remove("node-highlighted-error");
         });
         const invalidUids: string[] = this.pbSchema.form.checkParameters();
+        selectedUid = this.toNubUid(selectedUid);
         if (invalidUids.length > 0) {
             this.nativeElement.querySelectorAll("g.node").forEach(item => {
-                // in this case, item is a HTML node of the SVG schema which id is a nud uid
-                let itemId: string;
-                if (this.matchMermaidIds([this.upstreamId, this.downstreamId], item.id)) {
-                    itemId = this.model.uid;
-                } else {
-                    itemId = item.id
-                }
-                if (this.matchMermaidIds(invalidUids, itemId)) {
-                    if (item.id === selectedUid) {
+                // in this case, item is a HTML node of the SVG schema which id is a nub uid
+                const itemId = this.toNubUid(item.id);
+
+                if (invalidUids.includes(itemId)) {  // if current item is among invalid ones
+                    if (selectedUid === itemId) { // if current item is the selected item
                         item.classList.add("node-highlighted-error");
                     } else {
                         item.classList.add("node-error");