Doing manual transformation to avoid SVG precision errors.

weaveworks · Mar 17, 2017 · ff16b3a · ff16b3a
1 parent 326b7bf
commit ff16b3a
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 31 deletions.
diff --git a/client/app/scripts/charts/node-resource-box.js b/client/app/scripts/charts/node-resource-box.js
@@ -4,15 +4,16 @@ import { connect } from 'react-redux';
 
 class NodeResourceBox extends React.Component {
   defaultRectProps(relativeHeight = 1) {
+    const { translateX, translateY, scaleX, scaleY } = this.props.transform;
+    const innerTranslateY = this.props.height * scaleY * (1 - relativeHeight);
     const stroke = this.props.contrastMode ? 'black' : 'white';
-    const translateY = this.props.height * (1 - relativeHeight);
     return {
-      transform: `translate(0, ${translateY})`,
+      transform: `translate(0, ${innerTranslateY})`,
       opacity: this.props.contrastMode ? 1 : 0.85,
-      height: this.props.height * relativeHeight,
-      width: this.props.width,
-      x: this.props.x,
-      y: this.props.y,
+      height: this.props.height * scaleY * relativeHeight,
+      width: this.props.width * scaleX,
+      x: (this.props.x * scaleX) + translateX,
+      y: (this.props.y * scaleY) + translateY,
       vectorEffect: 'non-scaling-stroke',
       strokeWidth: 1,
       stroke,

diff --git a/client/app/scripts/charts/node-resource-info.js b/client/app/scripts/charts/node-resource-info.js
@@ -2,13 +2,16 @@ import React from 'react';
 
 import { getHumanizedMetricInfo } from '../utils/metric-utils';
 
+
+const HEIGHT = '45px';
+
 export default class NodeResourceInfo extends React.Component {
   render() {
     const { node, width, x, y } = this.props;
-    const humanizedMetricInfo = getHumanizedMetricInfo(node.get('activeMetric').toJS());
+    const humanizedMetricInfo = getHumanizedMetricInfo(node.get('activeMetric'));
 
     return (
-      <foreignObject className="node-resource-info" x={x} y={y} width={width} height="45px">
+      <foreignObject className="node-resource-info" x={x} y={y} width={width} height={HEIGHT}>
         <span className="wrapper label truncate">{node.get('label')}</span>
         <span className="wrapper consumption truncate">{humanizedMetricInfo}</span>
       </foreignObject>

diff --git a/client/app/scripts/charts/nodes-resources-layer.js b/client/app/scripts/charts/nodes-resources-layer.js
@@ -11,17 +11,17 @@ import {
 } from '../selectors/resource-view/layers';
 
 
-const stringifiedTransform = ({ scaleX = 1, scaleY = 1, translateX = 0, translateY = 0 }) => (
-  `translate(${translateX},${translateY}) scale(${scaleX},${scaleY})`
-);
+// const stringifiedTransform = ({ scaleX = 1, scaleY = 1, translateX = 0, translateY = 0 }) => (
+//   `translate(${translateX},${translateY}) scale(${scaleX},${scaleY})`
+// );
 
 class NodesResourcesLayer extends React.Component {
   render() {
     const { layerVerticalPosition, topologyId, transform, nodes } = this.props;
 
     return (
       <g className="node-resource-layer">
-        <g transform={stringifiedTransform(transform)}>
+        <g>
           {nodes.toIndexedSeq().map(node => (
             <NodeResourceBox
               key={node.get('id')}
@@ -32,6 +32,7 @@ class NodesResourcesLayer extends React.Component {
               activeMetric={node.get('activeMetric')}
               x={node.get('offset')}
               y={layerVerticalPosition}
+              transform={transform}
             />
           ))}
         </g>

diff --git a/client/app/scripts/components/cachable-zoom-wrapper.js b/client/app/scripts/components/cachable-zoom-wrapper.js
@@ -147,6 +147,7 @@ class CachableZoomWrapper extends React.Component {
 
   zoomed() {
     if (!this.props.disabled) {
+      console.log('Current zoom', d3Event.transform.x, d3Event.transform.k);
       const updatedState = this.cachableState({
         scaleX: d3Event.transform.k,
         scaleY: d3Event.transform.k,

diff --git a/client/app/scripts/decorators/node.js b/client/app/scripts/decorators/node.js
@@ -31,7 +31,7 @@ export function nodeActiveMetricDecorator(node) {
 
 export function nodeResourceBoxDecorator(node) {
   const widthCriterion = node.get('withCapacity') ? 'totalCapacity' : 'absoluteConsumption';
-  const width = node.getIn(['activeMetric', widthCriterion]) * 1e-5;
+  const width = node.getIn(['activeMetric', widthCriterion]) * 1e-4;
   const height = RESOURCES_LAYER_HEIGHT;
 
   return node.merge(makeMap({ width, height }));

diff --git a/client/app/scripts/selectors/resource-view/layers.js b/client/app/scripts/selectors/resource-view/layers.js
@@ -72,6 +72,8 @@ const decoratedNodesByTopologySelector = createSelector(
         .filter(node => node.get('parentNodeId') || index === 0)
         .filter(node => node.get('width'));
 
+      // console.log('Max width', filteredTopologyNodes.map(n => n.get('width')).max());
+      // console.log('Min width', filteredTopologyNodes.map(n => n.get('width')).min());
       nodesByTopology = nodesByTopology.set(layerTopologyId, filteredTopologyNodes);
       lastLayerTopologyId = layerTopologyId;
     });
@@ -102,19 +104,20 @@ export const positionedNodesByTopologySelector = createSelector(
           offset += node.get('width');
         });
 
-        // const offset = result.getIn([parentTopologyId, parentNodeId, 'x'], 0);
-        // const overhead =
-        //   (x - offset) / result.getIn([parentTopologyId, parentNodeId, 'width'], x);
-        // if (overhead > 1) {
-        //   console.log(overhead);
-        //   bucket.forEach((_, nodeId) => {
-        //     const node = result.getIn([layerTopologyId, nodeId]);
-        //     result = result.mergeIn([layerTopologyId, nodeId], makeMap({
-        //       x: ((node.get('x') - offset) / overhead) + offset,
-        //       width: node.get('width') / overhead,
-        //     }));
-        //   });
-        // }
+        // TODO: Get rid of this disgusting code
+        const parentOffset = result.getIn([parentTopologyId, parentNodeId, 'offset'], 0);
+        const parentWidth = result.getIn([parentTopologyId, parentNodeId, 'width'], offset);
+        const overhead = (offset - parentOffset) / parentWidth;
+        if (overhead > 1) {
+          console.log(overhead);
+          bucket.forEach((_, nodeId) => {
+            const node = result.getIn([layerTopologyId, nodeId]);
+            result = result.mergeIn([layerTopologyId, nodeId], makeMap({
+              x: ((node.get('offset') - parentOffset) / overhead) + parentOffset,
+              width: node.get('width') / overhead,
+            }));
+          });
+        }
       });
     });
 

diff --git a/client/app/scripts/utils/metric-utils.js b/client/app/scripts/utils/metric-utils.js
@@ -56,10 +56,10 @@ export function getMetricValue(metric) {
 
 // Used in the resource view
 export function getHumanizedMetricInfo(metric) {
-  const showExtendedInfo = metric.withCapacity && metric.format !== 'percent';
-  const totalCapacity = formatMetricSvg(metric.totalCapacity, metric);
-  const absoluteConsumption = formatMetricSvg(metric.absoluteConsumption, metric);
-  const relativeConsumption = formatMetricSvg(100 * metric.relativeConsumption,
+  const showExtendedInfo = metric.get('withCapacity') && metric.get('format') !== 'percent';
+  const totalCapacity = formatMetricSvg(metric.get('totalCapacity'), metric.toJS());
+  const absoluteConsumption = formatMetricSvg(metric.get('absoluteConsumption'), metric.toJS());
+  const relativeConsumption = formatMetricSvg(100.0 * metric.get('relativeConsumption'),
     { format: 'percent' });
   return (
     <span>

diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
@@ -952,7 +952,7 @@
       display: block;
 
       &.label { font-size: 15px; }
-      &.consumption { font-size: 13px; }
+      &.consumption { font-size: 12px; }
     }
   }