From 7f468e2a6709f1849d2d9eaf544d3127198aa242 Mon Sep 17 00:00:00 2001
From: Miguel Sozinho Ramalho <19508417+msramalho@users.noreply.github.com>
Date: Wed, 21 Aug 2024 11:50:01 +0100
Subject: [PATCH] adds reset timeline button (#81)

---
 src/common/data/copy.json            |  1 +
 src/components/time/Timeline.jsx     | 14 ++++++++++++++
 src/components/time/atoms/Header.jsx |  3 ++-
 src/scss/timeline.scss               |  6 ++++++
 4 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/common/data/copy.json b/src/common/data/copy.json
index d36377c..8340624 100644
--- a/src/common/data/copy.json
+++ b/src/common/data/copy.json
@@ -240,6 +240,7 @@
         "Other"
       ],
       "info": "Showing <span>%n events</span> that occurred between",
+      "reset": "reset dates",
       "default_categories_label": ""
     },
     "cardstack": {
diff --git a/src/components/time/Timeline.jsx b/src/components/time/Timeline.jsx
index fc7546d..95ef04f 100644
--- a/src/components/time/Timeline.jsx
+++ b/src/components/time/Timeline.jsx
@@ -53,6 +53,9 @@ class Timeline extends Component {
         timerange: nextProps.app.timeline.range,
         scaleX: this.makeScaleX(),
       });
+      if(this?.initialTimeRange == null) {
+        this.initialTimeRange = nextProps.app.timeline.range;
+      }
     }
 
     if (
@@ -377,6 +380,8 @@ class Timeline extends Component {
       domain.eventCountInTimeRange
     );
 
+    const resetTest = copy[this.props.app.language].timeline.reset;
+
     return (
       <div className={classes} onKeyDown={this.props.onKeyDown} tabIndex="1">
         <Header
@@ -387,6 +392,15 @@ class Timeline extends Component {
             this.onClickArrow();
           }}
           hideInfo={isNarrative}
+          resetTest={resetTest}
+          resetClick={() => {
+            this.setState({
+              timerange: this.initialTimeRange
+            }, () => {
+              this.props.methods.onUpdateTimerange(this.state.timerange);
+            });
+            this.computeDims();
+          }}
         />
         <div className="timeline-content">
           <div id={this.props.ui.dom.timeline} className="timeline">
diff --git a/src/components/time/atoms/Header.jsx b/src/components/time/atoms/Header.jsx
index b8e1715..2444555 100644
--- a/src/components/time/atoms/Header.jsx
+++ b/src/components/time/atoms/Header.jsx
@@ -1,6 +1,6 @@
 import { makeNiceDate } from "../../../common/utilities";
 
-const TimelineHeader = ({ title, from, to, onClick, hideInfo }) => {
+const TimelineHeader = ({ title, from, to, onClick, hideInfo, resetTest, resetClick }) => {
   const d0 = from && makeNiceDate(from);
   const d1 = to && makeNiceDate(to);
   return (
@@ -14,6 +14,7 @@ const TimelineHeader = ({ title, from, to, onClick, hideInfo }) => {
         <p dangerouslySetInnerHTML={{ __html: title }} />
         <p>
           {d0} - {d1}
+          <small className="reset-button" onClick={() => resetClick() }><a className="cell">{ resetTest }</a></small>
         </p>
       </div>
     </div>
diff --git a/src/scss/timeline.scss b/src/scss/timeline.scss
index a3567dc..a7d1013 100644
--- a/src/scss/timeline.scss
+++ b/src/scss/timeline.scss
@@ -108,6 +108,12 @@
         }
       }
 
+      small.reset-button {
+        float:right;
+        cursor: pointer;
+        font-size: 0.75rem;
+      }
+
       // mobile styles
       @media screen and (max-width: 600px) {
         bottom: 115%;