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;