Merge pull request #245 from NASA-IMPACT/develop

Deploy v0.7.0

.stylelintrc.json

@@ -9,5 +9,6 @@
   "rules": {
     "font-family-no-missing-generic-family-keyword": null,
     "no-duplicate-selectors": null
-  }
+  },
+  "ignoreFiles": ["app/assets/scripts/styles/gridder.js"]
 }

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

@@ -18,7 +18,6 @@ const Page = styled.div`
   display: grid;
   grid-template-rows: minmax(2rem, min-content) 1fr ${({ hideFooter }) => hideFooter ? 0 : 'auto'};
   min-height: 100vh;
-  min-height: ${({ innerHeight }) => `${innerHeight}px`};
 `;
 
 const PageBody = styled.main`
@@ -34,9 +33,7 @@ class App extends Component {
     super(props);
 
     this.state = {
-      useSmallPanel: false,
-      useShortTitle: false,
-      height: window.innerHeight
+      isMediumDown: false
     };
 
     this.resizeListener = this.resizeListener.bind(this);
@@ -55,12 +52,7 @@ class App extends Component {
 
   resizeListener ({ width, height }) {
     this.setState({
-      // Store the height to set the page min height. This is needed for mobile
-      // devices to account for the address bar, since 100vh does not work.
-      // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-      height,
-      useShortTitle: width < mediaRanges.small[0],
-      useSmallPanel: width < mediaRanges.medium[0]
+      isMediumDown: width < mediaRanges.large[0]
     });
   }
 
@@ -70,16 +62,13 @@ class App extends Component {
 
     return (
       <SizeAwareElement
-        innerHeight={this.state.height}
         element={Page}
+        className='page'
         onChange={this.resizeListener}
         hideFooter={hideFooter}
       >
         <MetaTags title={`${title}${appTitle}`} description={appDescription} />
-        <PageHeader
-          useShortTitle={this.state.useShortTitle}
-          useSmallPanel={this.state.useSmallPanel}
-        />
+        <PageHeader isMediumDown={this.state.isMediumDown} />
         <PageBody role='main'>{children}</PageBody>
         <PageFooter />
       </SizeAwareElement>

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

@@ -1,7 +1,4 @@
 import get from 'lodash.get';
-import { eachWeekOfInterval, format } from 'date-fns';
-
-import { utcDate } from '../../../utils/utils';
 
 import no2 from './layer-no2';
 import co2 from './layer-co2';
@@ -10,7 +7,6 @@ import population from './layer-population';
 import nightlightsViirs from './layer-nightlights-viirs';
 import nightlightsHd from './layer-nightlights-hd';
 import detectionShip from './layer-detection-ship';
-import detectionMulti from './layer-detection-multiple';
 import waterChlorophyll from './layer-water-chlorophyll';
 import waterSpm from './layer-water-spm';
 
@@ -22,7 +18,6 @@ const layers = [
   nightlightsViirs,
   nightlightsHd,
   detectionShip,
-  detectionMulti,
   waterChlorophyll,
   waterSpm
 ];
@@ -33,10 +28,10 @@ const layersBySpotlight = {
   be: ['no2', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs'],
   du: ['no2', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs'],
   gh: ['no2', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs'],
-  la: ['no2', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs', 'detection-multi'],
+  la: ['no2', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs', 'detection-ship'],
   sf: ['no2', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs', 'detection-ship', 'water-chlorophyll', 'water-spm'],
   tk: ['no2', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs'],
-  ny: ['no2', 'co2', 'co2-diff', 'water-chlorophyll']
+  ny: ['no2', 'co2', 'co2-diff', 'detection-ship', 'water-chlorophyll', 'water-spm']
 };
 
 const layerOverridesBySpotlight = {
@@ -54,33 +49,37 @@ const layerOverridesBySpotlight = {
     'detection-multi': (l, spotlightId) =>
       handleInferenceTimeseries(l, spotlightId, {
         domain: ['2020-01-02', '2020-02-13']
+      }),
+    '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']
       })
   },
   sf: {
     'nightlights-viirs': handleNightlightsViirs,
     'detection-ship': (l, spotlightId) =>
       handleInferenceTimeseries(l, spotlightId, {
-        domain: ['2020-03-11']
+        domain: ['2020-03-10', '2020-03-11', '2020-03-15', '2020-03-18', '2020-04-21']
       }),
     'water-chlorophyll': (l, spotlightId) => {
       return {
         ...l,
         domain: ['2020-03-02', '2020-04-03', '2020-04-19', '2020-05-04', '2020-05-05', '2020-05-19', '2020-05-21', '2020-05-24']
       };
+    },
+    'water-spm': (l, spotlightId) => {
+      return {
+        ...l,
+        domain: ['2020-03-02', '2020-04-03', '2020-04-19', '2020-05-04', '2020-05-05', '2020-05-19', '2020-05-21', '2020-05-24']
+      };
     }
   },
   tk: {
     'nightlights-viirs': handleNightlightsViirs,
     'water-chlorophyll': (l, spotlightId) => {
-      // Generate dates - weekly on wednesday.
-      const dates = eachWeekOfInterval({
-        start: utcDate('2017-12-27'),
-        end: utcDate('2020-06-10')
-      }, { weekStartsOn: 3 });
-
       return {
         ...l,
-        domain: dates.map(d => format(d, 'yyyy-MM-dd')),
+        domain: ['2018-01-03', '2018-01-10', '2018-01-17', '2018-01-24', '2018-01-31', '2018-02-14', '2018-02-21', '2018-03-07', '2018-03-14', '2018-03-28', '2018-04-04', '2018-04-11', '2018-04-18', '2018-04-25', '2018-05-02', '2018-05-09', '2018-05-16', '2018-05-30', '2018-06-20', '2018-06-27', '2018-07-04', '2018-07-11', '2018-07-18', '2018-07-25', '2018-08-01', '2018-08-08', '2018-08-22', '2018-09-05', '2018-09-12', '2018-09-19', '2018-09-26', '2018-10-03', '2018-10-17', '2018-10-24', '2018-11-07', '2018-11-14', '2018-11-21', '2018-11-28', '2018-12-12', '2018-12-19', '2018-12-26', '2019-01-02', '2019-01-09', '2019-01-16', '2019-01-23', '2019-01-30', '2019-02-13', '2019-02-27', '2019-03-06', '2019-03-13', '2019-03-20', '2019-03-27', '2019-04-03', '2019-04-10', '2019-05-08', '2019-05-15', '2019-05-22', '2019-05-29', '2019-06-12', '2019-06-19', '2019-07-24', '2019-07-31', '2019-08-07', '2019-08-14', '2019-08-21', '2019-08-28', '2019-09-04', '2019-09-11', '2019-09-25', '2019-10-02', '2019-10-09', '2019-10-23', '2019-10-30', '2019-11-06', '2019-11-13', '2019-11-20', '2019-11-27', '2019-12-11', '2019-12-18', '2019-12-25', '2020-01-01', '2020-01-08', '2020-01-15', '2020-01-29', '2020-02-05', '2020-02-19', '2020-02-26', '2020-03-04', '2020-03-18', '2020-03-25', '2020-04-01', '2020-04-08', '2020-04-15', '2020-04-29', '2020-05-06', '2020-05-13', '2020-05-20', '2020-06-03'],
         source: {
           ...l.source,
           tiles: l.source.tiles.map(t => t.replace('&rescale=-100%2C100', ''))
@@ -94,6 +93,16 @@ const layerOverridesBySpotlight = {
         ...l,
         domain: ['2020-01-01', '2020-01-08', '2020-01-15', '2020-01-22', '2020-01-29', '2020-02-05', '2020-02-12', '2020-02-19', '2020-02-26', '2020-03-04', '2020-03-11', '2020-03-18', '2020-03-25', '2020-04-01', '2020-04-08', '2020-04-15', '2020-04-22', '2020-04-29', '2020-05-06', '2020-05-13', '2020-05-20', '2020-05-27', '2020-06-03']
       };
+    },
+    'detection-ship': (l, spotlightId) =>
+      handleInferenceTimeseries(l, spotlightId, {
+        domain: ['2020-01-20', '2020-01-21', '2020-03-15', '2020-03-18', '2020-03-22']
+      }),
+    'water-spm': (l, spotlightId) => {
+      return {
+        ...l,
+        domain: ['2020-01-01', '2020-01-08', '2020-01-15', '2020-01-22', '2020-01-29', '2020-02-05', '2020-02-12', '2020-02-19', '2020-02-26', '2020-03-04', '2020-03-11', '2020-03-18', '2020-03-25', '2020-04-01', '2020-04-08', '2020-04-15', '2020-04-22', '2020-04-29', '2020-05-06', '2020-05-13', '2020-05-20', '2020-05-27', '2020-06-03']
+      };
     }
   }
 };

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

@@ -1,5 +1,7 @@
 import config from '../../../config';
 
+import { indicatorGroupColors } from '../../../styles/theme/theme.js';
+
 export default {
   id: 'co2-diff',
   name: 'CO₂ Diff',
@@ -18,10 +20,7 @@ export default {
   },
   exclusiveWith: ['no2', 'co2', 'gibs-population', 'car-count', 'nightlights-viirs', 'nightlights-hd', 'detection-ship', 'detection-multi', 'water-chlorophyll', 'water-spm'],
   enabled: false,
-  swatch: {
-    color: '#B8D8E7',
-    name: 'Pale blue'
-  },
+  swatch: indicatorGroupColors['greenhouse-gas'],
   legend: {
     type: 'gradient',
     min: 'less',

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

@@ -2,6 +2,8 @@ import { format } from 'date-fns';
 
 import config from '../../../config';
 
+import { indicatorGroupColors } from '../../../styles/theme/theme.js';
+
 export default {
   id: 'co2',
   name: 'CO₂ Mean',
@@ -34,10 +36,7 @@ export default {
     }
   },
 
-  swatch: {
-    color: '#7E7E7E',
-    name: 'Grey'
-  },
+  swatch: indicatorGroupColors['greenhouse-gas'],
   legend: {
     type: 'gradient-adjustable',
     min: 'less',

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

@@ -1,4 +1,5 @@
 import config from '../../../config';
+import { indicatorGroupColors } from '../../../styles/theme/theme';
 
 export default {
   id: 'detection-ship',
@@ -22,10 +23,7 @@ export default {
   },
   exclusiveWith: ['no2', 'co2-diff', 'co2', 'gibs-population', 'car-count', 'nightlights-viirs', 'nightlights-hd', 'detection-multi', 'water-chlorophyll', 'water-spm'],
   enabled: false,
-  swatch: {
-    color: '#411073',
-    name: 'Purple'
-  },
+  swatch: indicatorGroupColors.economic,
   timeUnit: 'day',
   info: 'Ships detected each day in PlanetScope imagery are shown in red.'
 };

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

@@ -1,4 +1,5 @@
 import config from '../../../config';
+import { indicatorGroupColors } from '../../../styles/theme/theme';
 
 export default {
   id: 'nightlights-hd',
@@ -16,10 +17,7 @@ export default {
     ]
   },
   exclusiveWith: ['no2', 'co2-diff', 'co2', 'gibs-population', 'car-count', 'nightlights-viirs', 'detection-ship', 'detection-multi', 'water-chlorophyll', 'water-spm'],
-  swatch: {
-    color: '#f2a73a',
-    name: 'Gold'
-  },
+  swatch: indicatorGroupColors.economic,
   legend: {
     type: 'gradient',
     min: 'less',

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

@@ -1,4 +1,5 @@
 import config from '../../../config';
+import { indicatorGroupColors } from '../../../styles/theme/theme';
 
 export default {
   id: 'nightlights-viirs',
@@ -15,10 +16,7 @@ export default {
     ]
   },
   exclusiveWith: ['no2', 'co2-diff', 'co2', 'gibs-population', 'car-count', 'nightlights-hd', 'detection-ship', 'detection-multi', 'water-chlorophyll', 'water-spm'],
-  swatch: {
-    color: '#f2a73a',
-    name: 'Gold'
-  },
+  swatch: indicatorGroupColors.economic,
   legend: {
     type: 'gradient',
     min: 'less',

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

@@ -2,6 +2,8 @@ import { format, sub } from 'date-fns';
 
 import config from '../../../config';
 
+import { indicatorGroupColors } from '../../../styles/theme/theme.js';
+
 export default {
   id: 'no2',
   name: 'Nitrogen dioxide',
@@ -24,10 +26,7 @@ export default {
     help: 'Compare with baseline (5 years ago)',
     mapLabel: date => `${format(sub(date, { years: 5 }), "MMM yy''")} — ${format(date, "MMM yy''")}`
   },
-  swatch: {
-    color: '#411073',
-    name: 'Purple'
-  },
+  swatch: indicatorGroupColors['air-quality'],
   legend: {
     type: 'gradient-adjustable',
     min: 'less',

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

@@ -1,3 +1,6 @@
+
+import { indicatorGroupColors } from '../../../styles/theme/theme.js';
+
 export default {
   id: 'gibs-population',
   name: 'Population',
@@ -9,10 +12,7 @@ export default {
     ]
   },
   exclusiveWith: ['no2', 'co2-diff', 'co2', 'car-count', 'nightlights-viirs', 'nightlights-hd', 'detection-ship', 'detection-multi', 'water-chlorophyll', 'water-spm'],
-  swatch: {
-    color: '#F55E2C',
-    name: 'Orange'
-  },
+  swatch: indicatorGroupColors.economic,
   legend: {
     type: 'gradient',
     min: 'less',

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

@@ -1,5 +1,7 @@
 import config from '../../../config';
 
+import { indicatorGroupColors } from '../../../styles/theme/theme.js';
+
 export default {
   id: 'water-chlorophyll',
   name: 'Chlorophyll',
@@ -13,10 +15,7 @@ export default {
     ]
   },
   exclusiveWith: ['no2', 'co2-diff', 'co2', 'gibs-population', 'car-count', 'nightlights-viirs', 'nightlights-hd', 'detection-ship', 'detection-multi', 'water-spm'],
-  swatch: {
-    color: '#B93138',
-    name: 'Pale red'
-  },
+  swatch: indicatorGroupColors['water-quality'],
   legend: {
     type: 'gradient',
     min: 'less',