From 1ca5271c3e80c1d24a176499c7a467dafc7de261 Mon Sep 17 00:00:00 2001
From: Michael Rogers <contact@mhrogers.com>
Date: Fri, 20 May 2022 12:26:54 -0500
Subject: [PATCH 01/13] e2e test for image thumbnail visibility and size - 5106
 (#5232)

* e2e test for timage thumbnail visibility and size

* Lint fix

* Remove URL comment

* Added comment and assigned selectors to var
---
 .../imagery/exampleImagery.e2e.spec.js        | 91 +++++++++++++++++++
 1 file changed, 91 insertions(+)

diff --git a/e2e/tests/plugins/imagery/exampleImagery.e2e.spec.js b/e2e/tests/plugins/imagery/exampleImagery.e2e.spec.js
index ef31628c61..ed12d6b14b 100644
--- a/e2e/tests/plugins/imagery/exampleImagery.e2e.spec.js
+++ b/e2e/tests/plugins/imagery/exampleImagery.e2e.spec.js
@@ -344,6 +344,97 @@ test('Example Imagery in Display layout', async ({ page }) => {
     expect(backgroundImageUrl2 >= backgroundImageUrl1);
 });
 
+test.describe('Example imagery thumbnails resize in display layouts', () => {
+
+    test('Resizing the layout changes thumbnail visibility and size', async ({ page }) => {
+        await page.goto('/', { waitUntil: 'networkidle' });
+
+        const thumbsWrapperLocator = await page.locator('.c-imagery__thumbs-wrapper');
+        // Click button:has-text("Create")
+        await page.locator('button:has-text("Create")').click();
+
+        // Click li:has-text("Display Layout")
+        await page.locator('li:has-text("Display Layout")').click();
+        const displayLayoutTitleField = page.locator('text=Properties Title Notes Horizontal grid (px) Vertical grid (px) Horizontal size ( >> input[type="text"]');
+        await displayLayoutTitleField.click();
+
+        await displayLayoutTitleField.fill('Thumbnail Display Layout');
+
+        // Click text=OK
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('text=OK').click()
+        ]);
+
+        // Click text=Snapshot Save and Finish Editing Save and Continue Editing >> button >> nth=1
+        await page.locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button').nth(1).click();
+
+        // Click text=Save and Finish Editing
+        await page.locator('text=Save and Finish Editing').click();
+
+        // Click button:has-text("Create")
+        await page.locator('button:has-text("Create")').click();
+
+        // Click li:has-text("Example Imagery")
+        await page.locator('li:has-text("Example Imagery")').click();
+
+        const imageryTitleField = page.locator('text=Properties Title Notes Images url list (comma separated) Image load delay (milli >> input[type="text"]');
+        // Click text=Properties Title Notes Images url list (comma separated) Image load delay (milli >> input[type="text"]
+        await imageryTitleField.click();
+
+        // Fill text=Properties Title Notes Images url list (comma separated) Image load delay (milli >> input[type="text"]
+        await imageryTitleField.fill('Thumbnail Example Imagery');
+
+        // Click text=OK
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('text=OK').click()
+        ]);
+
+        // Click text=Thumbnail Example Imagery Imagery Layout Snapshot >> button >> nth=0
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('text=Thumbnail Example Imagery Imagery Layout Snapshot >> button').first().click()
+        ]);
+
+        // Edit mode
+        await page.locator('text=Thumbnail Display Layout Snapshot >> button').nth(3).click();
+
+        // Click on example imagery to expose toolbar
+        await page.locator('text=Thumbnail Example Imagery Snapshot Large View').click();
+
+        // expect thumbnails not be visible when first added
+        await expect.soft(thumbsWrapperLocator.isHidden()).toBeTruthy();
+
+        // Resize the example imagery vertically to change the thumbnail visibility
+        /*
+        The following arbitrary values are added to observe the separate visual
+        conditions of the thumbnails (hidden, small thumbnails, regular thumbnails).
+        Specifically, height is set to 50px for small thumbs and 100px for regular
+        */
+        // Click #mct-input-id-103
+        await page.locator('#mct-input-id-103').click();
+
+        // Fill #mct-input-id-103
+        await page.locator('#mct-input-id-103').fill('50');
+
+        expect(thumbsWrapperLocator.isVisible()).toBeTruthy();
+        await expect(thumbsWrapperLocator).toHaveClass(/is-small-thumbs/);
+
+        // Resize the example imagery vertically to change the thumbnail visibility
+        // Click #mct-input-id-103
+        await page.locator('#mct-input-id-103').click();
+
+        // Fill #mct-input-id-103
+        await page.locator('#mct-input-id-103').fill('100');
+
+        expect(thumbsWrapperLocator.isVisible()).toBeTruthy();
+        await expect(thumbsWrapperLocator).not.toHaveClass(/is-small-thumbs/);
+
+    });
+
+});
+
 test.describe('Example Imagery in Flexible layout', () => {
     test.fixme('Can use Mouse Wheel to zoom in and out of previous image');
     test.fixme('Can use alt+drag to move around image once zoomed in');

From 48916564e4aed5c609b9fd4b89f2e2cc44c078c2 Mon Sep 17 00:00:00 2001
From: Shefali Joshi <simplyrender@gmail.com>
Date: Fri, 20 May 2022 11:41:01 -0700
Subject: [PATCH 02/13] Refactor plot actions to save space (#5201)

* Move image export actions to 3-dot menu
* Move cursor guide and toggle grid lines to local controls for plots (on hover)
* toggle cursor and gridlines affect all plots in a stacked plot
* Fix tests
* Better message when exporting plots, fixed typo

Co-authored-by: Joe Pea <trusktr@gmail.com>
Co-authored-by: Charles Hacskaylo <charlesh88@gmail.com>
---
 src/exporters/ImageExporter.js                |  2 +-
 src/plugins/plot/MctPlot.vue                  | 42 ++++++++++++--
 src/plugins/plot/Plot.vue                     | 52 +++--------------
 src/plugins/plot/PlotViewProvider.js          |  9 ++-
 src/plugins/plot/actions/ViewActions.js       | 57 +++++++++++++++++++
 src/plugins/plot/actions/utils.js             |  3 +
 .../overlayPlot/OverlayPlotViewProvider.js    |  9 ++-
 src/plugins/plot/plugin.js                    |  6 +-
 src/plugins/plot/pluginSpec.js                | 14 ++---
 src/plugins/plot/stackedPlot/StackedPlot.vue  | 57 +++++--------------
 .../plot/stackedPlot/StackedPlotItem.vue      | 12 +++-
 .../stackedPlot/StackedPlotViewProvider.js    |  9 ++-
 12 files changed, 168 insertions(+), 104 deletions(-)
 create mode 100644 src/plugins/plot/actions/ViewActions.js
 create mode 100644 src/plugins/plot/actions/utils.js

diff --git a/src/exporters/ImageExporter.js b/src/exporters/ImageExporter.js
index 5ff877cc61..22a9ed2e2e 100644
--- a/src/exporters/ImageExporter.js
+++ b/src/exporters/ImageExporter.js
@@ -51,7 +51,7 @@ class ImageExporter {
         const overlays = this.openmct.overlays;
         const dialog = overlays.dialog({
             iconClass: 'info',
-            message: 'Caputuring an image',
+            message: 'Capturing image, please wait...',
             buttons: [
                 {
                     label: 'Cancel',
diff --git a/src/plugins/plot/MctPlot.vue b/src/plugins/plot/MctPlot.vue
index ea5d8dd398..8ae4f08bf5 100644
--- a/src/plugins/plot/MctPlot.vue
+++ b/src/plugins/plot/MctPlot.vue
@@ -154,6 +154,22 @@
                         >
                         </button>
                     </div>
+                    <div class="c-button-set c-button-set--strip-h">
+                        <button
+                            class="c-button icon-crosshair"
+                            :class="{ 'is-active': cursorGuide }"
+                            title="Toggle cursor guides"
+                            @click="toggleCursorGuide"
+                        >
+                        </button>
+                        <button
+                            class="c-button"
+                            :class="{ 'icon-grid-on': gridLines, 'icon-grid-off': !gridLines }"
+                            title="Toggle grid lines"
+                            @click="toggleGridLines"
+                        >
+                        </button>
+                    </div>
                 </div>
 
                 <!--Cursor guides-->
@@ -213,16 +229,16 @@ export default {
                 };
             }
         },
-        gridLines: {
+        initGridLines: {
             type: Boolean,
             default() {
                 return true;
             }
         },
-        cursorGuide: {
+        initCursorGuide: {
             type: Boolean,
             default() {
-                return true;
+                return false;
             }
         },
         plotTickWidth: {
@@ -252,7 +268,9 @@ export default {
             isTimeOutOfSync: false,
             showLimitLineLabels: undefined,
             isFrozenOnMouseDown: false,
-            hasSameRangeValue: true
+            hasSameRangeValue: true,
+            cursorGuide: this.initCursorGuide,
+            gridLines: this.initGridLines
         };
     },
     computed: {
@@ -273,6 +291,14 @@ export default {
             return this.plotTickWidth || this.tickWidth;
         }
     },
+    watch: {
+        initGridLines(newGridLines) {
+            this.gridLines = newGridLines;
+        },
+        initCursorGuide(newCursorGuide) {
+            this.cursorGuide = newCursorGuide;
+        }
+    },
     mounted() {
         document.addEventListener('keydown', this.handleKeyDown);
         document.addEventListener('keyup', this.handleKeyUp);
@@ -1130,6 +1156,14 @@ export default {
         },
         legendHoverChanged(data) {
             this.showLimitLineLabels = data;
+        },
+        toggleCursorGuide() {
+            this.cursorGuide = !this.cursorGuide;
+            this.$emit('cursorGuide', this.cursorGuide);
+        },
+        toggleGridLines() {
+            this.gridLines = !this.gridLines;
+            this.$emit('gridLines', this.gridLines);
         }
     }
 };
diff --git a/src/plugins/plot/Plot.vue b/src/plugins/plot/Plot.vue
index beb3b92456..2decf3a029 100644
--- a/src/plugins/plot/Plot.vue
+++ b/src/plugins/plot/Plot.vue
@@ -24,41 +24,6 @@
     ref="plotWrapper"
     class="c-plot holder holder-plot has-control-bar"
 >
-    <div
-        v-if="!options.compact"
-        class="c-control-bar"
-    >
-        <span class="c-button-set c-button-set--strip-h">
-            <button
-                class="c-button icon-download"
-                title="Export This View's Data as PNG"
-                @click="exportPNG()"
-            >
-                <span class="c-button__label">PNG</span>
-            </button>
-            <button
-                class="c-button"
-                title="Export This View's Data as JPG"
-                @click="exportJPG()"
-            >
-                <span class="c-button__label">JPG</span>
-            </button>
-        </span>
-        <button
-            class="c-button icon-crosshair"
-            :class="{ 'is-active': cursorGuide }"
-            title="Toggle cursor guides"
-            @click="toggleCursorGuide"
-        >
-        </button>
-        <button
-            class="c-button"
-            :class="{ 'icon-grid-on': gridLines, 'icon-grid-off': !gridLines }"
-            title="Toggle grid lines"
-            @click="toggleGridLines"
-        >
-        </button>
-    </div>
 
     <div
         ref="plotContainer"
@@ -70,8 +35,8 @@
             class="c-loading--overlay loading"
         ></div>
         <mct-plot
-            :grid-lines="gridLines"
-            :cursor-guide="cursorGuide"
+            :init-grid-lines="gridLines"
+            :init-cursor-guide="cursorGuide"
             :options="options"
             @loadingUpdated="loadingUpdated"
             @statusUpdated="setStatus"
@@ -135,15 +100,14 @@ export default {
             this.imageExporter.exportPNG(plotElement, 'plot.png', 'export-plot');
         },
 
-        toggleCursorGuide() {
-            this.cursorGuide = !this.cursorGuide;
-        },
-
-        toggleGridLines() {
-            this.gridLines = !this.gridLines;
-        },
         setStatus(status) {
             this.status = status;
+        },
+        getViewContext() {
+            return {
+                exportPNG: this.exportPNG,
+                exportJPG: this.exportJPG
+            };
         }
     }
 };
diff --git a/src/plugins/plot/PlotViewProvider.js b/src/plugins/plot/PlotViewProvider.js
index c71c0a9615..8d0d862a2d 100644
--- a/src/plugins/plot/PlotViewProvider.js
+++ b/src/plugins/plot/PlotViewProvider.js
@@ -80,9 +80,16 @@ export default function PlotViewProvider(openmct) {
                                 }
                             };
                         },
-                        template: '<plot :options="options"></plot>'
+                        template: '<plot ref="plotComponent" :options="options"></plot>'
                     });
                 },
+                getViewContext() {
+                    if (!component) {
+                        return {};
+                    }
+
+                    return component.$refs.plotComponent.getViewContext();
+                },
                 destroy: function () {
                     component.$destroy();
                     component = undefined;
diff --git a/src/plugins/plot/actions/ViewActions.js b/src/plugins/plot/actions/ViewActions.js
new file mode 100644
index 0000000000..7ebf7fe726
--- /dev/null
+++ b/src/plugins/plot/actions/ViewActions.js
@@ -0,0 +1,57 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import {isPlotView} from "@/plugins/plot/actions/utils";
+
+const exportPNG = {
+    name: 'Export as PNG',
+    key: 'export-as-png',
+    description: 'Export This View\'s Data as PNG',
+    cssClass: 'c-icon-button icon-download',
+    group: 'view',
+    invoke(objectPath, view) {
+        view.getViewContext().exportPNG();
+    }
+};
+
+const exportJPG = {
+    name: 'Export as JPG',
+    key: 'export-as-jpg',
+    description: 'Export This View\'s Data as JPG',
+    cssClass: 'c-icon-button icon-download',
+    group: 'view',
+    invoke(objectPath, view) {
+        view.getViewContext().exportJPG();
+    }
+};
+
+const viewActions = [
+    exportPNG,
+    exportJPG
+];
+
+viewActions.forEach(action => {
+    action.appliesTo = (objectPath, view = {}) => {
+        return isPlotView(view);
+    };
+});
+
+export default viewActions;
diff --git a/src/plugins/plot/actions/utils.js b/src/plugins/plot/actions/utils.js
new file mode 100644
index 0000000000..2bebbecf4d
--- /dev/null
+++ b/src/plugins/plot/actions/utils.js
@@ -0,0 +1,3 @@
+export function isPlotView(view) {
+    return view.key === 'plot-single' || view.key === 'plot-overlay' || view.key === 'plot-stacked';
+}
diff --git a/src/plugins/plot/overlayPlot/OverlayPlotViewProvider.js b/src/plugins/plot/overlayPlot/OverlayPlotViewProvider.js
index 3a70da2848..e34bb59d2e 100644
--- a/src/plugins/plot/overlayPlot/OverlayPlotViewProvider.js
+++ b/src/plugins/plot/overlayPlot/OverlayPlotViewProvider.js
@@ -65,9 +65,16 @@ export default function OverlayPlotViewProvider(openmct) {
                                 }
                             };
                         },
-                        template: '<plot :options="options"></plot>'
+                        template: '<plot ref="plotComponent" :options="options"></plot>'
                     });
                 },
+                getViewContext() {
+                    if (!component) {
+                        return {};
+                    }
+
+                    return component.$refs.plotComponent.getViewContext();
+                },
                 destroy: function () {
                     component.$destroy();
                     component = undefined;
diff --git a/src/plugins/plot/plugin.js b/src/plugins/plot/plugin.js
index 93c3122ca5..89f6f005b7 100644
--- a/src/plugins/plot/plugin.js
+++ b/src/plugins/plot/plugin.js
@@ -25,6 +25,7 @@ import StackedPlotViewProvider from './stackedPlot/StackedPlotViewProvider';
 import PlotsInspectorViewProvider from './inspector/PlotsInspectorViewProvider';
 import OverlayPlotCompositionPolicy from './overlayPlot/OverlayPlotCompositionPolicy';
 import StackedPlotCompositionPolicy from './stackedPlot/StackedPlotCompositionPolicy';
+import PlotViewActions from "./actions/ViewActions";
 
 export default function () {
     return function install(openmct) {
@@ -67,6 +68,9 @@ export default function () {
 
         openmct.composition.addPolicy(new OverlayPlotCompositionPolicy(openmct).allow);
         openmct.composition.addPolicy(new StackedPlotCompositionPolicy(openmct).allow);
+
+        PlotViewActions.forEach(action => {
+            openmct.actions.register(action);
+        });
     };
 }
-
diff --git a/src/plugins/plot/pluginSpec.js b/src/plugins/plot/pluginSpec.js
index f1a0e475b5..a78107ffee 100644
--- a/src/plugins/plot/pluginSpec.js
+++ b/src/plugins/plot/pluginSpec.js
@@ -724,16 +724,16 @@ describe("the plugin", function () {
         });
 
         it("turns on cursor Guides all telemetry objects", (done) => {
-            expect(plotViewComponentObject.cursorGuide).toBeFalse();
-            plotViewComponentObject.toggleCursorGuide();
+            expect(plotViewComponentObject.$children[0].cursorGuide).toBeFalse();
+            plotViewComponentObject.$children[0].cursorGuide = true;
             Vue.nextTick(() => {
-                expect(plotViewComponentObject.$children[0].component.$children[0].cursorGuide).toBeTrue();
+                expect(plotViewComponentObject.$children[0].cursorGuide).toBeTrue();
                 done();
             });
         });
 
         it("shows grid lines for all telemetry objects", () => {
-            expect(plotViewComponentObject.gridLines).toBeTrue();
+            expect(plotViewComponentObject.$children[0].gridLines).toBeTrue();
             let gridLinesContainer = element.querySelectorAll(".gl-plot-display-area .js-ticks");
             let visible = 0;
             gridLinesContainer.forEach(el => {
@@ -745,10 +745,10 @@ describe("the plugin", function () {
         });
 
         it("hides grid lines for all telemetry objects", (done) => {
-            expect(plotViewComponentObject.gridLines).toBeTrue();
-            plotViewComponentObject.toggleGridLines();
+            expect(plotViewComponentObject.$children[0].gridLines).toBeTrue();
+            plotViewComponentObject.$children[0].gridLines = false;
             Vue.nextTick(() => {
-                expect(plotViewComponentObject.gridLines).toBeFalse();
+                expect(plotViewComponentObject.$children[0].gridLines).toBeFalse();
                 let gridLinesContainer = element.querySelectorAll(".gl-plot-display-area .js-ticks");
                 let visible = 0;
                 gridLinesContainer.forEach(el => {
diff --git a/src/plugins/plot/stackedPlot/StackedPlot.vue b/src/plugins/plot/stackedPlot/StackedPlot.vue
index 1c63a0413d..1d409d1990 100644
--- a/src/plugins/plot/stackedPlot/StackedPlot.vue
+++ b/src/plugins/plot/stackedPlot/StackedPlot.vue
@@ -22,41 +22,6 @@
 
 <template>
 <div class="c-plot c-plot--stacked holder holder-plot has-control-bar">
-    <div
-        v-show="!hideExportButtons && !options.compact"
-        class="c-control-bar"
-    >
-        <span class="c-button-set c-button-set--strip-h">
-            <button
-                class="c-button icon-download"
-                title="Export This View's Data as PNG"
-                @click="exportPNG()"
-            >
-                <span class="c-button__label">PNG</span>
-            </button>
-            <button
-                class="c-button"
-                title="Export This View's Data as JPG"
-                @click="exportJPG()"
-            >
-                <span class="c-button__label">JPG</span>
-            </button>
-        </span>
-        <button
-            class="c-button icon-crosshair"
-            :class="{ 'is-active': cursorGuide }"
-            title="Toggle cursor guides"
-            @click="toggleCursorGuide"
-        >
-        </button>
-        <button
-            class="c-button"
-            :class="{ 'icon-grid-on': gridLines, 'icon-grid-off': !gridLines }"
-            title="Toggle grid lines"
-            @click="toggleGridLines"
-        >
-        </button>
-    </div>
     <div class="l-view-section">
         <stacked-plot-item
             v-for="object in compositionObjects"
@@ -69,6 +34,8 @@
             :plot-tick-width="maxTickWidth"
             @plotTickWidth="onTickWidthChange"
             @loadingUpdated="loadingUpdated"
+            @cursorGuide="onCursorGuideChange"
+            @gridLines="onGridLinesChange"
         />
     </div>
 </div>
@@ -184,20 +151,24 @@ export default {
                     this.hideExportButtons = false;
                 }.bind(this));
         },
-
-        toggleCursorGuide() {
-            this.cursorGuide = !this.cursorGuide;
-        },
-
-        toggleGridLines() {
-            this.gridLines = !this.gridLines;
-        },
         onTickWidthChange(width, plotId) {
             if (!Object.prototype.hasOwnProperty.call(this.tickWidthMap, plotId)) {
                 return;
             }
 
             this.$set(this.tickWidthMap, plotId, width);
+        },
+        onCursorGuideChange(cursorGuide) {
+            this.cursorGuide = cursorGuide === true;
+        },
+        onGridLinesChange(gridLines) {
+            this.gridLines = gridLines === true;
+        },
+        getViewContext() {
+            return {
+                exportPNG: this.exportPNG,
+                exportJPG: this.exportJPG
+            };
         }
     }
 };
diff --git a/src/plugins/plot/stackedPlot/StackedPlotItem.vue b/src/plugins/plot/stackedPlot/StackedPlotItem.vue
index c47dacba42..15cb4b7b2d 100644
--- a/src/plugins/plot/stackedPlot/StackedPlotItem.vue
+++ b/src/plugins/plot/stackedPlot/StackedPlotItem.vue
@@ -96,6 +96,8 @@ export default {
             }
 
             const onTickWidthChange = this.onTickWidthChange;
+            const onCursorGuideChange = this.onCursorGuideChange;
+            const onGridLinesChange = this.onGridLinesChange;
             const loadingUpdated = this.loadingUpdated;
             const setStatus = this.setStatus;
 
@@ -121,16 +123,24 @@ export default {
                     return {
                         ...getProps(),
                         onTickWidthChange,
+                        onCursorGuideChange,
+                        onGridLinesChange,
                         loadingUpdated,
                         setStatus
                     };
                 },
-                template: '<div ref="plotWrapper" class="l-view-section u-style-receiver js-style-receiver" :class="{\'s-status-timeconductor-unsynced\': status && status === \'timeconductor-unsynced\'}"><div v-show="!!loading" class="c-loading--overlay loading"></div><mct-plot :grid-lines="gridLines" :cursor-guide="cursorGuide" :plot-tick-width="plotTickWidth" :options="options" @plotTickWidth="onTickWidthChange" @statusUpdated="setStatus" @loadingUpdated="loadingUpdated"/></div>'
+                template: '<div ref="plotWrapper" class="l-view-section u-style-receiver js-style-receiver" :class="{\'s-status-timeconductor-unsynced\': status && status === \'timeconductor-unsynced\'}"><div v-show="!!loading" class="c-loading--overlay loading"></div><mct-plot :init-grid-lines="gridLines" :init-cursor-guide="cursorGuide" :plot-tick-width="plotTickWidth" :options="options" @plotTickWidth="onTickWidthChange" @cursorGuide="onCursorGuideChange" @gridLines="onGridLinesChange" @statusUpdated="setStatus" @loadingUpdated="loadingUpdated"/></div>'
             });
         },
         onTickWidthChange() {
             this.$emit('plotTickWidth', ...arguments);
         },
+        onCursorGuideChange() {
+            this.$emit('cursorGuide', ...arguments);
+        },
+        onGridLinesChange() {
+            this.$emit('gridLines', ...arguments);
+        },
         setStatus(status) {
             this.status = status;
             this.updateComponentProp('status', status);
diff --git a/src/plugins/plot/stackedPlot/StackedPlotViewProvider.js b/src/plugins/plot/stackedPlot/StackedPlotViewProvider.js
index 41008dc9f7..f97ac6e8e2 100644
--- a/src/plugins/plot/stackedPlot/StackedPlotViewProvider.js
+++ b/src/plugins/plot/stackedPlot/StackedPlotViewProvider.js
@@ -67,9 +67,16 @@ export default function StackedPlotViewProvider(openmct) {
                                 }
                             };
                         },
-                        template: '<stacked-plot :options="options"></stacked-plot>'
+                        template: '<stacked-plot ref="plotComponent" :options="options"></stacked-plot>'
                     });
                 },
+                getViewContext() {
+                    if (!component) {
+                        return {};
+                    }
+
+                    return component.$refs.plotComponent.getViewContext();
+                },
                 destroy: function () {
                     component.$destroy();
                     component = undefined;

From 037886aa010802cac719737cb5fb8240693b368b Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <ozyx@users.noreply.github.com>
Date: Fri, 20 May 2022 12:31:59 -0700
Subject: [PATCH 03/13] Better detection of device orientation based on browser
 feature availability (#5172)

* Update Agent.isPortrait() utility method (#4875)
* Properly feature detect for orientation APIs (#4875)
* Use Agent to detect device orientation (#4875)
* Tests for display orientation detection (#4875)

Co-authored-by: Andrew Henry <akhenry@gmail.com>
---
 .../DeviceClassifier/src/DeviceClassifier.js  |  1 -
 src/plugins/notebook/components/Notebook.vue  | 11 +++----
 src/plugins/notebook/plugin.js                |  4 ++-
 src/utils/agent/Agent.js                      | 16 +++++++++-
 src/utils/agent/AgentSpec.js                  | 30 ++++++++++++++++++-
 5 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/src/plugins/DeviceClassifier/src/DeviceClassifier.js b/src/plugins/DeviceClassifier/src/DeviceClassifier.js
index d305112d70..7bba65d964 100644
--- a/src/plugins/DeviceClassifier/src/DeviceClassifier.js
+++ b/src/plugins/DeviceClassifier/src/DeviceClassifier.js
@@ -52,7 +52,6 @@ export default (agent, document) => {
     if (agent.isMobile()) {
         const mediaQuery = window.matchMedia("(orientation: landscape)");
         function eventHandler(event) {
-            console.log("changed");
             if (event.matches) {
                 body.classList.remove("portrait");
                 body.classList.add("landscape");
diff --git a/src/plugins/notebook/components/Notebook.vue b/src/plugins/notebook/components/Notebook.vue
index f045832a9a..ee76300db4 100644
--- a/src/plugins/notebook/components/Notebook.vue
+++ b/src/plugins/notebook/components/Notebook.vue
@@ -177,7 +177,7 @@ export default {
         SearchResults,
         Sidebar
     },
-    inject: ['openmct', 'snapshotContainer'],
+    inject: ['agent', 'openmct', 'snapshotContainer'],
     props: {
         domainObject: {
             type: Object,
@@ -455,12 +455,9 @@ export default {
                 - tablet portrait
                 - in a layout frame (within .c-so-view)
             */
-            const classList = document.querySelector('body').classList;
-            const isPhone = Array.from(classList).includes('phone');
-            const isTablet = Array.from(classList).includes('tablet');
-            // address in https://github.com/nasa/openmct/issues/4875
-            // eslint-disable-next-line compat/compat
-            const isPortrait = window.screen.orientation.type.includes('portrait');
+            const isPhone = this.agent.isPhone();
+            const isTablet = this.agent.isTablet();
+            const isPortrait = this.agent.isPortrait();
             const isInLayout = Boolean(this.$el.closest('.c-so-view'));
             const sidebarCoversEntries = (isPhone || (isTablet && isPortrait) || isInLayout);
             this.sidebarCoversEntries = sidebarCoversEntries;
diff --git a/src/plugins/notebook/plugin.js b/src/plugins/notebook/plugin.js
index 033b04f8fc..be02262972 100644
--- a/src/plugins/notebook/plugin.js
+++ b/src/plugins/notebook/plugin.js
@@ -8,6 +8,7 @@ import { notebookImageMigration, IMAGE_MIGRATION_VER } from '../notebook/utils/n
 import { NOTEBOOK_TYPE } from './notebook-constants';
 
 import Vue from 'vue';
+import Agent from '@/utils/agent/Agent';
 
 export default function NotebookPlugin() {
     return function install(openmct) {
@@ -18,7 +19,7 @@ export default function NotebookPlugin() {
         }
 
         openmct.actions.register(new CopyToNotebookAction(openmct));
-
+        const agent = new Agent(window);
         const notebookType = {
             name: 'Notebook',
             description: 'Create and save timestamped notes with embedded object snapshots.',
@@ -142,6 +143,7 @@ export default function NotebookPlugin() {
                                 Notebook
                             },
                             provide: {
+                                agent,
                                 openmct,
                                 snapshotContainer
                             },
diff --git a/src/utils/agent/Agent.js b/src/utils/agent/Agent.js
index 4706c2c949..f88f47eb3c 100644
--- a/src/utils/agent/Agent.js
+++ b/src/utils/agent/Agent.js
@@ -89,7 +89,21 @@ export default class Agent {
      * @returns {boolean} true in portrait mode
      */
     isPortrait() {
-        return this.window.innerWidth < this.window.innerHeight;
+        const { screen } = this.window;
+        const hasScreenOrientation = screen && Object.prototype.hasOwnProperty.call(screen, 'orientation');
+        const hasWindowOrientation = Object.prototype.hasOwnProperty.call(this.window, 'orientation');
+
+        if (hasScreenOrientation) {
+            return screen.orientation.type.includes('portrait');
+        } else if (hasWindowOrientation) {
+            // Use window.orientation API if available (e.g. Safari mobile)
+            // which returns [-90, 0, 90, 180] based on device orientation.
+            const { orientation } = this.window;
+
+            return Math.abs(orientation / 90) % 2 === 0;
+        } else {
+            return this.window.innerWidth < this.window.innerHeight;
+        }
     }
     /**
      * Check if the user's device is in a landscape-style
diff --git a/src/utils/agent/AgentSpec.js b/src/utils/agent/AgentSpec.js
index 549772b40a..d803fea4af 100644
--- a/src/utils/agent/AgentSpec.js
+++ b/src/utils/agent/AgentSpec.js
@@ -68,7 +68,7 @@ describe("The Agent", function () {
         expect(agent.isTablet()).toBeTruthy();
     });
 
-    it("detects display orientation", function () {
+    it("detects display orientation by innerHeight and innerWidth", function () {
         agent = new Agent(testWindow);
         testWindow.innerWidth = 1024;
         testWindow.innerHeight = 400;
@@ -80,6 +80,34 @@ describe("The Agent", function () {
         expect(agent.isLandscape()).toBeFalsy();
     });
 
+    it("detects display orientation by screen.orientation", function () {
+        agent = new Agent(testWindow);
+        testWindow.screen = {
+            orientation: {
+                type: "landscape-primary"
+            }
+        };
+        expect(agent.isPortrait()).toBeFalsy();
+        expect(agent.isLandscape()).toBeTruthy();
+        testWindow.screen = {
+            orientation: {
+                type: "portrait-primary"
+            }
+        };
+        expect(agent.isPortrait()).toBeTruthy();
+        expect(agent.isLandscape()).toBeFalsy();
+    });
+
+    it("detects display orientation by window.orientation", function () {
+        agent = new Agent(testWindow);
+        testWindow.orientation = 90;
+        expect(agent.isPortrait()).toBeFalsy();
+        expect(agent.isLandscape()).toBeTruthy();
+        testWindow.orientation = 0;
+        expect(agent.isPortrait()).toBeTruthy();
+        expect(agent.isLandscape()).toBeFalsy();
+    });
+
     it("detects touch support", function () {
         testWindow.ontouchstart = null;
         expect(new Agent(testWindow).isTouch()).toBe(true);

From 9f9c69ee68a02f0da11689a7dbe8a2b635b6e1f7 Mon Sep 17 00:00:00 2001
From: Nikhil <nikhil.k.mandlik@nasa.gov>
Date: Fri, 20 May 2022 13:28:56 -0700
Subject: [PATCH 04/13] Gauge limits (#5156)

* Fix tick values for plots ticks in log mode and null check (#5119)
* [2297] When there is no display range or range, skip setting the range value when auto scale is turned off.
* If the formatted value is a number and a float, set precision to 2 decimal points.
* Fix value assignment
* Use whole numbers in log mode
* Revert whole numbers fix - need floats for values between 0 and 1.
* Reverts forced precision for log plots axis labels (#5147)
* [Gauge Plugin] Limits and Composition Issues #5155
* default current value as '--'
* updated as per review comments.
Co-authored-by: Shefali Joshi <simplyrender@gmail.com>
Co-authored-by: Andrew Henry <akhenry@gmail.com>
---
 src/plugins/gauge/components/Gauge.vue | 91 +++++++++++++++++++-------
 1 file changed, 69 insertions(+), 22 deletions(-)

diff --git a/src/plugins/gauge/components/Gauge.vue b/src/plugins/gauge/components/Gauge.vue
index 91036ce965..19fa4a8218 100644
--- a/src/plugins/gauge/components/Gauge.vue
+++ b/src/plugins/gauge/components/Gauge.vue
@@ -85,14 +85,13 @@
             class="c-dial__bg"
             viewBox="0 0 10 10"
         >
-
             <g
-                v-if="limitLow !== null && dialLowLimitDeg < getLimitDegree('low', 'max')"
+                v-if="isDialLowLimit"
                 class="c-dial__limit-low"
                 :style="`transform: rotate(${dialLowLimitDeg}deg)`"
             >
                 <rect
-                    v-if="dialLowLimitDeg >= getLimitDegree('low', 'q1')"
+                    v-if="isDialLowLimitLow"
                     class="c-dial__low-limit__low"
                     x="5"
                     y="5"
@@ -100,7 +99,7 @@
                     height="5"
                 />
                 <rect
-                    v-if="dialLowLimitDeg >= getLimitDegree('low', 'q2')"
+                    v-if="isDialLowLimitMid"
                     class="c-dial__low-limit__mid"
                     x="5"
                     y="0"
@@ -108,7 +107,7 @@
                     height="5"
                 />
                 <rect
-                    v-if="dialLowLimitDeg >= getLimitDegree('low', 'q3')"
+                    v-if="isDialLowLimitHigh"
                     class="c-dial__low-limit__high"
                     x="0"
                     y="0"
@@ -118,12 +117,12 @@
             </g>
 
             <g
-                v-if="limitHigh !== null && dialHighLimitDeg < getLimitDegree('high', 'max')"
+                v-if="isDialHighLimit"
                 class="c-dial__limit-high"
                 :style="`transform: rotate(${dialHighLimitDeg}deg)`"
             >
                 <rect
-                    v-if="dialHighLimitDeg <= getLimitDegree('high', 'max')"
+                    v-if="isDialHighLimitLow"
                     class="c-dial__high-limit__low"
                     x="0"
                     y="5"
@@ -131,7 +130,7 @@
                     height="5"
                 />
                 <rect
-                    v-if="dialHighLimitDeg <= getLimitDegree('high', 'q2')"
+                    v-if="isDialHighLimitMid"
                     class="c-dial__high-limit__mid"
                     x="0"
                     y="0"
@@ -139,7 +138,7 @@
                     height="5"
                 />
                 <rect
-                    v-if="dialHighLimitDeg <= getLimitDegree('high', 'q3')"
+                    v-if="isDialHighLimitHigh"
                     class="c-dial__high-limit__high"
                     x="5"
                     y="0"
@@ -159,7 +158,7 @@
                 :style="`transform: rotate(${degValueFilledDial}deg)`"
             >
                 <rect
-                    v-if="degValue >= getLimitDegree('low', 'q1')"
+                    v-if="isDialFilledValueLow"
                     class="c-dial__filled-value__low"
                     x="5"
                     y="5"
@@ -167,7 +166,7 @@
                     height="5"
                 />
                 <rect
-                    v-if="degValue >= getLimitDegree('low', 'q2')"
+                    v-if="isDialFilledValueMid"
                     class="c-dial__filled-value__mid"
                     x="5"
                     y="0"
@@ -175,7 +174,7 @@
                     height="5"
                 />
                 <rect
-                    v-if="degValue >= getLimitDegree('low', 'q3')"
+                    v-if="isDialFilledValueHigh"
                     class="c-dial__filled-value__high"
                     x="0"
                     y="0"
@@ -216,13 +215,13 @@
                     ></div>
 
                     <div
-                        v-if="limitHigh !== null && meterHighLimitPerc > 0"
+                        v-if="isMeterLimitHigh"
                         class="c-meter__limit-high"
                         :style="`height: ${meterHighLimitPerc}%`"
                     ></div>
 
                     <div
-                        v-if="limitLow !== null && meterLowLimitPerc > 0"
+                        v-if="isMeterLimitLow"
                         class="c-meter__limit-low"
                         :style="`height: ${meterLowLimitPerc}%`"
                     ></div>
@@ -235,13 +234,13 @@
                     ></div>
 
                     <div
-                        v-if="limitHigh !== null && meterHighLimitPerc > 0"
+                        v-if="isMeterLimitHigh"
                         class="c-meter__limit-high"
                         :style="`width: ${meterHighLimitPerc}%`"
                     ></div>
 
                     <div
-                        v-if="limitLow !== null && meterLowLimitPerc > 0"
+                        v-if="isMeterLimitLow"
                         class="c-meter__limit-low"
                         :style="`width: ${meterLowLimitPerc}%`"
                     ></div>
@@ -275,6 +274,7 @@
 import { DIAL_VALUE_DEG_OFFSET, getLimitDegree } from '../gauge-limit-util';
 
 const LIMIT_PADDING_IN_PERCENT = 10;
+const DEFAULT_CURRENT_VALUE = '--';
 
 export default {
     name: 'Gauge',
@@ -283,7 +283,7 @@ export default {
         let gaugeController = this.domainObject.configuration.gaugeController;
 
         return {
-            curVal: 0,
+            curVal: DEFAULT_CURRENT_VALUE,
             digits: 3,
             precision: gaugeController.precision,
             displayMinMax: gaugeController.isDisplayMinMax,
@@ -319,6 +319,45 @@ export default {
 
             return VIEWBOX_STR.replace('X', this.digits * DIGITS_RATIO);
         },
+        isDialLowLimit() {
+            return this.limitLow.length > 0 && this.dialLowLimitDeg < getLimitDegree('low', 'max');
+        },
+        isDialLowLimitLow() {
+            return this.dialLowLimitDeg >= getLimitDegree('low', 'q1');
+        },
+        isDialLowLimitMid() {
+            return this.dialLowLimitDeg >= getLimitDegree('low', 'q2');
+        },
+        isDialLowLimitHigh() {
+            return this.dialLowLimitDeg >= getLimitDegree('low', 'q3');
+        },
+        isDialHighLimit() {
+            return this.limitHigh.length > 0 && this.dialHighLimitDeg < getLimitDegree('high', 'max');
+        },
+        isDialHighLimitLow() {
+            return this.dialHighLimitDeg <= getLimitDegree('high', 'max');
+        },
+        isDialHighLimitMid() {
+            return this.dialHighLimitDeg <= getLimitDegree('high', 'q2');
+        },
+        isDialHighLimitHigh() {
+            return this.dialHighLimitDeg <= getLimitDegree('high', 'q3');
+        },
+        isDialFilledValueLow() {
+            return this.degValue >= getLimitDegree('low', 'q1');
+        },
+        isDialFilledValueMid() {
+            return this.degValue >= getLimitDegree('low', 'q2');
+        },
+        isDialFilledValueHigh() {
+            return this.degValue >= getLimitDegree('low', 'q3');
+        },
+        isMeterLimitHigh() {
+            return this.limitHigh.length > 0 && this.meterHighLimitPerc > 0;
+        },
+        isMeterLimitLow() {
+            return this.limitLow.length > 0 && this.meterLowLimitPerc > 0;
+        },
         typeDial() {
             return this.matchGaugeType('dial');
         },
@@ -459,13 +498,14 @@ export default {
                 this.unsubscribe = null;
             }
 
-            this.metadata = null;
+            this.curVal = DEFAULT_CURRENT_VALUE;
             this.formats = null;
-            this.valueKey = null;
-            this.limitHigh = null;
-            this.limitLow = null;
+            this.limitHigh = '';
+            this.limitLow = '';
+            this.metadata = null;
             this.rangeHigh = null;
             this.rangeLow = null;
+            this.valueKey = null;
         },
         request(domainObject = this.telemetryObject) {
             this.metadata = this.openmct.telemetry.getMetadata(domainObject);
@@ -518,13 +558,20 @@ export default {
             } else if (telemetryLimit.WATCH) {
                 limits = telemetryLimit.WATCH;
             } else {
-                this.openmct.notifications.error('No limits definition for given telemetry');
+                this.openmct.notifications.error('No limits definition for given telemetry, hiding low and high limits');
+                this.displayMinMax = false;
+                this.limitHigh = '';
+                this.limitLow = '';
+
+                return;
             }
 
             this.limitHigh = this.round(limits.high[this.valueKey]);
             this.limitLow = this.round(limits.low[this.valueKey]);
             this.rangeHigh = this.round(this.limitHigh + this.limitHigh * LIMIT_PADDING_IN_PERCENT / 100);
             this.rangeLow = this.round(this.limitLow - Math.abs(this.limitLow * LIMIT_PADDING_IN_PERCENT / 100));
+
+            this.displayMinMax = this.domainObject.configuration.gaugeController.isDisplayMinMax;
         },
         updateValue(datum) {
             this.datum = datum;

From 17c16eba503fbae8c903672b6a80a8de2bb33e9c Mon Sep 17 00:00:00 2001
From: Michael Rogers <contact@mhrogers.com>
Date: Fri, 20 May 2022 17:11:32 -0500
Subject: [PATCH 05/13] Added visual test for capturing the Save Successful
 Banner (#5237)

Co-authored-by: John Hill <john.c.hill@nasa.gov>
---
 e2e/playwright-visual.config.js         | 11 +++++------
 e2e/tests/visual/default.visual.spec.js | 26 ++++++++++++++++++++++++-
 package.json                            |  2 +-
 3 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/e2e/playwright-visual.config.js b/e2e/playwright-visual.config.js
index 7f6df513fc..fbf2c02011 100644
--- a/e2e/playwright-visual.config.js
+++ b/e2e/playwright-visual.config.js
@@ -4,10 +4,10 @@
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-    retries: 0,
-    testDir: 'tests',
+    retries: 0, // visual tests should never retry due to snapshot comparison errors
+    testDir: 'tests/visual',
     timeout: 90 * 1000,
-    workers: 1,
+    workers: 1, // visual tests should never run in parallel due to test pollution
     webServer: {
         command: 'npm run start',
         port: 8080,
@@ -17,7 +17,7 @@ const config = {
     use: {
         browserName: "chromium",
         baseURL: 'http://localhost:8080/',
-        headless: true,
+        headless: true, // this needs to remain headless to avoid visual changes due to GPU
         ignoreHTTPSErrors: true,
         screenshot: 'on',
         trace: 'off',
@@ -25,8 +25,7 @@ const config = {
     },
     reporter: [
         ['list'],
-        ['junit', { outputFile: 'test-results/results.xml' }],
-        ['allure-playwright']
+        ['junit', { outputFile: 'test-results/results.xml' }]
     ]
 };
 
diff --git a/e2e/tests/visual/default.visual.spec.js b/e2e/tests/visual/default.visual.spec.js
index 7a870c4128..364cdb9d1d 100644
--- a/e2e/tests/visual/default.visual.spec.js
+++ b/e2e/tests/visual/default.visual.spec.js
@@ -47,7 +47,10 @@ test.beforeEach(async ({ context }) => {
         path: path.join(__dirname, '../../..', './node_modules/sinon/pkg/sinon.js')
     });
     await context.addInitScript(() => {
-        window.__clock = sinon.useFakeTimers(); //Set browser clock to UNIX Epoch
+        window.__clock = sinon.useFakeTimers({
+            now: 0,
+            shouldAdvanceTime: true
+        }); //Set browser clock to UNIX Epoch
     });
 });
 
@@ -171,3 +174,24 @@ test('Visual - Sine Wave Generator Form', async ({ page }) => {
     await page.waitForTimeout(VISUAL_GRACE_PERIOD);
     await percySnapshot(page, 'removed amplitude property value');
 });
+
+test('Visual - Save Successful Banner', async ({ page }) => {
+    //Go to baseURL
+    await page.goto('/', { waitUntil: 'networkidle' });
+
+    //Click the Create button
+    await page.click('button:has-text("Create")');
+
+    //NOTE Something other than example imagery
+    await page.click('text=Timer');
+
+    // Click text=OK
+    await page.click('text=OK');
+    await page.locator('.c-message-banner__message').hover({ trial: true });
+    await percySnapshot(page, 'Banner message shown');
+
+    //Wait until Save Banner is gone
+    await page.waitForSelector('.c-message-banner__message', { state: 'detached'});
+    await percySnapshot(page, 'Banner message gone');
+
+});
diff --git a/package.json b/package.json
index 0497345d35..9d273c729b 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,7 @@
     "test:e2e:ci": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome smoke default condition timeConductor branding clock exampleImagery",
     "test:e2e:local": "npx playwright test --config=e2e/playwright-local.config.js --project=chrome",
     "test:e2e:updatesnapshots": "npx playwright test --config=e2e/playwright-local.config.js --project=chrome --grep @snapshot --update-snapshots",
-    "test:e2e:visual": "percy exec --config ./e2e/.percy.yml -- npx playwright test --config=e2e/playwright-visual.config.js default",
+    "test:e2e:visual": "percy exec --config ./e2e/.percy.yml -- npx playwright test --config=e2e/playwright-visual.config.js",
     "test:e2e:full": "npx playwright test --config=e2e/playwright-ci.config.js",
     "test:watch": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --no-single-run",
     "jsdoc": "jsdoc -c jsdoc.json -R API.md -r -d dist/docs/api",

From c6078a234a5108d6cf2dfa48eae8e509f96b9da6 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 21 May 2022 11:07:23 -0700
Subject: [PATCH 06/13] Bump lighthouse from 9.5.0 to 9.6.1 (#5230)

Bumps [lighthouse](https://github.com/GoogleChrome/lighthouse) from 9.5.0 to 9.6.1.
- [Release notes](https://github.com/GoogleChrome/lighthouse/releases)
- [Changelog](https://github.com/GoogleChrome/lighthouse/blob/v9.6.1/changelog.md)
- [Commits](https://github.com/GoogleChrome/lighthouse/compare/v9.5.0...v9.6.1)

---
updated-dependencies:
- dependency-name: lighthouse
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: John Hill <john.c.hill@nasa.gov>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9d273c729b..7aa300f826 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     "karma-sourcemap-loader": "0.3.8",
     "karma-spec-reporter": "0.0.34",
     "karma-webpack": "5.0.0",
-    "lighthouse": "9.5.0",
+    "lighthouse": "9.6.1",
     "location-bar": "3.0.1",
     "lodash": "4.17.21",
     "mini-css-extract-plugin": "2.6.0",

From 664ba399eaebb21873df33790cbe570f8de1d911 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 23 May 2022 16:12:59 +0000
Subject: [PATCH 07/13] Bump karma from 6.3.18 to 6.3.20 (#5241)

Bumps [karma](https://github.com/karma-runner/karma) from 6.3.18 to 6.3.20.
- [Release notes](https://github.com/karma-runner/karma/releases)
- [Changelog](https://github.com/karma-runner/karma/blob/master/CHANGELOG.md)
- [Commits](https://github.com/karma-runner/karma/compare/v6.3.18...v6.3.20)

---
updated-dependencies:
- dependency-name: karma
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: John Hill <john.c.hill@nasa.gov>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7aa300f826..c7801f9306 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "imports-loader": "0.8.0",
     "jasmine-core": "4.1.1",
     "jsdoc": "3.5.5",
-    "karma": "6.3.18",
+    "karma": "6.3.20",
     "karma-chrome-launcher": "3.1.1",
     "karma-cli": "2.0.0",
     "karma-coverage": "2.2.0",

From f999b9e12bdf8e32abcebb6cd41e6d2b2876932e Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 23 May 2022 16:37:01 +0000
Subject: [PATCH 08/13] Bump sinon from 13.0.1 to 14.0.0 (#5243)

Bumps [sinon](https://github.com/sinonjs/sinon) from 13.0.1 to 14.0.0.
- [Release notes](https://github.com/sinonjs/sinon/releases)
- [Changelog](https://github.com/sinonjs/sinon/blob/main/docs/changelog.md)
- [Commits](https://github.com/sinonjs/sinon/compare/v13.0.1...v14.0.0)

---
updated-dependencies:
- dependency-name: sinon
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: John Hill <john.c.hill@nasa.gov>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c7801f9306..91ecfed7c0 100644
--- a/package.json
+++ b/package.json
@@ -64,7 +64,7 @@
     "resolve-url-loader": "5.0.0",
     "sass": "1.49.9",
     "sass-loader": "12.6.0",
-    "sinon": "13.0.1",
+    "sinon": "14.0.0",
     "style-loader": "^1.0.1",
     "uuid": "3.3.3",
     "vue": "2.6.14",

From 405418b9d5418db17707dd8e8b756c6aa2eecfd1 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <ozyx@users.noreply.github.com>
Date: Mon, 23 May 2022 14:10:59 -0700
Subject: [PATCH 09/13] Preserve local clock offsets on mode switch, fall back
 to defaults (#5217)

---
 .../imagery/exampleImagery.e2e.spec.js        |   2 -
 .../timeConductor/timeConductor.e2e.spec.js   | 178 +++++++++++++++---
 src/api/menu/components/Menu.vue              |   2 +
 src/api/menu/components/SuperMenu.vue         |   2 +
 .../timeConductor/ConductorInputsRealtime.vue |   2 +
 src/plugins/timeConductor/ConductorMode.vue   |   5 +-
 6 files changed, 162 insertions(+), 29 deletions(-)

diff --git a/e2e/tests/plugins/imagery/exampleImagery.e2e.spec.js b/e2e/tests/plugins/imagery/exampleImagery.e2e.spec.js
index ed12d6b14b..1f98aa340a 100644
--- a/e2e/tests/plugins/imagery/exampleImagery.e2e.spec.js
+++ b/e2e/tests/plugins/imagery/exampleImagery.e2e.spec.js
@@ -430,9 +430,7 @@ test.describe('Example imagery thumbnails resize in display layouts', () => {
 
         expect(thumbsWrapperLocator.isVisible()).toBeTruthy();
         await expect(thumbsWrapperLocator).not.toHaveClass(/is-small-thumbs/);
-
     });
-
 });
 
 test.describe('Example Imagery in Flexible layout', () => {
diff --git a/e2e/tests/plugins/timeConductor/timeConductor.e2e.spec.js b/e2e/tests/plugins/timeConductor/timeConductor.e2e.spec.js
index 8ca1285aa8..ed759a53df 100644
--- a/e2e/tests/plugins/timeConductor/timeConductor.e2e.spec.js
+++ b/e2e/tests/plugins/timeConductor/timeConductor.e2e.spec.js
@@ -23,9 +23,9 @@
 const { test } = require('../../../fixtures.js');
 const { expect } = require('@playwright/test');
 
-test.describe('Time counductor operations', () => {
+test.describe('Time conductor operations', () => {
     test('validate start time does not exceeds end time', async ({ page }) => {
-        //Go to baseURL
+        // Go to baseURL
         await page.goto('/', { waitUntil: 'networkidle' });
         const year = new Date().getFullYear();
 
@@ -73,37 +73,163 @@ test.describe('Time counductor operations', () => {
 // Try to change the realtime offsets when in realtime (local clock) mode.
 test.describe('Time conductor input fields real-time mode', () => {
     test('validate input fields in real-time mode', async ({ page }) => {
-        //Go to baseURL
+        const startOffset = {
+            secs: '23'
+        };
+
+        const endOffset = {
+            secs: '31'
+        };
+
+        // Go to baseURL
         await page.goto('/', { waitUntil: 'networkidle' });
 
-        // Click fixed timespan button
-        await page.locator('.c-button__label >> text=Fixed Timespan').click();
+        // Switch to real-time mode
+        await setRealTimeMode(page);
 
-        // Click local clock
-        await page.locator('.icon-clock >> text=Local Clock').click();
-
-        // Click time offset button
-        await page.locator('.c-conductor__delta-button >> text=00:30:00').click();
-
-        // Input start time offset
-        await page.fill('.pr-time-controls__secs', '23');
-
-        // Click the check button
-        await page.locator('.icon-check').click();
+        // Set start time offset
+        await setStartOffset(page, startOffset);
 
         // Verify time was updated on time offset button
-        await expect(page.locator('.c-conductor__delta-button').first()).toContainText('00:30:23');
+        await expect(page.locator('data-testid=conductor-start-offset-button')).toContainText('00:30:23');
 
-        // Click time offset set preceding now button
-        await page.locator('.c-conductor__delta-button >> text=00:00:30').click();
-
-        // Input preceding time offset
-        await page.fill('.pr-time-controls__secs', '31');
-
-        // Click the check buttons
-        await page.locator('.icon-check').click();
+        // Set end time offset
+        await setEndOffset(page, endOffset);
 
         // Verify time was updated on preceding time offset button
-        await expect(page.locator('.c-conductor__delta-button').nth(1)).toContainText('00:00:31');
+        await expect(page.locator('data-testid=conductor-end-offset-button')).toContainText('00:00:31');
+    });
+
+    /**
+     * Verify that offsets and url params are preserved when switching
+     * between fixed timespan and real-time mode.
+     */
+    test('preserve offsets and url params when switching between fixed and real-time mode', async ({ page }) => {
+        const startOffset = {
+            mins: '30',
+            secs: '23'
+        };
+
+        const endOffset = {
+            secs: '01'
+        };
+
+        // Convert offsets to milliseconds
+        const startDelta = (30 * 60 * 1000) + (23 * 1000);
+        const endDelta = (1 * 1000);
+
+        // Go to baseURL
+        await page.goto('/', { waitUntil: 'networkidle' });
+
+        // Switch to real-time mode
+        await setRealTimeMode(page);
+
+        // Set start time offset
+        await setStartOffset(page, startOffset);
+
+        // Set end time offset
+        await setEndOffset(page, endOffset);
+
+        // Switch to fixed timespan mode
+        await setFixedTimeMode(page);
+
+        // Switch back to real-time mode
+        await setRealTimeMode(page);
+
+        // Verify updated start time offset persists after mode switch
+        await expect(page.locator('data-testid=conductor-start-offset-button')).toContainText('00:30:23');
+
+        // Verify updated end time offset persists after mode switch
+        await expect(page.locator('data-testid=conductor-end-offset-button')).toContainText('00:00:01');
+
+        // Verify url parameters persist after mode switch
+        await page.waitForNavigation();
+        expect(page.url()).toContain(`startDelta=${startDelta}`);
+        expect(page.url()).toContain(`endDelta=${endDelta}`);
     });
 });
+
+/**
+ * @typedef {Object} OffsetValues
+ * @property {string | undefined} hours
+ * @property {string | undefined} mins
+ * @property {string | undefined} secs
+ */
+
+/**
+ * Set the values (hours, mins, secs) for the start time offset when in realtime mode
+ * @param {import('@playwright/test').Page} page
+ * @param {OffsetValues} offset
+ */
+async function setStartOffset(page, offset) {
+    const startOffsetButton = page.locator('data-testid=conductor-start-offset-button');
+    await setTimeConductorOffset(page, offset, startOffsetButton);
+}
+
+/**
+ * Set the values (hours, mins, secs) for the end time offset when in realtime mode
+ * @param {import('@playwright/test').Page} page
+ * @param {OffsetValues} offset
+ */
+async function setEndOffset(page, offset) {
+    const endOffsetButton = page.locator('data-testid=conductor-end-offset-button');
+    await setTimeConductorOffset(page, offset, endOffsetButton);
+}
+
+/**
+ * Set the time conductor to fixed timespan mode
+ * @param {import('@playwright/test').Page} page
+ */
+async function setFixedTimeMode(page) {
+    await setTimeConductorMode(page, true);
+}
+
+/**
+ * Set the time conductor to realtime mode
+ * @param {import('@playwright/test').Page} page
+ */
+async function setRealTimeMode(page) {
+    await setTimeConductorMode(page, false);
+}
+
+/**
+ * Set the values (hours, mins, secs) for the TimeConductor offsets when in realtime mode
+ * @param {import('@playwright/test').Page} page
+ * @param {OffsetValues} offset
+ * @param {import('@playwright/test').Locator} offsetButton
+ */
+async function setTimeConductorOffset(page, {hours, mins, secs}, offsetButton) {
+    await offsetButton.click();
+
+    if (hours) {
+        await page.fill('.pr-time-controls__hrs', hours);
+    }
+
+    if (mins) {
+        await page.fill('.pr-time-controls__mins', mins);
+    }
+
+    if (secs) {
+        await page.fill('.pr-time-controls__secs', secs);
+    }
+
+    // Click the check button
+    await page.locator('.icon-check').click();
+}
+
+/**
+ * Set the time conductor mode to either fixed timespan or realtime mode.
+ * @param {import('@playwright/test').Page} page
+ * @param {boolean} [isFixedTimespan=true] true for fixed timespan mode, false for realtime mode; default is true
+ */
+async function setTimeConductorMode(page, isFixedTimespan = true) {
+    // Click 'mode' button
+    await page.locator('.c-mode-button').click();
+
+    // Switch time conductor mode
+    if (isFixedTimespan) {
+        await page.locator('data-testid=conductor-modeOption-fixed').click();
+    } else {
+        await page.locator('data-testid=conductor-modeOption-realtime').click();
+    }
+}
diff --git a/src/api/menu/components/Menu.vue b/src/api/menu/components/Menu.vue
index 0073062e0e..4d0cf39372 100644
--- a/src/api/menu/components/Menu.vue
+++ b/src/api/menu/components/Menu.vue
@@ -12,6 +12,7 @@
                 :key="action.name"
                 :class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
                 :title="action.description"
+                :data-testid="action.testId || false"
                 @click="action.onItemClicked"
             >
                 {{ action.name }}
@@ -37,6 +38,7 @@
             :key="action.name"
             :class="action.cssClass"
             :title="action.description"
+            :data-testid="action.testId || false"
             @click="action.onItemClicked"
         >
             {{ action.name }}
diff --git a/src/api/menu/components/SuperMenu.vue b/src/api/menu/components/SuperMenu.vue
index d7fe6a7a67..7b66c68b65 100644
--- a/src/api/menu/components/SuperMenu.vue
+++ b/src/api/menu/components/SuperMenu.vue
@@ -15,6 +15,7 @@
                 :key="action.name"
                 :class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
                 :title="action.description"
+                :data-testid="action.testId || false"
                 @click="action.onItemClicked"
                 @mouseover="toggleItemDescription(action)"
                 @mouseleave="toggleItemDescription()"
@@ -45,6 +46,7 @@
             :key="action.name"
             :class="action.cssClass"
             :title="action.description"
+            :data-testid="action.testId || false"
             @click="action.onItemClicked"
             @mouseover="toggleItemDescription(action)"
             @mouseleave="toggleItemDescription()"
diff --git a/src/plugins/timeConductor/ConductorInputsRealtime.vue b/src/plugins/timeConductor/ConductorInputsRealtime.vue
index dc1cb77e58..c6aee38ee7 100644
--- a/src/plugins/timeConductor/ConductorInputsRealtime.vue
+++ b/src/plugins/timeConductor/ConductorInputsRealtime.vue
@@ -22,6 +22,7 @@
             ref="startOffset"
             class="c-button c-conductor__delta-button"
             title="Set the time offset after now"
+            data-testid="conductor-start-offset-button"
             @click.prevent.stop="showTimePopupStart"
         >
             {{ offsets.start }}
@@ -61,6 +62,7 @@
             ref="endOffset"
             class="c-button c-conductor__delta-button"
             title="Set the time offset preceding now"
+            data-testid="conductor-end-offset-button"
             @click.prevent.stop="showTimePopupEnd"
         >
             {{ offsets.end }}
diff --git a/src/plugins/timeConductor/ConductorMode.vue b/src/plugins/timeConductor/ConductorMode.vue
index 869ca1b0a1..fbe4fa2f77 100644
--- a/src/plugins/timeConductor/ConductorMode.vue
+++ b/src/plugins/timeConductor/ConductorMode.vue
@@ -105,6 +105,7 @@ export default {
                     name: 'Fixed Timespan',
                     description: 'Query and explore data that falls between two fixed datetimes.',
                     cssClass: 'icon-tabular',
+                    testId: 'conductor-modeOption-fixed',
                     onItemClicked: () => this.setOption(key)
                 };
             } else {
@@ -116,6 +117,7 @@ export default {
                     description: "Monitor streaming data in real-time. The Time "
                     + "Conductor and displays will automatically advance themselves based on this clock. " + clock.description,
                     cssClass: clock.cssClass || 'icon-clock',
+                    testId: 'conductor-modeOption-realtime',
                     onItemClicked: () => this.setOption(key)
                 };
             }
@@ -148,7 +150,8 @@ export default {
             if (clockKey === undefined) {
                 this.openmct.time.stopClock();
             } else {
-                this.openmct.time.clock(clockKey, configuration.clockOffsets);
+                const offsets = this.openmct.time.clockOffsets() || configuration.clockOffsets;
+                this.openmct.time.clock(clockKey, offsets);
             }
         },
 

From 2d73296b363c5a48effae7cb8fb79dfee7a00316 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <ozyx@users.noreply.github.com>
Date: Tue, 24 May 2022 12:00:39 -0700
Subject: [PATCH 10/13] Do not install Chart plugin by default (#5163)

* Do not install Chart plugin by default (#5088)

* Install Chart plugin in development mode (#5088)

Co-authored-by: Andrew Henry <akhenry@gmail.com>
---
 index.html | 2 ++
 src/MCT.js | 2 --
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 5aae47c16f..4cfcacb001 100644
--- a/index.html
+++ b/index.html
@@ -196,6 +196,8 @@
         openmct.install(openmct.plugins.Clock({ enableClockIndicator: true }));
         openmct.install(openmct.plugins.Timer());
         openmct.install(openmct.plugins.Timelist());
+        openmct.install(openmct.plugins.BarChart());
+        openmct.install(openmct.plugins.ScatterPlot());
         openmct.start();
     </script>
 </html>
diff --git a/src/MCT.js b/src/MCT.js
index 3ea51a1d4e..0e46eab52e 100644
--- a/src/MCT.js
+++ b/src/MCT.js
@@ -242,8 +242,6 @@ define([
 
         // Plugins that are installed by default
         this.install(this.plugins.Plot());
-        this.install(this.plugins.ScatterPlot());
-        this.install(this.plugins.BarChart());
         this.install(this.plugins.TelemetryTable.default());
         this.install(PreviewPlugin.default());
         this.install(LicensesPlugin.default());

From 77804cff75a19b3fe79d4de970f63e246c2e9737 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 24 May 2022 19:06:32 +0000
Subject: [PATCH 11/13] Bump @percy/cli from 1.0.4 to 1.2.1 (#5244)

Bumps [@percy/cli](https://github.com/percy/cli/tree/HEAD/packages/cli) from 1.0.4 to 1.2.1.
- [Release notes](https://github.com/percy/cli/releases)
- [Commits](https://github.com/percy/cli/commits/v1.2.1/packages/cli)

---
updated-dependencies:
- dependency-name: "@percy/cli"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: John Hill <john.c.hill@nasa.gov>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 91ecfed7c0..622b494fe1 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "7.16.3",
     "@braintree/sanitize-url": "6.0.0",
-    "@percy/cli": "1.0.4",
+    "@percy/cli": "1.2.1",
     "@percy/playwright": "1.0.3",
     "@playwright/test": "1.21.1",
     "@types/eventemitter3": "^1.0.0",

From 7bb108c36b124695f976a4da5476c6a93efd53d9 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 24 May 2022 19:28:04 +0000
Subject: [PATCH 12/13] Bump webpack-dev-middleware from 5.3.1 to 5.3.3 (#5242)

Bumps [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) from 5.3.1 to 5.3.3.
- [Release notes](https://github.com/webpack/webpack-dev-middleware/releases)
- [Changelog](https://github.com/webpack/webpack-dev-middleware/blob/master/CHANGELOG.md)
- [Commits](https://github.com/webpack/webpack-dev-middleware/compare/v5.3.1...v5.3.3)

---
updated-dependencies:
- dependency-name: webpack-dev-middleware
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: John Hill <john.c.hill@nasa.gov>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 622b494fe1..652d261ccf 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
     "vue-template-compiler": "2.6.14",
     "webpack": "5.68.0",
     "webpack-cli": "4.9.2",
-    "webpack-dev-middleware": "5.3.1",
+    "webpack-dev-middleware": "5.3.3",
     "webpack-hot-middleware": "2.25.1",
     "webpack-merge": "5.8.0",
     "zepto": "1.2.0"

From d9ac0182c394903f3a7bd9d92c2c88a364924811 Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Tue, 24 May 2022 13:10:14 -0700
Subject: [PATCH 13/13] Remove languages from bug report as we don't need it
 (#5213)

Co-authored-by: Andrew Henry <akhenry@gmail.com>
---
 .github/ISSUE_TEMPLATE/bug_report.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index 7ba460118a..747ec79bb6 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -27,7 +27,7 @@ assignees: ''
 
 #### Environment
 <!--- If encountered on local machine, execute the following:
-<!--- npx envinfo --system --browsers --npmPackages --binaries --languages --markdown -->
+<!--- npx envinfo --system --browsers --npmPackages --binaries --markdown -->
 * Open MCT Version: <!--- date of build, version, or SHA -->
 * Deployment Type: <!--- npm dev? VIPER Dev? openmct-yamcs? -->
 * OS: