From 00a6c8df47840821f1c3ee2d2519c26e1046e2a4 Mon Sep 17 00:00:00 2001 From: Robert Wilde Date: Tue, 17 Feb 2026 12:37:12 +0100 Subject: [PATCH 1/4] docs(si-tree-view): provide better tree view example Bring the si-tree-view example closer to the Figma design. Context menu content is given with dummy options and randomized content. --- src/app/examples/si-tree-view/si-tree-view.ts | 219 ++++++++++++------ 1 file changed, 148 insertions(+), 71 deletions(-) diff --git a/src/app/examples/si-tree-view/si-tree-view.ts b/src/app/examples/si-tree-view/si-tree-view.ts index 67649ba9d..e767bb07a 100644 --- a/src/app/examples/si-tree-view/si-tree-view.ts +++ b/src/app/examples/si-tree-view/si-tree-view.ts @@ -13,118 +13,195 @@ import { MenuItemsProvider, SiTreeViewComponent, TreeItem } from '@siemens/eleme host: { class: 'p-5' } }) export class SampleComponent { - menuItems: MenuItemsProvider = item => - Math.random() < 0.5 || item.level === 0 - ? [ - { - title: 'Item One', - badge: 5, - badgeColor: 'danger', - action: () => alert('action one'), - disabled: true - }, - { title: '-' }, - { - title: 'Item Two', - items: [ - { - title: 'Item Three', - icon: 'element-play', - action: (param: any) => alert('action three at ' + param) - } - ] - } - ] - : []; + + private contextClasses: { [key: string]: string[] } = + { + 'device' : ['Option 1', 'Option 2', 'Option 3'], + 'geo' : ['Option A', 'Option B', 'Option C'], + 'infra' : ['Analyze', 'Map', 'Restructure'], + 'discDevices' : ['Assign all', 'Forget all'], + 'assignedDevices' : ['Remove all', 'Update'], + }; + + private getRandomNumber(max: number): number { + return this.getRandomBoolean() ? Math.ceil(Math.random() * max) : 0; + } + + private getRandomBoolean(): boolean { + return Math.random() < 0.5; + } + + private getRandomBadgeColor(): string { + return this.getRandomBoolean() ? 'warning' : 'info'; + } + + private getRandomIcon(): string { + return this.getRandomBoolean() ? (this.getRandomBoolean() ? 'element-light' : 'element-light-on') : ''; + } + + menuItems: MenuItemsProvider = item => + { + const key = item.dataField2 as string; + if(!key) return []; + const options = this.contextClasses[key] || []; + return options.map(option => ({ + title: option, + badge: this.getRandomNumber(10), + badgeColor: this.getRandomBadgeColor(), + icon: this.getRandomIcon(), + action: () => alert(`Performed action \"${option}\"`), + disabled: false + })); + }; treeItems: TreeItem[] = [ { - label: 'Company1', - dataField1: 'SI', + label: 'Discovered Devices', + dataField2: 'discDevices', + badge: '2', + badgeColor: 'info', + icon: 'element-show', + children: [ + { + label: 'Automation station', + dataField1: '[AS_TRA_155]', + icon: 'element-automation-station', + dataField2: "device", + state: 'leaf' + }, + { + label: 'Unknown device', + dataField1: '[X3_456_dfsda]', + icon: 'element-device-alt', + dataField2: "device", + state: 'leaf' + }, + ] + }, + { + label: 'Geographical', + icon: 'element-map-location', + dataField2: 'geo', stateIndicatorColor: 'red', - icon: 'element-project', children: [ { - label: 'Milano', - dataField1: 'MIL', - state: 'leaf', - badge: '1', - badgeColor: 'info' + label: 'Mountain View', + dataField1: 'SFR', + state: 'leaf' }, { - label: 'Chicago', - dataField1: 'CHI', + label: 'Zurich', + dataField1: 'ZRH', + dataField2: 'geo', stateIndicatorColor: 'red', state: 'leaf' }, { - label: 'Pune', - dataField1: 'PUN', + label: 'New York', + dataField1: 'NYC', state: 'leaf' }, { - label: 'Zug', - dataField1: 'ZUG', + label: 'Tokyo', + dataField1: 'TYO', + state: 'leaf' + } + ] + }, + { + label: 'Infrastructure', + dataField2: "infra", + icon: 'element-box', + //state: 'leaf' + }, + { + label: 'Assigned Devices', + icon: 'element-assigned', + dataField2: "assignedDevices", + badge: '5', + badgeColor: 'info', + stateIndicatorColor: 'green', + children: [ + { + label: 'Automation station', + dataField1: '[AS_TRA_152]', + icon: 'element-automation-station', + dataField2: "device", + stateIndicatorColor: 'green', children: [ { - label: 'Example Location 1', + label: 'Infrastructure', + icon: 'element-box', state: 'leaf' }, { - label: 'Example Location 2', + label: 'I/O Bus', + icon: 'element-network', state: 'leaf' }, { - label: 'Example Location 3', + label: 'KNX PL-Link Bus', + icon: 'element-network-backbone', state: 'leaf' }, { - label: 'Example Location 4', + label: 'Room 1', + icon: 'element-room', state: 'leaf' }, { - label: 'Example Location 5', + label: 'Room segment 1', + icon: 'element-room-segment', state: 'leaf' }, { - label: 'Example Location 6', - state: 'leaf' + label: 'HVAC', + icon: 'element-ahu-plant', + stateIndicatorColor: 'green', + children: [ + { + label: 'Supply air VAV', + state: 'leaf' + }, + { + label: 'Cooling coil', + state: 'leaf', + stateIndicatorColor: 'green', + }, + { + label: 'Heating coil', + state: 'leaf' + }, + ] }, - { - label: 'Example Location 7', - state: 'leaf' - } ] - } - ] - }, - { - label: 'Company2', - dataField1: 'GG', - icon: 'element-project', - children: [ + }, { - label: 'Mountain View', - dataField1: 'SFR', - state: 'leaf' + label: 'Automation station', + dataField1: '[AS_TRA_155]', + icon: 'element-automation-station', + dataField2: "device", }, { - label: 'Zurich', - dataField1: 'ZRH', - stateIndicatorColor: 'red', - state: 'leaf' + label: 'Automation station', + dataField1: '[AS_TRA_TX]', + icon: 'element-automation-station', + dataField2: "device", }, { - label: 'New York', - dataField1: 'NYC', - state: 'leaf' + label: 'POL687 VVS11', + dataField1: '[SaturnCB-AS01]', + icon: 'element-automation-station', + dataField2: "device", }, { - label: 'Tokyo', - dataField1: 'TYO', - state: 'leaf' - } + label: 'PXC AS02', + dataField1: '[TPSite ‘S02]', + icon: 'element-automation-station', + dataField2: "device", + }, ] - } + }, + ]; } From 3249bb001e0a8e889e65794afd6cb503947f10c1 Mon Sep 17 00:00:00 2001 From: Robert Wilde Date: Thu, 19 Feb 2026 11:42:42 +0100 Subject: [PATCH 2/4] refactor(si-tree-view): fix lint findings --- src/app/examples/si-tree-view/si-tree-view.ts | 58 +++++++++---------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/src/app/examples/si-tree-view/si-tree-view.ts b/src/app/examples/si-tree-view/si-tree-view.ts index e767bb07a..ba3fb5606 100644 --- a/src/app/examples/si-tree-view/si-tree-view.ts +++ b/src/app/examples/si-tree-view/si-tree-view.ts @@ -13,14 +13,12 @@ import { MenuItemsProvider, SiTreeViewComponent, TreeItem } from '@siemens/eleme host: { class: 'p-5' } }) export class SampleComponent { - - private contextClasses: { [key: string]: string[] } = - { - 'device' : ['Option 1', 'Option 2', 'Option 3'], - 'geo' : ['Option A', 'Option B', 'Option C'], - 'infra' : ['Analyze', 'Map', 'Restructure'], - 'discDevices' : ['Assign all', 'Forget all'], - 'assignedDevices' : ['Remove all', 'Update'], + private contextClasses: { [key: string]: string[] } = { + 'device': ['Option 1', 'Option 2', 'Option 3'], + 'geo': ['Option A', 'Option B', 'Option C'], + 'infra': ['Analyze', 'Map', 'Restructure'], + 'discDevices': ['Assign all', 'Forget all'], + 'assignedDevices': ['Remove all', 'Update'] }; private getRandomNumber(max: number): number { @@ -36,13 +34,16 @@ export class SampleComponent { } private getRandomIcon(): string { - return this.getRandomBoolean() ? (this.getRandomBoolean() ? 'element-light' : 'element-light-on') : ''; + return this.getRandomBoolean() + ? this.getRandomBoolean() + ? 'element-light' + : 'element-light-on' + : ''; } - menuItems: MenuItemsProvider = item => - { + menuItems: MenuItemsProvider = item => { const key = item.dataField2 as string; - if(!key) return []; + if (!key) return []; const options = this.contextClasses[key] || []; return options.map(option => ({ title: option, @@ -66,16 +67,16 @@ export class SampleComponent { label: 'Automation station', dataField1: '[AS_TRA_155]', icon: 'element-automation-station', - dataField2: "device", + dataField2: 'device', state: 'leaf' }, { label: 'Unknown device', dataField1: '[X3_456_dfsda]', icon: 'element-device-alt', - dataField2: "device", + dataField2: 'device', state: 'leaf' - }, + } ] }, { @@ -110,14 +111,14 @@ export class SampleComponent { }, { label: 'Infrastructure', - dataField2: "infra", - icon: 'element-box', + dataField2: 'infra', + icon: 'element-box' //state: 'leaf' }, { label: 'Assigned Devices', icon: 'element-assigned', - dataField2: "assignedDevices", + dataField2: 'assignedDevices', badge: '5', badgeColor: 'info', stateIndicatorColor: 'green', @@ -126,7 +127,7 @@ export class SampleComponent { label: 'Automation station', dataField1: '[AS_TRA_152]', icon: 'element-automation-station', - dataField2: "device", + dataField2: 'device', stateIndicatorColor: 'green', children: [ { @@ -166,42 +167,41 @@ export class SampleComponent { { label: 'Cooling coil', state: 'leaf', - stateIndicatorColor: 'green', + stateIndicatorColor: 'green' }, { label: 'Heating coil', state: 'leaf' - }, + } ] - }, + } ] }, { label: 'Automation station', dataField1: '[AS_TRA_155]', icon: 'element-automation-station', - dataField2: "device", + dataField2: 'device' }, { label: 'Automation station', dataField1: '[AS_TRA_TX]', icon: 'element-automation-station', - dataField2: "device", + dataField2: 'device' }, { label: 'POL687 VVS11', dataField1: '[SaturnCB-AS01]', icon: 'element-automation-station', - dataField2: "device", + dataField2: 'device' }, { label: 'PXC AS02', dataField1: '[TPSite ‘S02]', icon: 'element-automation-station', - dataField2: "device", - }, + dataField2: 'device' + } ] - }, - + } ]; } From 5bde0dc607f54f24fa64b99b27eeb06c3344132e Mon Sep 17 00:00:00 2001 From: Robert Wilde Date: Thu, 19 Feb 2026 11:43:53 +0100 Subject: [PATCH 3/4] test(si-tree-view): update e2e test on tree view --- ...-tree-view-element-examples-chromium-dark-linux.png | 4 ++-- ...tree-view-element-examples-chromium-light-linux.png | 4 ++-- .../si-tree-view--si-tree-view.yaml | 10 ++++------ 3 files changed, 8 insertions(+), 10 deletions(-) diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view-element-examples-chromium-dark-linux.png index 2d989cdde..a9322fe37 100644 --- a/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:61f3c264358f5e86af4fcde3221535954ade16b0f7b90908e6d356c57f0c8c8e -size 8956 +oid sha256:bd677378f7a68079596355d49db9d8b898f2a7913b36ff9fe2d1f382eba67496 +size 14964 diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view-element-examples-chromium-light-linux.png index 5750390ef..ac84117ca 100644 --- a/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ebfc527b9f2241287633ad9dc300b428f5d0479368b98b3ca115eb2e772dc445 -size 8550 +oid sha256:671f34ae92a900f10aeaf08859c242cb73ab4fe827aa49029b5b705ac3141e5b +size 13717 diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view.yaml index ee3844688..ed52fa8ae 100644 --- a/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view.yaml +++ b/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view.yaml @@ -1,7 +1,5 @@ - tree "Company locations": - - treeitem "Company1 SI" [level=1]: - - text: "" - - paragraph: SI - - treeitem "Company2 GG" [level=1]: - - text: "" - - paragraph: GG \ No newline at end of file + - treeitem "Discovered Devices 2" [level=1] + - treeitem "Geographical" [level=1] + - treeitem "Infrastructure" [level=1] + - treeitem "Assigned Devices 5" [level=1] \ No newline at end of file From c7ab95216884f4bbb9bf6ee2f23fdd9b18df157a Mon Sep 17 00:00:00 2001 From: Robert Wilde Date: Thu, 19 Feb 2026 13:32:41 +0100 Subject: [PATCH 4/4] refactor(si-tree-view): fix lint findings --- src/app/examples/si-tree-view/si-tree-view.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/examples/si-tree-view/si-tree-view.ts b/src/app/examples/si-tree-view/si-tree-view.ts index ba3fb5606..98e44d2a3 100644 --- a/src/app/examples/si-tree-view/si-tree-view.ts +++ b/src/app/examples/si-tree-view/si-tree-view.ts @@ -50,7 +50,7 @@ export class SampleComponent { badge: this.getRandomNumber(10), badgeColor: this.getRandomBadgeColor(), icon: this.getRandomIcon(), - action: () => alert(`Performed action \"${option}\"`), + action: () => alert(`Performed action "${option}"`), disabled: false })); };