Add "Load More" button for Metrics table in Runs Overview tab

[jescalada]

PR for G-Research/fasttrackml#1355.

Note: This was implemented with a "Load More" button instead of infinite scrolling due to how complicated the default BaseTable is (the metrics list is implemented using this). It was a lot easier to extend the Card to allow loading more rows on demand.

Changelog

• Extended useRunMetricsBatch to allow fetching metrics in groups (default 500) with a startIndex and count
• Extended Card.tsx to allow conditionally rendering a "Load More" button if there are more than 500 rows
  • loadMore (boolean) and loadMoreHandler must be supplied
  • For this particular use case, loadMore is true (therefore button is rendered) only when the number of loaded metric batches is less than the total number of metrics

[suprjinx]

Implementation looks good! I'm a little confused by the "Load More" button -- maybe place below table? I think it would also be reasonable to just put a note that says "Only showing 500 metrics" and leave it at that.

[jescalada]

Implementation looks good! I'm a little confused by the "Load More" button -- maybe place below table? I think it would also be reasonable to just put a note that says "Only showing 500 metrics" and leave it at that.

@suprjinx

I thought about putting it under the table, however in this case users with 1920x1080 screen would be forced to scroll down a bit to see the button. I wanted to set it in the most logical place, next to the other buttons in the Table, however the RunsOverviewTabMetricsCard component doesn't allow this, and it would require modifying the DataList component which is deep within the hierarchy (and has many other components using it).

Here's another solution I found: We can just display the number of loaded metrics and the total number for clarity. This will only show up when the user has over 500 metrics (and will disappear when all metrics are loaded):