From 35bbebbbc74239abccf94d32048f46b25eae8d90 Mon Sep 17 00:00:00 2001 From: Shefali Joshi Date: Fri, 30 Sep 2022 13:04:19 -0700 Subject: [PATCH] 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 * [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 * 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 * [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 Co-authored-by: Vitor Henckel * 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 * 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 * [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 Co-authored-by: Khalid Adil Co-authored-by: Jesse Mazzella Co-authored-by: John Hill Co-authored-by: Charles Hacskaylo Co-authored-by: Andrew Henry Co-authored-by: Scott Bell Co-authored-by: Alize Nguyen Co-authored-by: Jamie V Co-authored-by: Vitor Henckel --- .../plugins/plot/plotRendering.e2e.spec.js | 54 +++++++++ src/plugins/plot/MctPlot.vue | 57 +++++---- src/plugins/plot/PlotViewProvider.js | 3 + src/plugins/plot/pluginSpec.js | 113 ++++++++++++++++-- 4 files changed, 198 insertions(+), 29 deletions(-) create mode 100644 e2e/tests/functional/plugins/plot/plotRendering.e2e.spec.js diff --git a/e2e/tests/functional/plugins/plot/plotRendering.e2e.spec.js b/e2e/tests/functional/plugins/plot/plotRendering.e2e.spec.js new file mode 100644 index 0000000000..30e8633220 --- /dev/null +++ b/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); + }); +}); diff --git a/src/plugins/plot/MctPlot.vue b/src/plugins/plot/MctPlot.vue index cf2e6dfb2e..7db95295c3 100644 --- a/src/plugins/plot/MctPlot.vue +++ b/src/plugins/plot/MctPlot.vue @@ -122,7 +122,7 @@ @@ -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()" > @@ -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.clear(); - this.skipReloadOnInteraction = false; + this.clearPanZoomHistory(); + this.synchronizeIfBoundsMatch(); 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)) { - this.offsetWidth = this.$parent.$refs.plotWrapper.offsetWidth; + && offsetChange > OFFSET_THRESHOLD) { + this.offsetWidth = newOffsetWidth; this.config.series.models.forEach(this.loadSeriesData, this); } }, diff --git a/src/plugins/plot/PlotViewProvider.js b/src/plugins/plot/PlotViewProvider.js index 8d0d862a2d..15e7518985 100644 --- a/src/plugins/plot/PlotViewProvider.js +++ b/src/plugins/plot/PlotViewProvider.js @@ -93,6 +93,9 @@ export default function PlotViewProvider(openmct) { destroy: function () { component.$destroy(); component = undefined; + }, + getComponent() { + return component; } }; } diff --git a/src/plugins/plot/pluginSpec.js b/src/plugins/plot/pluginSpec.js index 36859a50d0..a8297066d5 100644 --- a/src/plugins/plot/pluginSpec.js +++ b/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;