Feat/baylabels

packages/core/legacy/src/scd-queries/ied/service.ied.ts

@@ -33,6 +33,10 @@ export class IEDService {
 		return communicationInfos
 	}
 
+	public Bays(): Set<string> {
+		return this.scdQueries.getBays()
+	}
+
 	public IEDCommunicationInfosByBay(): Map<string, IED.CommunicationInfo[]> {
 		const selector = 'SCL > Substation > VoltageLevel > Bay > LNode'
 		return this.IEDCommunicationInfosByAncestor({

packages/core/legacy/src/scd-queries/scd-query.ts

@@ -66,7 +66,7 @@ export class SCDQueries {
 
 	public getBaysByIEDName(name: string): Set<string> {
 		const root = this.determineRoot()
-		const selector = `SCL Substation VoltageLevel Bay LNode[iedName='${name}']`
+		const selector = `SCL Substation VoltageLevel Bay LNode${name ? `[iedName='${name}']` : ''}`
 		// const selector = `SCL > Substation > VoltageLevel > Bay > LNode[iedName='${name}']`
 
 		const lnodes = Array.from(root.querySelectorAll(selector))
@@ -84,6 +84,10 @@ export class SCDQueries {
 		return connections
 	}
 
+	public getBays(): Set<string> {
+		return this.getBaysByIEDName('')
+	}
+
 	public getConnectedAPByIEDName(name: string): Set<Element> {
 		const root = this.determineRoot()
 		const selector = `SCL > Communication > SubNetwork > ConnectedAP[iedName='${name}']`

packages/plugins/communication-explorer/CHANGELOG.md

@@ -2,28 +2,36 @@
 
 All notable changes to the communication explorer plugin will be documented here
 
-The format is loosely based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
-and this project should adhere to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [0.0.32] 26-02-2025
-
-## Changed
+## [0.0.35] - 2025-03-12
+### Fixed
+- fixing uilib examples
 
+## [0.0.34] - 2025-02-26
+### Changed
 - revert theme color fix (dark theme)
 
-## [0.0.31] 12-02-2025
+## [0.0.33] - 2025-02-19
+### Added
+- Added option to remove grouping by bay. When selected, bays are visualized by small text labels instead. All IEDs that are part of a bay are selected when clicking a label.
 
+## [0.0.32] - 2025-02-13
 ### Added
+- added outline around IEDs to visualize the bay containing them
+
+### Changed
+- IEDs are now grouped together by their bays
 
+## [0.0.31] - 2025-02-12
+### Added
 - bays (aswell as IEDs) can now be selected in the 'filter' searchbar on the right
 
 ### Changed
-
 - filter dropdown + searchbar are now combined
 
 ## [0.0.30] - 2023-11-14
-
-
 ### Changed
 - accordion is now reacting to filtered service types
 
@@ -32,7 +40,6 @@ and this project should adhere to [Semantic Versioning](https://semver.org/spec/
 - sampled values icon publish is missing
 - caching extracted information to improve performance
 
-
 ## [0.0.29] - 2023-07-20
 ### Fixed
 - align filter pills correctly

packages/uilib/src/lib/components/diagram/+page.svelte

@@ -1,76 +1,93 @@
 <script lang="ts">
-	import type { IEDCommInfo } from "@oscd-plugins/core"
-	import { Diagram, type IEDConnection, type IEDConnectionWithCustomValues, type IEDNode, type RootNode } from "."
-	import { Example } from "../internal"
-	import { calculateLayout } from "../../plugins/communication-explorer/_func-layout-calculation"
-	import { clearIEDSelection, selectConnection, selectIEDNode, filterState, toggleMultiSelectionOfIED } from "../../plugins/communication-explorer/_store-view-filter"
-	import type { Config } from "../../plugins/communication-explorer/_func-layout-calculation/config"
-	import { preferences$ } from "../../plugins/communication-explorer/_store-preferences"
+import type { IEDCommInfo } from '@oscd-plugins/core'
+import {
+	Diagram,
+	type IEDConnection,
+	type IEDConnectionWithCustomValues,
+	type IEDNode,
+	type RootNode
+} from '.'
+import { Example } from '../internal'
+import { calculateLayout } from '../../plugins/communication-explorer/_func-layout-calculation'
+import {
+	clearIEDSelection,
+	selectConnection,
+	selectIEDNode,
+	filterState,
+	toggleMultiSelectionOfIED
+} from '../../plugins/communication-explorer/_store-view-filter'
+import type { Config } from '../../plugins/communication-explorer/_func-layout-calculation/config'
+import { preferences$ } from '../../plugins/communication-explorer/_store-preferences'
 
-	const _config: Config = {
-		height:              40,
-		width:               100,
-		spacingBase:         10,
-		spacingBetweenNodes: 100,
-	}
-
-	const iedInfos: IEDCommInfo[] = [
-		{iedName: "IED_1-1", published: [], received: []},
-		{iedName: "IED_1-2", published: [], received: []},
-
-		{iedName: "IED_2-1", published: [], received: []},
-		{iedName: "IED_2-2", published: [], received: []},
+const _config: Config = {
+	iedWidth: 100,
+	iedHeight: 40,
+	bayLabelHeight: 15,
+	bayLabelGap: 2,
+	spacingBase: 10,
+	spacingBetweenNodes: 100
+}
+
+const iedInfos: IEDCommInfo[] = [
+	{ iedName: 'IED_1-1', published: [], received: [] },
+	{ iedName: 'IED_1-2', published: [], received: [] },
+
+	{ iedName: 'IED_2-1', published: [], received: [] },
+	{ iedName: 'IED_2-2', published: [], received: [] },
 
-		{iedName: "IED_3-1", published: [], received: []},
-		{iedName: "IED_3-2", published: [], received: []},
-	]
+	{ iedName: 'IED_3-1', published: [], received: [] },
+	{ iedName: 'IED_3-2', published: [], received: [] }
+]
 
-	iedInfos[0].received.push({
-		iedName:     iedInfos[1].iedName,
-		serviceType: "GOOSE",
-		srcCBName:   "Dataset_1",
-		data:        [],
-		datSet:      ""
+iedInfos[0].received.push({
+	iedName: iedInfos[1].iedName,
+	serviceType: 'GOOSE',
+	srcCBName: 'Dataset_1',
+	data: [],
+	datSet: ''
 })
-	iedInfos[2].received.push({
-		iedName:     iedInfos[3].iedName,
-		serviceType: "SMV",
-		srcCBName:   "Dataset_1",
-		data:        [],
-		datSet:      ""
+iedInfos[2].received.push({
+	iedName: iedInfos[3].iedName,
+	serviceType: 'SMV',
+	srcCBName: 'Dataset_1',
+	data: [],
+	datSet: ''
 })
-	iedInfos[4].published.push({
-		id:            "1",
-		name:          "name",
-		targetIEDName: iedInfos[5].iedName,
-		serviceType:   "MMS",
-		serviceDatSet: "",
-		serviceCbName: ""
+iedInfos[4].published.push({
+	id: '1',
+	name: 'name',
+	targetIEDName: iedInfos[5].iedName,
+	serviceType: 'MMS',
+	serviceDatSet: '',
+	serviceCbName: ''
 })
 
-	let rootNode: RootNode	
-	$: {
-		(async function (){
-			rootNode = await calculateLayout(iedInfos, _config, $filterState, $preferences$)
-		})()
-	}
-
-	function handleIEDSelect(e: CustomEvent<IEDNode>) {
-		selectIEDNode(e.detail)
-	}
-	function handleIEDAdditiveSelect(e: CustomEvent<IEDNode>) {
-		toggleMultiSelectionOfIED(e.detail)
-	}
-	function handleConnectionClick(e: CustomEvent<IEDConnection>) {
-		// temp till fully migrated: map element to enhanced data model
-		const selectedConnection = e.detail as IEDConnectionWithCustomValues
-		selectConnection(selectedConnection)
-	}
-	function handleClearClick() {
-		clearIEDSelection()
-	}
-
+let rootNode: RootNode
+$: {
+	;(async () => {
+		rootNode = await calculateLayout(
+			iedInfos,
+			_config,
+			$filterState,
+			$preferences$
+		)
+	})()
+}
 
+function handleIEDSelect(e: CustomEvent<IEDNode>) {
+	selectIEDNode(e.detail)
+}
+function handleIEDAdditiveSelect(e: CustomEvent<IEDNode>) {
+	toggleMultiSelectionOfIED(e.detail)
+}
+function handleConnectionClick(e: CustomEvent<IEDConnection>) {
+	// temp till fully migrated: map element to enhanced data model
+	const selectedConnection = e.detail as IEDConnectionWithCustomValues
+	selectConnection(selectedConnection)
+}
+function handleClearClick() {
+	clearIEDSelection()
+}
 </script>
 
 <Example name="Diagram: Different Connection Types">

packages/uilib/src/lib/components/diagram/diagram.svelte

@@ -21,6 +21,7 @@
 	export let rootNode: RootNode
 	export let playAnimation = true
 	export let showConnectionArrows = true
+	export let showBayLabels = false
 
 	//
 	// Setup
@@ -34,12 +35,23 @@
 		if (draggingEnabled) {
 			return
 		}
+
+		const element = e.target;
+		if (!(element instanceof HTMLElement)) {
+			return;
+		}
+
 		const isAdditiveSelect = e.metaKey || e.ctrlKey || e.shiftKey
+
+		if (element.classList.contains("bayLabel")) {
+			dispatchBaySelect(element.textContent)
+			return;
+		}
+
 		if (isAdditiveSelect) {
 			dispatchIEDAdditiveSelect(node)
 			return
 		}
-
 		dispatchIEDSelect(node)
 	}
 	function dispatchIEDSelect(node: IEDElkNode) {
@@ -48,6 +60,9 @@
 	function dispatchIEDAdditiveSelect(node: IEDElkNode) {
 		dispatch("iedadditiveselect", node)
 	}
+	function dispatchBaySelect(bay: string) {
+		dispatch("bayselect", bay)
+	}
 
 	function dispatchConnectionClick(connection: ElkExtendedEdge) {
 		if (draggingEnabled) {
@@ -217,6 +232,7 @@
 							y={node.y}
 							width={node.width}
 							height={node.height}
+							overflow="visible"
 						>
 							<BayContainer
 								{node}
@@ -229,12 +245,15 @@
 							y={node.y}
 							width={node.width}
 							height={node.height}
+							overflow="visible"
 							on:click={(e) => handleIEDClick(e, node)}
 							on:keydown
 						>
 							<IEDElement
 								{node}
-								isSelected={isIEDSelected(node)}
+								isBaySelected= {false}
+								isIEDSelected={isIEDSelected(node)}
+								showBayLabels={showBayLabels}
 								testid={`ied-${node.label}`}
 							/>
 						</foreignObject>

packages/uilib/src/lib/components/diagram/ied-element/+page.svelte

@@ -1,44 +1,42 @@
 <script lang="ts">
-	import { IEDElement } from "."
-	import { Example } from "../../internal"
-	import type { IEDNode } from "../nodes"
-
-	const node: IEDNode = {
-		id: "0", 
-		width: 200, 
-		height: 100, 
-		label: "some longer IED name", 
-		isRelevant: true,
-		children:[],
-	}
-
-	let containerWidth = 200
-	let containerHeight = 30
-
+import { IEDElement } from '.'
+import { Example } from '../../internal'
+import type { IEDNode } from '../nodes'
+
+const node: IEDNode = {
+	id: '0',
+	iedWidth: 200,
+	iedHeight: 30,
+	bayLabelHeight: 15,
+	bayLabelGap: 2,
+	label: 'some longer IED name',
+	isRelevant: true,
+	children: []
+}
 </script>
 
-<label>width:<input type="range" min="200" max="500" step="10" bind:value={containerWidth} /></label>
-<label>height:<input type="range" min="30" max="100" step="10" bind:value={containerHeight} /></label>
+<label>width:<input type="range" min="200" max="500" step="10" bind:value={node.iedWidth} /></label>
+<label>height:<input type="range" min="30" max="100" step="10" bind:value={node.iedHeight} /></label>
 <hr />
 
 <Example name="IED Element">
 
-	<div class="container" style={`--width:${containerWidth}px; --height:${containerHeight}px;`}>
+	<div class="container" style={`--width:${node.iedWidth}px; --height:${node.iedHeight}px;`}>
 		<IEDElement {node}/>
 	</div>
 
 </Example>
 
 <Example name="Disabled IED Element">
-	<div class="container" style={`--width:${containerWidth}px; --height:${containerHeight}px;`}>
+	<div class="container" style={`--width:${node.iedWidth}px; --height:${node.iedHeight}px;`}>
 		<IEDElement {node} disabled={true} />
 	</div>
 
 </Example>
 
 <Example name="Selected IED Element">
-	<div class="container" style={`--width:${containerWidth}px; --height:${containerHeight}px;`}>
-		<IEDElement {node} isSelected={true} />
+	<div class="container" style={`--width:${node.iedWidth}px; --height:${node.iedHeight}px;`}>
+		<IEDElement {node} isIEDSelected={true} isBaySelected={true} />
 	</div>
 
 </Example>