From 7787f11f2a1e52b50930ea10bff802894b2fc456 Mon Sep 17 00:00:00 2001 From: "massimo.ferraro" Date: Thu, 12 Dec 2024 19:03:35 +0100 Subject: [PATCH] Generalize input data structure for handling generic branch labels and add caching map Signed-off-by: massimo.ferraro --- demo/src/diagram-viewers/add-diagrams.ts | 77 ++++++++++--------- .../network-area-diagram-viewer.ts | 67 ++++++++++------ src/index.ts | 2 +- 3 files changed, 82 insertions(+), 64 deletions(-) diff --git a/demo/src/diagram-viewers/add-diagrams.ts b/demo/src/diagram-viewers/add-diagrams.ts index 117caa21..af682ef6 100644 --- a/demo/src/diagram-viewers/add-diagrams.ts +++ b/demo/src/diagram-viewers/add-diagrams.ts @@ -34,7 +34,7 @@ import { OnMoveTextNodeCallbackType, OnSelectNodeCallbackType, OnToggleNadHoverCallbackType, - FLOW, + BranchLabel, } from '../../../src'; export const addNadToDemo = () => { @@ -63,40 +63,41 @@ export const addNadToDemo = () => { ?.getElementsByTagName('svg')[0] .setAttribute('style', 'border:2px; border-style:solid;'); - // add range slider to update flows - const flowsSlider = document.createElement('input'); - flowsSlider.type = 'range'; - flowsSlider.min = '1'; - flowsSlider.max = '20'; - flowsSlider.value = '1'; - flowsSlider.step = 'any'; - flowsSlider.style.width = '97%'; - flowsSlider.style.display = 'flex'; - flowsSlider.style.justifyContent = 'space-between'; - flowsSlider.style.padding = '0 5px'; - flowsSlider.addEventListener('input', () => { - const flows = - '[{"branchId": "NGEN_NHV1", "side": 1, "p": ' + - (627 - +flowsSlider.value * 20) + - '}, {"branchId": "NGEN_NHV1", "side": 2, "p": ' + - (-626 + +flowsSlider.value * 20) + - '}, {"branchId": "NHV1_NHV2_1", "side": 1, "p": ' + - (322 - +flowsSlider.value * 20) + - '}, {"branchId": "NHV1_NHV2_1", "side": 2, "p": ' + - (-320 + +flowsSlider.value * 20) + - '}, {"branchId": "NHV1_NHV2_2", "side": 1, "p": ' + - (322 - +flowsSlider.value * 20) + - '}, {"branchId": "NHV1_NHV2_2", "side": 2, "p": ' + - (-320 + +flowsSlider.value * 20) + - '}, {"branchId": "NHV2_NLOAD", "side": 1, "p": ' + - (-620 + +flowsSlider.value * 20) + - '}, {"branchId": "NHV2_NLOAD", "side": 2, "p": ' + - (621 - +flowsSlider.value * 20) + + // add range slider to update branch labels + const branchLabelsSlider = document.createElement('input'); + branchLabelsSlider.type = 'range'; + branchLabelsSlider.min = '1'; + branchLabelsSlider.max = '20'; + branchLabelsSlider.value = '1'; + branchLabelsSlider.step = 'any'; + branchLabelsSlider.style.width = '97%'; + branchLabelsSlider.style.display = 'flex'; + branchLabelsSlider.style.justifyContent = 'space-between'; + branchLabelsSlider.style.padding = '0 5px'; + branchLabelsSlider.addEventListener('input', () => { + const branchLabels = + '[{"branchId": "NGEN_NHV1", "value1": ' + + (627 - +branchLabelsSlider.value * 20) + + ', "value2": ' + + (-626 + +branchLabelsSlider.value * 20) + + '}, {"branchId": "NHV1_NHV2_1", "value1": ' + + (322 - +branchLabelsSlider.value * 20) + + ', "value2": ' + + (-320 + +branchLabelsSlider.value * 20) + + '}, {"branchId": "NHV1_NHV2_2", "value1": ' + + (322 - +branchLabelsSlider.value * 20) + + ', "value2": ' + + (-320 + +branchLabelsSlider.value * 20) + + '}, {"branchId": "NHV2_NLOAD", "value1": ' + + (-620 + +branchLabelsSlider.value * 20) + + ', "value2": ' + + (621 - +branchLabelsSlider.value * 20) + '}]'; - nadViewer.setJsonFlows(flows); + console.log(branchLabels); + nadViewer.setJsonBranchLabels(branchLabels); }); - document.getElementById('svg-container-nad')?.appendChild(flowsSlider); + document.getElementById('svg-container-nad')?.appendChild(branchLabelsSlider); }); fetch(NadSvgExample) @@ -150,18 +151,18 @@ export const addNadToDemo = () => { ?.getElementsByTagName('svg')[0] .setAttribute('style', 'border:2px; border-style:solid;'); - // add button to update flows - const flows = '[{"branchId": "L7-5-0", "side": 1, "p": 609}, {"branchId": "L7-5-0", "side": 2, "p": -611}]'; + // add button to update branch labels + const branchLabels = '[{"branchId": "L7-5-0", "value1": 609, "value2": -611}]'; const updateFlowsTextArea = document.createElement('textarea'); updateFlowsTextArea.rows = 2; updateFlowsTextArea.cols = 65; - updateFlowsTextArea.value = flows; + updateFlowsTextArea.value = branchLabels; const br = document.createElement('br'); const updateFlowsButton = document.createElement('button'); - updateFlowsButton.innerHTML = 'Update Flows'; + updateFlowsButton.innerHTML = 'Update Branch Labels'; updateFlowsButton.addEventListener('click', () => { - const flowsArray: FLOW[] = JSON.parse(updateFlowsTextArea.value); - nadViewer.setFlows(flowsArray); + const branchLabelsArray: BranchLabel[] = JSON.parse(updateFlowsTextArea.value); + nadViewer.setBranchLabels(branchLabelsArray); }); const updateFlowsDiv = document.createElement('div'); updateFlowsDiv.appendChild(updateFlowsTextArea); diff --git a/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts b/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts index 66a76e61..f4f251de 100644 --- a/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts +++ b/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts @@ -16,7 +16,7 @@ import { debounce } from '@mui/material'; type DIMENSIONS = { width: number; height: number; viewbox: VIEWBOX }; type VIEWBOX = { x: number; y: number; width: number; height: number }; -export type FLOW = { branchId: string; side: number; p: number }; +export type BranchLabel = { branchId: string; value1: number | string; value2: number | string }; export type OnMoveNodeCallbackType = ( equipmentId: string, @@ -74,6 +74,7 @@ export class NetworkAreaDiagramViewer { onSelectNodeCallback: OnSelectNodeCallbackType | null; dynamicCssRules: CSS_RULE[]; onToggleHoverCallback: OnToggleNadHoverCallbackType | null; + edgesMap: Map = new Map(); constructor( container: HTMLElement, @@ -1392,42 +1393,58 @@ export class NetworkAreaDiagramViewer { }); } - public setJsonFlows(flows: string) { - const flowsArray: FLOW[] = JSON.parse(flows); - this.setFlows(flowsArray); + public setJsonBranchLabels(branchLabels: string) { + const branchLabelsArray: BranchLabel[] = JSON.parse(branchLabels); + this.setBranchLabels(branchLabelsArray); } - public setFlows(flows: FLOW[]) { - flows.forEach((flow) => { - this.setFlow(flow.branchId, flow.side, flow.p); + public setBranchLabels(branchLabels: BranchLabel[]) { + branchLabels.forEach((branchLabel) => { + if (!this.edgesMap.has(branchLabel.branchId)) { + const edge: EdgeMetadata | undefined = this.diagramMetadata?.edges.find( + (edge) => edge.equipmentId == branchLabel.branchId + ); + if (edge === undefined) { + console.warn('Skipping updating branch ' + branchLabel.branchId + ' labels: branch not found'); + return; + } + this.edgesMap.set(branchLabel.branchId, edge); + } + this.setBranchSideLabel( + branchLabel.branchId, + '1', + this.edgesMap.get(branchLabel.branchId)?.svgId ?? '-1', + branchLabel.value1 + ); + this.setBranchSideLabel( + branchLabel.branchId, + '2', + this.edgesMap.get(branchLabel.branchId)?.svgId ?? '-1', + branchLabel.value2 + ); }); } - private setFlow(branchId: string, side: number, p: number) { - const edge: EdgeMetadata | undefined = this.diagramMetadata?.edges.find((edge) => edge.equipmentId == branchId); - if (edge !== undefined) { - const halfEdge: SVGGraphicsElement | null = this.container.querySelector( - "[id='" + edge.svgId + '.' + side + "']" - ); - const arrowGElement = halfEdge?.lastElementChild?.firstElementChild; - if (arrowGElement !== null && arrowGElement !== undefined) { - arrowGElement.classList.remove('nad-state-in', 'nad-state-out'); - if (p < 0) { + private setBranchSideLabel(branchId: string, side: string, edgeId: string, value: number | string) { + const halfEdge: SVGGraphicsElement | null = this.container.querySelector("[id='" + edgeId + '.' + side + "']"); + const arrowGElement = halfEdge?.lastElementChild?.firstElementChild; + if (arrowGElement !== null && arrowGElement !== undefined) { + arrowGElement.classList.remove('nad-state-in', 'nad-state-out'); + if (typeof value === 'number') { + if (value < 0) { arrowGElement.classList.add('nad-state-in'); } else { arrowGElement.classList.add('nad-state-out'); } - const flowElement = arrowGElement.lastElementChild; - if (flowElement !== null && flowElement !== undefined) { - flowElement.innerHTML = p.toFixed(0); - } else { - console.warn('Skipping updating branch ' + branchId + ' flow: edge not found'); - } + } + const branchLabelElement = arrowGElement.lastElementChild; + if (branchLabelElement !== null && branchLabelElement !== undefined) { + branchLabelElement.innerHTML = typeof value === 'number' ? value.toFixed(0) : value; } else { - console.warn('Skipping updating branch ' + branchId + ' flow: edge not found'); + console.warn('Skipping updating branch ' + branchId + ' side ' + side + ' label: edge not found'); } } else { - console.warn('Skipping updating branch ' + branchId + ' flow: branch not found'); + console.warn('Skipping updating branch ' + branchId + ' side ' + side + ' label: edge not found'); } } } diff --git a/src/index.ts b/src/index.ts index fe229cc9..9379f634 100644 --- a/src/index.ts +++ b/src/index.ts @@ -11,7 +11,7 @@ export type { OnMoveTextNodeCallbackType, OnSelectNodeCallbackType, OnToggleNadHoverCallbackType, - FLOW, + BranchLabel, } from './components/network-area-diagram-viewer/network-area-diagram-viewer'; export type { DiagramMetadata } from './components/network-area-diagram-viewer/diagram-metadata'; export { THRESHOLD_STATUS } from './components/network-area-diagram-viewer/dynamic-css-utils';