[Sim plots] Too many plots at once; fix via >1 page selectable via sidebar

[trentmc]

TODOs

• [ ] Refactor the sim plots webapp, via a tab on left for each group of plots. (See "inspiration" below)

Specifics: using the same style as "inspiration" below, group the plots with the following Sidebar label -> plots:

• "Profit" :: {Predictoor profit vs time, Trader profit vs time, pdr profit dist, trader profit dist}
• "Model performance" -> {accuracy, f1, log loss}
• "Model response" -> {Variable importances, Contours = model response}

Background / motivation

From matplotlib -> streamlit work #749 then streamlit -> dash work #906 we now have beautiful sim plots in a webapp, great. See "status quo screenshot" below.

However there's already a lot of plots in one webapp. They could readily be grouped, each into their own screen, giving them more "space to breathe" with more interactivity etc. For example, impacts + sweeps could go into their own screen.

Towards a solution

What we want is a Plotly/Dash "Multi-Page App", where:

• there's a sidebar on the left. Click a button on the sidebar and it will show you some of the plots. (Ideally each button has an icon next to it.) See "Inspiration" below.
• it's all still the "sim plots" app

Resources

• dash.plotly.com "Multi-Page Apps and URL Support" docs, video tutorial
• "dash-multi-page-app-demos", by AnnMarieW, github README, with curated links to many more tutorials
• "How to Create a Multipage Dash App", by Michael McManus blog
• "Multipage Python Dash App" by Charming Data, video part 1, video part 2. Part 2 at 0:38 shows a left sidebar; the video shows how

Inspiration

Status quo screenshot

[KatunaNorbert]

Do we really need multiple pages for this? I suggest using tabs, this will allow to keep common components such as: SimulationID, State visible on the top and only change the displayed plots.

[trentmc]

I suggest using tabs, this will allow to keep common components such as: SimulationID, State visible on the top and only change the displayed plots.

I agree.

Do we really need multiple pages for this?

"Multiple pages" has two meanings:

1. the general idea of an app that has >1 pages, versus different tabs
2. a Plotly/Dash "Multi-Page App", which is how you implement >1 pages OR different tabs

We are in category (2). We want to implement different tabs, but how you do it with Plotly/Dash is via a "Multi-Page App". (At least that's my understanding of it! If you see a simpler way, go for it.)

[KatunaNorbert]

This is what I mean: https://dash.plotly.com/dash-core-components/tab

[trentmc]

This is what I mean: https://dash.plotly.com/dash-core-components/tab

Thank you for finding that. I think I'd been confused, it had looked like tabs had been deprecated, but digging around right now, it looks like they're still properly supported.

Therefore: yes do go with the "tab" core component.

[KatunaNorbert]

Ok