Use image timestamp instead of image index to show large view (#4591)

* Use image timestamp instead of image index to show large view

* Fix failing test

Author: shefalijoshi

src/plugins/imagery/ImageryView.js

@@ -12,9 +12,9 @@ export default class ImageryView {
 
     show(element, isEditing, viewOptions) {
         let alternateObjectPath;
-        let indexForFocusedImage;
+        let focusedImageTimestamp;
         if (viewOptions) {
-            indexForFocusedImage = viewOptions.indexForFocusedImage;
+            focusedImageTimestamp = viewOptions.timestamp;
             alternateObjectPath = viewOptions.objectPath;
         }
 
@@ -31,10 +31,10 @@ export default class ImageryView {
             },
             data() {
                 return {
-                    indexForFocusedImage
+                    focusedImageTimestamp
                 };
             },
-            template: '<imagery-view :index-for-focused-image="indexForFocusedImage" ref="ImageryContainer"></imagery-view>'
+            template: '<imagery-view :focused-image-timestamp="focusedImageTimestamp" ref="ImageryContainer"></imagery-view>'
 
         });
     }

src/plugins/imagery/components/ImageryTimeView.vue

@@ -119,10 +119,10 @@ export default {
                 this.timeContext.off("bounds", this.updateViewBounds);
             }
         },
-        expand(index) {
+        expand(imageTimestamp) {
             const path = this.objectPath[0];
             this.previewAction.invoke([path], {
-                indexForFocusedImage: index,
+                timestamp: imageTimestamp,
                 objectPath: this.objectPath
             });
         },
@@ -395,7 +395,7 @@ export default {
             //handle mousedown event to show the image in a large view
             imageWrapper.addEventListener('mousedown', (e) => {
                 if (e.button === 0) {
-                    this.expand(index);
+                    this.expand(item.time);
                 }
             });
 

src/plugins/imagery/components/ImageryView.vue

@@ -201,7 +201,7 @@ export default {
     mixins: [imageryData],
     inject: ['openmct', 'domainObject', 'objectPath', 'currentView'],
     props: {
-        indexForFocusedImage: {
+        focusedImageTimestamp: {
             type: Number,
             default() {
                 return undefined;
@@ -411,8 +411,11 @@ export default {
     watch: {
         imageHistorySize(newSize, oldSize) {
             let imageIndex;
-            if (this.indexForFocusedImage !== undefined) {
-                imageIndex = this.initFocusedImageIndex;
+            if (this.focusedImageTimestamp !== undefined) {
+                const foundImageIndex = this.imageHistory.findIndex(image => {
+                    return image.time === this.focusedImageTimestamp;
+                });
+                imageIndex = foundImageIndex > -1 ? foundImageIndex : newSize - 1;
             } else {
                 imageIndex = newSize > 0 ? newSize - 1 : undefined;
             }
@@ -429,8 +432,7 @@ export default {
     },
     async mounted() {
         //We only need to use this till the user focuses an image manually
-        if (this.indexForFocusedImage !== undefined) {
-            this.initFocusedImageIndex = this.indexForFocusedImage;
+        if (this.focusedImageTimestamp !== undefined) {
             this.isPaused = true;
         }
 
@@ -701,10 +703,10 @@ export default {
 
             if (thumbnailClick) {
                 //We use the props till the user changes what they want to see
-                this.initFocusedImageIndex = undefined;
+                this.focusedImageTimestamp = undefined;
             }
 
-            if (this.isPaused && !thumbnailClick && this.initFocusedImageIndex === undefined) {
+            if (this.isPaused && !thumbnailClick && this.focusedImageTimestamp === undefined) {
                 this.nextImageIndex = focusedIndex;
                 //this could happen if bounds changes
                 if (this.focusedImageIndex > this.imageHistory.length - 1) {

src/plugins/imagery/pluginSpec.js

@@ -528,10 +528,10 @@ describe("The Imagery View Layouts", () => {
                 const mouseDownEvent = createMouseEvent("mousedown");
                 let imageWrapper = parent.querySelectorAll(`.c-imagery-tsv__image-wrapper`);
                 imageWrapper[2].dispatchEvent(mouseDownEvent);
-
                 Vue.nextTick(() => {
+                    const timestamp = imageWrapper[2].id.replace('wrapper-', '');
                     expect(componentView.previewAction.invoke).toHaveBeenCalledWith([componentView.objectPath[0]], {
-                        indexForFocusedImage: 2,
+                        timestamp: Number(timestamp),
                         objectPath: componentView.objectPath
                     });
                     done();