From f6fb40d4be824c2b9bedf0551be23ba4cd5db314 Mon Sep 17 00:00:00 2001
From: Lachlan Kermode <lachiekermode@gmail.com>
Date: Mon, 8 Jun 2020 19:17:10 +0200
Subject: [PATCH] toolbar and zoom control fixes

---
 src/actions/index.js                                 |  6 +++---
 src/components/Toolbar/Layout.js                     | 11 ++++++++---
 .../presentational/Timeline/ZoomControls.js          | 12 ++++++++++++
 src/selectors/index.js                               |  4 +++-
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/actions/index.js b/src/actions/index.js
index 505ec28..92076c3 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -2,11 +2,11 @@
 import { urlFromEnv } from '../common/utilities'
 
 // TODO: relegate these URLs entirely to environment variables
-const EVENT_DATA_URL = urlFromEnv('EVENT_EXT')
-const CATEGORY_URL = urlFromEnv('CATEGORY_EXT')
+const EVENT_DATA_URL = urlFromEnv('EVENTS_EXT')
+const CATEGORY_URL = urlFromEnv('CATEGORIES_EXT')
 const FILTERS_URL = urlFromEnv('FILTERS_EXT')
 const SOURCES_URL = urlFromEnv('SOURCES_EXT')
-const NARRATIVE_URL = urlFromEnv('NARRATIVE_EXT')
+const NARRATIVE_URL = urlFromEnv('NARRATIVES_EXT')
 const SITES_URL = urlFromEnv('SITES_EXT')
 const SHAPES_URL = urlFromEnv('SHAPES_EXT')
 
diff --git a/src/components/Toolbar/Layout.js b/src/components/Toolbar/Layout.js
index 430f30d..feaa8e0 100644
--- a/src/components/Toolbar/Layout.js
+++ b/src/components/Toolbar/Layout.js
@@ -152,13 +152,18 @@ class Toolbar extends React.Component {
     const filtersLabel = copy[this.props.language].toolbar.filters_label
     const categoriesLabel = 'Categories' // TODO:
 
+    const narrativesIdx = 0
+    const categoriesIdx = features.USE_NARRATIVES ? 1 : 0
+    const filtersIdx = (features.USE_NARRATIVES && features.CATEGORIES_AS_FILTERS) ? 2 : (
+      features.USE_NARRATIVES || features.CATEGORIES_AS_FILTERS ? 1 : 0
+    )
     return (
       <div className='toolbar'>
         <div className='toolbar-header'onClick={this.props.methods.onTitle}><p>{title}</p></div>
         <div className='toolbar-tabs'>
-          {features.USE_NARRATIVES ? this.renderToolbarTab(0, narrativesLabel, 'timeline') : null}
-          {features.CATEGORIES_AS_FILTERS ? this.renderToolbarTab(1, categoriesLabel, 'widgets') : null}
-          {features.USE_FILTERS ? this.renderToolbarTab(features.CATEGORIES_AS_FILTERS ? 2 : 1, filtersLabel, 'filter_list') : null}
+          {features.USE_NARRATIVES ? this.renderToolbarTab(narrativesIdx, narrativesLabel, 'timeline') : null}
+          {features.CATEGORIES_AS_FILTERS ? this.renderToolbarTab(categoriesIdx, categoriesLabel, 'widgets') : null}
+          {features.USE_FILTERS ? this.renderToolbarTab(filtersIdx, filtersLabel, 'filter_list') : null}
         </div>
         <BottomActions
           info={{
diff --git a/src/components/presentational/Timeline/ZoomControls.js b/src/components/presentational/Timeline/ZoomControls.js
index 7110c20..c73cd4f 100644
--- a/src/components/presentational/Timeline/ZoomControls.js
+++ b/src/components/presentational/Timeline/ZoomControls.js
@@ -1,5 +1,14 @@
 import React from 'react'
 
+const DEFAULT_ZOOM_LEVELS = [
+  { label: '20 years', duration: 10512000 },
+  { label: '2 years', duration: 1051200 },
+  { label: '3 months', duration: 129600 },
+  { label: '3 days', duration: 4320 },
+  { label: '12 hours', duration: 720 },
+  { label: '1 hour', duration: 60 }
+]
+
 function zoomIsActive (duration, extent, max) {
   if (duration >= max && extent >= max) {
     return true
@@ -23,6 +32,9 @@ const TimelineZoomControls = ({ extent, zoomLevels, dims, onApplyZoom }) => {
     )
   }
 
+  if (zoomLevels.length === 0) {
+    zoomLevels = DEFAULT_ZOOM_LEVELS
+  }
   return (
     <g transform={`translate(${dims.width - dims.width_controls}, 0)`}>
       {zoomLevels.map((z, idx) => renderZoom(z, idx))}
diff --git a/src/selectors/index.js b/src/selectors/index.js
index d52c430..91beead 100644
--- a/src/selectors/index.js
+++ b/src/selectors/index.js
@@ -58,7 +58,9 @@ export const selectEvents = createSelector(
       const isActiveFilter = isMatchingFilter || activeFilters.length === 0
       const isActiveCategory = activeCategories.includes(event.category) || activeCategories.length === 0
       let isActiveTime = isTimeRangedIn(event, timeRange)
-      isActiveTime = features.GRAPH_NONLOCATED ? ((!event.latitude && !event.longitude) || isActiveTime) : isActiveTime
+      isActiveTime = features.GRAPH_NONLOCATED
+        ? ((!event.latitude && !event.longitude) || isActiveTime)
+        : isActiveTime
 
       if (isActiveTime && isActiveFilter && isActiveCategory) {
         acc[event.id] = { ...event }