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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openmct",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "description": "The Open MCT core platform",
   "devDependencies": {
     "@braintree/sanitize-url": "^5.0.2",

src/api/objects/TransactionSpec.js

@@ -15,7 +15,15 @@ describe("Transaction Class", () => {
 
                 return object;
             },
-            refresh: (object) => Promise.resolve(object)
+            refresh: (object) => Promise.resolve(object),
+            areIdsEqual: (...identifiers) => {
+                return identifiers.map(utils.parseKeyString)
+                    .every(identifier => {
+                        return identifier === identifiers[0]
+                            || (identifier.namespace === identifiers[0].namespace
+                                && identifier.key === identifiers[0].key);
+                    });
+            }
         };
 
         transaction = new Transaction(objectAPI);

src/api/time/IndependentTimeContext.js

@@ -145,7 +145,6 @@ class IndependentTimeContext extends TimeContext {
     /**
      * Causes this time context to follow another time context (either the global context, or another upstream time context)
      * This allows views to have their own time context which points to the appropriate upstream context as necessary, achieving nesting.
-     * @param {*} upstreamTimeContext
      */
     followTimeContext() {
         this.stopFollowingTimeContext();
@@ -153,7 +152,9 @@ class IndependentTimeContext extends TimeContext {
             TIME_CONTEXT_EVENTS.forEach((eventName) => {
                 const thisTimeContext = this;
                 this.upstreamTimeContext.on(eventName, passthrough);
-                this.unlisteners.push(() => this.upstreamTimeContext.off(eventName, passthrough));
+                this.unlisteners.push(() => {
+                    thisTimeContext.upstreamTimeContext.off(eventName, passthrough);
+                });
                 function passthrough() {
                     thisTimeContext.emit(eventName, ...arguments);
                 }
@@ -167,6 +168,7 @@ class IndependentTimeContext extends TimeContext {
      */
     stopFollowingTimeContext() {
         this.unlisteners.forEach(unlisten => unlisten());
+        this.unlisteners = [];
     }
 
     resetContext() {
@@ -180,17 +182,19 @@ class IndependentTimeContext extends TimeContext {
      * Refresh the time context, following any upstream time contexts as necessary
      */
     refreshContext(viewKey) {
-        //TODO: find a better way to skip upstream context for the view that just got an independent time context
         const key = this.openmct.objects.makeKeyString(this.objectPath[0].identifier);
         if (viewKey && key === viewKey) {
             return;
         }
 
+        //this is necessary as the upstream context gets reassigned after this
+        this.stopFollowingTimeContext();
+
         this.upstreamTimeContext = this.getUpstreamContext();
         this.followTimeContext();
 
         // Emit bounds so that views that are changing context get the upstream bounds
-        this.emit('bounds', this.upstreamTimeContext.bounds());
+        this.emit('bounds', this.bounds());
     }
 
     hasOwnContext() {

src/plugins/charts/BarGraphCompositionPolicy.js

@@ -41,14 +41,10 @@ export default function BarGraphCompositionPolicy(openmct) {
 
     return {
         allow: function (parent, child) {
-            if (child.type === 'conditionSet') {
-                return false;
-            }
-
-            if ((parent.type === BAR_GRAPH_KEY)
-                && (!hasBarGraphTelemetry(child))
-            ) {
-                return false;
+            if (parent.type === BAR_GRAPH_KEY) {
+                if ((child.type === 'conditionSet') || (!hasBarGraphTelemetry(child))) {
+                    return false;
+                }
             }
 
             return true;

src/plugins/exportAsJSONAction/ExportAsJSONAction.js

@@ -60,6 +60,7 @@ export default class ExportAsJSONAction {
      * @param {object} objectpath
      */
     invoke(objectpath) {
+        this.tree = {};
         const root = objectpath[0];
         this.root = JSON.parse(JSON.stringify(root));
         const rootId = this._getId(this.root);

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();

src/plugins/importFromJSONAction/ImportFromJSONActionSpec.js

@@ -122,6 +122,7 @@ describe("The import JSON action", function () {
         ];
 
         spyOn(openmct.forms, 'showForm').and.returnValue(Promise.resolve({}));
+        spyOn(importFromJSONAction, 'onSave').and.returnValue(Promise.resolve({}));
         importFromJSONAction.invoke(objectPath);
 
         expect(openmct.forms.showForm).toHaveBeenCalled();

src/plugins/timeConductor/DatePicker.vue

@@ -143,6 +143,11 @@ export default {
             time: undefined
         };
     },
+    watch: {
+        defaultDateTime() {
+            this.updateFromModel(this.defaultDateTime);
+        }
+    },
     mounted: function () {
         this.updateFromModel(this.defaultDateTime);
         this.updateViewForMonth();

src/plugins/timeConductor/independent/Mode.vue

@@ -109,11 +109,11 @@ export default {
         showModesMenu() {
             const elementBoundingClientRect = this.$refs.modeMenuButton.getBoundingClientRect();
             const x = elementBoundingClientRect.x;
-            const y = elementBoundingClientRect.y;
+            const y = elementBoundingClientRect.y + elementBoundingClientRect.height;
 
             const menuOptions = {
                 menuClass: 'c-conductor__mode-menu',
-                placement: this.openmct.menus.menuPlacement.TOP_RIGHT
+                placement: this.openmct.menus.menuPlacement.BOTTOM_RIGHT
             };
             this.openmct.menus.showSuperMenu(x, y, this.modes, menuOptions);
         },