use visible start time instead of 'now' for zoom and move

SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/toolbar/ZoomAndMove.js

@@ -84,7 +84,8 @@ export default function ZoomAndMove(props) {
         updateStore(UIConstants.STORE_KEY_TIMELINE, timelineStore, {["zoomLevel"]: zoomLevelName})
         const selectedZoomLevel = UIConstants.ALL_ZOOM_LEVELS.find(level => level.name === zoomLevelName);
         if (selectedZoomLevel && setVisibleStartTime && setVisibleEndTime) {
-            let zoomTimes = getZoomTimes(selectedZoomLevel);
+            let zoomTimes = getZoomTimes(selectedZoomLevel, visibleStartTime);
+            console.log("zoomtimes", zoomTimes)
             if (zoomTimes.start && zoomTimes.end) {
                 setVisibleStartTime(zoomTimes.start)
                 setVisibleEndTime(zoomTimes.end)

SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/helpers/toolbar/zoomandmove.helper.js

 import moment from "moment/moment";
 import UIConstants from "../../../../utils/ui.constants";
 
-const MIN_VISIBLE_START_TIME = moment(moment().startOf('day').format(UIConstants.CALENDAR_DATETIME_FORMAT))
-const MAX_VISIBLE_END_TIME = moment(moment().endOf('day').format(UIConstants.CALENDAR_DATETIME_FORMAT))
-
 /**
  * Determines whether zooming in/out is possible based on the available zoomLevels
  * @param zoomLevelIndex current zoom level its index
@@ -41,10 +38,12 @@ export function getMovePossibilities(visibleStartTime, visibleEndTime) {
     movePossibilities.moveRight = false
 
     if (visibleStartTime && visibleEndTime) { //only for valid times, enable the move possibilities
-        if (visibleStartTime.isAfter(MIN_VISIBLE_START_TIME)) {
+        const minimumVisibleStartTime = moment(moment(visibleStartTime).startOf('day').format(UIConstants.CALENDAR_DATETIME_FORMAT));
+        if (visibleStartTime.isAfter(minimumVisibleStartTime)) {
             movePossibilities.moveLeft = true
         }
-        if (visibleEndTime.isBefore(MAX_VISIBLE_END_TIME)) {
+        const maximumVisibleEndTime = moment(moment(visibleStartTime).endOf('day').format(UIConstants.CALENDAR_DATETIME_FORMAT));
+        if (visibleEndTime.isBefore(maximumVisibleEndTime)) {
             movePossibilities.moveRight = true
         }
     }
@@ -62,22 +61,23 @@ export function getMovePossibilities(visibleStartTime, visibleEndTime) {
 export function moveTimeline(setVisibleStartTime, setVisibleEndTime, minuteAmount) {
     setVisibleStartTime(previousVisibleStartTime => {
         const newStartTime = moment(previousVisibleStartTime).add(minuteAmount, 'minutes');
-        return getNewTimeOrExtrema(newStartTime)
+        return getNewTimeOrExtrema(newStartTime, previousVisibleStartTime)
     })
     setVisibleEndTime(previousVisibleEndTime => {
         const newEndTime = moment(previousVisibleEndTime).add(minuteAmount, 'minutes');
-        return getNewTimeOrExtrema(newEndTime)
+        return getNewTimeOrExtrema(newEndTime, previousVisibleEndTime)
     })
 }
 
-function getZoomTimesHoursMinutes(selectedZoomLevel) {
+function getZoomTimesHoursMinutes(selectedZoomLevel, visibleStartTime) {
     let zoomTimes = {}
     if (selectedZoomLevel.hours === undefined || selectedZoomLevel.minutes === undefined) {
         console.error("Couldn't zoom the time line because the selectedZoomLevel is invalid:", selectedZoomLevel)
     } else {
-        let now = moment.utc().format(UIConstants.CALENDAR_DATETIME_FORMAT);
-        let newStartTime = now;
-        let newEndTime = now;
+        const timeNow = moment.utc().format(UIConstants.CALENDAR_TIME_FORMAT);
+        const visibleStartDate = visibleStartTime.format(UIConstants.CALENDAR_DEFAULTDATE_FORMAT)
+        let newStartTime = moment(visibleStartDate + " " + timeNow).format(UIConstants.CALENDAR_DATETIME_FORMAT);
+        let newEndTime = moment(visibleStartDate + " " + timeNow).format(UIConstants.CALENDAR_DATETIME_FORMAT);
 
         ['hours', 'minutes'].forEach(timeKey => {
             if (selectedZoomLevel[timeKey] > 0) {
@@ -86,8 +86,8 @@ function getZoomTimesHoursMinutes(selectedZoomLevel) {
                 newEndTime = moment(newEndTime).add(amount, timeKey);
             }
         })
-        zoomTimes.start = getNewTimeOrExtrema(newStartTime)
-        zoomTimes.end = getNewTimeOrExtrema(newEndTime)
+        zoomTimes.start = getNewTimeOrExtrema(newStartTime, visibleStartTime)
+        zoomTimes.end = getNewTimeOrExtrema(newEndTime, visibleStartTime)
     }
     return zoomTimes
 }
@@ -99,31 +99,37 @@ function getZoomTimesHoursMinutes(selectedZoomLevel) {
  * - start = now - (1/2 * hours/minutes)
  * - end = now + (1/2 * hours/minutes)
  * @param selectedZoomLevel {name: string, days: number, hours: number, minutes: number}
+ * @param visibleStartTime
  * @return {{start: moment, end: moment}}
  */
-export function getZoomTimes(selectedZoomLevel) {
+export function getZoomTimes(selectedZoomLevel, visibleStartTime) {
     let zoomTimes = {}
     if (selectedZoomLevel.days > 0) {
-        zoomTimes.start = MIN_VISIBLE_START_TIME
-        zoomTimes.end = MAX_VISIBLE_END_TIME
+        const minimumVisibleStartTime = moment(visibleStartTime).startOf('day').format(UIConstants.CALENDAR_DATETIME_FORMAT);
+        zoomTimes.start = moment(minimumVisibleStartTime)
+        const maximumVisibleEndTime = moment(visibleStartTime).endOf('day').format(UIConstants.CALENDAR_DATETIME_FORMAT);
+        zoomTimes.end = moment(maximumVisibleEndTime)
     } else {
-        zoomTimes = getZoomTimesHoursMinutes(selectedZoomLevel)
+        zoomTimes = getZoomTimesHoursMinutes(selectedZoomLevel, visibleStartTime)
     }
     return zoomTimes;
 }
 
 /**
- * If the new start time is before the minimum time (00:00:00) it return the minimum time
+ * If the new start time is before the minimum time (00:00:00) return the minimum time
  * If the new end time is after the maximum time (23:59:99) it return the maximum time
  * @param newTime
+ * @param visibleStartTime
  * @return {*|moment.Moment}
  */
-export function getNewTimeOrExtrema(newTime) {
-    if (newTime.isBefore(MIN_VISIBLE_START_TIME)) {
-        return MIN_VISIBLE_START_TIME
+export function getNewTimeOrExtrema(newTime, visibleStartTime) {
+    const minimumVisibleStartTime = moment(visibleStartTime).startOf('day').format(UIConstants.CALENDAR_DATETIME_FORMAT);
+    if (newTime.isBefore(moment(minimumVisibleStartTime))) {
+        return moment(minimumVisibleStartTime)
     }
-    if (newTime.isAfter(MAX_VISIBLE_END_TIME)) {
-        return MAX_VISIBLE_END_TIME
+    const maximumVisibleEndTime = moment(visibleStartTime).endOf('day').format(UIConstants.CALENDAR_DATETIME_FORMAT);
+    if (newTime.isAfter(moment(maximumVisibleEndTime))) {
+        return moment(maximumVisibleEndTime)
     }
     return newTime
 }
\ No newline at end of file

SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/helpers/toolbar/zoomandmove.helper.test.js

@@ -13,28 +13,31 @@ describe('getNewTimeOrExtrema', () => {
     const testFormat = 'HH:mm:ss';
     const MIN_VISIBLE_START = moment('26-05-1992T00:00:00', testFormat);
     const MAX_VISIBLE_END = moment('26-05-1992-T23:59:59', testFormat);
+    const visibleStartTime = moment("1992-05-26 00:00:00", UIConstants.CALENDAR_DATETIME_FORMAT)
 
     it('returns the extrema start of day if new time is before the start of day', () => {
         const newTime = MIN_VISIBLE_START.subtract(1, 'hours')
-        const result = getNewTimeOrExtrema(newTime);
+        const result = getNewTimeOrExtrema(newTime, visibleStartTime);
         expect(result).toBe(MIN_VISIBLE_START);
     });
 
     it('returns the extrema end of day if new time is after the end of day', () => {
         const newTime = MAX_VISIBLE_END.add(1, 'second');
-        const result = getNewTimeOrExtrema(newTime);
+        const result = getNewTimeOrExtrema(newTime, visibleStartTime);
         expect(result).toBe(MAX_VISIBLE_END);
     });
 
     test.each(['12:34:56', '00:00:00', '23:59:99'])('returns the new time if it is within the visible range: %s', (time) => {
-        const newTime = moment(time, testFormat);
-        const result = getNewTimeOrExtrema(newTime);
+        const date = "1992-05-26"
+        const newTime = moment(date + " " + time);
+        const result = getNewTimeOrExtrema(newTime, visibleStartTime);
         expect(result).toBe(newTime)
     })
 });
 
 describe('getZoomTimes', () => {
     let dateNowSpy
+    const visibleStartTime = moment("1992-05-26 00:00:00", UIConstants.CALENDAR_DATETIME_FORMAT)
 
     beforeEach(() => {
         //needs to be a timestamp in milliseconds for moment methods to work
@@ -50,7 +53,7 @@ describe('getZoomTimes', () => {
 
     it('returns extrema times when selectedZoomLevel has days', () => {
         const selectedZoomLevel = {days: 1};
-        const result = getZoomTimes(selectedZoomLevel);
+        const result = getZoomTimes(selectedZoomLevel, visibleStartTime);
         expect(result.start.format('HH:mm:ss')).toEqual('00:00:00');
         expect(result.end.format('HH:mm:ss')).toEqual('23:59:59');
     });
@@ -58,7 +61,7 @@ describe('getZoomTimes', () => {
     it('returns calculated times when selectedZoomLevel has minutes', () => {
         const selectedZoomLevel = {hours: 0, minutes: 30};
 
-        const result = getZoomTimes(selectedZoomLevel);
+        const result = getZoomTimes(selectedZoomLevel, visibleStartTime);
 
         const expectedStart = '08:07:31';
         const expectedEnd = '08:37:31';
@@ -70,7 +73,7 @@ describe('getZoomTimes', () => {
     it('returns calculated times when selectedZoomLevel has hours', () => {
         const selectedZoomLevel = {hours: 3, minutes: 0};
 
-        const result = getZoomTimes(selectedZoomLevel);
+        const result = getZoomTimes(selectedZoomLevel, visibleStartTime);
 
         const expectedStart = '06:52:31';
         const expectedEnd = '09:52:31';
@@ -82,7 +85,7 @@ describe('getZoomTimes', () => {
     it('returns calculated times when selectedZoomLevel has hours and minutes', () => {
         const selectedZoomLevel = {hours: 3, minutes: 30};
 
-        const result = getZoomTimes(selectedZoomLevel);
+        const result = getZoomTimes(selectedZoomLevel, visibleStartTime);
 
         const expectedStart = '06:37:31';
         const expectedEnd = '10:07:31';
@@ -95,7 +98,7 @@ describe('getZoomTimes', () => {
         const selectedZoomLevel = {hours: 2}; // Missing 'minutes'
         console.error = jest.fn();
 
-        const result = getZoomTimes(selectedZoomLevel);
+        const result = getZoomTimes(selectedZoomLevel, visibleStartTime);
 
         expect(result).toEqual({});
         expect(console.error).toHaveBeenCalledWith(

SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/helpers/week.view.helper.js

 import moment from "moment/moment";
 import UIConstants from "../../../utils/ui.constants";
 
-export function getTimeForToday(time) {
-    const dayString = moment().startOf('day').format(UIConstants.CALENDAR_DEFAULTDATE_FORMAT);
-    return moment(dayString + ' ' + time.format(UIConstants.CALENDAR_TIME_FORMAT));
-}
-
 export function createGroups(startTime, amountOfGroups = 6) {
     const groups = []
     const startDate = moment(startTime).format(UIConstants.CALENDAR_DEFAULTDATE_FORMAT)