Skip to content

Commit

Permalink
Generalize input data structure for handling generic branch labels an…
Browse files Browse the repository at this point in the history 
…d add caching map

Signed-off-by: massimo.ferraro <[email protected]>
  • Loading branch information
@massimo-ferraro
massimo-ferraro committed Dec 12, 2024
1 parent 3637cbd commit 7787f11
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 64 deletions.
77 changes: 39 additions & 38 deletions demo/src/diagram-viewers/add-diagrams.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ import {
OnMoveTextNodeCallbackType,
OnSelectNodeCallbackType,
OnToggleNadHoverCallbackType,
FLOW,
BranchLabel,
} from '../../../src';

export const addNadToDemo = () => {
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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);
Expand Down
67 changes: 42 additions & 25 deletions src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -74,6 +74,7 @@ export class NetworkAreaDiagramViewer {
onSelectNodeCallback: OnSelectNodeCallbackType | null;
dynamicCssRules: CSS_RULE[];
onToggleHoverCallback: OnToggleNadHoverCallbackType | null;
edgesMap: Map<string, EdgeMetadata> = new Map<string, EdgeMetadata>();

constructor(
container: HTMLElement,
Expand Down Expand Up @@ -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');
}
}
}
2 changes: 1 addition & 1 deletion src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down

0 comments on commit 7787f11

Please sign in to comment.