Merge pull request #410 from NASA-IMPACT/develop

Version 1.5.0

Author: olafveerman

app/assets/graphics/content/AMIS_EW_synthesis_202008.jpg

@@ -12,6 +12,7 @@ import slowdown from './layer-slowdown';
 import waterChlorophyll from './layer-water-chlorophyll';
 import waterSpm from './layer-water-spm';
 import agriculture from './layer-agriculture';
+import agTogo from './layer-togo-ag';
 
 const layers = [
   no2,
@@ -25,7 +26,8 @@ const layers = [
   slowdown,
   waterChlorophyll,
   waterSpm,
-  agriculture
+  agriculture,
+  agTogo
 ];
 
 export default layers;
@@ -37,7 +39,8 @@ const layersBySpotlight = {
   la: ['no2', 'no2-diff', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs', 'agriculture', 'slowdown', 'detection-ship'],
   sf: ['no2', 'no2-diff', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs', 'agriculture', 'slowdown', 'detection-ship', 'water-chlorophyll', 'water-spm'],
   tk: ['no2', 'no2-diff', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs'],
-  ny: ['no2', 'no2-diff', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs', 'slowdown', 'detection-ship', 'water-chlorophyll', 'water-spm']
+  ny: ['no2', 'no2-diff', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs', 'slowdown', 'detection-ship', 'water-chlorophyll', 'water-spm'],
+  togo: ['togo-ag']
 };
 
 const layerOverridesBySpotlight = {

app/assets/scripts/components/common/layers/index.js

@@ -13,7 +13,7 @@ export default {
   source: {
     type: 'raster',
     tiles: [
-      `${config.api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/OMNO2d_HRMDifference/OMI_trno2_0.10x0.10_{date}_Col3_V4.nc.tif&resampling_method=bilinear&bidx=1&rescale=-3e15%2C3e15&color_map=rdbu_r3`
+      `${config.api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/OMNO2d_HRMDifference/OMI_trno2_0.10x0.10_{date}_Col3_V4.nc.tif&resampling_method=bilinear&bidx=1&rescale=-3e15%2C3e15&color_map=rdbu_r`
     ]
   },
   exclusiveWith: ['co2', 'co2-diff', 'gibs-population', 'car-count', 'nightlights-viirs', 'nightlights-hd', 'detection-ship', 'detection-multi', 'water-chlorophyll', 'water-spm', 'no2'],

app/assets/scripts/components/common/layers/layer-no2-diff.js

@@ -0,0 +1,37 @@
+
+import config from '../../../config';
+
+import { indicatorGroupColors } from '../../../styles/theme/theme.js';
+
+export default {
+  id: 'togo-ag',
+  name: 'Agriculture',
+  type: 'raster',
+  source: {
+    type: 'raster',
+    tiles: [
+      `${config.api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/Togo/togo_cropland_v7-1_cog_v2.tif&resampling_method=bilinear&bidx=1&rescale=0%2C1&color_map=inferno`
+    ]
+  },
+  enabled: true,
+  exclusiveWith: [],
+  swatch: indicatorGroupColors.agriculture,
+  legend: {
+    type: 'gradient',
+    min: 'low',
+    max: 'high',
+    stops: [
+      '#000000',
+      '#1a0b40',
+      '#4b0c6b',
+      '#791c6d',
+      '#a42c60',
+      '#cf4446',
+      '#ed6825',
+      '#fb9b06',
+      '#f6d13c',
+      '#fbfda2'
+    ]
+  },
+  info: 'Dark purple colors indicate lower probability of cropland while lighter yellow colors indicate higher probability of cropland within each pixel.'
+};

app/assets/scripts/components/common/layers/layer-togo-ag.js

@@ -38,7 +38,7 @@ class SummaryExpandable extends Component {
     super(props);
 
     this.state = {
-      isExpanded: false
+      isExpanded: props.initialExpanded
     };
   }
 
@@ -63,7 +63,8 @@ class SummaryExpandable extends Component {
 
 SummaryExpandable.propTypes = {
   className: T.string,
-  children: T.node
+  children: T.node,
+  initialExpanded: T.bool
 };
 
 export default SummaryExpandable;

app/assets/scripts/components/common/summary-expandable.js

@@ -11,9 +11,9 @@ import media from '../../styles/utils/media-queries';
 import { glsp } from '../../styles/utils/theme-values';
 import Heading from '../../styles/type/heading';
 import MediaImage from '../../styles/media-image';
-// import config from '../../config';
+import config from '../../config';
 
-// const { baseUrl } = config;
+const { baseUrl } = config;
 const LeadFold = styled(Fold)`
   padding-bottom: 0;
 
@@ -361,13 +361,13 @@ class AgLongForm extends React.Component {
                 </p>
               </Prose>
             </FoldDetails>
-            {/* <MediaImage
-              src={`${baseUrl}/assets/graphics/content/cropmonitor-july.png`}
-              alt='Crop Monitor for AMIS July'
+            <MediaImage
+              src={`${baseUrl}/assets/graphics/content/AMIS_EW_synthesis_202008.jpg`}
+              alt='Crop Monitor for AMIS August'
             >
-              Crop Monitor for AMIS and Early Warning July synthesis map. Image
+              Crop Monitor for AMIS and Early Warning August synthesis map. Image
               Credit: GEOGLAM Crop Monitor
-            </MediaImage> */}
+            </MediaImage>
           </Gridder>
         </InterpretDataFold>
 

app/assets/scripts/components/indicators/indicator-agriculture.js

@@ -104,7 +104,19 @@ class SpotlightAreasSingle extends React.Component {
 
     // Set query state definition for url state storing.
     const common = getCommonQsState(props);
-    common.layers.default = 'nightlights-hd';
+
+    switch (props.match.params.spotlightId) {
+      case 'togo':
+        common.layers.default = 'togo-ag';
+        break;
+      case 'wble':
+        common.layers.default = 'water-wq-gl-chl';
+        break;
+      default:
+        common.layers.default = 'nightlights-hd';
+        break;
+    }
+
     this.qsState = new QsState(common);
 
     // The active layers can only be enabled once the map loads. The toggle

app/assets/scripts/components/spotlight/single/index.js

@@ -215,7 +215,7 @@ class SecPanel extends React.Component {
         }
         bodyContent={
           <BodyScroll>
-            {summary && <SummaryExpandable>{summary}</SummaryExpandable>}
+            {summary && <SummaryExpandable initialExpanded={!groups.length}>{summary}</SummaryExpandable>}
 
             <Accordion allowMultiple initialState={[true]}>
               {({ checkExpanded, setExpanded }) =>

app/assets/scripts/components/spotlight/single/sec-panel.js

@@ -83,6 +83,25 @@ const summaries = {
       </p>
     </>
   ),
+  togo: (
+    <>
+      <p>
+        The effects of COVID-19 shutdowns in Togo, including many months of curfews, severely limited the ability of hundreds of thousands of the country’s small farmers to produce an adequate food supply, as well as to cultivate formerly robust crops, such as soy and cotton.
+      </p>
+      <p>
+        To help its farmers, the Togolese government used a cropland data map developed by NASA’s food security and agriculture program, known as NASA Harvest, to develop a loan program that would help fund the cost of farming essentials.
+      </p>
+      <p>
+        In the past, farmers eligible for such loans would have been identified using Togo’s census data. However, the existing census only accounts for growers who list their primary occupation as farming. This vastly underestimates the number of informal smallholder growers impacted by the pandemic, who rely on subsistence farming to live. This is where satellite data can help fill in the gaps.
+      </p>
+      <p>
+        When rapid action was needed and mobility across the country was limited due to the COVID-19 outbreak, satellite data offered an effective and rapid way to map the country’s distribution of croplands and characterize the nature of agricultural fields during the pandemic.
+      </p>
+      <p>
+        NASA Harvest developed a national-level, satellite-derived cropland map for Togo at 10-meter resolution within a 10-day timeframe using data from the European Space Agency’s Copernicus Sentinel 2 satellite, the NASA-USGS Landsat satellites, and with data from commercial partner Planet Inc. These data, alongside poverty and census information, rapidly and effectively identified priority areas for the loan program. With the cropland maps, Togolese government officials had trustworthy information on the physical size and geographic location of agricultural lands that census data might have missed.
+      </p>
+    </>
+  ),
   tk: (
     <>
       <p>

app/assets/scripts/components/spotlight/single/summaries.js

@@ -1,6 +1,6 @@
 {
   "name": "covid-dashboard",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "Frontend application for the Covid Dashboard",
   "repository": {
     "type": "git",