From b6fd03ac53cb2e265fb2f039d82c66a949cd6d69 Mon Sep 17 00:00:00 2001 From: ShuhaoBai Date: Mon, 28 Mar 2022 11:13:03 -0700 Subject: [PATCH 1/2] In process of fixing overlapping equipment --- .../topology-renderer/TopologyRenderer.tsx | 62 +++++++++++++++++++ .../TopologyRendererContainer.tsx | 18 ++++++ 2 files changed, 80 insertions(+) diff --git a/client/src/app/simulation/topology-renderer/TopologyRenderer.tsx b/client/src/app/simulation/topology-renderer/TopologyRenderer.tsx index f6648cec..143ce753 100644 --- a/client/src/app/simulation/topology-renderer/TopologyRenderer.tsx +++ b/client/src/app/simulation/topology-renderer/TopologyRenderer.tsx @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ import { Component, createRef } from 'react'; import { line } from 'd3-shape'; import { select, Selection, create } from 'd3-selection'; @@ -723,6 +724,66 @@ export class TopologyRenderer extends Component { const fragment = document.createDocumentFragment(); for (const datum of nodes) { const symbol = create('svg:g'); + // if(nodeType === 'transformer' && (datum.name === 't21197413c' || datum.name === 't21399326c' || datum.name === 'hvmv69_11sub3')) { + // console.log('#####datum for transformer####'); + // console.log(datum.name); + // console.log(datum); + // datum.name=t21399326c + // configuration: "ct25:Iii" + // from: "l2879092" + // mRIDs: [] + // name: "t21399326c" + // phases: "C" + // screenX1: 187.08333333333334 + // screenY1: 750.9589041095891 + // to: "x2879092c" + // type: "transformer" + // x1: -26453 + // x2: -119.2386 + // y1: 6572 + // y2: 13099.3138 + + // datum.name=t21197413c + // configuration: "ct75:Iii" + // from: "l3141411" + // mRIDs: [] + // name: "t21197413c" + // phases: "C" + // screenX1: 187.08333333333334 + // screenY1: 750.9589041095891 + // to: "x3141411c" + // type: "transformer" + // x1: -26453 + // x2: -119.2382 + // y1: 6572 + // y2: 13099.313 + + // datum.name=hvmv69_11sub3 + // configuration: "Yy" + // from: "hvmv69sub3_hsb" + // mRIDs: [] + // name: "hvmv69_11sub3" + // phases: "ABC" + // screenX1: 166.25 + // screenY1: 812.7054794520548 + // to: "regxfmr_hvmv11sub3_lsb" + // type: "transformer" + // x1: -26455 + // x2: -119.2406805 + // y1: 6578 + // y2: 13099.31915062 + // } + // if(nodeType === 'transformer' && datum.name === 't21197413c') { + // datum.screenX1 = datum.screenX1 + 100; + // console.log('after increase'); + // console.log(datum); + // } + if(datum.name === 't21399229a') { + console.log('#t21399229a#', datum); + } + if(datum.name === 't21399305a') { + console.log('#t21399305a#', datum); + } symbol.attr('class', `topology-renderer__canvas__symbol-container ${nodeType}`) .style('transform-origin', this._calculateSymbolTransformOrigin(datum)) .style('transform', this._calculateSymbolTransform(datum, nodeNameToEdgeMap)) @@ -741,6 +802,7 @@ export class TopologyRenderer extends Component { private _calculateSymbolTransformOrigin(node: Node) { const width = this._symbolDimensions[node.type]?.width || symbolSize; const height = this._symbolDimensions[node.type]?.height || symbolSize; + // [NodeType.TRANSFORMER]: { width: 30, height: 25 }, if (node.type === NodeType.CAPACITOR || node.type === NodeType.REGULATOR) { return `${node.screenX1 + (width / 2)}px ${node.screenY1}px`; } diff --git a/client/src/app/simulation/topology-renderer/TopologyRendererContainer.tsx b/client/src/app/simulation/topology-renderer/TopologyRendererContainer.tsx index e0e5a452..aa089d12 100644 --- a/client/src/app/simulation/topology-renderer/TopologyRendererContainer.tsx +++ b/client/src/app/simulation/topology-renderer/TopologyRendererContainer.tsx @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ import { Component } from 'react'; import { Subject, Subscription } from 'rxjs'; import { takeUntil, takeWhile } from 'rxjs/operators'; @@ -151,6 +152,23 @@ export class TopologyRendererContainer extends Component { private _processModelForRendering(topologyModel: TopologyModel) { waitUntil(() => this.props.mRIDs.size > 0) .then(() => { + // console.log('#####topologyModel.feeders####'); + // console.log(topologyModel.feeders); // [{...}] + // 0: + // mRID: "_EE71F6C9-56F0-4167-A14E-7F4C71F10EAA" + // name: "final9500node" + // batteries:[{...}, {...}] + // transformers: Array(1304) + // 2: + // configuration: "Yy" + // from: "hvmv69sub3_hsb" + // name: "hvmv69_11sub3" + // phases: "ABC" + // to: "regxfmr_hvmv11sub3_lsb" + // x1: -119.2404194 + // x2: -119.2406805 + // y1: 46.6799782 + // y2: 46.68084938 this.setState({ topology: this._transformModelForRendering(topologyModel), isFetching: false From d2c34d8afee3130fd18518434294aefb546f93e2 Mon Sep 17 00:00:00 2001 From: ShuhaoBai Date: Wed, 21 Sep 2022 12:45:17 -0700 Subject: [PATCH 2/2] Fixes overlapped equipments for 9500 node topology map in Viz. --- .../topology-renderer/TopologyRenderer.tsx | 66 +------------------ .../TopologyRendererContainer.tsx | 28 ++------ 2 files changed, 9 insertions(+), 85 deletions(-) diff --git a/client/src/app/simulation/topology-renderer/TopologyRenderer.tsx b/client/src/app/simulation/topology-renderer/TopologyRenderer.tsx index 143ce753..91a6e9c2 100644 --- a/client/src/app/simulation/topology-renderer/TopologyRenderer.tsx +++ b/client/src/app/simulation/topology-renderer/TopologyRenderer.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import { Component, createRef } from 'react'; import { line } from 'd3-shape'; import { select, Selection, create } from 'd3-selection'; @@ -617,7 +616,9 @@ export class TopologyRenderer extends Component { .y(node => node.screenY1); edgeMap.forEach(edge => { const path = create('svg:path').node(); - path.setAttribute('class', `topology-renderer__canvas__edge _${edge.name}_`); + if (!edge.name.startsWith('tpx')) { + path.setAttribute('class', `topology-renderer__canvas__edge _${edge.name}_`); + } path.setAttribute('d', edgeGenerator([edge.from, edge.to])); documentFragment.appendChild(path); }); @@ -724,66 +725,6 @@ export class TopologyRenderer extends Component { const fragment = document.createDocumentFragment(); for (const datum of nodes) { const symbol = create('svg:g'); - // if(nodeType === 'transformer' && (datum.name === 't21197413c' || datum.name === 't21399326c' || datum.name === 'hvmv69_11sub3')) { - // console.log('#####datum for transformer####'); - // console.log(datum.name); - // console.log(datum); - // datum.name=t21399326c - // configuration: "ct25:Iii" - // from: "l2879092" - // mRIDs: [] - // name: "t21399326c" - // phases: "C" - // screenX1: 187.08333333333334 - // screenY1: 750.9589041095891 - // to: "x2879092c" - // type: "transformer" - // x1: -26453 - // x2: -119.2386 - // y1: 6572 - // y2: 13099.3138 - - // datum.name=t21197413c - // configuration: "ct75:Iii" - // from: "l3141411" - // mRIDs: [] - // name: "t21197413c" - // phases: "C" - // screenX1: 187.08333333333334 - // screenY1: 750.9589041095891 - // to: "x3141411c" - // type: "transformer" - // x1: -26453 - // x2: -119.2382 - // y1: 6572 - // y2: 13099.313 - - // datum.name=hvmv69_11sub3 - // configuration: "Yy" - // from: "hvmv69sub3_hsb" - // mRIDs: [] - // name: "hvmv69_11sub3" - // phases: "ABC" - // screenX1: 166.25 - // screenY1: 812.7054794520548 - // to: "regxfmr_hvmv11sub3_lsb" - // type: "transformer" - // x1: -26455 - // x2: -119.2406805 - // y1: 6578 - // y2: 13099.31915062 - // } - // if(nodeType === 'transformer' && datum.name === 't21197413c') { - // datum.screenX1 = datum.screenX1 + 100; - // console.log('after increase'); - // console.log(datum); - // } - if(datum.name === 't21399229a') { - console.log('#t21399229a#', datum); - } - if(datum.name === 't21399305a') { - console.log('#t21399305a#', datum); - } symbol.attr('class', `topology-renderer__canvas__symbol-container ${nodeType}`) .style('transform-origin', this._calculateSymbolTransformOrigin(datum)) .style('transform', this._calculateSymbolTransform(datum, nodeNameToEdgeMap)) @@ -802,7 +743,6 @@ export class TopologyRenderer extends Component { private _calculateSymbolTransformOrigin(node: Node) { const width = this._symbolDimensions[node.type]?.width || symbolSize; const height = this._symbolDimensions[node.type]?.height || symbolSize; - // [NodeType.TRANSFORMER]: { width: 30, height: 25 }, if (node.type === NodeType.CAPACITOR || node.type === NodeType.REGULATOR) { return `${node.screenX1 + (width / 2)}px ${node.screenY1}px`; } diff --git a/client/src/app/simulation/topology-renderer/TopologyRendererContainer.tsx b/client/src/app/simulation/topology-renderer/TopologyRendererContainer.tsx index aa089d12..030a14ce 100644 --- a/client/src/app/simulation/topology-renderer/TopologyRendererContainer.tsx +++ b/client/src/app/simulation/topology-renderer/TopologyRendererContainer.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import { Component } from 'react'; import { Subject, Subscription } from 'rxjs'; import { takeUntil, takeWhile } from 'rxjs/operators'; @@ -152,23 +151,6 @@ export class TopologyRendererContainer extends Component { private _processModelForRendering(topologyModel: TopologyModel) { waitUntil(() => this.props.mRIDs.size > 0) .then(() => { - // console.log('#####topologyModel.feeders####'); - // console.log(topologyModel.feeders); // [{...}] - // 0: - // mRID: "_EE71F6C9-56F0-4167-A14E-7F4C71F10EAA" - // name: "final9500node" - // batteries:[{...}, {...}] - // transformers: Array(1304) - // 2: - // configuration: "Yy" - // from: "hvmv69sub3_hsb" - // name: "hvmv69_11sub3" - // phases: "ABC" - // to: "regxfmr_hvmv11sub3_lsb" - // x1: -119.2404194 - // x2: -119.2406805 - // y1: 46.6799782 - // y2: 46.68084938 this.setState({ topology: this._transformModelForRendering(topologyModel), isFetching: false @@ -187,13 +169,11 @@ export class TopologyRendererContainer extends Component { edgeMap: new Map(), inverted: false }; - for (const group of ['batteries', 'switches', 'solarpanels', 'swing_nodes', 'transformers', 'capacitors', 'regulators']) { for (const datum of feeder[group]) { const mRIDs = this.props.mRIDs.get(datum.name) || []; const resolvedMRIDs = Array.isArray(mRIDs) ? mRIDs : [mRIDs]; let node: Node; - switch (group) { case 'swing_nodes': node = this._createNewNode({ @@ -357,8 +337,12 @@ export class TopologyRendererContainer extends Component { private _latLongToXY(longitude: number, lat: number): { x: number; y: number } { return { - x: Math.floor(136.0 * (longitude + 77.0292) / (-77.0075 + 77.0292)) / 10, - y: Math.floor(117.0 * (lat - 38.8762) / (38.8901 - 38.8762)) / 10 + // Archive the old method of calculating Lat and Long to xy coordinations + // x: Math.floor(136.0 * (longitude + 77.0292) / (-77.0075 + 77.0292)) / 10, + // y: Math.floor(117.0 * (lat - 38.8762) / (38.8901 - 38.8762)) / 10 + + x: 136.0 * (longitude + 77.0292) / 0.00217, + y: 114.0 * (lat - 38.8762) / 0.00139 }; }