From 7d61d11e39cfea1c75931689e6bbfe0983e7816a Mon Sep 17 00:00:00 2001 From: JUDIT GRESKOVITS Date: Thu, 6 Apr 2017 21:44:54 +0100 Subject: [PATCH] Fix topology width --- ui/src/components/topology/topology-graph.js | 22 +++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/ui/src/components/topology/topology-graph.js b/ui/src/components/topology/topology-graph.js index b7257508..2eba14a4 100644 --- a/ui/src/components/topology/topology-graph.js +++ b/ui/src/components/topology/topology-graph.js @@ -14,11 +14,6 @@ const StyledSvg = styled.svg` height: 1400px; `; -const svgSize = { - width: 2400, - height: 1400 -}; - let dragInfo = { dragging: false, nodeId: null, @@ -33,6 +28,7 @@ class TopologyGraph extends React.Component { return acc; }, []); + const svgSize = this.getSvgSize(); const simulationData = createSimulation( services, svgSize//, @@ -106,9 +102,18 @@ class TopologyGraph extends React.Component { }*/ getSvgSize() { - return document.getElementById('topology-svg') ? - document.getElementById('topology-svg').getBoundingClientRect() : - svgSize; + if(document.getElementById('topology-svg')) { + return ( + document.getElementById('topology-svg').getBoundingClientRect() + ); + } + const windowWidth = window.innerWidth + || document.documentElement.clientWidth + || document.body.clientWidth; + return { + width: windowWidth - 2*24, + height: 1400 + }; } constrain(x, y, children=false) { @@ -153,6 +158,7 @@ class TopologyGraph extends React.Component { nodes.reduce((acc, simNode, index) => simNode.id === nodeId ? simNode : acc, {}); + const svgSize = this.getSvgSize(); const nodesData = services.map((service, index) => { const sNode = service.id === 'consul' ? { x: svgSize.width - Constants.nodeSize.width,