Timeline UX Proposals

[lklyne]

Browsing activities and resources, customizing rows and layers

Beta Give feedback

1. Remove overwriting of activities on separate activity layers #593
   clipper next timeline +3
   
2. Simplify layer hierarchy in row details #1138
   feature +1
   
3. Design: Custom filters for activity layers #1168
   design feature +2
   

   
4. Folder-based browse mode for activities and resources with drag + drop #1139
   feature +1
   
5. Custom Activity Timeline Layer Grouping #1298
   feature timeline +2

Improve activity display for large plans

Beta Give feedback

1. Improve default view and default view management #1170
   feature +1
2. Allow users to group (and collapse) related activities #459
   clipper +1
3. Grouping, collapsing and visual design for activities in timeline #1140
   feature +1
4. Unify activity directives and spans #1169
   design next refactor +3
   

Addresses related problems

• Create timeline rows that can filter by activity instance #600
• Collapse children of activity in timeline view #669
• Enable users to collapse decompositions on an activity row #1004
• Timeline layer filter view is insufficient for "exploring" #634

Related improvements that aren't directly addressed

• Add ability to pin rows for better comparison Include option to freeze activity row when scrolling through resource rows #1103
• Waterfall and Compress Right Timeline Editing Functionalities #908
• Design for configuration of directive labels #911

Design assets

• Figjam overview of research and synthesis https://www.figma.com/file/W5Y00u6RWFib7FLi6vtzFn/Aerie-Timeline-Filtering-%2B-Customization?type=whiteboard&node-id=0-1&t=3aGK3xuKte8hGkAA-11
• Figma file with UI directions (needs cleanup): https://www.figma.com/file/gsWLcy9UuqSQVqbyHf4Lw6/AERIE-Filtering%2C-Activity-UX%2C-Timeline-Density?type=design&node-id=552-127946&mode=design&t=ktcNVYRvwpyNyk0c-11

[lklyne]

Notes from wip dev cc @AaronPlave

• How do we label groups? How do we manage trees of stuff?
• What happens when theres a big flat bottom list?
• Zoom to button? Jump forward or back button. Cursor to highlight?
• Modifier to recursively expand node? Hide all others / solo mode? Add as new row?
• What are the right defaults?
• How do we handle color? Can we render spans and directives with different hue / saturation/ opacity? Is it important to disambiguate spans vs directives?
• Waterfall vs packed modes?
• What is the click / hover interaction? What happens when you click on something that has a bunch of items grouped together?
• Can I transfer a filter to the table in the bottom?
• Show number of activities at top level?
• Ability to pin row?

[lklyne]

Notes from feedback with brad. 04/15/24

Click interactions:

• What happens when you click a span? can you see directive info?
• Seeing directive and span together is valuable. Could be a toggle to prevent the need to to mix types together.

Feedback

• Could be valuable to have the toggle for grouped vs not grouped in the left panel rather than just in the row details. Could be useful on a per hierarchy (group) basis as well. Overlap + auto pack on a per group. same view as default activity that respects labels.
• How can you disambiguate overlapping lines? Can you add transparency to the colors? Would be useful when lines overlap, but could also be helpful with building complex rows. Transparency could also be combined with dashes? Different line styles?
  
• Would like to be able to search resources and activity types together, then add those based on their data type. Default should probably be line for a new layer.

Minor:

• Row highlight being blue might add visual noise.

Questions:
How do we handle the mix of y axis legends and collapsable hierarchy?

[AaronPlave]

Notes from @ewferg:

• Primarily interested in two modes but more so the first:
  • 1: Current aerie packing mode but with the updated simple boxes and directive+span combo with the ability to turn labels on/off/auto. Useful primarily for smaller sets of activities, need to be able to filter by type on both directives and spans. RAVEN has the ability to show the immediate or all children of a particular directive on new rows, consider how we might replicate this behavior or support the goal in some other way.
  • 2: hierarchy mode as demonstrated in the current prototype
• Would be nice to be able to change the icon style for directives on the timeline from a box/line to a dot to better represent "events"
• Interested in drawing areas under line charts

[AaronPlave]

Would be good to support a simple waterfall mode in this design too.

[lklyne]

V1 release ideas

• Default to group by type.
• Control menu: clean up icons and naming. Mirrored in layer settings? Add labels?
• How to handle iconography? Folder icons to show groups? Do we need to show if its a folder of directives, or folder of spans?
• Padding and icons for stacked layer types.
• Guardrails
  • Show badge for "too many activities to render — zoom in". Potentially show where we currently show loading.
  • Pagination for grouped mode. "Bin 0-49... 50-99...". "Show more?"
  • In filter by time case, these bins will shuffle.
• Clean up

Stretch ideas:

• Repack after drag as opposed to during drag
• Bring tooltips back. Probably most useful when zoomed in. Exact time?

Open questions

• How do we handle directive + span combination. Click interaction? Can we punt the combo view? Link back to parent directive? Link from directive to spans?
• Filter affects both spans and directives. Is that a good for the first cut? An improvement? Previously spans weren't filtered.
• Can directives be dragged to move? What happens when you drag a combo span+directive. Do we need to highlight these stale spans

Future timeline considerations

• Virtualized lists. Would require a second scroll bar.
• Find and highlight from table
• Think through grouping and filtering. Can you group by parameter or filter by parameter?
• Is there sub grouping? How would that work? How do we apply groups? Do you group top group then have a default grouping for sub items? First by scheduling goal, then by type?
• How to improve stacked layer types
• How to handle colors for directives vs spans. Update default colors for directives and spans? Should color picker change?
• Zoom to button? Jump forward or back button. Cursor to highlight?
• Modifier to recursively expand node? Hide all others / solo mode? Add as new row?

Future supporting panel considerations

• Mixing span and directive info in details
• Layer filtering and selection. Filtering by parameters, etc

[lklyne]

Notes from catch up with Steve to try and iron out some last open issues: