feat: highlight linked equipment in IED select

Author: JakobVogelsang

communication-mapping-editor.ts

@@ -85,6 +85,8 @@ export class CommunicationMappingEditor extends LitElement {
 
   @state() mouseY2 = 0;
 
+  @state() linkedEquipments: Element[] = [];
+
   @state()
   get idle(): boolean {
     return !(this.placing || this.placingLabel);
@@ -259,6 +261,24 @@ export class CommunicationMappingEditor extends LitElement {
     return !(service || ied || source || target || cbName || receive || send);
   }
 
+  resetIedSelection(): void {
+    this.selectedIed = undefined;
+    this.linkedEquipments = [];
+  }
+
+  selectIED(ied: IED): void {
+    if (this.selectedIed !== ied.element) {
+      this.selectedIed = ied.element;
+      this.linkedEquipments = Array.from(
+        this.selectedIed.ownerDocument.querySelectorAll(
+          `ConductingEquipment LNode[iedName="${this.selectedIed.getAttribute(
+            'name'
+          )}"]`
+        )
+      ).map(lNode => lNode.closest('ConductingEquipment')!);
+    } else this.resetIedSelection();
+  }
+
   constructor() {
     super();
 
@@ -353,8 +373,7 @@ export class CommunicationMappingEditor extends LitElement {
       handleClick = () => this.startPlacing(ied.element);
     else if (!this.editMode)
       handleClick = () => {
-        if (this.selectedIed !== ied.element) this.selectedIed = ied.element;
-        else this.selectedIed = undefined;
+        this.selectIED(ied);
       };
 
     return svg`<svg
@@ -508,7 +527,7 @@ export class CommunicationMappingEditor extends LitElement {
         offIcon="edit_off"
         @click="${(evt: Event) => {
           this.editMode = (evt.target as IconButtonToggle).on;
-          this.selectedIed = undefined;
+          this.resetIedSelection();
         }}"
       ></mwc-icon-button-toggle>
       <mwc-icon-button
@@ -576,7 +595,9 @@ export class CommunicationMappingEditor extends LitElement {
     return html` ${this.renderInfoBox()}
       <div id="container">
         <style>
-          ${this.showLabel ? nothing : `.label:not(.ied) {display: none} `}
+          ${this.showLabel
+            ? nothing
+            : `.label:not(.ied):not(.linked) {display: none} `}
         </style>
         <svg
           xmlns="${svgNs}"
@@ -595,7 +616,10 @@ export class CommunicationMappingEditor extends LitElement {
             this.mouseY2 = Math.round(y * 2) / 2;
           }}
         >
-          ${sldSvg(this.substation, this.gridSize)}
+          ${sldSvg(this.substation, {
+            gridSize: this.gridSize,
+            linkedEquipments: this.linkedEquipments,
+          })}
           ${this.ieds.map(ied => this.renderIED(ied))}
           ${this.ieds.map(ied => this.renderLabel(ied.element))}
           ${placingLabelTarget} ${iedPlacingTarget}
@@ -613,7 +637,7 @@ export class CommunicationMappingEditor extends LitElement {
       background-color: white;
     }
 
-    g.equipment {
+    g.equipment:not(.linked) {
       opacity: 0.2;
     }
 
@@ -625,7 +649,7 @@ export class CommunicationMappingEditor extends LitElement {
       opacity: 0.2;
     }
 
-    g.label:not(.ied) {
+    g.label:not(.ied):not(.linked) {
       opacity: 0.2;
     }
 
@@ -681,5 +705,10 @@ export class CommunicationMappingEditor extends LitElement {
       bottom: 15px;
       right: 15px;
     }
+
+    .linked > rect {
+      fill: black;
+      opacity: 0.1;
+    }
   `;
 }

foundation/sldSvg.ts

@@ -18,6 +18,7 @@ import {
   ringedEqTypes,
   robotoDataURL,
   sldNs,
+  SldSvgOptions,
   svgNs,
   xlinkNs,
   xmlBoolean,
@@ -43,7 +44,7 @@ function renderedLabelPosition(element: Element): Point {
   return [x, y];
 }
 
-function renderLabel(element: Element) {
+function renderLabel(element: Element, linkedEquipments: Element[]) {
   const deg = 0;
   const text: string | null | TemplateResult<2>[] =
     element.getAttribute('name');
@@ -64,6 +65,7 @@ function renderLabel(element: Element) {
       element.tagName === 'VoltageLevel',
     ied: element.tagName === 'IED',
     equipment: element.tagName === 'ConductingEquipment',
+    linked: linkedEquipments.includes(element),
   });
   return svg`<g class="${classes}" id="label:${id}"
                  transform="rotate(${deg} ${x + 0.5} ${y - 0.5})">
@@ -432,7 +434,7 @@ function renderConnectivityNode(cNode: Element) {
       </g>`;
 }
 
-function renderEquipment(equipment: Element) {
+function renderEquipment(equipment: Element, linkedEquipments: Element[]) {
   const [x, y] = renderedPosition(equipment);
   const { flip, rot } = attributes(equipment);
   const deg = 90 * rot;
@@ -469,7 +471,10 @@ function renderEquipment(equipment: Element) {
                 stroke-width="0.06" marker-start="url(#grounded)" />`
       : nothing;
 
-  return svg`<g class="${classMap({ equipment: true })}"
+  return svg`<g class="${classMap({
+    equipment: true,
+    linked: linkedEquipments.includes(equipment),
+  })}"
     id="${identity(equipment)}"
     transform="translate(${x} ${y}) rotate(${deg} 0.5 0.5)${
     flip ? ' scale(-1,1) translate(-1 0)' : ''
@@ -488,7 +493,10 @@ function renderEquipment(equipment: Element) {
     </g>`;
 }
 
-function renderContainer(bayOrVL: Element): TemplateResult<2> {
+function renderContainer(
+  bayOrVL: Element,
+  selectedElements: Element[]
+): TemplateResult<2> {
   const isVL = bayOrVL.tagName === 'VoltageLevel';
 
   const [x, y] = renderedPosition(bayOrVL);
@@ -506,18 +514,21 @@ function renderContainer(bayOrVL: Element): TemplateResult<2> {
         stroke="${isVL ? '#2aa198' : '#6c71c4'}" />
       ${Array.from(bayOrVL.children)
         .filter(isBay)
-        .map(bay => renderContainer(bay))}
+        .map(bay => renderContainer(bay, selectedElements))}
       ${Array.from(bayOrVL.children)
         .filter(child => child.tagName === 'ConductingEquipment')
-        .map(equipment => renderEquipment(equipment))}
+        .map(equipment => renderEquipment(equipment, selectedElements))}
       ${Array.from(bayOrVL.children)
         .filter(child => child.tagName === 'PowerTransformer')
         .map(equipment => renderPowerTransformer(equipment))}
       </g>`;
 }
 
-export function sldSvg(substation: Element, gridSize?: number): TemplateResult {
-  const nested = !gridSize;
+export function sldSvg(
+  substation: Element,
+  options: SldSvgOptions
+): TemplateResult {
+  const nested = !options.gridSize;
 
   const {
     dim: [w, h],
@@ -527,8 +538,8 @@ export function sldSvg(substation: Element, gridSize?: number): TemplateResult {
     xmlns="${svgNs}"
     xmlns:xlink="${xlinkNs}"
     ${nested ? nothing : `viewBox = '0 0 ${w} ${h}'`}
-    ${nested ? nothing : `width="${w * gridSize}"`}
-    ${nested ? nothing : `height="${h * gridSize}"`}
+    ${nested ? nothing : `width="${w * options.gridSize!}"`}
+    ${nested ? nothing : `height="${h * options.gridSize!}"`}
     id="sld"
     stroke-width="0.06"
     fill="none"
@@ -545,7 +556,7 @@ export function sldSvg(substation: Element, gridSize?: number): TemplateResult {
     <rect width="100%" height="100%" fill="white" />
     ${Array.from(substation.children)
       .filter(child => child.tagName === 'VoltageLevel')
-      .map(vl => svg`${renderContainer(vl)}`)}
+      .map(vl => svg`${renderContainer(vl, options.linkedEquipments)}`)}
     ${Array.from(substation.querySelectorAll('ConnectivityNode'))
       .filter(
         node =>
@@ -567,6 +578,6 @@ export function sldSvg(substation: Element, gridSize?: number): TemplateResult {
       substation.querySelectorAll(
         'VoltageLevel, Bay, ConductingEquipment, PowerTransformer, Line'
       )
-    ).map(element => renderLabel(element))}
+    ).map(element => renderLabel(element, options.linkedEquipments))}
   </svg>`;
 }

foundation/sldUtil.ts

@@ -4,7 +4,7 @@ import { sendKeys, sendMouse, setViewport } from '@web/test-runner-commands';
 
 import { visualDiff } from '@web/test-runner-visual-regression';
 
-import { commScd, scd, ssd } from './testfiles.js';
+import { commScd, lNodeConn, scd, ssd } from './testfiles.js';
 
 import SlcCommunicationEditor from './scl-communication-editor.js';
 
@@ -21,6 +21,7 @@ customElements.define('scl-communication-editor', SlcCommunicationEditor);
 const pureSSD = new DOMParser().parseFromString(ssd, 'application/xml');
 const docWithIED = new DOMParser().parseFromString(scd, 'application/xml');
 const docComm = new DOMParser().parseFromString(commScd, 'application/xml');
+const docLNode = new DOMParser().parseFromString(lNodeConn, 'application/xml');
 
 function wheel(editor: SlcCommunicationEditor, type: 'in' | 'out'): void {
   const wheelEvent = new WheelEvent('wheel', {
@@ -397,68 +398,106 @@ describe('scl-communication-editor', () => {
 
   describe('with selected IED', () => {
     let editor: SlcCommunicationEditor;
-    beforeEach(async () => {
-      editor = await fixture(
-        html`<scl-communication-editor
-          .doc=${docComm}
-        ></scl-communication-editor>`
-      );
-      div.prepend(editor);
 
-      await setViewport({ width: 1200, height: 800 });
+    describe('in a zero line view', () => {
+      beforeEach(async () => {
+        editor = await fixture(
+          html`<scl-communication-editor
+            .doc=${docComm}
+          ></scl-communication-editor>`
+        );
+        div.prepend(editor);
 
-      await sendMouse({ type: 'click', position: [172, 220] });
-    });
+        await setViewport({ width: 1200, height: 800 });
 
-    afterEach(async () => {
-      editor.remove();
-    });
+        await sendMouse({ type: 'click', position: [172, 220] });
+      });
 
-    it('per default looks like the latest snapshot', async () => {
-      await editor.updateComplete;
-      await timeout(200);
-      await visualDiff(editor, `#19 filter on IED select`);
-    });
+      afterEach(async () => {
+        editor.remove();
+      });
 
-    it('with filtered receiving messages looks like the latest snapshot', async () => {
-      await editor.updateComplete;
+      it('per default looks like the latest snapshot', async () => {
+        await editor.updateComplete;
+        await timeout(200);
+        await visualDiff(editor, `#19 filter on IED select`);
+      });
 
-      await sendMouse({ type: 'click', position: [577, 24] });
+      it('with filtered receiving messages looks like the latest snapshot', async () => {
+        await editor.updateComplete;
 
-      await timeout(200);
+        await sendMouse({ type: 'click', position: [577, 24] });
 
-      await visualDiff(editor, `#20 filter receiving messages`);
-    });
+        await timeout(200);
 
-    it('with filtered sending messages looks like the latest snapshot', async () => {
-      await editor.updateComplete;
+        await visualDiff(editor, `#20 filter receiving messages`);
+      });
+
+      it('with filtered sending messages looks like the latest snapshot', async () => {
+        await editor.updateComplete;
 
-      await sendMouse({ type: 'click', position: [638, 24] });
+        await sendMouse({ type: 'click', position: [638, 24] });
 
-      await timeout(200);
+        await timeout(200);
 
-      await visualDiff(editor, `#20 filter sending messages`);
-    });
+        await visualDiff(editor, `#20 filter sending messages`);
+      });
 
-    it('with filtered sending and receiving messages looks like the latest snapshot', async () => {
-      await editor.updateComplete;
+      it('with filtered sending and receiving messages looks like the latest snapshot', async () => {
+        await editor.updateComplete;
 
-      await sendMouse({ type: 'click', position: [577, 24] });
-      await sendMouse({ type: 'click', position: [638, 24] });
+        await sendMouse({ type: 'click', position: [577, 24] });
+        await sendMouse({ type: 'click', position: [638, 24] });
 
-      await timeout(200);
+        await timeout(200);
+
+        await visualDiff(editor, `#21 filter sending and receiving messages`);
+      });
+
+      it('with IEd unselcted looks like the latest snapshot', async () => {
+        await editor.updateComplete;
+
+        await sendMouse({ type: 'click', position: [172, 220] });
+
+        await timeout(200);
 
-      await visualDiff(editor, `#21 filter sending and receiving messages`);
+        await visualDiff(editor, `#22 un done IED selection`);
+      });
     });
 
-    it('with IEd unselcted looks like the latest snapshot', async () => {
-      await editor.updateComplete;
+    describe('in a SLD view', () => {
+      beforeEach(async () => {
+        editor = await fixture(
+          html`<scl-communication-editor
+            .doc=${docLNode}
+          ></scl-communication-editor>`
+        );
+        div.prepend(editor);
+
+        await setViewport({ width: 600, height: 800 });
+      });
 
-      await sendMouse({ type: 'click', position: [172, 220] });
+      afterEach(async () => {
+        editor.remove();
+      });
 
-      await timeout(200);
+      it('and BCU selected selected looks like the latest snapshot', async () => {
+        await editor.updateComplete;
+
+        await sendMouse({ type: 'click', position: [270, 175] });
+
+        await timeout(200);
+        await visualDiff(editor, `#31 BCU selected`);
+      });
 
-      await visualDiff(editor, `#22 un done IED selection`);
+      it('and MU selected selected looks like the latest snapshot', async () => {
+        await editor.updateComplete;
+
+        await sendMouse({ type: 'click', position: [270, 368] });
+
+        await timeout(200);
+        await visualDiff(editor, `#32 MU selected`);
+      });
     });
   });