Defer rendering for inactive tabs in open mct tabbed view (#7149)

* simple prototype

* add a few examples

* revert to original

* only check first element

* only print when we're firing

* need to return status

* ignore polling logic if not visible

* convert to es6 classes

* add private variables

* remove debug code

* revert on this branch webgl changes

* fix draw loader import

* do not use v-model for search component

* remove flakey unit tests and add e2e tests for same behavior

* remove fdescribe

* add test word

* add simple functional test for tabs

* add performance test for tabs

* make tab selection more explict

* better describe expects

* lint

* switch back to fixed time

* fix perf test for webpacked version

* lint

* relax condition

* relax condition

* resolve PR comments

* address PR review comments

* typo on role vs locator
This commit is contained in:
Scott Bell
2023-11-13 19:27:50 +01:00
committed by GitHub
parent 29b7c389ad
commit deacd91078
12 changed files with 413 additions and 66 deletions

View File

@ -73,6 +73,7 @@ import {
} from '@/plugins/notebook/utils/notebook-storage.js';
import stalenessMixin from '@/ui/mixins/staleness-mixin';
import NicelyCalled from '../../../api/nice/NicelyCalled';
import tooltipHelpers from '../../../api/tooltips/tooltipMixins';
import conditionalStylesMixin from '../mixins/objectStyles-mixin';
import LayoutFrame from './LayoutFrame.vue';
@ -231,13 +232,7 @@ export default {
}
},
mounted() {
if (this.openmct.objects.supportsMutation(this.item.identifier)) {
this.mutablePromise = this.openmct.objects
.getMutable(this.item.identifier)
.then(this.setObject);
} else {
this.openmct.objects.get(this.item.identifier).then(this.setObject);
}
this.getAndSetObject();
this.status = this.openmct.status.get(this.item.identifier);
this.removeStatusListener = this.openmct.status.observe(this.item.identifier, this.setStatus);
@ -247,7 +242,7 @@ export default {
this.subscribeToStaleness(domainObject);
});
},
beforeUnmount() {
async beforeUnmount() {
this.removeStatusListener();
if (this.removeSelectable) {
@ -262,14 +257,25 @@ export default {
}
if (this.mutablePromise) {
this.mutablePromise.then(() => {
this.openmct.objects.destroyMutable(this.domainObject);
});
await this.mutablePromise();
this.openmct.objects.destroyMutable(this.domainObject);
} else if (this?.domainObject?.isMutable) {
this.openmct.objects.destroyMutable(this.domainObject);
}
},
methods: {
async getAndSetObject() {
let foundObject = null;
if (this.openmct.objects.supportsMutation(this.item.identifier)) {
this.mutablePromise = this.openmct.objects.getMutable(this.item.identifier);
foundObject = await this.mutablePromise;
} else {
foundObject = await this.openmct.objects.get(this.item.identifier);
}
this.setObject(foundObject);
await this.$nextTick();
this.nicelyCalled = new NicelyCalled(this.$refs.telemetryViewWrapper);
},
formattedValueForCopy() {
const timeFormatterKey = this.openmct.time.timeSystem().key;
const timeFormatter = this.formats[timeFormatterKey];
@ -285,8 +291,7 @@ export default {
},
updateView() {
if (!this.updatingView) {
this.updatingView = true;
requestAnimationFrame(() => {
this.updatingView = this.nicelyCalled.execute(() => {
this.datum = this.latestDatum;
this.updatingView = false;
});