Activity Timeline Usability and Performance Improvements

[AaronPlave]

Improves performance and usability of activity layers on the timeline. Benchmarking against Clipper cruise plan (thousands of directives and spans) and Endurance sim (< 10 directives, 250k+ spans).

Closes #593, closes #1023, closes #600, closes #613, closes(?) #1004, closes(?) #669, partially addresses #459, partially addresses #1140, partially addresses #1169

Implements:

• All activity layers within a row draw/pack on the same canvas to avoid overlay collision
• Activity layer filter also affects spans
• Recursively grouped activity mode, currently by activity type. Directives are combined with their root spans in this mode though an option may be implemented to decouple them. Two grouping modes are supported – directive mode and flat mode. Both modes can have their results filtered by your current time view.
  • Directive mode starts the grouping at the directive level and recursively groups down to span leafs. Ex: Directive Type A (3 count) -> Directive Type A (1st instance) + Root Span Type A (if exists) -> Span Type X (5 count) -> Span Type X (1st instance) -> ...
  • Flat mode groups all directives and spans regardless of where they exist in the hierarchy.
• Packed mode that combines spans and directives and uses the RAVEN style height distribution among packed rows, allowing the user to have more control over the resulting density (including label overlapping) by resizing the row. No overflow occurs in this packing mode though there are fairly low limits on the number of activities that can be nicely visualized. This mode is intended to be used with smaller sets of activities, especially for setting up more static screenshots of a plan.
• Ability to collapse all activity groups in the tree through right click menu on row
• Auto, on, off activity label behavior. When in auto mode, labels will automatically hide themselves if they overlap with an already drawn label. When on, labels will always be visible. When off, labels will always be hidden.
• x-range layer rolling render to improve rendering performance (split into a separate PR?)
• Start time for activity directive tooltip
• Start and end time for span tooltip
• New timeline editor section called "Activity Options" for controlling a row's activity rendering
• Limit number of directives+spans shown in timeline tooltip to two and show overflow as an aggregation of the directive and/or span types
• Ability to jump between spans and their directive from within the Selected Activity panel
• Optimization: Removed activityDirectivesByView store and refactored code to dynamically grab directives when needed to avoid unnecessary re-rendering of activity timeline when unrelated parts of the view changed
• Optimization: Precompute directive start time in activityDirectivesList using the plan and spans as input
• Optimization: Precompute span startMs and endMs in getSpans

TODO:

• [x] Fix label stickiness wrt packing
• [x] Fix directive only view for flat mode
• [x] Rename "flat mode"
• [x] Decide on default mode
• [x] Clean up activity row icon controls and labels
• [x] Fix and clean up activity tree icon rendering and counts
• [x] What to do with activity layer height view option since now all layers are combined into a single canvas? Might be tricky to allow for multiple different heights in a single sub row. But would be nice to allow users to customize general activity height on a per row basis?
• [x] Implement pagination within groups when necessary
• [x] Review tooltip behavior
• [x] Move collapse all subrows to a right click option
• [x] Hide label on radio buttons when container is small
• [x] Summarize tooltip overflow, limit to 3 spans+directives total
• [x] Smarter general defaults
• [x] Improve auto labeling in grouped mode
• [x] Unfinished activity styling
• [x] Anchor icon?
• [x] Add activityOptions to the view schema
• [x] Fix types
• [x] Refactoring
• [x] Clean up padding and positioning when resource layers are used in combo with grouped activities
• [x] Code walkthrough
• [x] Figure out how to handle the layer activityHeight option that is now deprecated
• [x] Review and clean up performance guardrails
• [x] Chat with @lklyne about global directive and span visibility since that is now part of Row activity options
• [x] Show span when clicking on a directive in hierarchy or timeline if available
• [x] Need icons for directive vs flat mode that are different from grouped vs compact mode @lklyne
• [x] Chat with @lklyne about whether or not to add some of these new custom icons to stellar
• [x] Tests
• [x] Make documentation ticket

Future?

• [ ] Consider bringing back directive label stickiness?
• [ ] Indicator for stale spans (future PR?)
• [ ] Consider repacking in compact mode after drag as opposed to during drag
• [ ] Consider rolling render of activities, would necessitate drag interactions not affecting the timeline until drop or possibly drawing the dragged activity on a different canvas layer.
• [ ] Consider unpacking a folder if it only has a single item in it
• [ ] Sort out directive+span combo behavior on click and drag
• [ ] Option to decouple directives and root spans in grouped mode
• [ ] Improve scroll to selection to enable better discoverability of selected directives and spans when scrolled out of view or when very small https://github.com/NASA-AMMOS/aerie-ui/pull/1259#issuecomment-2123622955

[AaronPlave]

When a span is selected, the timeline doesn't scroll to bring the selected span into focus, which is not the current behavior on develop. However, this branch makes it easier to select specific spans, but also harder to find the one you selected on the timeline. Would it be possible to scroll and highlight the ancestors of a selected span?

Moving to a separate effort after some discussion.

[AaronPlave]

@duranb resolved all of your comments, let me know if there are any other changes you'd like to see.