allow stepStyles with feature flag

src/components/MapNarratives.jsx

@@ -18,17 +18,16 @@ class MapNarratives extends React.Component {
     return this.props.narrativeProps[styleName]
   }
 
-  getStrokeOpacity(narrative, step) {
-    if (this.props.narrative === null) return 0
-    if (!step || narrative.id !== this.props.narrative.id) return 0.1
-    return 1
+  getStepStyle(name) {
+    if (name === 'None') return null
+    return this.props.narrativeProps.stepStyles[name]
   }
 
   hasNoLocation(step) {
     return (step.latitude === '' || step.longitude === '')
   }
 
-  renderNarrativeStep(idx, n, stepStyle = null) {
+  renderNarrativeStep(idx, n) {
     const step = n.steps[idx]
     const step2 = n.steps[idx + 1]
 
@@ -36,37 +35,49 @@ class MapNarratives extends React.Component {
     if (this.hasNoLocation(step) || this.hasNoLocation(step2))
       return null
 
-    const { narrative } = this.props
-    const { x, y } = this.projectPoint([step.latitude, step.longitude])
+    // 0 if not in narrative mode, 1 if active narrative, 0.1 if inactive
+    let styles = {
+      strokeOpacity:  (n === null) ? 0
+      : (step && (n.id === this.props.narrative.id)) ? 1 : 0.1,
+      strokeWidth: 0,
+      strokeDasharray: 'none',
+      stroke: 'none'
+    }
+
+    const p1  = this.projectPoint([step.latitude, step.longitude])
     const p2 = this.projectPoint([step2.latitude, step2.longitude])
 
-    // 0 if not in narrative mode, 1 if active narrative, 0.1 if inactive
-    const strokeOpacity = (n === null) ? 0
-      : (step && (n.id === narrative.id)) ? 1 : 0.1
-    let strokeWidth = 0
-    let strokeDasharray = 'none'
-    let stroke = 'none'
-
-    // style narartive step if appropriate
     if (step) {
-      // stepStyle only provided to functionl if NARRATIVE_STEP_STYLES enabled
-      if (!!stepStyle) {
-        console.log('TODO: step by step styling')
+      if (process.env.features.NARRATIVE_STEP_STYLES) {
+        const _idx = step.narratives.indexOf(n.id)
+        const stepStyle = step.narrative___stepStyles[_idx]
+
+        return this._renderNarrativeStep(
+          p1,
+          p2,
+          { ...styles, ...this.getStepStyle(stepStyle) }
+        )
+
       // otherwise steps are styled per narrative
       } else {
-        const narStyle = this.getNarrativeStyle(n.id)
-        stroke = narStyle.stroke
-        strokeWidth = narStyle.strokeWidth
-        strokeDasharray = narStyle.strokeDasharray
+        styles = {
+          ...styles,
+          ...this.getNarrativeStyle(n.id)
+        }
+        return this._renderNarrativeStep(p1,p2,styles)
       }
     }
 
+  }
+
+  _renderNarrativeStep(p1, p2, styles) {
+    const { stroke, strokeWidth, strokeDasharray, strokeOpacity } = styles
     return (
       <line
         className="narrative-step"
-        x1={x}
+        x1={p1.x}
         x2={p2.x}
-        y1={y}
+        y1={p1.y}
         y2={p2.y}
         markerStart="none"
         onClick={() => this.props.onSelectNarrative(n)}
@@ -79,6 +90,7 @@ class MapNarratives extends React.Component {
       >
       </line>
     )
+
   }
 
   renderNarrative(n) {
@@ -86,16 +98,7 @@ class MapNarratives extends React.Component {
 
     return (
       <g id={`narrative-${n.id.replace(/ /g,"_")}`} className="narrative">
-        {steps.map((s, idx) => {
-          if (process.env.features.NARRATIVE_STEP_STYLES) {
-            const _idx = s.narratives.indexOf(n.id)
-            const stepStyle = s.narrative___stepStyles[_idx]
-            if (stepStyle !== 'None')
-              return this.renderNarrativeStep(idx, n, stepStyle)
-          } else {
-            return this.renderNarrativeStep(idx, n)
-          }
-        })}
+        {steps.map((s, idx) => this.renderNarrativeStep(idx, n))}
       </g>
     )
   }

src/components/Toolbar.jsx

@@ -29,7 +29,7 @@ class Toolbar extends React.Component {
   }
 
   renderSearch() {
-    if (this.props.features.USE_SEARCH) {
+    if (process.env.features.USE_SEARCH) {
       return (
         <TabPanel>
           <Search
@@ -70,7 +70,7 @@ class Toolbar extends React.Component {
   }
 
   renderToolbarTagPanel() {
-    if (this.props.features.USE_TAGS &&
+    if (process.env.features.USE_TAGS &&
       this.props.tags.children) {
       return (
         <TabPanel>

src/store/initial.js

@@ -89,10 +89,6 @@ const initial = {
         duration: 10,
         active: false
       }],
-    features: {
-      USE_TAGS: process.env.features.USE_TAGS,
-      USE_SEARCH: process.env.features.USE_SEARCH
-    },
     flags: {
       isFetchingDomain: false,
       isFetchingSources: false,
@@ -120,16 +116,22 @@ const initial = {
 
       narratives: {
         default: {
-          style: 'solid',                  // ['dotted', 'solid']
-          opacity: 0.9,                     // range between 0 and 1
-          stroke: 'red',               // Any hex or rgb code
+          opacity: 0.9,
+          stroke: 'red',
           strokeWidth: 3
         },
         narrative_1: {
-          style: 'solid',                  // ['dotted', 'solid']
-          opacity: 0.4,                     // range between 0 and 1
-          stroke: '#f18f01',               // Any hex or rgb code
+          opacity: 0.4,
+          stroke: '#f18f01',
           strokeWidth: 3
+        },
+        // process.env.features.NARRATIVE_STEP_STYLES
+        stepStyles: {
+          Physical: {
+            stroke: 'yellow',
+            strokeWidth: 3,
+            opacity: 0.9,
+          }
         }
       }
     },