simplified component logic

src/components/Layout.js

@@ -177,6 +177,28 @@ class Dashboard extends React.Component {
   }
 
   selectNarrativeStep (idx) {
+    // Try to find idx if event passed rather than number
+    if (typeof idx != 'number') {
+      console.log('run')
+      console.log(idx)
+      let e = idx[0] || idx
+
+      if (this.props.app.narrative) {
+        const { steps } = this.props.app.narrative
+          // choose the first event at a given location
+        const locationEventId = e.id
+        const narrativeIdxObj = steps.find(s => s.id === locationEventId)
+        let narrativeIdx = steps.indexOf(narrativeIdxObj)
+
+        if (narrativeIdx > -1) {
+          idx = narrativeIdx
+          console.log(idx)
+        }
+      }
+    }
+
+    console.log(idx)
+
     const { narrative } = this.props.app
     if (narrative === null) return
 
@@ -267,7 +289,7 @@ class Dashboard extends React.Component {
         <Timeline
           onKeyDown={this.onKeyDown}
           methods={{
-            onSelect: ev => this.handleSelect(ev, 0),
+            onSelect: app.narrative ? this.selectNarrativeStep : ev => this.handleSelect(ev, 0),
             onUpdateTimerange: actions.updateTimeRange,
             getCategoryColor: this.getCategoryColor
           }}

src/components/presentational/Map/Events.jsx

@@ -110,9 +110,6 @@ function MapEvents ({
 
     // in narrative mode, only render events in narrative
     // TODO: move this to a selector
-    // Gets around if block scope
-    let narrativeIdx = -1
-
     if (narrative) {
       const { steps } = narrative
       const onlyIfInNarrative = e => steps.map(s => s.id).includes(e.id)
@@ -120,11 +117,6 @@ function MapEvents ({
 
       if (eventsInNarrative.length <= 0) {
         return null
-      } else {
-        // choose the first event at a given location
-        const locationEventId = eventsInNarrative[0].id
-        const narrativeIdxObj = steps.find(s => s.id === locationEventId)
-        narrativeIdx = steps.indexOf(narrativeIdxObj)
       }
     }
 
@@ -143,7 +135,7 @@ function MapEvents ({
       <g
         className={`location-event ${narrative ? 'no-hover' : ''}`}
         transform={`translate(${x}, ${y})`}
-        onClick={(!narrative) ? () => onSelect(location.events) : () => { onSelect(narrativeIdx); onSelect(location.events) }}
+        onClick={() => onSelect(location.events)}
       >
         {renderLocationSlicesByCategory(location)}
         {extraRender ? extraRender() : null}