feat(editors/subscriber-later-binding): Show connected and available ExtRef on FCDA selection (GOOSE) (openscd#995)

* refactor: making ext-ref-laterbinding-list reusable for both GSEControl and SVC elements
* translate: updating translation files
* feat: Adding extref-later-binding-list for GSEControl elements
* test(GooseSubscriberLaterBinding): updating tests after refactor and new tests for GOOSE extref list as well
* fix: using getSclSchemaVersion, removing get version()
* refactor: checking extRefElement[serviceType] for GOOSE and SMV
* chore: update fn name in check ext-ref requirements

Co-authored-by: Dennis Labordus <[email protected]>

Author: juancho0202

src/editors/GooseSubscriberLaterBinding.ts

@@ -1,6 +1,7 @@
 import { LitElement, property, html, TemplateResult, css } from 'lit-element';
 
 import './subscription/later-binding/fcda-later-binding-list.js';
+import './subscription/later-binding/ext-ref-laterbinding-list.js';
 
 export default class GooseSubscribeLaterBindingPlugin extends LitElement {
   @property({ attribute: false })
@@ -9,8 +10,18 @@ export default class GooseSubscribeLaterBindingPlugin extends LitElement {
   render(): TemplateResult {
     return html`<div>
       <div class="container">
-        <fcda-later-binding-list .doc=${this.doc} controlTag="GSEControl">
+        <fcda-later-binding-list
+          class="column"
+          .doc=${this.doc}
+          controlTag="GSEControl"
+        >
         </fcda-later-binding-list>
+        <extref-later-binding-list
+          class="column"
+          controlTag="GSEControl"
+          .doc=${this.doc}
+        >
+        </extref-later-binding-list>
       </div>
     </div>`;
   }
@@ -21,7 +32,17 @@ export default class GooseSubscribeLaterBindingPlugin extends LitElement {
     }
 
     .container {
+      display: flex;
       padding: 8px 6px 16px;
+      height: calc(100vh - 136px);
+    }
+
+    .column {
+      flex: 50%;
+      margin: 0px 6px 0px;
+      min-width: 300px;
+      height: 100%;
+      overflow-y: auto;
     }
   `;
 }

src/editors/SMVSubscriberLaterBinding.ts

@@ -1,7 +1,7 @@
 import { css, html, LitElement, property, TemplateResult } from 'lit-element';
 
 import './subscription/later-binding/fcda-later-binding-list.js';
-import './subscription/smv-laterbinding/ext-ref-laterbinding-list.js';
+import './subscription/later-binding/ext-ref-laterbinding-list.js';
 
 /** An editor [[`plugin`]] for Subscribe Later Binding (SMV). */
 export default class SMVSubscribeLaterBindingPlugin extends LitElement {
@@ -17,7 +17,11 @@ export default class SMVSubscribeLaterBindingPlugin extends LitElement {
           controlTag="SampledValueControl"
         >
         </fcda-later-binding-list>
-        <extref-later-binding-list class="column" .doc=${this.doc}>
+        <extref-later-binding-list
+          class="column"
+          .doc=${this.doc}
+          controlTag="SampledValueControl"
+        >
         </extref-later-binding-list>
       </div>
     </div>`;

src/editors/subscription/foundation.ts

@@ -94,7 +94,7 @@ export function canCreateValidExtRef(
   return true;
 }
 
-const serviceTypes: Partial<Record<string, string>> = {
+export const serviceTypes: Partial<Record<string, string>> = {
   ReportControl: 'Report',
   GSEControl: 'GOOSE',
   SampledValueControl: 'SMV',

src/editors/subscription/smv-laterbinding/ext-ref-laterbinding-list.ts renamed to src/editors/subscription/later-binding/ext-ref-laterbinding-list.ts

@@ -18,9 +18,10 @@ import {
   identity,
   newActionEvent,
   Replace,
+  getSclSchemaVersion,
 } from '../../../foundation.js';
 
-import { styles, updateExtRefElement } from '../foundation.js';
+import { styles, updateExtRefElement, serviceTypes } from '../foundation.js';
 import { FcdaSelectEvent, getFcdaTitleValue } from './foundation.js';
 
 /**
@@ -31,9 +32,11 @@ import { FcdaSelectEvent, getFcdaTitleValue } from './foundation.js';
 export class ExtRefLaterBindingList extends LitElement {
   @property({ attribute: false })
   doc!: XMLDocument;
+  @property()
+  controlTag!: 'SampledValueControl' | 'GSEControl';
 
   @state()
-  currentSelectedSvcElement: Element | undefined;
+  currentSelectedControlElement: Element | undefined;
   @state()
   currentSelectedFcdaElement: Element | undefined;
   @state()
@@ -77,7 +80,7 @@ export class ExtRefLaterBindingList extends LitElement {
   }
 
   private async onFcdaSelectEvent(event: FcdaSelectEvent) {
-    this.currentSelectedSvcElement = event.detail.svc;
+    this.currentSelectedControlElement = event.detail.controlElement;
     this.currentSelectedFcdaElement = event.detail.fcda;
 
     // Retrieve the IED Element to which the FCDA belongs.
@@ -97,6 +100,33 @@ export class ExtRefLaterBindingList extends LitElement {
     );
   }
 
+  private checkEditionSpecificRequirements(extRefElement: Element): boolean {
+    if (getSclSchemaVersion(extRefElement.ownerDocument) === '2003')
+      return true;
+    return (
+      extRefElement.getAttribute('serviceType') ===
+        serviceTypes[this.controlTag] &&
+      extRefElement.getAttribute('srcLDInst') ===
+        this.currentSelectedControlElement
+          ?.closest('LDevice')
+          ?.getAttribute('inst') &&
+      (extRefElement.getAttribute('scrPrefix') || '') ===
+        (this.currentSelectedControlElement
+          ?.closest('LN0')
+          ?.getAttribute('prefix') || '') &&
+      extRefElement.getAttribute('srcLNClass') ===
+        this.currentSelectedControlElement
+          ?.closest('LN0')
+          ?.getAttribute('lnClass') &&
+      (extRefElement.getAttribute('srcLNInst') || '') ===
+        this.currentSelectedControlElement
+          ?.closest('LN0')
+          ?.getAttribute('inst') &&
+      extRefElement.getAttribute('srcCBName') ===
+        this.currentSelectedControlElement?.getAttribute('name')
+    );
+  }
+
   /**
    * Check if specific attributes from the ExtRef Element are the same as the ones from the FCDA Element
    * and also if the IED Name is the same. If that is the case this ExtRef subscribes to the selected FCDA
@@ -113,7 +143,8 @@ export class ExtRefLaterBindingList extends LitElement {
       this.sameAttributeValue(extRefElement, 'lnClass') &&
       this.sameAttributeValue(extRefElement, 'lnInst') &&
       this.sameAttributeValue(extRefElement, 'doName') &&
-      this.sameAttributeValue(extRefElement, 'daName')
+      this.sameAttributeValue(extRefElement, 'daName') &&
+      this.checkEditionSpecificRequirements(extRefElement)
     );
   }
 
@@ -187,7 +218,7 @@ export class ExtRefLaterBindingList extends LitElement {
     if (
       !this.currentIedElement ||
       !this.currentSelectedFcdaElement ||
-      !this.currentSelectedSvcElement!
+      !this.currentSelectedControlElement!
     ) {
       return null;
     }
@@ -197,16 +228,16 @@ export class ExtRefLaterBindingList extends LitElement {
       new: {
         element: updateExtRefElement(
           extRefElement,
-          this.currentSelectedSvcElement,
+          this.currentSelectedControlElement,
           this.currentSelectedFcdaElement
         ),
       },
     };
   }
 
   private renderTitle(): TemplateResult {
-    const svcName = this.currentSelectedSvcElement
-      ? getNameAttribute(this.currentSelectedSvcElement)
+    const controlElementName = this.currentSelectedControlElement
+      ? getNameAttribute(this.currentSelectedControlElement)
       : undefined;
     const fcdaName = this.currentSelectedFcdaElement
       ? getFcdaTitleValue(this.currentSelectedFcdaElement)
@@ -216,7 +247,8 @@ export class ExtRefLaterBindingList extends LitElement {
       ${translate(
         'subscription.laterBinding.extRefList.SampledValueControl.title',
         {
-          svcName: svcName ?? '-',
+          controlTag: this.controlTag,
+          controlElementName: controlElementName ?? '-',
           fcdaName: fcdaName ?? '-',
         }
       )}
@@ -323,7 +355,7 @@ export class ExtRefLaterBindingList extends LitElement {
 
   render(): TemplateResult {
     return html` <section tabindex="0">
-      ${this.currentSelectedSvcElement && this.currentSelectedFcdaElement
+      ${this.currentSelectedControlElement && this.currentSelectedFcdaElement
         ? html`
             ${this.renderTitle()}
             <filtered-list>

src/editors/subscription/later-binding/fcda-later-binding-list.ts

@@ -27,10 +27,7 @@ import { wizards } from '../../../wizards/wizard-library.js';
 
 import { styles } from '../foundation.js';
 
-import {
-  getFcdaTitleValue,
-  newFcdaSelectEvent,
-} from '../smv-laterbinding/foundation.js';
+import { getFcdaTitleValue, newFcdaSelectEvent } from './foundation.js';
 
 /**
  * A sub element for showing all Goose/Sampled Value Controls.

src/editors/subscription/smv-laterbinding/foundation.ts renamed to src/editors/subscription/later-binding/foundation.ts

@@ -7,20 +7,20 @@ export function getFcdaTitleValue(fcdaElement: Element): string {
 }
 
 export interface FcdaSelectDetail {
-  svc: Element | undefined;
+  controlElement: Element | undefined;
   fcda: Element | undefined;
 }
 export type FcdaSelectEvent = CustomEvent<FcdaSelectDetail>;
 export function newFcdaSelectEvent(
-  svc: Element | undefined,
+  controlElement: Element | undefined,
   fcda: Element | undefined,
   eventInitDict?: CustomEventInit<FcdaSelectDetail>
 ): FcdaSelectEvent {
   return new CustomEvent<FcdaSelectDetail>('fcda-select', {
     bubbles: true,
     composed: true,
     ...eventInitDict,
-    detail: { svc, fcda, ...eventInitDict?.detail },
+    detail: { controlElement, fcda, ...eventInitDict?.detail },
   });
 }
 

src/translations/de.ts

@@ -155,7 +155,7 @@ export const de: Translations = {
     compareButton: 'Starte Vergleich',
     attributes: 'Attribute von {{ elementName }}',
     children: 'Kindelemente von {{ elementName }}',
-    filterMutables: 'Projektspzifische Unterschiede ausblenden'
+    filterMutables: 'Projektspzifische Unterschiede ausblenden',
   },
   log: {
     name: 'Protokoll',
@@ -385,10 +385,8 @@ export const de: Translations = {
         },
       },
       extRefList: {
-        SampledValueControl: {
-          title:
-            'Ausgewählter Sampled Value Datenpunkt "{{ svcName }}" / "{{ fcdaName }}"',
-        },
+        title:
+          'Ausgewählter {{ controlTag }} Datenpunkt "{{ svcName }}" / "{{ fcdaName }}"',
         noSelection: 'Kein Daten-Attribut ausgewählt',
         noSubscribedExtRefs: 'Keine verknüpften externen Referenzen',
         noAvailableExtRefs:

src/translations/en.ts

@@ -133,7 +133,7 @@ export const en = {
     compareButton: 'Compare',
     attributes: 'Attributes from {{ elementName }}',
     children: 'Child elements from {{ elementName }}',
-    filterMutables: 'Filter project specific settings'
+    filterMutables: 'Filter project specific settings',
   },
   log: {
     name: 'Log',
@@ -382,10 +382,8 @@ export const en = {
         },
       },
       extRefList: {
-        SampledValueControl: {
-          title:
-            'Selected Sampled Value data "{{ svcName }}" / FCDA "{{ fcdaName }}"',
-        },
+        title:
+          'Selected {{ controlTag }} data "{{ controlElementName }}" / FCDA "{{ fcdaName }}"',
         noSelection: 'No data attribute selected',
         noSubscribedExtRefs: 'No subscribed ExtRefs',
         noAvailableExtRefs: 'No available ExtRefs to subscribe',

test/integration/editors/SMVSubscriberLaterBinding.test.ts

@@ -4,7 +4,7 @@ import { Wizarding } from '../../../src/Wizarding.js';
 import { Editing } from '../../../src/Editing.js';
 
 import SMVSubscribeLaterBindingPlugin from '../../../src/editors/SMVSubscriberLaterBinding.js';
-import { ExtRefLaterBindingList } from '../../../src/editors/subscription/smv-laterbinding/ext-ref-laterbinding-list.js';
+import { ExtRefLaterBindingList } from '../../../src/editors/subscription/later-binding/ext-ref-laterbinding-list.js';
 import { FCDALaterBindingList } from '../../../src/editors/subscription/later-binding/fcda-later-binding-list.js';
 
 describe('SMV Subscribe Later Binding plugin', () => {