From d008330edeaeba9f7b1fbfb31d1887b835b8c3ff Mon Sep 17 00:00:00 2001
From: zhaojq <zjq_joker@163.com>
Date: Sat, 5 Aug 2023 18:42:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=90=8C=E4=B8=80=E5=A4=A9=E6=9C=89?=
 =?UTF-8?q?=E5=A4=9A=E4=B8=AA=E8=BF=90=E5=8A=A8=E6=97=B6=E9=80=89=E4=B8=AD?=
 =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E8=B7=AF=E7=BA=BF=E6=98=BE=E7=A4=BA=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scripts/gpxtrackposter/grid_drawer.py |  2 +-
 scripts/gpxtrackposter/track.py       |  1 +
 src/components/RunTable/RunRow.jsx    |  2 +-
 src/pages/index.jsx                   | 42 +++++++++++++++++----------
 4 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/scripts/gpxtrackposter/grid_drawer.py b/scripts/gpxtrackposter/grid_drawer.py
index 091f3fa9f8c..b53784aebd3 100644
--- a/scripts/gpxtrackposter/grid_drawer.py
+++ b/scripts/gpxtrackposter/grid_drawer.py
@@ -74,5 +74,5 @@ def _draw_track(self, dr: svgwrite.Drawing, tr: Track, size: XY, offset: XY):
                 stroke_linejoin="round",
                 stroke_linecap="round",
             )
-            polyline.set_desc(title=date_title)
+            polyline.set_desc(title=date_title, desc=tr.run_id)
             dr.add(polyline)
diff --git a/scripts/gpxtrackposter/track.py b/scripts/gpxtrackposter/track.py
index b092fc3639e..50049fe9fb7 100644
--- a/scripts/gpxtrackposter/track.py
+++ b/scripts/gpxtrackposter/track.py
@@ -114,6 +114,7 @@ def load_from_db(self, activity):
             summary_polyline = filter_out(activity.summary_polyline)
         polyline_data = polyline.decode(summary_polyline) if summary_polyline else []
         self.polylines = [[s2.LatLng.from_degrees(p[0], p[1]) for p in polyline_data]]
+        self.run_id = activity.run_id
 
     def bbox(self):
         """Compute the smallest rectangle that contains the entire track (border box)."""
diff --git a/src/components/RunTable/RunRow.jsx b/src/components/RunTable/RunRow.jsx
index 899a07afd97..4fd2662b082 100644
--- a/src/components/RunTable/RunRow.jsx
+++ b/src/components/RunTable/RunRow.jsx
@@ -11,7 +11,7 @@ const RunRow = ({ elementIndex, locateActivity, run, runIndex, setRunIndex }) =>
   const handleClick = (e) => {
     if (runIndex === elementIndex) return;
     setRunIndex(elementIndex);
-    locateActivity(run.start_date_local.slice(0, 10));
+    locateActivity([run.run_id]);
   };
 
   return (
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index ce9568dd299..83e00e169b7 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -69,22 +69,22 @@ const Index = () => {
     changeByItem(title, 'Title', filterTitleRuns, false);
   };
 
-  const locateActivity = (runDate) => {
-    const activitiesOnDate = runs.filter((r) => r.start_date_local.slice(0, 10) === runDate);
+  const locateActivity = (runIds) => {
+    const ids = new Set(runIds)
 
-    if (!activitiesOnDate.length) {
+    const selectedRuns = runs.filter((r) => ids.has(r.run_id));
+
+    if (!selectedRuns.length) {
       return;
     }
 
-    const sortedActivities = activitiesOnDate.sort((a, b) => b.distance - a.distance);
-    const info = sortedActivities[0];
+    const lastRun = selectedRuns.sort(sortDateFunc)[0];
 
-    if (!info) {
+    if (!lastRun) {
       return;
     }
-
-    setGeoData(geoJsonForRuns([info]));
-    setTitle(titleForShow(info));
+    setGeoData(geoJsonForRuns(selectedRuns));
+    setTitle(titleForShow(lastRun));
     clearInterval(intervalId);
     scrollToMap();
   };
@@ -126,15 +126,27 @@ const Index = () => {
       if (target) {
         const tagName = target.tagName.toLowerCase()
 
-        if ((tagName === 'rect' &&
+        // click the github-stat style svg
+        if (tagName === 'rect' &&
           parseFloat(target.getAttribute('width')) === 2.6 &&
           parseFloat(target.getAttribute('height')) === 2.6 &&
-          target.getAttribute('fill') !== '#444444'
-        ) || (
-            tagName === 'polyline'
-          )) {
+          target.getAttribute('fill') !== '#444444') {
+
           const [runDate] = target.innerHTML.match(/\d{4}-\d{1,2}-\d{1,2}/) || [`${+thisYear + 1}`];
-          locateActivity(runDate)
+          const runIDsOnDate = runs.filter((r) => r.start_date_local.slice(0, 10) === runDate).map((r) => r.run_id)
+          if (!runIDsOnDate.length) {
+            return
+          }
+          locateActivity(runIDsOnDate)
+
+        } else if (tagName === 'polyline') { // click the route grid svg
+          const desc = target.getElementsByTagName('desc')[0]
+          if (!desc) { return }
+          const run_id = Number(desc.innerHTML)
+          if (!run_id) {
+            return
+          }
+          locateActivity([run_id])
         }
       }
     })