feat(editor/ied): Show the technical path to a DO/DA

Author: Rob Tjalma

src/editors/IED.ts

@@ -5,6 +5,7 @@ import '@material/mwc-select';
 import '@material/mwc-list/mwc-list-item';
 
 import './ied/ied-container.js'
+import './ied/element-path.js'
 import './substation/zeroline-pane.js';
 
 import { translate } from 'lit-translate';
@@ -70,22 +71,25 @@ export default class IedPlugin extends LitElement {
     if (iedList.length > 0) {
       return html `
         <section>
-          <mwc-select
-            id="iedSelect"
-            label="${translate("iededitor.searchHelper")}"
-            @selected=${this.onSelect}>
-            ${iedList.map(
-              ied =>
-                html`
-                  <mwc-list-item
-                    ?selected=${ied == this.selectedIed}
-                    value="${getNameAttribute(ied)}"
-                  >${getNameAttribute(ied)} ${ied.hasAttribute('desc') ? translate('iededitor.searchHelperDesc', {
-                    description: getDescriptionAttribute(ied)!,
-                  }) : ''}
-                  </mwc-list-item>`
-            )}
-          </mwc-select>
+          <div class="header">
+            <mwc-select
+              class="iedSelect"
+              label="${translate("iededitor.searchHelper")}"
+              @selected=${this.onSelect}>
+              ${iedList.map(
+                ied =>
+                  html`
+                    <mwc-list-item
+                      ?selected=${ied == this.selectedIed}
+                      value="${getNameAttribute(ied)}"
+                    >${getNameAttribute(ied)} ${ied.hasAttribute('desc') ? translate('iededitor.searchHelperDesc', {
+                      description: getDescriptionAttribute(ied)!,
+                    }) : ''}
+                    </mwc-list-item>`
+              )}
+            </mwc-select>
+            <element-path class="elementPath"></element-path>
+          </div>
           <ied-container
             .element=${this.selectedIed}
             .nsdoc=${this.nsdoc}
@@ -107,11 +111,20 @@ export default class IedPlugin extends LitElement {
       padding: 8px 12px 16px;
     }
 
-    #iedSelect {
+    .iedSelect {
       width: 35vw;
       padding-bottom: 20px;
     }
 
+    .header {
+      display: flex;
+    }
+
+    .elementPath {
+      margin-left: auto;
+      padding-right: 12px;
+    }
+
     h1 {
       color: var(--mdc-theme-on-surface);
       font-family: 'Roboto', sans-serif;

src/editors/ied/access-point-container.ts

@@ -2,7 +2,6 @@ import {
   css,
   customElement,
   html,
-  LitElement,
   property,
   TemplateResult,
 } from 'lit-element';
@@ -13,16 +12,11 @@ import { nothing } from 'lit-html';
 import { getDescriptionAttribute, getNameAttribute } from '../../foundation.js';
 import { Nsdoc } from '../../foundation/nsdoc.js';
 import { accessPointIcon } from '../../icons/ied-icons.js';
+import { Container } from './foundation.js';
 
 /** [[`IED`]] plugin subeditor for editing `AccessPoint` element. */
 @customElement('access-point-container')
-export class AccessPointContainer extends LitElement {
-  @property({ attribute: false })
-  element!: Element;
-
-  @property()
-  ancestors: Element[] = [];
-
+export class AccessPointContainer extends Container {
   @property()
   nsdoc!: Nsdoc;
 
@@ -40,7 +34,7 @@ export class AccessPointContainer extends LitElement {
         html`<server-container
           .element=${server}
           .nsdoc=${this.nsdoc}
-          .ancestors=${[this.element, ...this.ancestors]}
+          .ancestors=${[...this.ancestors, this.element]}
         ></server-container>`)}
     </action-pane>`;
   }

src/editors/ied/da-container.ts

@@ -2,7 +2,6 @@ import {
   css,
   customElement,
   html,
-  LitElement,
   property,
   query,
   TemplateResult,
@@ -19,26 +18,17 @@ import { Nsdoc } from '../../foundation/nsdoc.js';
 import { wizards } from '../../wizards/wizard-library.js';
 import { DaiValidationTypes, getCustomField } from './foundation/foundation.js';
 import { createDaInfoWizard } from "./da-wizard.js";
-import { getInstanceDAElement, getValueElement } from './foundation.js';
+import { Container, getInstanceDAElement, getValueElement } from './foundation.js';
 
 /** [[`IED`]] plugin subeditor for editing `(B)DA` element. */
 @customElement('da-container')
-export class DAContainer extends LitElement {
-  /**
-   * The (B)DA itself.
-   */
-  @property({ attribute: false })
-  element!: Element;
-
+export class DAContainer extends Container {
   /**
    * The optional DAI of this (B)DA.
    */
   @property({ attribute: false })
   instanceElement!: Element;
 
-  @property()
-  ancestors: Element[] = [];
-
   @property()
   nsdoc!: Nsdoc;
 
@@ -127,7 +117,7 @@ export class DAContainer extends LitElement {
           .element=${bdaElement}
           .instanceElement=${getInstanceDAElement(this.instanceElement, bdaElement)}
           .nsdoc=${this.nsdoc}
-          .ancestors=${[this.element, ...this.ancestors]}
+          .ancestors=${[...this.ancestors, this.element]}
         ></da-container>`) : nothing}
     </action-pane>
     `;

src/editors/ied/do-container.ts

@@ -1,7 +1,6 @@
 import {
   customElement,
   html,
-  LitElement,
   property,
   query,
   TemplateResult,
@@ -17,26 +16,17 @@ import { getDescriptionAttribute, getNameAttribute, newWizardEvent } from '../..
 import { translate } from 'lit-translate';
 import { Nsdoc } from '../../foundation/nsdoc.js';
 import { createDoInfoWizard } from "./do-wizard.js";
-import { findDOTypeElement, getInstanceDAElement } from "./foundation.js";
+import { Container, findDOTypeElement, getInstanceDAElement } from "./foundation.js";
 
 /** [[`IED`]] plugin subeditor for editing `DO` element. */
 @customElement('do-container')
-export class DOContainer extends LitElement {
-  /**
-   * The DO itself.
-   */
-  @property({ attribute: false })
-  element!: Element;
-
+export class DOContainer extends Container {
   /**
    * The optional DOI of this DO.
    */
   @property({ attribute: false })
   instanceElement!: Element;
 
-  @property()
-  ancestors: Element[] = [];
-
   @property()
   nsdoc!: Nsdoc;
 
@@ -118,14 +108,14 @@ export class DOContainer extends LitElement {
           .element=${daElement}
           .instanceElement=${getInstanceDAElement(this.instanceElement, daElement)}
           .nsdoc=${this.nsdoc}
-          .ancestors=${[this.element, ...this.ancestors]}
+          .ancestors=${[...this.ancestors, this.element]}
         ></da-container>`) : nothing}
       ${this.toggleButton?.on ? doElements.map(doElement =>
         html`<do-container
           .element=${doElement}
           .instanceElement=${this.getInstanceDOElement(doElement)}
           .nsdoc=${this.nsdoc}
-          .ancestors=${[this.element, ...this.ancestors]}
+          .ancestors=${[...this.ancestors, this.element]}
         ></do-container>`) : nothing}
     </action-pane>
     `;

src/editors/ied/element-path.ts

@@ -0,0 +1,47 @@
+import {
+  css,
+  customElement,
+  html,
+  LitElement,
+  state,
+  TemplateResult,
+} from 'lit-element';
+import { FullElementPathEvent } from './foundation.js';
+
+@customElement('element-path')
+export class ElementPath extends LitElement {
+
+  @state()
+  elementNames: string[] = [];
+
+  constructor() {
+    super();
+
+    const parentSection = this.closest('section');
+    if (parentSection) {
+      parentSection.addEventListener('full-element-path', (event: FullElementPathEvent) => {
+        this.elementNames = event.detail.elementNames;
+      });
+    }
+  }
+
+  render(): TemplateResult {
+    return html`
+      <h3>${this.elementNames.join(' / ')}</h3>
+    `;
+  }
+
+  static styles = css`
+    h3 {
+      color: var(--mdc-theme-on-surface);
+      font-family: 'Roboto', sans-serif;
+      font-weight: 300;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin: 0px;
+      line-height: 48px;
+      padding-left: 0.3em;
+      transition: background-color 150ms linear;
+    }`;
+}

src/editors/ied/foundation.ts

@@ -1,4 +1,38 @@
-import { getNameAttribute } from "../../foundation.js";
+import { LitElement, property } from "lit-element";
+import { getInstanceAttribute, getNameAttribute } from "../../foundation.js";
+
+/** Base class for all containers inside the IED Editor. */
+export class Container extends LitElement {
+  @property({ attribute: false })
+  element!: Element;
+
+  @property()
+  ancestors: Element[] = [];
+
+  constructor() {
+    super();
+
+    this.addEventListener('focus', (event) => {
+      event.stopPropagation();
+      const pathOfAncestorNames = this.ancestors.map(ancestor => getTitleForElementPath(ancestor)!);
+      pathOfAncestorNames.push(getTitleForElementPath(this.element)!);
+
+      this.dispatchEvent(
+        newFullElementPathEvent(
+          pathOfAncestorNames
+        )
+      );
+    });
+
+    this.addEventListener('blur', () => {
+      this.dispatchEvent(
+        newFullElementPathEvent(
+          this.ancestors.map(ancestor => getTitleForElementPath(ancestor)!)
+        )
+      );
+    });
+  }
+}
 
 /**
  * Search for an element with a passed tag-name in the list of ancestors passed.
@@ -55,6 +89,24 @@ export function getInstanceDAElement(parentInstance: Element | null, da: Element
   return null;
 }
 
+export function getTitleForElementPath(element: Element): string {
+  switch (element.tagName) {
+    case 'LN':
+    case 'LN0': {
+      return element.getAttribute('lnClass')!;
+    }
+    case 'LDevice': {
+      return (getNameAttribute(element) ?? getInstanceAttribute(element))!
+    }
+    case 'Server': {
+      return 'Server';
+    }
+    default: {
+      return element.getAttribute('name')!;
+    }
+  }
+}
+
 /**
  * Get the 'Val' element of another element.
  * @param element - The element to search for an 'Val' element.
@@ -63,3 +115,25 @@ export function getInstanceDAElement(parentInstance: Element | null, da: Element
 export function getValueElement(element: Element): Element | null {
   return element.querySelector('Val');
 }
+
+export interface FullElementPathDetail {
+  elementNames: string[];
+}
+export type FullElementPathEvent = CustomEvent<FullElementPathDetail>;
+export function newFullElementPathEvent(
+  elementNames: string[],
+  eventInitDict?: CustomEventInit<FullElementPathDetail>
+): FullElementPathEvent {
+  return new CustomEvent<FullElementPathDetail>('full-element-path', {
+    bubbles: true,
+    composed: true,
+    ...eventInitDict,
+    detail: { elementNames, ...eventInitDict?.detail },
+  });
+}
+
+declare global {
+  interface ElementEventMap {
+    ['full-element-path']: FullElementPathEvent;
+  }
+}

src/editors/ied/ied-container.ts

@@ -2,7 +2,6 @@ import {
   css,
   customElement,
   html,
-  LitElement,
   property,
   TemplateResult,
 } from 'lit-element';
@@ -14,6 +13,7 @@ import './access-point-container.js';
 
 import { wizards } from "../../wizards/wizard-library.js";
 import { Nsdoc } from '../../foundation/nsdoc.js';
+import { Container } from './foundation.js';
 import {
   getDescriptionAttribute,
   getNameAttribute,
@@ -23,11 +23,7 @@ import { removeIEDWizard } from "../../wizards/ied.js";
 
 /** [[`IED`]] plugin subeditor for editing `IED` element. */
 @customElement('ied-container')
-export class IedContainer extends LitElement {
-  /** The edited `Element`, a common property of all IED subcontainers. */
-  @property({ attribute: false })
-  element!: Element;
-
+export class IedContainer extends Container {
   @property()
   nsdoc!: Nsdoc;