From 1a6e49fd3dfc8e78282c58a4bb26272b3f41fff4 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Thu, 15 Feb 2018 13:25:50 +0100
Subject: [PATCH] Added classNames to all the anchor DOM elements.

---
 client/app/scripts/components/topologies.js         | 6 +++---
 client/app/scripts/components/view-mode-selector.js | 3 ++-
 client/app/styles/_base.scss                        | 6 +++---
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/client/app/scripts/components/topologies.js b/client/app/scripts/components/topologies.js
index d75439db8..7fa49eb13 100644
--- a/client/app/scripts/components/topologies.js
+++ b/client/app/scripts/components/topologies.js
@@ -39,7 +39,7 @@ class Topologies extends React.Component {
     const isActive = subTopology === this.props.currentTopology;
     const searchMatchCount = this.props.searchMatchCountByTopology.get(topologyId) || 0;
     const title = basicTopologyInfo(subTopology, searchMatchCount);
-    const className = classnames('topologies-sub-item', {
+    const className = classnames(`topologies-sub-item topologies-item-${topologyId}`, {
       // Don't show matches in the resource view as searching is not supported there yet.
       'topologies-sub-item-matched': !this.props.isResourceViewMode && searchMatchCount,
       'topologies-sub-item-active': isActive,
@@ -60,14 +60,14 @@ class Topologies extends React.Component {
   }
 
   renderTopology(topology) {
+    const topologyId = topology.get('id');
     const isActive = topology === this.props.currentTopology;
     const searchMatchCount = this.props.searchMatchCountByTopology.get(topology.get('id')) || 0;
-    const className = classnames('topologies-item-main', {
+    const className = classnames(`topologies-item-main topologies-item-${topologyId}`, {
       // Don't show matches in the resource view as searching is not supported there yet.
       'topologies-item-main-matched': !this.props.isResourceViewMode && searchMatchCount,
       'topologies-item-main-active': isActive,
     });
-    const topologyId = topology.get('id');
     const title = basicTopologyInfo(topology, searchMatchCount);
 
     return (
diff --git a/client/app/scripts/components/view-mode-selector.js b/client/app/scripts/components/view-mode-selector.js
index b2a2b75ce..13591e9c4 100644
--- a/client/app/scripts/components/view-mode-selector.js
+++ b/client/app/scripts/components/view-mode-selector.js
@@ -25,8 +25,9 @@ class ViewModeSelector extends React.Component {
   }
 
   renderItem(icons, label, viewMode, setViewModeAction, isEnabled = true) {
+    if (label === 'Table') console.log('render table view action');
     const isSelected = (this.props.topologyViewMode === viewMode);
-    const className = classNames('view-mode-selector-action', {
+    const className = classNames(`view-mode-selector-action view-${label}-action`, {
       'view-mode-selector-action-selected': isSelected,
     });
     const onClick = () => {
diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index 6352e295e..d00c82dab 100644
--- a/client/app/styles/_base.scss
+++ b/client/app/styles/_base.scss
@@ -371,10 +371,10 @@ a {
 
 .nodes-chart-overlay {
   pointer-events: none;
-  opacity: 0;
+  opacity: $node-elements-in-background-opacity;
 
-  &.active {
-    opacity: $node-elements-in-background-opacity;
+  &:not(.active) {
+    display: none;
   }
 }