Add streamflow networks to map

[corviday]

We'd like to be able to show stream connectivity between grid cells of the user-selected selected watershed. We have all the pieces we need to do this, but we have to put them together.

Here's a suggestion for how @corviday and @helfy18 can work in parallel:

@corviday 's tasks (data / back end):

• Deploy a new PCEX backend with the new APIs to one of the docker dev servers
• Run the outlet location script on the entire Fraser watershed
• Write a quick ugly script to add the outlet locations to the shapefile
• update the shapefile with mouths for all watersheds along the Fraser

@helfy18 's tasks - front end setup while @corviday is getting the data done:

• make another branch off initial
• Add a new function to pcex-backend.js called getWatershedStreams() that calls the watershed_streams API. This call should always use the fraser_watershed ensemble, but should accept a latitude and longitude to call the backend with
• the watershed mouths are going to be in the shapefile. AreaDisplay is the component talks to geoserver, so AreaDisplay needs to find out what the mouths are from geoserver, and let other components who need to know that fact know it. Create a new state variable, similar to currentRegionBoundary called currentWatershedMouth in AreaDisplay. Normally this value would be updated in setRegion() whenever a user picked a region, but real data won't be ready yet, so instead, inside setRegion(), always set the longitude of the mouth to -126.1 and the latitude to 53.9.
• The map needs to display the information, which means MapDisplay has to learn from AreaDisplay where the mouth is. This is done via React Hooks, which you can read up on - React Hooks let different components communicate and react to different things that happen. There's also an example already in the app you can look at - currentRegionBoundary is also data that is received from geoserver by AreaDisplay and passed upwards to its parent, App, which then passes it downward to MapDisplay, exactly what we want to do with the new currentWatershedMouth data.
• You can just output the watershed mouth inside MapDisplay as text to make sure it's being correctly transmitted.

@helfy18 's tasks done after @corviday has a new PCEX backend set up - make things appear on the map:

• update environment variables to point to new version of PCEX backend
• Now that MapDisplay has the location of the mouth of the selected watershed and the new PCEX backend is running, have MapDisplay use getWatershedStreams() to get the location of the streams. You'll want to create a new state variable for MapDisplay, perhaps currentWatershedStreams, and use the then() function when fetching data, and pass data to DataMap after you receive it. It should end up working similarly to the way DataDisplay fetches data and passes it to the graphs.
• Finally, after the stream data arrives in DataMap, display it as a new SimpleGeoJSON layer on the map. You may need to format it slightly, I don't remember what format watershed_streams returns data in offhand, but it's probably not pure geojson, you probably have to extract the geojson from the response.

@helfy18 's tasks after @corviday updates the shapefile - use real data:

• add the updated shapefile to geoserver
• have AreaDisplay get the mouth latitude and longitude from the shapefile, instead of always using the same one.
• If a particular watershed doesn't have a latitude and longitude defined yet, set them to null and make sure nothing crashes

[corviday]

This is done, more or less. The Fraser data isn't ready yet, but @helfy18 completed the frontend infrastructure for this functionality.