Updated with Button states in respective AppViews

src/app/Navbar.js

@@ -4,12 +4,13 @@ import { SiGraphql } from "react-icons/si";
 import { BiNetworkChart } from "react-icons/bi";
 import { GrMapLocation } from "react-icons/gr";
 import { setSelectedView } from "../features/view/viewSlice";
+import {  appViews } from "../features/evio/evioSlice";
 
 class Navbar extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      buttonStates: [true, true, true],
+      buttonStates: [true, true, true], // Topo, Sub, Map
     };
   }
 
@@ -17,6 +18,9 @@ class Navbar extends React.Component {
     if (this.props.selectedOverlayId.length > 0) {
       this.props.setSelectedView(view);
     }
+    if (view === appViews.SubgraphView) {
+      this.setState({ buttonStates: [false, false, true] });
+    }
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -27,6 +31,37 @@ class Navbar extends React.Component {
         this.setState({ buttonStates: [true, true, true] });
       }
     }
+    if (this.props.selectedElementType !== prevProps.selectedElementType) {
+      if (
+        this.props.selectedView === appViews.TopologyView &&
+        this.props.selectedElementType !== "ElementTypeNone"
+      ) {
+        this.setState({ buttonStates: [true, false, true] }); 
+        // on Topologyview and any cyElement is selected - enable subgraph
+      }
+      if (
+        this.props.selectedView === appViews.TopologyView &&
+        this.props.selectedElementType === "ElementTypeNone"
+      ) {
+        this.setState({ buttonStates: [true, true, true] });
+        // on Topologyview and any cyElement is deselected - disable subgraph
+      }
+    }
+    if (this.props.currentView !== prevProps.currentView) {
+      // Toggle the current state buttons
+      if (
+        this.props.selectedView === appViews.SubgraphView &&
+        this.props.currentView === appViews.SubgraphView
+      ) {
+        this.setState({ buttonStates: [false, true, true] });
+      }
+      if (
+        this.props.selectedView === appViews.TopologyView &&
+        this.props.currentView === appViews.TopologyView
+      ) {
+        this.setState({ buttonStates: [true, true, true] });
+      }
+    }
   }
 
   componentDidMount() {}
@@ -44,7 +79,10 @@ class Navbar extends React.Component {
               : "navBarTopologyBtn"
           }
           disabled={this.state.buttonStates[0]}
-          onClick={this.handleViewSelector.bind(this, "TopologyView")}
+          onClick={this.handleViewSelector.bind(
+            this,
+            appViews.TopologyView
+          )}
         >
           {" "}
           <SiGraphql fontSize="1.5em" />{" "}
@@ -57,7 +95,10 @@ class Navbar extends React.Component {
               : "navBarSubGraphBtn"
           }
           disabled={this.state.buttonStates[1]}
-          onClick={this.handleViewSelector.bind(this, "SubgraphView")}
+          onClick={this.handleViewSelector.bind(
+            this,
+            appViews.SubgraphView
+          )}
         >
           {" "}
           <BiNetworkChart fontSize="1.5em" />{" "}
@@ -68,7 +109,7 @@ class Navbar extends React.Component {
             this.state.buttonStates[2] ? "navBarMapBtnDisabled" : "navBarMapBtn"
           }
           disabled={this.state.buttonStates[2]}
-          onClick={this.handleViewSelector.bind(this, "MapView")}
+          onClick={this.handleViewSelector.bind(this, appViews.MapView)}
         >
           {" "}
           <GrMapLocation fontSize="1.5em" />{" "}
@@ -80,7 +121,9 @@ class Navbar extends React.Component {
 
 const mapStateToProps = (state) => ({
   currentView: state.view.current,
+  selectedView: state.view.selected,
   selectedOverlayId: state.evio.selectedOverlayId,
+  selectedElementType: state.evio.selectedElementType,
 });
 
 const mapDispatchToProps = {