Skip to content

Commit

Permalink
Time Travel 3.0 (#2703)
Browse files Browse the repository at this point in the history
* Experimental.

* Getting somewhere.

* Good zooming behaviour.

* Working timeline zooming & panning.

* Clickable timestamps.

* Dragging cursor

* Timeline panning buttons.

* Capping at current time.

* Scale limits.

* Better ticks.

* Time tags fading in smoothly.

* Removed seconds.

* Better tick spacing.

* Vertical panning as zooming.

* Organizing the code..

* Replaced d3-zoom with native events.

* Got rid of scaleX

* More code beautified.

* Almost done polishing the code.

* Some cleanup.

* Better request triggers.

* More cleaning up.

* Styled the timestamp input.

* Final cleanup.

* Update yarn.lock

* Zoom tracking.

* Animate timeline translations.

* Fixed the PAUSE button glitch and updating the time control info.

* Opacity fix and timeline arrows removed.

* Fixed the red vertical bar.

* Use preventDefault() on timeline scrolling.
  • Loading branch information
fbarl authored Jul 27, 2017
1 parent 7e38069 commit 2183a93
Show file tree
Hide file tree
Showing 14 changed files with 592 additions and 219 deletions.
12 changes: 10 additions & 2 deletions client/app/scripts/actions/app-actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -338,8 +338,16 @@ export function clickNode(nodeId, label, origin, topologyId = null) {
}

export function pauseTimeAtNow() {
return {
type: ActionTypes.PAUSE_TIME_AT_NOW
return (dispatch, getState) => {
dispatch({
type: ActionTypes.PAUSE_TIME_AT_NOW
});
if (!getState().get('nodesLoaded')) {
getNodes(getState, dispatch);
if (isResourceViewModeSelector(getState())) {
getResourceViewNodesSnapshot(getState(), dispatch);
}
}
};
}

Expand Down
11 changes: 11 additions & 0 deletions client/app/scripts/components/time-control.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import TimeTravelButton from './time-travel-button';
import { trackMixpanelEvent } from '../utils/tracking-utils';
import { pauseTimeAtNow, resumeTime, startTimeTravel } from '../actions/app-actions';

import { TIMELINE_TICK_INTERVAL } from '../constants/timer';


const className = isSelected => (
classNames('time-control-action', { 'time-control-action-selected': isSelected })
Expand All @@ -23,6 +25,15 @@ class TimeControl extends React.Component {
this.getTrackingMetadata = this.getTrackingMetadata.bind(this);
}

componentDidMount() {
// Force periodic for the paused info.
this.timer = setInterval(() => { this.forceUpdate(); }, TIMELINE_TICK_INTERVAL);
}

componentWillUnmount() {
clearInterval(this.timer);
}

getTrackingMetadata(data = {}) {
const { currentTopology } = this.props;
return {
Expand Down
Loading

0 comments on commit 2183a93

Please sign in to comment.