Timeline: Gantt view area

[jsonporter]

Motivation: Why do you think this is important?

The Gantt view component will display visible nodes and render their durations as clickable bars. The component needs to accept handlers for changes to the node list as well as changes to the zoom level. Each bar should be colored to indicate its status as well as be clickable to trigger the execution detail slide-out.

Goal: What should the final outcome look like, ideally?

Acceptance criteria:
External state handlers

• Component handles zoom values from zoom component
• Component handles updates to the node list (eg, from updated execution data or from filters)
• Component handles updates from "Local time vs UTC" time toggle.

UI

• Should render all available nodes (as parsed from the workflow closure + dynamic workflows)
  • All nodes being as grey for "Not run yet" and will change colors and length as their status changes
  • "Not run yet nodes" all begin at the time of the last/current node's execution end
  • However, if a wf was aborted, remove all "not yet run" nodes after.
• Updates to a currently running execution (as well as the "not run nodes" that follow) should smoothly animate to their new dimensions/positions.
• Clicking on an execution bar or a cell in the Task Name (left) column should trigger the execution detail slide-out
• Should be horizontally and vertically scrollable
  • Mouse wheel/swipe scroll on the Task Name section should vertically scroll the page
  • Mouse wheel/swipe scroll on the timeline view should zoom
  • Panning left to right is done by "click drag" on the time (column header) section or by clicking a non-bar area in the timeline view.

Propose: Link/Inline OR Additional context

No response

Are you sure this issue hasn't been raised already?

• Yes

Have you read the Code of Conduct?

• Yes

[anrusina]

Was duplicated by https://github.com/flyteorg/flyteconsole/issues/302
I'm closing this item, as flyteconsole #302 has more information and PRs linked to it.