diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js index 665c03a7f..84f3866de 100644 --- a/client/app/scripts/charts/node.js +++ b/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 }); diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss index 63408881a..22b295662 100644 --- a/client/app/styles/_base.scss +++ b/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! //