Add persisten highlighting of path on click

src/pages/Index2.tsx

@@ -9,8 +9,9 @@ let global_map: L.Map | null = null;
 
 // Stores the polyline rendered in the map.
 // The first object stores Lines, the second stores routes
-// Indexed by their names
+// Indexed by their names.
-const lines_store: Map<string, Map<string, L.Polyline>> = new Map();
+// The array is the polyline, and wether to render it (> 0) (set opacity to LINE_OPACITY)
+const lines_store: Map<string, Map<string, [L.Polyline, number]>> = new Map();
 
 export function Index2() {
     const container = <div class="h-[98vh] rounded-lg dark:opacity-60" />;
@@ -109,44 +110,69 @@ function RouteEl(props: { line_name: string, route: Route, color: string }) {
         lines_store.set(line_name, new Map());
     }
     // store
-    lines_store.get(line_name)!.set(props.route.name, line);
+    lines_store.get(line_name)!.set(props.route.name, [line, 0]);
+
+    const set_highlighted = () => {
+        const arr = lines_store.get(props.line_name)?.get(props.route.name);
+        if (arr !== undefined) {
+            arr[1] += 1;
+        }
+    };
 
     return (
-        <div
+        <button
-            class="pl-10 hover:bg-[var(--hover-bg)] hover:text-[var(--hover-on-bg)]"
+            class="inline-block w-full text-left cursor-pointer pl-10
+                hover:bg-[var(--hover-bg)] hover:text-[var(--hover-on-bg)]"
+            onClick={set_highlighted}
             onMouseEnter={() => highlight_route(props.line_name, props.route.name)}
-            onMouseLeave={() => unhighlight_route()}
+            onMouseLeave={() => unhighlight_route(props.line_name, props.route.name)}
         >
             Ruta {props.route.name}
-        </div>
+        </button>
     );
 }
 
 function highlight_route(line_name: string, route_name: string) {
-    for (const [line_key, line_map] of lines_store) {
+    const arr = lines_store.get(line_name)?.get(route_name);
-        for (const [route_key, route_polilyne] of line_map) {
+    if (arr !== undefined) {
-            if (line_key === line_name && route_key === route_name) {
+        arr[1] += 1;
-                // Do nothing
+    }
+
+    re_render_polylines();
+}
+
+function unhighlight_route(line_name: string, route_name: string) {
+    const arr = lines_store.get(line_name)?.get(route_name);
+    if (arr !== undefined) {
+        arr[1] -= 1;
+    }
+
+    re_render_polylines();
+}
+
+function re_render_polylines() {
+    // This keeps track of how many path are rendered.
+    // If this is 0, then all paths should be rendered.
+    let render_count = 0;
+    for (const [, line_map] of lines_store) {
+        for (const [, [route_polilyne, active_count]] of line_map) {
+            if (active_count > 0) {
+                route_polilyne.setStyle({opacity: LINE_OPACITY});
+                render_count += 1;
             } else {
-                // make transparent
+                route_polilyne.setStyle({opacity: 0});
-                route_polilyne.setStyle({
+            }
-                    opacity: 0,
+        }
-                });
+    }
+
+    if (render_count === 0) {
+        // enable all paths
+        for (const [, line_map] of lines_store) {
+            for (const [, [route_polilyne]] of line_map) {
+                route_polilyne.setStyle({opacity: LINE_OPACITY});
             }
         }
     }
 }
 
-function unhighlight_route() {
-    for (const [, line_map] of lines_store) {
-        for (const [, route_polilyne] of line_map) {
-            // restore
-            route_polilyne.setStyle({
-                opacity: LINE_OPACITY,
-            });
-        }
-    }
-}
-
-