feat(editor/ied): Filter for logical nodes (openscd#990)

* First version of new filters in IED Editor.
* First working version of LN Classes filter with new filter button component.
* Updated some of test cases.
* Fixed some IED Editor tests.
* Updated test cases for IED Editor
* Added test for component.
* Fixed test for component.
* Reverted modification, not needed anymore
* Fixed review comments.
* Adding Filtering on LDevices without LN Classes.
* Fixed test.

Author: Dennis Labordus

src/editors/IED.ts

@@ -3,39 +3,29 @@ import {
   html,
   LitElement,
   property,
+  PropertyValues,
   state,
   TemplateResult,
 } from 'lit-element';
+import { translate } from 'lit-translate';
+import { nothing } from 'lit-html';
+
+import '@material/mwc-list/mwc-check-list-item';
+import '@material/mwc-list/mwc-radio-list-item';
 
-import '@material/mwc-fab';
-import '@material/mwc-select';
-import '@material/mwc-list/mwc-list-item';
+import '../oscd-filter-button.js';
+import { SelectedItemsChangedEvent } from '../oscd-filter-button.js';
 
 import './ied/ied-container.js';
 import './ied/element-path.js';
 
-import { translate } from 'lit-translate';
-import { SingleSelectedEvent } from '@material/mwc-list/mwc-list-foundation';
 import {
   compareNames,
   getDescriptionAttribute,
   getNameAttribute,
 } from '../foundation.js';
 import { Nsdoc } from '../foundation/nsdoc.js';
-
-/*
- * We need a variable outside the plugin to save the selected IED, because the Plugin is created
- * more than once during working with the IED Editor, for instance when opening a Wizard to edit the IED.
- */
-let iedEditorSelectedIed: Element | undefined;
-/*
- * We will also add an Event Listener when a new document is opened. We then want to reset the selection
- * so setting it to undefined will set the selected IED again on the first in the list.
- */
-function onOpenDocResetSelectedIed() {
-  iedEditorSelectedIed = undefined;
-}
-addEventListener('open-doc', onOpenDocResetSelectedIed);
+import { getIcon } from '../icons/icons.js';
 
 /** An editor [[`plugin`]] for editing the `IED` section. */
 export default class IedPlugin extends LitElement {
@@ -47,7 +37,14 @@ export default class IedPlugin extends LitElement {
   @property()
   nsdoc!: Nsdoc;
 
-  private get alphabeticOrderedIeds(): Element[] {
+  @state()
+  selectedIEDs: string[] = [];
+
+  @state()
+  selectedLNClasses: string[] = [];
+
+  @state()
+  private get iedList(): Element[] {
     return this.doc
       ? Array.from(this.doc.querySelectorAll(':root > IED')).sort((a, b) =>
           compareNames(a, b)
@@ -56,60 +53,131 @@ export default class IedPlugin extends LitElement {
   }
 
   @state()
-  private set selectedIed(element: Element | undefined) {
-    iedEditorSelectedIed = element;
+  private get lnClassList(): string[][] {
+    const currentIed = this.selectedIed;
+    const uniqueLNClassList: string[] = [];
+    if (currentIed) {
+      return Array.from(currentIed.querySelectorAll('LN0, LN'))
+        .filter(element => element.hasAttribute('lnClass'))
+        .filter(element => {
+          const lnClass = element.getAttribute('lnClass') ?? '';
+          if (uniqueLNClassList.includes(lnClass)) {
+            return false;
+          }
+          uniqueLNClassList.push(lnClass);
+          return true;
+        })
+        .map(element => {
+          const lnClass = element.getAttribute('lnClass');
+          const label = this.nsdoc.getDataDescription(element).label;
+          return [lnClass, label];
+        }) as string[][];
+    }
+    return [];
   }
 
+  @state()
   private get selectedIed(): Element | undefined {
     // When there is no IED selected, or the selected IED has no parent (IED has been removed)
     // select the first IED from the List.
-    if (
-      iedEditorSelectedIed === undefined ||
-      iedEditorSelectedIed.parentElement === null
-    ) {
-      const iedList = this.alphabeticOrderedIeds;
-      if (iedList.length > 0) {
-        iedEditorSelectedIed = iedList[0];
-      }
+    if (this.selectedIEDs.length >= 1) {
+      const iedList = this.iedList;
+      return iedList.find(element => {
+        const iedName = getNameAttribute(element);
+        return this.selectedIEDs[0] === iedName;
+      });
     }
-    return iedEditorSelectedIed;
+    return undefined;
   }
 
-  private onSelect(event: SingleSelectedEvent): void {
-    this.selectedIed = this.alphabeticOrderedIeds[event.detail.index];
-    this.requestUpdate('selectedIed');
+  protected updated(_changedProperties: PropertyValues): void {
+    super.updated(_changedProperties);
+
+    // When the document is updated, we reset the selected IED.
+    if (_changedProperties.has('doc') || _changedProperties.has('nsdoc')) {
+      this.selectedIEDs = [];
+      this.selectedLNClasses = [];
+
+      const iedList = this.iedList;
+      if (iedList.length > 0) {
+        const iedName = getNameAttribute(iedList[0]);
+        if (iedName) {
+          this.selectedIEDs = [iedName];
+        }
+      }
+      this.selectedLNClasses = this.lnClassList.map(
+        lnClassInfo => lnClassInfo[0]
+      );
+    }
   }
 
   render(): TemplateResult {
-    const iedList = this.alphabeticOrderedIeds;
+    const iedList = this.iedList;
     if (iedList.length > 0) {
       return html`<section>
         <div class="header">
-          <mwc-select
-            class="iedSelect"
-            label="${translate('iededitor.searchHelper')}"
-            @selected=${this.onSelect}
+          <h1>${translate('filters')}:</h1>
+
+          <oscd-filter-button
+            id="iedFilter"
+            icon="developer_board"
+            .header=${translate('iededitor.iedSelector')}
+            @selected-items-changed="${(e: SelectedItemsChangedEvent) => {
+              this.selectedIEDs = e.detail.selectedItems;
+              this.selectedLNClasses = this.lnClassList.map(
+                lnClassInfo => lnClassInfo[0]
+              );
+              this.requestUpdate('selectedIed');
+            }}"
           >
             ${iedList.map(ied => {
               const name = getNameAttribute(ied);
               const descr = getDescriptionAttribute(ied);
-              return html` <mwc-list-item
-                ?selected=${ied == this.selectedIed}
+              const type = ied.getAttribute('type');
+              const manufacturer = ied.getAttribute('manufacturer');
+              return html` <mwc-radio-list-item
                 value="${name}"
-                >${name}
-                ${descr
-                  ? translate('iededitor.searchHelperDesc', {
-                      description: descr,
-                    })
-                  : ''}
-              </mwc-list-item>`;
+                ?twoline="${type && manufacturer}"
+                ?selected="${this.selectedIEDs.includes(name ?? '')}"
+              >
+                ${name} ${descr ? html` (${descr})` : html``}
+                <span slot="secondary">
+                  ${type} ${type && manufacturer ? html`&mdash;` : nothing}
+                  ${manufacturer}
+                </span>
+              </mwc-radio-list-item>`;
+            })}
+          </oscd-filter-button>
+
+          <oscd-filter-button
+            id="lnClassesFilter"
+            multi="true"
+            .header="${translate('iededitor.lnFilter')}"
+            @selected-items-changed="${(e: SelectedItemsChangedEvent) => {
+              this.selectedLNClasses = e.detail.selectedItems;
+              this.requestUpdate('selectedIed');
+            }}"
+          >
+            <span slot="icon">${getIcon('lNIcon')}</span>
+            ${this.lnClassList.map(lnClassInfo => {
+              const value = lnClassInfo[0];
+              const label = lnClassInfo[1];
+              return html`<mwc-check-list-item
+                value="${value}"
+                ?selected="${this.selectedLNClasses.includes(value)}"
+              >
+                ${label}
+              </mwc-check-list-item>`;
             })}
-          </mwc-select>
+          </oscd-filter-button>
+
           <element-path class="elementPath"></element-path>
         </div>
+
         <ied-container
           .doc=${this.doc}
           .element=${this.selectedIed}
+          .selectedLNClasses=${this.selectedLNClasses}
           .nsdoc=${this.nsdoc}
         ></ied-container>
       </section>`;
@@ -128,20 +196,10 @@ export default class IedPlugin extends LitElement {
       padding: 8px 12px 16px;
     }
 
-    .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;
@@ -153,5 +211,10 @@ export default class IedPlugin extends LitElement {
       line-height: 48px;
       padding-left: 0.3em;
     }
+
+    .elementPath {
+      margin-left: auto;
+      padding-right: 12px;
+    }
   `;
 }

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

@@ -1,4 +1,12 @@
-import { css, customElement, html, TemplateResult } from 'lit-element';
+import {
+  css,
+  customElement,
+  html,
+  property,
+  PropertyValues,
+  state,
+  TemplateResult,
+} from 'lit-element';
 import { nothing } from 'lit-html';
 
 import { getDescriptionAttribute, getNameAttribute } from '../../foundation.js';
@@ -12,14 +20,38 @@ import { Container } from './foundation.js';
 /** [[`IED`]] plugin subeditor for editing `AccessPoint` element. */
 @customElement('access-point-container')
 export class AccessPointContainer extends Container {
+  @property()
+  selectedLNClasses: string[] = [];
+
   private header(): TemplateResult {
     const name = getNameAttribute(this.element);
     const desc = getDescriptionAttribute(this.element);
 
     return html`${name}${desc ? html` — ${desc}` : nothing}`;
   }
 
+  protected updated(_changedProperties: PropertyValues): void {
+    super.updated(_changedProperties);
+
+    // When the LN Classes filter is updated, we also want to trigger rendering for the LN Elements.
+    if (_changedProperties.has('selectedLNClasses')) {
+      this.requestUpdate('lnElements');
+    }
+  }
+
+  @state()
+  private get lnElements(): Element[] {
+    return Array.from(this.element.querySelectorAll(':scope > LN')).filter(
+      element => {
+        const lnClass = element.getAttribute('lnClass') ?? '';
+        return this.selectedLNClasses.includes(lnClass);
+      }
+    );
+  }
+
   render(): TemplateResult {
+    const lnElements = this.lnElements;
+
     return html`<action-pane .label="${this.header()}">
       <mwc-icon slot="icon">${accessPointIcon}</mwc-icon>
       ${Array.from(this.element.querySelectorAll(':scope > Server')).map(
@@ -28,11 +60,35 @@ export class AccessPointContainer extends Container {
             .doc=${this.doc}
             .element=${server}
             .nsdoc=${this.nsdoc}
+            .selectedLNClasses=${this.selectedLNClasses}
             .ancestors=${[...this.ancestors, this.element]}
           ></server-container>`
       )}
+      <div id="lnContainer">
+        ${lnElements.map(
+          ln => html`<ln-container
+            .doc=${this.doc}
+            .element=${ln}
+            .nsdoc=${this.nsdoc}
+            .ancestors=${[...this.ancestors, this.element]}
+          ></ln-container> `
+        )}
+      </div>
     </action-pane>`;
   }
 
-  static styles = css``;
+  static styles = css`
+    #lnContainer {
+      display: grid;
+      grid-gap: 12px;
+      box-sizing: border-box;
+      grid-template-columns: repeat(auto-fit, minmax(316px, auto));
+    }
+
+    @media (max-width: 387px) {
+      #lnContainer {
+        grid-template-columns: repeat(auto-fit, minmax(196px, auto));
+      }
+    }
+  `;
 }

src/editors/ied/ied-container.ts

@@ -1,4 +1,10 @@
-import { css, customElement, html, TemplateResult } from 'lit-element';
+import {
+  css,
+  customElement,
+  html,
+  property,
+  TemplateResult,
+} from 'lit-element';
 import { nothing } from 'lit-html';
 import { translate } from 'lit-translate';
 
@@ -18,6 +24,9 @@ import { removeIEDWizard } from '../../wizards/ied.js';
 /** [[`IED`]] plugin subeditor for editing `IED` element. */
 @customElement('ied-container')
 export class IedContainer extends Container {
+  @property()
+  selectedLNClasses: string[] = [];
+
   private openEditWizard(): void {
     const wizard = wizards['IED'].edit(this.element);
     if (wizard) this.dispatchEvent(newWizardEvent(wizard));
@@ -64,6 +73,7 @@ export class IedContainer extends Container {
           .doc=${this.doc}
           .element=${ap}
           .nsdoc=${this.nsdoc}
+          .selectedLNClasses=${this.selectedLNClasses}
           .ancestors=${[this.element]}
         ></access-point-container>`
       )}