Timeline scroll (#3333)

baloola · offtherailz · commit b84bae1444c5 · 2018-11-15T17:29:43.000+01:00
Fix #3285 Timeline scroll. Fixed issues with range initialization
diff --git a/web/client/epics/timeline.js b/web/client/epics/timeline.js
@@ -186,11 +186,11 @@ module.exports = {
                 const currentOffset = offsetTimeSelector(state);
                 const rangeDistance = moment(end).diff(start);
                 // Set current moment, if not set yet, to current viewport center. otherwise, it is set to now.
-                let currentMoment = currentViewRange ? moment(start).add(rangeDistance / 2).toISOString() : moment(new Date());
+                let currentMoment = currentViewRange ? moment(start).add(rangeDistance / 2).toISOString() : moment(new Date()).toISOString();
 
                 const initialOffsetTime = moment(time ? time : currentMoment).add(rangeDistance / RATIO);
-                let setTime = action.enabled && !time ? Rx.Observable.of(setCurrentTime(currentMoment.toISOString())) : Rx.Observable.empty();
-                let setOff = action.enabled && !currentOffset || action.enabled && moment(currentOffset.toISOString()).diff(time) < 0 ? Rx.Observable.of(setCurrentOffset(initialOffsetTime.toISOString()))
+                let setTime = action.enabled && !time ? Rx.Observable.of(setCurrentTime(currentMoment)) : Rx.Observable.empty();
+                let setOff = action.enabled && !currentOffset || action.enabled && moment(currentOffset).diff(time) < 0 ? Rx.Observable.of(setCurrentOffset(initialOffsetTime.toISOString()))
                     : Rx.Observable.empty();
                 const centerToCurrentViewRange = currentViewRange ? Rx.Observable.empty() : Rx.Observable.of(
                     onRangeChanged({
diff --git a/web/client/plugins/timeline/Timeline.jsx b/web/client/plugins/timeline/Timeline.jsx
@@ -248,6 +248,8 @@ const enhance = compose(
     defaultProps({
         key: 'timeline',
         options: {
+            maxHeight: '150px',
+            verticalScroll: true,
             stack: false,
             showMajorLabels: true,
             showCurrentTime: false,
@@ -292,7 +294,7 @@ const enhance = compose(
                     type: 'background',
                     className: 'ms-playback-range'
                 } : null,
-                offsetEnabled && playbackRange && playbackRange.startPlaybackTime !== undefined && playbackRange.endPlaybackTime !== undefined ? {
+                offsetEnabled && currentTimeRange.start !== undefined && currentTimeRange.end !== undefined ? {
                     id: 'current-range',
                     ...getStartEnd(currentTimeRange.start, currentTimeRange.end),
                     type: 'background',
diff --git a/web/client/themes/default/less/timeline.less b/web/client/themes/default/less/timeline.less
@@ -250,6 +250,7 @@
                 .shadow;
                 z-index: 30;
                 .vis-content {
+                    margin-bottom: 30%;
                     border-bottom: 1px solid @ms2-color-shade-lighter;
 
                     .vis-label {
