From cb69b40ae20c09184c0a64f8713d95a7c75141f3 Mon Sep 17 00:00:00 2001
From: Lachlan Kermode <lachiekermode@gmail.com>
Date: Sun, 6 Mar 2022 21:00:00 -0500
Subject: [PATCH] Zoom to timeframe on timeline click

---
 src/components/Layout.js        |  1 +
 src/components/time/Timeline.js | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/Layout.js b/src/components/Layout.js
index cae6891..a7088ce 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -107,6 +107,7 @@ class Dashboard extends React.Component {
       delete std.sources;
       Object.values(std).forEach((ev) => matchedEvents.push(ev));
     }
+
     this.props.actions.updateSelected(matchedEvents);
   }
 
diff --git a/src/components/time/Timeline.js b/src/components/time/Timeline.js
index 38f5006..4feafff 100644
--- a/src/components/time/Timeline.js
+++ b/src/components/time/Timeline.js
@@ -24,6 +24,7 @@ class Timeline extends React.Component {
     this.getDatetimeX = this.getDatetimeX.bind(this);
     this.getY = this.getY.bind(this);
     this.onApplyZoom = this.onApplyZoom.bind(this);
+    this.onSelect = this.onSelect.bind(this);
     this.svgRef = React.createRef();
     this.state = {
       isFolded: false,
@@ -339,6 +340,18 @@ class Timeline extends React.Component {
     return [null, null];
   }
 
+  onSelect(event) {
+    if (this.props.features.ZOOM_TO_TIMEFRAME_ON_TIMELINE_CLICK) {
+      const timeframe = Math.floor(
+        this.props.features.ZOOM_TO_TIMEFRAME_ON_TIMELINE_CLICK / 2
+      );
+      const start = d3.timeMinute.offset(event.datetime, -timeframe);
+      const end = d3.timeMinute.offset(event.datetime, timeframe);
+      this.props.methods.onUpdateTimerange([start, end]);
+    }
+    this.props.methods.onSelect(event);
+  }
+
   render() {
     const { isNarrative, app } = this.props;
     let classes = `timeline-wrapper ${this.state.isFolded ? " folded" : ""}`;
@@ -440,7 +453,7 @@ class Timeline extends React.Component {
                 }}
                 getCategoryColor={this.props.methods.getCategoryColor}
                 transitionDuration={this.state.transitionDuration}
-                onSelect={this.props.methods.onSelect}
+                onSelect={this.onSelect}
                 dims={dims}
                 features={this.props.features}
                 setLoading={this.props.actions.setLoading}