ISSUE #1496: Heatmap show full name on hover activity name

Author: robiningelbrecht

config/reference.php

@@ -1095,6 +1095,17 @@
  *     doctrine?: DoctrineConfig,
  *     doctrine_migrations?: DoctrineMigrationsConfig,
  *     twig?: TwigConfig,
+ *     "when@dev"?: array{
+ *         imports?: ImportsConfig,
+ *         parameters?: ParametersConfig,
+ *         services?: ServicesConfig,
+ *         framework?: FrameworkConfig,
+ *         flysystem?: FlysystemConfig,
+ *         monolog?: MonologConfig,
+ *         doctrine?: DoctrineConfig,
+ *         doctrine_migrations?: DoctrineMigrationsConfig,
+ *         twig?: TwigConfig,
+ *     },
  *     "when@prod"?: array{
  *         imports?: ImportsConfig,
  *         parameters?: ParametersConfig,
@@ -1197,6 +1208,7 @@ public static function config(array $config): array
  *     deprecated?: array{package:string, version:string, message?:string},
  * }
  * @psalm-type RoutesConfig = array{
+ *     "when@dev"?: array<string, RouteConfig|ImportConfig|AliasConfig>,
  *     "when@prod"?: array<string, RouteConfig|ImportConfig|AliasConfig>,
  *     "when@test"?: array<string, RouteConfig|ImportConfig|AliasConfig>,
  *     ...<string, RouteConfig|ImportConfig|AliasConfig>

public/js/dist/app.min.js

@@ -1,5 +1,5 @@
 import {DataTableStorage, FilterManager} from "../filters";
-import { pointToLineDistance, point, lineString } from "../../libraries/turf";
+import {pointToLineDistance, point, lineString} from "../../libraries/turf";
 
 class HeatmapDrawer {
     constructor(wrapper, config, modalManager) {
@@ -31,18 +31,7 @@ class HeatmapDrawer {
         }
         this.map.on("click", (e) => this._handleMapClick(e));
         this.map.on("popupclose", () => this._resetRouteStyles());
-        this.map.on("popupopen", (ev) => {
-            const container = ev.popup.getElement();
-            if (!container) return;
-
-            container.querySelectorAll('a[data-model-content-url]').forEach(node => {
-                node.addEventListener("click", (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    this.modalManager.open(node.getAttribute('data-model-content-url'));
-                });
-            });
-        });
+        this.map.on("popupopen", (e) => this._handlePopupOpen(e));
     }
 
     _resetRouteStyles() {
@@ -51,6 +40,19 @@ class HeatmapDrawer {
         });
     }
 
+    _handlePopupOpen(e) {
+        const container = e.popup.getElement();
+        if (!container) return;
+
+        container.querySelectorAll('a[data-model-content-url]').forEach(node => {
+            node.addEventListener("click", (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.modalManager.open(node.getAttribute('data-model-content-url'));
+            });
+        });
+    };
+
     _handleMapClick(e) {
         const clickPoint = point([e.latlng.lng, e.latlng.lat]);
         const NEARBY_DISTANCE_IN_METERS = 100;
@@ -84,7 +86,10 @@ class HeatmapDrawer {
                  <ul class="divide-default divide-y divide-gray-200">
                     ${nearby.map(entry => `
                      <li class="py-2">
-                      <a href="#" class="block truncate font-medium text-blue-600 hover:underline" data-model-content-url="/activity/${entry.route.id}.html"> ${entry.route.name} </a>
+                      <a href="#" title="${entry.route.name}" class="block truncate font-medium text-blue-600 hover:underline" 
+                        data-model-content-url="/activity/${entry.route.id}.html">
+                        ${entry.route.name}
+                      </a>
                       <div class="flex items-center justify-between text-xs text-gray-500">
                         <div>${entry.route.startDate}</div>
                         <div>${entry.route.distance}</div>