Dim events on timeline in narrative mode

src/components/Timeline.jsx

@@ -256,6 +256,7 @@ class Timeline extends React.Component {
         />
         <TimelineEvents
           events={this.props.domain.events}
+          narrative={this.props.app.narrative}
           getEventX={(e) => this.getEventX(e)}
           getEventY={(e) => this.getEventY(e)}
           getCategoryColor={this.props.methods.getCategoryColor}

src/components/presentational/TimelineEvents.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const TimelineEvents = ({ events, getEventX, getEventY,
+const TimelineEvents = ({ events, narrative, getEventX, getEventY,
   getCategoryColor, onSelect, transitionDuration }) => {
 
   function getAllEventsAtOnce(eventPoint) {
@@ -11,17 +11,32 @@ const TimelineEvents = ({ events, getEventX, getEventY,
   }
 
   function renderEvent(event) {
+    let styleProps = ({
+      fill: getCategoryColor(event.category),
+      fillOpacity: 0.8,
+      transform: `translate(${getEventX(event)}px, ${getEventY(event)}px)`,
+      transition: `transform ${transitionDuration / 1000}s ease`
+    });
+
+    if (narrative) {
+      const { steps } = narrative
+      const isInNarrative = steps.map(s => s.id).includes(event.id)
+
+      if (!isInNarrative) {
+        styleProps = {
+          ...styleProps,
+          fillOpacity: 0.1
+        }
+      }
+    }
+
     return (
       <circle
         className="event"
         cx={0}
         cy={0}
-        style={{
-          'transform': `translate(${getEventX(event)}px, ${getEventY(event)}px)`,
-          'transition': `transform ${transitionDuration / 1000}s ease`
-        }}
+        style={styleProps}
         r={5}        
-        fill={getCategoryColor(event.category)}
         onClick={() => {onSelect(getAllEventsAtOnce(event))}}
       >
       </circle>