Using TimeTravel from ui-components repo.

client/app/scripts/components/app.js

@@ -85,7 +85,7 @@ class App extends React.Component {
   }
 
   componentWillUnmount() {
-    window.addEventListener('resize', this.handleResize);
+    window.removeEventListener('resize', this.handleResize);
     window.removeEventListener('keypress', this.onKeyPress);
     window.removeEventListener('keyup', this.onKeyUp);
     this.props.dispatch(shutdown());

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

@@ -1,7 +1,8 @@
 import React from 'react';
+import moment from 'moment';
 import { connect } from 'react-redux';
+import { TimeTravel as TimeTravelComponent } from 'weaveworks-ui-components';
 
-import TimeTravelComponent from './time-travel-component';
 import { trackAnalyticsEvent } from '../utils/tracking-utils';
 import { jumpToTime } from '../actions/app-actions';
 
@@ -55,18 +56,17 @@ class TimeTravel extends React.Component {
   }
 
   render() {
-    const { visible, timestamp, viewportWidth } = this.props;
+    const { visible, timestamp } = this.props;
 
     return (
       <TimeTravelComponent
         visible={visible}
-        timestamp={timestamp}
-        viewportWidth={viewportWidth}
-        changeTimestamp={this.changeTimestamp}
-        trackTimestampEdit={this.trackTimestampEdit}
-        trackTimelineClick={this.trackTimelineClick}
-        trackTimelineZoom={this.trackTimelineZoom}
-        trackTimelinePan={this.trackTimelinePan}
+        timestamp={timestamp || moment()}
+        onChange={this.changeTimestamp}
+        onTimestampInputEdit={this.trackTimestampEdit}
+        onTimestampLabelClick={this.trackTimelineClick}
+        onTimelineZoom={this.trackTimelineZoom}
+        onTimelinePan={this.trackTimelinePan}
       />
     );
   }
@@ -78,8 +78,6 @@ function mapStateToProps(state) {
     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']),
   };
 }
 

client/package.json

@@ -44,7 +44,7 @@
     "reselect": "3.0.1",
     "reselect-map": "1.0.3",
     "styled-components": "^2.2.1",
-    "weaveworks-ui-components": "git+https://github.com/weaveworks/ui-components.git#v0.1.45",
+    "weaveworks-ui-components": "git+https://github.com/weaveworks/ui-components.git#v0.1.47",
     "whatwg-fetch": "2.0.3",
     "xterm": "2.9.2"
   },

client/yarn.lock

@@ -6666,9 +6666,9 @@ wd@^0.4.0:
     underscore.string "~3.0.3"
     vargs "~0.1.0"
 
-"weaveworks-ui-components@git+https://github.com/weaveworks/ui-components.git#v0.1.45":
-  version "0.1.45"
-  resolved "git+https://github.com/weaveworks/ui-components.git#9b700e6231599d0f7b353d8e2bb5f466394dc081"
+"weaveworks-ui-components@git+https://github.com/weaveworks/ui-components.git#v0.1.47":
+  version "0.1.47"
+  resolved "git+https://github.com/weaveworks/ui-components.git#1a112eef36f282d754502f77ab798381f5d3a995"
   dependencies:
     babel-cli "^6.18.0"
     babel-plugin-transform-export-extensions "6.8.0"
@@ -6676,9 +6676,14 @@ wd@^0.4.0:
     babel-preset-es2015 "6.18.0"
     babel-preset-react "6.16.0"
     classnames "^2.2.5"
+    d3-drag "1.2.1"
+    d3-scale "1.0.6"
+    d3-selection "1.1.0"
+    moment "2.19.1"
     node-sass "4.5.3"
     polished "^1.7.0"
     prop-types "^15.5.8"
+    react-motion "0.5.2"
 
 webidl-conversions@^3.0.0:
   version "3.0.1"