feat(ui): entities viewer and detail panel

[cmatzenbach]

Description

This brings in the Entities table originally mocked out by @johanpel, with numerous UI/UX improvements. In addition, it adds an entities detail tab, which can be accessed either by clicking on a row in the entities table or by clicking on an entity in the timeline section.

Entities table changes:

• Added QueryToolbar to the top of the view, so that current filters can be seen/cleared/etc
• Revised layout of the dropdowns
• Improved styling
• Improved verbiage
• Fixed default text rendering
• Added sort options to all columns
• Added a "Sequence" row, which gives a preview of all the states that particular entity goes through

Entities Detail tab:

• Fix styling
• Show total timespan, dominant state (with %), and bar showing % of time spent in each state with tooltip
• Adds chart showing data consumption/flow per state
• Colors each state detail section to match up with timelines
• Adds bar to each state detail section showing how much time was spent in that state

Testing

1. Open Entities tab, ensure the table works as expected
2. Click on an entity row, ensure the entity details panel pops up and shows all relevant information
3. Click on an entity from the timeline view, ensure it is highlighted
4. Ensure entity details panel pops up after clicking on an entity from timeline
5. Verify all information is displayed

Screenshots

entities-table.mp4

entity-detail-panel.mp4

[johallar]

You'll need to merge in main and run lint:fix, since main will enforce the brackets rule now

[cmatzenbach]

Commenting for now, as I haven't gotten a chance to do a thorough UI test

[johallar]

Changes look great! One organizational comment and one thought on the duration slider:

The duration slider should probably not have max of the whole range, but should be the longest entity (maybe query for a single entity sorted by longest duration to get the max of this slider?)

[johallar]

Bubbling this up actually, i'm not sure if we want to have the operator dropdown here since the DAG is on the left and probably a better way to select this crossfilter.

[johanpel]

Rust changes LGTM. Very nice feature, thanks!

[cmatzenbach]

Changes look great! One organizational comment and one thought on the duration slider:

The duration slider should probably not have max of the whole range, but should be the longest entity (maybe query for a single entity sorted by longest duration to get the max of this slider?)

Agree - fixed. I ended up using the top entity's end timestamp, since that gives us an absolute time range.

EDIT: On second thought, we may want to revisit this in the future. The problem is, there are a decent amount of entities with very short ranges above that max. So setting the slider's max at the max of the longest entity automatically excludes these values. They can be restored by clicking the "Reset" button, but that behavior may not be desired - a point for discussion later on. For now how it works is, on page load all the entities are shown. If you drag the top end of the slider, it will treat the proposed max as the range of the slider. Thus, if you drag it back to the full range, you will be looking at a filtered result set - it does show one active filter, so hitting Reset will clear this filter and get you back to showing all the entities, but the user has to realize that.

[cmatzenbach]

Bubbling this up actually, i'm not sure if we want to have the operator dropdown here since the DAG is on the left and probably a better way to select this crossfilter.

I dunno, I could see some use for it. Using the search option within the combobox to find specific operators is a lot quicker than having to navigate through the DAG tree, especially when you have multiple physical plans. Also, users could collapse the DAG tree if they want to focus on the other items, in which case the Operator field would be very useful. I say we leave it for now and if it doesn't get much use we can remove it later - for example, if we find people are used to navigating solely from the DAG.

[cmatzenbach]

/merge

[johallar]

I dunno, I could see some use for it. Using the search option within the combobox to find specific operators is a lot quicker than having to navigate through the DAG tree, especially when you have multiple physical plans. Also, users could collapse the DAG tree if they want to focus on the other items, in which case the Operator field would be very useful. I say we leave it for now and if it doesn't get much use we can remove it later - for example, if we find people are used to navigating solely from the DAG.

Fair enough re collapsing the dag panel. It may be nice to add more detail here (like we I'd like to do for the resources dropdown) so you can see associated parent plans or workers, etc