Fixes a couple of MoC visual bugs

- Fixes metric font-size on selected nodes
- Round metric-height value to be the same as rounded displayed value.
- No red/green colors in the MoC! They have to much association w/ success/failure

client/app/scripts/charts/node-shape-circle.js

@@ -14,6 +14,7 @@ export default function NodeShapeCircle({highlighted, size, color, metric}) {
     fillOpacity: 0.5,
     fill: getMetricColor()
   };
+  const fontSize = size * 0.19;
 
   return (
     <g className={className}>
@@ -33,7 +34,7 @@ export default function NodeShapeCircle({highlighted, size, color, metric}) {
       <circle r={size * 0.45} className="metric-fill" style={metricStyle}
         clipPath={`url(#${clipId})`} />
       {highlighted && value !== null ?
-        <text dy="0.35em" style={{textAnchor: 'middle'}}>{formattedValue}</text> :
+        <text style={{fontSize}}>{formattedValue}</text> :
         <circle className="node" r={Math.max(2, (size * 0.125))} />}
     </g>
   );

client/app/scripts/charts/node-shape-heptagon.js

@@ -33,6 +33,7 @@ export default function NodeShapeHeptagon({highlighted, size, color, metric}) {
     fillOpacity: 0.5,
     fill: getMetricColor()
   };
+  const fontSize = size * 0.19;
 
   return (
     <g className={className}>
@@ -52,7 +53,7 @@ export default function NodeShapeHeptagon({highlighted, size, color, metric}) {
       <path className="metric-fill" clipPath={`url(#${clipId})`}
         style={metricStyle} {...pathProps(0.45)} />
       {highlighted && value !== null ?
-        <text dy="0.35em" style={{textAnchor: 'middle'}}>{formattedValue}</text> :
+        <text style={{fontSize}}>{formattedValue}</text> :
         <circle className="node" r={Math.max(2, (size * 0.125))} />}
     </g>
   );

client/app/scripts/charts/node-shape-hex.js

@@ -34,6 +34,7 @@ export default function NodeShapeHex({highlighted, size, color, metric}) {
 
   const shadowSize = 0.45;
   const upperHexBitHeight = -0.25 * size * shadowSize;
+  const fontSize = size * 0.19;
 
   const clipId = `mask-${Math.random()}`;
   const {height, value, formattedValue} = getMetricValue(metric, size);
@@ -62,7 +63,7 @@ export default function NodeShapeHex({highlighted, size, color, metric}) {
       <path className="metric-fill" style={metricStyle}
         clipPath={`url(#${clipId})`} {...pathProps(shadowSize)} />
       {highlighted && value !== null ?
-        <text dy="0.35em" style={{textAnchor: 'middle'}}>
+        <text style={{fontSize}}>
           {formattedValue}
         </text> :
         <circle className="node" r={Math.max(2, (size * 0.125))} />}

client/app/scripts/charts/node-shape-square.js

@@ -19,6 +19,7 @@ export default function NodeShapeSquare({
   const className = classNames('shape', {
     metrics: value !== null
   });
+  const fontSize = size * 0.19;
 
   const metricStyle = {
     fillOpacity: 0.5,
@@ -43,7 +44,9 @@ export default function NodeShapeSquare({
       <rect className="metric-fill" style={metricStyle}
         clipPath={`url(#${clipId})`} {...rectProps(0.45, 0.39)} />
       {highlighted && value !== null ?
-        <text dy="0.35em" style={{textAnchor: 'middle'}}>{formattedValue}</text> :
+        <text style={{fontSize}}>
+          {formattedValue}
+        </text> :
         <circle className="node" r={Math.max(2, (size * 0.125))} />}
     </g>
   );

client/app/scripts/utils/color-utils.js

@@ -23,7 +23,7 @@ function text2degree(text) {
   return hueScale(num);
 }
 
-function colors(text, secondText) {
+export function colors(text, secondText) {
   let hue = text2degree(text);
   // skip green and shift to the end of the color wheel
   if (hue > 70 && hue < 150) {

client/app/scripts/utils/data-utils.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import d3 from 'd3';
 import { formatMetric } from './string-utils';
+import { colors } from './color-utils';
 import AppStore from '../stores/app-store';
 
 
@@ -172,7 +173,7 @@ export function getMetricValue(metric, size) {
     valuePercentage = loadScale(value);
   }
 
-  let displayedValue = value;
+  let displayedValue = Number(value).toFixed(1);
   if (displayedValue > 0) {
     const baseline = 0.1;
     displayedValue = valuePercentage * (1 - baseline) + baseline;
@@ -190,14 +191,17 @@ export function getMetricValue(metric, size) {
 
 export function getMetricColor() {
   const selectedMetric = AppStore.getSelectedMetric();
+  // bluey
   if (/memory/.test(selectedMetric)) {
     return '#1f77b4';
   } else if (/cpu/.test(selectedMetric)) {
-    return '#2ca02c';
+    return colors('cpu');
   } else if (/files/.test(selectedMetric)) {
+    // return colors('files');
+    // purple
     return '#9467bd';
   } else if (/load/.test(selectedMetric)) {
-    return '#e6550d';
+    return colors('load');
   }
   return 'steelBlue';
 }

client/app/styles/main.less

@@ -437,6 +437,8 @@ h2 {
 
     text {
       font-size: 12px;
+      dominant-baseline: middle;
+      text-anchor: middle;
     }
 
     .highlighted {

client/package.json

@@ -68,7 +68,10 @@
     "test": "jest",
     "coveralls": "cat coverage/lcov.info | coveralls",
     "lint": "eslint app",
-    "clean": "rm build/app.js"
+    "clean": "rm build/app.js",
+    "noprobe": "../scope stop && ../scope launch --no-probe --app.window 24h",
+    "loadreport": "npm run noprobe && sleep 1 && curl -X POST -H \"Content-Type: application/json\" http://$BACKEND_HOST/api/report",
+    "loadreportjson": "npm run loadreport -- -d @../k8s_report.json"
   },
   "jest": {
     "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",