WW-2655: OPERA Surface Water Extent story (#4921)

* Initial steps

* update story steps

* hide surface water extent story in tour story box

* update story text

* Fix typos and add correct link for Step 5

---------

Co-authored-by: ryanweiler92 <[email protected]>

config/default/common/config/metadata/stories/surface_water_extent/step001.md

@@ -0,0 +1 @@
+Near-global surface water extent at 30 meter resolution is available in Worldview through the Observational Products for End-Users from Remote Sensing Analysis (OPERA) project. The Level-3 product maps surface water every few days. The layer has 5 classifications: Not Water, Open Water, Partial Surface Water, Snow/Ice, and Cloud. The input dataset is the Harmonized Landsat Sentinel-2 (HLS) dataset, and currently uses data from Landsat 8, Sentinel-2A and Sentinel-2B.

config/default/common/config/metadata/stories/surface_water_extent/step002.md

@@ -0,0 +1 @@
+The Laguna de Aculeo is a two hours' drive from Santiago, Chile and was a long-time popular summer vacationing spot to go boating, swimming, and water skiing. A combination of nearby population growth, purchasing of water rights for agriculture, and drought caused the shallow lake to go dry in 2018. This true-color reflectance image from 18 May 2023 from the European Space Agency's (ESA) Sentinel-2A and -2B satellites show a dry lake bed in shades of brown in the center of the map.

config/default/common/config/metadata/stories/surface_water_extent/step003.md

@@ -0,0 +1 @@
+An intense winter storm fueled by an atmospheric river in late-August 2023 caused the lake to partially refill. The image on the left shows the dried lake bed on 18 May 2023, and the image on the right shows the partially filled lake on 15 September 2023. Swipe the bar back and forth to see the lake fill and turn greenish blue on the right "B" side of the map.

config/default/common/config/metadata/stories/surface_water_extent/step004.md

@@ -0,0 +1,3 @@
+The OPERA surface water extent layer helps to highlight the refilled lake in shades of blue, indicating open water and partial surface water. The layer is designed to improve our understanding of the spatial and temporal variations of land inundation by surface water. It is currently unclear how long this lake will remain filled, but as of 19 December 2023 in the right image, the lake appears to be at a similar water level as the left image from 15 September.
+
+Learn more at Earth Observatory's [Water Returns to Laguna de Acuelo](https://earthobservatory.nasa.gov/images/151836/water-returns-to-laguna-de-aculeo)

config/default/common/config/metadata/stories/surface_water_extent/step005.md

@@ -0,0 +1 @@
+The Indus River Valley receives heavy monsoon rains each summer which contribute to the appearance of extensive surface water. These false-color reflectance images from Landsat 8 show water in dark blues. The left image is from 3 May 2023, before the monsoon rains, and the right side is from 7 August 2023. Swiping the bar back and forth reveals the extent of floodwaters along the riverbanks and in the surrounding region.

config/default/common/config/metadata/stories/surface_water_extent/step006.md

@@ -0,0 +1 @@
+The OPERA surface water extent layer shows the floodwaters very clearly in shades of dark and light blue. It highlights how much surface water there is beyond the meandering river banks and the water covering the surrounding region.

config/default/common/config/metadata/stories/surface_water_extent/step007.md

@@ -0,0 +1,2 @@
+The Kakhovka Dam, along the Dnieper River in Ukraine was breached on 6 June 2023. The left image is from 5 June 2023, and shows the filled Kakhovka Reservoir in the right portion of the map. The right image is from 5 July 2023 and shows the drained reservoir. Turn on and off the OPERA surface water extent layer to see that the reservoir is no longer full of water, but is mostly brown, exposed ground.
+

config/default/common/config/metadata/stories/surface_water_extent/step008.md

@@ -0,0 +1 @@
+Zooming in closer, it is evident that the dam was breached. Swipe the bar back and forth to compare the amount of water in the reservoir between 5 June 2023 and 4 August 2023. The right image shows light brown, exposed land of the drained reservoir.

config/default/common/config/metadata/stories/surface_water_extent/step009.md

@@ -0,0 +1 @@
+Tulare Lake in San Joaquin Valley, California, was once the largest freshwater lake west of the Mississippi River but feeder rivers were diverted for irrigation and municipal water use. Since the 1920s, the dry lake bed has been used to grow crops like almonds and tomatoes. The right "B" side shows how heavy rains caused the area to flood and re-fill.

config/default/common/config/metadata/stories/surface_water_extent/step010.md

@@ -0,0 +1,2 @@
+Storm Ciarán hit northwestern France on 1 November 2023 and moved to Britain and western Europe on 2 November causing heavy rains and strong winds. This comparison of northwestern Tuscany shows 2 October 2023 on the "A" left side, and 3 November on the "B" right side. The "B" side shows flooded agricultural fields near the river banks in dark and light blue.
+[Read more at Earth Observatory...](https://earthobservatory.nasa.gov/images/152051/flooding-in-tuscany)

config/default/common/config/wv.json/stories/default/surface_water_extent.json

@@ -0,0 +1,114 @@
+{
+ "stories": {
+ "surface_water_extent": {
+ "id": "surface_water_extent",
+ "type": "default",
+ "title": "Surface Water Extent",
+ "description": "Viewing near-global surface water extent at 30 meter resolution is available in Worldview!",
+ "backgroundImage": "",
+ "backgroundImageHover": "",
+ "readMoreLinks": [
+ {
+ "title": "Observational Products for End-Users from Remote Sensing Analysis",
+ "link": "https://www.jpl.nasa.gov/go/opera"
+ },
+ {
+ "title": "OPERA - DSWx Product Suite",
+ "link": "https://www.jpl.nasa.gov/go/opera/products/dswx-product-suite"
+ }
+ ],
+ "steps": [
+ {
+ "id": "001",
+ "description": "step001.html",
+ "transition": {
+ "element": "",
+ "action": ""
+ },
+ "stepLink": "v=-174.25840338686484,-75.27671304270082,141.53238355885279,76.68146944943469&l=Coastlines_15m,Reference_Features_15m,Reference_Labels_15m,OPERA_L3_Dynamic_Surface_Water_Extent-HLS_Provisional(disabled=5),HLS_L30_Nadir_BRDF_Adjusted_Reflectance(hidden),HLS_S30_Nadir_BRDF_Adjusted_Reflectance(hidden),Land_Water_Map&lg=true&t=2023-09-16-T19%3A28%3A37Z"
+ },
+ {
+ "id": "002",
+ "description": "step002.html",
+ "transition": {
+ "element": "",
+ "action": ""
+ },
+ "stepLink": "v=-71.08920797480265,-33.94007931277668,-70.7352894090859,-33.76590273267728&l=Reference_Labels_15m,Coastlines_15m,HLS_S30_Nadir_BRDF_Adjusted_Reflectance,Land_Water_Map&lg=truet&t=2023-05-18-T02%3A00%3A00Z"
+ },
+ {
+ "id": "003",
+ "description": "step003.html",
+ "transition": {
+ "element": "",
+ "action": ""
+ },
+ "stepLink": "v=-71.07486930852178,-33.93245949860628,-70.75488664634847,-33.778484190323425&l=Reference_Labels_15m,Coastlines_15m,HLS_L30_Nadir_BRDF_Adjusted_Reflectance,HLS_S30_Nadir_BRDF_Adjusted_Reflectance(hidden)&lg=true&l1=Reference_Labels_15m,Coastlines_15m,HLS_L30_Nadir_BRDF_Adjusted_Reflectance,HLS_S30_Nadir_BRDF_Adjusted_Reflectance(hidden)&lg1=true&ca=false&t=2023-05-18-T02%3A00%3A00Z&t1=2023-09-15-T13%3A50%3A15Z"
+ },
+ {
+ "id": "004",
+ "description": "step004.html",
+ "transition": {
+ "element": "",
+ "action": ""
+ },
+ "stepLink": "v=-71.05340019654669,-33.914504013845885,-70.78826085072096,-33.786919249614755&l=Reference_Labels_15m,Coastlines_15m,OPERA_L3_Dynamic_Surface_Water_Extent-HLS_Provisional(disabled=5-3-0-4),HLS_L30_Nadir_BRDF_Adjusted_Reflectance(hidden),HLS_S30_Nadir_BRDF_Adjusted_Reflectance&lg=true&l1=Reference_Labels_15m,Coastlines_15m,OPERA_L3_Dynamic_Surface_Water_Extent-HLS_Provisional(disabled=5-0-3-4),HLS_L30_Nadir_BRDF_Adjusted_Reflectance(hidden),HLS_S30_Nadir_BRDF_Adjusted_Reflectance&lg1=true&ca=false&cv=53&t=2023-09-15-T02%3A00%3A00Z&t1=2023-12-19-T19%3A06%3A41Z"
+ },
+ {
+ "id": "005",
+ "description": "step005.html",
+ "transition": {
+ "element": "",
+ "action": ""
+ },
+ "stepLink": "http:https://localhost:3000/?v=66.26097333885345,26.79208364911574,70.01383041589206,28.63900515761756&l=Reference_Labels_15m,Reference_Features_15m(hidden),Coastlines_15m,HLS_Customizable_Landsat(bandCombo=%7B%22r%22%3A%22B07%22;%22g%22%3A%22B05%22;%22b%22%3A%22B04%22%7D),Land_Water_Map&lg=true&l1=Reference_Labels_15m,Reference_Features_15m(hidden),Coastlines_15m,HLS_Customizable_Landsat(bandCombo=%7B%22r%22%3A%22B07%22;%22g%22%3A%22B05%22;%22b%22%3A%22B04%22%7D),Land_Water_Map&lg1=true&ca=true&t=2023-05-03-T13%3A24%3A03Z&t1=2023-08-07-T05%3A24%3A03Z"
+ },
+ {
+ "id": "006",
+ "description": "step006.html",
+ "transition": {
+ "element": "",
+ "action": ""
+ },
+ "stepLink": "v=66.26097333885345,26.79208364911574,70.01383041589206,28.63900515761756&l=Reference_Labels_15m,Reference_Features_15m(hidden),Coastlines_15m,OPERA_L3_Dynamic_Surface_Water_Extent-HLS_Provisional(disabled=5-4-0-3),HLS_L30_Nadir_BRDF_Adjusted_Reflectance&lg=true&l1=Reference_Labels_15m,Reference_Features_15m(hidden),Coastlines_15m,OPERA_L3_Dynamic_Surface_Water_Extent-HLS_Provisional(disabled=5-4-0-3),HLS_L30_Nadir_BRDF_Adjusted_Reflectance,Land_Water_Map&lg1=true&ca=false&t=2023-05-03-T13%3A24%3A03Z&t1=2023-08-07-T05%3A24%3A03Z"
+ },
+ {
+ "id": "007",
+ "description": "step007.html",
+ "transition": {
+ "element": "",
+ "action": ""
+ },
+ "stepLink": "v=30.53197246393441,45.73511857652907,37.0819472324028,48.88695929617898&l=Reference_Labels_15m(hidden),Reference_Features_15m(hidden),Coastlines_15m,OPERA_L3_Dynamic_Surface_Water_Extent-HLS_Provisional(disabled=5-0),HLS_L30_Nadir_BRDF_Adjusted_Reflectance(hidden),HLS_S30_Nadir_BRDF_Adjusted_Reflectance&lg=true&l1=Reference_Labels_15m(hidden),Reference_Features_15m(hidden),Coastlines_15m,OPERA_L3_Dynamic_Surface_Water_Extent-HLS_Provisional(disabled=5-0),HLS_L30_Nadir_BRDF_Adjusted_Reflectance(hidden),HLS_S30_Nadir_BRDF_Adjusted_Reflectance&lg1=true&ca=false&cv=49&s=33.3662,46.7822%2B33.3662,46.7822&t=2023-06-05-T03%3A54%3A43Z&t1=2023-07-05-T07%3A54%3A43Z"
+ },
+ {
+ "id": "008",
+ "description": "step008.html",
+ "transition": {
+ "element": "",
+ "action": ""
+ },
+ "stepLink": "v=33.22962382325344,46.70316794794333,33.49071034396659,46.83165840222557&l=Reference_Labels_15m(hidden),Reference_Features_15m(hidden),Coastlines_15m,OPERA_L3_Dynamic_Surface_Water_Extent-HLS_Provisional(disabled=5-0),HLS_L30_Nadir_BRDF_Adjusted_Reflectance(hidden),HLS_S30_Nadir_BRDF_Adjusted_Reflectance&lg=true&l1=Reference_Labels_15m(hidden),Reference_Features_15m(hidden),Coastlines_15m,OPERA_L3_Dynamic_Surface_Water_Extent-HLS_Provisional(disabled=5-0),HLS_L30_Nadir_BRDF_Adjusted_Reflectance,HLS_S30_Nadir_BRDF_Adjusted_Reflectance&lg1=true&ca=true&cv=50&t=2023-06-05-T03%3A54%3A43Z&t1=2023-08-04-T07%3A54%3A43Z"
+ },
+ {
+ "id": "009",
+ "description": "step009.html",
+ "transition": {
+ "element": "",
+ "action": ""
+ },
+ "stepLink": "v=-120.85451125731684,35.39445775071759,-118.54001784177758,36.53350663605869&l=Reference_Labels_15m,Reference_Features_15m,Coastlines_15m,OPERA_L3_Dynamic_Surface_Water_Extent-HLS_Provisional(hidden,disabled=5),HLS_S30_Nadir_BRDF_Adjusted_Reflectance,HLS_L30_Nadir_BRDF_Adjusted_Reflectance,Land_Water_Map&lg=true&l1=Reference_Labels_15m,Reference_Features_15m,Coastlines_15m,OPERA_L3_Dynamic_Surface_Water_Extent-HLS_Provisional(disabled=0-4),HLS_L30_Nadir_BRDF_Adjusted_Reflectance,HLS_S30_Nadir_BRDF_Adjusted_Reflectance,Land_Water_Map&lg1=true&ca=false&cm=opacity&t=2023-04-30-T15%3A35%3A22Z&t1=2023-04-30-T09%3A35%3A22Z"
+ },
+ {
+ "id": "010",
+ "description": "step010.html",
+ "transition": {
+ "element": "",
+ "action": ""
+ },
+ "stepLink": "v=9.858292854006226,43.29704344520309,11.057128062815007,43.8870351466844&l=Reference_Labels_15m(hidden),Reference_Features_15m(hidden),Coastlines_15m,OPERA_L3_Dynamic_Surface_Water_Extent-HLS_Provisional(disabled=5-4-0-3),HLS_L30_Nadir_BRDF_Adjusted_Reflectance,HLS_S30_Nadir_BRDF_Adjusted_Reflectance,Land_Water_Map&lg=true&l1=Reference_Labels_15m(hidden),Reference_Features_15m(hidden),Coastlines_15m,OPERA_L3_Dynamic_Surface_Water_Extent-HLS_Provisional(disabled=5-0-3-4),HLS_L30_Nadir_BRDF_Adjusted_Reflectance,HLS_S30_Nadir_BRDF_Adjusted_Reflectance(hidden),Land_Water_Map&lg1=true&ca=false&t=2023-10-02-T19%3A45%3A11Z&t1=2023-11-03-T19%3A45%3A11Z"
+ }
+ ]
+ }
+ }
+}

config/default/common/config/wv.json/storyOrder.json

@@ -1,5 +1,6 @@
 {
  "storyOrder": [
+ "surface_water_extent",
  "atmospheric_rivers",
  "flood-product",
  "black_marble_night_lights",

web/js/components/tour/tour-box.js

@@ -53,8 +53,8 @@ class TourBox extends React.Component {
  } = this.props;
  const { styles } = this.state;
  let floatBox = '';
- if (storyOrder.length - (index + 1) === 0
- || storyOrder.length - (index + 2) === 0) {
+ if (storyOrder.length - (index + 2) === 0
+ || storyOrder.length - (index + 3) === 0) {
  floatBox = ' tour-box-float';
  }
  return (

web/js/components/tour/tour-boxes.js

@@ -5,10 +5,12 @@ import TourBox from './tour-box';
 
 function TourBoxes(props) {
  const { stories, storyOrder, selectTour } = props;
+ // when we remove this we need to update tour-box.js render function to index+1 && index+2
+ const activeStoryOrder = storyOrder.filter((storyId) => storyId !== 'surface_water_extent');
  return (
  <div className="tour-box-container">
  <div className="tour-box-row">
- {storyOrder.map((storyId, i) => {
+ {activeStoryOrder.map((storyId, i) => {
  const story = stories[storyId];
  return (
  <TourBox