search

pacificclimate / scip-frontend

Salmon Climate Impacts Portal
GNU General Public License v3.0
1 stars 1 forks source link

Hierarchical area selection #42

Closed corviday closed 12 months ago

corviday commented 1 year ago

Allows users to navigate area selection via hierarchical dropdowns.

There is now a "basin" dropdown, with which a user can select a river basin like "Fraser" or "Nass". This has two effects: it will highlight the entire basin on the map and display salmon population data for the entire basin, and it will populate the conservation unit and watershed dropdowns with conservation units or watersheds that are inside that basin.

Demo here.

Possibly confusing data limitations that will show up in the demo:

At present, we only have indicator/variable data for the Fraser Basin. Salmon population data is available for all watersheds, but graphs and stream networks are only available within the Fraser. Additionally, watersheds are not defined according to stream networks, so the stream network of a selected watershed may extend outside the watershed.

Also some regions have odd names containing brackets; these were present in the shapefiles I received and I do not know whether to update them.

Conservation unit and watershed shapes are from different data sources, and sometimes "adjacent" regions are treated as nesting; fixing this probably involved updating the backend to accepts a minimum overlapping area term.

Future work: This is part one of a two- or three-part overhaul of area selection. Part two will allow users to further narrow down the list of possible watersheds or conservation units by specifying one or more salmon species they are interested in.

resolves #3

rod-glover commented 1 year ago

Question: Are the watersheds supposed to be entirely inside the basins? Or is just a bit of overlap that makes it elegible?

Example:

  1. Select Fraser River basin.
  2. Select Babine Lake watershed. It has only a very small overlap with Fraser basin. At far zoom outs, it looks like no overlap.
corviday commented 1 year ago

Watersheds should be entirely inside basins, but obviously aren't. I believe the correct fix for this involves changing the backend defines with "overlaps" - that is, setting some minimum area required in order for two shapes to be considered overlapping.

rod-glover commented 1 year ago

Ah, that makes more sense. Maybe a minimum fraction of area of overlap. What the denominator should be is an interesting question: minimum of the two? sum of the two?

corviday commented 1 year ago

I think this branch is ready to go. The demo has been updated to include area selection by species. There are still errors in the geometry, which need to be fixed elsewhere in the stack.

corviday commented 1 year ago

When are the other river basins going to receive data? It might be good to disable them in the Basin dropdown until they do have data. It's quite confusing for a naive user (that's me) to select a basin with no data - the white outline is very hard to spot against only the base map.

Data for coastal regions (mainland, I think? but maybe all coastal regions) is very nearly ready. Data for the interior might be a year off.

corviday commented 12 months ago

Did you say you were having trouble with layout of the checkboxes? It looks like you may. If so, may I suggest letting React Bootstrap do the layout work for you? Specifically, you can use a to enclose a set of items.

I am having layout troubles! Can I get your opinion on these options, various combinations of your suggestions of ButtonToolbar and me-2:

current layout, as a reminder: current

Changing to ButtonToolbar and me-2 and keeping everything else constant - doesn't quite work because the labels are too long: toolbar

Using ButtonToolbar and me-2, and putting the taxon checkboxes in their own Row, instead of sharing with the basin dropdown: taxonrow

Using only me-2 to keep the current layout, but with nice spacing: me-2only

I think I prefer the last option, but would like your opinion. Which do you prefer? Is there something else I should consider for this layout?

rod-glover commented 12 months ago

I like the last option best. It also looks like you've put each item into a , which gives a nice lineup with the row below.

Side note: If you want (not suggesting you need it), you can increase the spacing between checkboxes by using me-3 or higher. There is an abundance of nice helper classes in Bootstrap, and I love it when I realize I can just use them instead of crafting my own. Plus they always work right!

corviday commented 12 months ago

Yeah! I tried adding margins with CSS, but it didn't work; I'm sure I was doing something wrong. me-2 is easy!

corviday commented 12 months ago

I have improved the formatting on the checkboxes (and redeployed the demo) and fixed the React lifecycle issues.

corviday commented 12 months ago

I was hoping to implement some of the excellent UI suggestions "quickly" but it took long enough I think it belongs in a separate PR, so I have just done the chaining operator suggestions. I didn't know about that, thanks!