Provide visibility based rendering as part of the view api (#7241)

* first draft

* in preview mode, just show it

* fix unit tests
This commit is contained in:
Scott Bell
2023-11-20 18:19:00 +01:00
committed by GitHub
parent b9ae461b7d
commit 7ce3ed5597
27 changed files with 130 additions and 91 deletions

View File

@ -73,14 +73,18 @@ 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';
const DEFAULT_TELEMETRY_DIMENSIONS = [10, 5];
const DEFAULT_POSITION = [1, 1];
const CONTEXT_MENU_ACTIONS = ['copyToClipboard', 'copyToNotebook', 'viewHistoricalData'];
const CONTEXT_MENU_ACTIONS = [
'copyToClipboard',
'copyToNotebook',
'viewHistoricalData',
'renderWhenVisible'
];
export default {
makeDefinition(openmct, gridSize, domainObject, position) {
@ -106,7 +110,7 @@ export default {
LayoutFrame
},
mixins: [conditionalStylesMixin, stalenessMixin, tooltipHelpers],
inject: ['openmct', 'objectPath', 'currentView'],
inject: ['openmct', 'objectPath', 'currentView', 'renderWhenVisible'],
props: {
item: {
type: Object,
@ -274,7 +278,6 @@ export default {
}
this.setObject(foundObject);
await this.$nextTick();
this.nicelyCalled = new NicelyCalled(this.$refs.telemetryViewWrapper);
},
formattedValueForCopy() {
const timeFormatterKey = this.openmct.time.timeSystem().key;
@ -291,7 +294,7 @@ export default {
},
updateView() {
if (!this.updatingView) {
this.updatingView = this.nicelyCalled.execute(() => {
this.updatingView = this.renderWhenVisible(() => {
this.datum = this.latestDatum;
this.updatingView = false;
});

View File

@ -39,7 +39,7 @@ class DisplayLayoutView {
this.component = null;
}
show(container, isEditing) {
show(container, isEditing, { renderWhenVisible }) {
const { vNode, destroy } = mount(
{
el: container,
@ -50,7 +50,8 @@ class DisplayLayoutView {
openmct: this.openmct,
objectPath: this.objectPath,
options: this.options,
currentView: this
currentView: this,
renderWhenVisible
},
data: () => {
return {

View File

@ -20,7 +20,7 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
import { createOpenMct, resetApplicationState } from 'utils/testing';
import { createOpenMct, renderWhenVisible, resetApplicationState } from 'utils/testing';
import { nextTick } from 'vue';
import DisplayLayoutPlugin from './plugin';
@ -114,7 +114,7 @@ describe('the plugin', function () {
let error;
try {
view.show(child, false);
view.show(child, false, { renderWhenVisible });
} catch (e) {
error = e;
}
@ -161,7 +161,7 @@ describe('the plugin', function () {
(viewProvider) => viewProvider.key === 'layout.view'
);
const view = displayLayoutViewProvider.view(displayLayoutItem, displayLayoutItem);
view.show(child, false);
view.show(child, false, { renderWhenVisible });
nextTick(done);
});