ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-03-21 11:35:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use composable instead of using event emitters for extended lines overlays

Browse Source
This commit is contained in:
Shefali 2025-03-18 11:32:09 -07:00
parent 2e35212c32
commit 39ce53f561
5 changed files with 273 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/plugins/events/components/EventTimelineView.vue
View File

@ -34,8 +34,8 @@
class="c-events-tsv__event-line"
:class="event.limitClass || ''"
:style="`left: ${event.left}px`"
@mouseover="showToolTip(event)"
@mouseleave="dismissToolTip()"
@mouseenter="showToolTip(event)"
@mouseleave="dismissToolTip(event)"
@click.stop="createSelectionForInspector(event)"
></div>
</div>
@ -54,6 +54,7 @@ import SwimLane from '@/ui/components/swim-lane/SwimLane.vue';
import tooltipHelpers from '../../../api/tooltips/tooltipMixins';
import { useAlignment } from '../../../ui/composables/alignmentContext.js';
import { useExtendedLines } from '../../../ui/composables/extendedLines';
import eventData from '../mixins/eventData.js';
const PADDING = 1;
@ -68,7 +69,21 @@ export default {
const objectPath = inject('objectPath');
const openmct = inject('openmct');
const { alignment: alignmentData } = useAlignment(domainObject, objectPath, openmct);
return { alignmentData };
const {
extendedLines: extendedLines,
update: updateExtendedLines,
updateLineHover: updateExtendedLineHover,
remove: removeLinesForObject
} = useExtendedLines(domainObject, objectPath, openmct);
return {
alignmentData,
extendedLines,
updateExtendedLineHover,
updateExtendedLines,
removeLinesForObject
};
},
data() {
return {
@ -107,13 +122,23 @@ export default {
this.setScaleAndPlotEvents(this.timeSystem);
},
deep: true
},
extendedLines: {
handler() {
const { enabled = false } = this.extendedLines[this.keyString];
if (this.extendedLinesEnabled !== enabled) {
this.extendedLinesEnabled = enabled === true;
this.updateLines();
}
},
deep: true
}
},
created() {
this.valueMetadata = {};
this.height = 0;
this.timeSystem = this.openmct.time.getTimeSystem();
this.extendLines = false;
this.extendedLinesEnabled = false;
},
mounted() {
this.setDimensions();
@ -136,8 +161,6 @@ export default {
this.resize = _.debounce(this.resize, 400);
this.eventStripResizeObserver = new ResizeObserver(this.resize);
this.eventStripResizeObserver.observe(this.$refs.events);
this.extendedLinesBus.addEventListener('disable-extended-lines', this.disableExtendEventLines);
this.extendedLinesBus.addEventListener('enable-extended-lines', this.enableExtendEventLines);
},
beforeUnmount() {
if (this.eventStripResizeObserver) {
@ -148,15 +171,6 @@ export default {
if (this.unlisten) {
this.unlisten();
}
if (this.destroyEventContainer) {
this.destroyEventContainer();
}
this.extendedLinesBus.removeEventListener(
'disable-extended-lines',
this.disableExtendEventLines
);
this.extendedLinesBus.removeEventListener('enable-extended-lines', this.enableExtendEventLines);
},
methods: {
setTimeContext() {
@ -165,20 +179,6 @@ export default {
this.timeContext.on('timeSystem', this.setScaleAndPlotEvents);
this.timeContext.on('boundsChanged', this.updateViewBounds);
},
enableExtendEventLines(event) {
const keyStringToEnable = event.detail;
if (this.keyString === keyStringToEnable) {
this.extendLines = true;
this.emitExtendedLines();
}
},
disableExtendEventLines(event) {
const keyStringToDisable = event.detail;
if (this.keyString === keyStringToDisable) {
this.extendLines = false;
this.emitExtendedLines();
}
},
firstNonDomainAttribute(metadata) {
return metadata
.values()
@ -242,12 +242,11 @@ export default {
return {
...eventHistoryItem,
left: this.xScale(eventHistoryItem.time),
limitClass
limitClass,
hoverEnabled: false
};
});
if (this.extendLines) {
this.emitExtendedLines();
}
this.updateLines();
}
},
setDimensions() {
@ -354,22 +353,33 @@ export default {
`wrapper-${event.time}`,
[aClasses.join(' ')]
);
this.extendedLinesBus.updateHoverExtendEventLine(this.keyString, event.time);
this.updateExtendedLineHover({
keyString: this.keyString,
id: event.time,
hoverEnabled: true
});
},
dismissToolTip() {
dismissToolTip(event) {
this.hideToolTip();
this.extendedLinesBus.updateHoverExtendEventLine(this.keyString, null);
this.updateExtendedLineHover({
keyString: this.keyString,
id: event.time
});
},
emitExtendedLines() {
updateLines() {
let lines = [];
if (this.extendLines) {
if (this.extendedLinesEnabled) {
lines = this.eventItems.map((e) => ({
x: e.left,
limitClass: e.limitClass,
id: e.time
id: e.time,
hoverEnabled: false
}));
}
this.extendedLinesBus.updateExtendedLines(this.keyString, lines);
this.updateExtendedLines({
lines,
keyString: this.keyString
});
}
}
};

60
src/plugins/timeline/ExtendedLinesOverlay.vue
View File

@ -22,37 +22,39 @@
<template>
<div class="c-timeline__overlay-lines">
<div
v-for="(lines, key) in extendedLinesPerKey"
v-for="(lineData, key) in extendedLines"
:key="key"
class="c-timeline__event-line--extended-container"
>
<div
v-for="(line, index) in lines"
:id="line.id"
:key="`${index - line.id}`"
class="c-timeline__event-line--extended"
:class="[
line.limitClass,
{
'--hilite':
(hoveredLineId && hoveredKeyString === key && line.id === hoveredLineId) ||
(selectedLineId && selectedKeyString === key && line.id === selectedLineId)
}
]"
:style="{ left: `${line.x + leftOffset}px`, height: `${height}px` }"
></div>
<template v-if="lineData.enabled">
<div
v-for="(line, index) in lineData.lines"
:id="line.id"
:key="`${index - line.id}`"
class="c-timeline__event-line--extended"
:class="[
line.limitClass,
{
'--hilite':
line.hoverEnabled === true ||
(selectedLineId && selectedKeyString === key && line.id === selectedLineId)
}
]"
:style="{ left: `${line.x + leftOffset}px`, height: `${height}px` }"
></div>
</template>
</div>
</div>
</template>
<script>
import { inject } from 'vue';
import { useExtendedLines } from '../../ui/composables/extendedLines';
export default {
name: 'ExtendedLinesOverlay',
props: {
extendedLinesPerKey: {
type: Object,
required: true
},
height: {
type: Number,
required: true
@ -61,22 +63,20 @@ export default {
type: Number,
default: 0
},
extendedLineHover: {
type: Object,
required: true
},
extendedLineSelection: {
type: Object,
required: true
}
},
setup() {
const domainObject = inject('domainObject');
const path = inject('path');
const openmct = inject('openmct');
const { extendedLines: extendedLines } = useExtendedLines(domainObject, path, openmct);
return { extendedLines };
},
computed: {
hoveredLineId() {
return this.extendedLineHover.id || null;
},
hoveredKeyString() {
return this.extendedLineHover.keyString || null;
},
selectedLineId() {
return this.extendedLineSelection.id || null;
},

18
src/plugins/timeline/TimelineObjectView.vue
View File

@ -50,9 +50,13 @@
</template>
<script>
import { inject } from 'vue';
import ObjectView from '@/ui/components/ObjectView.vue';
import SwimLane from '@/ui/components/swim-lane/SwimLane.vue';
import { useExtendedLines } from '../../ui/composables/extendedLines';
export default {
components: {
ObjectView,
@ -69,6 +73,16 @@ export default {
required: true
}
},
setup() {
const domainObject = inject('domainObject');
const objectPath = inject('path');
const openmct = inject('openmct');
const { disable: disableExetendedLinesForObject, enable: enableExtendedLinesForObject } =
useExtendedLines(domainObject, objectPath, openmct);
return { disableExetendedLinesForObject, enableExtendedLinesForObject };
},
data() {
return {
domainObject: null,
@ -141,11 +155,11 @@ export default {
},
enableExtendEventLines() {
const keyString = this.openmct.objects.makeKeyString(this.item.domainObject.identifier);
this.extendedLinesBus.enableExtendEventLines(keyString);
this.enableExtendedLinesForObject(keyString);
},
disableExtendEventLines() {
const keyString = this.openmct.objects.makeKeyString(this.item.domainObject.identifier);
this.extendedLinesBus.disableExtendEventLines(keyString);
this.disableExetendedLinesForObject(keyString);
},
setActionCollection(actionCollection) {
this.openmct.menus.actionsToMenuItems(

12
src/plugins/timeline/TimelineViewLayout.vue
View File

@ -47,10 +47,8 @@
</div>
<ExtendedLinesOverlay
:extended-lines-per-key="extendedLinesPerKey"
:height="height"
:left-offset="extendedLinesLeftOffset"
:extended-line-hover="extendedLineHover"
:extended-line-selection="extendedLineSelection"
/>
</div>
@ -105,8 +103,6 @@ export default {
height: 0,
useIndependentTime: this.domainObject.configuration.useIndependentTime === true,
timeOptions: this.domainObject.configuration.timeOptions,
extendedLinesPerKey: {},
extendedLineHover: {},
extendedLineSelection: {},
extendedLinesLeftOffset: 0
};
@ -128,15 +124,11 @@ export default {
this.handleContentResize.cancel();
this.contentResizeObserver.disconnect();
this.openmct.selection.off('change', this.checkForLineSelection);
this.extendedLinesBus.removeEventListener('update-extended-lines', this.updateExtendedLines);
this.extendedLinesBus.removeEventListener('update-extended-hover', this.updateExtendedHover);
},
mounted() {
this.items = [];
this.setTimeContext();
this.extendedLinesBus.addEventListener('update-extended-lines', this.updateExtendedLines);
this.extendedLinesBus.addEventListener('update-extended-hover', this.updateExtendedHover);
this.openmct.selection.on('change', this.checkForLineSelection);
if (this.composition) {
@ -275,10 +267,6 @@ export default {
const { keyString, lines } = event.detail;
this.extendedLinesPerKey[keyString] = lines;
},
updateExtendedHover(event) {
const { keyString, id } = event.detail;
this.extendedLineHover = { keyString, id };
},
checkForLineSelection(selection) {
const selectionContext = selection?.[0]?.[0]?.context;
const eventType = selectionContext?.type;

177
src/ui/composables/extendedLines.js Normal file
View File

@ -0,0 +1,177 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2014-2024, 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.
*****************************************************************************/
/* eslint-disable func-style */
import { reactive } from 'vue';
/** @type {Map<string, LineData> | null} */
const extendedLineMap = new Map();
/**
* Manages line data given an timeline object.
* This is a Vue composition API utility function.
* @param {Object} targetObject - The target to that's consuming the useExtendedLines composable.
* @param {ObjectPath} objectPath - The path of the target object.
* @param {import('../../../openmct.js').OpenMCT} openmct - The open mct API.
* @returns {Object} An object containing line data and methods to update, enable/disable, and reset extended line data.
*/
export function useExtendedLines(targetObject, objectPath, openmct) {
/**
* Get the key for the extended line given a path.
* @returns {string|undefined} The key of the extended line if found, otherwise undefined.
*/
const getTargetObjectKeyForPath = () => {
const keys = Array.from(extendedLineMap.keys());
return objectPath
.map((domainObject) => openmct.objects.makeKeyString(domainObject.identifier))
.reverse()
.find((keyString) => keys.includes(keyString));
};
// Use the furthest ancestor's lineData if it exists, otherwise, use your own
let targetObjectKey =
getTargetObjectKeyForPath() || openmct.objects.makeKeyString(targetObject.identifier);
if (!extendedLineMap.has(targetObjectKey)) {
extendedLineMap.set(targetObjectKey, reactive({}));
}
/**
* Reset any data for the given target object.
*/
const reset = () => {
const key = getTargetObjectKeyForPath();
if (key && extendedLineMap.has(key)) {
extendedLineMap.delete(key);
}
};
/**
* @typedef {Object} UpdateParams
* @property {Array} lines - The line data to be updated.
* @property {string} keyString - The domain object identifier of the telemetry object.
*/
/**
* Update line data given the keyString and path. The path is used to determine which ancestor should hold the lineData.
* @param {UpdateParams} param0 - The array of lines, keyString.
*/
const update = ({ lines, keyString } = {}) => {
const key = getTargetObjectKeyForPath();
if (key) {
const lineData = extendedLineMap.get(key);
if (lineData[keyString] === undefined) {
lineData[keyString] = {};
}
lineData[keyString].lines = lines;
}
};
/**
* @typedef {Object} UpdateParams
* @property {string} keyString - The domain object identifier of the telemetry object.
* @property {string} id - The identifier of the line
*/
/**
* Update line data given the keyString and path. The path is used to determine which ancestor should hold the lineData.
* @param {UpdateParams} param0 - The keyString and id.
*/
const updateLineHover = ({ keyString, id, hoverEnabled } = {}) => {
const key = getTargetObjectKeyForPath();
if (key) {
const lineData = extendedLineMap.get(key);
if (lineData[keyString] !== undefined) {
const lines = lineData[keyString].lines || [];
let line = lines.find((lineItem) => {
return lineItem.id === id;
});
if (line) {
line.hoverEnabled = hoverEnabled === true;
}
}
}
};
/**
* @typedef {Object} RemoveParams
* @property {string} keyString - The domain object identifier of the telemetry object.
*/
/**
* Unregister a telemetry object from line data.
* @param keyString
*/
const disable = (keyString) => {
const key = getTargetObjectKeyForPath();
if (key) {
const lineData = extendedLineMap.get(key);
if (lineData[keyString] !== undefined) {
lineData[keyString].enabled = false;
}
}
};
/**
* @typedef {Object} AddParams
* @property {string} keyString - The domain object identifier of the telemetry object.
*/
/**
* Register a telemetry object to line data.
* @param keyString
*/
const enable = (keyString) => {
const key = getTargetObjectKeyForPath();
if (key) {
const lineData = extendedLineMap.get(key);
if (lineData[keyString] === undefined) {
lineData[keyString] = {};
}
lineData[keyString].enabled = true;
}
};
return {
extendedLines: extendedLineMap.get(targetObjectKey),
update,
updateLineHover,
enable,
disable,
reset
};
}
/**
* @typedef {import('../../api/objects/ObjectAPI.js').DomainObject[]} ObjectPath
*/
/**
* @typedef {Object} LineData
* @property {Map<string, {Object} boolean, Array.<Line>> keyString - The domain object identifier of the telemetry object (typically an event or command)
*/
/**
* @typedef {Object} Line
* @property {Number} x - the left offset
* @property {string} limitClass - the class to apply to the line overlay
* @property {string} id - the id of the line (typically a timestamp)
* @property {boolean} hoverEnabled - whether the line is currently hovered on */