Fade out rank border color for more emphesis on metric

- Fade out rank color opacity when showing metric

client/app/scripts/charts/node.js

@@ -53,7 +53,7 @@ export default class Node extends React.Component {
     }
     let labelOffsetY = 18;
     let subLabelOffsetY = 35;
-    // const color = this.props.metric ?  '#e2e2ec' : getNodeColor(
+    // const color = this.props.metric ? '#e2e2ec' : getNodeColor(
     const color = getNodeColor(
       this.props.rank, this.props.label, this.props.pseudo);
     const onMouseEnter = this.handleMouseEnter;

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

@@ -138,7 +138,7 @@ export function getMetricColor() {
   } else if (/files/.test(selectedMetric)) {
     return '#9467bd';
   } else if (/load/.test(selectedMetric)) {
-    return '#17becf';
+    return '#e6550d';
   }
   return 'steelBlue';
 }

client/app/styles/main.less

@@ -403,10 +403,13 @@ h2 {
     &:not(.shape-cloud) .border {
       stroke-width: @node-border-stroke-width;
       fill: @background-color;
+      transition: stroke-opacity 0.5s cubic-bezier(0,0,0.21,1), fill 0.5s cubic-bezier(0,0,0.21,1);
+      stroke-opacity: 1;
     }
 
     &.metrics .border {
       fill: @background-lighter-color;
+      stroke-opacity: 0.3;
     }
 
     .metric-fill {