Merge pull request #347 from NASA-IMPACT/develop

Release 1.1.0

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

@@ -52,16 +52,16 @@ export default class About extends React.Component {
                 </p>
                 <p>
                   This dashboard features data collected and analyzed by NASA.
-                  Information about Earth systems is gathered by a fleet of powerful global Earth-Observing satellites, instruments
+                  Information about Earth systems is gathered by a fleet of powerful global Earth-observing satellites, instruments
                   aboard the International Space Station, from airborne science campaigns, and via ground observations. With this
-                  data we have been able to monitor some of those changes and this is allowing us to track and compare these
+                  data we have been able to monitor some of those changes, and this is allowing us to track and compare these
                   changes over time.
                 </p>
                 <p>
-                  NASA will further expand the impact of the data sets presented in this dashboard in collaboration with
-                  European Space Agency (ESA) and the Japan Aerospace Exploration Agency (JAXA), who also have created their own
+                  NASA will further expand the analysis of the data sets presented here in collaboration with the
+                  European Space Agency (ESA) and the Japan Aerospace Exploration Agency (JAXA). ESA and JAXA have created their own
                   online data portals to provide an even richer picture of what is happening on our home planet during this time of
-                  world crisis by developing a fourth dashboard that will combine the unique data of each agency for more comparisons
+                  crisis. A fourth, tri-agency dashboard will combine the unique data of each agency for more comparisons
                   and deeper understandings now and over time.
                 </p>
                 <p>

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

@@ -52,14 +52,14 @@ const layerOverridesBySpotlight = {
       }),
     'detection-ship': (l, spotlightId) =>
       handleInferenceTimeseries(l, spotlightId, {
-        domain: ['2020-01-22', '2020-03-15', '2020-03-18', '2020-03-21', '2020-03-22', '2020-04-23', '2020-04-24']
+        domain: ['2020-01-22', '2020-02-02', '2020-02-03', '2020-02-27', '2020-02-29', '2020-03-03', '2020-03-08', '2020-03-15', '2020-03-21', '2020-03-22', '2020-03-27', '2020-04-23', '2020-04-24']
       })
   },
   sf: {
     'nightlights-viirs': handleNightlightsViirs,
     'detection-ship': (l, spotlightId) =>
       handleInferenceTimeseries(l, spotlightId, {
-        domain: ['2020-03-10', '2020-03-11', '2020-03-15', '2020-03-18', '2020-04-21']
+        domain: ['2020-01-22', '2020-02-03', '2020-02-27', '2020-02-29', '2020-03-08', '2020-03-10', '2020-03-11', '2020-03-15', '2020-03-27', '2020-04-21']
       }),
     'water-chlorophyll': (l, spotlightId) => {
       return {
@@ -97,7 +97,7 @@ const layerOverridesBySpotlight = {
     },
     'detection-ship': (l, spotlightId) =>
       handleInferenceTimeseries(l, spotlightId, {
-        domain: ['2020-01-20', '2020-01-21', '2020-03-15', '2020-03-18', '2020-03-22']
+        domain: ['2020-01-20', '2020-01-21', '2020-01-22', '2020-02-02', '2020-02-03', '2020-02-29', '2020-03-03', '2020-03-08', '2020-03-18', '2020-03-22']
       }),
     'water-spm': (l, spotlightId) => {
       return {

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

@@ -22,8 +22,8 @@ export default {
   swatch: indicatorGroupColors['greenhouse-gas'],
   legend: {
     type: 'gradient',
-    min: 'less',
-    max: 'more',
+    min: '< -1 ppm',
+    max: '> 1 ppm',
     stops: [
       '#3A88BD',
       '#C9E0ED',

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

@@ -10,7 +10,7 @@ export default {
   type: 'raster-timeseries',
   domain: [
     '2018-03-01',
-    '2020-04-01'
+    '2020-06-01'
   ],
   source: {
     type: 'raster',

app/assets/scripts/components/common/mb-map-explore/map-layer-control.js

@@ -0,0 +1,111 @@
+'use strict';
+import React from 'react';
+import { PropTypes as T } from 'prop-types';
+import styled from 'styled-components';
+import { rgba } from 'polished';
+
+import Dropdown from '../../common/dropdown';
+import Button, { buttonVariationHoverCss } from '../../../styles/button/button';
+import { FormSwitch } from '../../../styles/form/switch';
+import { headingAlt } from '../../../styles/type/heading';
+import { themeVal } from '../../../styles/utils/general';
+import { glsp } from '../../../styles/utils/theme-values';
+
+const DropTitle = styled.h6`
+  ${headingAlt()}
+  color: ${({ theme }) => rgba(theme.type.base.color, 0.64)};
+  font-size: 0.75rem;
+  line-height: 1rem;
+  margin: 0 0 ${glsp()} 0;
+`;
+
+const LayersList = styled.ul`
+  list-style: none;
+  margin: 0 -${glsp()};
+  padding: 0;
+
+  > li {
+    padding: ${glsp()};
+    box-shadow: 0 ${themeVal('layout.border')} 0 0 ${themeVal('color.baseAlphaB')};
+  }
+
+  > li:first-child {
+    padding-top: 0;
+  }
+
+  > li:last-child {
+    padding-bottom: 0;
+    box-shadow: none;
+  }
+
+  > li > *:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+const LayerSwitch = styled(FormSwitch)`
+  display: grid;
+  grid-template-columns: 1fr auto;
+`;
+
+// Why you ask? Very well:
+// Mapbox's css has an instruction that sets the hover color for buttons to
+// near black. The only way to override it is to increase the specificity and
+// we need the button functions to get the correct color.
+// The infamous instruction:
+// .mapboxgl-ctrl > button:hover {
+//   background-color: rgba(0, 0, 0, 0.05);
+// }
+const LayersButton = styled(Button)`
+  &&&:hover {
+    background-color: red;
+    ${({ theme }) => buttonVariationHoverCss(theme.type.base.color, 'raised', 'light', { theme })}
+  }
+`;
+
+// React component for the layer control.
+// It is disconnected from the global state because it needs to be included
+// via the mapbox code.
+export default class LayerControlDropdown extends React.Component {
+  render () {
+    const {
+      overlayState,
+      handleOverlayChange
+    } = this.props;
+
+    return (
+      <Dropdown
+        triggerElement={
+          <LayersButton
+            variation='base-raised-light'
+            useIcon='iso-stack'
+            hideText
+          >
+            Select map overlays
+          </LayersButton>
+        }
+        direction='right'
+        alignment='top'
+      >
+        <DropTitle>Toggle overlays</DropTitle>
+        <LayersList>
+          <li>
+            <LayerSwitch
+              name='switch-spotlight'
+              title='Toggle spotlight markers on/off'
+              checked={overlayState.spotlightMarkers}
+              onChange={() => handleOverlayChange('spotlightMarkers')}
+            >
+              Spotlight markers
+            </LayerSwitch>
+          </li>
+        </LayersList>
+      </Dropdown>
+    );
+  }
+}
+
+LayerControlDropdown.propTypes = {
+  overlayState: T.object,
+  handleOverlayChange: T.func
+};

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import T from 'prop-types';
-import styled, { withTheme } from 'styled-components';
+import styled, { withTheme, ThemeProvider } from 'styled-components';
 import mapboxgl from 'mapbox-gl';
 import CompareMbGL from 'mapbox-gl-compare';
 import { NavLink } from 'react-router-dom';
@@ -15,11 +15,13 @@ import mbAoiDraw from './mb-aoi-draw';
 import { round } from '../../../utils/format';
 import { createMbMarker } from './mb-popover/utils';
 import { getSpotlightLayers } from '../layers';
+import MapboxControl from '../mapbox-react-control';
 
 import ReactPopoverGl from './mb-popover';
 import Button from '../../../styles/button/button';
 import Prose from '../../../styles/type/prose';
 import Dl from '../../../styles/type/definition-list';
+import LayerControlDropdown from './map-layer-control';
 
 const { center, zoom: defaultZoom, minZoom, maxZoom, styleUrl } = config.map;
 
@@ -102,11 +104,19 @@ class MbMap extends React.Component {
     this.mbDraw = null;
 
     this.state = {
+      overlayState: {
+        spotlightMarkers: true
+      },
       popover: {
         coords: null,
         spotlightId: null
       }
     };
+
+    // Store markers to be able to remove them.
+    this.spotlightMarkersList = [];
+
+    this.handleOverlayChange = this.handleOverlayChange.bind(this);
   }
 
   componentDidMount () {
@@ -115,6 +125,12 @@ class MbMap extends React.Component {
   }
 
   componentDidUpdate (prevProps, prevState) {
+    // Manually trigger render of detached react components.
+    this.overlayDropdownControl &&
+      this.overlayDropdownControl.render(this.props, this.state);
+    this.overlayDropdownControlCompare &&
+      this.overlayDropdownControlCompare.render(this.props, this.state);
+
     const { activeLayers, comparing, spotlightList } = this.props;
 
     // Compare Maps
@@ -189,6 +205,18 @@ class MbMap extends React.Component {
       });
     }
 
+    // Update mapLayers if changed
+    const { spotlightMarkers } = this.state.overlayState;
+    if (prevState.overlayState.spotlightMarkers !== spotlightMarkers) {
+      if (spotlightMarkers) {
+        this.updateSpotlights();
+      } else {
+        this.spotlightMarkersList.forEach(m => m.remove());
+        this.spotlightMarkersList = [];
+        this.setState({ popover: {} });
+      }
+    }
+
     // Update all active layers.
     this.updateActiveLayers(prevProps);
 
@@ -207,6 +235,15 @@ class MbMap extends React.Component {
     }
   }
 
+  handleOverlayChange (id) {
+    this.setState(state => ({
+      // Replace the array index with the negated value.
+      overlayState: Object.assign({}, state.overlayState, {
+        [id]: !state.overlayState[id]
+      })
+    }));
+  }
+
   /**
    * Adds spotlight markers to mbMap and mbMapComparing. This functions uses
    * component state to control spotlights loading state, because maps will
@@ -222,7 +259,7 @@ class MbMap extends React.Component {
 
     // Define a common function to add markers
     const addMarker = (spotlight, map) => {
-      createMbMarker(map, { color: this.props.theme.color.primary })
+      return createMbMarker(map, { color: this.props.theme.color.primary })
         .setLngLat(spotlight.center)
         .addTo(map)
         .onClick((coords) => {
@@ -234,14 +271,16 @@ class MbMap extends React.Component {
     // Add markers to mbMap, if not done yet
     if (this.mbMap) {
       spotlights.forEach((s) => {
-        addMarker(s, this.mbMap);
+        const m = addMarker(s, this.mbMap);
+        this.spotlightMarkersList.push(m);
       });
     }
 
     // Add markers to mbMapComparing, if not done yet
     if (this.mbMapComparing) {
       spotlights.forEach((s) => {
-        addMarker(s, this.mbMapComparing);
+        const m = addMarker(s, this.mbMapComparing);
+        this.spotlightMarkersList.push(m);
       });
     }
   }
@@ -282,6 +321,16 @@ class MbMap extends React.Component {
       );
     }
 
+    if (this.props.enableOverlayControls) {
+      this.overlayDropdownControlCompare = new MapboxControl(
+        (props, state) => this.renderOverlayDropdown(props, state)
+      );
+
+      this.mbMapComparing.addControl(this.overlayDropdownControlCompare, 'top-left');
+      // Initial rendering.
+      this.overlayDropdownControlCompare.render(this.props, this.state);
+    }
+
     // Style attribution.
     this.mbMapComparing.addControl(
       new mapboxgl.AttributionControl({ compact: true })
@@ -355,6 +404,16 @@ class MbMap extends React.Component {
           'top-left'
         );
       }
+
+      if (this.props.enableOverlayControls) {
+        this.overlayDropdownControl = new MapboxControl(
+          (props, state) => this.renderOverlayDropdown(props, state)
+        );
+
+        this.mbMap.addControl(this.overlayDropdownControl, 'top-left');
+        // Initial rendering.
+        this.overlayDropdownControl.render(this.props, this.state);
+      }
     }
 
     // Style attribution
@@ -401,6 +460,17 @@ class MbMap extends React.Component {
     });
   }
 
+  renderOverlayDropdown (props, state) {
+    return (
+      <ThemeProvider theme={props.theme}>
+        <LayerControlDropdown
+          overlayState={state.overlayState}
+          handleOverlayChange={this.handleOverlayChange}
+        />
+      </ThemeProvider>
+    );
+  }
+
   renderPopover () {
     const { spotlightId } = this.state.popover;
 
@@ -515,6 +585,7 @@ MbMap.propTypes = {
   activeLayers: T.array,
   layers: T.array,
   enableLocateUser: T.bool,
+  enableOverlayControls: T.bool,
   disableControls: T.bool,
   spotlightList: T.object,
   spotlight: T.object,

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

@@ -462,6 +462,7 @@ class GlobalExplore extends React.Component {
                   aoiState={this.state.aoi}
                   comparing={isComparing}
                   enableLocateUser
+                  enableOverlayControls
                   spotlightList={spotlightList}
                 />
                 <Timeline