From 268ea407c2f9ecbc43f7991d59cda634a27251e0 Mon Sep 17 00:00:00 2001
From: Lachlan Kermode <lachiekermode@gmail.com>
Date: Fri, 17 May 2019 13:33:13 +0100
Subject: [PATCH] fixes to work cleanly with example sheet

---
 example.config.js                             | 52 ++++---------------
 .../presentational/Timeline/ZoomControls.js   |  9 +++-
 src/store/initial.js                          |  6 ++-
 3 files changed, 23 insertions(+), 44 deletions(-)

diff --git a/example.config.js b/example.config.js
index 5b35c10..6885bd4 100644
--- a/example.config.js
+++ b/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: {}
-    }
-  }
+
 }
diff --git a/src/components/presentational/Timeline/ZoomControls.js b/src/components/presentational/Timeline/ZoomControls.js
index a1b9379..98c2309 100644
--- a/src/components/presentational/Timeline/ZoomControls.js
+++ b/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' : ''}`}
diff --git a/src/store/initial.js b/src/store/initial.js
index bbc2de3..c0764c9 100644
--- a/src/store/initial.js
+++ b/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
         }
       },