Add Drainage Area Draw Tools #3551

rajadain · 2022-06-23T04:14:52Z

Overview

Adds two new draw tools for Drainage Area, with dummy implementations. The first takes a point, and requests an area that drains to it. The second takes a polygon, drawn around streams, and requests and area that drains to those streams. The dummy implementation simply buffers the point or stream by 0.1 and returns the shape.

In upcoming changes, the source points / streams will be sent to the Drexel / ANS API, and we'll get the correct shapes from them.

The returned shape also has drainage_area: true property, which will be used to show special drainage area analysis.

Connects #3546

Demo

Notes

In the current implementation the new draw endpoints are synchronous. However, we may need to make them Celery task based, as are all the other analyze and model endpoints, since the Drexel API may take a while to run.

There is also more validation that needs to be done, and error handling added, so that validation errors are communicated clearly to the user. For example, if in your stream selection shape, there are no streams, there is currently no graceful error handling for that.

Testing Instructions

Check out this branch and ./scripts/bundle.sh --debug
Go to http://localhost:8000/ and click Get Started
- Ensure you see a new Drainage Area set of draw tools
Click the point-based drainage area draw tool
- Ensure it draws an oval around the point you clicked
- Ensure Analyze completes as usual
Reset, and click the stream-based drainage area draw tool
- Ensure it turns on the streams layer for you to see where you're drawing
- Ensure after you draw the shape, it draws ovals around the streams in your selection
- Ensure Analyze completes as usual

Currently the implementation copies Square Km Stamp for Point Selection and Draw Tool for Stream Selection, but it lays the visual groundwork for the next phase.

Since drainage areas will need API interaction to draw correctly, we add a new family of APIs nested under the draw/ path. This dummy implementation returns a buffered shape around the given point, but will eventually be replaced with an API call to the Drexel / ANS endpoint. The front-end is updated to call this API when using the point- based drainage area draw tool. This is currently a naive POST, but may be converted to a taskRunner based implementation, a-la RWD, if the Drexel / ANS endpoint ends up taking a while to respond.

Similar to the point one, this also sends a request to the API, and shows the returned shape. When this draw tool is activated, the High Resolution Streams layer is turned on, so that the user can draw an area around a stream. This implementation currently does not have any error handling, or support for delays. It is likely that we'll need to transition these endpoints to a Celery task based workflow, as is the case for all the other Geoprocessing API endpoints.

emilyhu0106

The new drainage area draw tools work well in general. Good job on this black box!

I noticed the app will return errors like this in these two scenarios:

using point-based tool when not signed in -> 403
using stream based tool before the stream layer is fully loaded, especially when zoomed out a bit -> polygon payload to endpoint causing 500.

rajadain · 2022-06-23T18:40:25Z

01ae5a6 should cover the first point above.

I'll take a look at the second one. The streams being displayed are just for the user's benefit, the intersection happens on the server side and should be unrelated. But perhaps when zoomed out the stream intersection is too big.

rajadain · 2022-06-23T18:41:58Z

I was going to defer fixing the error box until later, but will see if I can easily capture it in this PR as well.

emilyhu0106

All works well! I agree with deferring the error box fix and focus this PR in the drainage draw tool

Previously the endpoints were made as simple request-response functions. However, given that calls to the third party API may take a while, it is better to make them task-based, as all other public APIs are, and return the results via the job endpoint. The front-end is updated correspondingly to show a spinner and error messages as appropriate while waiting for the task to finish.

For clarity, show the point or stream segment selected by the user on screen along with the area of interst. We reuse the same setup as for RWD, so if the area of interest is changed the additional layers will be removed as well.

rajadain · 2022-07-06T19:55:48Z

Thanks for reviewing! Would really appreciate you evaluating the following additional functionality.

The two additional commits above add important features:

522a6dd switches the API endpoints to start jobs, which allows for longer running processes, which is possible given the API call involved in the final implementation. The front-end shows a spinner while waiting. This should fix the error box as well.
7f9f169 sends the selected point and stream segment back with the final area of interest in the response. This initial shape is added to the front-end alongside the area of interest, for the user's reference.

Demo

Testing Instructions

Check out this branch and ./scripts/bundle.sh --debug and ./scripts/debugcelery.sh
Try the drainage area point tool
- Ensure it works
- Ensure a point is added to the AoI where you clicked
- Ensure clicking "Change area" removes the additional point as well as the area of interest
Try the drainage area stream segment tool
- Ensure it works
- Ensure you see a spinner while waiting for the shape to load
- Ensure the selected streams are added to the area of interest, and they remain when the streams layer is toggled
- Ensure clicking "Change area" removes the additional streams as well as the area of interest

emilyhu0106

I tested the point-based and the stream-based tool - both works well! Nice job in refactoring it to a task. The points and segments are helpful for users.

emilyhu0106 · 2022-07-06T23:19:54Z

src/mmw/js/src/draw/views.js

+                        polling: false,
+                    });
+                    console.error(response.error);
+                    deferred.reject('Drainage area could not be calculated');


I noticed that when the polygon is not intersecting with any streams, the app will return the error here, as shown below:

I'm thinking would it be helpful if we add something like "the drainage area must intersect with streams" to help first-time users?

Thanks for prompting this. Fixed in eb2c372:

rajadain · 2022-07-07T02:17:05Z

Thanks for the detailed review and continued encouragement for better user experience!

rajadain added 3 commits June 22, 2022 04:42

Add drainage area selection buttons

62d05e5

Currently the implementation copies Square Km Stamp for Point Selection and Draw Tool for Stream Selection, but it lays the visual groundwork for the next phase.

rajadain added the PA DEP Funding Source: Pennsylvania Department of Environment Protection label Jun 23, 2022

rajadain requested a review from emilyhu0106 June 23, 2022 04:14

rajadain assigned emilyhu0106 Jun 23, 2022

Allow non-logged in users to draw drainage areas

01ae5a6

emilyhu0106 reviewed Jun 23, 2022

View reviewed changes

emilyhu0106 approved these changes Jun 23, 2022

View reviewed changes

rajadain added 2 commits July 6, 2022 15:44

Show drainage point, stream segment on screen

7f9f169

For clarity, show the point or stream segment selected by the user on screen along with the area of interst. We reuse the same setup as for RWD, so if the area of interest is changed the additional layers will be removed as well.

rajadain requested a review from emilyhu0106 July 6, 2022 19:55

emilyhu0106 approved these changes Jul 6, 2022

View reviewed changes

emilyhu0106 reviewed Jul 6, 2022

View reviewed changes

Add detailed error handling for stream selection

eb2c372

rajadain merged commit 77914cc into develop Jul 7, 2022

rajadain deleted the tt/drainage-area-drawing branch July 7, 2022 02:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Drainage Area Draw Tools #3551

Add Drainage Area Draw Tools #3551

rajadain commented Jun 23, 2022 •

edited by emilyhu0106

Loading

emilyhu0106 left a comment

rajadain commented Jun 23, 2022

rajadain commented Jun 23, 2022

emilyhu0106 left a comment

rajadain commented Jul 6, 2022 •

edited by emilyhu0106

Loading

emilyhu0106 left a comment

emilyhu0106 Jul 6, 2022

rajadain Jul 7, 2022

rajadain commented Jul 7, 2022

Add Drainage Area Draw Tools #3551

Add Drainage Area Draw Tools #3551

Conversation

rajadain commented Jun 23, 2022 • edited by emilyhu0106 Loading

Overview

Demo

Notes

Testing Instructions

emilyhu0106 left a comment

Choose a reason for hiding this comment

rajadain commented Jun 23, 2022

rajadain commented Jun 23, 2022

emilyhu0106 left a comment

Choose a reason for hiding this comment

rajadain commented Jul 6, 2022 • edited by emilyhu0106 Loading

Demo

Testing Instructions

emilyhu0106 left a comment

Choose a reason for hiding this comment

emilyhu0106 Jul 6, 2022

Choose a reason for hiding this comment

rajadain Jul 7, 2022

Choose a reason for hiding this comment

rajadain commented Jul 7, 2022

rajadain commented Jun 23, 2022 •

edited by emilyhu0106

Loading

rajadain commented Jul 6, 2022 •

edited by emilyhu0106

Loading