From a2d5fdf3da55909634b5ccdbd3a1daa52653d756 Mon Sep 17 00:00:00 2001
From: Lachie Kermode <lachiekermode@gmail.com>
Date: Fri, 30 Nov 2018 14:46:44 +0000
Subject: [PATCH] fall back on a default red styling for narratives

---
 src/js/map/map.js      | 10 +++++++---
 src/scss/_colors.scss  |  2 ++
 src/scss/map.scss      |  3 ++-
 src/scss/timeline.scss |  1 +
 src/store/initial.js   | 10 ++++++++--
 5 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/js/map/map.js b/src/js/map/map.js
index 13a15f0..d940169 100644
--- a/src/js/map/map.js
+++ b/src/js/map/map.js
@@ -357,22 +357,26 @@ Stop and start the development process in terminal after you have added your tok
       .exit()
       .remove();
 
+    let styleName
     narrativesDom
       .enter().append('path')
       .attr('class', 'narrative')
       .attr('d', sequenceLine)
       .style('stroke-width', d => {
+        styleName = d[0].narrative && d[0].narrative in narrativeProps
+          ? d[0].narrative
+          : 'default'
         const n = d[0].narrative;
-        return (n) ? narrativeProps[n].strokeWidth : 3;
+        return (n) ? narrativeProps[styleName].strokeWidth : 3;
       })
       .style('stroke-dasharray', d => {
         const n = d[0].narrative;
-        if (narrativeProps[n].style === 'dotted') return "2px 5px";
+        if (narrativeProps[styleName].style === 'dotted') return "2px 5px";
         return 'none';
       })
       .style('stroke', d => {
         const n = d[0].narrative;
-        return (n) ? narrativeProps[n].stroke : '#fff';
+        return (n) ? narrativeProps[styleName].stroke : '#fff';
       })
       .style('fill', 'none');
   }
diff --git a/src/scss/_colors.scss b/src/scss/_colors.scss
index 8182e8d..62e629a 100644
--- a/src/scss/_colors.scss
+++ b/src/scss/_colors.scss
@@ -1,3 +1,5 @@
+$event_default: red;
+
 $offwhite: #efefef;
 $midwhite: #a0a0a0;
 $darkwhite: darken($midwhite, 15%);
diff --git a/src/scss/map.scss b/src/scss/map.scss
index f26cace..d2c51cf 100644
--- a/src/scss/map.scss
+++ b/src/scss/map.scss
@@ -30,7 +30,7 @@
       z-index: $map;
   }
   .event {
-    fill: $yellow;
+    fill: $event_default;
     cursor: pointer;
     opacity: 0.45;
   }
@@ -144,6 +144,7 @@
 */
 
 .location-event-marker {
+  fill: $event_default;
   stroke-width: 0;
   transition: 0.2s ease;
   fill-opacity: 0.8;
diff --git a/src/scss/timeline.scss b/src/scss/timeline.scss
index c4d9f5e..ed3ad20 100644
--- a/src/scss/timeline.scss
+++ b/src/scss/timeline.scss
@@ -177,6 +177,7 @@
       }
 
       .event {
+        fill: $event_default;
         cursor: pointer;
         opacity: .7;
 
diff --git a/src/store/initial.js b/src/store/initial.js
index f00bcb6..a1d5103 100644
--- a/src/store/initial.js
+++ b/src/store/initial.js
@@ -84,10 +84,16 @@ const initial = {
       palette: d3.schemeCategory10,
 
       narratives: {
-        narrative_1: {
+        default: {
           style: 'dotted',                  // ['dotted', 'solid']
           opacity: 0.4,                     // range between 0 and 1
-          stroke: '#ffffff',               // Any hex or rgb code
+          stroke: 'red',               // Any hex or rgb code
+          strokeWidth: 2
+        },
+        narrative_1: {
+          style: 'solid',                  // ['dotted', 'solid']
+          opacity: 0.4,                     // range between 0 and 1
+          stroke: 'red',               // Any hex or rgb code
           strokeWidth: 2
         }
       }