From 9593a860e3a23360135df60fbe29846ed3cb7380 Mon Sep 17 00:00:00 2001
From: Martin Fleischmann <martin@martinfleischmann.net>
Date: Sat, 25 Jan 2025 21:44:41 +0100
Subject: [PATCH] enable clicking on extension

---
 index.html | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/index.html b/index.html
index f655605..fb58111 100644
--- a/index.html
+++ b/index.html
@@ -242,6 +242,41 @@
         event.stopPropagation(); // Prevent the click from bubbling up
       });
 
+      linkExtension.on("click", function (event, d) {
+        const leafIds = [];
+        function collectLeafIds(node) {
+          if (!node.children) {
+            leafIds.push(node.data.name);
+          } else {
+            node.children.forEach(collectLeafIds);
+          }
+        }
+        collectLeafIds(d.target);
+
+        // Update map layers
+        const layersToUpdate = ['buildings', 'morphotopes', 'h3', 'grid'];
+        layersToUpdate.forEach(layer => {
+          if (map.getLayer(layer)) {
+            map.setFilter(layer, ['in', ['get', 'final_without_noise'], ['literal', leafIds]]);
+          }
+        });
+
+        // Highlight the tree segments
+        d3.select(this).classed("link--active", true);
+        d3.select(d.target.linkExtensionNode).classed("link-extension--active", true);
+
+        event.stopPropagation(); // Prevent the click from bubbling up
+      });
+
+      linkExtension.on("mouseover", function (event, d) {
+        d3.select(this).classed("link-extension--active", true);
+        d3.select(d.target.linkNode).classed("link--active", true);
+      })
+        .on("mouseout", function (event, d) {
+          d3.select(this).classed("link-extension--active", false);
+          d3.select(d.target.linkNode).classed("link--active", false);
+        });
+
       svg.on("click", function (event) {
         if (event.target === this || event.target.tagName !== 'path') { // Only clear if clicking the background or non-path element
           clearSelection();