Fix dashboard token usage chart layout

[Yavaren]

• prevent the token usage model legend from overflowing its container
• display models inside a bounded, vertically scrollable legend
• add clear visual and accessibility cues that the model list is scrollable
• keep the token usage and user activity panels at the same height

[Blaizzy]

The bigger issue here is that we can't display all models especially in the 100s, we should paginate and add a search bar there.

Additionally, when user clicks into a line or selects a few lines it should filter it.

Great candidate for backlog grooming this friday.

[lucasnewman]

@Yavaren Want to wire up the click-to-filter feature as part of this? Seems like a good idea and makes the section more useful. I think we could do paging as a follow up, I would guess most users typically use a small set of models.

[Yavaren]

@lucasnewman @Blaizzy I think we are making a big mistake here. I think instead of displaying the chart legend (to which color each model in the chart contributes), we should simply calculate the usage for all models combined and show it as a single line.

When you select one model (not all):

You can see there is no chart legend.

Therefore, I think it would make a lot of sense if, instead of showing each model independently when selecting "all models", we would calculate and display a single line. If users want to see usage for a specific model, a much more native and obvious way of doing this would be selecting a specific model via the dropdown.

LMK what you think!

[Yavaren]

I pushed an updated UI for the chart for all models, let me know what you think:

[Yavaren]

@Blaizzy @lucasnewman please have a look at the PR, specifically my latest comment.

[lucasnewman]

@Yavaren Hmm, I'm not totally sure I like it all blended together. The previous way is able to answer "what model do I use most often" at a glance, whereas that's no longer discoverable here. Unless I'm missing something?

[jmackow]

Few quick ideas. I am not yet 100% aware of the number it can get to for most users, so not all patterns may make sense here

1. We can show e.g. two lines of models in the legend, and then a tooltip with scrollable list of the rest inside. Will be useful up to around 30 models)

2. Legend on the side + search. Works well when there are many models, but takes too much space when there is up to 10 - then they fit better on the bottom

3. Searchable list with pagination - Works well for both long and short lists. We can hide the pagination and search when there is 8 models or less.

[Yavaren]

@jmackow thank you! I think we should stick to the third option, we need to be ready for both outcomes: short and long lists of models.

Thanks!

[lucasnewman]

Agreed, option 3 looks ideal here!