Moving country filtering off of the main page

[emdupre]

I'm not sure if someone has thought about this already, but is it possible with dash to pull filtering information in from a navbar rather than a data table ? If we could move country selection off of the main page it might give a bit more room to tweak the styling !

If the motivation is just to show the current number of cases by country, maybe we could move that into the main text under, for example, "What are the potential biases in the data?"

[GaelVaroquaux]

I'm not sure if someone has thought about this already, but is it possible with dash to pull filtering information in from a navbar rather than a data table ?

That table is crucial to me: it is the only element that it usable on a mobile phone (or, AFAIK on a touchscreen). The site is quite hard to use on a phone, and I think without the table, it would be impossible.

[emdupre]

Absolutely agree on the importance of mobile-first -- I'm guilty looking at my mobile a little too often 😸

I'm hopeful that what I'm suggesting would actually help on mobile. Here's what the page loads like for me currently (Pixel2, loading on Chrome):

The table doesn't appear until scrolling. I'd like to have something like a navbar along the top where I could click on a dropdown to select the desired countries / provinces, or directly search for a desired area in an accompanying search box. I'm imagining that this should still be responsive on mobile, even if it collapses into a hamburger menu.

I'm less familiar with Dash, so my question is -- if all of the above sounds reasonable -- is there a preferred route for to do this ? I did find a navbar under dash bootstrap components, but I'm not sure if there's a more direct route for this sort of filtering.

[GaelVaroquaux]

AFAIK, in dash proper this is not easily doable, as the only dynamic HTML component is the table (but I'm really bad at dash).

It might be possible with the bootstrap components: looking at the docs, it seems to be possible to build callbacks
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/dropdown_menu/

This could probably improve the UX on mobile phones indeed. It requires a bit of work.