From 31fd3ac5071a19c6fa68081ffe87459d97119767 Mon Sep 17 00:00:00 2001
From: Franc Camps-Febrer <francamps@gmail.com>
Date: Sun, 16 Dec 2018 11:51:49 +0100
Subject: [PATCH] Refine update time on drag, and clip hidden events

---
 src/js/map/map.js           |  2 +-
 src/js/timeline/timeline.js | 27 +++++++++++++++++----------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/js/map/map.js b/src/js/map/map.js
index 2a5ca10..5de5fbe 100644
--- a/src/js/map/map.js
+++ b/src/js/map/map.js
@@ -451,7 +451,7 @@ Stop and start the development process in terminal after you have added your tok
   */
   function renderDomain () {
     renderSites();
-    renderNarratives();    
+    renderNarratives();
     renderEvents();
   }
   function renderSelectedAndHighlight () {
diff --git a/src/js/timeline/timeline.js b/src/js/timeline/timeline.js
index 98d44ac..042ea21 100644
--- a/src/js/timeline/timeline.js
+++ b/src/js/timeline/timeline.js
@@ -49,7 +49,10 @@ export default function(newApp, ui, methods) {
    * Create scales
    */
   const scale = {};
-  scale.x = d3.scaleTime();
+  scale.x = d3.scaleTime()
+      .domain(app.timerange)
+      .range([margin.left, WIDTH]);
+
   scale.y = d3.scaleOrdinal()
 
 
@@ -64,6 +67,14 @@ export default function(newApp, ui, methods) {
     .attr('width', WIDTH)
     .attr('height', HEIGHT);
 
+  dom.clip = dom.svg.append("svg:clipPath")
+    .attr("id", "clip")
+    .append("svg:rect")
+    .attr("x", margin.left)
+    .attr("y", 0)
+    .attr("width", WIDTH - margin.left)
+    .attr("height", HEIGHT - 25);
+
   dom.controls =
     d3.select(`#${ui.dom.timeline}`)
     .append('svg')
@@ -104,9 +115,10 @@ export default function(newApp, ui, methods) {
   /*
    * Plottable elements
    */
-  dom.dataset = dom.svg.append('g');
-  dom.events = dom.dataset.append('g');
-  dom.markers = dom.svg.append('g');
+
+  dom.body = dom.svg.append("g").attr("clip-path", "url(#clip)");
+  dom.events = dom.body.append('g');
+  dom.markers = dom.body.append('g');
 
 
   /*
@@ -321,6 +333,7 @@ export default function(newApp, ui, methods) {
     })
     .on('end', () => {
       toggleTransition(true);
+      app.timerange = scale.x.domain();
       methods.onUpdateTimerange(scale.x.domain());
     });
 
@@ -517,12 +530,6 @@ export default function(newApp, ui, methods) {
    * @param {Object} app: Redux state app subtree
    */
   function updateAxis() {
-    updateTimeRange();
-    
-    scale.x = d3.scaleTime()
-      .domain(app.timerange)
-      .range([margin.left, WIDTH]);
-
     const groupStep = (106 - 30) / domain.categories.length;
     let groupYs = Array.apply(null, Array(domain.categories.length));
     groupYs = groupYs.map((g, i) => {