Mct 4555 rebased v3 (#4689)

* Preserve the previousFocusedImage for subscription updates, bound change for local and fixed time

* Only preserve previous focused image if paused

* Forcibly reset imageContainer size to prevent aspect ratio distortion

* Remove unneccesary mixin invocation

* Use image history instead of imagehistory size for watcher. Revert other changes

* Added check if last image index is selected

* isPaused instead of paused

Co-authored-by: Michael Rogers <contact@mhrogers.com>

src/plugins/imagery/components/ImageryTimeView.vue

@@ -65,13 +65,8 @@ export default {
             keyString: undefined
         };
     },
-    computed: {
-        imageHistorySize() {
-            return this.imageHistory.length;
-        }
-    },
     watch: {
-        imageHistorySize(newSize, oldSize) {
+        imageHistory(newHistory, oldHistory) {
             this.updatePlotImagery();
         }
     },

src/plugins/imagery/components/ImageryView.vue

@@ -240,9 +240,6 @@ export default {
         };
     },
     computed: {
-        imageHistorySize() {
-            return this.imageHistory.length;
-        },
         compassRoseSizingClasses() {
             let compassRoseSizingClasses = '';
             if (this.sizedImageDimensions.width < 300) {
@@ -409,19 +406,23 @@ export default {
         }
     },
     watch: {
-        imageHistorySize(newSize, oldSize) {
+        imageHistory: {
-            let imageIndex;
+            handler(newHistory, oldHistory) {
-            if (this.focusedImageTimestamp !== undefined) {
+                const newSize = newHistory.length;
-                const foundImageIndex = this.imageHistory.findIndex(image => {
+                let imageIndex;
-                    return image.time === this.focusedImageTimestamp;
+                if (this.focusedImageTimestamp !== undefined) {
-                });
+                    const foundImageIndex = this.imageHistory.findIndex(image => {
-                imageIndex = foundImageIndex > -1 ? foundImageIndex : newSize - 1;
+                        return image.time === this.focusedImageTimestamp;
-            } else {
+                    });
-                imageIndex = newSize > 0 ? newSize - 1 : undefined;
+                    imageIndex = foundImageIndex > -1 ? foundImageIndex : newSize - 1;
-            }
+                } else {
+                    imageIndex = newSize > 0 ? newSize - 1 : undefined;
+                }
 
-            this.setFocusedImage(imageIndex, false);
+                this.setFocusedImage(imageIndex, false);
-            this.scrollToRight();
+                this.scrollToRight();
+            },
+            deep: true
         },
         focusedImageIndex() {
             this.trackDuration();
@@ -510,12 +511,6 @@ export default {
                 this.timeContext.off("clock", this.trackDuration);
             }
         },
-        boundsChange(bounds, isTick) {
-            if (!isTick) {
-                this.previousFocusedImage = this.focusedImage ? JSON.parse(JSON.stringify(this.focusedImage)) : undefined;
-                this.requestHistory();
-            }
-        },
         expand() {
             const actionCollection = this.openmct.actions.getActionsCollection(this.objectPath, this.currentView);
             const visibleActions = actionCollection.getVisibleActions();
@@ -690,22 +685,32 @@ export default {
                 return;
             }
 
-            if (this.previousFocusedImage) {
-                // determine if the previous image exists in the new bounds of imageHistory
-                const matchIndex = this.matchIndexOfPreviousImage(
-                    this.previousFocusedImage,
-                    this.imageHistory
-                );
-                focusedIndex = matchIndex > -1 ? matchIndex : this.imageHistory.length - 1;
-
-                delete this.previousFocusedImage;
-            }
-
             if (thumbnailClick) {
                 //We use the props till the user changes what they want to see
                 this.focusedImageTimestamp = undefined;
+                //set the previousFocusedImage when a user chooses an image
+                this.previousFocusedImage = this.imageHistory[focusedIndex] ? JSON.parse(JSON.stringify(this.imageHistory[focusedIndex])) : undefined;
             }
 
+            if (this.previousFocusedImage) {
+                // determine if the previous image exists in the new bounds of imageHistory
+                if (!thumbnailClick) {
+                    const matchIndex = this.matchIndexOfPreviousImage(
+                        this.previousFocusedImage,
+                        this.imageHistory
+                    );
+                    focusedIndex = matchIndex > -1 ? matchIndex : this.imageHistory.length - 1;
+                }
+
+                if (!(this.isPaused || thumbnailClick)
+                    || focusedIndex === this.imageHistory.length - 1) {
+                    delete this.previousFocusedImage;
+                }
+            }
+
+            this.focusedImageIndex = focusedIndex;
+
+            //TODO: do we even need this anymore?
             if (this.isPaused && !thumbnailClick && this.focusedImageTimestamp === undefined) {
                 this.nextImageIndex = focusedIndex;
                 //this could happen if bounds changes
@@ -716,8 +721,6 @@ export default {
                 return;
             }
 
-            this.focusedImageIndex = focusedIndex;
-
             if (thumbnailClick && !this.isPaused) {
                 this.paused(true);
             }

src/plugins/imagery/mixins/imageryData.js

@@ -120,9 +120,15 @@ export default {
             return this.timeFormatter.parse(datum);
         },
         boundsChange(bounds, isTick) {
-            if (!isTick) {
+            if (isTick) {
-                this.requestHistory();
+                return;
             }
+
+            // forcibly reset the imageContainer size to prevent an aspect ratio distortion
+            delete this.imageContainerWidth;
+            delete this.imageContainerHeight;
+
+            return this.requestHistory();
         },
         async requestHistory() {
             let bounds = this.timeContext.bounds();