Historical events #3558

jasontk19 · 2021-06-21T15:49:29Z

Description

TODO

Summary of Changes

Hard-code event categories in config file: config/default/common/config/wv.json/naturalEvents.json instead of requesting from EONET API
Tweak sidebar modal styles for more consistency
Add <ModalFooter /> to modals if the footer: true option is sent in call to toggleCustomContent(). Portals can be used to insert content like action buttons.
Remove tabIndex attribute from <DateInputColumn />, instead use generated class names to move focus among sibling inputs instead.
Created new <DateRangeSelector /> component which serves as a start/end date selector. Now used in animation widget as well as event filter modal
Simplify params for areCoordinatesWithinExtent() util function to only require state projection object and coords to check.
Create standalone <EventIcon /> component for showing event icon of given type with hover tooltip
Convert <FooterContent /> component to functional component

Additional Notes

From the comments:

/**
 * Since the EONET API bounding box parameter only accepts a geographic coordinate format,
 * the bounding box extents we send during the API call may return events outside of the
 * visible extent of polar projections within the app. Therefore, we filter out any geometries
 * for an event that are outside the visible extent (to prevent track points from rendering beyond it)
 * and, we filter out any events that have no visible geometries in the current extent entirely.
 *
 * We also need to filter the categories on events so that only categories
 * which we support and, which are currently selected in the event filter remain on an 
 * event object so that an inappropriate icon does not show.  (E.g. event belongs to
 * "Severe Storms" and "Snow" but was returned from a search for "Snow" events only, we don't
 * want the "Severe Storms" icon to show)
 */

How To Test

In general:

Try various combinations of dates and categories with different projections
For each set of results, check the URL params and copy/paste to a new tab to confirm proper functionality
Verify date inputs for timeline, animation widget still behave as intended since these components were affected by changes in this PR

minniewong

Date field issues in Firefox 78.7.0esr (64-bit) (which do not occur in Chrome):

Clicking on the up arrow on the first year field causes "an unexpected error".
Change the first year field to "2000" then change the second year field to "2014". See red box appear around "2014"
I am allowed to enter an incorrect year (e.g. 1995) in the first year field with no red box indication that it's not allowed. No error given when you click "Apply"

jasontk19 · 2021-06-23T17:44:37Z

Date field issues in Firefox 78.7.0esr (64-bit) (which do not occur in Chrome):

Clicking on the up arrow on the first year field causes "an unexpected error".

Change the first year field to "2000" then change the second year field to "2014". See red box appear around "2014"

I am allowed to enter an incorrect year (e.g. 1995) in the first year field with no red box indication that it's not allowed. No error given when you click "Apply"

👍🏻 this is my 4th TODO up above :)

minniewong · 2021-06-23T18:09:13Z

Go to Alaid Volcano event in Geographic, then change to Arctic - it breaks the app.
/?v=149.113828125,48.24625390625,162.016171875,53.47574609375&e=EONET_3915,2018-08-20&efs=false&efd=2013-02-23,2018-10-23&efc=dustHaze,manmade,seaLakeIce,severeStorms,snow,volcanoes,waterColor,wildfires&l=AIRS_Prata_SO2_Index_Night(hidden),AIRS_Prata_SO2_Index_Day,IMERG_Precipitation_Rate(hidden),VIIRS_SNPP_Thermal_Anomalies_375m_Night(hidden),VIIRS_SNPP_Thermal_Anomalies_375m_Day(hidden),MODIS_Aqua_Thermal_Anomalies_Night(hidden),MODIS_Aqua_Thermal_Anomalies_Day(hidden),VIIRS_NOAA20_Thermal_Anomalies_375m_Night(hidden),VIIRS_NOAA20_Thermal_Anomalies_375m_Day(hidden),MODIS_Terra_Thermal_Anomalies_Night,MODIS_Terra_Thermal_Anomalies_Day,VIIRS_SNPP_DayNightBand_ENCC(hidden),VIIRS_SNPP_DayNightBand_At_Sensor_Radiance(hidden),Reference_Labels_15m,Reference_Features_15m,Coastlines_15m(hidden),VIIRS_SNPP_CorrectedReflectance_BandsM11-I2-I1(hidden),MODIS_Aqua_CorrectedReflectance_Bands721(hidden),VIIRS_NOAA20_CorrectedReflectance_BandsM11-I2-I1(hidden),MODIS_Terra_CorrectedReflectance_Bands721(hidden),VIIRS_NOAA20_CorrectedReflectance_TrueColor(hidden),VIIRS_SNPP_CorrectedReflectance_TrueColor(hidden),MODIS_Aqua_CorrectedReflectance_TrueColor(hidden),MODIS_Terra_CorrectedReflectance_TrueColor&lg=true&t=2018-08-20-T00%3A00%3A00Z

Actually, if you just load volcano events 2013 - 2018 in geographic, and then change to Arctic it breaks the app. I guess there's some issue with the coordinates of some of the volcanoes. (or just look for volcano events in arctic projection between 2013 - 2018)
/?v=-126.25913127949872,-66.49256051184877,92.77152420944114,81.29916305536615&e=true&efs=true&efd=2013-02-23,2018-06-23&efc=volcanoes&t=2021-06-23-T17%3A21%3A32Z

jasontk19 · 2021-06-23T19:12:03Z

Go to Alaid Volcano event in Geographic, then change to Arctic - it breaks the app.
/?v=149.113828125,48.24625390625,162.016171875,53.47574609375&e=EONET_3915,2018-08-20&efs=false&efd=2013-02-23,2018-10-23&efc=dustHaze,manmade,seaLakeIce,severeStorms,snow,volcanoes,waterColor,wildfires&l=AIRS_Prata_SO2_Index_Night(hidden),AIRS_Prata_SO2_Index_Day,IMERG_Precipitation_Rate(hidden),VIIRS_SNPP_Thermal_Anomalies_375m_Night(hidden),VIIRS_SNPP_Thermal_Anomalies_375m_Day(hidden),MODIS_Aqua_Thermal_Anomalies_Night(hidden),MODIS_Aqua_Thermal_Anomalies_Day(hidden),VIIRS_NOAA20_Thermal_Anomalies_375m_Night(hidden),VIIRS_NOAA20_Thermal_Anomalies_375m_Day(hidden),MODIS_Terra_Thermal_Anomalies_Night,MODIS_Terra_Thermal_Anomalies_Day,VIIRS_SNPP_DayNightBand_ENCC(hidden),VIIRS_SNPP_DayNightBand_At_Sensor_Radiance(hidden),Reference_Labels_15m,Reference_Features_15m,Coastlines_15m(hidden),VIIRS_SNPP_CorrectedReflectance_BandsM11-I2-I1(hidden),MODIS_Aqua_CorrectedReflectance_Bands721(hidden),VIIRS_NOAA20_CorrectedReflectance_BandsM11-I2-I1(hidden),MODIS_Terra_CorrectedReflectance_Bands721(hidden),VIIRS_NOAA20_CorrectedReflectance_TrueColor(hidden),VIIRS_SNPP_CorrectedReflectance_TrueColor(hidden),MODIS_Aqua_CorrectedReflectance_TrueColor(hidden),MODIS_Terra_CorrectedReflectance_TrueColor&lg=true&t=2018-08-20-T00%3A00%3A00Z

Actually, if you just load volcano events 2013 - 2018 in geographic, and then change to Arctic it breaks the app. I guess there's some issue with the coordinates of some of the volcanoes. (or just look for volcano events in arctic projection between 2013 - 2018)
/?v=-126.25913127949872,-66.49256051184877,92.77152420944114,81.29916305536615&e=true&efs=true&efd=2013-02-23,2018-06-23&efc=volcanoes&t=2021-06-23-T17%3A21%3A32Z

Should be fixed now, I wasn't handling polygons when checking coords somewhere. Here is the offending event to test against the latest changes: http:https://localhost:3000/?v=-163.4081966038871,53.192952883044555,-160.81123308559077,56.79745204018201&e=EONET_353,2016-03-28&efs=true&efd=2016-03-27,2016-03-28&efc=volcanoes&l=VIIRS_SNPP_Thermal_Anomalies_375m_Night(hidden),VIIRS_SNPP_Thermal_Anomalies_375m_Day(hidden),MODIS_Aqua_Thermal_Anomalies_Night(hidden),MODIS_Aqua_Thermal_Anomalies_Day(hidden),VIIRS_NOAA20_Thermal_Anomalies_375m_Night(hidden),VIIRS_NOAA20_Thermal_Anomalies_375m_Day(hidden),MODIS_Terra_Thermal_Anomalies_Night,MODIS_Terra_Thermal_Anomalies_Day,Reference_Labels_15m,Reference_Features_15m,Coastlines_15m(hidden),VIIRS_NOAA20_CorrectedReflectance_TrueColor(hidden),VIIRS_SNPP_CorrectedReflectance_TrueColor(hidden),MODIS_Aqua_CorrectedReflectance_TrueColor(hidden),MODIS_Terra_CorrectedReflectance_TrueColor&lg=true&t=2016-03-28-T00%3A00%3A00Z

Demo instance should reflect latest shortly.

minniewong · 2021-06-23T19:44:25Z

I pulled the latest, but the app still breaks when I change to Arctic projection using the 2016 Alaska volcano event link above

edplato

In progress of reviewing. I have made a few comments so far - they aren't all specifically tied to the code line they're commented on but I just tried to pick relevant files to attach comments on.

doc/url_parameters.md

edplato · 2021-06-23T21:16:19Z

web/js/components/sidebar/event-icon.js

@@ -0,0 +1,27 @@
+import React from 'react';


I noticed a hanging tooltip related to closely clustered event icons on the map - Inyo Creek Fire is a good example of closely clustered events. After clicking on an event, hovering, and clicking over to another the tooltip becomes sticky to the mouse cursor and doesn't get removed. This is seen in Windows Chrome.

Hmmmm I am not seeing this in Chrome or Firefox on mac. If this happens consistently can you share a video screen capture of what you're doing to make this happen?

HangingTooltip.mp4

I think it's the clicking of another event marker when the tooltip is open.

Cool thanks for the capture, I will keep trying to reproduce this one. All the other stuff should be fixed now

Still no luck reproducing this one in any browser on Mac... any idea what might be happening? As soon as I move the cursor off of any event, the tooltip disappears for me. If I hover over an event and zoom in, the tooltip will stay in place and get disconnected from the event visually but, as soon as I move the mouse it's gone again.

I was just testing UAT out on my Chrome Android mobile and got tooltips stuck as well. It may be from my fast double tapping or double clicking that's causing this. Not quite sure - I can't find what the issue is from poking around, but here is the hanging tooltip in the DOM - they stack up if there are a few of them:

While trying to debug this, I was also able to get the tooltips stuck in the upper left:

I am pushing a change which tweaks the show/hide delay in an attempt to fix this and deploying it to UAT as well so it can be testing on mobile. I still can't reproduce so let me know if this changes things at all. I suspect the tooltips aren't coded to handle having their target move other than due to a viewport scroll event but I haven't gone so far as to dig into their code yet.

If this fix doesn't work let me know if you think we should switch back to the HTML title attribute tooltip based on how significant or likely to occur you think this issue actually is. Possible cons of the title attribute: it takes a long time to show and will likely not be noticed by most users.

I'm still getting this issue in mobile like before - single tap on an event icon on the map and the tooltip doesn't get removed. For desktop, it seems to require a double click on the event icon on the map for the issue to trigger then most of the tooltips display over the event icon and also up in the upper left corner (like above image) after click, so two tooltips for the event icon in that case.

This new tooltip looks a lot better than the title, so it'd be nice to get it working.

Looking around, a lot of stack overflow/github issues reference tooltips not being removed in Bootstrap, so I could see this being a Popper issue related to that Reactstrap component. Only other thing I can think of is to add a unique class to the map marker EventIcon and/or parent in order to remove every map marker EventIcon during remove() in event-markers.js.

I'm still getting this issue in mobile like before - single tap on an event icon on the map and the tooltip doesn't get removed.

I still don't ever see this using Chrome on iOS. When I tap an icon the tooltip flashes briefly before the map zooms into the event icon and the tooltip is no longer visible.

For desktop, it seems to require a double click on the event icon on the map for the issue to trigger then most of the tooltips display over the event icon and also up in the upper left corner (like above image) after click, so two tooltips for the event icon in that case.

I do see the "bonus" tooltip in the corner on a double click but both are immediately removed as soon as I move the mouse.

Only other thing I can think of is to add a unique class to the map marker EventIcon and/or parent in order to remove every map marker EventIcon during remove() in event-markers.js.

Not sure I follow... every map marker overlay does get removed when remove() is called which only happens if one of the four conditions in componendDidUpdate is met: finishedLoading || projChange || animationFinished || selectedEventChanged. But that doesn't target tooltips and, if it did it wouldn't help remove them when mousing away from the <EventIcon />

Yeah, it doesn't target tooltips. That is a suggested method to add the code to target tooltips.

web/js/modules/natural-events/util.js

web/js/location.js

web/js/containers/sidebar/sidebar.js

web/js/map/natural-events/event-markers.js

web/css/events.css

edplato · 2021-06-24T17:58:23Z

Use: localhost arctic events link
Select fire event from sidebar, while it's zooming quickly switch to Antarctic projection
Hover between sidebar and map - see console error (img below)
See 0 events shown when there should be some icebergs shown

edplato · 2021-06-24T18:00:11Z

I think this may have been mentioned outside the PR, but mobile events have a white circle background that is visible. It looks like it's dot.svg causing the issue.

edplato · 2021-06-24T18:02:16Z

When a selected event is unselected from the sidebar by clicking on it, the sidebar white highlight is removed, but the selected scaled size event icon remains on the map (.marker-selected class not removed).

jasontk19 · 2021-06-24T18:30:36Z

Last two style related comments should be fixed by latest push

jasontk19 · 2021-06-25T12:47:45Z

Use: localhost arctic events link

Select fire event from sidebar, while it's zooming quickly switch to Antarctic projection

Hover between sidebar and map - see console error (img below)

See 0 events shown when there should be some icebergs shown

This is fixed now. I've disabled switching projections while the map is animating to an event. Basically, while waiting for the map animation promise to return, you are switching projections which causes the layers for a given category to change (wildfire layers not configured for arctic projection for example). Then when it tries to load the appropriate layers, they aren't there.

Since I can't think of a good reason why someone would need to rapidly change the projection while they just selected an event so I figured they can wait a second or two for the animation to complete before doing so.

Benjaki2 · 2021-06-25T15:08:37Z

It appears that when you have an event with an event track present and you deselect the event by clicking the same event in the event list, the event's track stays on the map.

jasontk19 · 2021-06-25T15:11:42Z

It appears that when you have an event with an event track present and you deselect the event by clicking the same event in the event list, the event's track stays on the map.

This is also how it works in prod. If we want to change this behavior I suggest we bump it out to a new ticket.

Benjaki2 · 2021-06-25T15:14:21Z

Something to consider talking to EONET about would be a "default" event date flag... So you can know a "main" date to base an event that is moving. For example, hurricanes that cause major damage in a certain location should probably show up in that location, instead of up in the north where they end. (Not for this release*)

Benjaki2 · 2021-06-25T15:15:58Z

It appears that when you have an event with an event track present and you deselect the event by clicking the same event in the event list, the event's track stays on the map.

This is also how it works in prod. If we want to change this behavior I suggest we bump it out to a new ticket.

Yeah. It's definitely a bug, I will create a new ticket.

edplato · 2021-06-25T15:16:19Z

Use: localhost arctic events link

Select fire event from sidebar, while it's zooming quickly switch to Antarctic projection

Hover between sidebar and map - see console error (img below)

See 0 events shown when there should be some icebergs shown

This is fixed now. I've disabled switching projections while the map is animating to an event. Basically, while waiting for the map animation promise to return, you are switching projections which causes the layers for a given category to change (wildfire layers not configured for arctic projection for example). Then when it tries to load the appropriate layers, they aren't there.

Since I can't think of a good reason why someone would need to rapidly change the projection while they just selected an event so I figured they can wait a second or two for the animation to complete before doing so.

I think the disable projection change is a good fix to prevent that. I noticed a possible related issue now where after getting events loaded/listed in arctic. I put in a long date range (2000 to 2021) filter in arctic/antarctic is returning a short list of events (35 in this link):
http:https://localhost:3000/?v=-4968451.382328654,-3431183.009083402,4968451.382328654,3431183.009083402&p=arctic&e=true&efs=true&efd=2000-12-25,2021-06-25&efc=dustHaze,manmade,seaLakeIce,severeStorms,snow,volcanoes,waterColor,wildfires&lg=false&t=2021-06-25-T15%3A03%3A54Z
Changing the filtered date range doesn't seem to change the returned event count.

Then after the events are loaded switch to antarctic and there are 0 events listed.

web/js/components/events/alert-body.js

- update selector names - request events on tab change - use utc start/end date on page load

- filter events from API ( and their geometries) by current proj extent

- simplify numVisible counting in layer-list - remove commented out code in layers/selectors - get all categories from config rather than duplicating on event state

- only request events on tab activate if no eventsData - re-draw tracks whenever eventsData finishes loading - don't conditionally render tracks/markers components (always render and let them determine whether to render tracks and markers)

Co-authored-by: Ed Plato <[email protected]>

- make sure geometries are filtered properly - don't load events when switching to events tab (unless first switch)

jasontk19 self-assigned this Jun 21, 2021

jasontk19 force-pushed the 3403-historical-events branch 2 times, most recently from d9c8ce0 to 64b733a Compare June 22, 2021 15:12

jasontk19 requested review from edplato, Benjaki2 and minniewong June 23, 2021 13:27

jasontk19 marked this pull request as ready for review June 23, 2021 13:27

jasontk19 force-pushed the 3403-historical-events branch from 7c7028a to 0765661 Compare June 23, 2021 14:16

jasontk19 added this to the v3.11.0 milestone Jun 23, 2021

jasontk19 force-pushed the 3403-historical-events branch from 0765661 to 8449904 Compare June 23, 2021 14:55

minniewong requested changes Jun 23, 2021

View reviewed changes

jasontk19 requested a review from minniewong June 23, 2021 19:12

edplato suggested changes Jun 23, 2021

View reviewed changes

edplato reviewed Jun 23, 2021

View reviewed changes

web/css/events.css Show resolved Hide resolved

jasontk19 requested a review from edplato June 24, 2021 14:12

edplato reviewed Jun 25, 2021

View reviewed changes

web/js/components/events/alert-body.js Show resolved Hide resolved

jasontk19 and others added 27 commits July 6, 2021 13:54

dont zoom to events outside proj extent

459f883

e2e test fixes

a21f228

- update selector names - request events on tab change - use utc start/end date on page load

event extent filtering tweaks

d8f8ab1

- filter events from API ( and their geometries) by current proj extent

turn on MODIS Terra CR for some event types

2221a4b

various tweaks

43655e5

- simplify numVisible counting in layer-list - remove commented out code in layers/selectors - get all categories from config rather than duplicating on event state

update url params doc

9bf1220

use initialDate for consistent result, log dates in failing test

5b3a7bb

fix broken test (invalid date in FF)

802cab4

handle polygon coords when filtering

00b4204

handle polygons all places coords in extent check

61d59ed

fix url params docs

d7c364a

don't show efc param when set to default value

acbf553

revert style size changes, fix event deselection

89c93f0

prevent changing prev while map is animatting to event

7cf7923

tweak show/hide delay

9a4a34a

event modal verbiage updates

148655f

unit tests for getEventsRequestURL

08a8609

selected event z-index on top

876de4a

Update web/js/components/util/switch.js

b5b7b34

Co-authored-by: Ed Plato <[email protected]>

Update web/js/components/events/alert-body.js

4c5d67d

Co-authored-by: Ed Plato <[email protected]>

fix lint error caused by github commit

5a1b275

fix loading and filtering issues

0bd61bb

- make sure geometries are filtered properly - don't load events when switching to events tab (unless first switch)

update marker selector

840491d

prevent no categoryLayers traversal, add antarctic wildfires config

9462eae

hide icon tooltips on mobile

ff25a21

escape apostrophe

45a145c

jasontk19 force-pushed the 3403-historical-events branch from dfe064d to 45a145c Compare July 6, 2021 20:01

jasontk19 merged commit 556501b into develop Jul 7, 2021

jasontk19 deleted the 3403-historical-events branch July 7, 2021 15:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Historical events #3558

Historical events #3558

jasontk19 commented Jun 21, 2021 •

edited

Loading

minniewong left a comment •

edited

Loading

jasontk19 commented Jun 23, 2021

minniewong commented Jun 23, 2021 •

edited

Loading

jasontk19 commented Jun 23, 2021

minniewong commented Jun 23, 2021 •

edited

Loading

edplato left a comment

edplato Jun 23, 2021

jasontk19 Jun 24, 2021

edplato Jun 24, 2021

jasontk19 Jun 24, 2021

jasontk19 Jun 24, 2021

edplato Jun 24, 2021

jasontk19 Jun 25, 2021

edplato Jun 25, 2021

jasontk19 Jun 25, 2021

edplato Jun 25, 2021

edplato commented Jun 24, 2021

edplato commented Jun 24, 2021

edplato commented Jun 24, 2021

jasontk19 commented Jun 24, 2021

jasontk19 commented Jun 25, 2021 •

edited

Loading

Benjaki2 commented Jun 25, 2021

jasontk19 commented Jun 25, 2021

Benjaki2 commented Jun 25, 2021

Benjaki2 commented Jun 25, 2021

edplato commented Jun 25, 2021

Historical events #3558

Historical events #3558

Conversation

jasontk19 commented Jun 21, 2021 • edited Loading

Description

TODO

Summary of Changes

Additional Notes

How To Test

minniewong left a comment • edited Loading

Choose a reason for hiding this comment

jasontk19 commented Jun 23, 2021

minniewong commented Jun 23, 2021 • edited Loading

jasontk19 commented Jun 23, 2021

minniewong commented Jun 23, 2021 • edited Loading

edplato left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

edplato commented Jun 24, 2021

edplato commented Jun 24, 2021

edplato commented Jun 24, 2021

jasontk19 commented Jun 24, 2021

jasontk19 commented Jun 25, 2021 • edited Loading

Benjaki2 commented Jun 25, 2021

jasontk19 commented Jun 25, 2021

Benjaki2 commented Jun 25, 2021

Benjaki2 commented Jun 25, 2021

edplato commented Jun 25, 2021

jasontk19 commented Jun 21, 2021 •

edited

Loading

minniewong left a comment •

edited

Loading

minniewong commented Jun 23, 2021 •

edited

Loading

minniewong commented Jun 23, 2021 •

edited

Loading

jasontk19 commented Jun 25, 2021 •

edited

Loading