Discrete Event Visualization in Timeline #7967
Conversation
…vent-visualization
- Removed in-page `style` defs from ExtendedLinesOverlay.vue; CSS actually located in timeline.scss.
- Improved sizing and style for Marcus Bains ("now") line.
- Removed extraneous padding at bottom of plot view when in Time Strip.
- Added missing header info to timeline.scss.
- CSS refinements.
- Removed bad `}` in TimeSystemAxis.vue. - Removed `.u-contents` from line 129 of ganttChart.e2e.spec.js. - Removed `event-handle` element; not needed. - Changed `__event-wrapper` to not set height explicitly; uses absolute positioning. - Added :before element to event-wrapper for better hit area. - Improved hover styling. - $colorEvent* style constants added to theme constant SCSS files.
- Layout converted to set `min-height` on top-most `c-swimlane` element. Interior containers now use 100% height or absolute positioning. - Removed `c-timeline-holder` from `c-events-tsv` in EventTimelineView.vue; Refactored `c-events-tsv__contents` to be `js-events-tsv` as that was being used as a reference. - New theme constant `eventLineW` sets event lines to be 1px wide for more precision.
unlikelyzero
added
the
notable_change
| let clientWidth = this.$refs.events.clientWidth; | ||
|
|
||
| if (!clientWidth) { | ||
| //this is a hack - need a better way to find the parent of this component |
There was a problem hiding this comment.
Yeah this won't work if embedded in a layout. What's the issue with using $el for this? Does it not resize with its parent?
There was a problem hiding this comment.
Braindead copy/paste from PlanView. Now using $el
| *****************************************************************************/ | ||
|
|
||
| import { EventEmitter } from 'eventemitter3'; | ||
| export default class ExtendedLinesBus extends EventEmitter { |
There was a problem hiding this comment.
A message bus is 100% the right architecture for this.
Recently I've been toying with CustomEvents instead of EventEmitters as they're browser-native (vs a Node-ism), and the addEventListener / dispatchEvent functions are familiar to all JS developers.
What do you think?
There was a problem hiding this comment.
Gave it a shot! Let me know what you think.
| *****************************************************************************/ | ||
|
|
||
| import { EventEmitter } from 'eventemitter3'; | ||
| export default class ExtendedLinesBus extends EventEmitter { |
There was a problem hiding this comment.
Curious if this could be implemented as a Vue composable instead.
There was a problem hiding this comment.
We pass this bus around between two Open MCT plugins, the timeline plugin, and the events plugin, so on first blush I'd probably say it's better as a plain ES6 class.
…riority for eventtimelineviewprovider to HIGH. Also add a condition to the eventtimelineview to reject objects that have imagery (this is to promote the imagerytimestripview to handle those objets)
1) reduce call to instance method 2) Use existing event line bus functionality 3) move non reactive properties to the created lifecycle hook
…d-discrete-event-visualization
…send tick updates
| if (!clientWidth) { | ||
| //this is a hack - need a better way to find the parent of this component | ||
| const parent = this.openmct.layout.$refs.browseObject.$el; | ||
| // Fallback: use the actual container element (the immediate parent) |
There was a problem hiding this comment.
I vaguely recall .parentElement not working in some specific cases for planView, but maybe that's not an issue here. I'll test.
Closes #7936
Describe your changes:
Adds a discrete event visualization for the Time Strip object.
All Submissions:
Author Checklist
type:label? Note: this is not necessarily the same as the original issue.Reviewer Checklist