Merge pull request #2291 from weaveworks/fix-search-throb-animation

Remove the throb animation for graph view search matches

client/app/scripts/charts/node.js

@@ -94,22 +94,14 @@ class Node extends React.Component {
 
   render() {
     const { focused, highlighted, networks, pseudo, rank, label, transform,
-      exportingGraph, showingNetworks, stack, id, metric, matches = makeMap() } = this.props;
+      exportingGraph, showingNetworks, stack, id, metric } = this.props;
     const { hovered } = this.state;
 
     const color = getNodeColor(rank, label, pseudo);
     const truncate = !focused && !hovered;
     const labelOffsetY = (showingNetworks && networks) ? 40 : 28;
 
-    const nodeClassName = classnames('node', {
-      // NOTE: Having a CSS animation here might not be the best idea.
-      // See https://github.com/weaveworks/scope/issues/2255
-      matched: !matches.isEmpty(),
-      highlighted,
-      hovered,
-      pseudo
-    });
-
+    const nodeClassName = classnames('node', { highlighted, hovered, pseudo });
     const labelClassName = classnames('node-label', { truncate });
     const labelMinorClassName = classnames('node-label-minor', { truncate });
 

client/app/styles/_base.scss

@@ -300,7 +300,7 @@
   }
 
   .nodes-chart-nodes .node {
-    transition: opacity .5s $base-ease;
+    transition: opacity .2s $base-ease;
     text-align: center;
 
     .node-network {
@@ -388,10 +388,6 @@
       }
     }
 
-    &.matched .shape {
-      animation: throb 0.5s $base-ease;
-    }
-
     .node-label, .node-label-minor {
       text-align: center;
     }
@@ -1495,14 +1491,6 @@
   }
 }
 
-@keyframes throb {
-  0%, 50%, 100% {
-    transform: scale(1);
-  } 25%, 75% {
-    transform: scale(1.2);
-  }
-}
-
 //
 // Help panel!
 //