Add Storage Dashboard visualizations for histories

[davelopez]

First simple visualizations (Bar Charts) of the disk space taken by your histories. The charts are integrated into the Storage Dashboard to help to have an overview of the space taken and potentially recoverable.

You can have a general overview of all your histories or an overview of one particular history and its datasets. Some charts are interactive and you can select the different entries to get more information or perform some actions.

When clicking on the History Size icon in the History counter, now you will get directed to that particular history storage overview. You can still access the main Storage Dashboard page from the Quota meter at the top right of the page.

StorageDashboardVisualizations.mp4

TODO

• Adapt the StorageDashboardRouter to work like other sub-routers. Similar to Register client library routes in app router #14445
• Add charts visualizing storage size for all histories (HistoriesStorageOverview.vue)
• Add charts visualizing storage size for the contents of a particular history (HistoryStorageOverview.vue)
• Get history name from the store (requires Migrate history store to pinia #15108)

How to test the changes?

• I've included appropriate automated tests.
• Instructions for manual testing are as follows:
  • Go to http://127.0.0.1:8080/storage/histories and visually explore your data

License

• I agree to license these and all my past contributions to the core galaxy codebase under the MIT license.

[afgane]

Great capability and the demo video looks cool. A couple of comments: how about adding an option to show top 10, 20, 50 datasets? Or make it configurable by the user? Fixed 10 seems like a low number.

Second is the use of a pie chart. Use of pie charts is discouraged for data viz (here's an example article https://medium.com/analytics-vidhya/dont-use-pie-charts-in-data-analysis-6c005723e657 but if you search you'll find plenty more) so it would probably be best to swap it from the start to a different type of a plot.

[davelopez]

Thank you @afgane for your feedback!

Those are great ideas, I will definitely implement them 👍

[davelopez]

I've updated the PR description. Now it displays Bar Charts instead of Pie Charts and includes an option to select the number of items to display (up to 50).
Thanks again for your feedback @afgane!

[afgane]

The bar graph looks really nice. Well done.

(now if we could also have a Runtime Dashboard that shows runtime of jobs within a history, that'd be neat ;) )

[davelopez]

(now if we could also have a Runtime Dashboard that shows runtime of jobs within a history, that'd be neat ;) )

That sounds like a nice idea! but definitely for a different PR 😆

[ElectronicBlueberry]

This looks very informative, well done!

General feedback:

The bar charts y axis labels are a bit small.

Would it be possible to indicate if a history is deleted/recoverable storage space within the main bar chart view, without hovering, to make them more obvious?

It can be quite challenging to hover over these smaller bars. would it be possible to trigger the tooltip on hovering over the column?

I find this link a bit too hidden. Maybe add a small arrow to the left, or change it to a button

[davelopez]

Thank you for the reviews! I'll go and make the requested changes 👍

[davelopez]

@ElectronicBlueberry, I think I've addressed all or most of the comments with the following nuances:

Would it be possible to indicate if a history is deleted/recoverable storage space within the main bar chart view, without hovering, to make them more obvious?

I wanted to make the BarChart somewhat generic so the only information available in a DataValuePoint is id, label, and value (size in our case) so unless we pass some more information to DataValuePoint I cannot conditionally render this without adding much more complexity. Maybe you have an idea?

---

It can be quite challenging to hover over these smaller bars. would it be possible to trigger the tooltip on hovering over the column?

I couldn't find an easy way to make the whole column hoverable without too much juggling and even doing so it felt like hovering over an invisible column could make it even more confusing, so I decided to increase the minimum size of the bar "from the bottom" just to make the hovering and click area bigger. Hope this is better.

---

I find this link a bit too hidden. Maybe add a small arrow to the left, or change it to a button

When converting the headings as you suggested, I decided to also align them to the left so it is more consistent with other pages, I think doing so now makes the router link more obvious. What do you think?

[ElectronicBlueberry]

We resolved the history hover issue, by making it more obvious that the legend can be clicked. The bar chart overflow was reverted.

[davelopez]

Thank you so much @ElectronicBlueberry!