From 8147af2620b780def4616fbf64f7aeadfe65e175 Mon Sep 17 00:00:00 2001
From: Franc Camps-Febrer <francamps@gmail.com>
Date: Thu, 31 Jan 2019 18:37:23 -0500
Subject: [PATCH] Non-structure locations are marked as approximated

---
 src/components/Card.jsx                        | 1 +
 src/components/presentational/Card/Location.js | 4 ++--
 src/components/presentational/Map/Events.jsx   | 6 +++---
 src/scss/map.scss                              | 1 +
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/Card.jsx b/src/components/Card.jsx
index 4757b32..027ffb9 100644
--- a/src/components/Card.jsx
+++ b/src/components/Card.jsx
@@ -61,6 +61,7 @@ class Card extends React.Component {
       <CardLocation
         language={this.props.language}
         location={this.props.event.location}
+        isPrecise={(this.props.event.type === 'Structure')}
       />
     )
   }
diff --git a/src/components/presentational/Card/Location.js b/src/components/presentational/Card/Location.js
index e828b67..fb2b26a 100644
--- a/src/components/presentational/Card/Location.js
+++ b/src/components/presentational/Card/Location.js
@@ -3,13 +3,13 @@ import React from 'react'
 import copy from '../../../js/data/copy.json'
 import { isNotNullNorUndefined } from '../../../js/utilities'
 
-const CardLocation = ({ language, location }) => {
+const CardLocation = ({ language, location, isPrecise }) => {
   if (isNotNullNorUndefined(location)) {
     return (
       <div className='card-cell location'>
         <p>
           <i className='material-icons left'>location_on</i>
-          {location}
+          {`${location}${(isPrecise) ? '' : ' (Approximated)'}`}
         </p>
       </div>
     )
diff --git a/src/components/presentational/Map/Events.jsx b/src/components/presentational/Map/Events.jsx
index 71d248e..715e4f0 100644
--- a/src/components/presentational/Map/Events.jsx
+++ b/src/components/presentational/Map/Events.jsx
@@ -28,7 +28,7 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
     let cumulativeAngleSweep = 0;
 
     return (
-      <g>
+      <React.Fragment>
         {colorSlices.map((color, idx) => {
           const r = 10
 
@@ -48,7 +48,7 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
             `M ${startX} ${startY}`,                           // Move
             `A ${r} ${r} 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
             `L 0 0 `,                                          // Line
-            `L ${startX} ${startY} `,                          // Line
+            `L ${startX} ${startY} Z`,                          // Line
           ].join(' ');
 
           const extraStyles = ({
@@ -66,7 +66,7 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
           )
         })}
         
-      </g>
+      </React.Fragment>
     ) 
   }
 
diff --git a/src/scss/map.scss b/src/scss/map.scss
index ec81350..9c9a463 100644
--- a/src/scss/map.scss
+++ b/src/scss/map.scss
@@ -170,6 +170,7 @@
 }
 
 .location-event-marker {
+  pointer-events: all;
   fill: $event_default;
   stroke-width: 0;
 }