Website: first quarter version

[danielelerede-oet]

• Can we use the plotly library to generate all the plots/charts on the website, so that they are interactive?
• Compare Solvers page:
  • The first chart (scatter plot): use the same scale for both axes and add a line at y=x so that it is easy to see the benchmarks for which one solver is faster than the other. (See below for example.)
  • Add a similar scatter plot that compares the peak memory consumption of the two selected solvers
  • Can the default values for the dropdowns be Gurobi vs Highs, instead of both being equal?
  • When hovering on a datapoint in both plots, please display the benchmark name too
• Solver history page:
  • The chart should have "solver version" in the x-axis, "runtime" in the y-axis, and should have one line per benchmark so that it is possible to see whether the solver is getting faster or slower on the benchmarks
  • Add a similar plot that compares the peak memory consumption of the different solver versions
• Add a new Home page:
  • Add a plot to the top of the page that plots "runtime" on the x-axis, "peak memory" on the y-axis, has one point per benchmark (with all benchmarks connected by a line) and one color per solver. This plot should have all the data that we have for every benchmark and every solver right now. When we extend to having multiple versions of each solver, this plot should only plot the latest version of each solver.
  • Can we add a second plot to this page, similar to the one above, but where the lines connect the points for all solvers but for a particular benchmark?
• Add a new Benchmarks page:
  • This page has a dropdown to select the benchmark, and upon selection it shows a table of metadata about each benchmark. The metadata is in information in this table. I suggest moving the information from that table to a YAML file in that same folder, and then reading the YAML file in the website to display on this new page.
  • Upon selection of a benchmark, along with the metadata table, also show the "peak memory vs runtime" plot from the Home page, but filtered to only the data points corresponding to this benchmark.
• Round all runtimes to 1 decimal place, memory to 0 decimal places, objective values to 2 decimal places
• add a sensible title on the landing page like ("OET's super trooper duper awesome benchmark" 😉 )
• add a welcoming text on the landing page (context: what is it, why is it important, who is doing/funding)
• the graph on the landing page looks still a bit noisy which is probably due to small optimization problems. So for the presentation we should make the point clear that with the addition of larger problems we are expecting a clear trend here.
  • Alternatively, we can also only use a boxplots/violinplot which show time consumption (y-axis) against solver (x-axis) for all models used as well as memory consumption vs sovlers, both plots side by side.
• find more concrete names and consistent style (nouns like "Benchmarks" vs. verbs like "Compare ...") for the subpages, e.g. "Benchmarks" could be "Performance for Different Energy Models", "Compare Solvers" could be "Comparison for Solver Performances"

Scatter plot comparing runtimes of two solvers

Here's an example scatter plot from one of my previous projects:

I used the following code to generate it:

fig = px.scatter(df2, x='old', y='new', width=600, height=600, title='Scatter plot of new runtime vs old runtime')
fig.update_layout(yaxis_range=[-5,5])
fig.update_layout(xaxis_range=[-5,5])
fig.add_shape(type="line",
              x0=-5, 
              y0=-5, 
              x1=5, 
              y1=5)
fig.show()

[siddharth-krishna]

I moved the remaining items to #30 and am closing this as done, since we successfully presented a solid first quarter version of the website to BE. Great work everyone 🙌