Add fade out transition to node details panel and activate it when switching the top panel.

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

@@ -228,6 +228,7 @@ export function clickCloseDetails(nodeId) {
       type: ActionTypes.CLICK_CLOSE_DETAILS,
       nodeId
     });
+    getNodeDetails(getState, dispatch);
     updateRoute(getState);
   };
 }
@@ -545,6 +546,12 @@ export function receiveNodeDetails(details) {
   };
 }
 
+export function nodeDetailsStartTransition() {
+  return {
+    type: ActionTypes.NODE_DETAILS_START_TRANSITION
+  };
+}
+
 export function receiveNodesDelta(delta) {
   return (dispatch, getState) => {
     if (!isPausedSelector(getState())) {

client/app/scripts/components/node-details.js

@@ -9,6 +9,7 @@ import { brightenColor, getNeutralColor, getNodeColorDark } from '../utils/color
 import { isGenericTable, isPropertyList } from '../utils/node-details-utils';
 import { resetDocumentTitle, setDocumentTitle } from '../utils/title-utils';
 
+import Overlay from './overlay';
 import MatchedText from './matched-text';
 import NodeDetailsControls from './node-details/node-details-controls';
 import NodeDetailsGenericTable from './node-details/node-details-generic-table';
@@ -151,7 +152,7 @@ class NodeDetails extends React.Component {
   }
 
   renderDetails() {
-    const { details, nodeControlStatus, nodeMatches = makeMap() } = this.props;
+    const { details, nodeControlStatus, transitioning, nodeMatches = makeMap() } = this.props;
     const showControls = details.controls && details.controls.length > 0;
     const nodeColor = getNodeColorDark(details.rank, details.label, details.pseudo);
     const {error, pending} = nodeControlStatus ? nodeControlStatus.toJS() : {};
@@ -241,6 +242,8 @@ class NodeDetails extends React.Component {
             />
           </CloudFeature>
         </div>
+
+        <Overlay faded={transitioning} />
       </div>
     );
   }

client/app/scripts/constants/action-types.js

@@ -62,6 +62,7 @@ const ACTION_TYPES = [
   'SHOW_NETWORKS',
   'SHUTDOWN',
   'SORT_ORDER_CHANGED',
+  'NODE_DETAILS_START_TRANSITION',
   'START_TIME_TRAVEL',
   'TIME_TRAVEL_START_TRANSITION',
   'TOGGLE_CONTRAST_MODE',

client/app/scripts/reducers/root.js

@@ -555,6 +555,7 @@ export function rootReducer(state = initialState, action) {
         state = state.updateIn(['nodeDetails', action.details.id], (obj) => {
           const result = Object.assign({}, obj);
           result.notFound = false;
+          result.transitioning = false;
           result.details = action.details;
           return result;
         });
@@ -562,6 +563,14 @@ export function rootReducer(state = initialState, action) {
       return state;
     }
 
+    case ActionTypes.NODE_DETAILS_START_TRANSITION: {
+      const topNode = state.get('nodeDetails').last();
+      if (topNode && topNode.id) {
+        state = state.updateIn(['nodeDetails', topNode.id], d => ({ ...d, transitioning: true }));
+      }
+      return state;
+    }
+
     case ActionTypes.SET_RECEIVED_NODES_DELTA: {
       // Turn on the table view if the graph is too complex, but skip
       // this block if the user has already loaded topologies once.

client/app/scripts/utils/web-api-utils.js

@@ -7,7 +7,8 @@ import { blurSearch, clearControlError, closeWebsocket, openWebsocket, receiveEr
   receiveApiDetails, receiveNodesDelta, receiveNodeDetails, receiveControlError,
   receiveControlNodeRemoved, receiveControlPipe, receiveControlPipeStatus,
   receiveControlSuccess, receiveTopologies, receiveNotFound,
-  receiveNodesForTopology, receiveNodes } from '../actions/app-actions';
+  receiveNodesForTopology, receiveNodes, nodeDetailsStartTransition
+} from '../actions/app-actions';
 
 import { getCurrentTopologyUrl } from '../utils/topology-utils';
 import { layersTopologyIdsSelector } from '../selectors/resource-view/layout';
@@ -299,6 +300,7 @@ export function getNodeDetails(getState, dispatch) {
     }
     const url = urlComponents.join('');
 
+    dispatch(nodeDetailsStartTransition());
     doRequest({
       url,
       success: (res) => {

client/app/styles/_base.scss

@@ -78,7 +78,7 @@
   left: 0;
   opacity: 0;
   pointer-events: none;
-  z-index: 2000;
+  z-index: 1000;
 
   &.faded {
     // NOTE: Not sure if we should block the pointer events here..