From ff16b3a0552f21536d3fea61d99b3c5ee75a0d12 Mon Sep 17 00:00:00 2001 From: Filip Barl Date: Fri, 17 Mar 2017 12:10:04 +0100 Subject: [PATCH] Doing manual transformation to avoid SVG precision errors. --- .../app/scripts/charts/node-resource-box.js | 13 +++++---- .../app/scripts/charts/node-resource-info.js | 7 +++-- .../scripts/charts/nodes-resources-layer.js | 9 +++--- .../components/cachable-zoom-wrapper.js | 1 + client/app/scripts/decorators/node.js | 2 +- .../scripts/selectors/resource-view/layers.js | 29 ++++++++++--------- client/app/scripts/utils/metric-utils.js | 8 ++--- client/app/styles/_base.scss | 2 +- 8 files changed, 40 insertions(+), 31 deletions(-) diff --git a/client/app/scripts/charts/node-resource-box.js b/client/app/scripts/charts/node-resource-box.js index 5ba4a0a7e9..03b470a8f2 100644 --- 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 index c58a14f94b..29cf6cf7b0 100644 --- 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 ( - + {node.get('label')} {humanizedMetricInfo} diff --git a/client/app/scripts/charts/nodes-resources-layer.js b/client/app/scripts/charts/nodes-resources-layer.js index 11618a3101..a6767cc9ae 100644 --- a/client/app/scripts/charts/nodes-resources-layer.js +++ b/client/app/scripts/charts/nodes-resources-layer.js @@ -11,9 +11,9 @@ 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() { @@ -21,7 +21,7 @@ class NodesResourcesLayer extends React.Component { return ( - + {nodes.toIndexedSeq().map(node => ( ))} diff --git a/client/app/scripts/components/cachable-zoom-wrapper.js b/client/app/scripts/components/cachable-zoom-wrapper.js index e0f6668d05..86aa674845 100644 --- 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 index 49cf0a4fa7..8e70bf6eb3 100644 --- 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 index 1b89d09afa..e1bc2e14d1 100644 --- 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 index ef0afe771d..3f201855d1 100644 --- 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 ( diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss index 85ac68884b..6a5356d300 100644 --- 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; } } }