[Time conductor] Better persistence handling for history (#3246)

src/plugins/timeConductor/Conductor.vue

@@ -143,7 +143,7 @@
             <ConductorHistory
                 v-if="isFixed"
                 class="c-conductor__history-select"
-                :bounds="openmct.time.bounds()"
+                :bounds="bounds"
                 :time-system="timeSystem"
             />
         </div>
@@ -190,6 +190,10 @@ export default {
                 start: offsets && durationFormatter.format(Math.abs(offsets.start)),
                 end: offsets && durationFormatter.format(Math.abs(offsets.end))
             },
+            bounds: {
+                start: bounds.start,
+                end: bounds.end
+            },
             formattedBounds: {
                 start: timeFormatter.format(bounds.start),
                 end: timeFormatter.format(bounds.end)
@@ -210,7 +214,7 @@ export default {
         document.addEventListener('keydown', this.handleKeyDown);
         document.addEventListener('keyup', this.handleKeyUp);
         this.setTimeSystem(JSON.parse(JSON.stringify(this.openmct.time.timeSystem())));
-        this.openmct.time.on('bounds', this.setViewFromBounds);
+        this.openmct.time.on('bounds', this.handleNewBounds);
         this.openmct.time.on('timeSystem', this.setTimeSystem);
         this.openmct.time.on('clock', this.setViewFromClock);
         this.openmct.time.on('clockOffsets', this.setViewFromOffsets);
@@ -220,6 +224,13 @@ export default {
         document.removeEventListener('keyup', this.handleKeyUp);
     },
     methods: {
+        handleNewBounds(bounds) {
+            this.setBounds(bounds);
+            this.setViewFromBounds(bounds);
+        },
+        setBounds(bounds) {
+            this.bounds = bounds;
+        },
         handleKeyDown(event) {
             if (event.key === 'Alt') {
                 this.altPressed = true;
@@ -246,10 +257,13 @@ export default {
             this.formattedBounds.end = this.timeFormatter.format(bounds.end);
         },
         endZoom(bounds) {
-            const _bounds = bounds ? bounds : this.openmct.time.bounds();
             this.isZooming = false;
 
-            this.openmct.time.bounds(_bounds);
+            if (bounds) {
+                this.handleNewBounds(bounds);
+            } else {
+                this.setViewFromBounds(this.bounds);
+            }
         },
         setTimeSystem(timeSystem) {
             this.timeSystem = timeSystem;

src/plugins/timeConductor/ConductorAxis.vue

@@ -207,7 +207,7 @@ export default {
             this.$emit('panAxis', panBounds);
         },
         endPan() {
-            const panBounds = this.dragStartX && this.dragX && this.dragStartX !== this.dragX
+            const panBounds = this.isChangingViewBounds()
                 ? this.getPanBounds()
                 : undefined;
             this.$emit('endPan', panBounds);
@@ -251,16 +251,14 @@ export default {
             });
         },
         endZoom() {
-            const zoomRange = this.dragStartX && this.dragX && this.dragStartX !== this.dragX
-                ? this.getZoomRange()
-                : undefined;
-
-            const zoomBounds = zoomRange
-                ? {
+            let zoomBounds;
+            if (this.isChangingViewBounds()) {
+                const zoomRange = this.getZoomRange();
+                zoomBounds = {
                     start: this.scaleToBounds(zoomRange.start),
                     end: this.scaleToBounds(zoomRange.end)
+                };
             }
-                : this.openmct.time.bounds();
 
             this.zoomStyle = {};
             this.$emit('endZoom', zoomBounds);
@@ -290,6 +288,9 @@ export default {
 
             return bounds.start + offset;
         },
+        isChangingViewBounds() {
+            return this.dragStartX && this.dragX && this.dragStartX !== this.dragX;
+        },
         resize() {
             if (this.$refs.axisHolder.clientWidth !== this.width) {
                 this.setAxisDimensions();

src/plugins/timeConductor/ConductorHistory.vue

@@ -84,7 +84,12 @@ export default {
     },
     data() {
         return {
-            history: {}, // contains arrays of timespans {start, end}, array key is time system key
+            /**
+             * previous bounds entries available for easy re-use
+             * @history array of timespans
+             * @timespans {start, end} number representing timestamp
+             */
+            history: this.getHistoryFromLocalStorage(),
             presets: []
         };
     },
@@ -111,22 +116,20 @@ export default {
                 this.addTimespan();
             },
             deep: true
-        },
-        history: {
-            handler() {
-                this.persistHistoryToLocalStorage();
-            },
-            deep: true
         }
     },
     mounted() {
-        this.getHistoryFromLocalStorage();
+        this.initializeHistoryIfNoHistory();
     },
     methods: {
         getHistoryFromLocalStorage() {
-            if (localStorage.getItem(LOCAL_STORAGE_HISTORY_KEY)) {
-                this.history = JSON.parse(localStorage.getItem(LOCAL_STORAGE_HISTORY_KEY));
-            } else {
+            const localStorageHistory = localStorage.getItem(LOCAL_STORAGE_HISTORY_KEY);
+            const history = localStorageHistory ? JSON.parse(localStorageHistory) : undefined;
+
+            return history;
+        },
+        initializeHistoryIfNoHistory() {
+            if (!this.history) {
                 this.history = {};
                 this.persistHistoryToLocalStorage();
             }
@@ -157,6 +160,8 @@ export default {
 
             currentHistory.unshift(timespan);
             this.history[key] = currentHistory;
+
+            this.persistHistoryToLocalStorage();
         },
         selectTimespan(timespan) {
             this.openmct.time.bounds(timespan);