Discrete Event Visualization in Timeline #7967

scottbell · 2024-12-18T09:23:52Z

Closes #7936

Describe your changes:

Adds a discrete event visualization for the Time Strip object.

All Submissions:

Have you followed the guidelines in our Contributing document?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?
Is this a notable change that will require a special callout in the release notes? For example, will this break compatibility with existing APIs or projects that consume these plugins?

Author Checklist

Changes address original issue?
Tests included and/or updated with changes?
Has this been smoke tested?
Have you associated this PR with a type: label? Note: this is not necessarily the same as the original issue.
Have you associated a milestone with this PR? Note: leave blank if unsure.
Testing instructions included in associated issue OR is this a dependency/testcase change?

Reviewer Checklist

Changes appear to address issue?
Reviewer has tested changes by following the provided instructions?
Changes appear not to be breaking changes?
Appropriate automated tests included?
Code style and in-line documentation are appropriate?

…vent-visualization

…lines

- 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.

- Removed event handle again.

src/plugins/events/components/EventTimelineView.vue

akhenry · 2025-02-26T23:47:46Z

src/plugins/events/components/EventTimelineView.vue

+      let clientWidth = this.$refs.events.clientWidth;
+
+      if (!clientWidth) {
+        //this is a hack - need a better way to find the parent of this component


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?

Braindead copy/paste from PlanView. Now using $el

src/plugins/events/components/EventTimelineView.vue

akhenry · 2025-02-27T01:24:34Z

src/plugins/events/components/EventTimelineView.vue

+
+      return selection;
+    },
+    createSelectionForInspector(event, eventWrapper) {


Aside from being a bit obtuse, our selection API is also not documented. This is a sterling effort to successfully use it against all the odds.

In principle you should be able to just call openmct.selection.selectable(eventWrapper, {item: event}) to make each event element responsive to the selection API. The parent view is already selectable, so it should automatically pick up the correct object path, so you shouldn't have to create that whole selection hierarchy manually.

This is still not resolved. We should not be manually constructing the selection path - https://github.com/nasa/openmct/pull/7967/files/32a0e1569144e1b4384c3f7e984a72cc90716823..2e35212c322d851e58b2e96d396166e3948f9538#diff-35593380249d65dcade3df51d2bfe759a597f2e9690e12e001aa8b81f19f6ffbR314

Lost write permission to this branch 😢, but the fix should look like this:

createSelectionForInspector(event) { const eventWrapper = this.$refs[`wrapper-${event.time}`][0]; const eventContext = { type: 'time-strip-event-selection', event, item: this.domainObject }; this.unsubscribeSelection = this.openmct.selection.selectable( eventWrapper, eventContext, true ); },

And in beforeUnmount:

if (this.unsubscribeSelection) { this.unsubscribeSelection(); }

src/plugins/events/components/EventTimelineView.vue

akhenry · 2025-02-27T01:36:18Z

src/plugins/timeline/ExtendedLinesBus.js

+ *****************************************************************************/
+
+import { EventEmitter } from 'eventemitter3';
+export default class ExtendedLinesBus extends EventEmitter {


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?

Gave it a shot! Let me know what you think.

src/plugins/imagery/ImageryTimestripViewProvider.js

src/plugins/imagery/components/ImageryTimeView.vue

example/eventGenerator/EventMetadataProvider.js

src/api/tooltips/ToolTipAPI.js

src/plugins/events/components/EventTimelineView.vue

src/plugins/events/components/EventInspectorView.vue

src/plugins/events/components/EventTimelineView.vue

example/eventGenerator/EventTelemetryProvider.js

src/plugins/events/components/EventTimelineView.vue

shefalijoshi · 2025-02-17T18:59:22Z

src/plugins/timeline/ExtendedLinesBus.js

+ *****************************************************************************/
+
+import { EventEmitter } from 'eventemitter3';
+export default class ExtendedLinesBus extends EventEmitter {


Curious if this could be implemented as a Vue composable instead.

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.

src/plugins/events/components/EventTimelineView.vue

src/plugins/timeline/TimelineObjectView.vue

src/plugins/events/EventTimelineViewProvider.js

…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

shefalijoshi · 2025-03-07T17:07:29Z

src/plugins/events/components/EventTimelineView.vue

      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)


I vaguely recall .parentElement not working in some specific cases for planView, but maybe that's not an issue here. I'll test.

akhenry · 2025-03-06T20:28:17Z

src/plugins/events/EventTimelineViewProvider.js

  }

  return {
    key: type,
    name: 'Event Timeline View',
    cssClass: 'icon-event',
    priority: function () {
-      return 6000; // big number!
+      // We want this to be higher priority than the TelemetryTableView
+      return openmct.priority.HIGH + 1;


Rather than making the timeline view HIGH + 1 I think we should just make the TelemetryTableView the lowest priority. Like, it's basically the default for all telemetry types.

There are 3 qualifying views when you're trying to visualize events in the timeline view: Telemetry Table, LAD Table and Event timeline view.
The TelemetryTableView has a priority of 1.
The LAD Table has a priority of HIGH.
The Event timeline has a priority of HIGH+1

This is why it's priority is HIGH+1. I think we need to review view priorities in general though.

src/plugins/events/components/EventInspectorView.vue

src/plugins/events/components/EventTimelineView.vue

src/plugins/plan/components/ActivityTimeline.vue

akhenry · 2025-04-07T21:28:52Z

src/plugins/events/components/EventTimelineView.vue

+
+      return selection;
+    },
+    createSelectionForInspector(event, eventWrapper) {


This is still not resolved. We should not be manually constructing the selection path - https://github.com/nasa/openmct/pull/7967/files/32a0e1569144e1b4384c3f7e984a72cc90716823..2e35212c322d851e58b2e96d396166e3948f9538#diff-35593380249d65dcade3df51d2bfe759a597f2e9690e12e001aa8b81f19f6ffbR314

scottbell and others added 30 commits December 9, 2024 10:32

initial structure

3159de0

more scaffolding

680b095

going to try with YAMCS data

7b22cf3

fix events not being removed

7af3996

adding inspector

944634d

Merge remote-tracking branch 'origin/master' into 7936-add-discrete-e…

55bed6a

…vent-visualization

inspector works

2776cc8

inspector and colors work

5b006b6

remove undefined

8b5e2f4

pass event bus

3b236cc

add facility to send action to mounted component regarding extending …

0db301d

…lines

button works

e9f120a

extended events

d046ad1

ensure colored lines work

052129b

works per swimlane now

6f26add

add title

aaec052

watch for left offset changes

96d8870

remove debugging code and extraneous classes

64bd625

add hovered effect for extended lines

781d834

resolve conflicts

d97f7c3

fix extended lines

cda7cc9

add tooltip

d048af1

add selection class

62b4975

only add left margin to container

20247bb

add tooltip class and only offset swimlane

20426fe

Closes #7936

aaa2e43

- Removed event handle again.

ensure metadata exists on events

2ba6bc9

scottbell requested a review from unlikelyzero January 6, 2025 09:11

handle case where we only have events in timeline

32a0e15

scottbell added the pr:e2e:couchdb npm run test:e2e:couchdb label Jan 6, 2025

github-actions bot removed the pr:e2e:couchdb npm run test:e2e:couchdb label Jan 6, 2025

akhenry removed this from the Target:4.1.0 milestone Jan 29, 2025

akhenry removed request for khalidadil and unlikelyzero February 11, 2025 16:54

akhenry requested changes Feb 27, 2025

View reviewed changes

shefalijoshi requested changes Mar 4, 2025

View reviewed changes

Removed commented out code

9e68514

shefalijoshi reviewed Mar 5, 2025

View reviewed changes

src/plugins/events/EventTimelineViewProvider.js Outdated Show resolved Hide resolved

shefalijoshi and others added 13 commits March 5, 2025 12:21

Remove the priority for imagerytimestripviewprovider and reduce the p…

1ced12d

…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)

Refactor code to

3ad64f0

1) reduce call to instance method 2) Use existing event line bus functionality 3) move non reactive properties to the created lifecycle hook

Use the tooltips mixin

aa5fa46

Merge branch 'master' of https://github.com/nasa/openmct into 7936-ad…

74a5d7e

…d-discrete-event-visualization

Fix linting issues

157bde8

Increase priority of event timeline view provider

8be969f

Increase the priority of EventtimelineView

14a5c47

Handle right offset alignment for event timeline view

88b4331

Ensure now marker shows up correctly even when there are no plots to …

b171f82

…send tick updates

remove extraneous class

af6f327

use this.el instead of hardcoded layout ref

bbae9c6

add documentation as to why we need the label hint for EventTimelineView

55d15ca

remove eventemitter and use native custom events

8545dde

scottbell requested review from akhenry and shefalijoshi March 7, 2025 12:18

Decode object path

2e35212

shefalijoshi reviewed Mar 7, 2025

View reviewed changes

akhenry requested changes Apr 21, 2025

View reviewed changes

Remove commented obsolete code.

c1f7243

Discrete Event Visualization in Timeline #7967

Are you sure you want to change the base?

Discrete Event Visualization in Timeline #7967

Uh oh!

Conversation

scottbell commented Dec 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe your changes:

All Submissions:

Author Checklist

Reviewer Checklist

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

scottbell commented Dec 18, 2024 •

edited

Loading