Merge pull request #276 from NASA-IMPACT/develop

Release version 0.8.0

app/assets/scripts/components/common/data-layers-block.js

@@ -24,7 +24,7 @@ class DataLayersBlock extends React.Component {
     return (
       <PanelBlockLayer>
         <PanelBlockHeader>
-          <PanelBlockTitle>Data</PanelBlockTitle>
+          <PanelBlockTitle>Indicators</PanelBlockTitle>
         </PanelBlockHeader>
         <PanelBlockBody>
           <PanelBlockScroll>

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

@@ -4,8 +4,7 @@ import { indicatorGroupColors } from '../../../styles/theme/theme.js';
 
 export default {
   id: 'co2-diff',
-  name: 'CO₂ Diff',
-  description: '',
+  name: 'Carbon Dioxide - change',
   type: 'raster-timeseries',
   timeUnit: 'day',
   domain: [
@@ -33,5 +32,5 @@ export default {
       '#DD7059'
     ]
   },
-  info: null
+  info: 'This layer shows changes in carbon dioxide (CO₂) levels during coronavirus lockdowns versus previous years. Redder colors indicate increases in CO₂. Bluer colors indicate lower levels of CO₂.'
 };

app/assets/scripts/components/common/layers/layer-co2.js

@@ -6,8 +6,7 @@ import { indicatorGroupColors } from '../../../styles/theme/theme.js';
 
 export default {
   id: 'co2',
-  name: 'CO₂ Mean',
-  description: '',
+  name: 'Carbon Dioxide - avg',
   type: 'raster-timeseries',
   timeUnit: 'day',
   domain: [
@@ -17,7 +16,7 @@ export default {
   source: {
     type: 'raster',
     tiles: [
-      `${config.api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/xco2/xco2_15day_mean.{date}.tif&resampling_method=bilinear&bidx=1&rescale=0.0004%2C0.00042&color_map=reds&color_formula=gamma r {gamma}`
+      `${config.api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/xco2/xco2_15day_mean.{date}.tif&resampling_method=bilinear&bidx=1&rescale=0.000408%2C0.000419&color_map=rdylbu_r&color_formula=gamma r {gamma}`
 
     ]
   },
@@ -31,20 +30,25 @@ export default {
     source: {
       type: 'raster',
       tiles: [
-      `${config.api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/xco2/xco2_15day_base.{date}.tif&resampling_method=bilinear&bidx=1&rescale=0.0004%2C0.00042&color_map=reds&color_formula=gamma r {gamma}`
+      `${config.api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/xco2/xco2_15day_base.{date}.tif&resampling_method=bilinear&bidx=1&rescale=0.000408%2C0.000419&color_map=rdylbu_r&color_formula=gamma r {gamma}`
       ]
     }
   },
 
   swatch: indicatorGroupColors['greenhouse-gas'],
   legend: {
     type: 'gradient-adjustable',
-    min: 'less',
-    max: 'more',
+    min: '< 408 ppm',
+    max: '> 419 ppm',
     stops: [
-      '#FFFFFF',
-      '#FF0000'
+      '#5D4FA2',
+      '#2F75BE',
+      '#6DC7A3',
+      '#D7ED96',
+      '#FFEA9B',
+      '#FA894C',
+      '#B11E4D'
     ]
   },
-  info: null
+  info: 'This layer shows the average background concentration of carbon dioxide (CO₂) in our atmosphere for 2020. Redder colors indicate more CO₂. Whiter colors indicate less CO₂.'
 };

app/assets/scripts/components/common/layers/layer-detection-ship.js

@@ -3,8 +3,7 @@ import { indicatorGroupColors } from '../../../styles/theme/theme';
 
 export default {
   id: 'detection-ship',
-  name: 'Ship Detections',
-  description: 'Ship detections by machine learning',
+  name: 'Shipping',
   type: 'inference-timeseries',
   domain: [
     '2020-03-11'

app/assets/scripts/components/common/layers/layer-nightlights-hd.js

@@ -30,5 +30,5 @@ export default {
       '#f7cf39'
     ]
   },
-  info: 'The High Definition Nightlights dataset is processed to eliminate light sources like moonlight reflectance and other interferences. The darker shades are places with less light while the lighter shades of yellow are areas with more light.'
+  info: 'The High Definition Nightlights dataset is processed to eliminate light sources, including moonlight reflectance and other interferences. Darker colors indicate fewer night lights and less activity. Lighter colors indicate more night lights and more activity.'
 };

app/assets/scripts/components/common/layers/layer-nightlights-viirs.js

@@ -23,5 +23,5 @@ export default {
     max: 'more',
     stops: ['#08041d', '#1f0a46', '#52076c', '#f57c16', '#f7cf39']
   },
-  info: 'The darker purple indicates fewer night lights while the lighter yellow indicates more night lights. Check out the HD dataset below to see a light-corrected version of this dataset.'
+  info: 'Darker colors indicate fewer night lights and less activity. Lighter colors indicate more night lights and more activity. Check out the HD dataset below to see a light-corrected version of this dataset.'
 };

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

@@ -7,7 +7,6 @@ import { indicatorGroupColors } from '../../../styles/theme/theme.js';
 export default {
   id: 'no2',
   name: 'Nitrogen dioxide',
-  description: 'Acute harm due to NO<sub>2</sub> exposure is only likely to arise in occupational settings. Direct exposure to the skin can cause irritations and burns.',
   type: 'raster-timeseries',
   domain: [
     '2019-03-01',
@@ -40,5 +39,5 @@ export default {
       '#050308'
     ]
   },
-  info: 'Darker colors indicate higher nitrogen dioxide (NO₂) levels associated with higher levels of travel and economic activity. Lighter colors indicate lower levels of NO₂ and less activity.'
+  info: 'Darker colors indicate higher nitrogen dioxide (NO₂) levels associated and more activity. Lighter colors indicate lower levels of NO₂ and less activity.'
 };

app/assets/scripts/components/common/layers/layer-water-chlorophyll.js

@@ -29,5 +29,5 @@ export default {
       '#67001F'
     ]
   },
-  info: 'Chlorophyll is an indicator of algae growth. This dataset shows the difference in chlorophyll abundance in 2020 compared to previous years. Redder colors indicate increases in chlorophyll, while bluer colors indicate decreases in chlorophyll. White areas indicate no change.'
+  info: 'Chlorophyll is an indicator of algae growth. Redder colors indicate increases in chlorophyll-a and worse water quality. Bluer colors indicate decreases in chlorophyll-a and improved water quality. White areas indicate no change.'
 };

app/assets/scripts/components/common/layers/layer-water-spm.js

@@ -29,5 +29,5 @@ export default {
       '#67001F'
     ]
   },
-  info: 'Turbidity refers to the amount of sediment or particles suspended in water. For this dataset, darker colors indicate more sediment and murkier water, while lighter colors indicate less sediment and clearer water.'
+  info: 'Turbidity refers to the amount of sediment or particles suspended in water. Darker colors indicate more sediment and murkier water. Lighter colors indicate less sediment and clearer water.'
 };

app/assets/scripts/components/common/mb-map-explore/mb-popover/popover-inner.js

@@ -56,7 +56,10 @@ export default class MBPopoverInner extends React.Component {
   }
 
   componentDidUpdate (prevProps) {
-    if (prevProps.lngLat !== this.props.lngLat) {
+    if (
+      prevProps.lngLat !== this.props.lngLat ||
+      prevProps.content !== this.props.content
+    ) {
       this.preventNextClick = true;
       setTimeout(() => {
         this.preventNextClick = false;

app/assets/scripts/components/common/meta-tags.js

@@ -18,7 +18,7 @@ const MetaTags = ({ title, description, children }) => {
 
       {/* Twitter */}
       <meta name='twitter:card' content='summary' />
-      <meta name='twitter:site' content='' />
+      <meta name='twitter:site' content='@NASAEarthData' />
       <meta name='twitter:title' content={title} />
       {description ? (
         <meta name='twitter:description' content={description} />

app/assets/scripts/components/home/index.js

@@ -275,7 +275,7 @@ const Story = styled.article`
   display: flex;
 `;
 
-const StoryContent = styled.a`
+const StoryContent = styled(Link)`
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
@@ -291,12 +291,6 @@ const StoryCopy = styled.div`
   grid-gap: ${glsp()} 0;
 `;
 
-const StoryTitle = styled.h1`
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-  margin: 0;
-`;
-
 const StoryProse = styled(Prose)`
   display: grid;
   grid-gap: ${glsp()} 0;
@@ -537,9 +531,8 @@ class Home extends React.Component {
                     </IntroStoriesToolbar>
                   </IntroStoriesHeader>
                   <Story>
-                    <StoryContent title='Explore the data' href={currentStory.link}>
+                    <StoryContent title='Explore the data' to={currentStory.link}>
                       <StoryCopy>
-                        <StoryTitle>{currentStory.title}</StoryTitle>
                         <StoryProse>
                           <p>{currentStory.prose}</p>
                         </StoryProse>

app/assets/scripts/components/home/stories/index.js

@@ -1,11 +1,11 @@
 import storyNy from './story-ny.js';
 import storySf from './story-sf.js';
-import storyLa from './story-la.js';
 import storyBe from './story-be.js';
+import storyNyWq from './story-ny-wq.js';
 
 export default [
   storyNy,
   storySf,
-  storyLa,
-  storyBe
+  storyBe,
+  storyNyWq
 ];

app/assets/scripts/components/home/stories/story-be.js

@@ -1,7 +1,6 @@
 export default {
   spotlightId: 'be',
-  title: 'The drop in CO₂ emission',
-  prose: 'Beijing has some indication of reduction in activity based on the drop in CO₂ during lockdown.',
+  prose: 'Global CO₂ concentrations are so large that it is difficult to detect temporary COVID-19-related changes.',
   layers: ['co2-diff'],
   link: '/explore/be'
 };

app/assets/scripts/components/home/stories/story-ny-wq.js

@@ -0,0 +1,6 @@
+export default {
+  spotlightId: 'ny',
+  prose: 'Coronavirus-related shutdowns may affect the amount of algae and sediment in water bodies.',
+  layers: ['water-chlorophyll'],
+  link: '/explore/ny'
+};

app/assets/scripts/components/home/stories/story-ny.js

@@ -1,6 +1,5 @@
 export default {
   spotlightId: 'ny',
-  title: '30% reduction in NO₂',
   prose: 'Air pollution levels in New York City dropped by as much as 30% during COVID-19 lockdowns.',
   layers: ['no2'],
   link: '/explore/ny'

app/assets/scripts/components/home/stories/story-sf.js

@@ -1,7 +1,6 @@
 export default {
   spotlightId: 'sf',
-  title: 'Nightlights',
-  prose: 'While the shelter-in-place mandate was in effect, non-essential businesses were closed and approximately 6.7 million residents in the San Francisco Bay Area were asked to stay home.',
+  prose: 'While the shelter-in-place mandate was in effect, non-essential businesses were closed, and approximately 6.7 million residents in the San Francisco Bay Area were asked to stay home.',
   layers: ['nightlights-hd'],
   link: '/explore/sf'
 };

app/assets/scripts/components/indicators/hub/index.js

@@ -41,23 +41,31 @@ class IndicatorsHub extends React.Component {
           <InpageHeader>
             <InpageHeaderInner>
               <InpageHeadline>
-                <InpageTitle>Indicators</InpageTitle>
+                <InpageTitle>Understanding the Indicators</InpageTitle>
               </InpageHeadline>
             </InpageHeaderInner>
           </InpageHeader>
           <InpageBody>
             <PageConstrainer>
               <HubFold>
-                <InpageHGroup
-                  title='Understanding the Indicators'
-                  dashColor={metadata.color}
-                />
                 <Prose>
                   <p>
-                    Although NASA cannot directly observe COVID-19 from space, we can observe how human actions in response to COVID-19 affect the world around us. We refer to these as indicators.
+                    Although NASA cannot see the novel coronavirus from space,
+                    we can observe how human actions in response to the
+                    coronavirus affect the world around us. We refer to these
+                    as indicators.
+                  </p>
+                  <p>
+                    This dashboard explores key indicators to track and compare
+                    changes over time including: Water quality, nighttime
+                    lights, carbon dioxide (CO2), nitrogen dioxide (NO2), and
+                    ship activity in major ports.
                   </p>
                   <p>
-                    This dashboard explores 10 key indicators -- 4 environmental and 6 economic -- that show how the planet is responding to our changing behavior.
+                    These indicators were chosen based on NASA researchers&apos;
+                    observations and the availability of satellite data to track
+                    human-induced changes of our planet. Click an indicator
+                    below to find out more.
                   </p>
                 </Prose>
               </HubFold>

app/assets/scripts/components/indicators/index.js

@@ -35,13 +35,19 @@
  *
  */
 import no2 from './indicator-no2';
+import co2 from './indicator-co2';
 import bm from './indicator-nightlights';
 import population from './indicator-population';
+import waterQuality from './indicator-water-quality';
+import shipping from './indicator-shipping';
 
 const indicators = [
   bm,
   no2,
-  population
+  co2,
+  population,
+  waterQuality,
+  shipping
 ];
 
 export default indicators;