From 0b445753323016ab604fd702f1e3f3f493c343e3 Mon Sep 17 00:00:00 2001 From: "massimo.ferraro" Date: Thu, 12 Dec 2024 12:30:50 +0100 Subject: [PATCH 1/5] Add method for updating flows in NAD viewer Signed-off-by: massimo.ferraro --- demo/src/diagram-viewers/add-diagrams.ts | 83 ++++++++++++++++++- .../data/nad-eurostag-tutorial-example1.svg | 16 ++-- .../network-area-diagram-viewer.ts | 40 +++++++++ src/index.ts | 1 + 4 files changed, 129 insertions(+), 11 deletions(-) diff --git a/demo/src/diagram-viewers/add-diagrams.ts b/demo/src/diagram-viewers/add-diagrams.ts index b0f5c8d5..0a772d05 100644 --- a/demo/src/diagram-viewers/add-diagrams.ts +++ b/demo/src/diagram-viewers/add-diagrams.ts @@ -34,13 +34,14 @@ import { OnMoveTextNodeCallbackType, OnSelectNodeCallbackType, OnToggleNadHoverCallbackType, + FLOW, } from '../../../src'; export const addNadToDemo = () => { fetch(NadSvgExample) .then((response) => response.text()) .then((svgContent) => { - new NetworkAreaDiagramViewer( + const nadViewer = new NetworkAreaDiagramViewer( document.getElementById('svg-container-nad')!, svgContent, NadSvgExampleMeta, @@ -61,6 +62,63 @@ export const addNadToDemo = () => { .getElementById('svg-container-nad') ?.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.style.width = '99%'; + flowsSlider.setAttribute('list', 'flowsDatalist'); + 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) + + '}]'; + nadViewer.setJsonFlows(flows); + }); + + const flowsDatalist = document.createElement('datalist'); + flowsDatalist.id = 'flowsDatalist'; + for (let index = 1; index <= 20; index++) { + const flowsOption = document.createElement('option'); + flowsOption.value = index.toString(); + flowsDatalist.appendChild(flowsOption); + } + + const flowsDiv = document.createElement('div'); + for (let index = 1; index <= 20; index++) { + const flowsSpan = document.createElement('span'); + flowsSpan.innerHTML = index.toString(); + flowsDiv.appendChild(flowsSpan); + } + flowsDiv.style.width = '98%'; + flowsDiv.style.display = 'flex'; + flowsDiv.style.justifyContent = 'space-between'; + flowsDiv.style.padding = '0 5px'; + flowsDiv.style.fontSize = '12px'; + + const updateFlowsDiv = document.createElement('div'); + updateFlowsDiv.appendChild(flowsSlider); + updateFlowsDiv.appendChild(flowsDatalist); + //updateFlowsDiv.appendChild(flowsDiv); + + document.getElementById('svg-container-nad')?.appendChild(updateFlowsDiv); }); fetch(NadSvgExample) @@ -92,7 +150,7 @@ export const addNadToDemo = () => { fetch(NadSvgMultibusVLNodesExample) .then((response) => response.text()) .then((svgContent) => { - new NetworkAreaDiagramViewer( + const nadViewer = new NetworkAreaDiagramViewer( document.getElementById('svg-container-nad-multibus-vlnodes')!, svgContent, NadSvgMultibusVLNodesExampleMeta, @@ -113,6 +171,25 @@ export const addNadToDemo = () => { .getElementById('svg-container-nad-multibus-vlnodes') ?.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}]'; + const updateFlowsTextArea = document.createElement('textarea'); + updateFlowsTextArea.rows = 2; + updateFlowsTextArea.cols = 65; + updateFlowsTextArea.value = flows; + const br = document.createElement('br'); + const updateFlowsButton = document.createElement('button'); + updateFlowsButton.innerHTML = 'Update Flows'; + updateFlowsButton.addEventListener('click', () => { + const flowsArray: FLOW[] = JSON.parse(updateFlowsTextArea.value); + nadViewer.setFlows(flowsArray); + }); + const updateFlowsDiv = document.createElement('div'); + updateFlowsDiv.appendChild(updateFlowsTextArea); + updateFlowsDiv.appendChild(br); + updateFlowsDiv.appendChild(updateFlowsButton); + document.getElementById('svg-container-nad-multibus-vlnodes')?.appendChild(updateFlowsDiv); }); fetch(NadSvgMultibusVLNodes14Example) @@ -208,7 +285,7 @@ export const addNadToDemo = () => { handleTextNodeMove, handleNodeSelect, true, - true, + false, null, handleToggleNadHover ); diff --git a/demo/src/diagram-viewers/data/nad-eurostag-tutorial-example1.svg b/demo/src/diagram-viewers/data/nad-eurostag-tutorial-example1.svg index 48d0f81b..e3298910 100644 --- a/demo/src/diagram-viewers/data/nad-eurostag-tutorial-example1.svg +++ b/demo/src/diagram-viewers/data/nad-eurostag-tutorial-example1.svg @@ -128,7 +128,7 @@ path.nad-arrow-in:not(.nad-state-in .nad-arrow-in) {visibility: hidden} - + @@ -140,7 +140,7 @@ path.nad-arrow-in:not(.nad-state-in .nad-arrow-in) {visibility: hidden} - + @@ -161,7 +161,7 @@ path.nad-arrow-in:not(.nad-state-in .nad-arrow-in) {visibility: hidden} - + @@ -173,7 +173,7 @@ path.nad-arrow-in:not(.nad-state-in .nad-arrow-in) {visibility: hidden} - + @@ -192,7 +192,7 @@ path.nad-arrow-in:not(.nad-state-in .nad-arrow-in) {visibility: hidden} - + @@ -204,7 +204,7 @@ path.nad-arrow-in:not(.nad-state-in .nad-arrow-in) {visibility: hidden} - + @@ -223,7 +223,7 @@ path.nad-arrow-in:not(.nad-state-in .nad-arrow-in) {visibility: hidden} - + @@ -235,7 +235,7 @@ path.nad-arrow-in:not(.nad-state-in .nad-arrow-in) {visibility: hidden} - + 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 ff17b69f..66a76e61 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,6 +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 OnMoveNodeCallbackType = ( equipmentId: string, @@ -1390,4 +1391,43 @@ export class NetworkAreaDiagramViewer { } }); } + + public setJsonFlows(flows: string) { + const flowsArray: FLOW[] = JSON.parse(flows); + this.setFlows(flowsArray); + } + + public setFlows(flows: FLOW[]) { + flows.forEach((flow) => { + this.setFlow(flow.branchId, flow.side, flow.p); + }); + } + + 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) { + 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'); + } + } else { + console.warn('Skipping updating branch ' + branchId + ' flow: edge not found'); + } + } else { + console.warn('Skipping updating branch ' + branchId + ' flow: branch not found'); + } + } } diff --git a/src/index.ts b/src/index.ts index fe85f952..fe229cc9 100644 --- a/src/index.ts +++ b/src/index.ts @@ -11,6 +11,7 @@ export type { OnMoveTextNodeCallbackType, OnSelectNodeCallbackType, OnToggleNadHoverCallbackType, + FLOW, } 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'; From 91031a5102a6ea29df5894f581f08fbda4e8d66b Mon Sep 17 00:00:00 2001 From: "massimo.ferraro" Date: Thu, 12 Dec 2024 12:41:03 +0100 Subject: [PATCH 2/5] Fix sonar issue Signed-off-by: massimo.ferraro --- demo/src/diagram-viewers/add-diagrams.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/demo/src/diagram-viewers/add-diagrams.ts b/demo/src/diagram-viewers/add-diagrams.ts index 0a772d05..46ca1fe5 100644 --- a/demo/src/diagram-viewers/add-diagrams.ts +++ b/demo/src/diagram-viewers/add-diagrams.ts @@ -116,7 +116,6 @@ export const addNadToDemo = () => { const updateFlowsDiv = document.createElement('div'); updateFlowsDiv.appendChild(flowsSlider); updateFlowsDiv.appendChild(flowsDatalist); - //updateFlowsDiv.appendChild(flowsDiv); document.getElementById('svg-container-nad')?.appendChild(updateFlowsDiv); }); From 3637cbdae74a0919baf5cecfebe42f24a7e73091 Mon Sep 17 00:00:00 2001 From: Florian Dupuy Date: Thu, 12 Dec 2024 15:25:05 +0100 Subject: [PATCH 3/5] Smoother slider Signed-off-by: Florian Dupuy --- demo/src/diagram-viewers/add-diagrams.ts | 33 +++++------------------- 1 file changed, 6 insertions(+), 27 deletions(-) diff --git a/demo/src/diagram-viewers/add-diagrams.ts b/demo/src/diagram-viewers/add-diagrams.ts index 46ca1fe5..117caa21 100644 --- a/demo/src/diagram-viewers/add-diagrams.ts +++ b/demo/src/diagram-viewers/add-diagrams.ts @@ -69,8 +69,11 @@ export const addNadToDemo = () => { flowsSlider.min = '1'; flowsSlider.max = '20'; flowsSlider.value = '1'; - flowsSlider.style.width = '99%'; - flowsSlider.setAttribute('list', 'flowsDatalist'); + 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": ' + @@ -93,31 +96,7 @@ export const addNadToDemo = () => { nadViewer.setJsonFlows(flows); }); - const flowsDatalist = document.createElement('datalist'); - flowsDatalist.id = 'flowsDatalist'; - for (let index = 1; index <= 20; index++) { - const flowsOption = document.createElement('option'); - flowsOption.value = index.toString(); - flowsDatalist.appendChild(flowsOption); - } - - const flowsDiv = document.createElement('div'); - for (let index = 1; index <= 20; index++) { - const flowsSpan = document.createElement('span'); - flowsSpan.innerHTML = index.toString(); - flowsDiv.appendChild(flowsSpan); - } - flowsDiv.style.width = '98%'; - flowsDiv.style.display = 'flex'; - flowsDiv.style.justifyContent = 'space-between'; - flowsDiv.style.padding = '0 5px'; - flowsDiv.style.fontSize = '12px'; - - const updateFlowsDiv = document.createElement('div'); - updateFlowsDiv.appendChild(flowsSlider); - updateFlowsDiv.appendChild(flowsDatalist); - - document.getElementById('svg-container-nad')?.appendChild(updateFlowsDiv); + document.getElementById('svg-container-nad')?.appendChild(flowsSlider); }); fetch(NadSvgExample) From 7787f11f2a1e52b50930ea10bff802894b2fc456 Mon Sep 17 00:00:00 2001 From: "massimo.ferraro" Date: Thu, 12 Dec 2024 19:03:35 +0100 Subject: [PATCH 4/5] 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'; From b254645282befcea0913dea7a6ace23115a8f254 Mon Sep 17 00:00:00 2001 From: "massimo.ferraro" Date: Thu, 12 Dec 2024 19:30:40 +0100 Subject: [PATCH 5/5] Reduce cognitive complexity of a method Signed-off-by: massimo.ferraro --- .../network-area-diagram-viewer/diagram-utils.test.ts | 5 +++++ src/components/network-area-diagram-viewer/diagram-utils.ts | 5 +++++ .../network-area-diagram-viewer.ts | 6 +----- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/network-area-diagram-viewer/diagram-utils.test.ts b/src/components/network-area-diagram-viewer/diagram-utils.test.ts index eb14acfe..3b9170a8 100644 --- a/src/components/network-area-diagram-viewer/diagram-utils.test.ts +++ b/src/components/network-area-diagram-viewer/diagram-utils.test.ts @@ -344,6 +344,11 @@ test('getTextNodeMoves', () => { expect(textNodeMove[1].yNew).toBe(-53.76); }); +test('getArrowClass', () => { + expect(DiagramUtils.getArrowClass(12)).toBe('nad-state-out'); + expect(DiagramUtils.getArrowClass(-12)).toBe('nad-state-in'); +}); + function getSvgNode(): SVGGraphicsElement { const nodeSvg = '' + diff --git a/src/components/network-area-diagram-viewer/diagram-utils.ts b/src/components/network-area-diagram-viewer/diagram-utils.ts index 50a2f10a..dd0b2113 100644 --- a/src/components/network-area-diagram-viewer/diagram-utils.ts +++ b/src/components/network-area-diagram-viewer/diagram-utils.ts @@ -521,3 +521,8 @@ export function getTextNodeMoves( { xOrig: textNode.connectionShiftX, yOrig: textNode.connectionShiftY, xNew: connXNew, yNew: connYNew }, ]; } + +// get arrow element class, based on p value +export function getArrowClass(p: number): string { + return p < 0 ? 'nad-state-in' : 'nad-state-out'; +} 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 f4f251de..7b9eff01 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 @@ -1431,11 +1431,7 @@ export class NetworkAreaDiagramViewer { 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'); - } + arrowGElement.classList.add(DiagramUtils.getArrowClass(value)); } const branchLabelElement = arrowGElement.lastElementChild; if (branchLabelElement !== null && branchLabelElement !== undefined) {