From 899e06d560468b9bb95fefc73a39d02b12435f46 Mon Sep 17 00:00:00 2001
From: Lachlan Kermode <lachiekermode@gmail.com>
Date: Tue, 8 Jan 2019 13:00:33 +0000
Subject: [PATCH] add event counts for locations

---
 src/components/Map.jsx                          |  4 +++-
 src/components/MapEvents.jsx                    |  2 +-
 src/components/Timeline.jsx                     |  4 +---
 src/components/presentational/TimelineEvents.js |  2 +-
 src/scss/map.scss                               | 14 +++++++++-----
 5 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/Map.jsx b/src/components/Map.jsx
index 42334c2..5849087 100644
--- a/src/components/Map.jsx
+++ b/src/components/Map.jsx
@@ -168,8 +168,10 @@ class Map extends React.Component {
    * components in the <g/> div.
    */
   styleLocation(location) {
+    const noEvents = location.events.length
     return [
-      { fill: 'orange' },
+      null,
+      () => noEvents > 1 ? <text className='location-count' dx='-3' dy='4'>{noEvents}</text> : null
     ]
   }
 
diff --git a/src/components/MapEvents.jsx b/src/components/MapEvents.jsx
index 3c2141c..68c4fe4 100644
--- a/src/components/MapEvents.jsx
+++ b/src/components/MapEvents.jsx
@@ -64,12 +64,12 @@ class MapEvents extends React.Component {
       <g
         className="location"
         transform={`translate(${x}, ${y})`}
+        onClick={() => this.props.onSelect(location.events)}
       >
         <circle
           className="location-event-marker"
           r={7}
           style={styles}
-          onClick={() => this.props.onSelect(events)}
         >
         </circle>
         {extraRender ? extraRender() : null}
diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx
index 4accb68..7673d7f 100644
--- a/src/components/Timeline.jsx
+++ b/src/components/Timeline.jsx
@@ -221,9 +221,7 @@ class Timeline extends React.Component {
    * components in the <g/> div.
    */
   styleDatetime(timestamp) {
-    return [
-      { fill: 'orange' },
-    ]
+    return []
   }
 
   render() {
diff --git a/src/components/presentational/TimelineEvents.js b/src/components/presentational/TimelineEvents.js
index c4c1bb5..32f7448 100644
--- a/src/components/presentational/TimelineEvents.js
+++ b/src/components/presentational/TimelineEvents.js
@@ -35,6 +35,7 @@ const TimelineEvents = ({
       <g
         className='datetime'
         transform={`translate(${getDatetimeX(datetime)}, ${getDatetimeY(datetime)})`}
+        onClick={() => onSelect(datetime.events)}
       >
         <circle
           className="event"
@@ -42,7 +43,6 @@ const TimelineEvents = ({
           cy={0}
           style={styleProps}
           r={5}
-          onClick={() => onSelect(datetime.events)}
         >
         </circle>
         { extraRender ? extraRender() : null }
diff --git a/src/scss/map.scss b/src/scss/map.scss
index a49b34c..a1d90b2 100644
--- a/src/scss/map.scss
+++ b/src/scss/map.scss
@@ -165,14 +165,13 @@
 * Elements
 */
 
+.location {
+  cursor: pointer;
+}
+
 .location-event-marker {
   fill: $event_default;
   stroke-width: 0;
-  cursor: pointer;
-
-  &:hover {
-    fill-opacity: 1;
-  }
 }
 
 .path-polyline {
@@ -180,5 +179,10 @@
   stroke-width: 2px;
 }
 
+.location-count {
+  z-index: 100;
+  fill: #a4a4a4;
+}
+