Feat/baylabels

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

@@ -1,4 +1,5 @@
 import { IEDQueries } from './queries.ied'
+import { SCDQueries } from '../scd-query'
 // CONSTANTS
 import { MESSAGE_TYPE } from '@/constants/message.contant'
 // TYPES
@@ -9,9 +10,11 @@ import type { IED } from './types.ied'
 
 export class IEDService {
 	private iedQueries: IEDQueries
+	private scdQueries: SCDQueries
 
 	constructor(private readonly root: Element) {
 		this.iedQueries = new IEDQueries(this.root)
+		this.scdQueries = new SCDQueries(this.root)
 	}
 
 	//====== PUBLIC METHODS
@@ -22,6 +25,7 @@ export class IEDService {
 			return {
 				iedName: ied.name,
 				iedDetails: this.parseDetails(ied.element),
+				bays: this.scdQueries.getBaysByIEDName(ied.name),
 				published: this.findPublishedMessages(ied),
 				received: this.findReceivedMessages(ied, ieds)
 			}

packages/core/src/scd-queries/ied/types.ied.d.ts

@@ -17,6 +17,7 @@ export namespace IED {
 	export type CommunicationInfo = {
 		iedName: string
 		iedDetails: Details
+		bays: Set<string>
 		published: PublishedMessage[]
 		received: ReceivedMessage[]
 	}

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

@@ -10,6 +10,7 @@
 	import { createEventDispatcher } from "svelte"
 	import type { ElkExtendedEdge } from "elkjs"
 	import {
+    isBaySelected,
 		isConnectionSelected,
 		isIEDSelected,
 	} from "../../plugins/communication-explorer/_store-view-filter"
@@ -34,12 +35,23 @@ import BayContainer from "./bay-container/bay-container.svelte"
 		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 @@ import BayContainer from "./bay-container/bay-container.svelte"
 	function dispatchIEDAdditiveSelect(node: IEDElkNode) {
 		dispatch("iedadditiveselect", node)
 	}
+	function dispatchBaySelect(bay: string) {
+		dispatch("bayselect", bay)
+	}
 
 	function dispatchConnectionClick(connection: ElkExtendedEdge) {
 		if (draggingEnabled) {
@@ -218,7 +233,8 @@ import BayContainer from "./bay-container/bay-container.svelte"
 						>
 							<IEDElement
 								{node}
-								isSelected={isIEDSelected(node)}
+								isBaySelected= {(node.bays && node.bays.size > 0) ? isBaySelected(node.bays.values().next().value) : false} 
+								isIEDSelected={isIEDSelected(node)}
 								testid={`ied-${node.label}`}
 							/>
 						</foreignObject>

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

@@ -5,68 +5,91 @@
 	// INPUT
 	// 
 	export let node: IEDElkNode
-	export let isSelected = false
+	export let isIEDSelected = false
+	export let isBaySelected = false
 	export let disabled = false
 	export let testid = ""
 
+	let bays = Array.from(node.bays).join(", ");
 </script>
 
 {#if node}
+	{#if bays.length > 0}
+		<div 
+			class="bayLabel selectable"
+			class:isIrrelevant={!node.isRelevant}
+			class:disabled
+			class:selected={isBaySelected}
+			style="height: {node.bayLabelHeight}px;margin-bottom: {node.bayLabelGap}px"
+		>
+			{#each bays as bay}
+				{bay}
+			{/each}
+		</div>
+	{/if}
+
 	<div
-		class="ied"
+		class="ied selectable"
 		class:isIrrelevant={!node.isRelevant}
 		class:disabled
-		class:selected={isSelected}
+		class:selected={isIEDSelected}
 		data-testid={testid}
+		style="height: {node.iedHeight}px"
 	>
 		{node.label}
 	</div>
 {/if}
 
 <style>
-	.ied {
-		display: grid;
-		place-items: center;
-		height: 100%;
-		width: 100%;
+	.selectable {
 		cursor: pointer;
-		padding: 0.2rem;
 		transition: all 200ms ease-in-out;
-		box-sizing: border-box;
 		user-select: none;
-
+		padding: 0.2em;
 
 		/* TODO: extract colors */
 		background: var(--color-white);
 		border: 1px solid var(--color-cyan);
 		box-shadow: inset 0px 0px 6px rgba(77, 93, 99, 0.15);
 		border-radius: 5px;
+		box-sizing: border-box;
 	}
 
-	.ied:hover:not(.disabled) {
+	.selectable:hover:not(.disabled) {
 		border-style: dashed;
 	}
 
-	.ied.disabled{
+	.selectable.disabled{
 		/* TODO: extract colors */
 		background: rgba(252, 246, 229, 0.5);
 		border: 1px solid rgba(42, 161, 152, 0.2);
 		color: rgba(74, 86, 92, 0.7);
 	}
 
-	.ied.selected {
+	.selectable.selected {
 		color: var(--color-white);
 		background: var(--color-cyan);
 		border-width: 1px;
 		border-color: var(--color-cyan);
 		/* TODO: extract colors */
-		box-shadow: inset 0px 0px 6px rgba(77, 93, 99, 0.15);
 	}
-
-	.ied.selected:hover{
+	
+	.selectable.selected:hover{
 		border-style: dashed;
 		border-color: var(--color-white);
+	}
+
+	.ied {
+		display: grid;
+		place-items: center;
+		width: 100%;
+	}
 
+	.bayLabel {
+		width: fit-content;
+		font-size: 10px;
+		padding-left: 4px;
+		padding-right: 4px;
 	}
 
 	.isIrrelevant {

packages/uilib/src/lib/components/diagram/nodes.ts

@@ -32,12 +32,16 @@ export type SubnetworkEdge = ElkExtendedEdge & {
 }
 
 export type IEDElkNode = Omit<ElkNode, "edges" | "children"> & {
-	label: string,
+	label: string
 	isRelevant?: boolean
 	isBayNode?: boolean
 	edges?: IEDConnection[]
 	children: IEDElkNode[]
 	details: IED.Details
+	bays: Set<string>
+	bayLabelHeight: number
+	bayLabelGap: number
+	iedHeight: number
 }
 
 export type BayElkNode = Omit<IEDElkNode, "isBayNode"> & {

packages/uilib/src/lib/plugins/communication-explorer/_func-layout-calculation/config.ts

@@ -1,6 +1,8 @@
 export type Config = {
-	width: number,
-	height: number,
+	iedWidth: number,
+	iedHeight: number,
+	bayLabelHeight: number,
+	bayLabelGap: number,
 	spacingBase?: number,
 	spacingBetweenNodes?: number,
 	// heightPerConnection: number,

packages/uilib/src/lib/plugins/communication-explorer/_func-layout-calculation/node-layout-connections.ts

@@ -1,5 +1,5 @@
 import { MESSAGE_TYPE } from '@oscd-plugins/core'
-import { hasActiveIEDSelection, isIEDSelected } from '../_store-view-filter'
+import { hasActiveIEDSelection, hasActiveBaySelection, isIEDSelected } from '../_store-view-filter'
 // TYPES
 import type { IED, Utils } from '@oscd-plugins/core'
 import type { SelectedFilter } from '../_store-view-filter'
@@ -93,17 +93,21 @@ function convertPublishedMessagesToConnections(
 		const isRelevantMessageType: boolean =
 			selectedMessageTypes.includes(messageType) || isUnknownMessageType
 
-		let isRelevant = true
-		if (hasSelection) {
-			isRelevant = checkRelevance(selectionFilter, targetIED, sourceIED)
-			if (isRelevant && !isRelevantMessageType) {
-				isRelevant = false
-			}
-		} else {
-			if (!isRelevantMessageType) {
-				isRelevant = false
+		//TODO: this whole function seems like a lot of duplicate code?
+		let isRelevant = !hasActiveBaySelection() 
+		if (isRelevant) {
+			if (hasSelection) {
+				isRelevant = checkRelevance(selectionFilter, targetIED, sourceIED)
+				if (isRelevant && !isRelevantMessageType) {
+					isRelevant = false
+				}
+			} else {
+				if (!isRelevantMessageType) {
+					isRelevant = false
+				}
 			}
 		}
+
 		// console.log({level: "dev", msg: "IEDConnectionWithCustomValues", message, checkRelevance: checkRelevance(selectionFilter, targetIED, sourceIED), isRelevant, isRelevantMessageType, selectedMessageTypes, messageType, selectionFilter, targetIED, sourceIED})
 
 		//
@@ -170,15 +174,17 @@ function convertReceivedMessagesToConnections(
 		const isRelevantMessageType: boolean =
 			selectedMessageTypes.includes(messageType) || isUnknownMessageType
 
-		let isRelevant = true
-		if (hasSelection) {
-			isRelevant = checkRelevance(selectionFilter, targetIED, sourceIED)
-			if (isRelevant && !isRelevantMessageType) {
-				isRelevant = false
-			}
-		} else {
-			if (!isRelevantMessageType) {
-				isRelevant = false
+		let isRelevant = !hasActiveBaySelection()
+		if (isRelevant) {
+			if (hasSelection) {
+				isRelevant = checkRelevance(selectionFilter, targetIED, sourceIED)
+				if (isRelevant && !isRelevantMessageType) {
+					isRelevant = false
+				}
+			} else {
+				if (!isRelevantMessageType) {
+					isRelevant = false
+				}
 			}
 		}
 

packages/uilib/src/lib/plugins/communication-explorer/_func-layout-calculation/node-layout-ieds.ts

@@ -1,8 +1,9 @@
 import type {
+	isBayNode,
 	IEDConnectionWithCustomValues,
 	IEDNode
 } from '../../../components/diagram'
-import { hasActiveIEDSelection, isIEDSelected } from '../_store-view-filter'
+import { hasActiveIEDSelection, isIEDSelected, hasActiveBaySelection, isBaySelected } from '../_store-view-filter'
 import type { Config } from './config'
 // TYPES
 import type { IED } from '@oscd-plugins/core'
@@ -12,7 +13,8 @@ export function generateIEDLayout(
 	edges: IEDConnectionWithCustomValues[],
 	config: Config
 ): IEDNode[] {
-	const hasSelection = hasActiveIEDSelection()
+	const hasIEDSelection = hasActiveIEDSelection()
+	const hasBaySelection = hasActiveBaySelection()
 
 	const relevantEdges = edges.filter((edge) => edge.isRelevant)
 	const relevantNodes = new Set<string>()
@@ -24,21 +26,28 @@ export function generateIEDLayout(
 
 	const children: IEDNode[] = ieds.map((ied, ii) => {
 		let isRelevant = true
-		if (hasSelection) {
+		if (hasIEDSelection) {
 			// TODO: smells, we should be independent of the label
 			const isNodeRelevant = relevantNodes.has(ied.iedName)
 			const isNodeSelected = isIEDSelected({ label: ied.iedName })
 			isRelevant = isNodeRelevant || isNodeSelected
 		}
+		if (hasBaySelection) {
+			isRelevant = isBaySelected(ied.bays.values().next().value) //TODO: this needs to change to support multiple bays!
+		}
 
 		return {
 			id: Id(ii),
-			width: config.width,
-			height: config.height,
+			width: config.iedWidth,
+			height: config.iedHeight + config.bayLabelHeight + config.bayLabelGap,
 			label: ied.iedName,
 			isRelevant: isRelevant,
 			children: [],
-			details: ied.iedDetails
+			details: ied.iedDetails,
+			bays: ied.bays,
+			bayLabelHeight: config.bayLabelHeight,
+			bayLabelGap: config.bayLabelGap,
+			iedHeight: config.iedHeight
 		}
 	})