Ensure arrows and lines are correct for large nodes too

ui/src/components/topology/constants.js

@@ -46,6 +46,7 @@ const Points = {
 };
 
 const Rects = {
+  // x, y, width, height
   buttonRect: {
     ...Sizes.buttonSize,
     ...Points.buttonPosition
@@ -53,6 +54,19 @@ const Rects = {
   contentRect: {
     ...Sizes.contentSize,
     ...Points.contentPosition
+  },
+  // top, bottom, left, right - from 'centre'
+  nodeRect: {
+    left: -Sizes.nodeSize.width/2,
+    right: Sizes.nodeSize.width/2,
+    top: -Sizes.nodeSize.height/2,
+    bottom: Sizes.nodeSize.height/2
+  },
+  nodeRectWithChildren: {
+    left: -Sizes.nodeSizeWithChildren.width/2,
+    right: Sizes.nodeSizeWithChildren.width/2,
+    top: -Sizes.nodeSizeWithChildren.height/2 + Sizes.contentSize.height/2,
+    bottom: Sizes.nodeSizeWithChildren.height/2 + Sizes.contentSize.height/2
   }
 };
 

ui/src/components/topology/graph-link/index.js

@@ -27,44 +27,50 @@ const getPosition = (angle, positions, position, noCorners=false) => {
   };
 };
 
-const getPositions = (halfWidth, halfHeight, halfCorner=0) => ([{
+const getPositions = (rect, halfCorner=0) => ([{
   id: 'r',
-  x: halfWidth,
+  x: rect.right,
   y: 0
 }, {
   id: 'br',
-  x: halfWidth - halfCorner,
+  x: rect.right - halfCorner,
-  y: halfHeight - halfCorner
+  y: rect.bottom - halfCorner
 }, {
   id: 'b',
   x: 0,
-  y: halfHeight
+  y: rect.bottom
 }, {
   id: 'bl',
-  x: -halfWidth + halfCorner,
+  x: rect.left + halfCorner,
-  y: halfHeight - halfCorner
+  y: rect.bottom - halfCorner
 }, {
   id: 'l',
-  x: -halfWidth,
+  x: rect.left,
   y: 0
 }, {
   id: 'tl',
-  x: -halfWidth + halfCorner,
+  x: rect.left + halfCorner,
-  y: -halfHeight + halfCorner
+  y: rect.top + halfCorner
 }, {
   id: 't',
   x: 0,
-  y: -halfHeight
+  y: rect.top
 }, {
   id: 'tr',
-  x: halfWidth - halfCorner,
+  x: rect.right- halfCorner,
-  y: -halfHeight + halfCorner
+  y: rect.top + halfCorner
 },{
   id: 'r',
-  x: halfWidth,
+  x: rect.right,
   y: 0
 }]);
 
+const getRect = (data) => {
+  return data.children ?
+    Constants.nodeRectWithChildren :
+    Constants.nodeRect;
+};
+
 const GraphLink = ({
   data,
   index
@@ -77,20 +83,20 @@ const GraphLink = ({
 
   // actually, this will need to be got dynamically, in case them things are different sizes
   // yeah right, now you'll get to do exactly that
-  const {
-    width,
-    height
-  } = Constants.nodeSize;
 
-  const halfWidth = width/2;
+  const sourceRect = getRect(source);
-  const halfHeight = height/2;
+  const targetRect= getRect(target);
+
   const halfCorner = 2;
 
-  const positions = getPositions(halfWidth, halfHeight, halfCorner);
+  const sourcePositions = getPositions(sourceRect, halfCorner);
   const sourceAngle = getAngleFromPoints(source, target);
-  const sourcePosition = getPosition(sourceAngle, positions, source);
+  const sourcePosition = getPosition(sourceAngle, sourcePositions, source);
-  const targetAngle = getAngleFromPoints(target, source);
+
-  const targetPosition = getPosition(targetAngle, positions, target); //, true);
+  const targetPositions = getPositions(targetRect, halfCorner);
+  const targetAngle = getAngleFromPoints(target, sourcePosition);
+  const targetPosition = getPosition(targetAngle, targetPositions, target); //, true);
+
   const arrowAngle = getAngleFromPoints(sourcePosition, targetPosition);
 
   return (

ui/src/components/topology/graph-node/index.js

@@ -23,14 +23,18 @@ const GraphNode = ({
     Constants.nodeSizeWithChildren :
     Constants.nodeSize;
 
-  const halfWidth = width/2;
+  const {
-  const halfHeight = height/2;
+    left,
+    top
+  } = data.children ?
+    Constants.nodeRectWithChildren :
+    Constants.nodeRect;
 
-  let x = 0;
+  let x = data.x;
-  let y = 0;
+  let y = data.y;
   if(connected) {
-    x = data.x-halfWidth;
+    x = data.x + left;
-    y = data.y-halfHeight;
+    y = data.y + top;
   }
 
   const onButtonClick = (evt) => {

ui/src/components/topology/graph-node/info.js

@@ -1,19 +1,19 @@
 import React from 'react';
-//import styled from 'styled-components';
+import styled from 'styled-components';
 import { Baseline } from '../../../shared/composers';
-//import { colors } from '../../../shared/constants';
+import { colors } from '../../../shared/constants';
-//import DataCentresIcon from './icon-data-centers.svg';
+import DataCentresIcon from './icon-data-centers.svg';
-//import InstancesIcon from './icon-instances.svg';
+import InstancesIcon from './icon-instances.svg';
 import PropTypes from '../prop-types';
 import { GraphText } from './shapes';
 
-/*const StyledInstancesIcon = styled(InstancesIcon)`
+const StyledInstancesIcon = styled(InstancesIcon)`
   fill: ${props => props.connected ? colors.base.white : colors.base.secondary};
 `;
 
 const StyledDataCentresIcon = styled(DataCentresIcon)`
   fill: ${props => props.connected ? colors.base.white : colors.base.secondary};
-`;*/
+`;
 
 const GraphNodeInfo = ({
   connected,
@@ -31,7 +31,7 @@ const GraphNodeInfo = ({
   return (
     <g transform={`translate(${x}, ${y})`}>
       <g transform={'translate(0, 2)'}>
-        {/*}<StyledInstancesIcon connected={connected} />*}
+        <StyledInstancesIcon connected={connected} />
       </g>
       <GraphText
         x={23}
@@ -41,7 +41,7 @@ const GraphNodeInfo = ({
         {`${datacentres} inst.`}
       </GraphText>
       <g transform={'translate(82, 0)'}>
-        {/*<StyledDataCentresIcon connected={connected} />*/}
+        <StyledDataCentresIcon connected={connected} />
       </g>
       <GraphText
         x={96}

ui/src/components/topology/graph-node/title.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Baseline } from '../../../shared/composers';
 import Constants from '../constants';
 import { GraphTitle, GraphHealthyCircle } from './shapes';
-// import HeartIcon from './icon-heart.svg';
+import HeartIcon from './icon-heart.svg';
 
 const GraphNodeTitle = ({
   connected,
@@ -24,7 +24,7 @@ const GraphNodeTitle = ({
           cy={9}
           r={9}
         />
-        {/*<HeartIcon />*/}
+        <HeartIcon />
       </g>
     </g>
   );

ui/src/components/topology/graph-simulation.js

@@ -1,4 +1,5 @@
 import { forceSimulation, forceLink, forceCollide, forceCenter } from 'd3';
+import Constants from './constants';
 
 const hypotenuse = (a, b) =>
   Math.sqrt(a*a + b*b);
@@ -26,7 +27,6 @@ const createLinks = (services) =>
 
 const createSimulation = (
   services,
-  nodeSize,
   svgSize,
   onTick,
   onEnd
@@ -45,7 +45,7 @@ const createSimulation = (
     height
   } = svgSize;
 
-  const nodeRadius = rectRadius(nodeSize);
+  const nodeRadius = rectRadius(Constants.nodeSizeWithChildren);
 
   return ({
     simulation: forceSimulation(nodes)
@@ -65,7 +65,6 @@ const updateSimulation = (
   services,
   simNodes,
   simLinks,
-  nodeSize,
   svgSize,
   onTick,
   onEnd
@@ -93,7 +92,7 @@ const updateSimulation = (
     height
   } = svgSize;
 
-  const nodeRadius = rectRadius(nodeSize);
+  const nodeRadius = rectRadius(Constants.nodeSizeWithChildren);
 
   return ({
     simulation: forceSimulation(nodes)

ui/src/components/topology/topology-graph.js

@@ -10,11 +10,6 @@ const StyledSvg = styled.svg`
   height: 860px;
 `;
 
-const nodeSize = {
-  width: 180,
-  height: 156
-};
-
 const svgSize = {
   width: 1024,
   height: 860
@@ -33,7 +28,6 @@ class TopologyGraph extends React.Component {
 
     const simulationData = createSimulation(
       services,
-      nodeSize,
       svgSize//,
       //() => this.forceUpdate(),
       //() => this.forceUpdate()
@@ -76,7 +70,6 @@ class TopologyGraph extends React.Component {
         services,
         nodes,
         links,
-        nodeSize,
         svgSize,
         () => this.forceUpdate(),
         () => this.forceUpdate()