Merge pull request #59 from forensic-architecture/fix/example-sheet

Fix/example sheet

src/components/MapEvents.jsx

@@ -27,11 +27,27 @@ class MapEvents extends React.Component {
   }
 
   renderCategory(events, category) {
+    let styleProps = ({
+      fill: this.props.getCategoryColor(category),
+      fillOpacity: 0.8
+    })
+
+    if (this.props.narrative) {
+      const { byId } = this.props.narrative
+      const eventsInNarrative = events.filter(e => byId.hasOwnProperty(e.id))
+      if (eventsInNarrative.length <= 0) {
+        styleProps = {
+          ...styleProps,
+          fillOpacity: 0.1
+        }
+      }
+    }
+
     return (
       <circle
         className="location-event-marker"
-        r={(events) ? Math.sqrt(16 * events.length) + 3 : 0}
-        style={{ fill: this.props.getCategoryColor(category), fillOpacity: 0.8 }}
+        r={(events.length > 0) ? Math.sqrt(16 * events.length) + 3 : 0}
+        style={styleProps}
         onClick={() => this.props.onSelect(events)}
       >
       </circle>
@@ -63,4 +79,4 @@ class MapEvents extends React.Component {
   }
 }
 
-export default MapEvents;
+export default MapEvents;

src/components/MapNarratives.jsx

@@ -39,10 +39,18 @@ class MapNarratives extends React.Component {
     return 1;
   }
 
+  hasNoLocation(step) {
+    return (step.latitude === '' || step.longitude === '')
+  }
+
   renderNarrativeStep(allSteps, step, idx, n) {
     const { x, y } = this.projectPoint([step.latitude, step.longitude]);
-
     const step2 = allSteps[idx + 1];
+
+    // don't draw if one of the steps has no location
+    if (this.hasNoLocation(step) || this.hasNoLocation(step2))
+      return null
+
     const p2 = this.projectPoint([step2.latitude, step2.longitude]);
 
     return (