Merge pull request #292 from NASA-IMPACT/develop

Release 0.9.0

README.md

@@ -72,4 +72,4 @@ The app can then be run by any web server.
 **When building the site for deployment provide the base url trough the `BASEURL` environment variable. Omit the leading slash. (E.g. https://example.com)**
 
 # License
-This project is licensed under **The MIT License (MIT)**, see the [LICENSE](LICENSE.md) file for more details.
+This project is licensed under **Apache 2**, see the [LICENSE](LICENSE) file for more details.

app/assets/scripts/components/common/share.js → app/assets/scripts/components/common/copy-field.js

@@ -1,25 +1,11 @@
 import React from 'react';
 import { PropTypes as T } from 'prop-types';
 import styled from 'styled-components';
-import { withRouter } from 'react-router-dom';
 import Clipboard from 'clipboard';
 
 import Button from '../../styles/button/button';
-import Dropdown, {
-  DropTitle,
-  DropMenu,
-  DropInset,
-  DropMenuItem
-} from './dropdown';
 import Form from '../../styles/form/form';
 import FormInput from '../../styles/form/input';
-import collecticon from '../../styles/collecticons';
-
-const ShareIconMenu = styled(DropMenuItem)`
-  :before {
-    ${({ useIcon }) => collecticon(useIcon)}
-  }
-`;
 
 const FormInputGroup = styled.div`
   display: grid;
@@ -36,60 +22,9 @@ const FormInputGroup = styled.div`
   }
 `;
 
-class ShareOptions extends React.Component {
-  render () {
-    const url = window.location.toString();
-    return (
-      <Dropdown
-        alignment='right'
-        direction='down'
-        triggerElement={
-          <Button
-            variation='achromic-plain'
-            title='Toggle share options'
-            hideText
-            useIcon='share-2'
-          >
-            <span>Share</span>
-          </Button>
-        }
-      >
-        <DropTitle>Share</DropTitle>
-        <DropMenu role='menu' iconified>
-          <li>
-            <ShareIconMenu
-              useIcon='brand-facebook'
-              href={`https://www.facebook.com/sharer/sharer.php?u=${url}`}
-              title='Share on Facebook'
-              target='_blank'
-            >
-              <span>Facebook</span>
-            </ShareIconMenu>
-          </li>
-          <li>
-            <ShareIconMenu
-              useIcon='brand-twitter'
-              href={`https://twitter.com/intent/tweet?url=${url}`}
-              title='Share on Twitter'
-              target='_blank'
-            >
-              <span>Twitter</span>
-            </ShareIconMenu>
-          </li>
-        </DropMenu>
-        <DropInset>
-          <CopyField value={url} />
-        </DropInset>
-      </Dropdown>
-    );
-  }
-}
-
-export default withRouter(ShareOptions);
-
 // This needs to be a separate class because of the mount and unmount methods.
 // The dropdown unmounts when closed and the refs would be lost otherwise.
-class CopyField extends React.Component {
+export class CopyField extends React.Component {
   constructor (props) {
     super(props);
     this.state = {
@@ -140,7 +75,7 @@ class CopyField extends React.Component {
               this.triggerEl = el;
             }}
           >
-            <span>Copy to clipboard</span>
+            Copy to clipboard
           </Button>
         </FormInputGroup>
       </Form>

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

@@ -16,7 +16,7 @@ export default {
     raster: {
       type: 'raster',
       tiles: [
-        `${config.api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/planet/{spotlightId}_{date}.tif&resampling_method=nearest&bidx=1,2,3`
+        `${config.api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/planet/{spotlightId}-{date}.tif&resampling_method=nearest&bidx=1,2,3`
       ]
     }
   },

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

@@ -9,15 +9,18 @@ export default {
   name: 'Nitrogen dioxide',
   type: 'raster-timeseries',
   domain: [
-    '2019-03-01',
-    '2020-03-01'
+    '2018-03-01',
+    '2020-04-01'
   ],
   source: {
     type: 'raster',
     tiles: [
-      `${config.api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/OMNO2d_HRM/OMI_trno2_0.10x0.10_{date}_Col3_V4.nc.tif&resampling_method=bilinear&bidx=1&rescale=0%2C1e16&color_map=custom_no2&color_formula=gamma r {gamma}`
+      `${config.api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/OMNO2d_HRM/OMI_trno2_0.10x0.10_{date}_Col3_V4.nc.tif&resampling_method=bilinear&bidx=1&rescale=0%2C1.5e16&color_map=custom_no2&color_formula=gamma r {gamma}`
     ]
   },
+  paint: {
+    'raster-opacity': 0.75
+  },
   exclusiveWith: ['co2', 'co2-diff', 'gibs-population', 'car-count', 'nightlights-viirs', 'nightlights-hd', 'detection-ship', 'detection-multi', 'water-chlorophyll', 'water-spm'],
   enabled: true,
   compare: {

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

@@ -74,7 +74,7 @@ export const layerTypes = {
   'raster-timeseries': {
     update: (ctx, layerInfo, prevProps) => {
       const { mbMap, mbMapComparing, mbMapComparingLoaded, props } = ctx;
-      const { id, source, compare } = layerInfo;
+      const { id, source, compare, paint } = layerInfo;
       const prevLayerInfo = prevProps.layers.find(l => l.id === layerInfo.id);
       const { date, comparing } = props;
 
@@ -119,7 +119,8 @@ export const layerTypes = {
             {
               id: id,
               type: 'raster',
-              source: id
+              source: id,
+              paint: paint || {}
             },
             'admin-0-boundary-bg'
           );
@@ -135,7 +136,7 @@ export const layerTypes = {
     },
     show: (ctx, layerInfo) => {
       const { mbMap, props } = ctx;
-      const { id, source } = layerInfo;
+      const { id, source, paint } = layerInfo;
       const { date } = props;
       if (!date) return;
 
@@ -147,7 +148,8 @@ export const layerTypes = {
           {
             id: id,
             type: 'raster',
-            source: id
+            source: id,
+            paint: paint || {}
           },
           'admin-0-boundary-bg'
         );
@@ -190,6 +192,17 @@ export const layerTypes = {
       const rastId = `${id}-raster`;
       const { vector, raster } = source;
 
+      // Do not update if:
+      if (
+        // There's no date defined.
+        prevProps.date && date &&
+        // Dates are the same
+        date.getTime() === prevProps.date.getTime()
+      ) return;
+
+      // The source we're updating is not present.
+      if (!mbMap.getSource(id)) return;
+
       const formatDate = format(utcDate(date), dateFormats[layerInfo.timeUnit]);
       const vectorData = vector.data.replace('{date}', formatDate);
       const rasterTiles = raster.tiles.map(tile => tile.replace('{date}', formatDate));

app/assets/scripts/components/common/page-footer.js

@@ -125,7 +125,7 @@ const PageFooter = props => {
             <dt>NASA official</dt>
             <dd>
               <Button
-                as='a'
+                element='a'
                 href='mailto:[email protected]'
                 title='Get in touch'
                 variation='base-plain'
@@ -138,7 +138,7 @@ const PageFooter = props => {
             <dt>Open source code</dt>
             <dd>
               <Button
-                as='a'
+                element='a'
                 href='https://github.com/NASA-IMPACT/covid-dashboard'
                 title='Explore the code'
                 variation='base-plain'