diff options
author | Shefali Joshi <simplyrender@gmail.com> | 2022-09-30 23:04:19 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-09-30 23:04:19 +0300 |
commit | 35bbebbbc74239abccf94d32048f46b25eae8d90 (patch) | |
tree | eaa210fe6094f4d66ecb4c8f1bff10cab892e5e8 | |
parent | ce463babfff0f800d4eac6bbbb1ea9d838d0dce9 (diff) |
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>
-rw-r--r-- | e2e/tests/functional/plugins/plot/plotRendering.e2e.spec.js | 54 | ||||
-rw-r--r-- | src/plugins/plot/MctPlot.vue | 57 | ||||
-rw-r--r-- | src/plugins/plot/PlotViewProvider.js | 3 | ||||
-rw-r--r-- | src/plugins/plot/pluginSpec.js | 113 |
4 files changed, 198 insertions, 29 deletions
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 000000000..30e863322 --- /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 cf2e6dfb2..7db95295c 100644 --- a/src/plugins/plot/MctPlot.vue +++ b/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.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'); - const xRange = this.config.xAxis.get('range'); - - if (!this.skipReloadOnInteraction) { - this.loadMoreData(xDisplayRange); - } + 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'); 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 8d0d862a2..15e751898 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 36859a50d..a8297066d 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; |