@akhenry @charlesh88 Made some progress on splitting up Events:

and commands:

I've got events plotting:

@scottbell If you're looking for a way to categorize Events, the AMMOS repo does a pretty decent job with its EVRs views: https://github.com/NASA-AMMOS/openmct-mcws/tree/main/src/evrView

Then on the view side everything has a configurable color:

For viewing, I like what you're doing with the vertical events - you might want to consider a compact view like this too:

Basically what that view does is puts a line for each EVR level and then a point for each instance of the EVR level on the line so you can see them all in a much more compact way. On mouseover of the point it also populates a popup table that queries the evrs +/- a configured amount of time so you can see the actual record.

If you wanted to simulate that last view in MCT, what you'd do is assign a regular channel and a numerical value to each EVR level, e.g.
FATAL = 6, WARN_HI = 5, WARN_LO = 4, ACT_HI = 3, ACT_LO =2, CMD =1, DIAG=0. Then each time an EVR appears, that channel gets that value and timestamp added to it. The value is always the numeric value above, and the plot would be set up as an enumeration overlay plot with each level being dragged on it as a telemetry point. Just a slightly more compact way of showing the same information that I think you're looking for, and requires no new core MCT features to accomplish. This also has the added benefit of being able to be plotted on all time ranges, because the channel showing each instance of an evr can be minmaxed and queried through the minmax endpoint.

These are excellent suggestions @mudinthewater! I'll chat with @charlesh88 and see what we can incorporate into the design.

In progress dev notes:

Questions

• Why do we need this structure in EventTimelineView.vue? Can we do this with a single level div and no u-contents?

<div ref="events" class="c-events-tsv">
<div ref="eventsHolder" class="c-events-tsv__contents u-contents"></div>
</div>

• Rather than calculating heights on individual elements like event lines, I think we should shift to a world where we set height on the whole swimlane, and then elements inside, like event lines and holders, just set their heights via absolute position offsets or percentages. This will be more performant, and will be better when users can set swimlane heights at time edit.
• How can I get severity with events locally?
• Extended event lines don't line up on refresh, must nav away and back to get them to align. Is that an event generator issue, or something else?

Todos

@charlesh88

• Fix broken Stacked Plots in Time Strips.
  
  Problem was result of this addition from 12/12:

else if (domainObject.type === 'telemetry.plot.stacked') {
rowCount = domainObject.composition.length;

• Marcus Bains line style refinements.
• Remove extraneous padding at bottom of plot views when in TS.
• Convert approach in EventTimelineView.vue to not set an explicit height.
• Better styling for event and overlay lines.
• Better styling for event severities.
• Color related tooltip for event severity.
• Improved styling, text ellipsis for swimlane labels; vertical text for Plan swimlanes.
• Position line extension button at right edge of label column.
• Improved hit area added to event lines.
• Look at re-doing Time Strip grid layout to use grid definition at the top container.

@scottbell

• Use the Selection api to attach s-selected to an event line that's clicked; remove on click outside.
• The event lines need a holder that I can style with a slightly darker background and subtle stroke. This is the same as the plot area, and the left edge must align with the calculated plot margin.
• Hovering on an event line should set CSS class --hilite on the related extended line as well.
• Selecting an event line should also set CSS class --hilite on the related extended line.
• Some dates for events (from the Open MCT Event Generator object) in the Inspector are displaying in epoch time, but should be converted to UTC, unless this is some silliness confined to the generator.
  

To test timeline changes

1. git checkout 7936-add-discrete-event-visualization in openmct
   1. run npm install && npm link
2. git checkout 7936-add-discrete-event-visualization in openmct-yamcs
   1. run npm install && npm link openmct
3. git clone https://github.com/yamcs/quickstart
   1. run mvn yamcs:run in one console
   2. run ./simulator in another
4. In openmt-yamcs, run npm run make-example-events
5. In openmct-yamcs, runnpm start to bring up openmct
6. open http://localhost:9000
   1. create a new "Time Strip"
   2. ensure you see sub-objects under myproject -> Commands and myproject -> Events
   3. Test Events
      1. drop "Temperature Module" and "Pressure Module" events on the timeline object
      2. change the time conductor to real-time for the last 10 minutes, then back to fixed time
      3. you should see a few events
      4. click on an event, and look at in the inspector. under the event tab, it should show details
      5. hover over the event for a bit, it should show the name
      7. click the button next to title of the swimlane to expand, ensure it enables/disables properly
      8. ensure their colors (though faint) are there. charles will be adjusting these as they're a bit wonky now
   4. Test Commands
      1. Navigate to http://localhost:8090 (YAMCS controls)
      2. Click "Commanding" on the left
      3. Send a few commands (Reboot and VoltageOn for example)
      4. drop "default" and "payload" command sources on the timeline object
      5. change the time conductor to real-time for the last 10 minutes, then back to fixed time
      6. you should see a few commands
         1. click on a command event, and look at in the inspector. under the event tab, it should show details
         2. hover over the command event for a bit, it should show the name
         3. click the button next to title of the swimlane to expand, ensure it enables/disables properly

@charlesh88

Why do we need this structure in EventTimelineView.vue? Can we do this with a single level div and no u-contents?

Fixed

Rather than calculating heights on individual elements like event lines, I think we should shift to a world where we set height on the whole swimlane, and then elements inside, like event lines and holders, just set their heights via absolute position offsets or percentages. This will be more performant, and will be better when users can set swimlane heights at time edit.

That sounds good. Do we want to wait for #7957 to do this?

How can I get severity with events locally?

See testing instructions I added.

Extended event lines don't line up on refresh, must nav away and back to get them to align. Is that an event generator issue, or something else?

Fixed

Attach is-selected when an event line is selected; remove on click-outside event.

Fixed

The event lines need a holder that I can style with a slightly darker background and subtle stroke. This is the same as the plot area, and the left edge must align with the calculated plot margin.

There's an event wrapper we're generating called wrapper-${utc-date}. Would that work?

Hovering on an event line should also set a class or do something to that related extended line as well.

Fixed

@scottbell Many updates pushed, see commit messages for detailed notes on changes.

New CSS changes are looking very good, @charlesh88!

@scottbell Have pushed changes. Change details in commit notes, but briefly:

• Event coloring should now be all good across the board. TODO on this is to color the tooltip with the event color.
• Hovers now include transition effects for a better scrubbing experience.
• Styling implemented for s-selected on the event lines.
• Extended lines now get a CSS class of --hilite when their related non-extended line is hovered. I need you to also apply that class for an extended line when its non-extended line is also selected, and have aded to Todos above.
• Event Generator now uses a more random delay on event generation time, and sets a severity less frequently.
• Tooltip now gets passed severity class for events that have them.

@mudinthewater thanks again for the suggestion. I added the minimum severity child objects to each event source in YAMCS

Here's the latest and greatest:

Looks great!

Pushed significant updates to the Time Strip imagery view:

1. Refactored code and CSS ahead of user-settable swimlane heights. Image thumbs no longer set height and width in code, but instead dynamically size to the height of the container.
2. Imagery strip now uses styles and hover behavior consistent with the Events/Commands view.
3. Copied code from EventTimelineView.vue that gets and sets the imagery container left edge, to properly align the view in time.