From f25d3eb09a9862017afeb97cf7fe9751a5a00130 Mon Sep 17 00:00:00 2001
From: Ricardo Mestre <ricardo@duplos.org>
Date: Tue, 19 May 2020 14:25:38 +0100
Subject: [PATCH 01/35] Improve header spacing

---
 app/assets/scripts/components/common/page-header.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/scripts/components/common/page-header.js b/app/assets/scripts/components/common/page-header.js
index 101dd66d..da85c67f 100644
--- a/app/assets/scripts/components/common/page-header.js
+++ b/app/assets/scripts/components/common/page-header.js
@@ -31,7 +31,7 @@ const PageHead = styled.header`
 
 const PageHeadInner = styled.div`
   display: flex;
-  padding: 0 ${glsp(0.5)};
+  padding: 0 ${glsp()};
   align-items: center;
   margin: 0 auto;
   height: 100%;

From d9c911033d2a632bd7f7f6504660035863b4c11c Mon Sep 17 00:00:00 2001
From: Ricardo Mestre <ricardo@duplos.org>
Date: Tue, 19 May 2020 20:38:50 +0100
Subject: [PATCH 02/35] Restyle layer switch toggle

---
 app/assets/scripts/styles/form/switch.js | 68 ++++++++++++++++++------
 1 file changed, 51 insertions(+), 17 deletions(-)

diff --git a/app/assets/scripts/styles/form/switch.js b/app/assets/scripts/styles/form/switch.js
index c3e6925a..71b09819 100644
--- a/app/assets/scripts/styles/form/switch.js
+++ b/app/assets/scripts/styles/form/switch.js
@@ -1,9 +1,12 @@
 import React from 'react';
 import T from 'prop-types';
 import styled, { css } from 'styled-components';
+import { rgba } from 'polished';
 
 import { visuallyHidden, disabled as disabledHelper } from '../helpers';
 import { themeVal } from '../utils/general';
+import { buttonVariationHoverCss, buttonVariationBaseCss } from '../button/button';
+import collecticon from '../collecticons';
 
 /**
  * Renders a FormSwitch component.
@@ -114,44 +117,75 @@ export const FormSwitch = styled(FormSwitchElement)`
 
   ${FormOptionUi} {
     margin: 0.25rem 0;
-    width: 2rem;
+    width: 2.25rem;
     height: 1rem;
     border-radius: ${themeVal('shape.ellipsoid')};
-    background-color: ${themeVal('color.baseAlphaC')};
-    border: ${themeVal('layout.border')} solid ${themeVal('color.baseAlphaB')};
+    background: ${themeVal('color.baseAlphaB')};
+    box-shadow: inset 0 0 0 ${themeVal('layout.border')} ${themeVal('color.baseAlphaB')};
 
     &::before {
+      ${props =>
+      buttonVariationBaseCss(
+        props.theme.type.base.color,
+        'raised',
+        'light',
+        props
+      )}
       position: absolute;
+      z-index: 2;
       top: 50%;
       left: 0;
       z-index: 2;
       content: '';
-      height: 0.75rem;
-      width: 0.75rem;
+      height: 1.25rem;
+      width: 1.25rem;
       border-radius: ${themeVal('shape.ellipsoid')};
-      transform: translate(0.075rem, -50%);
+      transform: translate(0, -50%);
+      transition: all 0.24s ease 0s;
+    }
+
+    &::after {
+      ${collecticon('eye-disabled')}
+      position: absolute;
+      z-index: 1;
+      top: 50%;
+      left: 100%;
+      transform: translate(-100%, -50%);
       transition: all 0.24s ease 0s;
-      background: ${themeVal('color.surface')};
-      box-shadow: inset 0 0 0 1px ${themeVal('color.baseAlphaB')};
+      width: 1.25rem;
+      text-transform: uppercase;
+      font-size: 0.75rem;
+      font-weight: ${themeVal('type.base.bold')};
+      line-height: 1;
+      color: ${themeVal('color.baseLight')};
+      text-align: center;
+      opacity: 0;
     }
   }
 
-  &:hover ${/* sc-selector */FormOptionUi} {
-    border-color: ${themeVal('color.baseAlphaC')};
+  &:hover ${/* sc-selector */FormOptionUi}::before {
+    ${props =>
+    buttonVariationHoverCss(
+      props.theme.type.base.color,
+      'raised',
+      'light',
+      props
+    )}
   }
 
   ${({ checked }) => (checked ? `${FormOptionUi},` : '')}
   input:checked ~ ${FormOptionUi} { /* stylelint-disable-line */
-    background: ${themeVal('color.baseAlphaD')};
-    border-color: ${themeVal('color.baseAlphaB')};
-
-    &:hover {
-      border-color: ${themeVal('color.baseAlphaC')};
-    }
+    background: ${themeVal('color.link')};
 
     &::before {
       left: 100%;
-      transform: translate(calc(-100% - 0.075rem), -50%);
+      transform: translate(-100%, -50%);
+    }
+
+    &::after {
+      ${collecticon('eye')}
+      left: 0;
+      transform: translate(0, -50%);
     }
   }
 `;

From 470efc585a93f6dcf1404b89eece8ea956aa6392 Mon Sep 17 00:00:00 2001
From: Ricardo Mestre <ricardo@duplos.org>
Date: Tue, 19 May 2020 21:03:35 +0100
Subject: [PATCH 03/35] Improve text selection readability

---
 app/assets/scripts/styles/global.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/scripts/styles/global.js b/app/assets/scripts/styles/global.js
index 849eaaab..21a67906 100644
--- a/app/assets/scripts/styles/global.js
+++ b/app/assets/scripts/styles/global.js
@@ -135,8 +135,8 @@ const baseStyles = css`
      ========================================================================== */
 
   ::selection {
-    background-color: ${_rgba(themeVal('color.base'), 0.32)};
-    color: ${themeVal('color.base')};
+    background-color: ${_rgba(themeVal('color.base'), 0.64)};
+    color: ${themeVal('color.baseLight')};
   }
 
   #root {

From 3c9422b13b1a3f77fb14b4b06551cdcac2487c21 Mon Sep 17 00:00:00 2001
From: Ricardo Mestre <ricardo@duplos.org>
Date: Tue, 19 May 2020 21:04:29 +0100
Subject: [PATCH 04/35] Tidy switch dependencies

---
 app/assets/scripts/styles/form/switch.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/assets/scripts/styles/form/switch.js b/app/assets/scripts/styles/form/switch.js
index 71b09819..00d72042 100644
--- a/app/assets/scripts/styles/form/switch.js
+++ b/app/assets/scripts/styles/form/switch.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import T from 'prop-types';
 import styled, { css } from 'styled-components';
-import { rgba } from 'polished';
 
 import { visuallyHidden, disabled as disabledHelper } from '../helpers';
 import { themeVal } from '../utils/general';

From 76cd50c35c1891848212c8f80ebf61b540941d35 Mon Sep 17 00:00:00 2001
From: Ricardo Mestre <ricardo@duplos.org>
Date: Tue, 19 May 2020 23:24:21 +0100
Subject: [PATCH 05/35] Restyle page header to include branding

---
 .../graphics/layout/app-logo-sprites.png      | Bin 0 -> 26513 bytes
 app/assets/scripts/components/common/app.js   |   2 +-
 .../scripts/components/common/page-header.js  |  95 +++++++++++++-----
 app/assets/scripts/config/production.js       |   1 +
 4 files changed, 72 insertions(+), 26 deletions(-)
 create mode 100644 app/assets/graphics/layout/app-logo-sprites.png

diff --git a/app/assets/graphics/layout/app-logo-sprites.png b/app/assets/graphics/layout/app-logo-sprites.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3767e870ab6bec640c5715e502eb0d6d2adc6a9
GIT binary patch
literal 26513
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
IM6N<$f?0nolK=n!

literal 0
HcmV?d00001

diff --git a/app/assets/scripts/components/common/app.js b/app/assets/scripts/components/common/app.js
index 12b4dc00..c08c60b0 100644
--- a/app/assets/scripts/components/common/app.js
+++ b/app/assets/scripts/components/common/app.js
@@ -15,7 +15,7 @@ const { appTitle, appDescription } = config;
 
 const Page = styled(SizeAwareElement)`
   display: grid;
-  grid-template-rows: 3rem auto 0;
+  grid-template-rows: minmax(3rem, min-content) auto 0;
   min-height: 100vh;
 `;
 
diff --git a/app/assets/scripts/components/common/page-header.js b/app/assets/scripts/components/common/page-header.js
index da85c67f..74400d11 100644
--- a/app/assets/scripts/components/common/page-header.js
+++ b/app/assets/scripts/components/common/page-header.js
@@ -5,9 +5,9 @@ import styled from 'styled-components';
 import config from '../../config';
 
 import { Link, NavLink } from 'react-router-dom';
+import { visuallyHidden } from '../../styles/helpers';
 import { themeVal } from '../../styles/utils/general';
 import { reveal } from '../../styles/animation';
-import { panelSkin } from '../../styles/skins';
 import { filterComponentProps } from '../../utils/utils';
 import { glsp } from '../../styles/utils/theme-values';
 
@@ -15,15 +15,13 @@ import Button from '../../styles/button/button';
 import Dropdown, { DropTitle, DropMenu, DropMenuItem } from './dropdown';
 import superSitesList from '../super-sites';
 
-const { appTitle, appShortTitle } = config;
+const { appTitle, appShortTitle, appVersion } = config;
 
 const PageHead = styled.header`
-  ${panelSkin()}
-  position: sticky;
+  position: relative;
   z-index: 20;
-  top: 0;
-  left: 0;
-  bottom: 0;
+  background: ${themeVal('color.link')};
+  color: ${themeVal('color.baseLight')};
 
   /* Animation */
   animation: ${reveal} 0.32s ease 0s 1;
@@ -31,7 +29,7 @@ const PageHead = styled.header`
 
 const PageHeadInner = styled.div`
   display: flex;
-  padding: 0 ${glsp()};
+  padding: ${glsp()};
   align-items: center;
   margin: 0 auto;
   height: 100%;
@@ -44,27 +42,74 @@ const PageHeadline = styled.div`
 `;
 
 const PageTitle = styled.h1`
-  display: flex;
-  text-align: center;
-  align-items: center;
   margin: 0;
-  font-weight: ${themeVal('type.base.semibold')};
-  text-transform: uppercase;
+  line-height: 1;
 
   a {
-    display: flex;
-    align-items: center;
-    transition: all 0.24s ease 0s;
+    display: grid;
+    grid-gap: 0 ${glsp(0.5)};
+    grid-template-columns: min-content 1fr min-content;
 
     &,
     &:visited {
       color: inherit;
     }
+
+    &::before {
+      grid-row: 1 / span 2;
+      content: '';
+      height: 48px;
+      width: 56px;
+      background: url('/assets/graphics/layout/app-logo-sprites.png');
+      background-size: auto 100%;
+      background-repeat: none;
+      background-position: top right;
+    }
+
+    &:hover {
+      opacity: 1;
+
+      &::before {
+        background-position: top left;
+      }
+    }
+  }
+
+  sup {
+    grid-row: 1;
+    font-size: 0.75rem;
+    font-weight: ${themeVal('type.base.bold')};
+    line-height: 1rem;
+    text-transform: uppercase;
+    align-self: end;
+    top: inherit;
+    vertical-align: inherit;
+
+    span {
+      ${visuallyHidden()};
+    }
+  }
+
+  strong {
+    grid-row: 2;
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+    font-weight: ${themeVal('type.base.light')};
+    align-self: center;
   }
 
-  span {
-    font-size: 1rem;
-    line-height: 1;
+  sub {
+    grid-row: 2;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    text-transform: uppercase;
+    color: ${themeVal('color.link')};
+    background: ${themeVal('color.surface')};
+    padding: 0 ${glsp(0.5)};
+    border-radius: ${themeVal('shape.rounded')};
+    bottom: inherit;
+    vertical-align: inherit;
+    align-self: center;
   }
 `;
 
@@ -104,9 +149,9 @@ class PageHeader extends React.Component {
           <PageHeadline>
             <PageTitle>
               <Link to='/' title='Go to welcome page'>
-                <span>
-                  {useShortTitle ? appShortTitle || 'COVID-19' : appTitle}
-                </span>
+                <sup><span>NASA - </span>Earthdata</sup>
+                <strong>{useShortTitle ? appShortTitle || 'COVID-19' : appTitle}</strong>
+                <sub>{appVersion}</sub>
               </Link>
             </PageTitle>
           </PageHeadline>
@@ -118,7 +163,7 @@ class PageHeader extends React.Component {
                   to='/'
                   isActive={(match, location) =>
                     match && location.pathname.match(/^\/(areas\/|$)/)}
-                  variation='base-plain'
+                  variation='achromic-plain'
                   title='Explore the map'
                 >
                   <span>Map</span>
@@ -130,7 +175,7 @@ class PageHeader extends React.Component {
                   direction='down'
                   triggerElement={
                     <Button
-                      variation='base-plain'
+                      variation='achromic-plain'
                       title='Explore the Super sites'
                       useIcon={['chevron-down--small', 'after']}
                     >
@@ -158,7 +203,7 @@ class PageHeader extends React.Component {
                 <Button
                   as={NavLinkFilter}
                   to='/about'
-                  variation='base-plain'
+                  variation='achromic-plain'
                   title='View the about page'
                 >
                   <span>About</span>
diff --git a/app/assets/scripts/config/production.js b/app/assets/scripts/config/production.js
index 638ab710..3d1a2d20 100644
--- a/app/assets/scripts/config/production.js
+++ b/app/assets/scripts/config/production.js
@@ -2,6 +2,7 @@ export default {
   environment: 'production',
   appTitle: 'COVID-19 Dashboard',
   appDescription: 'COVID-19 Dashboard',
+  appVersion: 'v0.01',
   gaTrackingCode: null,
   mbToken: 'pk.eyJ1IjoiY292aWQtc3VwcG9ydCIsImEiOiJjazlhMTNweDIwMHd2M21venc1Nzdzdzh5In0.QZbkhaPpO9jRclw-dQWnDA',
   api: 'https://covid-support-api.s3.amazonaws.com/us',

From acf1b4fc2d485b22abd33820ec8cc3103309cf98 Mon Sep 17 00:00:00 2001
From: Ricardo Mestre <ricardo@duplos.org>
Date: Tue, 19 May 2020 23:44:02 +0100
Subject: [PATCH 06/35] Tweak page header inner spacing

---
 app/assets/scripts/components/common/page-header.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/scripts/components/common/page-header.js b/app/assets/scripts/components/common/page-header.js
index 74400d11..9ffa7b19 100644
--- a/app/assets/scripts/components/common/page-header.js
+++ b/app/assets/scripts/components/common/page-header.js
@@ -29,7 +29,7 @@ const PageHead = styled.header`
 
 const PageHeadInner = styled.div`
   display: flex;
-  padding: ${glsp()};
+  padding: ${glsp(0.75)};
   align-items: center;
   margin: 0 auto;
   height: 100%;

From 2fbb9ce333b4459d4fe1a75ad2464d8a38d494b8 Mon Sep 17 00:00:00 2001
From: Ricardo Mestre <ricardo@duplos.org>
Date: Tue, 19 May 2020 23:54:49 +0100
Subject: [PATCH 07/35] Tweak page title typography

---
 app/assets/scripts/components/common/page-header.js | 5 +++--
 app/assets/scripts/styles/theme/theme.js            | 8 ++++----
 app/index.html                                      | 2 +-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/assets/scripts/components/common/page-header.js b/app/assets/scripts/components/common/page-header.js
index 9ffa7b19..c3822a95 100644
--- a/app/assets/scripts/components/common/page-header.js
+++ b/app/assets/scripts/components/common/page-header.js
@@ -77,8 +77,8 @@ const PageTitle = styled.h1`
 
   sup {
     grid-row: 1;
-    font-size: 0.75rem;
-    font-weight: ${themeVal('type.base.bold')};
+    font-size: 0.875rem;
+    font-weight: ${themeVal('type.base.extrabold')};
     line-height: 1rem;
     text-transform: uppercase;
     align-self: end;
@@ -96,6 +96,7 @@ const PageTitle = styled.h1`
     line-height: 1.5rem;
     font-weight: ${themeVal('type.base.light')};
     align-self: center;
+    letter-spacing: -0.025em;
   }
 
   sub {
diff --git a/app/assets/scripts/styles/theme/theme.js b/app/assets/scripts/styles/theme/theme.js
index aa32079a..f7b60a42 100644
--- a/app/assets/scripts/styles/theme/theme.js
+++ b/app/assets/scripts/styles/theme/theme.js
@@ -44,19 +44,19 @@ const type = {
     light: 300,
     regular: 400,
     medium: 400,
-    semibold: 600,
     bold: 700,
+    extrabold: 800,
     antialiasing: true
   },
   heading: {
     family: '"Open Sans", sans-serif',
     style: 'normal',
-    weight: 600,
+    weight: 700,
     light: 300,
     regular: 400,
     medium: 400,
-    semibold: 600,
-    bold: 700
+    bold: 700,
+    extrabold: 800
   }
 };
 
diff --git a/app/index.html b/app/index.html
index d746a938..89a2be0a 100644
--- a/app/index.html
+++ b/app/index.html
@@ -37,7 +37,7 @@
     <!-- endbuild -->
 
     <link rel='author' type='text/plain' href='humans.txt' />
-    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,600;1,700&display=swap' />
+    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap' />
 
     <style>
       #welcome-banner {

From e7f34b7f1fc01c8263ac268d39e0869f5ec6f727 Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Wed, 20 May 2020 15:53:52 +0100
Subject: [PATCH 08/35] Add version from package to page header

---
 app/assets/scripts/config.js | 1 +
 gulpfile.js                  | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/app/assets/scripts/config.js b/app/assets/scripts/config.js
index 211211a9..d405cd7e 100644
--- a/app/assets/scripts/config.js
+++ b/app/assets/scripts/config.js
@@ -31,6 +31,7 @@ if (process.env.NODE_ENV === 'development') {
 }
 
 config.default.baseUrl = process.env.BASEURL || '';
+config.default.appVersion = process.env.APP_VERSION || '0.0.0';
 
 // The require doesn't play super well with es6 imports. It creates an internal
 // 'default' property. Export that.
diff --git a/gulpfile.js b/gulpfile.js
index 592e2394..9be83547 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -44,6 +44,9 @@ if (process.env.CIRCLE_BRANCH) {
 const isDev = () => process.env.NODE_ENV === 'development';
 const readPackage = () => JSON.parse(fs.readFileSync('package.json'));
 
+// Set the version in an env variable so it gets replaced in the config.
+process.env.APP_VERSION = readPackage().version;
+
 // /////////////////////////////////////////////////////////////////////////////
 // ------------------------- Callable tasks ----------------------------------//
 // ---------------------------------------------------------------------------//

From 08f635f5bc514c05e56bb353d55ccf4e4e5c1b0a Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Wed, 20 May 2020 15:57:23 +0100
Subject: [PATCH 09/35] Add adjustable color range chart

---
 .../common/gradient-legend-chart/chart.js     | 128 ++++++++++++++++++
 .../gradient-legend-chart/knob.layer.js       |  61 +++++++++
 .../gradient-legend-chart/track.layer.js      |  89 ++++++++++++
 3 files changed, 278 insertions(+)
 create mode 100644 app/assets/scripts/components/common/gradient-legend-chart/chart.js
 create mode 100644 app/assets/scripts/components/common/gradient-legend-chart/knob.layer.js
 create mode 100644 app/assets/scripts/components/common/gradient-legend-chart/track.layer.js

diff --git a/app/assets/scripts/components/common/gradient-legend-chart/chart.js b/app/assets/scripts/components/common/gradient-legend-chart/chart.js
new file mode 100644
index 00000000..d9f7ae5b
--- /dev/null
+++ b/app/assets/scripts/components/common/gradient-legend-chart/chart.js
@@ -0,0 +1,128 @@
+import React from 'react';
+import styled from 'styled-components';
+import * as d3 from 'd3';
+
+import SizeAwareElement from '../../common/size-aware-element';
+
+import trackLayer from './track.layer';
+import knobLayer from './knob.layer';
+
+const ChartWrapper = styled.div`
+  flex-grow: 1;
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 0.5rem;
+  }
+
+  ${trackLayer.styles}
+  ${knobLayer.styles}
+`;
+
+class DataBrowserChart extends React.Component {
+  constructor (props) {
+    super(props);
+    this.margin = { top: 0, right: 4, bottom: 0, left: 4 };
+    // Control whether the chart was rendered.
+    // The size aware element fires a onChange event once it is rendered
+    // But at that time the chart is not ready yet so we can't update the size.
+    this.initialized = false;
+
+    this.container = null;
+    this.svg = null;
+    this.dataCanvas = null;
+
+    this.resizeListener = this.resizeListener.bind(this);
+
+    this.trackSize = 8;
+  }
+
+  componentDidMount () {
+    this.initChart();
+    this.updateChart();
+    this.initialized = true;
+  }
+
+  componentDidUpdate (prevProps, prevState) {
+    this.updateChart();
+  }
+
+  resizeListener () {
+    if (!this.initialized) return;
+    this.updateChart();
+  }
+
+  getSize () {
+    if (!this.container) return { width: 0, height: 0 };
+    const { top, bottom, right, left } = this.margin;
+    const { width, height } = this.container.getSize();
+    return {
+      width: parseInt(width, 10) - left - right,
+      height: parseInt(height, 10) - top - bottom
+    };
+  }
+
+  initChart () {
+    const { top, left } = this.margin;
+    const containerEl = this.container.elRef.current;
+
+    this.svg = d3
+      .select(containerEl)
+      .append('svg')
+      .attr('class', 'chart');
+
+    // SVG definitions.
+    this.svg.append('defs');
+
+    this.dataCanvas = this.svg
+      .append('g')
+      .attr('class', 'data-canvas')
+      .attr('transform', `translate(${left},${top})`);
+
+    trackLayer.init(this);
+    knobLayer.init(this);
+  }
+
+  updateChart () {
+    const { top, bottom, right, left } = this.margin;
+    const { width, height } = this.getSize();
+    const { svg, dataCanvas } = this;
+
+    // ---------------------------------------------------
+    // Functions
+    this.xScale = d3
+      .scaleLinear()
+      .domain([0, 100])
+      .range([0, width]);
+
+    // ---------------------------------------------------
+    // Size updates
+    svg
+      .attr('width', width + left + right)
+      .attr('height', height + top + bottom);
+
+    dataCanvas.attr('width', width).attr('height', height);
+
+    trackLayer.update(this);
+    knobLayer.update(this);
+  }
+
+  render () {
+    return (
+      <SizeAwareElement
+        element={ChartWrapper}
+        trackSize={this.trackSize}
+        ref={el => {
+          this.container = el;
+        }}
+        onChange={this.resizeListener}
+      />
+    );
+  }
+}
+
+DataBrowserChart.propTypes = {
+};
+
+export default DataBrowserChart;
diff --git a/app/assets/scripts/components/common/gradient-legend-chart/knob.layer.js b/app/assets/scripts/components/common/gradient-legend-chart/knob.layer.js
new file mode 100644
index 00000000..5c2c82dd
--- /dev/null
+++ b/app/assets/scripts/components/common/gradient-legend-chart/knob.layer.js
@@ -0,0 +1,61 @@
+import * as d3 from 'd3';
+import { css } from 'styled-components';
+
+const styles = props => css`
+  .knob {
+    pointer-events: none;
+    fill: #fff;
+  }
+
+  .knob-ghost {
+    fill: #fff;
+    fill-opacity: 0.32;
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+`;
+
+export default {
+  styles,
+  init: ctx => {
+    const controls = ctx.dataCanvas.append('g')
+      .attr('class', 'controls');
+
+    controls.append('circle')
+      .attr('class', 'knob-ghost')
+      .attr('r', 6);
+
+    controls.append('circle')
+      .attr('class', 'knob')
+      .attr('r', 3);
+  },
+
+  update: ctx => {
+    const { dataCanvas, props, xScale, trackSize } = ctx;
+    const { width, height } = ctx.getSize();
+
+    const dragEvent = (end) => {
+      const newPos = Math.max(0, Math.min(d3.event.x, width));
+      ctx.props.onAction('knob.set', {
+        value: Math.round(xScale.invert(newPos)),
+        end
+      });
+    };
+
+    const dragger = d3.drag()
+      .on('drag', () => dragEvent())
+      .on('end', () => dragEvent(true));
+
+    dataCanvas.select('.knob')
+      .attr('cx', xScale(props.knobPos))
+      .attr('cy', height - trackSize / 2);
+
+    dataCanvas.select('.knob-ghost')
+      .attr('cx', xScale(props.knobPos))
+      .attr('cy', height - trackSize / 2)
+      .call(dragger);
+  }
+};
diff --git a/app/assets/scripts/components/common/gradient-legend-chart/track.layer.js b/app/assets/scripts/components/common/gradient-legend-chart/track.layer.js
new file mode 100644
index 00000000..3a70d229
--- /dev/null
+++ b/app/assets/scripts/components/common/gradient-legend-chart/track.layer.js
@@ -0,0 +1,89 @@
+import * as d3 from 'd3';
+import { css } from 'styled-components';
+
+const styles = props => css`
+  .track {
+    stroke-width: ${({ trackSize }) => trackSize}px;
+    stroke: url(#trackGradient);
+    stroke-linecap: round;
+  }
+`;
+
+export default {
+  styles,
+  init: ctx => {
+    ctx.dataCanvas
+      .append('g').attr('class', 'track-layer')
+      .append('line')
+      .attr('class', 'track');
+
+    ctx.svg.select('defs')
+      .append('linearGradient')
+      .attr('id', 'trackGradient')
+      .attr('gradientUnits', 'userSpaceOnUse');
+  },
+
+  update: ctx => {
+    const { dataCanvas, props, trackSize } = ctx;
+    const { width, height } = ctx.getSize();
+
+    // The change of the midpoint (from base) changes all the stops.
+    const midPointDiff = (props.knobPos - 50) / 100;
+    // Create a scale for the stops. The input value will be a position from
+    // 0 - 1, which correspond to the original position of the color stop.
+    // As the midpoint changes the position of the color stops will change
+    // according to their original place and the midpoint delta.
+    // Example
+    // 1st stop: 25%
+    // 2nd stop: 50%
+    // 3rd stop: 75%
+    // If the midpoint moves from 50 to 75, its position increased 1.5 times,
+    // but the stops cannot increase 1.5 times, otherwise the 75% would go over.
+    // The scale takes care of keeping the values bound to the domain.
+    const stopScale = d3
+      .scaleLinear()
+      .domain([0, 1])
+      .range([Math.max(0, midPointDiff), Math.min(1, 1 + midPointDiff)]);
+
+    const trackGradient = ctx.svg.select('#trackGradient');
+
+    // Set the gradient size so it matched the element is being used on.
+    // Used in conjunction with gradientUnits='userSpaceOnUse'
+    // https://stackoverflow.com/questions/21638169/svg-line-with-gradient-stroke-wont-display-straight
+    trackGradient
+      .attr('x1', 0)
+      .attr('y1', 0)
+      .attr('x2', width)
+      .attr('y2', height);
+
+    const gradientStops = trackGradient.selectAll('.stop').data(props.stops);
+    // Remove old.
+    gradientStops.exit().remove();
+    // Handle new.
+    gradientStops
+      .enter()
+      .append('stop')
+      .attr('class', 'stop')
+      .attr('stop-opacity', 1)
+      .attr('stop-color', d => d)
+      .merge(gradientStops)
+      // Update current.
+      .attr('offset', (d, i, all) => {
+        if (i === 0) return 0;
+        if (i === all.length - 1) return 1;
+        const count = all.length - 1;
+        const pointOriginalPosition = 1 / count * i;
+        return stopScale(pointOriginalPosition);
+      });
+
+    const gradientTrack = dataCanvas.select('.track');
+
+    gradientTrack
+      .attr('x1', 0)
+      // Half the size of the line.
+      .attr('y1', height - trackSize / 2)
+      .attr('x2', width)
+      // Half the size of the line.
+      .attr('y2', height - trackSize / 2);
+  }
+};

From 58d6bba2f40ebfb7c8ae2bcf167d1ed3f6ea7cf4 Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Wed, 20 May 2020 16:04:46 +0100
Subject: [PATCH 10/35] Add adjustable gradient legend type

---
 .../components/common/size-aware-element.js   |   2 +-
 .../components/home/data-layers-block.js      |   4 +-
 app/assets/scripts/components/home/index.js   |  83 +++++++----
 app/assets/scripts/components/home/layer.js   | 135 +++++++++++-------
 4 files changed, 143 insertions(+), 81 deletions(-)

diff --git a/app/assets/scripts/components/common/size-aware-element.js b/app/assets/scripts/components/common/size-aware-element.js
index e0f32719..2aca4e01 100644
--- a/app/assets/scripts/components/common/size-aware-element.js
+++ b/app/assets/scripts/components/common/size-aware-element.js
@@ -56,7 +56,7 @@ class SizeAwareElement extends React.Component {
 
 SizeAwareElement.propTypes = {
   onChange: T.func,
-  element: T.string,
+  element: T.elementType,
   children: T.node
 };
 
diff --git a/app/assets/scripts/components/home/data-layers-block.js b/app/assets/scripts/components/home/data-layers-block.js
index 680528bc..db573b11 100644
--- a/app/assets/scripts/components/home/data-layers-block.js
+++ b/app/assets/scripts/components/home/data-layers-block.js
@@ -39,12 +39,14 @@ class DataLayersBlock extends React.Component {
                         active={l.visible}
                         swatchColor={get(l, 'swatch.color')}
                         swatchName={get(l, 'swatch.name')}
-                        mapStyle={l.mapStyle}
+                        dataOrder={l.dataOrder}
                         info={l.info}
                         legend={l.legend}
                         isExpanded={checkExpanded(idx)}
                         setExpanded={v => setExpanded(idx, v)}
                         onToggleClick={() => onAction('layer.toggle', l)}
+                        onLegendKnobChange={(payload) => onAction('layer.legend-knob', { id: l.id, ...payload })}
+                        knobPos={l.knobPos}
                       />
                     </li>
                   ))}
diff --git a/app/assets/scripts/components/home/index.js b/app/assets/scripts/components/home/index.js
index 51d6f98d..fb8d9c34 100644
--- a/app/assets/scripts/components/home/index.js
+++ b/app/assets/scripts/components/home/index.js
@@ -2,8 +2,8 @@ import React from 'react';
 import T from 'prop-types';
 import styled from 'styled-components';
 import { connect } from 'react-redux';
-// import { Redirect } from 'react-router';
 import { format, isBefore, sub } from 'date-fns';
+import get from 'lodash.get';
 
 import App from '../common/app';
 import ExpMapPrimePanel from './prime-panel';
@@ -26,7 +26,6 @@ import {
   fetchTimeSeriesDaily as fetchTimeSeriesDailyAction,
   fetchTimeSeriesOverview as fetchTimeSeriesOverviewAction
 } from '../../redux/time-series';
-import { fetchLayerData as fetchLayerDataAction } from '../../redux/layer-data';
 import { wrapApiResult, getFromState } from '../../redux/reduxeed';
 import {
   fetchCogTimeData as fetchCogTimeDataAction,
@@ -106,6 +105,10 @@ class Home extends React.Component {
 
     this.state = {
       activeLayers: [],
+      // Additional data that needs to be tracked for the map layers, like the
+      // knob position on a adjustable gradient legend.
+      // Values will be objects keyed by the layer id.
+      layersSettings: {},
       timelineDate: null,
       mapLoaded: false,
       compare: false,
@@ -124,11 +127,16 @@ class Home extends React.Component {
   }
 
   getLayersWithState () {
-    const { activeLayers } = this.state;
-    return mapLayers.map((l) => ({
-      ...l,
-      visible: activeLayers.includes(l.id)
-    }));
+    const { activeLayers, layersSettings } = this.state;
+    return mapLayers.map((l) => {
+      // Get additional propertied from the layerData array.
+      const extra = layersSettings[l.id] || {};
+      return {
+        ...l,
+        visible: activeLayers.includes(l.id),
+        ...extra
+      };
+    });
   }
 
   resizeMap () {
@@ -165,6 +173,22 @@ class Home extends React.Component {
       case 'layer.toggle':
         this.toggleLayer(payload);
         break;
+      case 'layer.legend-knob':
+        this.setState(state => ({
+          layersSettings: {
+            ...state.layersSettings,
+            [payload.id]: {
+              ...state.layersSettings[payload.id],
+              knobPos: payload.value,
+              // If the event was the end of a drag, set the current value for
+              // the map to pick up.
+              knobCurrPos: payload.end
+                ? payload.value
+                : get(state, ['layersSettings', payload.id, 'knobCurrPos'])
+            }
+          }
+        }));
+        break;
       case 'compare.set':
         this.setState({ compare: payload.compare });
         break;
@@ -284,26 +308,12 @@ class Home extends React.Component {
   }
 
   async toggleLayer (layer) {
-    const { layerData, fetchLayerData, fetchTimeSeriesOverview } = this.props;
+    const { fetchTimeSeriesOverview } = this.props;
     const layerId = layer.id;
 
     const { activeLayers } = this.state;
     const isEnabled = activeLayers.includes(layerId);
 
-    if (layer.type === 'feature-data') {
-      // Check if there layer data for this layer.
-      // If not, load the data and only enable the layer if successful.
-      const data = layerData[layerId];
-      if (!data || data.hasError()) {
-        showGlobalLoading();
-        const res = await fetchLayerData(layerId);
-        hideGlobalLoading();
-        if (res.error) return;
-      } else if (!data.isReady()) {
-        return;
-      }
-    }
-
     if (layer.type === 'timeseries') {
       // Check if there layer data for this layer.
       // If not, load the data and only enable the layer if successful.
@@ -338,7 +348,27 @@ class Home extends React.Component {
     }
 
     if (layer.type === 'raster-timeseries') {
-      this.setState({ timelineDate: utcDate(layer.domain[1]) });
+      this.setState(state => {
+        // Check if there's a knob value set. If not, means that this is the
+        // first time it is enabled and we need to set a default.
+        const knobCurrPos = get(state, ['layersSettings', layer.id, 'knobCurrPos'], null);
+        const knobData = knobCurrPos === null
+          ? {
+            knobPos: 50,
+            knobCurrPos: 50
+          }
+          : {};
+        return {
+          timelineDate: utcDate(layer.domain[1]),
+          layersSettings: {
+            ...state.layersSettings,
+            [layer.id]: {
+              ...state.layersSettings[layer.id],
+              ...knobData
+            }
+          }
+        };
+      });
     }
 
     // Hide any layers that are not compatible with the current one.
@@ -376,7 +406,6 @@ class Home extends React.Component {
   }
 
   render () {
-    const { layerData } = this.props;
     const adminAreaFeatId = this.props.match.params.id;
 
     const layers = this.getLayersWithState();
@@ -409,7 +438,7 @@ class Home extends React.Component {
                   onAction={this.onMapAction}
                   layers={layers}
                   activeLayers={this.state.activeLayers}
-                  layerData={layerData}
+                  layerData={this.state.layersSettings}
                   selectedAdminArea={adminAreaFeatId}
                   date={this.state.timelineDate}
                   aoiState={this.state.aoi}
@@ -450,13 +479,11 @@ Home.propTypes = {
   // fetchConfig: T.func,
   // fetchAdminAreas: T.func,
   // fetchSingleAdminArea: T.func,
-  fetchLayerData: T.func,
   fetchTimeSeriesDaily: T.func,
   fetchTimeSeriesOverview: T.func,
   fetchCogTimeData: T.func,
   invalidateCogTimeData: T.func,
   match: T.object,
-  layerData: T.object,
   // timeSeriesDaily: T.object,
   timeSeriesOverview: T.object,
   no2CogTimeData: T.object
@@ -464,7 +491,6 @@ Home.propTypes = {
 
 function mapStateToProps (state, props) {
   return {
-    layerData: wrapApiResult(state.layerData, true),
     timeSeriesDaily: wrapApiResult(state.timeSeries.daily, true),
     timeSeriesOverview: wrapApiResult(state.timeSeries.overview, true),
     no2CogTimeData: wrapApiResult(getFromState(state, ['cogTimeData', 'no2']))
@@ -472,7 +498,6 @@ function mapStateToProps (state, props) {
 }
 
 const mapDispatchToProps = {
-  fetchLayerData: fetchLayerDataAction,
   fetchTimeSeriesDaily: fetchTimeSeriesDailyAction,
   fetchTimeSeriesOverview: fetchTimeSeriesOverviewAction,
   fetchCogTimeData: fetchCogTimeDataAction,
diff --git a/app/assets/scripts/components/home/layer.js b/app/assets/scripts/components/home/layer.js
index 5ae02da2..b03b4932 100644
--- a/app/assets/scripts/components/home/layer.js
+++ b/app/assets/scripts/components/home/layer.js
@@ -5,12 +5,14 @@ import styled from 'styled-components';
 import { themeVal } from '../../styles/utils/general';
 import { visuallyHidden, truncated } from '../../styles/helpers';
 import { glsp } from '../../styles/utils/theme-values';
-import Prose from '../../styles/type/prose';
 import { headingAlt } from '../../styles/type/heading';
-import Button from '../../styles/button/button';
+import { formatThousands } from '../../utils/format';
+
+import Prose from '../../styles/type/prose';
 import { FormSwitch } from '../../styles/form/switch';
+import Button from '../../styles/button/button';
 import { AccordionFold } from '../common/accordion';
-import { formatThousands } from '../../utils/format';
+import GradientChart from '../common/gradient-legend-chart/chart';
 
 const makeGradient = (stops) => {
   const d = 100 / stops.length - 1;
@@ -47,10 +49,6 @@ const LayerTitle = styled.h1`
 const LayerSubtitle = styled.p`
   ${visuallyHidden()}
 `;
-  // ${headingAlt()}
-  // ${truncated()}
-  // font-size: 0.75rem;
-  // line-height: 1rem;
 
 const LayerSwatch = styled.span`
   position: absolute;
@@ -85,16 +83,6 @@ const LayerLegend = styled.div`
   grid-row: 2;
   grid-column: 1 / span 2;
 
-  dt {
-    display: block;
-    font-size: 0;
-    height: 0.5rem;
-    border-radius: ${themeVal('shape.rounded')};
-    background: ${({ stops }) => makeGradient(stops)};
-    margin: 0 0 ${glsp(1 / 8)} 0;
-    box-shadow: inset 0 0 0 1px ${themeVal('color.baseAlphaB')};
-  }
-
   dd {
     ${headingAlt()}
     font-size: 0.75rem;
@@ -108,6 +96,16 @@ const LayerLegend = styled.div`
   }
 `;
 
+const LayerLegendGradientTrack = styled.dt`
+  display: block;
+  font-size: 0;
+  height: 0.5rem;
+  border-radius: ${themeVal('shape.rounded')};
+  background: ${({ stops }) => makeGradient(stops)};
+  margin: 0 0 ${glsp(1 / 8)} 0;
+  box-shadow: inset 0 0 0 1px ${themeVal('color.baseAlphaB')};
+`;
+
 const LayerLegendTitle = styled.h2`
   ${visuallyHidden()}
 `;
@@ -134,29 +132,22 @@ const typesSubtitles = {
 };
 
 class Layer extends React.Component {
-  render () {
+  renderLegend () {
     const {
-      id,
-      label,
-      type,
-      disabled,
-      active,
-      swatchColor,
-      swatchName,
-      mapStyle,
-      info,
+      dataOrder,
       legend,
-      onToggleClick,
-      isExpanded,
-      setExpanded
+      knobPos,
+      onLegendKnobChange
     } = this.props;
 
+    if (!legend) return null;
+
     let defaultStops;
     // Two default styles:
-    // - pos-neg - where a high value needs to be highlighted (high % of 65+)
-    // - neg-pos - where low values are highlighted (m2 living area per person)
-    switch (mapStyle) {
-      case ('neg-pos'):
+    // - highlight-high - where a high value needs to be highlighted (high % of 65+)
+    // - highlight-low - where low values are highlighted (m2 living area per person)
+    switch (dataOrder) {
+      case ('highlight-low'):
         defaultStops = [
           'hsla(105, 91%, 67%, 0.69)',
           'hsla(173, 75%, 66%, 0.69)',
@@ -175,10 +166,64 @@ class Layer extends React.Component {
         ];
     }
 
-    const stops = legend && legend.stops && legend.stops !== 'default'
+    const stops = legend.stops && legend.stops !== 'default'
       ? legend.stops
       : defaultStops;
 
+    if (legend.type === 'gradient-adjustable') {
+      return (
+        <LayerLegend>
+          <LayerLegendTitle>Legend</LayerLegendTitle>
+          <dl>
+            <dt>
+              <GradientChart
+                onAction={(a, p) => {
+                  onLegendKnobChange(p);
+                }}
+                stops={stops}
+                knobPos={knobPos !== undefined ? knobPos : 50}
+              />
+            </dt>
+            <dd>
+              <span>{printLegendVal(legend.min)}</span>
+              <i> – </i>
+              <span>{printLegendVal(legend.max)}</span>
+            </dd>
+          </dl>
+        </LayerLegend>
+      );
+    }
+
+    return (
+      <LayerLegend>
+        <LayerLegendTitle>Legend</LayerLegendTitle>
+        <dl>
+          <LayerLegendGradientTrack stops={stops}>Gradient</LayerLegendGradientTrack>
+          <dd>
+            <span>{printLegendVal(legend.min)}</span>
+            <i> – </i>
+            <span>{printLegendVal(legend.max)}</span>
+          </dd>
+        </dl>
+      </LayerLegend>
+    );
+  }
+
+  render () {
+    const {
+      id,
+      label,
+      type,
+      disabled,
+      active,
+      swatchColor,
+      swatchName,
+      info,
+      onToggleClick,
+      isExpanded,
+      setExpanded
+    } = this.props;
+
     return (
       <LayerSelf
         forwardedAs='article'
@@ -216,19 +261,7 @@ class Layer extends React.Component {
                 Toggle layer visibility
               </FormSwitch>
             </LayerToolbar>
-            {legend && (
-              <LayerLegend stops={stops}>
-                <LayerLegendTitle>Legend</LayerLegendTitle>
-                <dl>
-                  <dt>Gradient</dt>
-                  <dd>
-                    <span>{printLegendVal(legend.min)}</span>
-                    <i> – </i>
-                    <span>{printLegendVal(legend.max)}</span>
-                  </dd>
-                </dl>
-              </LayerLegend>
-            )}
+            {this.renderLegend()}
           </LayerHeader>
         )}
         renderBody={() => (
@@ -249,12 +282,14 @@ Layer.propTypes = {
   active: T.bool,
   swatchColor: T.string,
   swatchName: T.string,
-  mapStyle: T.string,
+  dataOrder: T.string,
   info: T.node,
   legend: T.object,
   onToggleClick: T.func,
   isExpanded: T.bool,
-  setExpanded: T.func
+  setExpanded: T.func,
+  onLegendKnobChange: T.func,
+  knobPos: T.number
 };
 
 export default Layer;

From 9b79f4ce141b1151a9434616bf08ef9f9aef8b58 Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Wed, 20 May 2020 16:05:04 +0100
Subject: [PATCH 11/35] Add gamma parameter to no2 layer

---
 .../components/common/layers/layer-no2.js     |  4 +--
 .../scripts/components/common/layers/types.js | 34 ++++++++++++++++---
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/app/assets/scripts/components/common/layers/layer-no2.js b/app/assets/scripts/components/common/layers/layer-no2.js
index 33e50301..f60b23e4 100644
--- a/app/assets/scripts/components/common/layers/layer-no2.js
+++ b/app/assets/scripts/components/common/layers/layer-no2.js
@@ -10,7 +10,7 @@ export default {
   source: {
     type: 'raster',
     tiles: [
-      'https://h4ymwpefng.execute-api.us-east-1.amazonaws.com/v1/{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=magma'
+      'https://h4ymwpefng.execute-api.us-east-1.amazonaws.com/v1/{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=magma&color_formula=gamma r {gamma}'
     ]
   },
   swatch: {
@@ -18,7 +18,7 @@ export default {
     name: 'Purple'
   },
   legend: {
-    type: 'gradient',
+    type: 'gradient-adjustable',
     min: 'less',
     max: 'more',
     stops: [
diff --git a/app/assets/scripts/components/common/layers/types.js b/app/assets/scripts/components/common/layers/types.js
index 0f20a532..c38a00cc 100644
--- a/app/assets/scripts/components/common/layers/types.js
+++ b/app/assets/scripts/components/common/layers/types.js
@@ -1,10 +1,30 @@
 import { format, sub } from 'date-fns';
+import get from 'lodash.get';
 
 const prepDateSource = (source, date) => ({
   ...source,
   tiles: source.tiles.map((t) => t.replace('{date}', format(date, 'yyyyMM')))
 });
 
+const prepGammaSource = (source, knobPos) => {
+  // Gamma is calculated with the following scale:
+  // domain: 0-100  range: 2-0
+  // The higher the Knob, the lower the gamma.
+  // This is a linear scale of type y = -mx + b
+  // y = -0.02x + 2;
+
+  return {
+    ...source,
+    tiles: source.tiles.map((t) => t.replace('{gamma}', -0.02 * knobPos + 2))
+  };
+};
+
+const prepSource = (source, date, knobPos) => {
+  source = prepDateSource(source, date);
+  source = prepGammaSource(source, knobPos);
+  return source;
+};
+
 const replaceRasterTiles = (theMap, sourceId, tiles) => {
   // https://github.com/mapbox/mapbox-gl-js/issues/2941
   // Set the tile url to a cache-busting url (to circumvent browser caching behaviour):
@@ -24,18 +44,23 @@ export const layerTypes = {
       const { id, source } = layerInfo;
       const { date, compare } = props;
 
+      const knobPos = get(props, ['layerData', id, 'knobCurrPos']);
+      const knobPosPrev = get(prevProps, ['layerData', id, 'knobCurrPos']);
+
       if (
         prevProps.date &&
         date.getTime() === prevProps.date.getTime() &&
-        compare === prevProps.compare
+        compare === prevProps.compare &&
+        knobPos === knobPosPrev
       ) { return; }
 
       if (mbMap.getSource(id)) {
-        const tiles = prepDateSource(source, date).tiles;
+        const tiles = prepSource(source, date, knobPos).tiles;
+
         replaceRasterTiles(mbMap, id, tiles);
 
         if (compare) {
-          const source5years = prepDateSource(source, sub(date, { years: 5 }));
+          const source5years = prepSource(source, sub(date, { years: 5 }), knobPos);
           if (mbMapComparing.getSource(id)) {
             replaceRasterTiles(mbMapComparing, id, source5years.tiles);
           } else {
@@ -72,7 +97,8 @@ export const layerTypes = {
       if (mbMap.getSource(id)) {
         mbMap.setLayoutProperty(id, 'visibility', 'visible');
       } else {
-        mbMap.addSource(id, prepDateSource(source, date));
+        const knobPos = get(props, ['layerData', id, 'knobCurrPos']);
+        mbMap.addSource(id, prepSource(source, date, knobPos));
         mbMap.addLayer(
           {
             id: id,

From 27045ca21da17d8b55da5a1dd821f96318b6fdf3 Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Wed, 20 May 2020 17:00:13 +0100
Subject: [PATCH 12/35] Add stop calculation if there are only 2

---
 .../common/gradient-legend-chart/knob.layer.js | 12 +++++++++++-
 .../gradient-legend-chart/track.layer.js       | 18 +++++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/app/assets/scripts/components/common/gradient-legend-chart/knob.layer.js b/app/assets/scripts/components/common/gradient-legend-chart/knob.layer.js
index 5c2c82dd..b65bd91c 100644
--- a/app/assets/scripts/components/common/gradient-legend-chart/knob.layer.js
+++ b/app/assets/scripts/components/common/gradient-legend-chart/knob.layer.js
@@ -26,7 +26,17 @@ export default {
 
     controls.append('circle')
       .attr('class', 'knob-ghost')
-      .attr('r', 6);
+      .attr('r', 6)
+      .on('mouseover', () => {
+        d3.select('.controls .knob')
+          .transition()
+          .attr('r', 5);
+      })
+      .on('mouseout', () => {
+        d3.select('.controls .knob')
+          .transition()
+          .attr('r', 3);
+      });
 
     controls.append('circle')
       .attr('class', 'knob')
diff --git a/app/assets/scripts/components/common/gradient-legend-chart/track.layer.js b/app/assets/scripts/components/common/gradient-legend-chart/track.layer.js
index 3a70d229..198ec9d4 100644
--- a/app/assets/scripts/components/common/gradient-legend-chart/track.layer.js
+++ b/app/assets/scripts/components/common/gradient-legend-chart/track.layer.js
@@ -56,7 +56,23 @@ export default {
       .attr('x2', width)
       .attr('y2', height);
 
-    const gradientStops = trackGradient.selectAll('.stop').data(props.stops);
+    // We always need at lest 3 stops, since the first and last are fixed it's
+    // the middle one that moved and makes the gradient shift.
+    // When we only have 2, we need to infer the middle one.
+    let stops = props.stops;
+    if (stops.length === 2) {
+      const stopsScale = d3.scaleLinear()
+        .domain([0, 100])
+        .range(stops);
+
+      stops = [
+        stops[0],
+        stopsScale(50),
+        stops[1]
+      ];
+    }
+
+    const gradientStops = trackGradient.selectAll('.stop').data(stops);
     // Remove old.
     gradientStops.exit().remove();
     // Handle new.

From 28d12e4da9a19d3db14371f9f6b9e2abd11b7085 Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Wed, 20 May 2020 17:59:15 +0100
Subject: [PATCH 13/35] Change knob

---
 .../common/gradient-legend-chart/chart.js     |  4 +-
 .../gradient-legend-chart/knob.layer.js       | 48 ++++++++-----------
 .../scripts/components/common/layers/types.js |  4 +-
 3 files changed, 25 insertions(+), 31 deletions(-)

diff --git a/app/assets/scripts/components/common/gradient-legend-chart/chart.js b/app/assets/scripts/components/common/gradient-legend-chart/chart.js
index d9f7ae5b..c983b8b6 100644
--- a/app/assets/scripts/components/common/gradient-legend-chart/chart.js
+++ b/app/assets/scripts/components/common/gradient-legend-chart/chart.js
@@ -13,7 +13,7 @@ const ChartWrapper = styled.div`
   svg {
     display: block;
     width: 100%;
-    height: 0.5rem;
+    height: 1.25rem;
   }
 
   ${trackLayer.styles}
@@ -23,7 +23,7 @@ const ChartWrapper = styled.div`
 class DataBrowserChart extends React.Component {
   constructor (props) {
     super(props);
-    this.margin = { top: 0, right: 4, bottom: 0, left: 4 };
+    this.margin = { top: 0, right: 8, bottom: 0, left: 8 };
     // Control whether the chart was rendered.
     // The size aware element fires a onChange event once it is rendered
     // But at that time the chart is not ready yet so we can't update the size.
diff --git a/app/assets/scripts/components/common/gradient-legend-chart/knob.layer.js b/app/assets/scripts/components/common/gradient-legend-chart/knob.layer.js
index b65bd91c..d23cd23f 100644
--- a/app/assets/scripts/components/common/gradient-legend-chart/knob.layer.js
+++ b/app/assets/scripts/components/common/gradient-legend-chart/knob.layer.js
@@ -1,15 +1,15 @@
 import * as d3 from 'd3';
 import { css } from 'styled-components';
+import { tint } from 'polished';
+
+import { themeVal, stylizeFunction } from '../../../styles/utils/general';
+
+const _tint = stylizeFunction(tint);
 
 const styles = props => css`
   .knob {
-    pointer-events: none;
-    fill: #fff;
-  }
-
-  .knob-ghost {
     fill: #fff;
-    fill-opacity: 0.32;
+    stroke: ${_tint(0.48, themeVal('color.base'))};
     cursor: grab;
 
     &:active {
@@ -18,29 +18,28 @@ const styles = props => css`
   }
 `;
 
+const knobSize = 10;
+const knobTip = knobSize * 1.5;
+const knobPoints = [
+  [0, 0],
+  [knobSize, 0],
+  [knobSize, knobSize],
+  [knobSize / 2, knobTip],
+  [0, knobSize],
+  [0, 0]
+];
+
 export default {
   styles,
   init: ctx => {
     const controls = ctx.dataCanvas.append('g')
       .attr('class', 'controls');
 
-    controls.append('circle')
-      .attr('class', 'knob-ghost')
-      .attr('r', 6)
-      .on('mouseover', () => {
-        d3.select('.controls .knob')
-          .transition()
-          .attr('r', 5);
-      })
-      .on('mouseout', () => {
-        d3.select('.controls .knob')
-          .transition()
-          .attr('r', 3);
-      });
+    const knob = d3.line();
 
-    controls.append('circle')
+    controls.append('path')
       .attr('class', 'knob')
-      .attr('r', 3);
+      .attr('d', knob(knobPoints));
   },
 
   update: ctx => {
@@ -60,12 +59,7 @@ export default {
       .on('end', () => dragEvent(true));
 
     dataCanvas.select('.knob')
-      .attr('cx', xScale(props.knobPos))
-      .attr('cy', height - trackSize / 2);
-
-    dataCanvas.select('.knob-ghost')
-      .attr('cx', xScale(props.knobPos))
-      .attr('cy', height - trackSize / 2)
+      .attr('transform', `translate(${xScale(props.knobPos) - knobSize / 2}, ${height - trackSize / 2 - knobTip})`)
       .call(dragger);
   }
 };
diff --git a/app/assets/scripts/components/common/layers/types.js b/app/assets/scripts/components/common/layers/types.js
index c38a00cc..2ce3ee4d 100644
--- a/app/assets/scripts/components/common/layers/types.js
+++ b/app/assets/scripts/components/common/layers/types.js
@@ -8,14 +8,14 @@ const prepDateSource = (source, date) => ({
 
 const prepGammaSource = (source, knobPos) => {
   // Gamma is calculated with the following scale:
-  // domain: 0-100  range: 2-0
+  // domain: 0-100  range: 2-0.1
   // The higher the Knob, the lower the gamma.
   // This is a linear scale of type y = -mx + b
   // y = -0.02x + 2;
 
   return {
     ...source,
-    tiles: source.tiles.map((t) => t.replace('{gamma}', -0.02 * knobPos + 2))
+    tiles: source.tiles.map((t) => t.replace('{gamma}', -0.019 * knobPos + 2))
   };
 };
 

From c09ffeb3568c633dfecc38cdab3ac43d1db56257 Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Thu, 21 May 2020 21:42:21 +0100
Subject: [PATCH 14/35] Add react tooltip

---
 app/assets/scripts/main.js                    |  5 ++++
 app/assets/scripts/styles/global.js           |  2 ++
 .../scripts/styles/vendor/react-tooltip.js    | 30 +++++++++++++++++++
 package.json                                  |  1 +
 yarn.lock                                     | 13 ++++++++
 5 files changed, 51 insertions(+)
 create mode 100644 app/assets/scripts/styles/vendor/react-tooltip.js

diff --git a/app/assets/scripts/main.js b/app/assets/scripts/main.js
index 74f50a22..87d3b258 100644
--- a/app/assets/scripts/main.js
+++ b/app/assets/scripts/main.js
@@ -6,6 +6,7 @@ import T from 'prop-types';
 import { ThemeProvider } from 'styled-components';
 import { Router, Route, Switch } from 'react-router-dom';
 import ReactGA from 'react-ga';
+import ReactTooltip from 'react-tooltip';
 
 import theme, { mediaRanges } from './styles/theme/theme';
 import store from './utils/store';
@@ -109,6 +110,10 @@ class Root extends React.Component {
                   <Route path='*' component={UhOh} />
                 </Switch>
                 <GlobalLoading />
+              <ReactTooltip
+                effect='solid'
+                className='type-primary'
+              />
               </SizeAwareElement>
             </ErrorBoundary>
           </ThemeProvider>
diff --git a/app/assets/scripts/styles/global.js b/app/assets/scripts/styles/global.js
index 21a67906..8d23309f 100644
--- a/app/assets/scripts/styles/global.js
+++ b/app/assets/scripts/styles/global.js
@@ -6,6 +6,7 @@ import { collecticonsFont } from './collecticons';
 import { unscrollableY, unscrollableX } from './helpers';
 import mapboxStyles from './vendor/mapbox';
 import reactDatepickerStyles from './vendor/react-datepicker';
+import reactTooltipStyles from './vendor/react-tooltip';
 
 const _rgba = stylizeFunction(rgba);
 
@@ -161,5 +162,6 @@ export default createGlobalStyle`
   ${collecticonsFont()}
   ${mapboxStyles()}
   ${reactDatepickerStyles()}
+  ${reactTooltipStyles()}
   ${baseStyles}
 `;
diff --git a/app/assets/scripts/styles/vendor/react-tooltip.js b/app/assets/scripts/styles/vendor/react-tooltip.js
new file mode 100644
index 00000000..e82ee2c2
--- /dev/null
+++ b/app/assets/scripts/styles/vendor/react-tooltip.js
@@ -0,0 +1,30 @@
+import { css } from 'styled-components';
+import { themeVal } from '../utils/general';
+import { antialiased } from '../helpers';
+import { glsp } from '../utils/theme-values';
+
+export default () => css`
+  /* Overrides for react-tooltip styles. */
+
+  .__react_component_tooltip {
+    ${antialiased()}
+    border-radius: ${themeVal('shape.rounded')};
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    max-width: 16rem;
+    padding: ${glsp(0.5, 1)};
+
+    &.type-primary {
+      background: ${themeVal('color.base')};
+      color: #fff;
+      ${['top', 'bottom', 'left', 'right'].map(dir => css`
+        &.place-${dir}::after {
+          border-${dir}-color: ${themeVal('color.base')};
+        }
+        &.place-${dir}::before {
+          border-${dir}: 0.5rem solid ${themeVal('color.base')};
+        }
+      `)}
+    }
+  }
+`;
diff --git a/package.json b/package.json
index 184721aa..08a6d86f 100644
--- a/package.json
+++ b/package.json
@@ -130,6 +130,7 @@
     "react-router": "^5.0.1",
     "react-router-dom": "^5.0.1",
     "react-tether": "^2.0.7",
+    "react-tooltip": "^4.2.6",
     "react-transition-group": "^4.3.0",
     "redux": "^4.0.4",
     "redux-logger": "^3.0.6",
diff --git a/yarn.lock b/yarn.lock
index 2ec564ac..6c3b8bd2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8635,6 +8635,14 @@ react-tether@^2.0.7:
     prop-types "^15.6.2"
     tether "^1.4.5"
 
+react-tooltip@^4.2.6:
+  version "4.2.6"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.2.6.tgz#a3d5f0d1b0c597c0852ba09c5e2af0019b7cfc70"
+  integrity sha512-KX/zCsPFCI8RuulzBX86U+Ur7FvgGNRBdb7dUu0ndo8Urinn48nANq9wfq4ABlehweQjPzLl7XdNAtLKza+I3w==
+  dependencies:
+    prop-types "^15.7.2"
+    uuid "^7.0.3"
+
 react-transition-group@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683"
@@ -11109,6 +11117,11 @@ uuid@^3.0.1, uuid@^3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
+uuid@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.3.tgz#c5c9f2c8cf25dc0a372c4df1441c41f5bd0c680b"
+  integrity sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==
+
 v8-compile-cache@^2.0.3, v8-compile-cache@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"

From 01c0c66aae2a8b5e406c383134d85a22fa151c04 Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Thu, 21 May 2020 21:42:45 +0100
Subject: [PATCH 15/35] Update cog endpoint

---
 app/assets/scripts/components/common/layers/layer-no2.js | 2 +-
 app/assets/scripts/redux/cog-time-data.js                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/scripts/components/common/layers/layer-no2.js b/app/assets/scripts/components/common/layers/layer-no2.js
index f60b23e4..61498d4a 100644
--- a/app/assets/scripts/components/common/layers/layer-no2.js
+++ b/app/assets/scripts/components/common/layers/layer-no2.js
@@ -10,7 +10,7 @@ export default {
   source: {
     type: 'raster',
     tiles: [
-      'https://h4ymwpefng.execute-api.us-east-1.amazonaws.com/v1/{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=magma&color_formula=gamma r {gamma}'
+      'https://8ib71h0627.execute-api.us-east-1.amazonaws.com/v1/{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=magma&color_formula=gamma r {gamma}'
     ]
   },
   swatch: {
diff --git a/app/assets/scripts/redux/cog-time-data.js b/app/assets/scripts/redux/cog-time-data.js
index 92c3e06d..c7c793da 100644
--- a/app/assets/scripts/redux/cog-time-data.js
+++ b/app/assets/scripts/redux/cog-time-data.js
@@ -16,7 +16,7 @@ export function fetchCogTimeData (id, timeframe, area) {
 
     const { start, end } = timeframe;
     const months = eachMonthOfInterval({ start, end });
-    const url = 'https://xsmt29iqqb.execute-api.us-east-1.amazonaws.com/v1/timelapse';
+    const url = 'https://8ib71h0627.execute-api.us-east-1.amazonaws.com/v1/timelapse';
 
     const requests = months.map(async date => {
       const reqDate = format(date, 'yyyyMM');

From 672a31ff995c08e3deed756ae9106d12c2299ff2 Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Thu, 21 May 2020 21:44:09 +0100
Subject: [PATCH 16/35] Abstract draw message component

---
 app/assets/scripts/components/home/index.js   |  6 ++++--
 .../{map-draw-message.js => map-message.js}   | 19 ++++++++++---------
 2 files changed, 14 insertions(+), 11 deletions(-)
 rename app/assets/scripts/components/home/{map-draw-message.js => map-message.js} (79%)

diff --git a/app/assets/scripts/components/home/index.js b/app/assets/scripts/components/home/index.js
index fb8d9c34..8ec98db5 100644
--- a/app/assets/scripts/components/home/index.js
+++ b/app/assets/scripts/components/home/index.js
@@ -18,7 +18,7 @@ import {
 } from '../../styles/inpage';
 import MbMap from './mb-map';
 import Timeline from './timeline';
-import DrawMessage from './map-draw-message';
+import MapMessage from './map-message';
 
 import { showGlobalLoading, hideGlobalLoading } from '../common/global-loading';
 import { themeVal } from '../../styles/utils/general';
@@ -432,7 +432,9 @@ class Home extends React.Component {
                 onPanelChange={this.resizeMap}
               />
               <ExploreCarto>
-                <DrawMessage drawing={this.state.aoi.drawing} />
+                <MapMessage active={this.state.aoi.drawing}>
+                  <p>Draw an AOI on the map</p>
+                </MapMessage>
                 <MbMap
                   ref={this.mbMapRef}
                   onAction={this.onMapAction}
diff --git a/app/assets/scripts/components/home/map-draw-message.js b/app/assets/scripts/components/home/map-message.js
similarity index 79%
rename from app/assets/scripts/components/home/map-draw-message.js
rename to app/assets/scripts/components/home/map-message.js
index f603b01e..34f47ed2 100644
--- a/app/assets/scripts/components/home/map-draw-message.js
+++ b/app/assets/scripts/components/home/map-message.js
@@ -13,7 +13,7 @@ const Message = styled.div`
   left: 50%;
   z-index: 10;
   transform: translate(-50%, 0);
-  padding: ${glsp(1 / 2, 1)};
+  padding: ${glsp(1 / 4, 1)};
   background: #fff;
   box-shadow: 0 0 4px 4px ${themeVal('color.baseAlphaA')};
   border-radius: ${themeVal('shape.rounded')};
@@ -21,25 +21,25 @@ const Message = styled.div`
   transition: all ${fadeDuration}ms ease-in-out;
   ${({ show }) => show ? css`
     visibility: visible;
-    top: 2rem;
+    top: 0.5rem;
     opacity: 1;
   ` : css`
     visibility: hidden;
-    top: 0;
+    top: -2rem;
     opacity: 0;
   `}
 `;
 
-class DrawMessage extends Component {
+class MapMessage extends Component {
   render () {
     return (
       <Transition
-        in={this.props.drawing}
+        in={this.props.active}
         timeout={fadeDuration}
       >
         {state => (
           <Message show={state === 'entered' || state === 'entering'}>
-            <p>Draw an AOI on the map</p>
+            {this.props.children}
           </Message>
         )}
       </Transition>
@@ -47,8 +47,9 @@ class DrawMessage extends Component {
   }
 }
 
-DrawMessage.propTypes = {
-  drawing: T.bool
+MapMessage.propTypes = {
+  children: T.node,
+  active: T.bool
 };
 
-export default DrawMessage;
+export default MapMessage;

From b1faa65b062120a3ed41885f006ffeee9d258783 Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Thu, 21 May 2020 21:46:01 +0100
Subject: [PATCH 17/35] Resize map when timeline changes size

---
 app/assets/scripts/components/home/index.js    |  1 +
 app/assets/scripts/components/home/timeline.js | 11 ++++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/assets/scripts/components/home/index.js b/app/assets/scripts/components/home/index.js
index 8ec98db5..00242d56 100644
--- a/app/assets/scripts/components/home/index.js
+++ b/app/assets/scripts/components/home/index.js
@@ -456,6 +456,7 @@ class Home extends React.Component {
                   date={this.state.timelineDate}
                   compare={this.state.compare}
                   onAction={this.onPanelAction}
+                  onSizeChange={this.resizeMap}
                 />
               </ExploreCarto>
               <ExpMapSecPanel
diff --git a/app/assets/scripts/components/home/timeline.js b/app/assets/scripts/components/home/timeline.js
index 5ce6829e..e95a3e3d 100644
--- a/app/assets/scripts/components/home/timeline.js
+++ b/app/assets/scripts/components/home/timeline.js
@@ -139,6 +139,15 @@ class Timeline extends React.Component {
     };
   }
 
+  componentDidUpdate (prevProps, prevState) {
+    if (
+      prevProps.isActive !== this.props.isActive ||
+      prevState.isExpanded !== this.state.isExpanded
+    ) {
+      this.props.onSizeChange && this.props.onSizeChange();
+    }
+  }
+
   render () {
     const { date, onAction, isActive, layers, compare } = this.props;
 
@@ -234,7 +243,7 @@ class Timeline extends React.Component {
 
 Timeline.propTypes = {
   onAction: T.func,
-  compare: T.bool,
+  onSizeChange: T.func,
   date: T.object,
   layers: T.array,
   isActive: T.bool

From 589df6bc3a4d4179edae33fbba594b5ff0670424 Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Thu, 21 May 2020 21:46:34 +0100
Subject: [PATCH 18/35] Ensure compare map is also resized if enabled

---
 app/assets/scripts/components/home/index.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/assets/scripts/components/home/index.js b/app/assets/scripts/components/home/index.js
index 00242d56..e05c5ca0 100644
--- a/app/assets/scripts/components/home/index.js
+++ b/app/assets/scripts/components/home/index.js
@@ -140,10 +140,15 @@ class Home extends React.Component {
   }
 
   resizeMap () {
-    if (this.mbMapRef.current) {
+    const component = this.mbMapRef.current;
+    if (component) {
       // Delay execution to give the panel animation time to finish.
       setTimeout(() => {
-        this.mbMapRef.current.mbMap.resize();
+        component.mbMap.resize();
+        // Also resize the compare map if it exists.
+        if (component.mbMapComparing) {
+          component.mbMapComparing.resize();
+        }
       }, 200);
     }
   }

From d0a7ad37de38bcb5a93b16782f0a6cc80f2a117a Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Thu, 21 May 2020 21:49:40 +0100
Subject: [PATCH 19/35] Improve behavior of compare feature

Fix #41
Fix #35
Fix #36
---
 .../components/common/layers/layer-no2.js     |   7 +
 .../scripts/components/common/layers/types.js |  73 +++++-----
 .../components/home/data-layers-block.js      |   4 +
 app/assets/scripts/components/home/index.js   | 135 ++++++++++++------
 app/assets/scripts/components/home/layer.js   |  28 +++-
 app/assets/scripts/components/home/mb-map.js  |  74 ++++------
 .../scripts/components/home/timeline.js       |  27 +---
 app/assets/scripts/styles/vendor/mapbox.js    |  11 ++
 package.json                                  |   1 +
 yarn.lock                                     |   5 +
 10 files changed, 220 insertions(+), 145 deletions(-)

diff --git a/app/assets/scripts/components/common/layers/layer-no2.js b/app/assets/scripts/components/common/layers/layer-no2.js
index 61498d4a..b008d8d7 100644
--- a/app/assets/scripts/components/common/layers/layer-no2.js
+++ b/app/assets/scripts/components/common/layers/layer-no2.js
@@ -1,3 +1,5 @@
+import { format, sub } from 'date-fns';
+
 export default {
   id: 'no2',
   name: 'Nitrogen dioxide',
@@ -13,6 +15,11 @@ export default {
       'https://8ib71h0627.execute-api.us-east-1.amazonaws.com/v1/{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=magma&color_formula=gamma r {gamma}'
     ]
   },
+  compare: {
+    enabled: true,
+    help: 'Compare with baseline (5 years ago)',
+    mapLabel: date => `${format(date, "MMM yy''")} — ${format(sub(date, { years: 5 }), "MMM yy''")}`
+  },
   swatch: {
     color: '#411073',
     name: 'Purple'
diff --git a/app/assets/scripts/components/common/layers/types.js b/app/assets/scripts/components/common/layers/types.js
index 2ce3ee4d..9b5feb83 100644
--- a/app/assets/scripts/components/common/layers/types.js
+++ b/app/assets/scripts/components/common/layers/types.js
@@ -42,41 +42,51 @@ export const layerTypes = {
     update: (ctx, layerInfo, prevProps) => {
       const { mbMap, mbMapComparing, props } = ctx;
       const { id, source } = layerInfo;
-      const { date, compare } = props;
+      const prevLayerInfo = prevProps.layers.find(l => l.id === layerInfo.id);
+      const { date, comparing } = props;
 
-      const knobPos = get(props, ['layerData', id, 'knobCurrPos']);
-      const knobPosPrev = get(prevProps, ['layerData', id, 'knobCurrPos']);
+      const knobPos = layerInfo.knobCurrPos;
+      const knobPosPrev = prevLayerInfo.knobCurrPos;
 
+      // Do not update if:
       if (
-        prevProps.date &&
+        // There's no date defined.
+        prevProps.date && date &&
+        // Dates are the same
         date.getTime() === prevProps.date.getTime() &&
-        compare === prevProps.compare &&
-        knobPos === knobPosPrev
-      ) { return; }
+        // Knob position for gamma correction is the same.
+        knobPos === knobPosPrev &&
+        // Compare didn't change.
+        comparing === prevProps.comparing
+      ) return;
 
-      if (mbMap.getSource(id)) {
-        const tiles = prepSource(source, date, knobPos).tiles;
-
-        replaceRasterTiles(mbMap, id, tiles);
-
-        if (compare) {
-          const source5years = prepSource(source, sub(date, { years: 5 }), knobPos);
-          if (mbMapComparing.getSource(id)) {
-            replaceRasterTiles(mbMapComparing, id, source5years.tiles);
-          } else {
-            // TODO: Waiting for a map to load should be decoupled from the layer types.
-            mbMapComparing.once('load', () => {
-              mbMapComparing.addSource(id, source5years);
-              mbMapComparing.addLayer(
-                {
-                  id: id,
-                  type: 'raster',
-                  source: id
-                },
-                'admin-1-boundary-bg'
-              );
-            });
-          }
+      // The source we're updating is not present.
+      if (!mbMap.getSource(id)) return;
+
+      // If we're comparing, and the compare map is not loaded.
+      if (comparing && !mbMapComparing.isStyleLoaded()) return;
+
+      // END update checks.
+
+      // Update layer tiles.
+      const tiles = prepSource(source, date, knobPos).tiles;
+      replaceRasterTiles(mbMap, id, tiles);
+
+      // Update/init compare layer tiles.
+      if (comparing) {
+        const source5years = prepSource(source, sub(date, { years: 5 }), knobPos);
+        if (mbMapComparing.getSource(id)) {
+          replaceRasterTiles(mbMapComparing, id, source5years.tiles);
+        } else {
+          mbMapComparing.addSource(id, source5years);
+          mbMapComparing.addLayer(
+            {
+              id: id,
+              type: 'raster',
+              source: id
+            },
+            'admin-1-boundary-bg'
+          );
         }
       }
     },
@@ -97,8 +107,7 @@ export const layerTypes = {
       if (mbMap.getSource(id)) {
         mbMap.setLayoutProperty(id, 'visibility', 'visible');
       } else {
-        const knobPos = get(props, ['layerData', id, 'knobCurrPos']);
-        mbMap.addSource(id, prepSource(source, date, knobPos));
+        mbMap.addSource(id, prepSource(source, date, layerInfo.knobCurrPos));
         mbMap.addLayer(
           {
             id: id,
diff --git a/app/assets/scripts/components/home/data-layers-block.js b/app/assets/scripts/components/home/data-layers-block.js
index db573b11..7a3a6afb 100644
--- a/app/assets/scripts/components/home/data-layers-block.js
+++ b/app/assets/scripts/components/home/data-layers-block.js
@@ -47,6 +47,10 @@ class DataLayersBlock extends React.Component {
                         onToggleClick={() => onAction('layer.toggle', l)}
                         onLegendKnobChange={(payload) => onAction('layer.legend-knob', { id: l.id, ...payload })}
                         knobPos={l.knobPos}
+                        compareEnabled={get(l, 'compare.enabled')}
+                        compareActive={l.comparing}
+                        compareHelp={get(l, 'compare.help')}
+                        onCompareClick={() => onAction('layer.compare', l)}
                       />
                     </li>
                   ))}
diff --git a/app/assets/scripts/components/home/index.js b/app/assets/scripts/components/home/index.js
index e05c5ca0..301d6159 100644
--- a/app/assets/scripts/components/home/index.js
+++ b/app/assets/scripts/components/home/index.js
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { connect } from 'react-redux';
 import { format, isBefore, sub } from 'date-fns';
 import get from 'lodash.get';
+import find from 'lodash.find';
 
 import App from '../common/app';
 import ExpMapPrimePanel from './prime-panel';
@@ -108,10 +109,15 @@ class Home extends React.Component {
       // Additional data that needs to be tracked for the map layers, like the
       // knob position on a adjustable gradient legend.
       // Values will be objects keyed by the layer id.
-      layersSettings: {},
+      layersState: {
+        // id: {
+        //   comparing: bool
+        //   knosPos: number
+        //   knobCurrPos: number
+        // }
+      },
       timelineDate: null,
       mapLoaded: false,
-      compare: false,
 
       aoi: {
         feature: null,
@@ -126,11 +132,33 @@ class Home extends React.Component {
     this.props.invalidateCogTimeData();
   }
 
+  setLayerState (id, data, cb) {
+    this.setState(state => {
+      const currentState = state.layersState[id] || {};
+      return {
+        layersState: {
+          ...state.layersState,
+          [id]: {
+            ...currentState,
+            ...(typeof data === 'function' ? data(currentState) : data)
+          }
+        }
+      };
+    }, () => cb && cb());
+  }
+
+  getLayerState (id, prop) {
+    const path = prop
+      ? typeof prop === 'string' ? [id, prop] : [id, ...prop]
+      : id;
+    return get(this.state.layersState, path);
+  }
+
   getLayersWithState () {
-    const { activeLayers, layersSettings } = this.state;
+    const { activeLayers, layersState } = this.state;
     return mapLayers.map((l) => {
       // Get additional propertied from the layerData array.
-      const extra = layersSettings[l.id] || {};
+      const extra = layersState[l.id] || {};
       return {
         ...l,
         visible: activeLayers.includes(l.id),
@@ -178,25 +206,19 @@ class Home extends React.Component {
       case 'layer.toggle':
         this.toggleLayer(payload);
         break;
+      case 'layer.compare':
+        this.toggleLayerCompare(payload);
+        break;
       case 'layer.legend-knob':
-        this.setState(state => ({
-          layersSettings: {
-            ...state.layersSettings,
-            [payload.id]: {
-              ...state.layersSettings[payload.id],
-              knobPos: payload.value,
-              // If the event was the end of a drag, set the current value for
-              // the map to pick up.
-              knobCurrPos: payload.end
-                ? payload.value
-                : get(state, ['layersSettings', payload.id, 'knobCurrPos'])
-            }
-          }
+        this.setLayerState(payload.id, layerState => ({
+          knobPos: payload.value,
+          // If the event was the end of a drag, set the current value for
+          // the map to pick up.
+          knobCurrPos: payload.end
+            ? payload.value
+            : layerState.knobCurrPos
         }));
         break;
-      case 'compare.set':
-        this.setState({ compare: payload.compare });
-        break;
       case 'date.set':
         this.setState({
           timelineDate: payload.date
@@ -356,7 +378,7 @@ class Home extends React.Component {
       this.setState(state => {
         // Check if there's a knob value set. If not, means that this is the
         // first time it is enabled and we need to set a default.
-        const knobCurrPos = get(state, ['layersSettings', layer.id, 'knobCurrPos'], null);
+        const knobCurrPos = get(state, ['layersState', layer.id, 'knobCurrPos'], null);
         const knobData = knobCurrPos === null
           ? {
             knobPos: 50,
@@ -365,10 +387,10 @@ class Home extends React.Component {
           : {};
         return {
           timelineDate: utcDate(layer.domain[1]),
-          layersSettings: {
-            ...state.layersSettings,
+          layersState: {
+            ...state.layersState,
             [layer.id]: {
-              ...state.layersSettings[layer.id],
+              ...state.layersState[layer.id],
               ...knobData
             }
           }
@@ -376,6 +398,11 @@ class Home extends React.Component {
       });
     }
 
+    // If we disable a layer we're comparing, disable the comparison as well.
+    if (this.getLayerState(layer.id, 'comparing')) {
+      this.toggleLayerCompare(layer);
+    }
+
     // Hide any layers that are not compatible with the current one.
     // This means that when this layer gets enabled some layers must be disabled.
     const exclusiveWithLayers = layer.exclusiveWith || [];
@@ -398,6 +425,37 @@ class Home extends React.Component {
     });
   }
 
+  toggleLayerCompare (layer) {
+    const isEnabled = this.getLayerState(layer.id, 'comparing');
+
+    if (isEnabled) {
+      this.setLayerState(layer.id, {
+        comparing: false
+      });
+    } else {
+      this.setState(state => {
+        // Disable compare on all other layers.
+        // Having a object with settings makes it very fast to access, but it is
+        // harder to apply changes across all objects.
+        const layersState = Object.keys(state.layersState).reduce((acc, id) => ({
+          ...acc,
+          [id]: {
+            ...acc[id],
+            comparing: false
+          }
+        }), state.layersState);
+
+        // Set current as active
+        layersState[layer.id] = {
+          ...layersState[layer.id],
+          comparing: true
+        };
+
+        return { layersState };
+      });
+    }
+  }
+
   getActiveTimeseriesLayers () {
     return mapLayers.filter(
       (l) =>
@@ -411,12 +469,18 @@ class Home extends React.Component {
   }
 
   render () {
-    const adminAreaFeatId = this.props.match.params.id;
-
     const layers = this.getLayersWithState();
-
     const activeTimeseriesLayers = this.getActiveTimeseriesLayers();
 
+    // Check if there's any layer that's comparing.
+    const comparingLayer = find(layers, 'comparing');
+    const isComparing = !!comparingLayer;
+
+    const mapLabel = get(comparingLayer, 'compare.mapLabel');
+    const compareMessage = isComparing && mapLabel
+      ? typeof mapLabel === 'function' ? mapLabel(this.state.timelineDate) : mapLabel
+      : '';
+
     return (
       <App>
         <Inpage isMapCentric>
@@ -440,26 +504,22 @@ class Home extends React.Component {
                 <MapMessage active={this.state.aoi.drawing}>
                   <p>Draw an AOI on the map</p>
                 </MapMessage>
+                <MapMessage active={!this.state.aoi.drawing && isComparing && !!compareMessage}>
+                  <p>{compareMessage}</p>
+                </MapMessage>
                 <MbMap
                   ref={this.mbMapRef}
                   onAction={this.onMapAction}
                   layers={layers}
                   activeLayers={this.state.activeLayers}
-                  layerData={this.state.layersSettings}
-                  selectedAdminArea={adminAreaFeatId}
                   date={this.state.timelineDate}
                   aoiState={this.state.aoi}
-                  compare={
-                    !!activeTimeseriesLayers.length && this.state.compare
-                  }
-                  // activeTimeSeriesData={activeTimeseriesLayerData}
+                  comparing={isComparing}
                 />
                 <Timeline
                   isActive={!!activeTimeseriesLayers.length}
                   layers={activeTimeseriesLayers}
-                  // overview={activeTimeseriesOverviewData}
                   date={this.state.timelineDate}
-                  compare={this.state.compare}
                   onAction={this.onPanelAction}
                   onSizeChange={this.resizeMap}
                 />
@@ -484,15 +544,10 @@ class Home extends React.Component {
 }
 
 Home.propTypes = {
-  // fetchConfig: T.func,
-  // fetchAdminAreas: T.func,
-  // fetchSingleAdminArea: T.func,
   fetchTimeSeriesDaily: T.func,
   fetchTimeSeriesOverview: T.func,
   fetchCogTimeData: T.func,
   invalidateCogTimeData: T.func,
-  match: T.object,
-  // timeSeriesDaily: T.object,
   timeSeriesOverview: T.object,
   no2CogTimeData: T.object
 };
diff --git a/app/assets/scripts/components/home/layer.js b/app/assets/scripts/components/home/layer.js
index b03b4932..a5c15e5c 100644
--- a/app/assets/scripts/components/home/layer.js
+++ b/app/assets/scripts/components/home/layer.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import T from 'prop-types';
 import styled from 'styled-components';
+import ReactTooltip from 'react-tooltip';
 
 import { themeVal } from '../../styles/utils/general';
 import { visuallyHidden, truncated } from '../../styles/helpers';
@@ -132,6 +133,10 @@ const typesSubtitles = {
 };
 
 class Layer extends React.Component {
+  componentDidMount () {
+    ReactTooltip.rebuild();
+  }
+
   renderLegend () {
     const {
       dataOrder,
@@ -219,6 +224,10 @@ class Layer extends React.Component {
       swatchColor,
       swatchName,
       info,
+      compareEnabled,
+      compareActive,
+      compareHelp,
+      onCompareClick,
       onToggleClick,
       isExpanded,
       setExpanded
@@ -251,6 +260,19 @@ class Layer extends React.Component {
               >
                 <span>Info</span>
               </Button>
+              <Button
+                variation={compareActive ? 'primary-plain' : 'base-plain'}
+                size='small'
+                useIcon='clock'
+                title='Enable/disable layer compare'
+                hideText
+                disabled={disabled || !compareEnabled || !active}
+                data-tip={compareHelp}
+                active={compareActive}
+                onClick={onCompareClick}
+              >
+                <span>Compare</span>
+              </Button>
               <FormSwitch
                 hideText
                 name={`toggle-${id}`}
@@ -289,7 +311,11 @@ Layer.propTypes = {
   isExpanded: T.bool,
   setExpanded: T.func,
   onLegendKnobChange: T.func,
-  knobPos: T.number
+  knobPos: T.number,
+  compareEnabled: T.bool,
+  compareActive: T.bool,
+  compareHelp: T.string,
+  onCompareClick: T.func
 };
 
 export default Layer;
diff --git a/app/assets/scripts/components/home/mb-map.js b/app/assets/scripts/components/home/mb-map.js
index e291e80c..3424b697 100644
--- a/app/assets/scripts/components/home/mb-map.js
+++ b/app/assets/scripts/components/home/mb-map.js
@@ -4,8 +4,6 @@ import styled, { withTheme } from 'styled-components';
 import mapboxgl from 'mapbox-gl';
 import CompareMbGL from 'mapbox-gl-compare';
 
-import MapboxControl from '../common/mapbox-react-control';
-
 import config from '../../config';
 import { layerTypes } from '../common/layers/types';
 import { glsp } from '../../styles/utils/theme-values';
@@ -16,8 +14,7 @@ const {
   zoom,
   minZoom,
   maxZoom,
-  styleUrl,
-  logos
+  styleUrl
 } = config.map;
 
 // Set mapbox token.
@@ -71,9 +68,6 @@ class MbMap extends React.Component {
     this.mapContainer = null;
     this.mbMap = null;
     this.mbDraw = null;
-
-    this.adminAreaIdActive = null;
-    this.adminAreaIdHover = null;
   }
 
   componentDidMount () {
@@ -82,26 +76,29 @@ class MbMap extends React.Component {
   }
 
   componentDidUpdate (prevProps, prevState) {
-    const { activeLayers, compare } = this.props;
+    const { activeLayers, comparing } = this.props;
 
     // Compare Maps
-    if (compare !== prevProps.compare) {
-      if (compare) {
+    if (comparing !== prevProps.comparing) {
+      if (comparing) {
         this.mbMap.resize();
         this.mbMapComparing = new mapboxgl.Map({
           attributionControl: false,
-          container: this.mapContainer2,
-          center: center,
-          zoom: zoom || 5,
+          container: this.mapContainerComparing,
+          center: this.mbMap.getCenter(),
+          zoom: this.mbMap.getZoom(),
           minZoom: minZoom || 4,
           maxZoom: maxZoom || 9,
           style: styleUrl,
           pitchWithRotate: false,
-          // renderWorldCopies: false,
           dragRotate: false,
           logoPosition: 'bottom-left'
         });
 
+        this.mbMapComparing.once('load', () => {
+          this.updateActiveLayers(prevProps);
+        });
+
         this.compareControl = new CompareMbGL(this.mbMap, this.mbMapComparing, '#container');
       } else {
         if (this.compareControl) {
@@ -114,7 +111,7 @@ class MbMap extends React.Component {
     }
 
     // TODO: Improve how compare is handled, by the layers that have it.
-    if (prevProps.activeLayers !== activeLayers || compare !== prevProps.compare) {
+    if (prevProps.activeLayers !== activeLayers || comparing !== prevProps.comparing) {
       const toRemove = prevProps.activeLayers.filter(
         (l) => !activeLayers.includes(l)
       );
@@ -148,18 +145,22 @@ class MbMap extends React.Component {
     }
 
     // Update all active layers
-    activeLayers.forEach((layerId) => {
+    this.updateActiveLayers(prevProps);
+
+    // Handle aoi state props update.
+    if (this.mbDraw) {
+      this.mbDraw.update(prevProps.aoiState, this.props.aoiState);
+    }
+  }
+
+  updateActiveLayers (prevProps) {
+    this.props.activeLayers.forEach((layerId) => {
       const layerInfo = this.props.layers.find((l) => l.id === layerId);
       const fns = layerTypes[layerInfo.type];
       if (fns && fns.update) {
         return fns.update(this, layerInfo, prevProps);
       }
     });
-
-    // Handle aoi state props update.
-    if (this.mbDraw) {
-      this.mbDraw.update(prevProps.aoiState, this.props.aoiState);
-    }
   }
 
   initMap () {
@@ -172,33 +173,10 @@ class MbMap extends React.Component {
       maxZoom: maxZoom || 9,
       style: styleUrl,
       pitchWithRotate: false,
-      // renderWorldCopies: false,
       dragRotate: false,
       logoPosition: 'bottom-left'
     });
 
-    if (logos) {
-      const mapLogosControl = new MapboxControl((props, state) => (
-        <div className='partner-logos'>
-          {logos.map((l) => (
-            <a
-              key={l.id}
-              href={l.url}
-              title={`Visit ${l.label}`}
-              rel='noopener noreferrer'
-              target='_blank'
-            >
-              <img src={l.src} alt={`${l.label} logo`} />
-            </a>
-          ))}
-        </div>
-      ));
-
-      this.mbMap.addControl(mapLogosControl, 'bottom-left');
-
-      mapLogosControl.render(this.props, this.state);
-    }
-
     // Disable map rotation using right click + drag.
     this.mbMap.dragRotate.disable();
 
@@ -231,7 +209,7 @@ class MbMap extends React.Component {
       <MapsContainer id='container'>
         <SingleMapContainer
           ref={(el) => {
-            this.mapContainer2 = el;
+            this.mapContainerComparing = el;
           }}
         />
         <SingleMapContainer
@@ -246,11 +224,9 @@ class MbMap extends React.Component {
 
 MbMap.propTypes = {
   onAction: T.func,
-  compare: T.bool,
+  comparing: T.bool,
   activeLayers: T.array,
-  layers: T.array,
-  /* eslint-disable-next-line react/no-unused-prop-types */
-  layerData: T.object
+  layers: T.array
 };
 
 export default withTheme(MbMap);
diff --git a/app/assets/scripts/components/home/timeline.js b/app/assets/scripts/components/home/timeline.js
index e95a3e3d..b19689d0 100644
--- a/app/assets/scripts/components/home/timeline.js
+++ b/app/assets/scripts/components/home/timeline.js
@@ -124,12 +124,6 @@ const CurrentDate = styled.p`
   font-weight: ${themeVal('type.base.bold')};
 `;
 
-const CompareButton = styled(Button)`
-  && {
-    margin-right: 2rem;
-  }
-`;
-
 class Timeline extends React.Component {
   constructor (props) {
     super(props);
@@ -149,16 +143,10 @@ class Timeline extends React.Component {
   }
 
   render () {
-    const { date, onAction, isActive, layers, compare } = this.props;
+    const { date, onAction, isActive, layers } = this.props;
 
-    // if (!isActive || !overview.length) return null;
     if (!isActive) return null;
 
-    // Wait until all the overviews are ready.
-    // if (overview.some((o) => !o.isReady())) return null;
-
-    // Compute date intersection between all the overviews.
-    // const dateDomain = unionOverviewDateDomain(overview);
     const dateDomain = layers[0].domain.map(utcDate);
     const swatch = layers[0].swatch.color;
 
@@ -190,16 +178,9 @@ class Timeline extends React.Component {
               onChange={(selectedDate) =>
                 onAction('date.set', { date: selectedDate })}
             /> */}
-            <CompareButton
-              variation='base-plain'
-              size='small'
-              title='Start/Stop comparing'
-              onClick={() =>
-                onAction('compare.set', { compare: !compare })}
-            >
-              {compare ? 'Stop compare (5y ago)' : 'Start compare (5y ago)'}
-            </CompareButton>
-            <CurrentDate>{date ? format(date, "MMM yy''") : 'Select date'}</CurrentDate>
+            <CurrentDate>
+              {date ? format(date, "MMM yy''") : 'Select date'}
+            </CurrentDate>
             <ButtonGroup orientation='horizontal'>
               <Button
                 disabled={!date || isSameMonth(date, dateDomain[0])}
diff --git a/app/assets/scripts/styles/vendor/mapbox.js b/app/assets/scripts/styles/vendor/mapbox.js
index a4aa9e16..bc8f9d52 100644
--- a/app/assets/scripts/styles/vendor/mapbox.js
+++ b/app/assets/scripts/styles/vendor/mapbox.js
@@ -221,4 +221,15 @@ export default () => css`
       text-decoration: none;
     }
   }
+
+  /* SWIPE COMPARE styles */
+  .mapboxgl-compare .compare-swiper-vertical {
+    width: 3rem;
+    height: 3rem;
+    left: 0;
+    margin-top: 0;
+    transform: translate(-50%,-50%);
+    background-size: 3rem;
+    background-color: ${themeVal('color.primary')};
+  }
 `;
diff --git a/package.json b/package.json
index 08a6d86f..facb37dd 100644
--- a/package.json
+++ b/package.json
@@ -113,6 +113,7 @@
     "element-resize-event": "^3.0.3",
     "history": "^4.9.0",
     "lodash.defaultsdeep": "^4.6.1",
+    "lodash.find": "^4.6.0",
     "lodash.get": "^4.4.2",
     "lodash.set": "^4.3.2",
     "mapbox-gl": "^1.3.1",
diff --git a/yarn.lock b/yarn.lock
index 6c3b8bd2..282af0e7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6686,6 +6686,11 @@ lodash.escaperegexp@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz#64762c48618082518ac3df4ccf5d5886dae20347"
   integrity sha1-ZHYsSGGAglGKw99Mz11YhtriA0c=
 
+lodash.find@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.find/-/lodash.find-4.6.0.tgz#cb0704d47ab71789ffa0de8b97dd926fb88b13b1"
+  integrity sha1-ywcE1Hq3F4n/oN6Ll92Sb7iLE7E=
+
 lodash.get@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"

From 94e26edf5764b7c93e28d0ac40985bd6e46244e9 Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Thu, 21 May 2020 22:02:20 +0100
Subject: [PATCH 20/35] Fix compare map load check

---
 app/assets/scripts/components/common/layers/types.js | 4 ++--
 app/assets/scripts/components/home/mb-map.js         | 2 ++
 app/assets/scripts/main.js                           | 8 ++++----
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/assets/scripts/components/common/layers/types.js b/app/assets/scripts/components/common/layers/types.js
index 9b5feb83..5dfb96f2 100644
--- a/app/assets/scripts/components/common/layers/types.js
+++ b/app/assets/scripts/components/common/layers/types.js
@@ -40,7 +40,7 @@ const replaceRasterTiles = (theMap, sourceId, tiles) => {
 export const layerTypes = {
   'raster-timeseries': {
     update: (ctx, layerInfo, prevProps) => {
-      const { mbMap, mbMapComparing, props } = ctx;
+      const { mbMap, mbMapComparing, mbMapComparingLoaded, props } = ctx;
       const { id, source } = layerInfo;
       const prevLayerInfo = prevProps.layers.find(l => l.id === layerInfo.id);
       const { date, comparing } = props;
@@ -64,7 +64,7 @@ export const layerTypes = {
       if (!mbMap.getSource(id)) return;
 
       // If we're comparing, and the compare map is not loaded.
-      if (comparing && !mbMapComparing.isStyleLoaded()) return;
+      if (comparing && !mbMapComparingLoaded) return;
 
       // END update checks.
 
diff --git a/app/assets/scripts/components/home/mb-map.js b/app/assets/scripts/components/home/mb-map.js
index 3424b697..d643ae3a 100644
--- a/app/assets/scripts/components/home/mb-map.js
+++ b/app/assets/scripts/components/home/mb-map.js
@@ -96,6 +96,7 @@ class MbMap extends React.Component {
         });
 
         this.mbMapComparing.once('load', () => {
+          this.mbMapComparingLoaded = true;
           this.updateActiveLayers(prevProps);
         });
 
@@ -106,6 +107,7 @@ class MbMap extends React.Component {
           this.compareControl = null;
           this.mbMapComparing.remove();
           this.mbMapComparing = null;
+          this.mbMapComparingLoaded = false;
         }
       }
     }
diff --git a/app/assets/scripts/main.js b/app/assets/scripts/main.js
index 87d3b258..cc9897b6 100644
--- a/app/assets/scripts/main.js
+++ b/app/assets/scripts/main.js
@@ -110,10 +110,10 @@ class Root extends React.Component {
                   <Route path='*' component={UhOh} />
                 </Switch>
                 <GlobalLoading />
-              <ReactTooltip
-                effect='solid'
-                className='type-primary'
-              />
+                <ReactTooltip
+                  effect='solid'
+                  className='type-primary'
+                />
               </SizeAwareElement>
             </ErrorBoundary>
           </ThemeProvider>

From 22f79789751fcd3b05db18671a905d30d165a3eb Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Thu, 21 May 2020 22:31:57 +0100
Subject: [PATCH 21/35] Make layers mutually exclusive

---
 app/assets/scripts/components/common/layers/layer-no2.js        | 1 +
 app/assets/scripts/components/common/layers/layer-population.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/app/assets/scripts/components/common/layers/layer-no2.js b/app/assets/scripts/components/common/layers/layer-no2.js
index b008d8d7..eb0e3285 100644
--- a/app/assets/scripts/components/common/layers/layer-no2.js
+++ b/app/assets/scripts/components/common/layers/layer-no2.js
@@ -15,6 +15,7 @@ export default {
       'https://8ib71h0627.execute-api.us-east-1.amazonaws.com/v1/{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=magma&color_formula=gamma r {gamma}'
     ]
   },
+  exclusiveWith: ['gibs-population'],
   compare: {
     enabled: true,
     help: 'Compare with baseline (5 years ago)',
diff --git a/app/assets/scripts/components/common/layers/layer-population.js b/app/assets/scripts/components/common/layers/layer-population.js
index 3b43ece7..6d4e84b6 100644
--- a/app/assets/scripts/components/common/layers/layer-population.js
+++ b/app/assets/scripts/components/common/layers/layer-population.js
@@ -8,6 +8,7 @@ export default {
       'https://gibs.earthdata.nasa.gov/wmts/epsg3857/best/GPW_Population_Density_2020/default/2020-05-14T00:00:00Z/GoogleMapsCompatible_Level7/{z}/{y}/{x}.png'
     ]
   },
+  exclusiveWith: ['no2'],
   swatch: {
     color: '#F55E2C',
     name: 'Orange'

From 7d03c765c3f5ec427276b43f61b1c27b869d1d6b Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Fri, 22 May 2020 10:48:43 +0100
Subject: [PATCH 22/35] Rename super sites

Fix #34
---
 .../scripts/components/common/page-header.js     | 12 ++++++------
 .../{super-sites => spotlight}/hub/index.js      | 16 ++++++++--------
 .../{super-sites => spotlight}/index.js          |  6 +++---
 .../{super-sites => spotlight}/single/index.js   | 10 +++++-----
 .../{super-sites => spotlight}/ss-la.js          |  0
 .../{super-sites => spotlight}/ss-ny.js          |  0
 .../{super-sites => spotlight}/ss-sf.js          |  0
 .../{super-sites => spotlight}/ss-tk.js          |  0
 app/assets/scripts/main.js                       |  6 +++---
 9 files changed, 25 insertions(+), 25 deletions(-)
 rename app/assets/scripts/components/{super-sites => spotlight}/hub/index.js (85%)
 rename app/assets/scripts/components/{super-sites => spotlight}/index.js (59%)
 rename app/assets/scripts/components/{super-sites => spotlight}/single/index.js (93%)
 rename app/assets/scripts/components/{super-sites => spotlight}/ss-la.js (100%)
 rename app/assets/scripts/components/{super-sites => spotlight}/ss-ny.js (100%)
 rename app/assets/scripts/components/{super-sites => spotlight}/ss-sf.js (100%)
 rename app/assets/scripts/components/{super-sites => spotlight}/ss-tk.js (100%)

diff --git a/app/assets/scripts/components/common/page-header.js b/app/assets/scripts/components/common/page-header.js
index c3822a95..73e7c934 100644
--- a/app/assets/scripts/components/common/page-header.js
+++ b/app/assets/scripts/components/common/page-header.js
@@ -13,7 +13,7 @@ import { glsp } from '../../styles/utils/theme-values';
 
 import Button from '../../styles/button/button';
 import Dropdown, { DropTitle, DropMenu, DropMenuItem } from './dropdown';
-import superSitesList from '../super-sites';
+import spotlightSitesList from '../spotlight';
 
 const { appTitle, appShortTitle, appVersion } = config;
 
@@ -177,20 +177,20 @@ class PageHeader extends React.Component {
                   triggerElement={
                     <Button
                       variation='achromic-plain'
-                      title='Explore the Super sites'
+                      title='Explore the Spotlight areas'
                       useIcon={['chevron-down--small', 'after']}
                     >
-                      <span>Super sites</span>
+                      <span>Spotlight</span>
                     </Button>
                   }
                 >
-                  <DropTitle>Super sites</DropTitle>
+                  <DropTitle>Spotlight areas</DropTitle>
                   <DropMenu role='menu' selectable>
-                    {superSitesList.map(ss => (
+                    {spotlightSitesList.map(ss => (
                       <li key={ss.id}>
                         <DropMenuItem
                           as={NavLink}
-                          to={`/super-sites/${ss.id}`}
+                          to={`/spotlight/${ss.id}`}
                           data-dropdown='click.close'
                         >
                           {ss.label}
diff --git a/app/assets/scripts/components/super-sites/hub/index.js b/app/assets/scripts/components/spotlight/hub/index.js
similarity index 85%
rename from app/assets/scripts/components/super-sites/hub/index.js
rename to app/assets/scripts/components/spotlight/hub/index.js
index adf196de..bca5960e 100644
--- a/app/assets/scripts/components/super-sites/hub/index.js
+++ b/app/assets/scripts/components/spotlight/hub/index.js
@@ -16,7 +16,7 @@ import {
 
 import { glsp } from '../../../styles/utils/theme-values';
 import { themeVal } from '../../../styles/utils/general';
-import superSites from '../index';
+import spotlightAreas from '../index';
 
 const InpageTrendsBody = styled(InpageBody)`
   position: relative;
@@ -71,17 +71,17 @@ const PanelNavLink = styled(NavLink)`
   }
 `;
 
-class SuperSitesHub extends React.Component {
+class SpotlightAreasHub extends React.Component {
   render () {
     const { datasets } = this.props;
 
     return (
-      <App pageTitle='Trends'>
+      <App pageTitle='Spotlight areas'>
         <Inpage>
           <InpageHeader>
             <InpageHeaderInner>
               <InpageHeadline>
-                <InpageTitle>Trends</InpageTitle>
+                <InpageTitle>Spotlight areas</InpageTitle>
               </InpageHeadline>
             </InpageHeaderInner>
           </InpageHeader>
@@ -91,7 +91,7 @@ class SuperSitesHub extends React.Component {
                 <li key={item.id}>
                   <PanelNavLink
                     to={`/trends/${item.id}`}
-                    title={`View super site ${item.name}`}
+                    title={`View spotlight area ${item.name}`}
                   >
                     {item.name}
                   </PanelNavLink>
@@ -105,16 +105,16 @@ class SuperSitesHub extends React.Component {
   }
 }
 
-SuperSitesHub.propTypes = {
+SpotlightAreasHub.propTypes = {
   datasets: T.array
 };
 
 function mapStateToProps (state, props) {
   return {
-    datasets: superSites
+    datasets: spotlightAreas
   };
 }
 
 const mapDispatchToProps = {};
 
-export default connect(mapStateToProps, mapDispatchToProps)(SuperSitesHub);
+export default connect(mapStateToProps, mapDispatchToProps)(SpotlightAreasHub);
diff --git a/app/assets/scripts/components/super-sites/index.js b/app/assets/scripts/components/spotlight/index.js
similarity index 59%
rename from app/assets/scripts/components/super-sites/index.js
rename to app/assets/scripts/components/spotlight/index.js
index d5951dc2..1da4aad0 100644
--- a/app/assets/scripts/components/super-sites/index.js
+++ b/app/assets/scripts/components/spotlight/index.js
@@ -3,13 +3,13 @@ import ssLosAngeles from './ss-la';
 import ssNewYork from './ss-ny';
 import ssTokyo from './ss-tk';
 
-const superSites = [
+const spotlightAreas = [
   ssSanFrancisco,
   ssLosAngeles,
   ssNewYork,
   ssTokyo
 ];
 
-export default superSites;
+export default spotlightAreas;
 
-export const getSuperSite = (id) => superSites.find((d) => d.id === id);
+export const getSpotlightArea = (id) => spotlightAreas.find((d) => d.id === id);
diff --git a/app/assets/scripts/components/super-sites/single/index.js b/app/assets/scripts/components/spotlight/single/index.js
similarity index 93%
rename from app/assets/scripts/components/super-sites/single/index.js
rename to app/assets/scripts/components/spotlight/single/index.js
index e7552883..b36cf586 100644
--- a/app/assets/scripts/components/super-sites/single/index.js
+++ b/app/assets/scripts/components/spotlight/single/index.js
@@ -17,7 +17,7 @@ import UhOh from '../../uhoh';
 import { themeVal } from '../../../styles/utils/general';
 import Panel, { PanelHeadline, PanelTitle } from '../../common/panel';
 import { glsp } from '../../../styles/utils/theme-values';
-import { getSuperSite } from '..';
+import { getSpotlightArea } from '..';
 
 const ExploreCanvas = styled.div`
   display: grid;
@@ -46,7 +46,7 @@ const PanelBodyInner = styled.div`
   padding: ${glsp()};
 `;
 
-class SuperSitesSingle extends React.Component {
+class SpotlightAreasSingle extends React.Component {
   constructor (props) {
     super(props);
     this.resizeMap = this.resizeMap.bind(this);
@@ -149,16 +149,16 @@ class SuperSitesSingle extends React.Component {
   }
 }
 
-SuperSitesSingle.propTypes = {
+SpotlightAreasSingle.propTypes = {
 };
 
 function mapStateToProps (state, props) {
   return {
-    data: getSuperSite(props.match.params.datasetId)
+    data: getSpotlightArea(props.match.params.datasetId)
   };
 }
 
 const mapDispatchToProps = {
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(SuperSitesSingle);
+export default connect(mapStateToProps, mapDispatchToProps)(SpotlightAreasSingle);
diff --git a/app/assets/scripts/components/super-sites/ss-la.js b/app/assets/scripts/components/spotlight/ss-la.js
similarity index 100%
rename from app/assets/scripts/components/super-sites/ss-la.js
rename to app/assets/scripts/components/spotlight/ss-la.js
diff --git a/app/assets/scripts/components/super-sites/ss-ny.js b/app/assets/scripts/components/spotlight/ss-ny.js
similarity index 100%
rename from app/assets/scripts/components/super-sites/ss-ny.js
rename to app/assets/scripts/components/spotlight/ss-ny.js
diff --git a/app/assets/scripts/components/super-sites/ss-sf.js b/app/assets/scripts/components/spotlight/ss-sf.js
similarity index 100%
rename from app/assets/scripts/components/super-sites/ss-sf.js
rename to app/assets/scripts/components/spotlight/ss-sf.js
diff --git a/app/assets/scripts/components/super-sites/ss-tk.js b/app/assets/scripts/components/spotlight/ss-tk.js
similarity index 100%
rename from app/assets/scripts/components/super-sites/ss-tk.js
rename to app/assets/scripts/components/spotlight/ss-tk.js
diff --git a/app/assets/scripts/main.js b/app/assets/scripts/main.js
index cc9897b6..f6219176 100644
--- a/app/assets/scripts/main.js
+++ b/app/assets/scripts/main.js
@@ -19,7 +19,7 @@ import SizeAwareElement from './components/common/size-aware-element';
 
 // Views
 import Home from './components/home';
-import SuperSitesSingle from './components/super-sites/single';
+import SpotlightSingle from './components/spotlight/single';
 import DatasetsSingle from './components/datasets/single';
 import Sandbox from './components/sandbox';
 import UhOh from './components/uhoh';
@@ -96,8 +96,8 @@ class Root extends React.Component {
                   <LargeOnlyRoute
                     exact
                     isLargeUp={isLargeUp}
-                    path='/super-sites/:datasetId'
-                    component={SuperSitesSingle}
+                    path='/spotlight/:datasetId'
+                    component={SpotlightSingle}
                   />
                   <LargeOnlyRoute
                     exact

From a8dcd35969642265e847223b862b7f21bb36048d Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Fri, 22 May 2020 12:21:07 +0100
Subject: [PATCH 23/35] Fix color variables

---
 app/assets/scripts/components/common/dropdown.js | 8 ++++----
 app/assets/scripts/styles/table.js               | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/assets/scripts/components/common/dropdown.js b/app/assets/scripts/components/common/dropdown.js
index e4baa681..eadda7eb 100644
--- a/app/assets/scripts/components/common/dropdown.js
+++ b/app/assets/scripts/components/common/dropdown.js
@@ -558,18 +558,18 @@ export const DropInset = styled.div`
   background: ${_tint(0.96, themeVal('color.base'))};
   color: ${_tint(0.32, themeVal('type.base.color'))};
   box-shadow:
-    inset 0 ${themeVal('layout.border')} 0 0 ${themeVal('color.shadow')},
-    inset 0 -${themeVal('layout.border')} 0 0 ${themeVal('color.shadow')};
+    inset 0 ${themeVal('layout.border')} 0 0 ${themeVal('color.baseAlphaB')},
+    inset 0 -${themeVal('layout.border')} 0 0 ${themeVal('color.baseAlphaB')};
   margin: -${glbS} -${glbS} ${glbS} -${glbS};
   padding: ${glbS};
 
   &:first-child {
-    box-shadow: inset 0 -${themeVal('layout.border')} 0 0 ${themeVal('color.shadow')};
+    box-shadow: inset 0 -${themeVal('layout.border')} 0 0 ${themeVal('color.baseAlphaB')};
   }
 
   &:last-child {
     margin-bottom: -${glbS};
-    box-shadow: inset 0 ${themeVal('layout.border')} 0 0 ${themeVal('color.shadow')};
+    box-shadow: inset 0 ${themeVal('layout.border')} 0 0 ${themeVal('color.baseAlphaB')};
     border-radius: 0 0 ${themeVal('shape.rounded')} ${themeVal('shape.rounded')};
   }
 
diff --git a/app/assets/scripts/styles/table.js b/app/assets/scripts/styles/table.js
index 9478ecde..5031429d 100644
--- a/app/assets/scripts/styles/table.js
+++ b/app/assets/scripts/styles/table.js
@@ -38,7 +38,7 @@ const Table = styled.table`
   tbody td {
     text-align: left;
     vertical-align: top;
-    border-bottom: ${themeVal('layout.border')} solid ${themeVal('color.shadow')};
+    border-bottom: ${themeVal('layout.border')} solid ${themeVal('color.baseAlphaB')};
   }
 
   th:first-child, td:first-child {

From 6d9b64bdccdc9fc550696ee236ffdc7edd458e7f Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Fri, 22 May 2020 12:22:23 +0100
Subject: [PATCH 24/35] Add dataset pages

Fix #42
Fix #30
---
 .../scripts/components/common/page-header.js  |  31 ++
 .../components/datasets/dataset-no2.js        | 325 +++++++++++++++++-
 .../components/datasets/single/index.js       |  17 +-
 app/assets/scripts/styles/datasets/index.js   | 116 +++++++
 app/assets/scripts/styles/fold.js             |  70 +---
 app/assets/scripts/styles/gridder.js          |  52 +++
 app/assets/scripts/styles/inpage-hgroup.js    |  78 +++++
 app/assets/scripts/styles/media-image.js      |  52 +++
 app/assets/scripts/styles/type/prose.js       |  30 +-
 app/assets/scripts/styles/utils/math.js       |  85 +++++
 .../scripts/styles/utils/theme-values.js      |   4 +
 11 files changed, 769 insertions(+), 91 deletions(-)
 create mode 100644 app/assets/scripts/styles/datasets/index.js
 create mode 100644 app/assets/scripts/styles/gridder.js
 create mode 100644 app/assets/scripts/styles/inpage-hgroup.js
 create mode 100644 app/assets/scripts/styles/media-image.js

diff --git a/app/assets/scripts/components/common/page-header.js b/app/assets/scripts/components/common/page-header.js
index 73e7c934..9285d19a 100644
--- a/app/assets/scripts/components/common/page-header.js
+++ b/app/assets/scripts/components/common/page-header.js
@@ -14,6 +14,7 @@ import { glsp } from '../../styles/utils/theme-values';
 import Button from '../../styles/button/button';
 import Dropdown, { DropTitle, DropMenu, DropMenuItem } from './dropdown';
 import spotlightSitesList from '../spotlight';
+import datasetsList from '../datasets';
 
 const { appTitle, appShortTitle, appVersion } = config;
 
@@ -200,6 +201,36 @@ class PageHeader extends React.Component {
                   </DropMenu>
                 </Dropdown>
               </li>
+              <li>
+                <Dropdown
+                  alignment='right'
+                  direction='down'
+                  triggerElement={
+                    <Button
+                      variation='achromic-plain'
+                      title='Explore the datasets'
+                      useIcon={['chevron-down--small', 'after']}
+                    >
+                      <span>Datasets</span>
+                    </Button>
+                  }
+                >
+                  <DropTitle>Datasets</DropTitle>
+                  <DropMenu role='menu' selectable>
+                    {datasetsList.filter(d => !!d.LongForm).map(d => (
+                      <li key={d.id}>
+                        <DropMenuItem
+                          as={NavLink}
+                          to={`/datasets/${d.id}`}
+                          data-dropdown='click.close'
+                        >
+                          {d.name}
+                        </DropMenuItem>
+                      </li>
+                    ))}
+                  </DropMenu>
+                </Dropdown>
+              </li>
               <li>
                 <Button
                   as={NavLinkFilter}
diff --git a/app/assets/scripts/components/datasets/dataset-no2.js b/app/assets/scripts/components/datasets/dataset-no2.js
index 8e1bff22..56a42d46 100644
--- a/app/assets/scripts/components/datasets/dataset-no2.js
+++ b/app/assets/scripts/components/datasets/dataset-no2.js
@@ -1,33 +1,326 @@
 import React from 'react';
+import styled from 'styled-components';
+import { NavLink } from 'react-router-dom';
 
-import {
-  InpageBodyInner
-} from '../../styles/inpage';
 import Prose from '../../styles/type/prose';
+import Constrainer from '../../styles/constrainer';
+import Gridder from '../../styles/gridder';
+import InpageHGroup from '../../styles/inpage-hgroup';
+import Button from '../../styles/button/button';
+import { Fold, FoldDetails, FoldTitle } from '../../styles/fold';
+import MediaImage from '../../styles/media-image';
+import {
+  IntroLead,
+  IntroDescription,
+  StatsFold,
+  StatsHeader,
+  StatsList,
+  DetectionLead,
+  DetectionFold
+} from '../../styles/datasets';
+
+import { themeVal } from '../../styles/utils/general';
+import { glsp } from '../../styles/utils/theme-values';
+import Heading from '../../styles/type/heading';
+
+const DetectionStep1 = styled(Fold)`
+  padding-bottom: 0;
+
+  ${Gridder} {
+    align-items: center;
+  }
+
+  ${MediaImage} {
+    grid-column: full-start / content-7;
+    grid-row: 1;
+  }
+
+  ${FoldDetails} {
+    grid-column: content-8 / content-end;
+    text-align: left;
+  }
+`;
+
+const DetectionStep2 = styled(Fold)`
+  ${Gridder} {
+    align-items: center;
+  }
+
+  ${FoldDetails} {
+    grid-column: content-start / content-6;
+    text-align: left;
+    grid-row: 1;
+  }
+
+  ${MediaImage} {
+    grid-column: content-7 / full-end;
+    grid-row: 1;
+  }
+`;
+
+const EffectEntry = styled.section`
+  ${Heading} {
+    margin-bottom: ${glsp(1)};
+  }
+`;
+
+const EffectsFold = styled(Fold)`
+  background: ${themeVal('color.baseAlphaB')};
+
+  ${EffectEntry} {
+    grid-row: 3;
+    grid-column: span 4;
+  }
+
+  ${/* sc-selector */EffectEntry}:first-of-type {
+    grid-row: 2;
+    grid-column: 5 / span 8;
+  }
+`;
+
+const FactsFold = styled(Fold)`
+  padding-bottom: ${glsp(10)};
+
+  ${Gridder} {
+    align-items: center;
+  }
+
+  /* stylelint-disable-next-line */
+  ${InpageHGroup} {
+    grid-row: 1;
+    grid-column: content-start / content-7;
+  }
+
+  ${Prose} {
+    grid-column: content-start / content-end;
+    grid-row: 2;
+    margin-bottom: ${glsp(4)};
+  }
+
+  ${MediaImage} {
+    grid-column: content-6 / full-end;
+    grid-row: 3;
+
+    figcaption {
+      max-width: 46rem;
+      padding-right: ${glsp(2)};
+    }
+  }
+`;
+
+const metadata = {
+  id: 'no2',
+  name: 'Nitrogen Dioxide',
+  color: '#2276AC'
+};
 
 class NO2LongForm extends React.Component {
   render () {
     return (
-      <InpageBodyInner>
-        <Prose>
+      <React.Fragment>
+        <Fold>
+          <Constrainer>
+            <IntroLead>
+              Some intro lead, like the key takeaway of this particular dataset
+            </IntroLead>
+            <IntroDescription>
+              <p>Some more in depth information</p>
+              <p>
+                Consectetur adipisicing elit. Vitae laboriosam recusandae esse,
+                rem hic nobis. Labore voluptatum eligendi nisi eius, quod ipsa
+                soluta odio placeat hic ad, repudiandae, velit earum!
+              </p>
+            </IntroDescription>
+          </Constrainer>
+        </Fold>
+
+        <StatsFold>
+          <Constrainer>
+            <StatsHeader>
+              <Heading as='h2'>This dataset in the wild</Heading>
+              <Button
+                as={NavLink}
+                size='large'
+                variation='primary-raised-dark'
+                title='Go to map'
+                to='/'
+              >
+                View global map
+              </Button>
+            </StatsHeader>
+            <StatsList dashColor={metadata.color}>
+              <dt>Last year</dt>
+              <dd>100</dd>
+              <dt>Last month</dt>
+              <dd>2000</dd>
+            </StatsList>
+          </Constrainer>
+        </StatsFold>
+
+        <DetectionFold>
+          <Constrainer>
+            <FoldTitle size='xlarge'>How was this created?</FoldTitle>
+          </Constrainer>
+
+          <DetectionStep1>
+            <Gridder>
+              <FoldDetails>
+                <InpageHGroup
+                  suptitle='01'
+                  title='Research'
+                  dashColor={metadata.color}
+                />
+                <Prose>
+                  <p>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    Numquam rerum minus nesciunt necessitatibus ea id veritatis,
+                    et ut porro possimus accusamus assumenda, pariatur fugit
+                    praesentium magnam enim vero non, a repellat quae distinctio
+                    neque voluptatem. Dignissimos saepe animi praesentium
+                    sapiente.
+                  </p>
+                  <p>
+                    Neque reprehenderit ullam numquam nulla tempore ea natus
+                    voluptates. Sunt dolor reiciendis dolore impedit asperiores
+                    fugiat, quas saepe quibusdam itaque deleniti ratione
+                    corporis incidunt dignissimos quia nostrum aliquam possimus
+                    unde, voluptatem temporibus repellendus aliquid officia.
+                    Molestiae sit animi sequi velit consectetur est facere
+                    excepturi possimus incidunt! Pariatur blanditiis illo eaque
+                    asperiores harum.
+                  </p>
+                </Prose>
+              </FoldDetails>
+              <MediaImage
+                src='https://placeimg.com/640/480/nature?v1'
+                alt='Image'
+              />
+            </Gridder>
+          </DetectionStep1>
 
-          <blockquote>
-            <p>The Answer to the Great Question... Of Life, the Universe and Everything... Is... Forty-two, said Deep Thought, with infinite majesty and calm.</p>
-            <footer>
-              <cite>Douglas Adams, The Hitchhiker&apos;s Guide to the Galaxy </cite>
-            </footer>
-          </blockquote>
+          <DetectionStep2>
+            <Gridder>
+              <FoldDetails>
+                <InpageHGroup
+                  suptitle='02'
+                  title='Peer review'
+                  dashColor={metadata.color}
+                />
+                <Prose>
+                  <p>
+                    Blanditiis ea commodi vero ipsa hic nam corporis! At
+                    similique aspernatur ab, praesentium veniam placeat autem
+                    iste veritatis voluptates amet nesciunt suscipit optio qui
+                    voluptatum tempore. Dolores quaerat consequuntur nulla vero
+                    expedita.
+                  </p>
+                </Prose>
+              </FoldDetails>
+              <MediaImage
+                src='https://placeimg.com/640/480/nature?v2'
+                alt='Image'
+              />
+            </Gridder>
+          </DetectionStep2>
 
-          <img src='https://via.placeholder.com/600x300?text=This is an image' alt='Image' width='600px' />
+          <DetectionLead>
+            <Gridder>
+              <p>
+                Some important lead, like the conclusion of the previous topic.
+                Distinctio ullam quaerat esse id consectetur vitae praesentium
+                facilis facere voluptate.
+              </p>
+            </Gridder>
+          </DetectionLead>
+        </DetectionFold>
 
-        </Prose>
-      </InpageBodyInner>
+        <EffectsFold>
+          <Constrainer>
+            <FoldTitle size='xlarge'>
+              Some content in the form of columns
+            </FoldTitle>
+
+            <EffectEntry>
+              <Heading as='h2'>Ducimus</Heading>
+              <p>
+                Exercitationem voluptatum expedita vel rerum nemo quidem quas
+                error. Assumenda harum dolores quia error illo odio et numquam
+                magnam qui? Dolores dolorem quisquam aperiam id a ipsum rerum
+                nesciunt magnam pariatur? Ipsa nemo sequi ad recusandae commodi
+                non, voluptatum nobis iste a temporibus quidem natus labore
+                ullam distinctio illum nesciunt molestiae! Ducimus autem ea
+                aperiam in maxime quae cupiditate magni aut? Quis, blanditiis.
+                Ipsum esse sapiente ex reprehenderit veniam aliquam maiores
+                labore.
+              </p>
+            </EffectEntry>
+            <EffectEntry>
+              <Heading as='h2'>Aspernatur</Heading>
+              <p>
+                Ab quibusdam, consequatur magni magnam nisi molestiae doloremque
+                architecto hic reiciendis atque error accusamus vero sapiente,
+                in enim! Nam, iste quas cum doloremque molestiae autem odit
+                animi eius error aspernatur voluptas nobis.
+              </p>
+            </EffectEntry>
+            <EffectEntry>
+              <Heading as='h2'>Flora</Heading>
+              <p>
+                Temporibus non aliquid numquam eius. Doloremque dolore fugit,
+                quam qui nihil possimus inventore. Provident nisi dignissimos
+                aliquid assumenda dolor nemo adipisci voluptas.
+              </p>
+            </EffectEntry>
+            <EffectEntry>
+              <Heading as='h2'>Nobis</Heading>
+              <p>
+                Officiis nulla aliquam deserunt facilis consequuntur laborum
+                voluptas nobis eaque, in aperiam officia excepturi eius,
+                provident porro? Nobis praesentium quis eos excepturi.
+              </p>
+            </EffectEntry>
+          </Constrainer>
+        </EffectsFold>
+
+        <FactsFold>
+          <Gridder>
+            <InpageHGroup
+              suptitle='Known facts'
+              title='Earum eaque repudiandae, maxime incidunt modi porro quod quo reprehenderit autem esse.'
+              dashColor={metadata.color}
+            />
+            <Prose numColumns={2}>
+              <p>
+                Distinctio sunt sequi est, ex velit, eligendi id ducimus nemo
+                vero tempora, maiores laudantium dignissimos saepe beatae facere
+                facilis in corrupti? Facere, modi. Voluptatum eum adipisci ad
+                illum explicabo eveniet facere. Unde enim tempore dolore
+                doloribus inventore obcaecati aspernatur cum possimus voluptatum
+                fugit omnis quis molestiae id eos consectetur tempora delectus
+                quos maiores voluptatem quas doloremque, consequatur ex impedit.
+                Iure unde est quae doloribus necessitatibus libero aliquid
+                deleniti odit quas. Iste vel assumenda quae optio quo quam
+                labore, asperiores provident. A ducimus ipsa amet ullam iste
+                consequuntur ex, delectus quaerat qui perferendis.
+              </p>
+            </Prose>
+            <MediaImage
+              src='https://placeimg.com/640/480/nature?v3'
+              alt='Image'
+            >
+              [See Author et al. 2017 Obcaecati, unde sit commodi molestiae
+              placeat ipsa].
+            </MediaImage>
+          </Gridder>
+        </FactsFold>
+      </React.Fragment>
     );
   }
 }
 
+NO2LongForm.propTypes = {};
+
 export default {
-  id: 'no2',
-  name: 'Nitrogen Dioxide',
+  ...metadata,
   LongForm: NO2LongForm
 };
diff --git a/app/assets/scripts/components/datasets/single/index.js b/app/assets/scripts/components/datasets/single/index.js
index ef70cbb2..178fec03 100644
--- a/app/assets/scripts/components/datasets/single/index.js
+++ b/app/assets/scripts/components/datasets/single/index.js
@@ -17,13 +17,8 @@ import UhOh from '../../uhoh';
 import { glsp } from '../../../styles/utils/theme-values';
 import { getDataset } from '../';
 
-const InpageTrendsBody = styled(InpageBody)`
-  position: relative;
-  z-index: 9;
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  height: 100%;
-  padding: ${glsp(1, 3)};
+const DatasetInpageHeaderInner = styled(InpageHeaderInner)`
+  padding-left: ${glsp(2)};
 `;
 
 class DatasetsSingle extends React.Component {
@@ -36,15 +31,15 @@ class DatasetsSingle extends React.Component {
       <App pageTitle={dataset.name}>
         <Inpage>
           <InpageHeader>
-            <InpageHeaderInner>
+            <DatasetInpageHeaderInner>
               <InpageHeadline>
                 <InpageTitle>{dataset.name}</InpageTitle>
               </InpageHeadline>
-            </InpageHeaderInner>
+            </DatasetInpageHeaderInner>
           </InpageHeader>
-          <InpageTrendsBody>
+          <InpageBody>
             <dataset.LongForm />
-          </InpageTrendsBody>
+          </InpageBody>
         </Inpage>
       </App>
     );
diff --git a/app/assets/scripts/styles/datasets/index.js b/app/assets/scripts/styles/datasets/index.js
new file mode 100644
index 00000000..3c477c41
--- /dev/null
+++ b/app/assets/scripts/styles/datasets/index.js
@@ -0,0 +1,116 @@
+import styled from 'styled-components';
+
+import Prose from '../type/prose';
+import Constrainer from '../constrainer';
+import Gridder from '../gridder';
+import InpageHGroup, { headingDash } from '../inpage-hgroup';
+import { Fold } from '../fold';
+import Heading from '../type/heading';
+
+import { themeVal } from '../utils/general';
+import { glsp } from '../utils/theme-values';
+
+export const IntroLead = styled(Heading).attrs({
+  as: 'p',
+  size: 'xlarge'
+})`
+  grid-row: 1;
+  grid-column: span 6;
+`;
+
+export const IntroDescription = styled(Prose)`
+  grid-row: 2;
+  grid-column: 7 / span 6;
+`;
+
+export const StatsFold = styled(Fold)`
+  background: ${themeVal('color.baseAlphaB')};
+  overflow: hidden;
+  position: relative;
+
+  ${Constrainer} {
+    position: relative;
+
+    ::after {
+      position: absolute;
+      top: -50%;
+      left: calc(100% - ${glsp(2)});
+      width: 200vw;
+      height: 200vh;
+      z-index: 1;
+      content: '';
+      background: ${themeVal('color.surface')};
+    }
+
+    > * {
+      z-index: 2;
+    }
+  }
+`;
+
+export const StatsHeader = styled.header`
+  grid-row: 1;
+  grid-column: 9 / span 4;
+
+  ${Heading} {
+    font-size: 1rem;
+    line-height: 1.5;
+    max-width: 12rem;
+    margin-bottom: ${glsp()};
+
+    ::before {
+      margin-bottom: ${glsp(0.5)};
+    }
+  }
+`;
+
+export const StatsList = styled.dl`
+  grid-row: 1;
+  grid-column: span 8;
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-template-rows: 1fr auto;
+  grid-auto-flow: column;
+  grid-column-gap: ${glsp(2)};
+
+  dt, dd {
+    grid-column: span 4;
+  }
+
+  dt {
+    font-weight: ${themeVal('type.heading.bold')};
+  }
+
+  dd {
+    font-size: 7rem;
+    line-height: 1;
+    font-weight: ${themeVal('type.heading.medium')};
+
+    ${headingDash(glsp(0.75), glsp(1.25))}
+  }
+`;
+
+export const DetectionFold = styled(Fold)`
+  ${InpageHGroup} {
+    margin-bottom: ${glsp(2)};
+  }
+`;
+
+export const DetectionLead = styled(Heading).attrs({
+  as: 'div',
+  size: 'xlarge'
+})`
+  padding: ${glsp(4)} 0;
+
+  ${Gridder} {
+    align-items: center;
+
+    > * {
+      grid-column: content-3 / content-11;
+    }
+  }
+  
+  > *:not(:last-child) {
+    margin-bottom: ${glsp(2)};
+  }
+`;
diff --git a/app/assets/scripts/styles/fold.js b/app/assets/scripts/styles/fold.js
index 6a34d025..859f3e5c 100644
--- a/app/assets/scripts/styles/fold.js
+++ b/app/assets/scripts/styles/fold.js
@@ -1,66 +1,30 @@
-import styled, { css } from 'styled-components';
-import { rgba, tint } from 'polished';
+import styled from 'styled-components';
 
-import { themeVal, stylizeFunction } from './utils/general';
-import { divide, multiply } from './utils/math';
-import { headingAlt } from './type/heading';
+import Constrainer from './constrainer';
 
-const _rgba = stylizeFunction(rgba);
-const _tint = stylizeFunction(tint);
+import { glsp } from './utils/theme-values';
+import Heading from './type/heading';
 
 export const Fold = styled.section`
-  padding: 0 ${multiply(themeVal('layout.space'), 4)};
-  background: ${_tint(0.96, themeVal('color.primary'))};
-`;
-
-export const FoldHeader = styled.header`
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  position: relative;
-  padding: ${multiply(themeVal('layout.space'), 2)} 0;
-  z-index: 10;
-  transition: padding-top 0.24s ease-in-out 0s, padding-bottom 0.24s ease-in-out 0s;
-
-  /* isSticky */
-  ${({ isSticky }) => isSticky &&
-    css`
-      padding: ${themeVal('layout.space')} ${multiply(themeVal('layout.space'), 4)};
-      margin-left: -4rem;
-      width: calc(100% - 4rem) !important;
-      ${() => CSS.supports('backdrop-filter', 'blur(0.5rem)')
-        ? css`
-          background: ${_rgba(_tint(0.96, themeVal('color.primary')), 0.48)};
-          backdrop-filter: blur(0.5rem);
-        ` : css`
-          background: ${_rgba(_tint(0.96, themeVal('color.primary')), 0.80)};
-        `
-      }
-    `}
-`;
+  padding: ${glsp(3)} 0;
 
-export const FoldHeadline = styled.div`
-  > *:last-child {
-    margin-bottom: 0;
+  ${Constrainer} {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-gap: ${glsp(4)} ${glsp(2)};
   }
 `;
 
-export const FoldBody = styled.div`
-  padding: 0 0 ${multiply(themeVal('layout.space'), 4)} 0;
+export const FoldDetails = styled.div`
+  /* Defined for reference use */
 `;
 
-export const FoldToolbar = styled.div`
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  padding-left: ${multiply(themeVal('layout.space'), 2)};
-  margin-left: auto;
+export const FoldTitle = styled(Heading)`
+  grid-column: span 5;
 `;
 
-export const FoldToolbarLabel = styled.h3`
-  ${headingAlt}
-  color: ${_rgba(themeVal('color.base'), 0.64)};
-  font-size: 1rem;
-  line-height: 2rem;
-  margin-right: ${divide(themeVal('layout.space'), 2)};
+export const GridSection = styled.section`
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-column-gap: ${glsp(2)};
 `;
diff --git a/app/assets/scripts/styles/gridder.js b/app/assets/scripts/styles/gridder.js
new file mode 100644
index 00000000..e9eecc8c
--- /dev/null
+++ b/app/assets/scripts/styles/gridder.js
@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+import { themeVal } from './utils/general';
+import { divide, subtract, val2px } from './utils/math';
+import { glsp } from './utils/theme-values';
+
+// Grid:
+//   start    1    2    3    4    5    6    7    8    9   10   11   12     end
+// |      |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|      |
+// |      |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|      |
+// |      |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|      |
+// |      |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|      |
+// |      |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|  |*|      |
+//
+// The start and end take up 1 fraction and its size is fluid, depending on
+// window size.
+// Each column takes up a 12th of the max content width (defined in the theme).
+// Grid gaps are marked with an asterisk.
+
+// Use all the values defined in pixels.
+const layoutMax = val2px(themeVal('layout.max'));
+const gridGap = val2px(glsp(2));
+// Discard the base padding to ensure that gridded folds have the same size as
+// the constrainers.
+const layoutMaxNoPadding = subtract(layoutMax, gridGap);
+// Each column takes up a 12th of the content block (with is the layoutMaxNoPadding).
+const fullColumn = divide(layoutMaxNoPadding, 12);
+// To get the usable size of each column we need to account for the gap.
+const contentColWidth = subtract(fullColumn, gridGap);
+
+const Gridder = styled.div`
+  display: grid;
+  grid-gap: ${glsp(2)};
+  grid-template-columns:
+    [full-start] minmax(0, 1fr) 
+    [content-start] minmax(0, ${contentColWidth}) 
+    [content-2] minmax(0, ${contentColWidth}) 
+    [content-3] minmax(0, ${contentColWidth}) 
+    [content-4] minmax(0, ${contentColWidth}) 
+    [content-5] minmax(0, ${contentColWidth}) 
+    [content-6] minmax(0, ${contentColWidth}) 
+    [content-7] minmax(0, ${contentColWidth}) 
+    [content-8] minmax(0, ${contentColWidth}) 
+    [content-9] minmax(0, ${contentColWidth}) 
+    [content-10] minmax(0, ${contentColWidth}) 
+    [content-11] minmax(0, ${contentColWidth}) 
+    [content-12] minmax(0, ${contentColWidth}) 
+    [content-end] minmax(0, 1fr) 
+    [full-end]
+  ;
+`;
+
+export default Gridder;
diff --git a/app/assets/scripts/styles/inpage-hgroup.js b/app/assets/scripts/styles/inpage-hgroup.js
new file mode 100644
index 00000000..1514f5b8
--- /dev/null
+++ b/app/assets/scripts/styles/inpage-hgroup.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { PropTypes as T } from 'prop-types';
+
+import Heading from './type/heading';
+
+import { themeVal } from './utils/general';
+import { glsp } from './utils/theme-values';
+
+export const headingDash = (mtop, mbottom) => css`
+  &::before {
+    content: '';
+    display: block;
+    background: ${({ dashColor }) => dashColor};
+    height: ${glsp(1 / 4)};
+    width: ${glsp(2)};
+    border-radius: ${themeVal('shape.ellipsoid')};
+    margin: ${mtop} 0 ${mbottom} 0;
+  }
+`;
+
+const Suptitle = styled.p`
+  font-size: 1rem;
+  font-weight: ${themeVal('type.heading.bold')};
+`;
+
+const IntroTitle = styled(Heading)`
+  display: flex;
+  flex-flow: column nowrap;
+  letter-spacing: -0.016em;
+
+  ${headingDash(glsp(0.50), glsp())}
+`;
+
+function InpageHGroupCmp ({
+  suptitle,
+  title,
+  dashColor,
+  size,
+  as,
+  className,
+  wrapperEl: WEl
+}) {
+  return (
+    <WEl className={className}>
+      <Suptitle>{suptitle}</Suptitle>
+      <IntroTitle
+        dashColor={dashColor}
+        size={size}
+        as={as}
+      >
+        {title}
+      </IntroTitle>
+    </WEl>
+  );
+}
+
+InpageHGroupCmp.propTypes = {
+  className: T.string,
+  suptitle: T.string.isRequired,
+  title: T.string.isRequired,
+  dashColor: T.oneOfType([T.string, T.func]),
+  size: T.string,
+  as: T.string,
+  wrapperEl: T.string
+};
+
+InpageHGroupCmp.defaultProps = {
+  dashColor: themeVal('color.primary'),
+  size: 'xlarge',
+  wrapperEl: 'header'
+};
+
+const InpageHGroup = styled(InpageHGroupCmp)`
+  /* Export styled to be treated as a styled component */
+`;
+
+export default InpageHGroup;
diff --git a/app/assets/scripts/styles/media-image.js b/app/assets/scripts/styles/media-image.js
new file mode 100644
index 00000000..a99c857b
--- /dev/null
+++ b/app/assets/scripts/styles/media-image.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+import { PropTypes as T } from 'prop-types';
+
+import { glsp } from './utils/theme-values';
+
+const MediaImageFigure = ({
+  className,
+  children,
+  ...props
+}) => (
+  <figure className={className}>
+    <div>
+      <img {...props} />
+    </div>
+    {children ? (
+      <figcaption>
+        {children}
+      </figcaption>
+    ) : null}
+  </figure>
+);
+
+MediaImageFigure.propTypes = {
+  className: T.string,
+  children: T.node
+};
+
+const MediaImage = styled(MediaImageFigure)`
+  display: block;
+  width: 100%;
+
+  > *:not(:last-child) {
+    margin-bottom: ${glsp()}
+  }
+
+  img {
+    display: block;
+    width: 100%;
+  }
+
+  figcaption {
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+
+    > *:not(:last-child) {
+      margin-bottom: ${glsp()}
+    }
+  }
+`;
+
+export default MediaImage;
diff --git a/app/assets/scripts/styles/type/prose.js b/app/assets/scripts/styles/type/prose.js
index 42d11891..c76d25e7 100644
--- a/app/assets/scripts/styles/type/prose.js
+++ b/app/assets/scripts/styles/type/prose.js
@@ -1,10 +1,20 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+
 import { themeVal } from '../utils/general';
 import { multiply } from '../utils/math';
+import { glsp } from '../utils/theme-values';
+
+// Extract fn to avoid complaints by the linter.
+const numColumnsFn = ({ numColumns }) => numColumns && css`
+  column-count: ${numColumns};
+  column-gap: ${glsp(2)};
+`;
 
 const Prose = styled.div`
-  font-size: ${themeVal('type.base.size')};                                     /* 16px */
-  line-height: ${themeVal('type.base.line')};                                   /* 24px */
+  font-size: ${themeVal('type.base.size')};                           /* 16px */
+  line-height: ${themeVal('type.base.line')};                         /* 24px */
+
+  ${numColumnsFn}
 
   ul, ol, dl {
     padding: 0;
@@ -28,14 +38,12 @@ const Prose = styled.div`
     margin-bottom: 0;
   }
 
-  &, li {
-    > * {
-      margin-bottom: ${multiply(themeVal('type.base.size'), themeVal('type.base.line'))}; /* same as line-height */
-    }
-  
-    > *:last-child {
-      margin-bottom: 0;
-    }
+  > * {
+    margin-bottom: ${multiply(themeVal('type.base.size'), themeVal('type.base.line'))}; /* same as line-height */
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
   }
 `;
 
diff --git a/app/assets/scripts/styles/utils/math.js b/app/assets/scripts/styles/utils/math.js
index 800f9462..6816c414 100644
--- a/app/assets/scripts/styles/utils/math.js
+++ b/app/assets/scripts/styles/utils/math.js
@@ -1,3 +1,7 @@
+import get from 'lodash.get';
+
+import { px, rem } from './general';
+
 /**
  * Creates a math function that performs the given operation taking into account
  * only the unit of the first value. Eg: 2rem * 2 = 4rem | 2 * 2rem = 4
@@ -79,3 +83,84 @@ export const divide = createMathOperation('/');
  * @param {string} b Second value
  */
 export const multiply = createMathOperation('*');
+
+/**
+ * Convert the given value to the given unit using the base size defined in the
+ * theme. (theme.type.base.root) If value is a function will execute it. This
+ * allows to use directly in styled-components with themeVal.
+ * Only conversion between rem and px is allowed. Any other destination unit
+ * will be ignored and the value returned as is.
+ *
+ * @example
+ * rp2rp(themeVal('layout.max'), 'px')
+ *
+ * @param {mixed} v The value
+ * @param {mixed} unit The destination unit
+ *
+ * @throws Error if the root type pixel value is not defined.
+ */
+const rp2rp = (v, unit) => (...args) => {
+  v = typeof v === 'function' ? v(...args) : v;
+  unit = typeof unit === 'function' ? unit(...args) : unit;
+
+  const rootV = get(args[0], 'theme.type.base.root', null);
+  if (rootV === null) {
+    throw new Error('Root type pixel value not found in theme.type.base.root');
+  }
+
+  const srcUnit = (v + '').match(/[0-9]*(?:.[0-9]+)?(.*)/)[1];
+  const srcVal = parseFloat(v);
+
+  if (unit === 'px') {
+    return srcUnit === 'rem'
+      ? srcVal * parseFloat(rootV)
+      : px(srcVal);
+  }
+
+  if (unit === 'rem') {
+    return srcUnit === 'px'
+      ? srcVal / parseFloat(rootV)
+      : rem(srcVal);
+  }
+
+  // Invalid unit - return as is.
+  return v;
+};
+
+/**
+ * Convert the given value to pixels using the base size defined in the theme.
+ * (theme.type.base.root)
+ * If value is a function will execute it. This allows to use directly in
+ * styled-components with themeVal
+ *
+ * @see rp2rp()
+ *
+ * @example
+ * val2px(themeVal('layout.max'))
+ *
+ * @param {mixed} val The value
+ *
+ * @throws Error if the root type pixel value is not defined.
+ */
+export const val2px = (val) => {
+  return rp2rp(val, 'px');
+};
+
+/**
+ * Convert the given value to rem using the base size defined in the theme.
+ * (theme.type.base.root)
+ * If value is a function will execute it. This allows to use directly in
+ * styled-components with themeVal
+ *
+ * @see rp2rp()
+ *
+ * @example
+ * val2rem(themeVal('layout.max'))
+ *
+ * @param {mixed} val The value
+ *
+ * @throws Error if the root type pixel value is not defined.
+ */
+export const val2rem = (val) => {
+  return rp2rp(val, 'rem');
+};
diff --git a/app/assets/scripts/styles/utils/theme-values.js b/app/assets/scripts/styles/utils/theme-values.js
index fe08a789..f9ee1082 100644
--- a/app/assets/scripts/styles/utils/theme-values.js
+++ b/app/assets/scripts/styles/utils/theme-values.js
@@ -13,6 +13,10 @@ import { css } from 'styled-components';
 export const glsp = (...args) => {
   args = args.length ? args : [1];
   const fns = args.map(m => multiply(themeVal('layout.space'), m));
+  // If the there's only one argument return in value format to be used by
+  // other methods that need this to resolve to a number.
+  if (fns.length === 1) return fns[0];
+
   const spaces = Array(args.length - 1).fill(' ');
   return css(['', ...spaces, ''], ...fns);
 };

From 33982051f00c507a1e508acf9ed87c3825d66360 Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Fri, 22 May 2020 12:45:40 +0100
Subject: [PATCH 25/35] Code cleanup

---
 .vscode/launch.json                           | 28 ++++++
 .../scripts/components/datasets/index.js      | 41 +++++++-
 app/assets/scripts/components/home/index.js   | 94 +++++++------------
 3 files changed, 100 insertions(+), 63 deletions(-)
 create mode 100644 .vscode/launch.json

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 00000000..81c36d42
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,28 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Firefox",
+      "type": "firefox",
+      "request": "launch",
+      "reAttach": true,
+      "url": "http://localhost:9000",
+      "webRoot": "${workspaceFolder}",
+      "pathMappings": [
+        {
+          "url": "http://localhost:9000/assets/scripts/app",
+          "path": "${workspaceFolder}/app"
+        }
+      ]
+    },
+    {
+      "name": "Chrome",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:9000",
+      "sourceMapPathOverrides": {
+        "*": "${workspaceFolder}/*"
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/app/assets/scripts/components/datasets/index.js b/app/assets/scripts/components/datasets/index.js
index 8504d378..657ace8c 100644
--- a/app/assets/scripts/components/datasets/index.js
+++ b/app/assets/scripts/components/datasets/index.js
@@ -1,7 +1,46 @@
+/**
+ * How to add a new Dataset page:
+ * 1) Create a file for the page inside scripts/components/datasets/.
+ *    The name of the file should be `dataset-[name].js
+ *    The file will have to export an object with the following properties:
+ *    - id: string
+ *    - color: string
+ *    - name: string
+ *    - LongForm: ReactComponent
+ *
+ *    The react component will dictate how the dataset page is rendered. If set
+ *    to null, no page will be created for the dataset.
+ *
+ *    The file should look something like:
+ *     const metadata = {
+ *       id: 'no2',
+ *       name: 'Nitrogen Dioxide',
+ *       color: '#2276AC'
+ *     };
+ *
+ *     class NO2LongForm extends React.Component {
+ *       render () {
+ *         return <p>This is the content for the no2 dataset</p>
+ *       }
+ *     }
+ *
+ *     export default {
+ *       ...metadata,
+ *       LongForm: NO2LongForm
+ *     };
+ *
+ * 2) Import the page below.
+ *
+ * 3) Add the page to the datasets array
+ *
+ */
 import no2 from './dataset-no2';
 import population from './dataset-population';
 
-const datasets = [no2, population];
+const datasets = [
+  no2,
+  population
+];
 
 export default datasets;
 
diff --git a/app/assets/scripts/components/home/index.js b/app/assets/scripts/components/home/index.js
index 301d6159..11a7436d 100644
--- a/app/assets/scripts/components/home/index.js
+++ b/app/assets/scripts/components/home/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import T from 'prop-types';
 import styled from 'styled-components';
 import { connect } from 'react-redux';
-import { format, isBefore, sub } from 'date-fns';
+import { sub } from 'date-fns';
 import get from 'lodash.get';
 import find from 'lodash.find';
 
@@ -23,10 +23,6 @@ import MapMessage from './map-message';
 
 import { showGlobalLoading, hideGlobalLoading } from '../common/global-loading';
 import { themeVal } from '../../styles/utils/general';
-import {
-  fetchTimeSeriesDaily as fetchTimeSeriesDailyAction,
-  fetchTimeSeriesOverview as fetchTimeSeriesOverviewAction
-} from '../../redux/time-series';
 import { wrapApiResult, getFromState } from '../../redux/reduxeed';
 import {
   fetchCogTimeData as fetchCogTimeDataAction,
@@ -35,7 +31,6 @@ import {
 import history from '../../utils/history';
 import { utcDate } from '../../utils/utils';
 import mapLayers from '../common/layers';
-import { unionOverviewDateDomain } from '../../utils/date';
 
 /**
  * Returns a feature with a polygon geometry made of the provided bounds.
@@ -132,6 +127,16 @@ class Home extends React.Component {
     this.props.invalidateCogTimeData();
   }
 
+  /**
+   * Sets the state of a give layer in the component state.
+   * Works exactly like setState, but for a specific layer data.
+   *
+   * @param {string} id If of the layer for which to update data
+   * @param {mixed} data Object with data to merge or function. If a function is
+   *                provided, it will be called with the current data. It should
+   *                return an object which will be merged with the existent data
+   * @param {funct} cb Callback to execute after setting state.
+   */
   setLayerState (id, data, cb) {
     this.setState(state => {
       const currentState = state.layersState[id] || {};
@@ -147,6 +152,13 @@ class Home extends React.Component {
     }, () => cb && cb());
   }
 
+  /**
+   * Returns the layer state for a given layer id, or a specific state path
+   * if second parameter is provided.
+   *
+   * @param {string} id Layer for which to get the state.
+   * @param {mixed} prop Path to a specific prop (optional). Used lodash.get
+   */
   getLayerState (id, prop) {
     const path = prop
       ? typeof prop === 'string' ? [id, prop] : [id, ...prop]
@@ -154,6 +166,10 @@ class Home extends React.Component {
     return get(this.state.layersState, path);
   }
 
+  /**
+   * Returns the layer list, merging the visibility state and any other data
+   * stored for each layer in the layer state.
+   */
   getLayersWithState () {
     const { activeLayers, layersState } = this.state;
     return mapLayers.map((l) => {
@@ -224,7 +240,6 @@ class Home extends React.Component {
           timelineDate: payload.date
         });
         // this.getActiveTimeseriesLayers().forEach(l => {
-        //   this.props.fetchTimeSeriesDaily(
         //     l.id,
         //     format(payload.date, 'yyyy-MM-dd')
         //   );
@@ -335,50 +350,16 @@ class Home extends React.Component {
   }
 
   async toggleLayer (layer) {
-    const { fetchTimeSeriesOverview } = this.props;
     const layerId = layer.id;
 
     const { activeLayers } = this.state;
     const isEnabled = activeLayers.includes(layerId);
 
-    if (layer.type === 'timeseries') {
-      // Check if there layer data for this layer.
-      // If not, load the data and only enable the layer if successful.
-      if (!isEnabled) {
-        showGlobalLoading();
-        const res = await fetchTimeSeriesOverview(layerId);
-        // Before setting a new date see if it is available for all active
-        // timeseries layers.
-        const activeTSLayers = this.getActiveTimeseriesLayers()
-          // Add the one we're about to enable in the format needed
-          // by getTimeseriesOverviewData
-          .concat({ id: layerId });
-        const activeTSOverview = this.getTimeseriesOverviewData(activeTSLayers);
-        // Compute date intersection between all the overviews.
-        const dateDomain = unionOverviewDateDomain(activeTSOverview);
-
-        // Use the max available date if current date is after it.
-        const currDate = this.state.timelineDate;
-        const nextDdate =
-          currDate && isBefore(currDate, dateDomain[1])
-            ? currDate
-            : dateDomain[1];
-
-        this.setState({ timelineDate: nextDdate });
-        this.props.fetchTimeSeriesDaily(
-          layer.id,
-          format(nextDdate, 'yyyy-MM-dd')
-        );
-        hideGlobalLoading();
-        if (res.error) return;
-      }
-    }
-
     if (layer.type === 'raster-timeseries') {
       this.setState(state => {
         // Check if there's a knob value set. If not, means that this is the
         // first time it is enabled and we need to set a default.
-        const knobCurrPos = get(state, ['layersState', layer.id, 'knobCurrPos'], null);
+        const knobCurrPos = get(state, ['layersState', layerId, 'knobCurrPos'], null);
         const knobData = knobCurrPos === null
           ? {
             knobPos: 50,
@@ -389,8 +370,8 @@ class Home extends React.Component {
           timelineDate: utcDate(layer.domain[1]),
           layersState: {
             ...state.layersState,
-            [layer.id]: {
-              ...state.layersState[layer.id],
+            [layerId]: {
+              ...state.layersState[layerId],
               ...knobData
             }
           }
@@ -399,7 +380,7 @@ class Home extends React.Component {
     }
 
     // If we disable a layer we're comparing, disable the comparison as well.
-    if (this.getLayerState(layer.id, 'comparing')) {
+    if (this.getLayerState(layerId, 'comparing')) {
       this.toggleLayerCompare(layer);
     }
 
@@ -426,10 +407,11 @@ class Home extends React.Component {
   }
 
   toggleLayerCompare (layer) {
-    const isEnabled = this.getLayerState(layer.id, 'comparing');
+    const layerId = layer.id;
+    const isComparing = this.getLayerState(layerId, 'comparing');
 
-    if (isEnabled) {
-      this.setLayerState(layer.id, {
+    if (isComparing) {
+      this.setLayerState(layerId, {
         comparing: false
       });
     } else {
@@ -446,8 +428,8 @@ class Home extends React.Component {
         }), state.layersState);
 
         // Set current as active
-        layersState[layer.id] = {
-          ...layersState[layer.id],
+        layersState[layerId] = {
+          ...layersState[layerId],
           comparing: true
         };
 
@@ -463,11 +445,6 @@ class Home extends React.Component {
     );
   }
 
-  getTimeseriesOverviewData (layers) {
-    const { timeSeriesOverview } = this.props;
-    return layers.map((l) => timeSeriesOverview[l.id]);
-  }
-
   render () {
     const layers = this.getLayersWithState();
     const activeTimeseriesLayers = this.getActiveTimeseriesLayers();
@@ -544,25 +521,18 @@ class Home extends React.Component {
 }
 
 Home.propTypes = {
-  fetchTimeSeriesDaily: T.func,
-  fetchTimeSeriesOverview: T.func,
   fetchCogTimeData: T.func,
   invalidateCogTimeData: T.func,
-  timeSeriesOverview: T.object,
   no2CogTimeData: T.object
 };
 
 function mapStateToProps (state, props) {
   return {
-    timeSeriesDaily: wrapApiResult(state.timeSeries.daily, true),
-    timeSeriesOverview: wrapApiResult(state.timeSeries.overview, true),
     no2CogTimeData: wrapApiResult(getFromState(state, ['cogTimeData', 'no2']))
   };
 }
 
 const mapDispatchToProps = {
-  fetchTimeSeriesDaily: fetchTimeSeriesDailyAction,
-  fetchTimeSeriesOverview: fetchTimeSeriesOverviewAction,
   fetchCogTimeData: fetchCogTimeDataAction,
   invalidateCogTimeData: invalidateCogTimeDataAction
 };

From d812b5c40746ccd94f307abe1938ba76fb3cedcf Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Fri, 22 May 2020 13:27:05 +0100
Subject: [PATCH 26/35] Get spotlights from api

Fix #47
---
 .../scripts/components/common/page-header.js  |  23 ++-
 .../scripts/components/spotlight/hub/index.js |  18 +--
 .../scripts/components/spotlight/index.js     |  15 --
 .../components/spotlight/single/index.js      | 133 ++++++++++--------
 .../scripts/components/spotlight/ss-la.js     |   1 -
 .../scripts/components/spotlight/ss-ny.js     |   1 -
 .../scripts/components/spotlight/ss-sf.js     |   1 -
 .../scripts/components/spotlight/ss-tk.js     |   1 -
 app/assets/scripts/config/production.js       |   4 +-
 app/assets/scripts/main.js                    |   7 +-
 app/assets/scripts/redux/index.js             |   4 +-
 app/assets/scripts/redux/spotlight.js         |  49 +++++++
 12 files changed, 163 insertions(+), 94 deletions(-)
 delete mode 100644 app/assets/scripts/components/spotlight/index.js
 delete mode 100644 app/assets/scripts/components/spotlight/ss-la.js
 delete mode 100644 app/assets/scripts/components/spotlight/ss-ny.js
 delete mode 100644 app/assets/scripts/components/spotlight/ss-sf.js
 delete mode 100644 app/assets/scripts/components/spotlight/ss-tk.js
 create mode 100644 app/assets/scripts/redux/spotlight.js

diff --git a/app/assets/scripts/components/common/page-header.js b/app/assets/scripts/components/common/page-header.js
index 9285d19a..3a4d3d3b 100644
--- a/app/assets/scripts/components/common/page-header.js
+++ b/app/assets/scripts/components/common/page-header.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import T from 'prop-types';
 import styled from 'styled-components';
+import { connect } from 'react-redux';
 
 import config from '../../config';
 
@@ -10,10 +11,10 @@ import { themeVal } from '../../styles/utils/general';
 import { reveal } from '../../styles/animation';
 import { filterComponentProps } from '../../utils/utils';
 import { glsp } from '../../styles/utils/theme-values';
+import { wrapApiResult } from '../../redux/reduxeed';
 
 import Button from '../../styles/button/button';
 import Dropdown, { DropTitle, DropMenu, DropMenuItem } from './dropdown';
-import spotlightSitesList from '../spotlight';
 import datasetsList from '../datasets';
 
 const { appTitle, appShortTitle, appVersion } = config;
@@ -143,7 +144,9 @@ const NavLinkFilter = filterComponentProps(NavLink, propsToFilter);
 
 class PageHeader extends React.Component {
   render () {
-    const { useShortTitle } = this.props;
+    const { useShortTitle, spotlightList } = this.props;
+
+    const spotlightAreas = spotlightList.isReady() && spotlightList.getData();
 
     return (
       <PageHead role='banner'>
@@ -175,6 +178,7 @@ class PageHeader extends React.Component {
                 <Dropdown
                   alignment='right'
                   direction='down'
+                  disabled={!spotlightAreas}
                   triggerElement={
                     <Button
                       variation='achromic-plain'
@@ -187,7 +191,7 @@ class PageHeader extends React.Component {
                 >
                   <DropTitle>Spotlight areas</DropTitle>
                   <DropMenu role='menu' selectable>
-                    {spotlightSitesList.map(ss => (
+                    {spotlightAreas && spotlightAreas.map(ss => (
                       <li key={ss.id}>
                         <DropMenuItem
                           as={NavLink}
@@ -250,7 +254,16 @@ class PageHeader extends React.Component {
 }
 
 PageHeader.propTypes = {
-  useShortTitle: T.bool
+  useShortTitle: T.bool,
+  spotlightList: T.object
 };
 
-export default PageHeader;
+function mapStateToProps (state, props) {
+  return {
+    spotlightList: wrapApiResult(state.spotlight.list)
+  };
+}
+
+const mapDispatchToProps = {};
+
+export default connect(mapStateToProps, mapDispatchToProps)(PageHeader);
diff --git a/app/assets/scripts/components/spotlight/hub/index.js b/app/assets/scripts/components/spotlight/hub/index.js
index bca5960e..1b474cf8 100644
--- a/app/assets/scripts/components/spotlight/hub/index.js
+++ b/app/assets/scripts/components/spotlight/hub/index.js
@@ -16,7 +16,7 @@ import {
 
 import { glsp } from '../../../styles/utils/theme-values';
 import { themeVal } from '../../../styles/utils/general';
-import spotlightAreas from '../index';
+import { wrapApiResult } from '../../../redux/reduxeed';
 
 const InpageTrendsBody = styled(InpageBody)`
   position: relative;
@@ -73,7 +73,9 @@ const PanelNavLink = styled(NavLink)`
 
 class SpotlightAreasHub extends React.Component {
   render () {
-    const { datasets } = this.props;
+    const { spotlightList } = this.props;
+
+    const spotlightAreas = spotlightList.isReady() && spotlightList.getData();
 
     return (
       <App pageTitle='Spotlight areas'>
@@ -87,13 +89,13 @@ class SpotlightAreasHub extends React.Component {
           </InpageHeader>
           <InpageTrendsBody>
             <ul>
-              {datasets.map((item) => (
+              {spotlightAreas && spotlightAreas.map((item) => (
                 <li key={item.id}>
                   <PanelNavLink
-                    to={`/trends/${item.id}`}
-                    title={`View spotlight area ${item.name}`}
+                    to={`/spotlight/${item.id}`}
+                    title={`View spotlight area ${item.label}`}
                   >
-                    {item.name}
+                    {item.label}
                   </PanelNavLink>
                 </li>
               ))}
@@ -106,12 +108,12 @@ class SpotlightAreasHub extends React.Component {
 }
 
 SpotlightAreasHub.propTypes = {
-  datasets: T.array
+  spotlightList: T.object
 };
 
 function mapStateToProps (state, props) {
   return {
-    datasets: spotlightAreas
+    spotlightList: wrapApiResult(state.spotlight.list)
   };
 }
 
diff --git a/app/assets/scripts/components/spotlight/index.js b/app/assets/scripts/components/spotlight/index.js
deleted file mode 100644
index 1da4aad0..00000000
--- a/app/assets/scripts/components/spotlight/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import ssSanFrancisco from './ss-sf';
-import ssLosAngeles from './ss-la';
-import ssNewYork from './ss-ny';
-import ssTokyo from './ss-tk';
-
-const spotlightAreas = [
-  ssSanFrancisco,
-  ssLosAngeles,
-  ssNewYork,
-  ssTokyo
-];
-
-export default spotlightAreas;
-
-export const getSpotlightArea = (id) => spotlightAreas.find((d) => d.id === id);
diff --git a/app/assets/scripts/components/spotlight/single/index.js b/app/assets/scripts/components/spotlight/single/index.js
index b36cf586..f8ff4711 100644
--- a/app/assets/scripts/components/spotlight/single/index.js
+++ b/app/assets/scripts/components/spotlight/single/index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import T from 'prop-types';
 import styled from 'styled-components';
 import { connect } from 'react-redux';
 
@@ -17,7 +18,9 @@ import UhOh from '../../uhoh';
 import { themeVal } from '../../../styles/utils/general';
 import Panel, { PanelHeadline, PanelTitle } from '../../common/panel';
 import { glsp } from '../../../styles/utils/theme-values';
-import { getSpotlightArea } from '..';
+import { fetchSpotlightSingle as fetchSpotlightSingleAction } from '../../../redux/spotlight';
+import { wrapApiResult, getFromState } from '../../../redux/reduxeed';
+import { showGlobalLoading, hideGlobalLoading } from '../../common/global-loading';
 
 const ExploreCanvas = styled.div`
   display: grid;
@@ -56,16 +59,23 @@ class SpotlightAreasSingle extends React.Component {
     this.mbMapRef = React.createRef();
   }
 
+  componentDidMount () {
+    this.requestSpotlight();
+  }
+
   componentDidUpdate (prevProps, prevState) {
-    const { data } = this.props;
-    if (data && data.id !== prevProps.data.id) {
-      this.mbMapRef.current.mbMap.flyTo({
-        center: this.props.data.center,
-        zoom: 9
-      });
+    const { spotlightId } = this.props.match.params;
+    if (spotlightId !== prevProps.match.params.spotlightId) {
+      this.requestSpotlight();
     }
   }
 
+  async requestSpotlight () {
+    showGlobalLoading();
+    await this.props.fetchSpotlightSingle(this.props.match.params.spotlightId);
+    hideGlobalLoading();
+  }
+
   resizeMap () {
     if (this.mbMapRef.current) {
       // Delay execution to give the panel animation time to finish.
@@ -77,17 +87,20 @@ class SpotlightAreasSingle extends React.Component {
 
   async onMapAction (action, payload) {
     switch (action) {
-      case 'map.loaded':
-        this.mbMapRef.current.mbMap.flyTo({
-          center: this.props.data.center,
-          zoom: 9
-        });
+      case 'map.loaded': {
+        const spotlightData = this.props.spotlight.getData();
+        this.mbMapRef.current.mbMap.fitBounds(spotlightData.bounding_box);
         break;
+      }
     }
   }
 
   render () {
-    if (!this.props.data) return <UhOh />;
+    const { spotlight } = this.props;
+
+    if (spotlight.hasError()) return <UhOh />;
+
+    const spotlightData = spotlight.getData();
 
     return (
       <App>
@@ -99,50 +112,52 @@ class SpotlightAreasSingle extends React.Component {
               </InpageHeadline>
             </InpageHeaderInner>
           </InpageHeader>
-          <InpageBody>
-            <ExploreCanvas>
-              <PrimePanel
-                collapsible
-                direction='left'
-                onPanelChange={this.resizeMap}
-                headerContent={
-                  <PanelHeadline>
-                    <h2>{this.props.data.label}</h2>
-                  </PanelHeadline>
-                }
-                bodyContent={
-                  <PanelBodyInner>
-                    <p>Layers to control the map.</p>
-                  </PanelBodyInner>
-                }
-              />
-              <ExploreCarto>
-                <MbMap
-                  ref={this.mbMapRef}
-                  onAction={this.onMapAction}
-                  layers={[]}
-                  activeLayers={[]}
-                  layerData={{}}
-                  aoiState={null}
+          {spotlight.isReady() && (
+            <InpageBody>
+              <ExploreCanvas>
+                <PrimePanel
+                  collapsible
+                  direction='left'
+                  onPanelChange={this.resizeMap}
+                  headerContent={
+                    <PanelHeadline>
+                      <h2>{spotlightData.label}</h2>
+                    </PanelHeadline>
+                  }
+                  bodyContent={
+                    <PanelBodyInner>
+                      <p>Layers to control the map.</p>
+                    </PanelBodyInner>
+                  }
+                />
+                <ExploreCarto>
+                  <MbMap
+                    ref={this.mbMapRef}
+                    onAction={this.onMapAction}
+                    layers={[]}
+                    activeLayers={[]}
+                    layerData={{}}
+                    aoiState={null}
+                  />
+                </ExploreCarto>
+                <Panel
+                  collapsible
+                  direction='right'
+                  onPanelChange={this.resizeMap}
+                  headerContent={
+                    <PanelHeadline>
+                      <PanelTitle>Insights</PanelTitle>
+                    </PanelHeadline>
+                  }
+                  bodyContent={
+                    <PanelBodyInner>
+                      <p>Detailed information for the area being viewed and/or interacted by the user.</p>
+                    </PanelBodyInner>
+                  }
                 />
-              </ExploreCarto>
-              <Panel
-                collapsible
-                direction='right'
-                onPanelChange={this.resizeMap}
-                headerContent={
-                  <PanelHeadline>
-                    <PanelTitle>Insights</PanelTitle>
-                  </PanelHeadline>
-                }
-                bodyContent={
-                  <PanelBodyInner>
-                    <p>Detailed information for the area being viewed and/or interacted by the user.</p>
-                  </PanelBodyInner>
-                }
-              />
-            </ExploreCanvas>
-          </InpageBody>
+              </ExploreCanvas>
+            </InpageBody>
+          )}
         </Inpage>
       </App>
     );
@@ -150,15 +165,19 @@ class SpotlightAreasSingle extends React.Component {
 }
 
 SpotlightAreasSingle.propTypes = {
+  fetchSpotlightSingle: T.func,
+  spotlight: T.object,
+  match: T.object
 };
 
 function mapStateToProps (state, props) {
   return {
-    data: getSpotlightArea(props.match.params.datasetId)
+    spotlight: wrapApiResult(getFromState(state, ['spotlight', 'single', props.match.params.spotlightId]))
   };
 }
 
 const mapDispatchToProps = {
+  fetchSpotlightSingle: fetchSpotlightSingleAction
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(SpotlightAreasSingle);
diff --git a/app/assets/scripts/components/spotlight/ss-la.js b/app/assets/scripts/components/spotlight/ss-la.js
deleted file mode 100644
index 76a89f68..00000000
--- a/app/assets/scripts/components/spotlight/ss-la.js
+++ /dev/null
@@ -1 +0,0 @@
-export default { id: 'la', label: 'Los Angeles', center: [-118.25, 34.05] };
diff --git a/app/assets/scripts/components/spotlight/ss-ny.js b/app/assets/scripts/components/spotlight/ss-ny.js
deleted file mode 100644
index a5166bbe..00000000
--- a/app/assets/scripts/components/spotlight/ss-ny.js
+++ /dev/null
@@ -1 +0,0 @@
-export default { id: 'ny', label: 'New York', center: [-73.944, 40.661] };
diff --git a/app/assets/scripts/components/spotlight/ss-sf.js b/app/assets/scripts/components/spotlight/ss-sf.js
deleted file mode 100644
index a180810f..00000000
--- a/app/assets/scripts/components/spotlight/ss-sf.js
+++ /dev/null
@@ -1 +0,0 @@
-export default { id: 'sf', label: 'San Francisco', center: [-122.416389, 37.7775] };
diff --git a/app/assets/scripts/components/spotlight/ss-tk.js b/app/assets/scripts/components/spotlight/ss-tk.js
deleted file mode 100644
index 6b7baf34..00000000
--- a/app/assets/scripts/components/spotlight/ss-tk.js
+++ /dev/null
@@ -1 +0,0 @@
-export default { id: 'tk', label: 'Tokyo', center: [139.692222, 35.689722] };
diff --git a/app/assets/scripts/config/production.js b/app/assets/scripts/config/production.js
index 3d1a2d20..9802f5f8 100644
--- a/app/assets/scripts/config/production.js
+++ b/app/assets/scripts/config/production.js
@@ -5,12 +5,12 @@ export default {
   appVersion: 'v0.01',
   gaTrackingCode: null,
   mbToken: 'pk.eyJ1IjoiY292aWQtc3VwcG9ydCIsImEiOiJjazlhMTNweDIwMHd2M21venc1Nzdzdzh5In0.QZbkhaPpO9jRclw-dQWnDA',
-  api: 'https://covid-support-api.s3.amazonaws.com/us',
+  api: 'https://8ib71h0627.execute-api.us-east-1.amazonaws.com/v1',
   map: {
     center: [0, 0],
     zoom: 2,
     minZoom: 1,
-    maxZoom: 9,
+    maxZoom: 20,
     styleUrl: 'mapbox://styles/mapbox/light-v10'
   }
 };
diff --git a/app/assets/scripts/main.js b/app/assets/scripts/main.js
index f6219176..a1501084 100644
--- a/app/assets/scripts/main.js
+++ b/app/assets/scripts/main.js
@@ -11,6 +11,8 @@ import ReactTooltip from 'react-tooltip';
 import theme, { mediaRanges } from './styles/theme/theme';
 import store from './utils/store';
 import history from './utils/history';
+import config from './config';
+import { fetchSpotlightList } from './redux/spotlight';
 
 import GlobalStyles from './styles/global';
 import ErrorBoundary from './fatal-error-boundary';
@@ -26,7 +28,8 @@ import UhOh from './components/uhoh';
 import About from './components/about';
 import MobileMessage from './components/common/mobile-message';
 
-import config from './config';
+// Load the spotlight areas list.
+store.dispatch(fetchSpotlightList());
 
 const { gaTrackingCode } = config;
 
@@ -96,7 +99,7 @@ class Root extends React.Component {
                   <LargeOnlyRoute
                     exact
                     isLargeUp={isLargeUp}
-                    path='/spotlight/:datasetId'
+                    path='/spotlight/:spotlightId'
                     component={SpotlightSingle}
                   />
                   <LargeOnlyRoute
diff --git a/app/assets/scripts/redux/index.js b/app/assets/scripts/redux/index.js
index 5a221864..3b17b484 100644
--- a/app/assets/scripts/redux/index.js
+++ b/app/assets/scripts/redux/index.js
@@ -4,11 +4,13 @@ import { combineReducers } from 'redux';
 import layerData from './layer-data';
 import timeSeries from './time-series';
 import cogTimeData from './cog-time-data';
+import spotlight from './spotlight';
 
 export const reducers = {
   layerData,
   timeSeries,
-  cogTimeData
+  cogTimeData,
+  spotlight
 };
 
 export default combineReducers(reducers);
diff --git a/app/assets/scripts/redux/spotlight.js b/app/assets/scripts/redux/spotlight.js
new file mode 100644
index 00000000..cb5869ae
--- /dev/null
+++ b/app/assets/scripts/redux/spotlight.js
@@ -0,0 +1,49 @@
+import { combineReducers } from 'redux';
+
+import config from '../config';
+import { makeActions, makeFetchThunk, makeAPIReducer } from './reduxeed';
+
+// /////////////////////////////////////////////////////////////////////////////
+// SPOTLIGHT_SINGLE
+// /////////////////////////////////////////////////////////////////////////////
+
+const spotlightSingleActions = makeActions('SPOTLIGHT_SINGLE', true);
+
+export function fetchSpotlightSingle (id) {
+  return makeFetchThunk({
+    url: `${config.api}/sites/${id}`,
+    cache: true,
+    statePath: ['spotlight', 'single', id],
+    requestFn: spotlightSingleActions.request.bind(null, id),
+    receiveFn: spotlightSingleActions.receive.bind(null, id)
+  });
+}
+
+const spotlightSingleReducer = makeAPIReducer('SPOTLIGHT_SINGLE', true);
+
+// /////////////////////////////////////////////////////////////////////////////
+// SPOTLIGHT_LIST
+// /////////////////////////////////////////////////////////////////////////////
+
+const spotlightActions = makeActions('SPOTLIGHT_LIST');
+
+export function fetchSpotlightList () {
+  return makeFetchThunk({
+    url: `${config.api}/sites`,
+    cache: true,
+    requestFn: spotlightActions.request,
+    receiveFn: spotlightActions.receive,
+    mutator: d => d.sites
+  });
+}
+
+const spotlightListReducer = makeAPIReducer('SPOTLIGHT_LIST');
+
+// /////////////////////////////////////////////////////////////////////////////
+// Export
+// /////////////////////////////////////////////////////////////////////////////
+
+export default combineReducers({
+  single: spotlightSingleReducer,
+  list: spotlightListReducer
+});

From fe2e351635186856da50618bad5e8d316c9dea45 Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Fri, 22 May 2020 13:29:29 +0100
Subject: [PATCH 27/35] Move api endpoint definition to config

---
 app/assets/scripts/components/common/layers/layer-no2.js | 4 +++-
 app/assets/scripts/redux/cog-time-data.js                | 5 +++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/assets/scripts/components/common/layers/layer-no2.js b/app/assets/scripts/components/common/layers/layer-no2.js
index eb0e3285..a0995d6a 100644
--- a/app/assets/scripts/components/common/layers/layer-no2.js
+++ b/app/assets/scripts/components/common/layers/layer-no2.js
@@ -1,5 +1,7 @@
 import { format, sub } from 'date-fns';
 
+import config from '../../../config';
+
 export default {
   id: 'no2',
   name: 'Nitrogen dioxide',
@@ -12,7 +14,7 @@ export default {
   source: {
     type: 'raster',
     tiles: [
-      'https://8ib71h0627.execute-api.us-east-1.amazonaws.com/v1/{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=magma&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%2C1e16&color_map=magma&color_formula=gamma r {gamma}`
     ]
   },
   exclusiveWith: ['gibs-population'],
diff --git a/app/assets/scripts/redux/cog-time-data.js b/app/assets/scripts/redux/cog-time-data.js
index c7c793da..09ba193c 100644
--- a/app/assets/scripts/redux/cog-time-data.js
+++ b/app/assets/scripts/redux/cog-time-data.js
@@ -1,6 +1,7 @@
+import { eachMonthOfInterval, format } from 'date-fns';
 
+import config from '../config';
 import { makeActions, fetchJSON, makeAPIReducer } from './reduxeed';
-import { eachMonthOfInterval, format } from 'date-fns';
 
 // /////////////////////////////////////////////////////////////////////////////
 // COG_TIME_DATA
@@ -16,7 +17,7 @@ export function fetchCogTimeData (id, timeframe, area) {
 
     const { start, end } = timeframe;
     const months = eachMonthOfInterval({ start, end });
-    const url = 'https://8ib71h0627.execute-api.us-east-1.amazonaws.com/v1/timelapse';
+    const url = `${config.api}/timelapse`;
 
     const requests = months.map(async date => {
       const reqDate = format(date, 'yyyyMM');

From dd2c5dfe5544babe9d11aa7bdb448e1c76dce9d5 Mon Sep 17 00:00:00 2001
From: Ricardo Mestre <ricardo@duplos.org>
Date: Fri, 22 May 2020 15:22:37 +0100
Subject: [PATCH 28/35] Restyle inpage header

---
 .../components/datasets/single/index.js       | 12 ++--
 app/assets/scripts/styles/inpage.js           | 60 ++++++++++---------
 2 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/app/assets/scripts/components/datasets/single/index.js b/app/assets/scripts/components/datasets/single/index.js
index 178fec03..f1b11c5a 100644
--- a/app/assets/scripts/components/datasets/single/index.js
+++ b/app/assets/scripts/components/datasets/single/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import T from 'prop-types';
-import styled from 'styled-components';
 import { connect } from 'react-redux';
 
 import App from '../../common/app';
@@ -10,17 +9,13 @@ import {
   InpageHeaderInner,
   InpageHeadline,
   InpageTitle,
+  InpageSubtitle,
   InpageBody
 } from '../../../styles/inpage';
 import UhOh from '../../uhoh';
 
-import { glsp } from '../../../styles/utils/theme-values';
 import { getDataset } from '../';
 
-const DatasetInpageHeaderInner = styled(InpageHeaderInner)`
-  padding-left: ${glsp(2)};
-`;
-
 class DatasetsSingle extends React.Component {
   render () {
     const { dataset } = this.props;
@@ -31,11 +26,12 @@ class DatasetsSingle extends React.Component {
       <App pageTitle={dataset.name}>
         <Inpage>
           <InpageHeader>
-            <DatasetInpageHeaderInner>
+            <InpageHeaderInner>
               <InpageHeadline>
                 <InpageTitle>{dataset.name}</InpageTitle>
+                <InpageSubtitle>Dataset</InpageSubtitle>
               </InpageHeadline>
-            </DatasetInpageHeaderInner>
+            </InpageHeaderInner>
           </InpageHeader>
           <InpageBody>
             <dataset.LongForm />
diff --git a/app/assets/scripts/styles/inpage.js b/app/assets/scripts/styles/inpage.js
index 13c2919f..727b8fff 100644
--- a/app/assets/scripts/styles/inpage.js
+++ b/app/assets/scripts/styles/inpage.js
@@ -3,9 +3,12 @@ import { rgba } from 'polished';
 
 import { visuallyHidden, truncated } from './helpers';
 import { themeVal, stylizeFunction } from './utils/general';
-import { multiply } from './utils/math';
 import { headingAlt } from './type/heading';
 
+import { glsp } from './utils/theme-values';
+
+import Constrainer from './constrainer';
+
 const _rgba = stylizeFunction(rgba);
 
 export const Inpage = styled.article`
@@ -30,25 +33,32 @@ export const Inpage = styled.article`
 `;
 
 export const InpageHeader = styled.header`
+  background: ${themeVal('color.primary')};
+  color: ${themeVal('color.baseLight')};
+  box-shadow: inset 0 1px 0 0 ${_rgba('#FFFFFF', 0.12)};
+
   /* Visually hidden */
-  ${({ isHidden }) => isHidden &&
-   css`
+  ${({ isHidden }) =>
+    isHidden &&
+    css`
       ${visuallyHidden()}
     `}
 `;
 
-export const InpageHeaderInner = styled.div`
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: flex-end;
-  padding: ${multiply(themeVal('layout.space'), 4)} ${multiply(themeVal('layout.space'), 4)} ${multiply(themeVal('layout.space'), 2)} ${multiply(themeVal('layout.space'), 4)};
-  margin: 0 auto;
+export const InpageHeaderInner = styled(Constrainer)`
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-gap: ${glsp(4)} ${glsp(2)};
+  padding-top: ${glsp(4)};
+  padding-bottom: ${glsp(4)};
 `;
 
 export const InpageHeadline = styled.div`
   display: flex;
   flex-flow: column;
   min-width: 0;
+  grid-row: 1;
+  grid-column: span 8;
 
   > *:last-child {
     margin-bottom: 0;
@@ -59,30 +69,24 @@ export const InpageToolbar = styled.div`
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
-  padding-left: ${multiply(themeVal('layout.space'), 2)};
-  margin-left: auto;
-`;
-
-export const InpageTitleWrapper = styled.div`
-  display: flex;
-  flex-flow: row nowrap;
-  min-width: 0;
-  margin-bottom: ${multiply(themeVal('layout.space'), 1.5)};
+  grid-row: 1;
+  grid-column: 9 / span 4;
 `;
 
 export const InpageTitle = styled.h1`
-  ${truncated()}
-  font-size: 2rem;
-  line-height: 2.5rem;
-  margin: 0;
+  font-size: 3rem;
+  line-height: 3.5rem;
+  font-weight: ${themeVal('type.base.light')};
+  letter-spacing: -0.025em;
+  margin: 0 0 0 -0.125rem;;
 `;
 
-export const InpageTagline = styled.p`
-  ${headingAlt()}
+export const InpageSubtitle = styled.p`
+  font-size: 1rem;
+  font-weight: ${themeVal('type.base.extrabold')};
+  line-height: 1;
+  text-transform: uppercase;
   order: -1;
-  font-size: 0.875rem;
-  line-height: 1rem;
-  color: ${_rgba('#FFFFFF', 0.64)};
 `;
 
 export const InpageBody = styled.div`
@@ -90,6 +94,6 @@ export const InpageBody = styled.div`
 `;
 
 export const InpageBodyInner = styled.div`
-  padding: 0 ${multiply(themeVal('layout.space'), 4)} ${multiply(themeVal('layout.space'), 4)} ${multiply(themeVal('layout.space'), 4)};
+  padding: 0 ${glsp(4)} ${glsp(4)} ${glsp(4)} ${glsp(4)};
   max-width: ${themeVal('layout.max')};
 `;

From d56d3caf44171d1add4803c526c20d9cb478b6f9 Mon Sep 17 00:00:00 2001
From: Ricardo Mestre <ricardo@duplos.org>
Date: Fri, 22 May 2020 15:22:49 +0100
Subject: [PATCH 29/35] Restyle about contents

---
 app/assets/scripts/components/about/index.js | 67 ++++++++++++--------
 1 file changed, 40 insertions(+), 27 deletions(-)

diff --git a/app/assets/scripts/components/about/index.js b/app/assets/scripts/components/about/index.js
index aa8c4cc9..473bab6f 100644
--- a/app/assets/scripts/components/about/index.js
+++ b/app/assets/scripts/components/about/index.js
@@ -8,9 +8,16 @@ import {
   InpageHeaderInner,
   InpageHeadline,
   InpageTitle,
-  InpageBody,
-  InpageBodyInner
+  InpageBody
 } from '../../styles/inpage';
+
+import {
+  Fold,
+  FoldTitle
+} from '../../styles/fold';
+
+import Constrainer from '../../styles/constrainer';
+
 import Prose from '../../styles/type/prose';
 import Dl from '../../styles/type/definition-list';
 
@@ -20,7 +27,8 @@ import { visuallyHidden } from '../../styles/helpers';
 import { themeVal } from '../../styles/utils/general';
 
 const AboutProse = styled(Prose)`
-  max-width: 40rem;
+  grid-row: 1;
+  grid-column: span 8;
 `;
 
 const LogoList = styled(Dl)`
@@ -103,30 +111,35 @@ export default class About extends React.Component {
             </InpageHeaderInner>
           </InpageHeader>
           <InpageBody>
-            <InpageBodyInner>
-              <AboutProse>
-                <h2>The tool</h2>
-                <p>The COVID EO dashbord provides streaming data about the pandemic to inform decisionmakers in government, community leaders, health responders, and the business community.</p>
-
-                {/* <LogoList>
-                  <dt>Developed by</dt>
-                  <dd>
-                    <LogoLink
-                      href='https://developmentseed.org/'
-                      title='Visit Development Seed'
-                      rel='noopener noreferrer'
-                      target='_blank'
-                    >
-                      <img
-                        alt='Development Seed logo'
-                        src='/assets/graphics/content/logos/ds-logo-hor--pos.svg'
-                      />
-                      <span>Development Seed</span>
-                    </LogoLink>
-                  </dd>
-                </LogoList> */}
-              </AboutProse>
-            </InpageBodyInner>
+            <Fold>
+              <Constrainer>
+                <AboutProse>
+                  <FoldTitle>The tool</FoldTitle>
+                  <p>
+                    The COVID EO dashbord provides streaming data about the
+                    pandemic to inform decisionmakers in government, community
+                    leaders, health responders, and the business community.
+                  </p>
+                  {/* <LogoList>
+                    <dt>Developed by</dt>
+                    <dd>
+                      <LogoLink
+                        href='https://developmentseed.org/'
+                        title='Visit Development Seed'
+                        rel='noopener noreferrer'
+                        target='_blank'
+                      >
+                        <img
+                          alt='Development Seed logo'
+                          src='/assets/graphics/content/logos/ds-logo-hor--pos.svg'
+                        />
+                        <span>Development Seed</span>
+                      </LogoLink>
+                    </dd>
+                  </LogoList> */}
+                </AboutProse>
+              </Constrainer>
+            </Fold>
           </InpageBody>
         </Inpage>
       </App>

From cd01a2daa2e182bd40f9298114fbd397aea67a53 Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Fri, 22 May 2020 16:59:36 +0100
Subject: [PATCH 30/35] Improve AOI related functionality

Fix #39
---
 .../scripts/components/common/panel-block.js  |  1 +
 app/assets/scripts/components/common/panel.js | 22 +++---
 .../components/home/data-layers-block.js      | 14 ++--
 .../scripts/components/home/filter-aoi.js     |  1 +
 app/assets/scripts/components/home/index.js   | 24 +++---
 .../scripts/components/home/prime-panel.js    | 43 +++++++----
 .../scripts/components/home/sec-panel.js      | 76 +++++--------------
 app/assets/scripts/redux/reduxeed.js          |  2 +-
 8 files changed, 82 insertions(+), 101 deletions(-)

diff --git a/app/assets/scripts/components/common/panel-block.js b/app/assets/scripts/components/common/panel-block.js
index b02dc28e..fcaa40af 100644
--- a/app/assets/scripts/components/common/panel-block.js
+++ b/app/assets/scripts/components/common/panel-block.js
@@ -14,6 +14,7 @@ export const PanelBlock = styled.section`
   flex: 1;
   position: relative;
   z-index: 10;
+  box-shadow: 0 -1px 0 0 ${themeVal('color.baseAlphaB')};
 `;
 
 export const PanelBlockHeader = styled.header`
diff --git a/app/assets/scripts/components/common/panel.js b/app/assets/scripts/components/common/panel.js
index 13bf03b5..8743b5b8 100644
--- a/app/assets/scripts/components/common/panel.js
+++ b/app/assets/scripts/components/common/panel.js
@@ -8,10 +8,6 @@ import { headingAlt } from '../../styles/type/heading';
 import { panelSkin } from '../../styles/skins';
 import { glsp } from '../../styles/utils/theme-values';
 
-import {
-  PanelBlock,
-  PanelBlockHeader
-} from '../common/panel-block';
 import Button from '../../styles/button/button';
 
 const _tint = stylizeFunction(tint);
@@ -81,11 +77,7 @@ const PanelBody = styled.div`
     max-width: 100vw;
     opacity: 1;
     overflow: visible;
-  `}
-
-  > ${/* sc-selector */PanelBlock}:first-child ${PanelBlockHeader} {
-    margin-top: -${glsp(0.75)};
-  }  
+  `} 
 `;
 
 const PanelOffsetActions = styled.div`
@@ -128,6 +120,7 @@ class Panel extends React.Component {
   render () {
     const {
       headerContent,
+      renderHeader,
       bodyContent,
       collapsible,
       direction,
@@ -147,11 +140,17 @@ class Panel extends React.Component {
           ? 'shrink-to-right'
           : 'expand-from-right';
 
-    return (
-      <PanelSelf revealed={revealed} className={className}>
+    const header = typeof renderHeader === 'function'
+      ? renderHeader({ revealed })
+      : headerContent ? (
         <PanelHeader revealed={revealed}>
           {headerContent}
         </PanelHeader>
+      ) : null;
+
+    return (
+      <PanelSelf revealed={revealed} className={className}>
+        {header}
         <PanelBody revealed={revealed}>{bodyContent}</PanelBody>
         {collapsible && (
           <PanelOffsetActions direction={direction}>
@@ -180,6 +179,7 @@ Panel.propTypes = {
   className: T.string,
   collapsible: T.bool,
   headerContent: T.node,
+  renderHeader: T.func,
   bodyContent: T.node
 };
 
diff --git a/app/assets/scripts/components/home/data-layers-block.js b/app/assets/scripts/components/home/data-layers-block.js
index 7a3a6afb..bd15b5bd 100644
--- a/app/assets/scripts/components/home/data-layers-block.js
+++ b/app/assets/scripts/components/home/data-layers-block.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import T from 'prop-types';
+import styled from 'styled-components';
 import get from 'lodash.get';
 
 import {
@@ -12,20 +13,21 @@ import {
 import Layer from './layer';
 import { Accordion } from '../common/accordion';
 
+const PanelBlockLayer = styled(PanelBlock)`
+  flex: 2;
+`;
+
 class DataLayersBlock extends React.Component {
   render () {
     const { onAction, layers, mapLoaded } = this.props;
 
     return (
-      <PanelBlock>
+      <PanelBlockLayer>
         <PanelBlockHeader>
           <PanelBlockTitle>Data</PanelBlockTitle>
         </PanelBlockHeader>
         <PanelBlockBody>
-          <PanelBlockScroll
-            topShadowVariation='dark'
-            bottomShadowVariation='dark'
-          >
+          <PanelBlockScroll>
             <Accordion>
               {({ checkExpanded, setExpanded }) => (
                 <ol>
@@ -59,7 +61,7 @@ class DataLayersBlock extends React.Component {
             </Accordion>
           </PanelBlockScroll>
         </PanelBlockBody>
-      </PanelBlock>
+      </PanelBlockLayer>
     );
   }
 }
diff --git a/app/assets/scripts/components/home/filter-aoi.js b/app/assets/scripts/components/home/filter-aoi.js
index 7635a707..32286081 100644
--- a/app/assets/scripts/components/home/filter-aoi.js
+++ b/app/assets/scripts/components/home/filter-aoi.js
@@ -29,6 +29,7 @@ export const Filter = styled.section`
   display: flex;
   align-items: flex-start;
   padding: ${glsp()};
+  box-shadow: inset 0 -1px 0 0 ${themeVal('color.baseAlphaB')};
 `;
 
 export const FilterHeadline = styled.div`
diff --git a/app/assets/scripts/components/home/index.js b/app/assets/scripts/components/home/index.js
index 11a7436d..f5acde31 100644
--- a/app/assets/scripts/components/home/index.js
+++ b/app/assets/scripts/components/home/index.js
@@ -201,7 +201,9 @@ class Home extends React.Component {
     const {
       aoi: { feature }
     } = this.state;
-    if (!feature) return;
+    const activeLayers = this.getActiveTimeseriesLayers();
+
+    if (!feature || !activeLayers.length) return;
 
     showGlobalLoading();
     // TODO: Change from hardcoded cog type and date
@@ -295,9 +297,6 @@ class Home extends React.Component {
 
   async onMapAction (action, payload) {
     switch (action) {
-      case 'admin-area.click':
-        history.push(`/areas/${payload.id}`);
-        break;
       case 'map.loaded':
         {
           this.setState({ mapLoaded: true });
@@ -403,6 +402,8 @@ class Home extends React.Component {
       return {
         activeLayers: [...diff, layerId]
       };
+    }, () => {
+      this.requestCogData();
     });
   }
 
@@ -502,15 +503,10 @@ class Home extends React.Component {
                 />
               </ExploreCarto>
               <ExpMapSecPanel
-                tempNo2Data={this.props.no2CogTimeData}
+                aoiFeature={this.state.aoi.feature}
+                cogTimeData={this.props.cogTimeData}
+                layers={activeTimeseriesLayers}
                 onPanelChange={this.resizeMap}
-                // selectedAdminArea={adminAreaFeatId}
-                // adminArea={currentAdminArea}
-                // indicatorsConfig={get(
-                //   appConfig.getData(),
-                //   'staticIndicators.indicators',
-                //   null
-                // )}
               />
             </ExploreCanvas>
           </InpageBody>
@@ -523,12 +519,12 @@ class Home extends React.Component {
 Home.propTypes = {
   fetchCogTimeData: T.func,
   invalidateCogTimeData: T.func,
-  no2CogTimeData: T.object
+  cogTimeData: T.object
 };
 
 function mapStateToProps (state, props) {
   return {
-    no2CogTimeData: wrapApiResult(getFromState(state, ['cogTimeData', 'no2']))
+    cogTimeData: wrapApiResult(state.cogTimeData, true)
   };
 }
 
diff --git a/app/assets/scripts/components/home/prime-panel.js b/app/assets/scripts/components/home/prime-panel.js
index 3744e3e2..0e9a9831 100644
--- a/app/assets/scripts/components/home/prime-panel.js
+++ b/app/assets/scripts/components/home/prime-panel.js
@@ -2,17 +2,26 @@ import React from 'react';
 import T from 'prop-types';
 import styled from 'styled-components';
 
-import Panel, {
-  PanelHeadline,
-  PanelTitle
-} from '../common/panel';
+import Panel from '../common/panel';
 import DataLayersBlock from './data-layers-block';
+import {
+  PanelBlock,
+  PanelBlockHeader,
+  PanelBlockTitle,
+  PanelBlockBody
+} from '../common/panel-block';
 import FilterAoi from './filter-aoi';
 
+import { visuallyHidden } from '../../styles/helpers';
+
 const PrimePanel = styled(Panel)`
   width: 18rem;
 `;
 
+const PrimePanelHeader = styled.header`
+  ${visuallyHidden()}
+`;
+
 class ExpMapPrimePanel extends React.Component {
   render () {
     const { layers, onAction, onPanelChange, mapLoaded, aoiState } = this.props;
@@ -22,22 +31,30 @@ class ExpMapPrimePanel extends React.Component {
         collapsible
         direction='left'
         onPanelChange={onPanelChange}
-        headerContent={
-          <PanelHeadline>
-            <PanelTitle>Explore the map</PanelTitle>
-          </PanelHeadline>
-        }
+        renderHeader={() => (
+          <PrimePanelHeader>
+            <h1>Explore the map</h1>
+          </PrimePanelHeader>
+        )}
         bodyContent={
           <>
-            <FilterAoi
-              onAction={onAction}
-              aoiState={aoiState}
-            />
             <DataLayersBlock
               layers={layers}
               mapLoaded={mapLoaded}
               onAction={onAction}
             />
+
+            <PanelBlock>
+              <PanelBlockHeader>
+                <PanelBlockTitle>Tools</PanelBlockTitle>
+              </PanelBlockHeader>
+              <PanelBlockBody>
+                <FilterAoi
+                  onAction={onAction}
+                  aoiState={aoiState}
+                />
+              </PanelBlockBody>
+            </PanelBlock>
           </>
         }
       />
diff --git a/app/assets/scripts/components/home/sec-panel.js b/app/assets/scripts/components/home/sec-panel.js
index 11d2b69b..ee613b8e 100644
--- a/app/assets/scripts/components/home/sec-panel.js
+++ b/app/assets/scripts/components/home/sec-panel.js
@@ -3,22 +3,15 @@ import styled from 'styled-components';
 import T from 'prop-types';
 import * as d3 from 'd3';
 
-import { glsp } from '../../styles/utils/theme-values';
-import { themeVal } from '../../styles/utils/general';
-import Prose from '../../styles/type/prose';
-import Heading, { headingAlt, Subheading } from '../../styles/type/heading';
+import Heading from '../../styles/type/heading';
 import SimpleLineChart from '../common/simple-line-chart/chart';
-
-import { formatThousands } from '../../utils/format';
-
 import Panel, {
   PanelHeadline,
   PanelTitle
 } from '../common/panel';
-
 import ShadowScrollbar from '../common/shadow-scrollbar';
-import FilterAoi from './filter-aoi';
-import { format } from 'date-fns';
+
+import { glsp } from '../../styles/utils/theme-values';
 import { utcDate } from '../../utils/utils';
 
 const BodyScroll = styled(ShadowScrollbar)`
@@ -33,40 +26,26 @@ const InsightsBlock = styled.div`
   flex: 1;
 `;
 
-const InsightsDetails = styled.dl`
-  dt {
-    ${headingAlt}
-    margin: 0 0 ${glsp(1 / 4)} 0;
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
-
-  dd {
-    font-size: 1.25rem;
-    font-weight: ${themeVal('type.base.bold')};
-    line-height: 1;
-    margin: 0 0 ${glsp()} 0;
-  }
-`;
-
 class ExpMapSecPanel extends React.Component {
   renderContent () {
-    const { tempNo2Data } = this.props;
-    // const { adminArea, indicatorsConfig } = this.props;
-
-    // if (!indicatorsConfig) {
-    //   return null;
-    // }
+    const { cogTimeData, aoiFeature, layers } = this.props;
 
-    if (!tempNo2Data || !tempNo2Data.isReady()) {
+    if (!aoiFeature) {
       return <p>There is no area of interest defined.</p>;
     }
 
-    // const adminAreaData = adminArea.getData();
-    // const { tsData } = adminAreaData;
-    // const mobilityData = tsData[0];
+    if (!layers.length) {
+      return <p>There are no layers with time data enabled.</p>;
+    }
+
+    // TODO: Do not use hardcoded values.
+    const no2cogTimeData = cogTimeData.no2;
+
+    if (!no2cogTimeData || !no2cogTimeData.isReady()) {
+      return null;
+    }
 
-    const data = tempNo2Data.getData();
+    const data = no2cogTimeData.getData();
     const xDomain = [
       utcDate(data[0].date),
       utcDate(data[data.length - 1].date)
@@ -75,18 +54,6 @@ class ExpMapSecPanel extends React.Component {
 
     return (
       <div>
-        {/* {adminAreaData.staticData
-          ? (
-            <InsightsDetails>
-              {indicatorsConfig.map((ind) => (
-                <React.Fragment key={ind.attribute}>
-                  <dt>{ind.description}</dt>
-                  <dd>{formatThousands(adminAreaData.staticData[ind.attribute], { decimals: 1 }) || 'n/a'}</dd>
-                </React.Fragment>
-              ))}
-            </InsightsDetails>
-          )
-          : <p>No indicators available.</p>} */}
         <Heading as='h2'>NO2 Concentration</Heading>
         <small>molecules/cm<sup>2</sup></small>
         <SimpleLineChart
@@ -110,10 +77,7 @@ class ExpMapSecPanel extends React.Component {
           </PanelHeadline>
         }
         bodyContent={
-          <BodyScroll
-            topShadowVariation='dark'
-            bottomShadowVariation='dark'
-          >
+          <BodyScroll>
             <InsightsBlock>
               {this.renderContent()}
             </InsightsBlock>
@@ -126,9 +90,9 @@ class ExpMapSecPanel extends React.Component {
 
 ExpMapSecPanel.propTypes = {
   onPanelChange: T.func,
-  selectedAdminArea: T.string,
-  indicatorsConfig: T.array,
-  adminArea: T.object
+  layers: T.array,
+  aoiFeature: T.object,
+  cogTimeData: T.object
 };
 
 export default ExpMapSecPanel;
diff --git a/app/assets/scripts/redux/reduxeed.js b/app/assets/scripts/redux/reduxeed.js
index a87fbe97..b2212c1c 100644
--- a/app/assets/scripts/redux/reduxeed.js
+++ b/app/assets/scripts/redux/reduxeed.js
@@ -67,7 +67,7 @@ export function makeAPIReducer (actionName, hasKey) {
     const hasId = typeof action.id !== 'undefined';
     switch (action.type) {
       case `INVALIDATE_${actionName}`:
-        return hasId ? { ...state, [action.id]: base } : base;
+        return hasId ? { ...state, [action.id]: initial } : initial;
       case `REQUEST_${actionName}`: {
         const changeReq = {
           ...base,

From 4c8c3fbaf084b79b0367b7bb7fdaf2acbda91995 Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Fri, 22 May 2020 17:36:58 +0100
Subject: [PATCH 31/35] Ensure map controls are visible in compare mode

---
 app/assets/scripts/components/home/mb-map.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/assets/scripts/components/home/mb-map.js b/app/assets/scripts/components/home/mb-map.js
index d643ae3a..36453960 100644
--- a/app/assets/scripts/components/home/mb-map.js
+++ b/app/assets/scripts/components/home/mb-map.js
@@ -95,6 +95,15 @@ class MbMap extends React.Component {
           logoPosition: 'bottom-left'
         });
 
+        // Add zoom controls.
+        this.mbMapComparing.addControl(new mapboxgl.NavigationControl(), 'top-left');
+
+        // Style attribution.
+        this.mbMapComparing.addControl(new mapboxgl.AttributionControl({ compact: true }));
+
+        // Remove compass.
+        document.querySelector('.mapboxgl-ctrl .mapboxgl-ctrl-compass').remove();
+
         this.mbMapComparing.once('load', () => {
           this.mbMapComparingLoaded = true;
           this.updateActiveLayers(prevProps);
@@ -146,7 +155,7 @@ class MbMap extends React.Component {
       });
     }
 
-    // Update all active layers
+    // Update all active layers.
     this.updateActiveLayers(prevProps);
 
     // Handle aoi state props update.

From 5f4fc1f3d513e479a108a87c234cfef2433bdd97 Mon Sep 17 00:00:00 2001
From: Ricardo Mestre <ricardo@duplos.org>
Date: Fri, 22 May 2020 17:50:21 +0100
Subject: [PATCH 32/35] Tweak filter title color

---
 app/assets/scripts/components/home/filter-aoi.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/assets/scripts/components/home/filter-aoi.js b/app/assets/scripts/components/home/filter-aoi.js
index 32286081..43fa96be 100644
--- a/app/assets/scripts/components/home/filter-aoi.js
+++ b/app/assets/scripts/components/home/filter-aoi.js
@@ -39,7 +39,6 @@ export const FilterHeadline = styled.div`
 
 export const FilterTitle = styled.h1`
   ${headingAlt()}
-  color: ${themeVal('color.base')};
   font-size: 0.75rem;
   line-height: 1rem;
   margin: 0;

From 82e07eb6ff56f300bc3bb8d3f6551def87852560 Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Fri, 22 May 2020 17:54:28 +0100
Subject: [PATCH 33/35] Lint files

---
 .circleci/config.yml                          |  3 +-
 app/assets/scripts/components/about/index.js  | 90 -------------------
 .../scripts/components/common/layers/types.js |  1 -
 app/assets/scripts/components/home/index.js   |  3 +-
 app/assets/scripts/components/home/mb-map.js  |  2 +
 app/assets/scripts/styles/form/switch.js      |  1 -
 app/assets/scripts/styles/inpage.js           |  5 +-
 7 files changed, 6 insertions(+), 99 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 0b85e0c7..e507c108 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -42,8 +42,7 @@ jobs:
       - checkout
       - restore_cache:
           <<: *restore_cache_def
-      # - run: yarn lint
-      - run: echo Skip linting
+      - run: yarn lint
   test:
     <<: *base_def
     steps:
diff --git a/app/assets/scripts/components/about/index.js b/app/assets/scripts/components/about/index.js
index 473bab6f..c5bf9379 100644
--- a/app/assets/scripts/components/about/index.js
+++ b/app/assets/scripts/components/about/index.js
@@ -19,85 +19,12 @@ import {
 import Constrainer from '../../styles/constrainer';
 
 import Prose from '../../styles/type/prose';
-import Dl from '../../styles/type/definition-list';
-
-import media from '../../styles/utils/media-queries';
-import { glsp } from '../../styles/utils/theme-values';
-import { visuallyHidden } from '../../styles/helpers';
-import { themeVal } from '../../styles/utils/general';
 
 const AboutProse = styled(Prose)`
   grid-row: 1;
   grid-column: span 8;
 `;
 
-const LogoList = styled(Dl)`
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  grid-gap: 0 ${glsp()};
-  list-style: none;
-  padding: 0;
-  margin: 0;
-
-  dt {
-    grid-column: 1 / span 12;
-
-    &:not(:first-child) {
-      margin-top: ${glsp()};
-    }
-  }
-
-  dd {
-    grid-column: auto / span 12;
-
-    ${media.smallUp`
-      grid-column: auto / span 4;
-    `}
-  }
-`;
-
-const LogoLink = styled.a`
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 100%;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-  height: 6rem;
-  position: relative;
-  z-index: 1;
-  border-radius: ${themeVal('shape.rounded')};
-  box-shadow: inset 0 0 0 1px ${themeVal('color.baseAlphaB')};
-  transition: all .16s ease 0s;
-
-  span {
-    ${visuallyHidden()}
-  }
-
-  img {
-    display: inline-flex;
-    width: auto;
-    max-width: 100%;
-    max-height: 3rem;
-  }
-`;
-
-// Compensate for mb logo proportions.
-// const LogoLinkMb = styled(LogoLink)`
-//   img {
-//     max-height: 2rem;
-//   }
-// `;
-
-// Compensate for AWS logo proportions.
-// const LogoLinkAWS = styled(LogoLink)`
-//   padding: ${glsp(0.5, 1)};
-
-//   img {
-//     max-height: 4.5rem;
-//   }
-// `;
-
 export default class About extends React.Component {
   render () {
     return (
@@ -120,23 +47,6 @@ export default class About extends React.Component {
                     pandemic to inform decisionmakers in government, community
                     leaders, health responders, and the business community.
                   </p>
-                  {/* <LogoList>
-                    <dt>Developed by</dt>
-                    <dd>
-                      <LogoLink
-                        href='https://developmentseed.org/'
-                        title='Visit Development Seed'
-                        rel='noopener noreferrer'
-                        target='_blank'
-                      >
-                        <img
-                          alt='Development Seed logo'
-                          src='/assets/graphics/content/logos/ds-logo-hor--pos.svg'
-                        />
-                        <span>Development Seed</span>
-                      </LogoLink>
-                    </dd>
-                  </LogoList> */}
                 </AboutProse>
               </Constrainer>
             </Fold>
diff --git a/app/assets/scripts/components/common/layers/types.js b/app/assets/scripts/components/common/layers/types.js
index 5dfb96f2..adee06c3 100644
--- a/app/assets/scripts/components/common/layers/types.js
+++ b/app/assets/scripts/components/common/layers/types.js
@@ -1,5 +1,4 @@
 import { format, sub } from 'date-fns';
-import get from 'lodash.get';
 
 const prepDateSource = (source, date) => ({
   ...source,
diff --git a/app/assets/scripts/components/home/index.js b/app/assets/scripts/components/home/index.js
index f5acde31..e6da0db1 100644
--- a/app/assets/scripts/components/home/index.js
+++ b/app/assets/scripts/components/home/index.js
@@ -23,12 +23,11 @@ import MapMessage from './map-message';
 
 import { showGlobalLoading, hideGlobalLoading } from '../common/global-loading';
 import { themeVal } from '../../styles/utils/general';
-import { wrapApiResult, getFromState } from '../../redux/reduxeed';
+import { wrapApiResult } from '../../redux/reduxeed';
 import {
   fetchCogTimeData as fetchCogTimeDataAction,
   invalidateCogTimeData as invalidateCogTimeDataAction
 } from '../../redux/cog-time-data';
-import history from '../../utils/history';
 import { utcDate } from '../../utils/utils';
 import mapLayers from '../common/layers';
 
diff --git a/app/assets/scripts/components/home/mb-map.js b/app/assets/scripts/components/home/mb-map.js
index 36453960..47a4fd4e 100644
--- a/app/assets/scripts/components/home/mb-map.js
+++ b/app/assets/scripts/components/home/mb-map.js
@@ -235,6 +235,8 @@ class MbMap extends React.Component {
 
 MbMap.propTypes = {
   onAction: T.func,
+  theme: T.object,
+  aoiState: T.object,
   comparing: T.bool,
   activeLayers: T.array,
   layers: T.array
diff --git a/app/assets/scripts/styles/form/switch.js b/app/assets/scripts/styles/form/switch.js
index 00d72042..4e6245c5 100644
--- a/app/assets/scripts/styles/form/switch.js
+++ b/app/assets/scripts/styles/form/switch.js
@@ -134,7 +134,6 @@ export const FormSwitch = styled(FormSwitchElement)`
       z-index: 2;
       top: 50%;
       left: 0;
-      z-index: 2;
       content: '';
       height: 1.25rem;
       width: 1.25rem;
diff --git a/app/assets/scripts/styles/inpage.js b/app/assets/scripts/styles/inpage.js
index 727b8fff..5dbeef4e 100644
--- a/app/assets/scripts/styles/inpage.js
+++ b/app/assets/scripts/styles/inpage.js
@@ -1,9 +1,8 @@
 import styled, { css } from 'styled-components';
 import { rgba } from 'polished';
 
-import { visuallyHidden, truncated } from './helpers';
+import { visuallyHidden } from './helpers';
 import { themeVal, stylizeFunction } from './utils/general';
-import { headingAlt } from './type/heading';
 
 import { glsp } from './utils/theme-values';
 
@@ -78,7 +77,7 @@ export const InpageTitle = styled.h1`
   line-height: 3.5rem;
   font-weight: ${themeVal('type.base.light')};
   letter-spacing: -0.025em;
-  margin: 0 0 0 -0.125rem;;
+  margin: 0 0 0 -0.125rem;
 `;
 
 export const InpageSubtitle = styled.p`

From 6a14a0c361c590cb03af0370b44d4324a9d3abb0 Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Fri, 22 May 2020 17:54:37 +0100
Subject: [PATCH 34/35] Bump version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index facb37dd..da1eadb9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "covid-dashboard",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Frontend application for the Covid Dashboard",
   "repository": {
     "type": "git",

From 89f73dc3f8f38d6a36b778f3e3d7441355d3ca6e Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Fri, 22 May 2020 18:05:34 +0100
Subject: [PATCH 35/35] Fix 404 page

---
 app/assets/scripts/components/uhoh/index.js | 27 ++++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/app/assets/scripts/components/uhoh/index.js b/app/assets/scripts/components/uhoh/index.js
index 51aef839..5d152dd8 100644
--- a/app/assets/scripts/components/uhoh/index.js
+++ b/app/assets/scripts/components/uhoh/index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 
 import App from '../common/app';
@@ -8,10 +9,16 @@ import {
   InpageHeaderInner,
   InpageHeadline,
   InpageTitle,
-  InpageBody,
-  InpageBodyInner
+  InpageBody
 } from '../../styles/inpage';
 import Prose from '../../styles/type/prose';
+import Constrainer from '../../styles/constrainer';
+import { Fold } from '../../styles/fold';
+
+const PageProse = styled(Prose)`
+  grid-row: 1;
+  grid-column: span 8;
+`;
 
 export default class UhOh extends React.Component {
   render () {
@@ -26,13 +33,15 @@ export default class UhOh extends React.Component {
             </InpageHeaderInner>
           </InpageHeader>
           <InpageBody>
-            <InpageBodyInner>
-              <Prose>
-                <p>We were not able to find the page you are looking for. It may have been archived or removed.</p>
-                <p>You might find an older snapshot of this page at the <a href='http://archive.org/web/' title='Find on Internet Archive'>Internet Archive</a>.<br /> If you think this page should be here let us know via <a href='mailto:' title='Send us an email'>email</a>.</p>
-                <p><Link to='/' title='Visit the homepage'>Visit the homepage</Link></p>
-              </Prose>
-            </InpageBodyInner>
+            <Fold>
+              <Constrainer>
+                <PageProse>
+                  <p>We were not able to find the page you are looking for. It may have been archived or removed.</p>
+                  <p>You might find an older snapshot of this page at the <a href='http://archive.org/web/' title='Find on Internet Archive'>Internet Archive</a>.<br /> If you think this page should be here let us know via <a href='mailto:' title='Send us an email'>email</a>.</p>
+                  <p><Link to='/' title='Visit the homepage'>Visit the homepage</Link></p>
+                </PageProse>
+              </Constrainer>
+            </Fold>
           </InpageBody>
         </Inpage>
       </App>