Made two time travel component parts independent of global state.

client/app/scripts/components/time-travel-component.js

@@ -1,17 +1,10 @@
 import React from 'react';
 import moment from 'moment';
 import classNames from 'classnames';
-import { connect } from 'react-redux';
 import { debounce } from 'lodash';
 
 import TimeTravelTimeline from './time-travel-timeline';
-import { trackAnalyticsEvent } from '../utils/tracking-utils';
 import { clampToNowInSecondsPrecision } from '../utils/time-utils';
-import {
-  jumpToTime,
-  resumeTime,
-  timeTravelStartTransition,
-} from '../actions/app-actions';
 
 import { TIMELINE_DEBOUNCE_INTERVAL } from '../constants/timer';
 
@@ -23,7 +16,7 @@ const getTimestampStates = (timestamp) => {
   };
 };
 
-class TimeTravelComponent extends React.Component {
+export default class TimeTravelComponent extends React.Component {
   constructor(props, context) {
     super(props, context);
 
@@ -34,10 +27,6 @@ class TimeTravelComponent extends React.Component {
     this.handleTimelinePanEnd = this.handleTimelinePanEnd.bind(this);
     this.handleInstantJump = this.handleInstantJump.bind(this);
 
-    this.trackTimestampEdit = this.trackTimestampEdit.bind(this);
-    this.trackTimelineClick = this.trackTimelineClick.bind(this);
-    this.trackTimelinePan = this.trackTimelinePan.bind(this);
-
     this.instantUpdateTimestamp = this.instantUpdateTimestamp.bind(this);
     this.debouncedUpdateTimestamp = debounce(
       this.instantUpdateTimestamp.bind(this), TIMELINE_DEBOUNCE_INTERVAL);
@@ -53,7 +42,7 @@ class TimeTravelComponent extends React.Component {
 
     if (timestamp.isValid()) {
       const clampedTimestamp = clampToNowInSecondsPrecision(timestamp);
-      this.instantUpdateTimestamp(clampedTimestamp, this.trackTimestampEdit);
+      this.instantUpdateTimestamp(clampedTimestamp, this.props.trackTimestampEdit);
     }
   }
 
@@ -63,55 +52,32 @@ class TimeTravelComponent extends React.Component {
   }
 
   handleTimelinePanEnd(timestamp) {
-    this.instantUpdateTimestamp(timestamp, this.trackTimelinePan);
+    this.instantUpdateTimestamp(timestamp, this.props.trackTimelinePan);
   }
 
   handleInstantJump(timestamp) {
-    this.instantUpdateTimestamp(timestamp, this.trackTimelineClick);
+    this.instantUpdateTimestamp(timestamp, this.props.trackTimelineClick);
   }
 
   instantUpdateTimestamp(timestamp, callback) {
     if (!timestamp.isSame(this.props.timestamp)) {
       this.debouncedUpdateTimestamp.cancel();
       this.setState(getTimestampStates(timestamp));
-      this.props.timeTravelStartTransition();
-      this.props.jumpToTime(moment(timestamp));
+      this.props.changeTimestamp(moment(timestamp));
 
       // Used for tracking.
       if (callback) callback();
     }
   }
 
-  trackTimestampEdit() {
-    trackAnalyticsEvent('scope.time.timestamp.edit', {
-      layout: this.props.topologyViewMode,
-      topologyId: this.props.currentTopology.get('id'),
-      parentTopologyId: this.props.currentTopology.get('parentId'),
-    });
-  }
-
-  trackTimelineClick() {
-    trackAnalyticsEvent('scope.time.timeline.click', {
-      layout: this.props.topologyViewMode,
-      topologyId: this.props.currentTopology.get('id'),
-      parentTopologyId: this.props.currentTopology.get('parentId'),
-    });
-  }
-
-  trackTimelinePan() {
-    trackAnalyticsEvent('scope.time.timeline.pan', {
-      layout: this.props.topologyViewMode,
-      topologyId: this.props.currentTopology.get('id'),
-      parentTopologyId: this.props.currentTopology.get('parentId'),
-    });
-  }
-
   render() {
-    const { visible } = this.props;
+    const { visible, timestamp, viewportWidth } = this.props;
 
     return (
       <div className={classNames('time-travel', { visible })}>
         <TimeTravelTimeline
+          timestamp={timestamp}
+          viewportWidth={viewportWidth}
           onTimelinePan={this.handleTimelinePan}
           onTimelinePanEnd={this.handleTimelinePanEnd}
           onInstantJump={this.handleInstantJump}
@@ -126,19 +92,3 @@ class TimeTravelComponent extends React.Component {
     );
   }
 }
-
-function mapStateToProps(state) {
-  return {
-    topologyViewMode: state.get('topologyViewMode'),
-    currentTopology: state.get('currentTopology'),
-  };
-}
-
-export default connect(
-  mapStateToProps,
-  {
-    jumpToTime,
-    resumeTime,
-    timeTravelStartTransition,
-  }
-)(TimeTravelComponent);

client/app/scripts/components/time-travel-timeline.js

@@ -2,7 +2,6 @@ import React from 'react';
 import moment from 'moment';
 import classNames from 'classnames';
 import { map, clamp, find, last, debounce } from 'lodash';
-import { connect } from 'react-redux';
 import { drag } from 'd3-drag';
 import { scaleUtc } from 'd3-scale';
 import { event as d3Event, select } from 'd3-selection';
@@ -86,7 +85,7 @@ function findOptimalDurationFit(durations, { durationPerPixel }) {
 }
 
 
-class TimeTravelTimeline extends React.Component {
+export default class TimeTravelTimeline extends React.Component {
   constructor(props, context) {
     super(props, context);
 
@@ -132,8 +131,8 @@ class TimeTravelTimeline extends React.Component {
 
   componentWillReceiveProps(nextProps) {
     // Don't update the focused timestamp if we're not paused (so the timeline is hidden).
-    if (nextProps.pausedAt) {
-      this.setState({ focusedTimestamp: nextProps.pausedAt });
+    if (nextProps.timestamp) {
+      this.setState({ focusedTimestamp: nextProps.timestamp });
     }
     // Always update the timeline dimension information.
     this.setState({ boundingRect: this.svgRef.getBoundingClientRect() });
@@ -392,14 +391,3 @@ class TimeTravelTimeline extends React.Component {
     );
   }
 }
-
-
-function mapStateToProps(state) {
-  return {
-    // Used only to trigger recalculations on window resize.
-    viewportWidth: state.getIn(['viewport', 'width']),
-    pausedAt: state.get('pausedAt'),
-  };
-}
-
-export default connect(mapStateToProps)(TimeTravelTimeline);

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

@@ -2,16 +2,63 @@ import React from 'react';
 import { connect } from 'react-redux';
 
 import TimeTravelComponent from './time-travel-component';
-
+import { trackAnalyticsEvent } from '../utils/tracking-utils';
+import {
+  jumpToTime,
+  timeTravelStartTransition,
+} from '../actions/app-actions';
 
 class TimeTravel extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.changeTimestamp = this.changeTimestamp.bind(this);
+    this.trackTimestampEdit = this.trackTimestampEdit.bind(this);
+    this.trackTimelineClick = this.trackTimelineClick.bind(this);
+    this.trackTimelinePan = this.trackTimelinePan.bind(this);
+  }
+
+  changeTimestamp(timestamp) {
+    this.props.timeTravelStartTransition();
+    this.props.jumpToTime(timestamp);
+  }
+
+  trackTimestampEdit() {
+    trackAnalyticsEvent('scope.time.timestamp.edit', {
+      layout: this.props.topologyViewMode,
+      topologyId: this.props.currentTopology.get('id'),
+      parentTopologyId: this.props.currentTopology.get('parentId'),
+    });
+  }
+
+  trackTimelineClick() {
+    trackAnalyticsEvent('scope.time.timeline.click', {
+      layout: this.props.topologyViewMode,
+      topologyId: this.props.currentTopology.get('id'),
+      parentTopologyId: this.props.currentTopology.get('parentId'),
+    });
+  }
+
+  trackTimelinePan() {
+    trackAnalyticsEvent('scope.time.timeline.pan', {
+      layout: this.props.topologyViewMode,
+      topologyId: this.props.currentTopology.get('id'),
+      parentTopologyId: this.props.currentTopology.get('parentId'),
+    });
+  }
+
   render() {
-    const { visible, timestamp } = this.props;
+    const { visible, timestamp, viewportWidth } = this.props;
 
     return (
       <TimeTravelComponent
         visible={visible}
         timestamp={timestamp}
+        viewportWidth={viewportWidth}
+        changeTimestamp={this.changeTimestamp}
+        trackTimestampEdit={this.trackTimestampEdit}
+        trackTimelineClick={this.trackTimelineClick}
+        trackTimelinePan={this.trackTimelinePan}
       />
     );
   }
@@ -20,10 +67,15 @@ class TimeTravel extends React.Component {
 function mapStateToProps(state) {
   return {
     visible: state.get('showingTimeTravel'),
-    // topologyViewMode: state.get('topologyViewMode'),
-    // currentTopology: state.get('currentTopology'),
+    topologyViewMode: state.get('topologyViewMode'),
+    currentTopology: state.get('currentTopology'),
     timestamp: state.get('pausedAt'),
+    // Used only to trigger recalculations on window resize.
+    viewportWidth: state.getIn(['viewport', 'width']),
   };
 }
 
-export default connect(mapStateToProps)(TimeTravel);
+export default connect(
+  mapStateToProps,
+  { jumpToTime, timeTravelStartTransition },
+)(TimeTravel);