Fixed the flow.

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

@@ -548,12 +548,18 @@ export function receiveNodesDelta(delta) {
     setTimeout(() => dispatch({ type: ActionTypes.SET_RECEIVED_NODES_DELTA }), 0);
 
     const state = getState();
-    const hasChanges = delta.add || delta.update || delta.remove;
 
-    if (hasChanges) {
-      if (isPausedSelector(state)) {
-        // dispatch({ type: ActionTypes.BUFFER_NODES_DELTA, delta });
-      } else {
+    if (!isPausedSelector(state)) {
+      // When moving in time, we will consider the transition complete
+      // only when the first batch of nodes delta has been received. We
+      // do that because we want to keep the previous state blurred instead
+      // of transitioning over an empty state like when switching topologies.
+      if (state.get('timeTravelTransitioning')) {
+        dispatch({ type: ActionTypes.FINISH_TIME_TRAVEL_TRANSITION });
+      }
+
+      const hasChanges = delta.add || delta.update || delta.remove;
+      if (hasChanges) {
         dispatch({
           type: ActionTypes.RECEIVE_NODES_DELTA,
           delta
@@ -599,8 +605,6 @@ export function jumpToTime(timestamp) {
       timestamp,
     });
     getNodes(getState(), dispatch);
-    // updateWebsocketChannel(getState(), dispatch);
-    // dispatch(resetNodesDeltaBuffer());
     getTopologies(getState(), dispatch);
     if (isResourceViewModeSelector(getState())) {
       getResourceViewNodesSnapshot(getState(), dispatch);

client/app/scripts/components/time-control.js

@@ -20,35 +20,30 @@ class TimeControl extends React.Component {
     this.handleNowClick = this.handleNowClick.bind(this);
     this.handlePauseClick = this.handlePauseClick.bind(this);
     this.handleTravelClick = this.handleTravelClick.bind(this);
+    this.getTrackingMetadata = this.getTrackingMetadata.bind(this);
   }
 
-  handleNowClick() {
+  getTrackingMetadata() {
     const { currentTopology } = this.props;
-    trackMixpanelEvent('scope.time.resume.click', {
+    return {
       layout: this.props.topologyViewMode,
       topologyId: currentTopology && currentTopology.get('id'),
       parentTopologyId: currentTopology && currentTopology.get('parentId'),
-    });
+    };
+  }
+
+  handleNowClick() {
+    trackMixpanelEvent('scope.time.resume.click', this.getTrackingMetadata());
     this.props.clickResumeUpdate();
   }
 
   handlePauseClick() {
-    const { currentTopology } = this.props;
-    trackMixpanelEvent('scope.time.pause.click', {
-      layout: this.props.topologyViewMode,
-      topologyId: currentTopology && currentTopology.get('id'),
-      parentTopologyId: currentTopology && currentTopology.get('parentId'),
-    });
+    trackMixpanelEvent('scope.time.pause.click', this.getTrackingMetadata());
     this.props.clickPauseUpdate();
   }
 
   handleTravelClick() {
-    const { currentTopology } = this.props;
-    trackMixpanelEvent('scope.time.travel.click', {
-      layout: this.props.topologyViewMode,
-      topologyId: currentTopology && currentTopology.get('id'),
-      parentTopologyId: currentTopology && currentTopology.get('parentId'),
-    });
+    trackMixpanelEvent('scope.time.travel.click', this.getTrackingMetadata());
     this.props.clickTimeTravel();
   }
 
@@ -95,14 +90,17 @@ class TimeControl extends React.Component {
           title={moment(pausedAt).utc().toISOString()}>
           Paused {moment(pausedAt).fromNow()}
         </span>}
+        {isRunningNow && timeTravelTransitioning && <span
+          className="time-control-info">
+          Resuming the live state
+        </span>}
       </div>
     );
   }
 }
 
 function mapStateToProps(state) {
   return {
-    update: state.get('topologyViewMode'),
     topologyViewMode: state.get('topologyViewMode'),
     currentTopology: state.get('currentTopology'),
     showingTimeTravel: state.get('showingTimeTravel'),

client/app/scripts/reducers/root.js

@@ -364,6 +364,7 @@ export function rootReducer(state = initialState, action) {
     //
 
     case ActionTypes.RESUME_TIME_FROM_NOW: {
+      state = state.set('timeTravelTransitioning', true);
       state = state.set('showingTimeTravel', false);
       return state.set('pausedAt', null);
     }
@@ -582,7 +583,7 @@ export function rootReducer(state = initialState, action) {
         'update', size(action.delta.update),
         'add', size(action.delta.add));
 
-      // nodes that no longer exist
+      // remove nodes that no longer exist
       each(action.delta.remove, (nodeId) => {
         state = state.deleteIn(['nodes', nodeId]);
       });

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

@@ -233,8 +233,6 @@ export function getResourceViewNodesSnapshot(state, dispatch) {
 }
 
 export function getTopologies(state, dispatch, initialPoll = false) {
-  // TODO: Remove this once TimeTravel is out of the feature flag.
-  state = state.scope || state;
   // Used to resume polling when navigating between pages in Weave Cloud.
   continuePolling = initialPoll === true ? true : continuePolling;
   clearTimeout(topologyTimer);