Build listing UI improvements #232
Conversation
|
Also want to note that the code used to do this can be abstracted out better so that it may be reused for listing builds for different pathogens. Just waiting to do that until we were closer to choosing a particular approach (although these things can probably happen at the same time). |
|
I really like how this is developing - the layout is more compact and being able to collapse regions really helps to get an overview and just focus on whatever part you want to focus on! Just a couple of suggestions off the top of my head: The expand/collapse animation is a bit too slow for me - if you are clicking through a number of EU countries or US states, it gets a little irritating. I also wonder if an 'expand all' for some categories - like Europe or USA states might be useful? If I imagine I'm going to be clicking between many different EU countries for example, I may want to just expand them all so I can click around more easily. We probably wouldn't want that for, say, all builds in all regions, though - just some 'subsections' (I hope that makes sense!). |
this improves the collapsible build selection menus on /sars-cov-2 in the following two ways: 1. change animation time to 100ms 2. auto-expand when it is reasonable to do so (i.e. when there are fewer than 5 dropdowns at that same level)
|
@emmahodcroft thanks for the feedback! 9551913 addresses:
|
|
Some styling improvements still to come here as well. |
Thanks for clarifying Eli, that makes sense! I hadn't thought about this from a computational point of view! |
known bugs at this point: map scrolling vertical limit same coordinate builds mobile view general styling improvements
Gatsby wouldn't build with the older libraries -- see mapbox/mapbox-gl-js#4593 for full context. Note that dev mode worked. Avoided v5 of react-mapbox-gl as I encountered this bug: alex3165/react-mapbox-gl#904 This commit also adds updates the package-lock and removes a linting error which prevented TravisCI passing
move zoom control bottom right map width is more reactive to browser width legend styling improvements
clicking on the build map marker now is the way to get to the build and you must find the build in the dropdown menu below to visit the build.org.url
changes coloring of map markers to just be nextstrain vs non-nextstrain. also some styling of map markers and legend is added
use the region, country, division, location breakdown to distinguish builds by level. This is mapped to the size of the circle on the map.
also fix react key warning
This uses a react-mapbox-gl component to cluster builds on the map. Only community builds are clustered in this way. Clicking a cluster will zoom to the bounds of the builds it contains. Cluster tooltips don't show the contents of the cluster (this is possible, just adds complexity to implementation). Important to note that clusters will never separate if two markers (builds) have the same coordinates. Since programmatically adding small differences to identical coordinates is non-trivial, we do this manually in the yaml file for now. We should add a console warning so that this doesn't happen by mistake.
this is done manually by just adjusting coordinates for now. this is pretty easy to do if you are willing to spend the time fiddling with it. writing a programmatic way to add jitter would be better since it doesn't require folks who are adding builds to consider this at all, but it might be tricky to make sure there were no collisions. Even better would be allowing duplicate coordinates and using cluster tooltips to allow you to see what's "inside" each cluster and navigate to those builds through the tooltip without having to separate them on the map. Doing that (within the current implementation) requires managing react component state of the cluster, so we are skipping it for now.
[build-map] cluster community builds on the map;
map sars-cov-2 builds
Description of proposed changes
As discussed in various issues listed below, on slack, and in nextstrain meetings, the list of sars-cov-2 builds is getting rather long and would benefit from changes to the interface to make it take up less space and allow you to get the build you are looking for (or just browse) more effectively and faster.
This is just a start which steals the collapsing-menu code from the sit-reps listing directly below the builds listing on the same page, but already saves a decent chunk of space (I added some duplicate builds to fill out a row):
I wanted to just create this PR so that we can get some 馃憤 or 馃憥 before taking it further in any particular direction.
I also thought it would be worth mentioning that if all we wanted was a collapsible listing like this, read the docs does this pretty well as part of their table of contents, so we could just move such listings into a top-level docs heading at docs.nextstrain.org or a separate read the docs project (you could imagine builds.nextstrain.org or something like that).
Related issue(s)
#62
#180
#182
#206
Testing
Locally with gatsby