Revamp overall report UI and improve report navigation

[myanvoos]

This PR overhauls the overall report UI (layout and template/sample pages) and adds a few improvements including:

• A dark mode theme for all three pages
• Navigation breadcrumbs
• Toggle-able table of content for the index page (located top right of the screen)
• Dedicated header showing aggregated results for the index and benchmark pages
• A function to create a unified JSON file out of experimental results that preserves the hierarchical relationships between projects, benchmarks, and samples

[DavidKorczynski]

Could you post screenshots?

IMO on thing that we should watch out for is losing overview ability for the benefit of more modern-looking UI. Following #1062 I think it's more difficult to traverse the benchmarks on a higher level, probably because we have significantly reduced the amount of benchmarks shown on the screen at once. I find when experiments have hundreds of benchmarks it's convenient to have a lot of data shown at once.

[myanvoos]

Could you post screenshots?

IMO on thing that we should watch out for is losing overview ability for the benefit of more modern-looking UI. Following #1062 I think it's more difficult to traverse the benchmarks on a higher level, probably because we have significantly reduced the amount of benchmarks shown on the screen at once. I find when experiments have hundreds of benchmarks it's convenient to have a lot of data shown at once.

Thank you for your feedback @DavidKorczynski!

Do you think making all benchmarks shown as open by default would help in this regard? Currently their default behaviour is collapsed unless you clicked the 'Expand All' button or their corresponding project.

Alternatively, would a dedicated table for benchmarks without grouping to projects, similar to the old report, be more helpful? It can exist alongside the current nested 'Project Summary' tables, like this:

Here are the screenshots:

Index page without table of content opened

Index page with table of content opened

Index page in dark mode, with table of content opened

Benchmark page with prompt breakdown accordion opened

Benchmark page in dark mode, with prompt breakdown accordion collapsed

Trial/Sample page upper half

Trial/Sample page lower half, with final code, logs accordions, and the embedded coverage report

[DavidKorczynski]

The UI looks great, thanks for sharing the screenshots.

Do you think making all benchmarks shown as open by default would help in this regard? Currently their default behaviour is collapsed unless you clicked the 'Expand All' button or their corresponding projec

The default is okay as is now.

Alternatively, would a dedicated table for benchmarks without grouping to projects, similar to the old report, be more helpful? It can exist alongside the current nested 'Project Summary' tables, like this:

Yeah I think this is what we need. A table (can be on a separate page or w/e, just that it's accessible) with minimal whitespace and ability to see a lot of benchmarks at once, similar to previously.