Rework UI

[rotmanjanez]

I regularly look at the ClickBench website, and slowly, the selectors become more and more convoluted, and viewing the actual results becomes more annoying. This is an attempt to fix the UI experience of the online benchmark results websites.

Main Changes:

1. Move Combined Benchmark ranking to the top. It is a bit odd going to a benchmark site and only seeing a bunch of buttons and no results. Moving the table to the top instantly shows benchmark results to first visitors and long-time viewers. Making the combined table scrollable should also improve viewing the site on mobile devices (though still far away from mobile-friendly).
2. Update System selectors: There are eleven versions of ClickHouse and nine versions of DuckDB in the system selector filter. If I am not interested in DuckDB for whatever reason, I’d like to disable/enable all of them. This change introduces a new Database selector that buckets the different variations into more easily digestible selectors. The full systems selector is still in a dropdown.
3. Change default metric back to hot. All other subpages in the repo also have hot as their default. The HTML comparing different ClickHouse versions does not even implement the combined metric. It does not seem very important to technical persons, who are likely the main visitors of the page. The first thing I do when I visit clickbench is to change to hot run only, and I know that I am not the only one doing this. I would be interested if anyone that actually uses this site on a regular basis looks at the combined metric and why.

I tried to make old links with hashes still work, and from my limited testing, they still work as intended.

I hope you and others like the direction of this PR.

[CLAassistant]

All committers have signed the CLA.

[rschu1ze]

@rotmanjanez I generally like the direction, thanks. Some comments:

1. Move Combined Benchmark ranking to the top.

Makes sense.

Making the combined table scrollable should also improve viewing the site on mobile devices (though still far away from mobile-friendly).

Not a blocker: The (minor) problem here is that if only few databases are selected, the graph is still padded.

Can the graph height be auto-adjusted or be made configurable via some click-on-the-border-and-drag feature?

2. Update System selectors.

This one is a bit more controversial. My main quirk is that the "Additional filters" button is too hard to spot, IMHO.

Most users will need to click it open because extra filtering is a necessity. So we can show the other filters always (as before), i.e. no filter button.

3. Change default metric back to hot.

This reverts #616 and it is the most controversial change :-) I'd say real workloads are a mix of cold and hot runtimes anyways, so "combined" seems a good default choice. Viewers can switch to hot or cold if they like to. Could I ask you to revert this change?

Thanks for the PR (you are clearly much better with HTML and JS than me ;-) )