fix: performance issues

editors/base-element-editor.ts

@@ -14,6 +14,7 @@ import {
   identity,
 } from '@openenergytools/scl-lib';
 import '@openenergytools/filterable-lists/dist/action-list.js';
+import { ActionList } from '@openenergytools/filterable-lists/dist/ActionList.js';
 import {
   isFCDACompatibleWithIED,
   queryLDevice,
@@ -43,6 +44,10 @@ export class BaseElementEditor extends ScopedElementsMixin(LitElement) {
   @property({ type: Number })
   editCount = -1;
 
+  /** Search/filter value for action-lists */
+  @property({ type: String })
+  searchValue = '';
+
   @state()
   selectCtrlBlock?: Element;
 
@@ -60,6 +65,15 @@ export class BaseElementEditor extends ScopedElementsMixin(LitElement) {
 
   @query('.change.dataset') changeDataSet!: MdIconButton;
 
+  @query('.selectionlist') selectionList?: ActionList | null;
+
+  updated(changedProps: Map<string | number | symbol, unknown>) {
+    super.updated?.(changedProps);
+    if (changedProps.has('searchValue') && this.selectionList) {
+      this.selectionList.searchValue = this.searchValue;
+    }
+  }
+
   get hasCopyControlSelected(): boolean {
     return this.controlBlockCopyOptions.some(o => o.selected);
   }

editors/dataset/data-set-editor.spec.ts

@@ -52,4 +52,15 @@ describe('DataSet editor component', () => {
       'DataSet'
     );
   });
+
+  it('sets searchValue on ActionList when passed as a prop', async () => {
+    const el = await fixture(
+      html`<data-set-editor .doc="${doc}" searchValue="IED1"></data-set-editor>`
+    );
+    await (el as DataSetEditor).updateComplete;
+
+    const actionList = (el as DataSetEditor).selectionList;
+    expect(actionList).to.exist;
+    expect(actionList.searchValue).to.equal('IED1');
+  });
 });

editors/dataset/data-set-editor.ts

@@ -36,6 +36,8 @@ export class DataSetEditor extends ScopedElementsMixin(LitElement) {
   @property({ type: Number })
   editCount = 0;
 
+  @property({ type: String }) searchValue = '';
+
   @state()
   selectedDataSet?: Element;
 
@@ -61,6 +63,13 @@ export class DataSetEditor extends ScopedElementsMixin(LitElement) {
     super.update(props);
   } */
 
+  updated(changedProps: Map<string | number | symbol, unknown>) {
+    super.updated?.(changedProps);
+    if (changedProps.has('searchValue') && this.selectionList) {
+      this.selectionList.searchValue = this.searchValue;
+    }
+  }
+
   private renderElementEditorContainer(): TemplateResult {
     if (this.selectedDataSet)
       return html`<div class="elementeditorcontainer">

editors/gsecontrol/gse-control-editor.spec.ts

@@ -23,16 +23,13 @@ function timeout(ms: number) {
   });
 }
 
+const doc = new DOMParser().parseFromString(gseControlDoc, 'application/xml');
+
 describe('GSEControl editor component', () => {
   let editor: GseControlEditor;
   let editEvent: SinonSpy;
 
   beforeEach(async () => {
-    const doc = new DOMParser().parseFromString(
-      gseControlDoc,
-      'application/xml'
-    );
-
     editor = await fixture(
       html`<gse-control-editor .doc="${doc}"></gse-control-editor>`
     );
@@ -91,4 +88,18 @@ describe('GSEControl editor component', () => {
       'datSet2'
     );
   });
+
+  it('sets searchValue on ActionList when passed as a prop', async () => {
+    const el = await fixture(
+      html`<gse-control-editor
+        .doc="${doc}"
+        searchValue="GSE1"
+      ></gse-control-editor>`
+    );
+    await (el as GseControlEditor).updateComplete;
+
+    const actionList = (el as GseControlEditor).selectionList;
+    expect(actionList).to.exist;
+    expect(actionList?.searchValue).to.equal('GSE1');
+  });
 });

editors/gsecontrol/gse-control-editor.ts

@@ -38,8 +38,6 @@ export class GseControlEditor extends BaseElementEditor {
     'md-checkbox': MdCheckbox,
   };
 
-  @query('.selectionlist') selectionList!: ActionList;
-
   @query('.change.scl.element') selectGSEControlButton!: MdOutlinedButton;
 
   @query('gse-control-element-editor')
@@ -129,7 +127,7 @@ export class GseControlEditor extends BaseElementEditor {
           this.selectCtrlBlock = gseControl;
           this.selectedDataSet = this.getDataSet(gseControl);
 
-          this.selectionList.classList.add('hidden');
+          this.selectionList?.classList.add('hidden');
           this.selectGSEControlButton.classList.remove('hidden');
         },
         actions: [
@@ -193,7 +191,7 @@ export class GseControlEditor extends BaseElementEditor {
     return html`<md-outlined-button
       class="change scl element"
       @click=${() => {
-        this.selectionList.classList.remove('hidden');
+        this.selectionList?.classList.remove('hidden');
         this.selectGSEControlButton.classList.add('hidden');
       }}
       >Selected GOOSE</md-outlined-button

editors/report/report-control-editor.spec.ts

@@ -24,16 +24,16 @@ function timeout(ms: number) {
   });
 }
 
+const doc = new DOMParser().parseFromString(
+  reportControlDoc,
+  'application/xml'
+);
+
 describe('ReportControl editor component', () => {
   let editor: ReportControlEditor;
   let editEvent: SinonSpy;
 
   beforeEach(async () => {
-    const doc = new DOMParser().parseFromString(
-      reportControlDoc,
-      'application/xml'
-    );
-
     editor = await fixture(
       html`<report-control-editor .doc="${doc}"></report-control-editor>`
     );
@@ -93,4 +93,18 @@ describe('ReportControl editor component', () => {
       'datSet2'
     );
   });
+
+  it('sets searchValue on ActionList when passed as a prop', async () => {
+    const el = await fixture(
+      html`<report-control-editor
+        .doc="${doc}"
+        searchValue="Report1"
+      ></report-control-editor>`
+    );
+    await (el as ReportControlEditor).updateComplete;
+
+    const actionList = (el as ReportControlEditor).selectionList;
+    expect(actionList).to.exist;
+    expect(actionList.searchValue).to.equal('Report1');
+  });
 });

editors/sampledvalue/sampled-value-control-editor.spec.ts

@@ -26,16 +26,13 @@ function timeout(ms: number) {
   });
 }
 
+const doc = new DOMParser().parseFromString(smvControlDoc, 'application/xml');
+
 describe('SampledValueControl editor component', () => {
   let editor: SampledValueControlEditor;
   let editEvent: SinonSpy;
 
   beforeEach(async () => {
-    const doc = new DOMParser().parseFromString(
-      smvControlDoc,
-      'application/xml'
-    );
-
     editor = await fixture(
       html`<sampled-value-control-editor
         .doc="${doc}"
@@ -85,4 +82,18 @@ describe('SampledValueControl editor component', () => {
       'datSet2'
     );
   });
+
+  it('sets searchValue on ActionList when passed as a prop', async () => {
+    const el = await fixture(
+      html`<sampled-value-control-editor
+        .doc="${doc}"
+        searchValue="SV1"
+      ></sampled-value-control-editor>`
+    );
+    await (el as SampledValueControlEditor).updateComplete;
+
+    const actionList = (el as SampledValueControlEditor).selectionList;
+    expect(actionList).to.exist;
+    expect(actionList.searchValue).to.equal('SV1');
+  });
 });

oscd-publisher.ts

@@ -1,7 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
 
 import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 
@@ -12,6 +11,17 @@ import { GseControlEditor } from './editors/gsecontrol/gse-control-editor.js';
 import { ReportControlEditor } from './editors/report/report-control-editor.js';
 import { SampledValueControlEditor } from './editors/sampledvalue/sampled-value-control-editor.js';
 
+const EditorSelector = {
+  Report: 'report-control-editor',
+  GOOSE: 'gse-control-editor',
+  SampledValue: 'sampled-value-control-editor',
+  DataSet: 'data-set-editor',
+} as const;
+
+type PublisherType = 'Report' | 'GOOSE' | 'SampledValue' | 'DataSet';
+
+type EditorSelectorType = (typeof EditorSelector)[keyof typeof EditorSelector];
+
 /** An editor [[`plugin`]] to configure `Report`, `GOOSE`, `SampledValue` control blocks and its `DataSet` */
 export default class PublisherPlugin extends ScopedElementsMixin(LitElement) {
   static scopedElements = {
@@ -31,8 +41,62 @@ export default class PublisherPlugin extends ScopedElementsMixin(LitElement) {
   editCount = 0;
 
   @state()
-  private publisherType: 'Report' | 'GOOSE' | 'SampledValue' | 'DataSet' =
-    'GOOSE';
+  private publisherType: PublisherType = 'GOOSE';
+
+  private filterValues: Record<PublisherType, string> = {
+    Report: '',
+    GOOSE: '',
+    SampledValue: '',
+    DataSet: '',
+  };
+
+  private saveCurrentSearchValue() {
+    const selector: EditorSelectorType = EditorSelector[this.publisherType];
+    const editor = this.renderRoot.querySelector(selector) as {
+      selectionList?: { searchValue: string };
+    } | null;
+
+    if (editor) {
+      this.filterValues[this.publisherType] =
+        editor.selectionList?.searchValue || '';
+    }
+  }
+
+  private handlePublisherTypeChange(newType: PublisherType) {
+    this.saveCurrentSearchValue();
+    this.publisherType = newType;
+  }
+
+  private renderEditor() {
+    switch (this.publisherType) {
+      case 'Report':
+        return html`<report-control-editor
+          .doc=${this.doc}
+          .editCount=${this.editCount}
+          .searchValue=${this.filterValues.Report}
+        ></report-control-editor>`;
+      case 'GOOSE':
+        return html`<gse-control-editor
+          .doc=${this.doc}
+          .editCount=${this.editCount}
+          .searchValue=${this.filterValues.GOOSE}
+        ></gse-control-editor>`;
+      case 'SampledValue':
+        return html`<sampled-value-control-editor
+          .doc=${this.doc}
+          .editCount=${this.editCount}
+          .searchValue=${this.filterValues.SampledValue}
+        ></sampled-value-control-editor>`;
+      case 'DataSet':
+        return html`<data-set-editor
+          .doc=${this.doc}
+          .editCount=${this.editCount}
+          .searchValue=${this.filterValues.DataSet}
+        ></data-set-editor>`;
+      default:
+        return nothing;
+    }
+  }
 
   render() {
     return html`<form class="publishertypeselector">
@@ -41,9 +105,7 @@ export default class PublisherPlugin extends ScopedElementsMixin(LitElement) {
             id="report-radio"
             value="report"
             ?checked=${this.publisherType === 'Report'}
-            @change=${() => {
-              this.publisherType = 'Report';
-            }}
+            @change=${() => this.handlePublisherTypeChange('Report')}
           ></md-radio>
           <label for="report-radio">Report</label>
         </span>
@@ -52,9 +114,7 @@ export default class PublisherPlugin extends ScopedElementsMixin(LitElement) {
             id="goose-radio"
             value="goose"
             ?checked=${this.publisherType === 'GOOSE'}
-            @change=${() => {
-              this.publisherType = 'GOOSE';
-            }}
+            @change=${() => this.handlePublisherTypeChange('GOOSE')}
           ></md-radio>
           <label for="goose-radio">GOOSE</label>
         </span>
@@ -63,9 +123,7 @@ export default class PublisherPlugin extends ScopedElementsMixin(LitElement) {
             id="smv-radio"
             value="smv"
             ?checked=${this.publisherType === 'SampledValue'}
-            @change=${() => {
-              this.publisherType = 'SampledValue';
-            }}
+            @change=${() => this.handlePublisherTypeChange('SampledValue')}
           ></md-radio>
           <label for="smv-radio">SampledValue</label>
         </span>
@@ -74,41 +132,12 @@ export default class PublisherPlugin extends ScopedElementsMixin(LitElement) {
             id="ds-radio"
             value="ds"
             ?checked=${this.publisherType === 'DataSet'}
-            @change=${() => {
-              this.publisherType = 'DataSet';
-            }}
+            @change=${() => this.handlePublisherTypeChange('DataSet')}
           ></md-radio>
           <label for="ds-radio">DataSet</label>
         </span>
       </form>
-      <report-control-editor
-        .doc=${this.doc}
-        editCount="${this.editCount}"
-        class="${classMap({
-          hidden: this.publisherType !== 'Report',
-        })}"
-      ></report-control-editor
-      ><gse-control-editor
-        .doc=${this.doc}
-        editCount="${this.editCount}"
-        class="${classMap({
-          hidden: this.publisherType !== 'GOOSE',
-        })}"
-      ></gse-control-editor
-      ><sampled-value-control-editor
-        .doc=${this.doc}
-        editCount="${this.editCount}"
-        class="${classMap({
-          hidden: this.publisherType !== 'SampledValue',
-        })}"
-      ></sampled-value-control-editor
-      ><data-set-editor
-        .doc=${this.doc}
-        editCount="${this.editCount}"
-        class="${classMap({
-          hidden: this.publisherType !== 'DataSet',
-        })}"
-      ></data-set-editor>`;
+      ${this.renderEditor()} `;
   }
 
   static styles = css`
@@ -123,7 +152,7 @@ export default class PublisherPlugin extends ScopedElementsMixin(LitElement) {
       --md-sys-color-on-primary: var(--oscd-base2);
       --md-sys-color-on-surface-variant: var(--oscd-base00);
       --md-menu-container-color: var(--oscd-base3);
-      font-family: var(--oscd-theme-text-font);
+      font-family: var(--oscd-theme-text-font, Roboto);
       --md-sys-color-surface-container-highest: var(--oscd-base2);
       --md-dialog-container-color: var(--oscd-base3);