ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-29 15:43:52 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

Fix plot resize handling (#5637)

Browse Source 
* 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>
This commit is contained in:
Shefali Joshi 2022-09-30 13:04:19 -07:00 committed by GitHub
parent ce463babff
commit 35bbebbbc7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 198 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
e2e/tests/functional/plugins/plot/plotRendering.e2e.spec.js Normal file
View File

@ -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);
});
});

57
src/plugins/plot/MctPlot.vue
View File

@ -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');
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);
}
},

3
src/plugins/plot/PlotViewProvider.js
View File

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

113
src/plugins/plot/pluginSpec.js
View File

@ -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;