Fix plot resize handling (#5637)

* Imagery thumbnail regression fixes - 5327 (#5591)

* Add an active class to thumbnail to indicate current focused image

* Differentiate bg color between real-time and fixed

* scrollIntoView inline: center

* Added watcher for bounds change to trigger thumbnail scroll

* Resolve merge conflict with requestHistory change to telemetry collection

* Split thumbnail into sub component

* Monitor isFixed value to unpause playback status

Co-authored-by: Khalid Adil <khalidadil29@gmail.com>

* [e2e] Improve appActions (#5592)

* update selectors to use aria labels

* Update appActions

- Create new function `getHashUrlToDomainObject` to get the browse url to a given object given its uuid

- Create new function `getFocusedObjectUuid`... self explanatory :)

- Update `createDomainObjectWIthDefaults` to make use of the new url generation

- Update `createDomainObject...`'s arguments to be more organized, and accept a parent object

- Update some docs, still need to clarify some

* Update appActions e2e tests

- Refactor for organization

- Test our new appActions in one go

* Update existing usages of `createDomainObject...` to match the new API

* fix accidental renamed export

* Fix jsdoc return types

* refactor telemetryTable test to use appActions

* Improve selectors

* Refactor test

* improve selector

* add clock mode appActions

* lint

* Fix jsdoc

* Code review comments

* mark failing visual tests as fixme temporarily

* Update package.json (#5601)

* Fix menu style in Snow theme (#5557)

* Include the plan source map when generating the time list/plan hybrid object (#5604)

* Search should indicate in progress and no results states, filter orphaned results (#5599)

* no matching result implemented

* now filtering annotations that are orphaned

* filter object results without valid paths

* add progress bar

* added e2e tests

* removed extraneous click

* fix typos

* fix unit tests

* lint

* address pr comments

* fix tests

* fix tests, centralize logic to object api, check for root instead

* remove debug statement

* lint

* fix documentation

* lint

* fix doc

* made some optimizations after talking with akhenry

* fix test

* update docs

* fix docs

* Have in-memory search indexer use composition API (#5578)

* need to remove tags and objects on composition removal
* had to separate out emits from load as it was causing memory indexer to loop upon itself

* Add parsing for areIdsEqual util to consistently remove folders (#5589)

* Add parsing util to identifier for ID comparison

* Moved firstIdentifier to top of function

* Lint fix

Co-authored-by: Andrew Henry <akhenry@gmail.com>

* Revert "Have in-memory search indexer use composition API (#5578)" (#5609)

This reverts commit 7cf11e177c6c48093a6b37902ba3dfb36414ff10.

* [e2e] Tests for Display Layout and LAD Tables and telemetry (#5607)

* Check for circular references in originalPath - 5615 (#5619)

* check for circular references

* add test

* fix test

* address PR comments by making comments better

* fix docs...again

* Don't request data if there is a mouse click with no action
Don't request data if width gets smaller or if the change is less than the threshold of 50.

* Update version number

* Prevent cyclic references in link & move actions (#5635)

* do not create circular refs

* add negative validation test

* move to plugin

* add link test too

* fix docs

* refactored per john request

* fix path

* use appAction lib

Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>

* [Fault Management] New Example Provider, Unit and e2e tests (#5579)

* added unit tests for fault management plugin

* modified the example fault provider to work out of the box

* updating for new e2e folder structure

* part of the e2e tests

* WIP

* Imagery thumbnail regression fixes - 5327 (#5569)

* Add an active class to thumbnail to indicate current focused image

* Differentiate bg color between real-time and fixed

* scrollIntoView inline: center

* Added watcher for bounds change to trigger thumbnail scroll

* Resolve merge conflict with requestHistory change to telemetry collection

* Split thumbnail into sub component

* Monitor isFixed value to unpause playback status

* updated search to include name, namespace and description added some more e2e tests

* added rest of e2e tests

* fixed my init script, had to disable lint for no-force because it was not working without it, saw online this may be a pw bug

* fix: removing maelstrom theme from application (#5600)

* added some tests for no faults

* visual tests

* added visual tests for fault management

* created utils file for shared functionality between function and visual tests

* updating to 2.0.8

* tryin to remove imagery changes from master

* trying to trigger a refresh

* tryin to refresh

* updated search to include name, namespace and description added some more e2e tests

* added rest of e2e tests

* fix: removing maelstrom theme from application (#5600)

* fixed my init script, had to disable lint for no-force because it was not working without it, saw online this may be a pw bug

* added some tests for no faults

* visual tests

* added visual tests for fault management

* created utils file for shared functionality between function and visual tests

* updating to 2.0.8

* no clue

* still no clue

* removing imports and chaning to requires

* updating utils file to work with require

* fixing paths

* fixing a test I had messed up when adding static exmaple faults

* ONE LAST PATH FIX... hopefully

* typo in files fix

* fix folder typo

* thought I got this one, but apparently not, well I did now! who is laughing now!?

Co-authored-by: Michael Rogers <contact@mhrogers.com>
Co-authored-by: Vitor Henckel <vitor@henckel.com.br>

* Sort tree items locally on rename (#5643)

* fix typo

* Sort the tree items locally on object rename

* Use the navigationPath as a key

- This ensures that objects AND linked objects will be sorted

* add 'tree' and 'treeitem' roles to mct-tree

* WIP tree item reordering test

* Select the first object that matches

* Test that all object links are also reordered

* Get the final uuid before queryParams as notebook sections have uuids

* Make `openObjectTreeContextMenu` more deterministic and update usage

* Add `expandPathToTreeItem` and `expandTreeItemByName` appActions

* add `#tree-pane` id for the tree view

* Add tree visual component test suite and bump percy-cli

* Remove tree appActions

* Better variable name

Co-authored-by: Scott Bell <scott@traclabs.com>

* Mct5549 fix indexer composition error (#5610)

* [Display Layout] Composition and configuration sync (#5669)

LGTM

* [e2e] Stabilize notebook tag tests (#5681)

* Use more deterministic selector

* Hover first to "slow down" e2e actions while in headless mode

* Moves condition set fix into 2.0.8 (#5673)

* Remove flag that determines if data should be reloaded on interactions.
Separate logic to clear history and reload data.

* Rename method to clarify intention

* Set Focused Image index after a imagery is selected from a timestrip - 5632 (#5664)

* Set focused image when timestamp prop is passed in

* Unused var

* Create timestrip with imagery child

* Add equality check for hovered image and view large image url

* Cleanup

* Time List 5534 for release/2.0.8 (#5678)

* Changes to Time List view. Closes #5534.
- Compacted table row spacing.
- Set all timeframes to display by default when creating a new Time List.
- Removed 'Upload plan' file button from properties.

* Changes to Time List view. Closes #5534.
- Better hint text for editing Timeframe Inspector section.

Co-authored-by: Andrew Henry <akhenry@gmail.com>

* [CI] Enable couchdb e2e testing in open source (#5655)

* Reduce threshold to 10px - Chrome resizes to about 7 pixes and Firefox to 0.

* boilerplate for coverage

* add stubs

* Update version

* Remove debugging code

* [Flexible Layout] Fix draggable status for layout items while in browse mode (#5750)

* Modify flexible layout pages to make them not draggable in browse mode and add e2e test

* Don't destroy mutable if the domain object is not ready yet (#5695)

* Check if the domain object is set (mounted is done) before trying to destroy the mutable

* Use optional chaining. Add mutable promise check to prevent memory leaks

* Don't request data if there is a mouse click with no action
Don't request data if width gets smaller or if the change is less than the threshold of 50.

* Remove flag that determines if data should be reloaded on interactions.
Separate logic to clear history and reload data.

* Rename method to clarify intention

* Reduce threshold to 10px - Chrome resizes to about 7 pixes and Firefox to 0.

* boilerplate for coverage

* add stubs

* Remove debugging code

* Remove unused import

* Request priority (#5737)

* Set priority of couch requests to high
* Set priority of image requests to low
* Add e2e test for low-priority images

* Add test for re-requests on clicking a plot

* Adding new tests for testing plot requests for historical data

* Clean up e2e test for plot requesting historical data

* Write tests to ensure resizing the plot makes requests for data appropriately

* Remove fdescribe

* Fix resizing plot tests

Co-authored-by: Michael Rogers <contact@mhrogers.com>
Co-authored-by: Khalid Adil <khalidadil29@gmail.com>
Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>
Co-authored-by: John Hill <john.c.hill@nasa.gov>
Co-authored-by: Charles Hacskaylo <charlesh88@gmail.com>
Co-authored-by: Andrew Henry <akhenry@gmail.com>
Co-authored-by: Scott Bell <scott@traclabs.com>
Co-authored-by: Alize Nguyen <alizenguyen@gmail.com>
Co-authored-by: Jamie V <jamie.j.vigliotta@nasa.gov>
Co-authored-by: Vitor Henckel <vitor@henckel.com.br>

e2e/tests/functional/plugins/plot/plotRendering.e2e.spec.js

@@ -0,0 +1,54 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/*
+* This test suite is dedicated to testing the rendering and interaction of plots.
+*
+*/
+
+const { test, expect } = require('../../../../baseFixtures');
+const { createDomainObjectWithDefaults } = require('../../../../appActions');
+
+test.describe('Plot Integrity Testing @unstable', () => {
+    let sineWaveGeneratorObject;
+
+    test.beforeEach(async ({ page }) => {
+        //Open a browser, navigate to the main page, and wait until all networkevents to resolve
+        await page.goto('./', { waitUntil: 'networkidle' });
+        sineWaveGeneratorObject = await createDomainObjectWithDefaults(page, { type: 'Sine Wave Generator' });
+    });
+
+    test('Plots do not re-request data when a plot is clicked', async ({ page }) => {
+        //Navigate to Sine Wave Generator
+        await page.goto(sineWaveGeneratorObject.url);
+        //Capture the number of plots points and store as const name numberOfPlotPoints
+        //Click on the plot canvas
+        await page.locator('canvas').nth(1).click();
+        //No request was made to get historical data
+        const createMineFolderRequests = [];
+        page.on('request', req => {
+            // eslint-disable-next-line playwright/no-conditional-in-test
+            createMineFolderRequests.push(req);
+        });
+        expect(createMineFolderRequests.length).toEqual(0);
+    });
+});

src/plugins/plot/MctPlot.vue

@@ -122,7 +122,7 @@
                         <button
                             class="c-button icon-reset"
                             title="Reset pan/zoom"
-                            @click="clear()"
+                            @click="resumeRealtimeData()"
                         >
                         </button>
                     </div>
@@ -141,7 +141,7 @@
                             v-if="isFrozen"
                             class="c-button icon-arrow-right pause-play is-paused"
                             title="Resume displaying real-time data"
-                            @click="play()"
+                            @click="resumeRealtimeData()"
                         >
                         </button>
                     </div>
@@ -213,6 +213,8 @@ import XAxis from "./axis/XAxis.vue";
 import YAxis from "./axis/YAxis.vue";
 import _ from "lodash";
 
+const OFFSET_THRESHOLD = 10;
+
 export default {
     components: {
         XAxis,
@@ -329,6 +331,8 @@ export default {
         }
     },
     mounted() {
+        this.offsetWidth = 0;
+
         document.addEventListener('keydown', this.handleKeyDown);
         document.addEventListener('keyup', this.handleKeyUp);
         eventHelpers.extend(this);
@@ -576,9 +580,8 @@ export default {
             };
             this.config.xAxis.set('range', newRange);
             if (!isTick) {
-                this.skipReloadOnInteraction = true;
+                this.clearPanZoomHistory();
-                this.clear();
+                this.synchronizeIfBoundsMatch();
-                this.skipReloadOnInteraction = false;
                 this.loadMoreData(newRange, true);
             } else {
                 // If we're not panning or zooming (time conductor and plot x-axis times are not out of sync)
@@ -601,16 +604,20 @@ export default {
 
         /**
        * Handle end of user viewport change: load more data for current display
-       * bounds, and mark view as synchronized if bounds match configured bounds.
+       * bounds, and mark view as synchronized if necessary.
        */
         userViewportChangeEnd() {
+            this.synchronizeIfBoundsMatch();
+            const xDisplayRange = this.config.xAxis.get('displayRange');
+            this.loadMoreData(xDisplayRange);
+        },
+
+        /**
+       * mark view as synchronized if bounds match configured bounds.
+       */
+        synchronizeIfBoundsMatch() {
             const xDisplayRange = this.config.xAxis.get('displayRange');
             const xRange = this.config.xAxis.get('range');
-
-            if (!this.skipReloadOnInteraction) {
-                this.loadMoreData(xDisplayRange);
-            }
-
             this.synchronized(xRange.min === xDisplayRange.min
             && xRange.max === xDisplayRange.max);
         },
@@ -839,7 +846,8 @@ export default {
             // needs to follow endMarquee so that plotHistory is pruned
             const isAction = Boolean(this.plotHistory.length);
             if (!isAction && !this.isFrozenOnMouseDown) {
-                return this.play();
+                this.clearPanZoomHistory();
+                this.synchronizeIfBoundsMatch();
             }
         },
 
@@ -1076,18 +1084,22 @@ export default {
             this.setStatus();
         },
 
-        clear() {
+        resumeRealtimeData() {
+            this.clearPanZoomHistory();
+            this.userViewportChangeEnd();
+        },
+
+        clearPanZoomHistory() {
             this.config.yAxis.set('frozen', false);
             this.config.xAxis.set('frozen', false);
             this.setStatus();
             this.plotHistory = [];
-            this.userViewportChangeEnd();
         },
 
         back() {
             const previousAxisRanges = this.plotHistory.pop();
             if (this.plotHistory.length === 0) {
-                this.clear();
+                this.resumeRealtimeData();
 
                 return;
             }
@@ -1105,10 +1117,6 @@ export default {
             this.freeze();
         },
 
-        play() {
-            this.clear();
-        },
-
         showSynchronizeDialog() {
             const isLocalClock = this.timeContext.clock();
             if (isLocalClock !== undefined) {
@@ -1172,7 +1180,9 @@ export default {
                 this.removeStatusListener();
             }
 
-            this.plotContainerResizeObserver.disconnect();
+            if (this.plotContainerResizeObserver) {
+                this.plotContainerResizeObserver.disconnect();
+            }
 
             this.stopFollowingTimeContext();
             this.openmct.objectViews.off('clearData', this.clearData);
@@ -1181,9 +1191,12 @@ export default {
             this.$emit('statusUpdated', status);
         },
         handleWindowResize() {
+            const newOffsetWidth = this.$parent.$refs.plotWrapper.offsetWidth;
+            //we ignore when width gets smaller
+            const offsetChange = newOffsetWidth - this.offsetWidth;
             if (this.$parent.$refs.plotWrapper
-                && (this.offsetWidth !== this.$parent.$refs.plotWrapper.offsetWidth)) {
+                && offsetChange > OFFSET_THRESHOLD) {
-                this.offsetWidth = this.$parent.$refs.plotWrapper.offsetWidth;
+                this.offsetWidth = newOffsetWidth;
                 this.config.series.models.forEach(this.loadSeriesData, this);
             }
         },

src/plugins/plot/PlotViewProvider.js

@@ -93,6 +93,9 @@ export default function PlotViewProvider(openmct) {
                 destroy: function () {
                     component.$destroy();
                     component = undefined;
+                },
+                getComponent() {
+                    return component;
                 }
             };
         }

src/plugins/plot/pluginSpec.js

@@ -144,12 +144,6 @@ describe("the plugin", function () {
         element.appendChild(child);
         document.body.appendChild(element);
 
-        spyOn(window, 'ResizeObserver').and.returnValue({
-            observe() {},
-            unobserve() {},
-            disconnect() {}
-        });
-
         openmct.types.addType("test-object", {
             creatable: true
         });
@@ -166,7 +160,7 @@ describe("the plugin", function () {
     afterEach((done) => {
         openmct.time.timeSystem('utc', {
             start: 0,
-            end: 1
+            end: 2
         });
 
         configStore.deleteAll();
@@ -506,6 +500,23 @@ describe("the plugin", function () {
                 expect(playElAfterChartClick.length).toBe(1);
 
             });
+
+            it("clicking the plot does not request historical data", async () => {
+                expect(openmct.telemetry.request).toHaveBeenCalledTimes(2);
+
+                // simulate an errant mouse click
+                // the second item is the canvas we need to use
+                const canvas = element.querySelectorAll("canvas")[1];
+                const mouseDownEvent = new MouseEvent('mousedown');
+                const mouseUpEvent = new MouseEvent('mouseup');
+                canvas.dispatchEvent(mouseDownEvent);
+                // mouseup event is bound to the window
+                window.dispatchEvent(mouseUpEvent);
+                await Vue.nextTick();
+
+                expect(openmct.telemetry.request).toHaveBeenCalledTimes(2);
+
+            });
         });
 
         describe('controls in time strip view', () => {
@@ -528,6 +539,94 @@ describe("the plugin", function () {
         });
     });
 
+    describe('resizing the plot', () => {
+        let plotContainerResizeObserver;
+        let resizePromiseResolve;
+        let testTelemetryObject;
+        let applicableViews;
+        let plotViewProvider;
+        let plotView;
+        let resizePromise;
+
+        beforeEach(() => {
+            testTelemetryObject = {
+                identifier: {
+                    namespace: "",
+                    key: "test-object"
+                },
+                type: "test-object",
+                name: "Test Object",
+                telemetry: {
+                    values: [{
+                        key: "utc",
+                        format: "utc",
+                        name: "Time",
+                        hints: {
+                            domain: 1
+                        }
+                    }, {
+                        key: "some-key",
+                        name: "Some attribute",
+                        hints: {
+                            range: 1
+                        }
+                    }, {
+                        key: "some-other-key",
+                        name: "Another attribute",
+                        hints: {
+                            range: 2
+                        }
+                    }]
+                }
+            };
+
+            openmct.router.path = [testTelemetryObject];
+
+            applicableViews = openmct.objectViews.get(testTelemetryObject, mockObjectPath);
+            plotViewProvider = applicableViews.find((viewProvider) => viewProvider.key === "plot-single");
+            plotView = plotViewProvider.view(testTelemetryObject, []);
+
+            plotView.show(child, true);
+
+            resizePromise = new Promise((resolve) => {
+                resizePromiseResolve = resolve;
+            });
+
+            const handlePlotResize = _.debounce(() => {
+                resizePromiseResolve(true);
+            }, 600);
+
+            plotContainerResizeObserver = new ResizeObserver(handlePlotResize);
+            plotContainerResizeObserver.observe(plotView.getComponent().$children[0].$children[1].$parent.$refs.plotWrapper);
+
+            return Vue.nextTick(() => {
+                plotView.getComponent().$children[0].$children[1].stopFollowingTimeContext();
+                spyOn(plotView.getComponent().$children[0].$children[1], 'loadSeriesData').and.callThrough();
+            });
+        });
+
+        afterEach(() => {
+            plotContainerResizeObserver.disconnect();
+            openmct.router.path = null;
+        });
+
+        it("requests historical data when over the threshold", (done) => {
+            element.style.width = '680px';
+            resizePromise.then(() => {
+                expect(plotView.getComponent().$children[0].$children[1].loadSeriesData).toHaveBeenCalledTimes(1);
+                done();
+            });
+        });
+
+        it("does not request historical data when under the threshold", (done) => {
+            element.style.width = '644px';
+            resizePromise.then(() => {
+                expect(plotView.getComponent().$children[0].$children[1].loadSeriesData).not.toHaveBeenCalled();
+                done();
+            });
+        });
+    });
+
     describe('the inspector view', () => {
         let component;
         let viewComponentObject;