fixes to work cleanly with example sheet

example.config.js

@@ -21,51 +21,21 @@ module.exports = {
   },
   store: {
     app: {
-      cover: {
-        // title: 'project title',
-        // subtitle: 'project subtitle',
-        // description: 'A description of the project goes here.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n\nThis description may contain markdown.\n\n#### markdown\n\n### markdown\n\n## markdown',
-        // subsubtitle: '<project subsubtitle>',
-        // bgVideo:'<url for bakground video>',
-        // howToVideo: {
-        //   title: '<how to video title>',
-        //   desc: 'This step-by-step guide explores the way that the platform arranges and presents information.',
-        //   file: '<url for how to video>',
-        //   poster: '<poster for how to video>'
-        // },
-        //  - up to 4 additional videos can be included -
-        // videos: [
-        //   {
-        //     title: '<video 1 title>',
-        //     desc: '<video 1 description>',
-        //     file: '<url for video 1 file>',
-        //     poster: '<url for video 1 poster>',
-        //     buttonTitle: '<video 1 button title>',
-        //     buttonSubtitle: '<video 1 button subtitle>'
-        //   }
-        // ]
-      },
       map: {
         anchor: [31.356397, 34.784818]
       },
-      timeline: {
-        range: [
-          new Date(2014, 7, 9),
-          new Date(2014, 10, 6, 23)
-        ],
-        rangeLimits: [
-          new Date(2014, 5, 9),
-          new Date(2018, 1, 6, 23)
-        ]
+    },
+    ui: {
+      style: {
+        categories: {
+          alpha: 'blue',
+          beta: 'orange'
+        },
+        shapes: {},
+        narratives: {},
+        selectedEvent: {}
       }
     }
   },
-  ui: {
-    style: {
-      categories: {},
-      shapes: {},
-      narratives: {},
-      selectedEvent: {}
-    }
-  }
+
 }

src/components/presentational/Timeline/ZoomControls.js

@@ -1,8 +1,15 @@
 import React from 'react'
 
+function zoomIsActive(duration, extent) {
+  if (duration > 1570000 && extent > 1570000) {
+    return true;
+  }
+  return duration === extent
+}
+
 const TimelineZoomControls = ({ extent, zoomLevels, dims, onApplyZoom }) => {
   function renderZoom (zoom, idx) {
-    const isActive = (zoom.duration === extent)
+    const isActive = zoomIsActive(zoom.duration, extent)
     return (
       <text
         className={`zoom-level-button ${isActive ? 'active' : ''}`}

src/store/initial.js

@@ -1,5 +1,7 @@
 import { mergeDeepLeft } from 'ramda'
 
+const FA_RED = '#eb443e';
+
 const initial = {
   /*
    * The Domain or 'domain' of this state refers to the tree of data
@@ -105,12 +107,12 @@ const initial = {
     tiles: 'openstreetmap', // ['openstreetmap', 'streets', 'satellite']
     style: {
       categories: {
-        default: '#f3de2c'
+        default: FA_RED
       },
       narratives: {
         default: {
           opacity: 0.9,
-          stroke: 'red',
+          stroke: FA_RED,
           strokeWidth: 3
         }
       },