Skip to content

Commit e9703b2

Browse files
noraebnoraeb
authored
Merge pull request #5 from noraeb/fix/performance-issues
fix: performance issues
2 parents f36e468 + 6fecf90 commit e9703b2

File tree

10 files changed

+169
-73
lines changed

10 files changed

+169
-73
lines changed

‎editors/base-element-editor.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
identity,
1515
} from '@openenergytools/scl-lib';
1616
import '@openenergytools/filterable-lists/dist/action-list.js';
17+
import { ActionList } from '@openenergytools/filterable-lists/dist/ActionList.js';
1718
import {
1819
isFCDACompatibleWithIED,
1920
queryLDevice,
@@ -43,6 +44,10 @@ export class BaseElementEditor extends ScopedElementsMixin(LitElement) {
4344
@property({ type: Number })
4445
editCount = -1;
4546

47+
/** Search/filter value for action-lists */
48+
@property({ type: String })
49+
searchValue = '';
50+
4651
@state()
4752
selectCtrlBlock?: Element;
4853

@@ -60,6 +65,15 @@ export class BaseElementEditor extends ScopedElementsMixin(LitElement) {
6065

6166
@query('.change.dataset') changeDataSet!: MdIconButton;
6267

68+
@query('.selectionlist') selectionList?: ActionList | null;
69+
70+
updated(changedProps: Map<string | number | symbol, unknown>) {
71+
super.updated?.(changedProps);
72+
if (changedProps.has('searchValue') && this.selectionList) {
73+
this.selectionList.searchValue = this.searchValue;
74+
}
75+
}
76+
6377
get hasCopyControlSelected(): boolean {
6478
return this.controlBlockCopyOptions.some(o => o.selected);
6579
}

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,15 @@ describe('DataSet editor component', () => {
5252
'DataSet'
5353
);
5454
});
55+
56+
it('sets searchValue on ActionList when passed as a prop', async () => {
57+
const el = await fixture(
58+
html`<data-set-editor .doc="${doc}" searchValue="IED1"></data-set-editor>`
59+
);
60+
await (el as DataSetEditor).updateComplete;
61+
62+
const actionList = (el as DataSetEditor).selectionList;
63+
expect(actionList).to.exist;
64+
expect(actionList.searchValue).to.equal('IED1');
65+
});
5566
});

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ export class DataSetEditor extends ScopedElementsMixin(LitElement) {
3636
@property({ type: Number })
3737
editCount = 0;
3838

39+
@property({ type: String }) searchValue = '';
40+
3941
@state()
4042
selectedDataSet?: Element;
4143

@@ -61,6 +63,13 @@ export class DataSetEditor extends ScopedElementsMixin(LitElement) {
6163
super.update(props);
6264
} */
6365

66+
updated(changedProps: Map<string | number | symbol, unknown>) {
67+
super.updated?.(changedProps);
68+
if (changedProps.has('searchValue') && this.selectionList) {
69+
this.selectionList.searchValue = this.searchValue;
70+
}
71+
}
72+
6473
private renderElementEditorContainer(): TemplateResult {
6574
if (this.selectedDataSet)
6675
return html`<div class="elementeditorcontainer">

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

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,13 @@ function timeout(ms: number) {
2323
});
2424
}
2525

26+
const doc = new DOMParser().parseFromString(gseControlDoc, 'application/xml');
27+
2628
describe('GSEControl editor component', () => {
2729
let editor: GseControlEditor;
2830
let editEvent: SinonSpy;
2931

3032
beforeEach(async () => {
31-
const doc = new DOMParser().parseFromString(
32-
gseControlDoc,
33-
'application/xml'
34-
);
35-
3633
editor = await fixture(
3734
html`<gse-control-editor .doc="${doc}"></gse-control-editor>`
3835
);
@@ -91,4 +88,18 @@ describe('GSEControl editor component', () => {
9188
'datSet2'
9289
);
9390
});
91+
92+
it('sets searchValue on ActionList when passed as a prop', async () => {
93+
const el = await fixture(
94+
html`<gse-control-editor
95+
.doc="${doc}"
96+
searchValue="GSE1"
97+
></gse-control-editor>`
98+
);
99+
await (el as GseControlEditor).updateComplete;
100+
101+
const actionList = (el as GseControlEditor).selectionList;
102+
expect(actionList).to.exist;
103+
expect(actionList?.searchValue).to.equal('GSE1');
104+
});
94105
});

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,6 @@ export class GseControlEditor extends BaseElementEditor {
3838
'md-checkbox': MdCheckbox,
3939
};
4040

41-
@query('.selectionlist') selectionList!: ActionList;
42-
4341
@query('.change.scl.element') selectGSEControlButton!: MdOutlinedButton;
4442

4543
@query('gse-control-element-editor')
@@ -129,7 +127,7 @@ export class GseControlEditor extends BaseElementEditor {
129127
this.selectCtrlBlock = gseControl;
130128
this.selectedDataSet = this.getDataSet(gseControl);
131129

132-
this.selectionList.classList.add('hidden');
130+
this.selectionList?.classList.add('hidden');
133131
this.selectGSEControlButton.classList.remove('hidden');
134132
},
135133
actions: [
@@ -193,7 +191,7 @@ export class GseControlEditor extends BaseElementEditor {
193191
return html`<md-outlined-button
194192
class="change scl element"
195193
@click=${() => {
196-
this.selectionList.classList.remove('hidden');
194+
this.selectionList?.classList.remove('hidden');
197195
this.selectGSEControlButton.classList.add('hidden');
198196
}}
199197
>Selected GOOSE</md-outlined-button

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

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,16 @@ function timeout(ms: number) {
2424
});
2525
}
2626

27+
const doc = new DOMParser().parseFromString(
28+
reportControlDoc,
29+
'application/xml'
30+
);
31+
2732
describe('ReportControl editor component', () => {
2833
let editor: ReportControlEditor;
2934
let editEvent: SinonSpy;
3035

3136
beforeEach(async () => {
32-
const doc = new DOMParser().parseFromString(
33-
reportControlDoc,
34-
'application/xml'
35-
);
36-
3737
editor = await fixture(
3838
html`<report-control-editor .doc="${doc}"></report-control-editor>`
3939
);
@@ -93,4 +93,18 @@ describe('ReportControl editor component', () => {
9393
'datSet2'
9494
);
9595
});
96+
97+
it('sets searchValue on ActionList when passed as a prop', async () => {
98+
const el = await fixture(
99+
html`<report-control-editor
100+
.doc="${doc}"
101+
searchValue="Report1"
102+
></report-control-editor>`
103+
);
104+
await (el as ReportControlEditor).updateComplete;
105+
106+
const actionList = (el as ReportControlEditor).selectionList;
107+
expect(actionList).to.exist;
108+
expect(actionList.searchValue).to.equal('Report1');
109+
});
96110
});

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

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,13 @@ function timeout(ms: number) {
2626
});
2727
}
2828

29+
const doc = new DOMParser().parseFromString(smvControlDoc, 'application/xml');
30+
2931
describe('SampledValueControl editor component', () => {
3032
let editor: SampledValueControlEditor;
3133
let editEvent: SinonSpy;
3234

3335
beforeEach(async () => {
34-
const doc = new DOMParser().parseFromString(
35-
smvControlDoc,
36-
'application/xml'
37-
);
38-
3936
editor = await fixture(
4037
html`<sampled-value-control-editor
4138
.doc="${doc}"
@@ -85,4 +82,18 @@ describe('SampledValueControl editor component', () => {
8582
'datSet2'
8683
);
8784
});
85+
86+
it('sets searchValue on ActionList when passed as a prop', async () => {
87+
const el = await fixture(
88+
html`<sampled-value-control-editor
89+
.doc="${doc}"
90+
searchValue="SV1"
91+
></sampled-value-control-editor>`
92+
);
93+
await (el as SampledValueControlEditor).updateComplete;
94+
95+
const actionList = (el as SampledValueControlEditor).selectionList;
96+
expect(actionList).to.exist;
97+
expect(actionList.searchValue).to.equal('SV1');
98+
});
8899
});

‎oscd-publisher.ts‎

Lines changed: 74 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/* eslint-disable import/no-extraneous-dependencies */
2-
import { css, html, LitElement } from 'lit';
2+
import { css, html, LitElement, nothing } from 'lit';
33
import { property, state } from 'lit/decorators.js';
4-
import { classMap } from 'lit/directives/class-map.js';
54

65
import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
76

@@ -12,6 +11,17 @@ import { GseControlEditor } from './editors/gsecontrol/gse-control-editor.js';
1211
import { ReportControlEditor } from './editors/report/report-control-editor.js';
1312
import { SampledValueControlEditor } from './editors/sampledvalue/sampled-value-control-editor.js';
1413

14+
const EditorSelector = {
15+
Report: 'report-control-editor',
16+
GOOSE: 'gse-control-editor',
17+
SampledValue: 'sampled-value-control-editor',
18+
DataSet: 'data-set-editor',
19+
} as const;
20+
21+
type PublisherType = 'Report' | 'GOOSE' | 'SampledValue' | 'DataSet';
22+
23+
type EditorSelectorType = (typeof EditorSelector)[keyof typeof EditorSelector];
24+
1525
/** An editor [[`plugin`]] to configure `Report`, `GOOSE`, `SampledValue` control blocks and its `DataSet` */
1626
export default class PublisherPlugin extends ScopedElementsMixin(LitElement) {
1727
static scopedElements = {
@@ -31,8 +41,62 @@ export default class PublisherPlugin extends ScopedElementsMixin(LitElement) {
3141
editCount = 0;
3242

3343
@state()
34-
private publisherType: 'Report' | 'GOOSE' | 'SampledValue' | 'DataSet' =
35-
'GOOSE';
44+
private publisherType: PublisherType = 'GOOSE';
45+
46+
private filterValues: Record<PublisherType, string> = {
47+
Report: '',
48+
GOOSE: '',
49+
SampledValue: '',
50+
DataSet: '',
51+
};
52+
53+
private saveCurrentSearchValue() {
54+
const selector: EditorSelectorType = EditorSelector[this.publisherType];
55+
const editor = this.renderRoot.querySelector(selector) as {
56+
selectionList?: { searchValue: string };
57+
} | null;
58+
59+
if (editor) {
60+
this.filterValues[this.publisherType] =
61+
editor.selectionList?.searchValue || '';
62+
}
63+
}
64+
65+
private handlePublisherTypeChange(newType: PublisherType) {
66+
this.saveCurrentSearchValue();
67+
this.publisherType = newType;
68+
}
69+
70+
private renderEditor() {
71+
switch (this.publisherType) {
72+
case 'Report':
73+
return html`<report-control-editor
74+
.doc=${this.doc}
75+
.editCount=${this.editCount}
76+
.searchValue=${this.filterValues.Report}
77+
></report-control-editor>`;
78+
case 'GOOSE':
79+
return html`<gse-control-editor
80+
.doc=${this.doc}
81+
.editCount=${this.editCount}
82+
.searchValue=${this.filterValues.GOOSE}
83+
></gse-control-editor>`;
84+
case 'SampledValue':
85+
return html`<sampled-value-control-editor
86+
.doc=${this.doc}
87+
.editCount=${this.editCount}
88+
.searchValue=${this.filterValues.SampledValue}
89+
></sampled-value-control-editor>`;
90+
case 'DataSet':
91+
return html`<data-set-editor
92+
.doc=${this.doc}
93+
.editCount=${this.editCount}
94+
.searchValue=${this.filterValues.DataSet}
95+
></data-set-editor>`;
96+
default:
97+
return nothing;
98+
}
99+
}
36100

37101
render() {
38102
return html`<form class="publishertypeselector">
@@ -41,9 +105,7 @@ export default class PublisherPlugin extends ScopedElementsMixin(LitElement) {
41105
id="report-radio"
42106
value="report"
43107
?checked=${this.publisherType === 'Report'}
44-
@change=${() => {
45-
this.publisherType = 'Report';
46-
}}
108+
@change=${() => this.handlePublisherTypeChange('Report')}
47109
></md-radio>
48110
<label for="report-radio">Report</label>
49111
</span>
@@ -52,9 +114,7 @@ export default class PublisherPlugin extends ScopedElementsMixin(LitElement) {
52114
id="goose-radio"
53115
value="goose"
54116
?checked=${this.publisherType === 'GOOSE'}
55-
@change=${() => {
56-
this.publisherType = 'GOOSE';
57-
}}
117+
@change=${() => this.handlePublisherTypeChange('GOOSE')}
58118
></md-radio>
59119
<label for="goose-radio">GOOSE</label>
60120
</span>
@@ -63,9 +123,7 @@ export default class PublisherPlugin extends ScopedElementsMixin(LitElement) {
63123
id="smv-radio"
64124
value="smv"
65125
?checked=${this.publisherType === 'SampledValue'}
66-
@change=${() => {
67-
this.publisherType = 'SampledValue';
68-
}}
126+
@change=${() => this.handlePublisherTypeChange('SampledValue')}
69127
></md-radio>
70128
<label for="smv-radio">SampledValue</label>
71129
</span>
@@ -74,41 +132,12 @@ export default class PublisherPlugin extends ScopedElementsMixin(LitElement) {
74132
id="ds-radio"
75133
value="ds"
76134
?checked=${this.publisherType === 'DataSet'}
77-
@change=${() => {
78-
this.publisherType = 'DataSet';
79-
}}
135+
@change=${() => this.handlePublisherTypeChange('DataSet')}
80136
></md-radio>
81137
<label for="ds-radio">DataSet</label>
82138
</span>
83139
</form>
84-
<report-control-editor
85-
.doc=${this.doc}
86-
editCount="${this.editCount}"
87-
class="${classMap({
88-
hidden: this.publisherType !== 'Report',
89-
})}"
90-
></report-control-editor
91-
><gse-control-editor
92-
.doc=${this.doc}
93-
editCount="${this.editCount}"
94-
class="${classMap({
95-
hidden: this.publisherType !== 'GOOSE',
96-
})}"
97-
></gse-control-editor
98-
><sampled-value-control-editor
99-
.doc=${this.doc}
100-
editCount="${this.editCount}"
101-
class="${classMap({
102-
hidden: this.publisherType !== 'SampledValue',
103-
})}"
104-
></sampled-value-control-editor
105-
><data-set-editor
106-
.doc=${this.doc}
107-
editCount="${this.editCount}"
108-
class="${classMap({
109-
hidden: this.publisherType !== 'DataSet',
110-
})}"
111-
></data-set-editor>`;
140+
${this.renderEditor()} `;
112141
}
113142

114143
static styles = css`
@@ -123,7 +152,7 @@ export default class PublisherPlugin extends ScopedElementsMixin(LitElement) {
123152
--md-sys-color-on-primary: var(--oscd-base2);
124153
--md-sys-color-on-surface-variant: var(--oscd-base00);
125154
--md-menu-container-color: var(--oscd-base3);
126-
font-family: var(--oscd-theme-text-font);
155+
font-family: var(--oscd-theme-text-font, Roboto);
127156
--md-sys-color-surface-container-highest: var(--oscd-base2);
128157
--md-dialog-container-color: var(--oscd-base3);
129158

0 commit comments

Comments
 (0)