From 3d7b2ef5c4950d2341973bac70ae4a658a00f859 Mon Sep 17 00:00:00 2001
From: Jakob Vogelsang <jakob-vogelsang@posteo.de>
Date: Fri, 29 Apr 2022 08:38:15 +0200
Subject: [PATCH] feat(substation): read only Function and SubFunction
 container (#700)

* feat(zeroline): add showfunctions toggle button

* feat(zeroline): write toggle buttons state to localhost

* feat(zeroline/function-editor): add function-editor web-component

* feat(zeroline): add function-editor to zeroline

* refactor: linter format

* test(zeroline): add snapshot tests

* refactor(zeroline): pass showfunction though properties

* feat(zeroline): add read-only subfuction-editor (#706)
---
 src/translations/de.ts                        |  3 +-
 src/translations/en.ts                        |  3 +-
 src/zeroline-pane.ts                          | 25 +++++
 src/zeroline/bay-editor.ts                    | 24 +++--
 src/zeroline/foundation.ts                    | 21 ++--
 src/zeroline/function-editor.ts               | 46 +++++++++
 src/zeroline/subfunction-editor.ts            | 42 ++++++++
 src/zeroline/substation-editor.ts             | 38 ++++++-
 src/zeroline/voltage-level-editor.ts          | 41 ++++++--
 test/testfiles/zeroline/functions.scd         | 37 +++++++
 .../__snapshots__/zeroline-pane.test.snap.js  | 16 +++
 test/unit/zeroline-pane.test.ts               |  7 +-
 .../__snapshots__/bay-editor.test.snap.js     | 98 +++++++++++++++++++
 .../function-editor.test.snap.js              | 31 ++++++
 .../subfunction-editor.test.snap.js           | 27 +++++
 .../substation-editor.test.snap.js            | 94 ++++++++++++++++++
 .../voltage-level-editor.test.snap.js         | 97 ++++++++++++++++++
 test/unit/zeroline/bay-editor.test.ts         | 24 ++++-
 test/unit/zeroline/function-editor.test.ts    | 47 +++++++++
 test/unit/zeroline/subfunction-editor.test.ts | 47 +++++++++
 test/unit/zeroline/substation-editor.test.ts  | 22 ++++-
 .../zeroline/voltage-level-editor.test.ts     | 22 ++++-
 22 files changed, 771 insertions(+), 41 deletions(-)
 create mode 100644 src/zeroline/function-editor.ts
 create mode 100644 src/zeroline/subfunction-editor.ts
 create mode 100644 test/testfiles/zeroline/functions.scd
 create mode 100644 test/unit/zeroline/__snapshots__/function-editor.test.snap.js
 create mode 100644 test/unit/zeroline/__snapshots__/subfunction-editor.test.snap.js
 create mode 100644 test/unit/zeroline/function-editor.test.ts
 create mode 100644 test/unit/zeroline/subfunction-editor.test.ts

diff --git a/src/translations/de.ts b/src/translations/de.ts
index 17e3ad9517..74f1691fb0 100644
--- a/src/translations/de.ts
+++ b/src/translations/de.ts
@@ -97,6 +97,7 @@ export const de: Translations = {
   zeroline: {
     iedsloading: 'IEDs werden geladen...',
     showieds: 'IEDs im Substation-Editor anzeigen/ausblenden',
+    showfunctions: 'Funktionselemente in der Ansicht filtern',
     commmap: 'Kommunikationszuordnung',
     reportcontrol: 'Reports anzeigen',
     gsecontrol: 'GOOSEs anzeigen',
@@ -391,7 +392,7 @@ export const de: Translations = {
     },
     action: {
       updatedai: 'DAI "{{daiName}} bearbeitet"',
-    }
+    },
   },
   sdo: {
     wizard: {
diff --git a/src/translations/en.ts b/src/translations/en.ts
index 635d833149..f297a60e4d 100644
--- a/src/translations/en.ts
+++ b/src/translations/en.ts
@@ -95,6 +95,7 @@ export const en = {
   zeroline: {
     iedsloading: 'Loading IEDs...',
     showieds: 'Show/hide IEDs in substation editor',
+    showfunctions: 'Filter function type elements',
     commmap: 'Communication mapping',
     reportcontrol: 'Show all Reports',
     gsecontrol: 'Show all GOOSEs',
@@ -388,7 +389,7 @@ export const en = {
     },
     action: {
       updatedai: 'Edited DAI "{{daiName}}"',
-    }
+    },
   },
   sdo: {
     wizard: {
diff --git a/src/zeroline-pane.ts b/src/zeroline-pane.ts
index 32415d91b0..ccb823044a 100644
--- a/src/zeroline-pane.ts
+++ b/src/zeroline-pane.ts
@@ -34,6 +34,14 @@ function setShowIEDs(value: Settings['showieds']) {
   localStorage.setItem('showieds', value);
 }
 
+function shouldShowFunctions(): boolean {
+  return localStorage.getItem('showfunctions') === 'on';
+}
+
+function setShowFunctions(value: 'on' | 'off') {
+  localStorage.setItem('showfunctions', value);
+}
+
 /** [[`Zeroline`]] pane for displaying `Substation` and/or `IED` sections. */
 @customElement('zeroline-pane')
 export class ZerolinePane extends LitElement {
@@ -48,6 +56,7 @@ export class ZerolinePane extends LitElement {
 
   @query('#commmap') commmap!: IconButton;
   @query('#showieds') showieds!: IconButtonToggle;
+  @query('#showfunctions') showfunctions!: IconButtonToggle;
   @query('#gsecontrol') gsecontrol!: IconButton;
   @query('#smvcontrol') smvcontrol!: IconButton;
   @query('#reportcontrol') reportcontrol!: IconButton;
@@ -90,6 +99,12 @@ export class ZerolinePane extends LitElement {
     this.requestUpdate();
   }
 
+  toggleShowFunctions(): void {
+    if (shouldShowFunctions()) setShowFunctions('off');
+    else setShowFunctions('on');
+    this.requestUpdate();
+  }
+
   renderIedContainer(): TemplateResult {
     this.getAttachedIeds = shouldShowIEDs()
       ? getAttachedIeds(this.doc)
@@ -124,6 +139,15 @@ export class ZerolinePane extends LitElement {
               offIcon="developer_board_off"
             ></mwc-icon-button-toggle>
           </abbr>
+          <abbr title="${translate('zeroline.showfunctions')}">
+            <mwc-icon-button-toggle
+              ?on=${shouldShowFunctions()}
+              @click=${() => this.toggleShowFunctions()}
+              id="showfunctions"
+              onIcon="layers"
+              offIcon="layers_clear"
+            ></mwc-icon-button-toggle>
+          </abbr>
           <abbr title="${translate('zeroline.commmap')}">
             <mwc-icon-button
               id="commmap"
@@ -165,6 +189,7 @@ export class ZerolinePane extends LitElement {
                     .element=${substation}
                     .getAttachedIeds=${this.getAttachedIeds}
                     ?readonly=${this.readonly}
+                    ?showfunctions=${shouldShowFunctions()}
                   ></substation-editor>`
               )}
           </section>`
diff --git a/src/zeroline/bay-editor.ts b/src/zeroline/bay-editor.ts
index 4bc702a7e0..8f5c6f0955 100644
--- a/src/zeroline/bay-editor.ts
+++ b/src/zeroline/bay-editor.ts
@@ -27,11 +27,7 @@ import {
   tags,
 } from '../foundation.js';
 import { emptyWizard, wizards } from '../wizards/wizard-library.js';
-import {
-  cloneSubstationElement,
-  startMove,
-  styles,
-} from './foundation.js';
+import { cloneSubstationElement, startMove, styles } from './foundation.js';
 
 function childTags(element: Element | null | undefined): SCLTag[] {
   if (!element) return [];
@@ -48,6 +44,9 @@ export class BayEditor extends LitElement {
   element!: Element;
   @property({ type: Boolean })
   readonly = false;
+  /** Wheter `Function` and `SubFunction` are rendered */
+  @property({ type: Boolean })
+  showfunctions = false;
 
   @property({ type: String })
   get header(): string {
@@ -99,6 +98,15 @@ export class BayEditor extends LitElement {
     this.addMenu.anchor = <HTMLElement>this.addButton;
   }
 
+  renderFunctions(): TemplateResult {
+    if (!this.showfunctions) return html``;
+
+    const functions = getChildElementsByTagName(this.element, 'Function');
+    return html` ${functions.map(
+      fUnction => html`<function-editor .element=${fUnction}></function-editor>`
+    )}`;
+  }
+
   renderIedContainer(): TemplateResult {
     const ieds = this.getAttachedIeds?.(this.element) ?? [];
     return ieds?.length
@@ -168,13 +176,15 @@ export class BayEditor extends LitElement {
           >${this.renderAddButtons()}</mwc-menu
         >
       </abbr>
-      ${this.renderIedContainer()}
+      ${this.renderIedContainer()} ${this.renderFunctions()}
       <div id="ceContainer">
         ${Array.from(
           getChildElementsByTagName(this.element, 'PowerTransformer')
         ).map(
           pwt =>
-            html`<powertransformer-editor .element=${pwt}></powertransformer-editor>`
+            html`<powertransformer-editor
+              .element=${pwt}
+            ></powertransformer-editor>`
         )}
         ${Array.from(
           getChildElementsByTagName(this.element, 'ConductingEquipment')
diff --git a/src/zeroline/foundation.ts b/src/zeroline/foundation.ts
index 2040aad229..f846ecf7b3 100644
--- a/src/zeroline/foundation.ts
+++ b/src/zeroline/foundation.ts
@@ -1,5 +1,6 @@
 import { css, TemplateResult } from 'lit-element';
 
+import './function-editor.js';
 import { newActionEvent, isPublic } from '../foundation.js';
 import {
   circuitBreakerIcon,
@@ -156,12 +157,8 @@ export type ElementEditorClass<T extends ElementEditor> = new () => T;
 export function startMove<
   E extends ElementEditor,
   C extends ElementEditorClass<ElementEditor>,
-  P extends ElementEditorClass<ElementEditor>>
-(
-  editor: E,
-  childClass: C,
-  parentClasses: P[]
-): void {
+  P extends ElementEditorClass<ElementEditor>
+>(editor: E, childClass: C, parentClasses: P[]): void {
   if (!editor.element) return;
 
   editor.classList.add('moving');
@@ -184,8 +181,13 @@ export function startMove<
 
     if (e instanceof KeyboardEvent && e.key === 'Escape') return;
 
-    const targetEditor = e.composedPath()
-      .find(et => et instanceof childClass || checkInstanceOfParentClass(et, parentClasses));
+    const targetEditor = e
+      .composedPath()
+      .find(
+        et =>
+          et instanceof childClass ||
+          checkInstanceOfParentClass(et, parentClasses)
+      );
     if (targetEditor === undefined || targetEditor === editor) return;
 
     const destination =
@@ -227,7 +229,8 @@ export function startMove<
  */
 function checkInstanceOfParentClass<E extends ElementEditor>(
   et: EventTarget,
-  classes: ElementEditorClass<E>[]): boolean {
+  classes: ElementEditorClass<E>[]
+): boolean {
   const targetEditor = classes.find(clazz => et instanceof clazz);
   return targetEditor !== undefined;
 }
diff --git a/src/zeroline/function-editor.ts b/src/zeroline/function-editor.ts
new file mode 100644
index 0000000000..2ed81f255b
--- /dev/null
+++ b/src/zeroline/function-editor.ts
@@ -0,0 +1,46 @@
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  property,
+  customElement,
+  state,
+} from 'lit-element';
+
+import '../action-pane.js';
+import './subfunction-editor.js';
+import { getChildElementsByTagName } from '../foundation.js';
+
+/** Pane rendering `Function` element with its children */
+@customElement('function-editor')
+export class FunctionEditor extends LitElement {
+  /** The edited `Function` element */
+  @property({ attribute: false })
+  element!: Element;
+  @state()
+  get header(): string {
+    const name = this.element.getAttribute('name');
+    const desc = this.element.getAttribute('desc');
+    const type = this.element.getAttribute('type');
+
+    return `${name}${desc ? ` - ${desc}` : ''}${type ? ` (${type})` : ''}`;
+  }
+
+  renderSubFunctions(): TemplateResult {
+    const subfunctions = getChildElementsByTagName(this.element, 'SubFunction');
+    return html` ${subfunctions.map(
+      subFunction =>
+        html`<subfunction-editor .element=${subFunction}></subfunction-editor>`
+    )}`;
+  }
+
+  render(): TemplateResult {
+    return html`<action-pane
+      label="${this.header}"
+      icon="functions"
+      secondary
+      highlighted
+      >${this.renderSubFunctions()}</action-pane
+    >`;
+  }
+}
diff --git a/src/zeroline/subfunction-editor.ts b/src/zeroline/subfunction-editor.ts
new file mode 100644
index 0000000000..6e12ef7605
--- /dev/null
+++ b/src/zeroline/subfunction-editor.ts
@@ -0,0 +1,42 @@
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  property,
+  customElement,
+  state,
+} from 'lit-element';
+
+import '../action-pane.js';
+import './subfunction-editor.js';
+import { getChildElementsByTagName } from '../foundation.js';
+
+/** Pane rendering `SubFunction` element with its children */
+@customElement('subfunction-editor')
+export class SubFunctionEditor extends LitElement {
+  /** The edited `SubFunction` element */
+  @property({ attribute: false })
+  element!: Element;
+  @state()
+  get header(): string {
+    const name = this.element.getAttribute('name');
+    const desc = this.element.getAttribute('desc');
+    const type = this.element.getAttribute('type');
+
+    return `${name}${desc ? ` - ${desc}` : ''}${type ? ` (${type})` : ''}`;
+  }
+
+  renderSubFunctions(): TemplateResult {
+    const subfunctions = getChildElementsByTagName(this.element, 'SubFunction');
+    return html` ${subfunctions.map(
+      subFunction =>
+        html`<subfunction-editor .element=${subFunction}></subfunction-editor>`
+    )}`;
+  }
+
+  render(): TemplateResult {
+    return html`<action-pane label="${this.header}" icon="functions" secondary
+      >${this.renderSubFunctions()}</action-pane
+    >`;
+  }
+}
diff --git a/src/zeroline/substation-editor.ts b/src/zeroline/substation-editor.ts
index e12a1d96d0..2f0dbf86aa 100644
--- a/src/zeroline/substation-editor.ts
+++ b/src/zeroline/substation-editor.ts
@@ -18,7 +18,13 @@ import '../action-pane.js';
 import './ied-editor.js';
 import './powertransformer-editor.js';
 import './voltage-level-editor.js';
-import { newActionEvent, newWizardEvent, SCLTag, tags } from '../foundation.js';
+import {
+  getChildElementsByTagName,
+  newActionEvent,
+  newWizardEvent,
+  SCLTag,
+  tags,
+} from '../foundation.js';
 import { emptyWizard, wizards } from '../wizards/wizard-library.js';
 import {
   cloneSubstationElement,
@@ -43,6 +49,9 @@ export class SubstationEditor extends LitElement {
   element!: Element;
   @property({ type: Boolean })
   readonly = false;
+  /** Wheter `Function` and `SubFunction` are rendered */
+  @property({ type: Boolean })
+  showfunctions = false;
 
   @property({ type: String })
   get header(): string {
@@ -95,6 +104,15 @@ export class SubstationEditor extends LitElement {
     this.addMenu.anchor = <HTMLElement>this.addButton;
   }
 
+  renderFunctions(): TemplateResult {
+    if (!this.showfunctions) return html``;
+
+    const functions = getChildElementsByTagName(this.element, 'Function');
+    return html` ${functions.map(
+      fUnction => html`<function-editor .element=${fUnction}></function-editor>`
+    )}`;
+  }
+
   renderIedContainer(): TemplateResult {
     const ieds = this.getAttachedIeds?.(this.element) ?? [];
     return ieds?.length
@@ -105,11 +123,20 @@ export class SubstationEditor extends LitElement {
   }
 
   renderPowerTransformerContainer(): TemplateResult {
-    const pwts = Array.from(this.element?.querySelectorAll(selectors.Substation + ' > PowerTransformer') ?? []);
+    const pwts = Array.from(
+      this.element?.querySelectorAll(
+        selectors.Substation + ' > PowerTransformer'
+      ) ?? []
+    );
     return pwts?.length
       ? html`<div id="powertransformercontainer">
-        ${pwts.map(pwt => html`<powertransformer-editor .element=${pwt}></powertransformer-editor>`)}
-      </div>`
+          ${pwts.map(
+            pwt =>
+              html`<powertransformer-editor
+                .element=${pwt}
+              ></powertransformer-editor>`
+          )}
+        </div>`
       : html``;
   }
 
@@ -173,7 +200,7 @@ export class SubstationEditor extends LitElement {
           >${this.renderAddButtons()}</mwc-menu
         >
       </abbr>
-      ${this.renderIedContainer()}
+      ${this.renderIedContainer()}${this.renderFunctions()}
       ${this.renderPowerTransformerContainer()}
       ${Array.from(this.element.querySelectorAll(selectors.VoltageLevel)).map(
         voltageLevel =>
@@ -181,6 +208,7 @@ export class SubstationEditor extends LitElement {
             .element=${voltageLevel}
             .getAttachedIeds=${this.getAttachedIeds}
             ?readonly=${this.readonly}
+            ?showfunctions=${this.showfunctions}
           ></voltage-level-editor>`
       )}</action-pane
     >`;
diff --git a/src/zeroline/voltage-level-editor.ts b/src/zeroline/voltage-level-editor.ts
index 3bd88ae741..d1e1548b2e 100644
--- a/src/zeroline/voltage-level-editor.ts
+++ b/src/zeroline/voltage-level-editor.ts
@@ -24,7 +24,13 @@ import {
   cloneSubstationElement,
   styles,
 } from './foundation.js';
-import { newActionEvent, newWizardEvent, SCLTag, tags } from '../foundation.js';
+import {
+  getChildElementsByTagName,
+  newActionEvent,
+  newWizardEvent,
+  SCLTag,
+  tags,
+} from '../foundation.js';
 
 import { SubstationEditor } from './substation-editor.js';
 import { emptyWizard, wizards } from '../wizards/wizard-library.js';
@@ -44,6 +50,9 @@ export class VoltageLevelEditor extends LitElement {
   element!: Element;
   @property({ type: Boolean })
   readonly = false;
+  /** Wheter `Function` and `SubFunction` are rendered */
+  @property({ type: Boolean })
+  showfunctions = false;
 
   @property()
   get voltage(): string | null {
@@ -105,6 +114,15 @@ export class VoltageLevelEditor extends LitElement {
     this.addMenu.anchor = <HTMLElement>this.addButton;
   }
 
+  renderFunctions(): TemplateResult {
+    if (!this.showfunctions) return html``;
+
+    const functions = getChildElementsByTagName(this.element, 'Function');
+    return html` ${functions.map(
+      fUnction => html`<function-editor .element=${fUnction}></function-editor>`
+    )}`;
+  }
+
   renderIedContainer(): TemplateResult {
     const ieds = this.getAttachedIeds?.(this.element) ?? [];
     return ieds?.length
@@ -115,11 +133,20 @@ export class VoltageLevelEditor extends LitElement {
   }
 
   renderPowerTransformerContainer(): TemplateResult {
-    const pwts = Array.from(this.element?.querySelectorAll(selectors.VoltageLevel + ' > PowerTransformer') ?? []);
+    const pwts = Array.from(
+      this.element?.querySelectorAll(
+        selectors.VoltageLevel + ' > PowerTransformer'
+      ) ?? []
+    );
     return pwts?.length
       ? html`<div id="powertransformercontainer">
-        ${pwts.map(pwt => html`<powertransformer-editor .element=${pwt}></powertransformer-editor>`)}
-      </div>`
+          ${pwts.map(
+            pwt =>
+              html`<powertransformer-editor
+                .element=${pwt}
+              ></powertransformer-editor>`
+          )}
+        </div>`
       : html``;
   }
 
@@ -155,7 +182,8 @@ export class VoltageLevelEditor extends LitElement {
       <abbr slot="action" title="${translate('move')}">
         <mwc-icon-button
           icon="forward"
-          @click=${() => startMove(this, VoltageLevelEditor, [SubstationEditor])}
+          @click=${() =>
+            startMove(this, VoltageLevelEditor, [SubstationEditor])}
         ></mwc-icon-button>
       </abbr>
       <abbr slot="action" title="${translate('remove')}">
@@ -183,7 +211,7 @@ export class VoltageLevelEditor extends LitElement {
           >${this.renderAddButtons()}</mwc-menu
         >
       </abbr>
-      ${this.renderIedContainer()}
+      ${this.renderIedContainer()}${this.renderFunctions()}
       ${this.renderPowerTransformerContainer()}
       <div id="bayContainer">
         ${Array.from(this.element?.querySelectorAll(selectors.Bay) ?? []).map(
@@ -191,6 +219,7 @@ export class VoltageLevelEditor extends LitElement {
             .element=${bay}
             .getAttachedIeds=${this.getAttachedIeds}
             ?readonly=${this.readonly}
+            ?showfunctions=${this.showfunctions}
           ></bay-editor>`
         )}
       </div>
diff --git a/test/testfiles/zeroline/functions.scd b/test/testfiles/zeroline/functions.scd
new file mode 100644
index 0000000000..5e87b5f157
--- /dev/null
+++ b/test/testfiles/zeroline/functions.scd
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<SCL version="2007" revision="B" release="4" xmlns:sxy="http://www.iec.ch/61850/2003/SCLcoordinates" xmlns="http://www.iec.ch/61850/2003/SCL" xmlns:txy="http://www.iec.ch/61850/2003/Terminal" xmlns:scl="http://www.iec.ch/61850/2003/SCL" xsi:schemaLocation="http://www.iec.ch/61850/2003/SCL SCL.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:IEC_60870_5_104="http://www.iec.ch/61850-80-1/2007/SCL">
+	<Header id="TrainingIEC61850" version="1" revision="143" toolID="IEC 61850 System Configurator, Version: V5.90 " nameStructure="IEDName">
+		<Text>TrainingIEC61850</Text>
+		<History>
+			<Hitem version="1" revision="143" when="Wednesday, September 25, 2019 9:11:36 AM" who="Licenced User: OMICRON electronics GmbH JakVog00 Machine: JAKVOG00LW01 User: JakVog00" what="Station is upgraded from IEC 61850 System Configurator, Version: V5.80 HF1 to V5.90 ." why="IEC 61850 System Configurator Automatic Startup: Insert Comment" />
+		</History>
+	</Header>
+	<Substation name="AA1" desc="Substation">
+        <Function name="myFunc" desc="myDesc" type="myFuncType">
+			<SubFunction name="mySubFunc"/>
+		</Function>
+		<VoltageLevel name="E1" desc="Voltage Level" nomFreq="50.0" numPhases="3">
+			<Voltage unit="V" multiplier="k">110.0</Voltage>
+            <Function name="voltLvName">
+                <SubFunction name="mySubFunc" desc="some string" type="some type">
+					<SubFunction name="mySubSubFunction">
+						<SubFunction name="mySubSubSubFunction"/>
+					</SubFunction>
+				</SubFunction> 
+            </Function>
+			<Bay name="COUPLING_BAY" desc="Bay">
+				<Function name="bayName">
+					<SubFunction name="myBaySubFunc" desc="myDesc" type="myBaySubFuncType"/>
+				</Function>
+				<Function name="bay2Func">
+					<SubFunction name="myBaySubFunc" desc="myDesc" type="myBaySubFuncType"/>
+				</Function>
+                <ConductingEquipment>
+                    <EqFunction name="myEqFunc">
+                        <EqSubFunction name="myEqSubFunc"/> 
+                    </EqFunction> 
+                </ConductingEquipment>
+			</Bay>
+		</VoltageLevel>
+	</Substation>
+</SCL>
diff --git a/test/unit/__snapshots__/zeroline-pane.test.snap.js b/test/unit/__snapshots__/zeroline-pane.test.snap.js
index 3c6d9a13df..e99b2077be 100644
--- a/test/unit/__snapshots__/zeroline-pane.test.snap.js
+++ b/test/unit/__snapshots__/zeroline-pane.test.snap.js
@@ -21,6 +21,14 @@ snapshots["zeroline-pane per default looks like the latest snapshot"] =
       >
       </mwc-icon-button-toggle>
     </abbr>
+    <abbr title="[zeroline.showfunctions]">
+      <mwc-icon-button-toggle
+        id="showfunctions"
+        officon="layers_clear"
+        onicon="layers"
+      >
+      </mwc-icon-button-toggle>
+    </abbr>
     <abbr title="[zeroline.commmap]">
       <mwc-icon-button
         icon="link"
@@ -72,6 +80,14 @@ snapshots["zeroline-pane showieds looks like the latest snapshot"] =
       >
       </mwc-icon-button-toggle>
     </abbr>
+    <abbr title="[zeroline.showfunctions]">
+      <mwc-icon-button-toggle
+        id="showfunctions"
+        officon="layers_clear"
+        onicon="layers"
+      >
+      </mwc-icon-button-toggle>
+    </abbr>
     <abbr title="[zeroline.commmap]">
       <mwc-icon-button
         icon="link"
diff --git a/test/unit/zeroline-pane.test.ts b/test/unit/zeroline-pane.test.ts
index 183e873b67..aaf88d0c0d 100644
--- a/test/unit/zeroline-pane.test.ts
+++ b/test/unit/zeroline-pane.test.ts
@@ -39,13 +39,16 @@ describe('zeroline-pane', () => {
   });
 
   it('per default looks like the latest snapshot', async () => {
-    const element = await fixture(
+    const element: ZerolinePane = await fixture(
       html`<zeroline-pane
         .doc=${doc}
         .getAttachedIeds="${undefined}"
       ></zeroline-pane>`
     );
 
+    if (element.showieds.on) await element.showieds.click();
+    if (element.showfunctions.on) await element.showfunctions.click();
+
     await new Promise(resolve => setTimeout(resolve, 2000)); // await animation
 
     await expect(element).shadowDom.to.equalSnapshot();
@@ -60,6 +63,7 @@ describe('zeroline-pane', () => {
     );
 
     if (!element.showieds.on) await element.showieds.click();
+    if (element.showfunctions.on) await element.showfunctions.click();
 
     await new Promise(resolve => setTimeout(resolve, 2000)); // await IEDs are rendered
 
@@ -117,6 +121,7 @@ describe('zeroline-pane', () => {
       });
     });
   });
+
   it('both the functions return every IED only once', async () => {
     const numSub1 = (await attachedIeds(substation1, remainingIeds)).length;
     const numSub2 = (await attachedIeds(substation2, remainingIeds)).length;
diff --git a/test/unit/zeroline/__snapshots__/bay-editor.test.snap.js b/test/unit/zeroline/__snapshots__/bay-editor.test.snap.js
index 370239154c..efd5e3e449 100644
--- a/test/unit/zeroline/__snapshots__/bay-editor.test.snap.js
+++ b/test/unit/zeroline/__snapshots__/bay-editor.test.snap.js
@@ -205,3 +205,101 @@ snapshots["bay-editor with readonly property looks like the latest snapshot"] =
 `;
 /* end snapshot bay-editor with readonly property looks like the latest snapshot */
 
+snapshots["bay-editor with function filter deactivated shows connected Function`s in the Substation looks like the latest snapshot"] = 
+`<action-pane
+  label="COUPLING_BAY - Bay"
+  tabindex="0"
+>
+  <abbr
+    slot="action"
+    title="[lnode.tooltip]"
+  >
+    <mwc-icon-button icon="account_tree">
+    </mwc-icon-button>
+  </abbr>
+  <abbr
+    slot="action"
+    title="[duplicate]"
+  >
+    <mwc-icon-button icon="content_copy">
+    </mwc-icon-button>
+  </abbr>
+  <abbr
+    slot="action"
+    title="[edit]"
+  >
+    <mwc-icon-button icon="edit">
+    </mwc-icon-button>
+  </abbr>
+  <abbr
+    slot="action"
+    title="[move]"
+  >
+    <mwc-icon-button icon="forward">
+    </mwc-icon-button>
+  </abbr>
+  <abbr
+    slot="action"
+    title="[remove]"
+  >
+    <mwc-icon-button icon="delete">
+    </mwc-icon-button>
+  </abbr>
+  <abbr
+    slot="action"
+    style="position:relative;"
+    title="[add]"
+  >
+    <mwc-icon-button icon="playlist_add">
+    </mwc-icon-button>
+    <mwc-menu
+      corner="BOTTOM_RIGHT"
+      menucorner="END"
+    >
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="0"
+        value="LNode"
+      >
+        <span>
+          LNode
+        </span>
+      </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="PowerTransformer"
+      >
+        <span>
+          PowerTransformer
+        </span>
+      </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="ConductingEquipment"
+      >
+        <span>
+          ConductingEquipment
+        </span>
+      </mwc-list-item>
+    </mwc-menu>
+  </abbr>
+  <function-editor>
+  </function-editor>
+  <function-editor>
+  </function-editor>
+  <div id="ceContainer">
+    <conducting-equipment-editor>
+    </conducting-equipment-editor>
+  </div>
+</action-pane>
+`;
+/* end snapshot bay-editor with function filter deactivated shows connected Function`s in the Substation looks like the latest snapshot */
+
diff --git a/test/unit/zeroline/__snapshots__/function-editor.test.snap.js b/test/unit/zeroline/__snapshots__/function-editor.test.snap.js
new file mode 100644
index 0000000000..f4131b1c64
--- /dev/null
+++ b/test/unit/zeroline/__snapshots__/function-editor.test.snap.js
@@ -0,0 +1,31 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["web component rendering Function element with complete attribute set and existing children looks like the latest snapshot"] = 
+`<action-pane
+  highlighted=""
+  icon="functions"
+  label="myFunc - myDesc (myFuncType)"
+  secondary=""
+  tabindex="0"
+>
+  <subfunction-editor>
+  </subfunction-editor>
+</action-pane>
+`;
+/* end snapshot web component rendering Function element with complete attribute set and existing children looks like the latest snapshot */
+
+snapshots["web component rendering Function element with missing desc and type attribute looks like the latest snapshot"] = 
+`<action-pane
+  highlighted=""
+  icon="functions"
+  label="voltLvName"
+  secondary=""
+  tabindex="0"
+>
+  <subfunction-editor>
+  </subfunction-editor>
+</action-pane>
+`;
+/* end snapshot web component rendering Function element with missing desc and type attribute looks like the latest snapshot */
+
diff --git a/test/unit/zeroline/__snapshots__/subfunction-editor.test.snap.js b/test/unit/zeroline/__snapshots__/subfunction-editor.test.snap.js
new file mode 100644
index 0000000000..8f5f8d9874
--- /dev/null
+++ b/test/unit/zeroline/__snapshots__/subfunction-editor.test.snap.js
@@ -0,0 +1,27 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["web component rendering SubFunction element with complete attribute set and existing children looks like the latest snapshot"] = 
+`<action-pane
+  icon="functions"
+  label="mySubFunc - some string (some type)"
+  secondary=""
+  tabindex="0"
+>
+  <subfunction-editor>
+  </subfunction-editor>
+</action-pane>
+`;
+/* end snapshot web component rendering SubFunction element with complete attribute set and existing children looks like the latest snapshot */
+
+snapshots["web component rendering SubFunction element with missing desc and type attribute looks like the latest snapshot"] = 
+`<action-pane
+  icon="functions"
+  label="mySubFunc"
+  secondary=""
+  tabindex="0"
+>
+</action-pane>
+`;
+/* end snapshot web component rendering SubFunction element with missing desc and type attribute looks like the latest snapshot */
+
diff --git a/test/unit/zeroline/__snapshots__/substation-editor.test.snap.js b/test/unit/zeroline/__snapshots__/substation-editor.test.snap.js
index 5f3b776709..a7f815c06b 100644
--- a/test/unit/zeroline/__snapshots__/substation-editor.test.snap.js
+++ b/test/unit/zeroline/__snapshots__/substation-editor.test.snap.js
@@ -189,3 +189,97 @@ snapshots["substation-editor with readonly property looks like the latest snapsh
 `;
 /* end snapshot substation-editor with readonly property looks like the latest snapshot */
 
+snapshots["substation-editor with function filter deactivated shows connected Function`s in the Substation looks like the latest snapshot"] = 
+`<action-pane
+  label="AA1 - Substation"
+  tabindex="0"
+>
+  <abbr
+    slot="action"
+    title="[lnode.tooltip]"
+  >
+    <mwc-icon-button icon="account_tree">
+    </mwc-icon-button>
+  </abbr>
+  <abbr
+    slot="action"
+    title="[duplicate]"
+  >
+    <mwc-icon-button icon="content_copy">
+    </mwc-icon-button>
+  </abbr>
+  <abbr
+    slot="action"
+    title="[edit]"
+  >
+    <mwc-icon-button icon="edit">
+    </mwc-icon-button>
+  </abbr>
+  <abbr
+    slot="action"
+    title="[move]"
+  >
+    <mwc-icon-button icon="forward">
+    </mwc-icon-button>
+  </abbr>
+  <abbr
+    slot="action"
+    title="[remove]"
+  >
+    <mwc-icon-button icon="delete">
+    </mwc-icon-button>
+  </abbr>
+  <abbr
+    slot="action"
+    style="position:relative;"
+    title="[add]"
+  >
+    <mwc-icon-button icon="playlist_add">
+    </mwc-icon-button>
+    <mwc-menu
+      corner="BOTTOM_RIGHT"
+      menucorner="END"
+    >
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="0"
+        value="LNode"
+      >
+        <span>
+          LNode
+        </span>
+      </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="PowerTransformer"
+      >
+        <span>
+          PowerTransformer
+        </span>
+      </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="VoltageLevel"
+      >
+        <span>
+          VoltageLevel
+        </span>
+      </mwc-list-item>
+    </mwc-menu>
+  </abbr>
+  <function-editor>
+  </function-editor>
+  <voltage-level-editor showfunctions="">
+  </voltage-level-editor>
+</action-pane>
+`;
+/* end snapshot substation-editor with function filter deactivated shows connected Function`s in the Substation looks like the latest snapshot */
+
diff --git a/test/unit/zeroline/__snapshots__/voltage-level-editor.test.snap.js b/test/unit/zeroline/__snapshots__/voltage-level-editor.test.snap.js
index 82a28cf675..a72a0c6142 100644
--- a/test/unit/zeroline/__snapshots__/voltage-level-editor.test.snap.js
+++ b/test/unit/zeroline/__snapshots__/voltage-level-editor.test.snap.js
@@ -195,3 +195,100 @@ snapshots["voltage-level-editor with readonly property looks like the latest sna
 `;
 /* end snapshot voltage-level-editor with readonly property looks like the latest snapshot */
 
+snapshots["voltage-level-editor with function filter deactivated shows connected Function`s in the Substation looks like the latest snapshot"] = 
+`<action-pane
+  label="E1 - Voltage Level
+    (110.0 kV)"
+  tabindex="0"
+>
+  <abbr
+    slot="action"
+    title="[lnode.tooltip]"
+  >
+    <mwc-icon-button icon="account_tree">
+    </mwc-icon-button>
+  </abbr>
+  <abbr
+    slot="action"
+    title="[duplicate]"
+  >
+    <mwc-icon-button icon="content_copy">
+    </mwc-icon-button>
+  </abbr>
+  <abbr
+    slot="action"
+    title="[edit]"
+  >
+    <mwc-icon-button icon="edit">
+    </mwc-icon-button>
+  </abbr>
+  <abbr
+    slot="action"
+    title="[move]"
+  >
+    <mwc-icon-button icon="forward">
+    </mwc-icon-button>
+  </abbr>
+  <abbr
+    slot="action"
+    title="[remove]"
+  >
+    <mwc-icon-button icon="delete">
+    </mwc-icon-button>
+  </abbr>
+  <abbr
+    slot="action"
+    style="position:relative;"
+    title="[add]"
+  >
+    <mwc-icon-button icon="playlist_add">
+    </mwc-icon-button>
+    <mwc-menu
+      corner="BOTTOM_RIGHT"
+      menucorner="END"
+    >
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="0"
+        value="LNode"
+      >
+        <span>
+          LNode
+        </span>
+      </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="PowerTransformer"
+      >
+        <span>
+          PowerTransformer
+        </span>
+      </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="Bay"
+      >
+        <span>
+          Bay
+        </span>
+      </mwc-list-item>
+    </mwc-menu>
+  </abbr>
+  <function-editor>
+  </function-editor>
+  <div id="bayContainer">
+    <bay-editor showfunctions="">
+    </bay-editor>
+  </div>
+</action-pane>
+`;
+/* end snapshot voltage-level-editor with function filter deactivated shows connected Function`s in the Substation looks like the latest snapshot */
+
diff --git a/test/unit/zeroline/bay-editor.test.ts b/test/unit/zeroline/bay-editor.test.ts
index e2dad3e507..0bcead734b 100644
--- a/test/unit/zeroline/bay-editor.test.ts
+++ b/test/unit/zeroline/bay-editor.test.ts
@@ -5,17 +5,15 @@ import { BayEditor } from '../../../src/zeroline/bay-editor.js';
 
 describe('bay-editor', () => {
   let element: BayEditor;
-  let validSCL: XMLDocument;
+  let doc: XMLDocument;
 
   beforeEach(async () => {
-    validSCL = await fetch('/test/testfiles/valid2007B4.scd')
+    doc = await fetch('/test/testfiles/valid2007B4.scd')
       .then(response => response.text())
       .then(str => new DOMParser().parseFromString(str, 'application/xml'));
     element = <BayEditor>(
       await fixture(
-        html`<bay-editor
-          .element=${validSCL.querySelector('Bay')}
-        ></bay-editor>`
+        html`<bay-editor .element=${doc.querySelector('Bay')}></bay-editor>`
       )
     );
   });
@@ -33,4 +31,20 @@ describe('bay-editor', () => {
       await expect(element).shadowDom.to.equalSnapshot();
     });
   });
+
+  describe('with function filter deactivated shows connected Function`s in the Substation', () => {
+    beforeEach(async () => {
+      doc = await fetch('/test/testfiles/zeroline/functions.scd')
+        .then(response => response.text())
+        .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+
+      element.element = doc.querySelector('Bay')!;
+      element.showfunctions = true;
+      await element.requestUpdate();
+    });
+
+    it('looks like the latest snapshot', async () => {
+      await expect(element).shadowDom.to.equalSnapshot();
+    });
+  });
 });
diff --git a/test/unit/zeroline/function-editor.test.ts b/test/unit/zeroline/function-editor.test.ts
new file mode 100644
index 0000000000..9536ff5008
--- /dev/null
+++ b/test/unit/zeroline/function-editor.test.ts
@@ -0,0 +1,47 @@
+import { fixture, html, expect } from '@open-wc/testing';
+
+import '../../../src/zeroline/function-editor.js';
+import { FunctionEditor } from '../../../src/zeroline/function-editor.js';
+
+describe('web component rendering Function element', () => {
+  let element: FunctionEditor;
+  let doc: XMLDocument;
+
+  beforeEach(async () => {
+    doc = await fetch('/test/testfiles/zeroline/functions.scd')
+      .then(response => response.text())
+      .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+  });
+
+  describe('with complete attribute set and existing children', () => {
+    beforeEach(async () => {
+      element = <FunctionEditor>(
+        await fixture(
+          html`<function-editor
+            .element=${doc.querySelector('Function')}
+          ></function-editor>`
+        )
+      );
+    });
+
+    it('looks like the latest snapshot', async () => {
+      await expect(element).shadowDom.to.equalSnapshot();
+    });
+  });
+
+  describe('with missing desc and type attribute', () => {
+    beforeEach(async () => {
+      element = <FunctionEditor>(
+        await fixture(
+          html`<function-editor
+            .element=${doc.querySelector('VoltageLevel Function')}
+          ></function-editor>`
+        )
+      );
+    });
+
+    it('looks like the latest snapshot', async () => {
+      await expect(element).shadowDom.to.equalSnapshot();
+    });
+  });
+});
diff --git a/test/unit/zeroline/subfunction-editor.test.ts b/test/unit/zeroline/subfunction-editor.test.ts
new file mode 100644
index 0000000000..97740500a4
--- /dev/null
+++ b/test/unit/zeroline/subfunction-editor.test.ts
@@ -0,0 +1,47 @@
+import { fixture, html, expect } from '@open-wc/testing';
+
+import '../../../src/zeroline/subfunction-editor.js';
+import { SubFunctionEditor } from '../../../src/zeroline/subfunction-editor.js';
+
+describe('web component rendering SubFunction element', () => {
+  let element: SubFunctionEditor;
+  let doc: XMLDocument;
+
+  beforeEach(async () => {
+    doc = await fetch('/test/testfiles/zeroline/functions.scd')
+      .then(response => response.text())
+      .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+  });
+
+  describe('with complete attribute set and existing children', () => {
+    beforeEach(async () => {
+      element = <SubFunctionEditor>(
+        await fixture(
+          html`<subfunction-editor
+            .element=${doc.querySelector('VoltageLevel SubFunction')}
+          ></subfunction-editor>`
+        )
+      );
+    });
+
+    it('looks like the latest snapshot', async () => {
+      await expect(element).shadowDom.to.equalSnapshot();
+    });
+  });
+
+  describe('with missing desc and type attribute', () => {
+    beforeEach(async () => {
+      element = <SubFunctionEditor>(
+        await fixture(
+          html`<subfunction-editor
+            .element=${doc.querySelector('SubFunction')}
+          ></subfunction-editor>`
+        )
+      );
+    });
+
+    it('looks like the latest snapshot', async () => {
+      await expect(element).shadowDom.to.equalSnapshot();
+    });
+  });
+});
diff --git a/test/unit/zeroline/substation-editor.test.ts b/test/unit/zeroline/substation-editor.test.ts
index f98e4bc93b..f12e577b1a 100644
--- a/test/unit/zeroline/substation-editor.test.ts
+++ b/test/unit/zeroline/substation-editor.test.ts
@@ -5,14 +5,14 @@ import { SubstationEditor } from '../../../src/zeroline/substation-editor.js';
 
 describe('substation-editor', () => {
   let element: SubstationEditor;
-  let validSCL: XMLDocument;
+  let doc: XMLDocument;
 
   beforeEach(async () => {
-    validSCL = await fetch('/test/testfiles/valid2007B4.scd')
+    doc = await fetch('/test/testfiles/valid2007B4.scd')
       .then(response => response.text())
       .then(str => new DOMParser().parseFromString(str, 'application/xml'));
     element = await fixture(html`<substation-editor
-      .element=${validSCL.querySelector('Substation')}
+      .element=${doc.querySelector('Substation')}
     ></substation-editor>`);
   });
 
@@ -29,4 +29,20 @@ describe('substation-editor', () => {
       await expect(element).shadowDom.to.equalSnapshot();
     });
   });
+
+  describe('with function filter deactivated shows connected Function`s in the Substation', () => {
+    beforeEach(async () => {
+      doc = await fetch('/test/testfiles/zeroline/functions.scd')
+        .then(response => response.text())
+        .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+
+      element.element = doc.querySelector('Substation')!;
+      element.showfunctions = true;
+      await element.requestUpdate();
+    });
+
+    it('looks like the latest snapshot', async () => {
+      await expect(element).shadowDom.to.equalSnapshot();
+    });
+  });
 });
diff --git a/test/unit/zeroline/voltage-level-editor.test.ts b/test/unit/zeroline/voltage-level-editor.test.ts
index c19380a699..6029dde38e 100644
--- a/test/unit/zeroline/voltage-level-editor.test.ts
+++ b/test/unit/zeroline/voltage-level-editor.test.ts
@@ -5,16 +5,16 @@ import { VoltageLevelEditor } from '../../../src/zeroline/voltage-level-editor.j
 
 describe('voltage-level-editor', () => {
   let element: VoltageLevelEditor;
-  let validSCL: XMLDocument;
+  let doc: XMLDocument;
 
   beforeEach(async () => {
-    validSCL = await fetch('/test/testfiles/valid2007B4.scd')
+    doc = await fetch('/test/testfiles/valid2007B4.scd')
       .then(response => response.text())
       .then(str => new DOMParser().parseFromString(str, 'application/xml'));
     element = <VoltageLevelEditor>(
       await fixture(
         html`<voltage-level-editor
-          .element=${validSCL.querySelector('VoltageLevel')}
+          .element=${doc.querySelector('VoltageLevel')}
         ></voltage-level-editor>`
       )
     );
@@ -33,4 +33,20 @@ describe('voltage-level-editor', () => {
       await expect(element).shadowDom.to.equalSnapshot();
     });
   });
+
+  describe('with function filter deactivated shows connected Function`s in the Substation', () => {
+    beforeEach(async () => {
+      doc = await fetch('/test/testfiles/zeroline/functions.scd')
+        .then(response => response.text())
+        .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+
+      element.element = doc.querySelector('VoltageLevel')!;
+      element.showfunctions = true;
+      await element.requestUpdate();
+    });
+
+    it('looks like the latest snapshot', async () => {
+      await expect(element).shadowDom.to.equalSnapshot();
+    });
+  });
 });