Google Floods Part 1: Creating gauge points and tooltip graphs; COUNTRY=cambodia #1328

lowriech · 2024-08-08T22:11:17Z

Description

This fulfills step 1 and 2 of 3 for #1317 (see plan).

In this PR, we're fetching flood status by gauge from Google's Floods API for the entire country (10-100 gauges per country). We're displaying these gauges as points on Prism. They're color coded by flood status and provide past and future flooding in a tooltip when clicked.

Forecasts for each gauge were added here: #1330 (merged into this branch for review)

How to test the feature:

Open the Mozambique or cambodia deployment
Enable the Google Flood layer
Click on a gauge point

Checklist - did you ...

Test your changes with

REACT_APP_COUNTRY=rbd yarn start
REACT_APP_COUNTRY=cambodia yarn start
REACT_APP_COUNTRY=mozambique yarn start
Add / update necessary tests?
Add / update outdated documentation?

Screenshot/video of feature:

382087325-f448a602-a406-4f64-b6c5-861a8bc25c49

github-actions · 2024-08-08T22:18:28Z

Build succeeded and deployed at https://prism-1328.surge.sh
(hash 439a542 deployed at 2024-11-15T22:30:06)

ericboucher · 2024-08-09T20:30:39Z

api/app/main.py

@@ -412,3 +413,10 @@ def post_raster_geotiff(raster_geotiff: RasterGeotiffModel):
    return JSONResponse(
        content={"download_url": presigned_download_url}, status_code=200
    )
+
+
+@app.get("/google-floods-gauges")


If we're gonna add a bunch of integrations, it will be worthwile to think about a standardized approach and common architecture. And maybe expose them through a sub endpoint of the API to keep things cleaner. wdyt @lowriech ?

I think that's a good question, @ericboucher. Do you see other APIs we're already leveraging fitting into this integration category (kobo, hdc stats, others)? Or are you thinking just for new integrations?

I'm wary of premature abstraction and trying to determine if I think now is the right time to align on this standardized approach.

It seems like low-hanging fruit to abstract once we decide on a pattern. So yes, agree we should think about it, but not sure about the velocity of adding entirely new providers. Would vote to wait until we see more pattern around this.

frontend/src/config/mozambique/layers.json

gislawill · 2024-08-12T22:10:28Z

@lowriech and @ericboucher, there are a couple outstanding issues (noted in the PR description) but this ready for initial review

gislawill · 2024-08-12T22:20:23Z

frontend/src/components/MapView/utils.ts

+      if (
+        itemProps.visibility === FeatureInfoVisibility.IfDefined &&
+        !properties[item]
+      ) {
+        return obj;
+      }


We have some feature properties that may or may not be defined by the google api (for example: site name, river name). This allows us to hide the property from the pop up if it's not defined

gislawill · 2024-08-12T22:22:53Z

api/app/googleflood.py

+            "river": (
+                data["river"] if "river" in data and len(data["river"]) > 1 else None
+            ),


"river" can come in as a string with just 1 space (" "). This ensures there's a real value

frontend/src/config/mozambique/layers.json

gislawill · 2024-08-16T15:39:28Z

Note: I'm adding pytest-recording to store our google flood responses in local tests and use them in CI/CD. That will fix the failing API test in this PR

…api key to docker compose

…AM/prism-app into feature/google-floods/1317

gislawill · 2024-10-10T03:02:40Z

Heads up @wadhwamatic, the today "Date" is now set on these layers

I'll work with @ericboucher to get a new server deployment out for testing

gislawill · 2024-10-10T14:49:29Z

Server deployment containing the updates is out (thanks @ericboucher for walking me through it). @wadhwamatic you can resume testing

wadhwamatic · 2024-10-10T20:19:44Z

@gislawill - thanks for adding the time dimension here. I tested date intersections a few ways and this is looking good from my side, as does the river gauge info noted in this PR

gislawill · 2024-10-24T20:04:38Z

Remaining todo items:

Ensure all parts of tooltip are translate-able

* Adding graph for google flood data * Merge conflict resolution and units * Updating tests * formatting * Using superscript * Supporting rbd * Add support for Cambodia * Updating url for data * api lint * Fixing date logic on graph look up * Updates to chart to denote past vs future * Adding translation to 'future' label * Fix chart tests using mock * Requested changes: descriptive labels

gislawill · 2024-11-01T14:03:42Z

@wadhwamatic and @ericboucher, this PR is ready for review. Note: it contains the updates from #1330 to ease the review. There were tooltip features in this PR originally that were overridden by #1330. Now that they're together, we don't need to review code/ui that'll be immediate removed

api/app/googleflood.py

api/app/tests/test_google_floods_api.py

wadhwamatic · 2024-11-09T01:10:57Z

Looks good, thanks Will! I created an issue for the other (pre-existing) bug I mentioned: #1365. If it's simple to address here, please do so otherwise we can address in a separate PR

…ties

gislawill · 2024-11-12T16:32:36Z

frontend/src/components/MapView/MapTooltip/index.tsx

@@ -42,11 +49,13 @@ const useStyles = makeStyles(() =>
      marginBottom: '4px',
    },
    popup: {
+      // Overrides the default maxWidth of 240px set by react-map-gl
+      maxWidth: 'none !important',


Heads up @wadhwamatic, this fixes #1365

wadhwamatic · 2024-11-14T15:10:33Z

@gislawill - I noticed today that the charts module has a new bug on this branch. If I go to charts, select an indicator, and then drag the time slider, the chart is not updating to show the new date range even though the axis labels change.

Also, if I choose an indicator that uses a line chart (ex: rainfall anomaly), the thickness of the lines has increased compared to what was previously there.

gislawill · 2024-11-14T16:53:26Z

If I go to charts, select an indicator, and then drag the time slider, the chart is not updating to show the new date range even though the axis labels change. Also, if I choose an indicator that uses a line chart (ex: rainfall anomaly), the thickness of the lines has increased compared to what was previously there.

Thanks for catching these issues! I'll check it out.

For the second issue (thickness of the line increasing), that's a result of me purposefully making the line thicker for the flood graphs (easier to interpret imo). @wadhwamatic could you confirm you prefer the thinner line in the charts module? Do you have a stance on the weight of the floods line?

wadhwamatic · 2024-11-15T10:52:07Z

frontend/src/components/Common/Chart/index.tsx

@@ -178,7 +193,7 @@ const Chart = memo(
          fill: config.fill || false,
          backgroundColor: colors[i],
          borderColor: colors[i],
-          borderWidth: 2,
+          borderWidth: 4,


@gislawill a value of 3 works well from my perspective. let me know what you think

Looks good to me, updated

wadhwamatic · 2024-11-15T10:54:06Z

For the second issue (thickness of the line increasing), that's a result of me purposefully making the line thicker for the flood graphs (easier to interpret imo). @wadhwamatic could you confirm you prefer the thinner line in the charts module? Do you have a stance on the weight of the floods line?

@gislawill - I thought that might be the case. I personally prefer a bit thinner. I added a comment, suggesting borderWidth: 3 instead of 4. Sound / look ok to you?

It looks like this:

gislawill · 2024-11-15T22:24:02Z

@wadhwamatic, line thickness updated and time selection in the charts module updated

wadhwamatic · 2024-11-16T02:32:49Z

Thanks @gislawill. The line thickness looks good to me and the time slider issue has been resolved

gislawill · 2024-11-18T16:10:06Z

Thanks @wadhwamatic, is this good to go as far as you're concerned?

Some thoughts on potential remaining steps:

How does the copy look?
Is the layer set up optimal in each deployment (should this be in it's own layer group as currently implemented or put in an existing layer group)
We'll need translations once the copy and layer organization is complete

I'll note for context that the 502 errors from Google in RBD is not an issue on this branch. It seems to only crop up in #1332 (where I've added a cache-based workaround)

Adding Google Floods Backend

c5c1215

lowriech marked this pull request as draft August 8, 2024 22:11

ericboucher reviewed Aug 9, 2024

View reviewed changes

gislawill added 2 commits August 11, 2024 22:26

Viewing the gauges on the frontend, adding error handling to backend

b9722d3

Update comment

bc92d38

gislawill reviewed Aug 12, 2024

View reviewed changes

frontend/src/config/mozambique/layers.json Outdated Show resolved Hide resolved

Updates to support tooltip content

08a4499

gislawill changed the title ~~Adding Google Floods Backend~~ Adding Google Floods Backend + Creating a Gauge Points Aug 12, 2024

gislawill added 3 commits August 12, 2024 14:05

copy update

0653f1e

Refactor title state management

7cd866d

Fixing and adding server tests

94e1588

gislawill changed the title ~~Adding Google Floods Backend + Creating a Gauge Points~~ Adding Google Floods Backend + Creating a Gauge Points; COUNTRY=mozambique Aug 12, 2024

gislawill reviewed Aug 12, 2024

View reviewed changes

ericboucher reviewed Aug 13, 2024

View reviewed changes

frontend/src/config/mozambique/layers.json Outdated Show resolved Hide resolved

ericboucher and others added 4 commits August 13, 2024 14:19

update set_env

6ac3aad

Merge branch 'master' into feature/google-floods/1317

eb29b6e

update snapshots

6be26d7

Merge branch 'master' into feature/google-floods/1317

2fe481a

gislawill linked an issue Aug 19, 2024 that may be closed by this pull request

[Feature Request]: Google Flood Hub integration #1317

Open

gislawill added 3 commits August 20, 2024 17:29

Adding support for multi country deployments and adding google flood …

8e84cbb

…api key to docker compose

Use interpolation for popup titles

efdf2c9

Adding pytest-recording

8fa327c

gislawill marked this pull request as ready for review August 21, 2024 01:21

ericboucher added 3 commits August 21, 2024 10:38

Merge branch 'master' into feature/google-floods/1317

f5ffbf6

Update test_google_floods_api.py

438ee04

Merge branch 'feature/google-floods/1317' of https://github.com/WFP-V…

e369704

…AM/prism-app into feature/google-floods/1317

gislawill changed the title ~~Adding Google Floods Backend + Creating Gauge Points; COUNTRY=cambodia~~ Google Floods Part 1: Adding backend + creating Gauge Points; COUNTRY=cambodia Oct 24, 2024

gislawill changed the title ~~Google Floods Part 1: Adding backend + creating Gauge Points; COUNTRY=cambodia~~ Google Floods Part 1: Creating gauge points and tooltip graphs; COUNTRY=cambodia Nov 1, 2024

ericboucher reviewed Nov 8, 2024

View reviewed changes

api/app/googleflood.py Outdated Show resolved Hide resolved

ericboucher reviewed Nov 8, 2024

View reviewed changes

api/app/googleflood.py Outdated Show resolved Hide resolved

ericboucher reviewed Nov 8, 2024

View reviewed changes

api/app/tests/test_google_floods_api.py Show resolved Hide resolved

ericboucher reviewed Nov 8, 2024

View reviewed changes

api/app/tests/test_google_floods_api.py Outdated Show resolved Hide resolved

Merge branch 'master' into feature/google-floods/1317

c4155ef

gislawill mentioned this pull request Nov 11, 2024

[Bug]: Chart tooltip window resizes in error #1365

Open

gislawill added 2 commits November 12, 2024 10:07

Fixing tooltip collapsing

66cba35

Updating api with requested changes: test comments, abstracting utili…

05188b3

…ties

gislawill linked an issue Nov 12, 2024 that may be closed by this pull request

[Bug]: Chart tooltip window resizes in error #1365

Open

gislawill reviewed Nov 12, 2024

View reviewed changes

gislawill requested a review from ericboucher November 12, 2024 16:33

wadhwamatic reviewed Nov 15, 2024

View reviewed changes

gislawill added 2 commits November 15, 2024 16:02

Update border width

daaf86c

Updates to chart line thickness and time selection

439a542

gislawill mentioned this pull request Nov 25, 2024

Google Floods Part 3: Adding Inundation Maps; COUNTRY=mozambique #1332

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Google Floods Part 1: Creating gauge points and tooltip graphs; COUNTRY=cambodia #1328

Google Floods Part 1: Creating gauge points and tooltip graphs; COUNTRY=cambodia #1328

lowriech commented Aug 8, 2024 •

edited by gislawill

Loading

github-actions bot commented Aug 8, 2024 •

edited

Loading

ericboucher Aug 9, 2024

gislawill Aug 12, 2024

lowriech Aug 13, 2024

gislawill commented Aug 12, 2024

gislawill Aug 12, 2024

gislawill Aug 12, 2024

gislawill commented Aug 16, 2024

gislawill commented Oct 10, 2024

gislawill commented Oct 10, 2024

wadhwamatic commented Oct 10, 2024

gislawill commented Oct 24, 2024 •

edited

Loading

gislawill commented Nov 1, 2024

wadhwamatic commented Nov 9, 2024

gislawill Nov 12, 2024

wadhwamatic commented Nov 14, 2024

gislawill commented Nov 14, 2024

wadhwamatic Nov 15, 2024

gislawill Nov 15, 2024

wadhwamatic commented Nov 15, 2024

gislawill commented Nov 15, 2024

wadhwamatic commented Nov 16, 2024

gislawill commented Nov 18, 2024

Google Floods Part 1: Creating gauge points and tooltip graphs; COUNTRY=cambodia #1328

Are you sure you want to change the base?

Google Floods Part 1: Creating gauge points and tooltip graphs; COUNTRY=cambodia #1328

Conversation

lowriech commented Aug 8, 2024 • edited by gislawill Loading

Description

How to test the feature:

Checklist - did you ...

Screenshot/video of feature:

github-actions bot commented Aug 8, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gislawill commented Aug 12, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gislawill commented Aug 16, 2024

gislawill commented Oct 10, 2024

gislawill commented Oct 10, 2024

wadhwamatic commented Oct 10, 2024

gislawill commented Oct 24, 2024 • edited Loading

gislawill commented Nov 1, 2024

wadhwamatic commented Nov 9, 2024

Choose a reason for hiding this comment

wadhwamatic commented Nov 14, 2024

gislawill commented Nov 14, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wadhwamatic commented Nov 15, 2024

gislawill commented Nov 15, 2024

wadhwamatic commented Nov 16, 2024

gislawill commented Nov 18, 2024

lowriech commented Aug 8, 2024 •

edited by gislawill

Loading

github-actions bot commented Aug 8, 2024 •

edited

Loading

gislawill commented Oct 24, 2024 •

edited

Loading