Current topo follows details panel!

client/app/scripts/actions/app-actions.js

@@ -286,6 +286,7 @@ export function clickRelative(nodeId, topologyId, label, origin) {
       topologyId
     });
     updateRoute(getState);
+    resetUpdateBuffer();
     const state = getState();
     getNodeDetails(
       state.get('topologyUrlsById'),
@@ -294,6 +295,11 @@ export function clickRelative(nodeId, topologyId, label, origin) {
       state.get('nodeDetails'),
       dispatch
     );
+    getNodesDelta(
+      getCurrentTopologyUrl(state),
+      getActiveTopologyOptions(state),
+      dispatch
+    );
   };
 }
 
@@ -461,7 +467,7 @@ export function hitEsc() {
     } else if (state.get('showingHelp')) {
       dispatch(hideHelp());
     } else if (state.get('nodeDetails').last() && !controlPipe) {
-      dispatch({ type: ActionTypes.DESELECT_NODE });
+      dispatch({ type: ActionTypes.CLICK_CLOSE_DETAILS });
       updateRoute(getState);
     }
   };

client/app/scripts/reducers/root.js

@@ -69,6 +69,7 @@ export const initialState = makeMap({
   exportingGraph: false
 });
 
+
 // adds ID field to topology (based on last part of URL path) and save urls in
 // map for easy lookup
 function processTopologies(state, nextTopologies) {
@@ -87,12 +88,14 @@ function processTopologies(state, nextTopologies) {
   return state.mergeDeepIn(['topologies'], immNextTopologies);
 }
 
+
 function setTopology(state, topologyId) {
   state = state.set('currentTopology', findTopologyById(
     state.get('topologies'), topologyId));
   return state.set('currentTopologyId', topologyId);
 }
 
+
 function setDefaultTopologyOptions(state, topologyList) {
   topologyList.forEach(topology => {
     let defaultOptions = makeOrderedMap();
@@ -113,6 +116,7 @@ function setDefaultTopologyOptions(state, topologyList) {
   return state;
 }
 
+
 function closeNodeDetails(state, nodeId) {
   const nodeDetails = state.get('nodeDetails');
   if (nodeDetails.size > 0) {
@@ -128,6 +132,7 @@ function closeNodeDetails(state, nodeId) {
   return state;
 }
 
+
 function closeAllNodeDetails(state) {
   while (state.get('nodeDetails').size) {
     state = closeNodeDetails(state);
@@ -135,10 +140,33 @@ function closeAllNodeDetails(state) {
   return state;
 }
 
+
 function resumeUpdate(state) {
   return state.set('updatePausedAt', null);
 }
 
+
+function setSelectedNode(state, {nodeId, label, origin, topologyId}) {
+  state = resumeUpdate(state);
+  if (state.hasIn(['nodeDetails', nodeId])) {
+    // bring to front
+    const details = state.getIn(['nodeDetails', nodeId]);
+    state = state.deleteIn(['nodeDetails', nodeId]);
+    state = state.setIn(['nodeDetails', nodeId], details);
+  } else {
+    state = state.setIn(['nodeDetails', nodeId], {id: nodeId, label, origin, topologyId});
+  }
+  state = state.set('selectedNodeId', nodeId);
+  if (topologyId !== state.get('currentTopologyId')) {
+    state = setTopology(state, topologyId);
+    state = state.update('nodes', nodes => nodes.clear());
+    state = state.set('availableCanvasMetrics', makeList());
+  }
+
+  return state;
+}
+
+
 export function rootReducer(state = initialState, action) {
   if (!action.type) {
     error('Payload missing a type!', action);
@@ -193,7 +221,17 @@ export function rootReducer(state = initialState, action) {
     }
 
     case ActionTypes.CLICK_CLOSE_DETAILS: {
-      return closeNodeDetails(state, action.nodeId);
+      state = closeNodeDetails(state, action.nodeId);
+      const topCard = state.get('nodeDetails').last();
+      if (!topCard) {
+        return state;
+      }
+
+      return setSelectedNode(state, {
+        nodeId: topCard.id,
+        label: topCard.label,
+        topologyId: topCard.topologyId,
+      });
     }
 
     case ActionTypes.CLICK_CLOSE_TERMINAL: {
@@ -233,22 +271,7 @@ export function rootReducer(state = initialState, action) {
     }
 
     case ActionTypes.CLICK_RELATIVE: {
-      if (state.hasIn(['nodeDetails', action.nodeId])) {
-        // bring to front
-        const details = state.getIn(['nodeDetails', action.nodeId]);
-        state = state.deleteIn(['nodeDetails', action.nodeId]);
-        state = state.setIn(['nodeDetails', action.nodeId], details);
-      } else {
-        state = state.setIn(['nodeDetails', action.nodeId],
-          {
-            id: action.nodeId,
-            label: action.label,
-            origin: action.origin,
-            topologyId: action.topologyId
-          }
-        );
-      }
-      return state;
+      return setSelectedNode(state, action);
     }
 
     case ActionTypes.CLICK_RESUME_UPDATE: {