From 6fc8627786ad43b128777e80607f815f91be1e4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Weckm=C3=BCller?= <dominik@geo.rocks>
Date: Wed, 24 Jul 2024 08:37:23 +0200
Subject: [PATCH] fix instgraam locations display logic via click instead of
 hover

---
 index.html            |  4 ++--
 static/assets/main.js | 35 ++++++++++++++++++++++-------------
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index 49b608c..b6c3316 100644
--- a/index.html
+++ b/index.html
@@ -201,8 +201,8 @@ <h5><label for="margin" class="d-inline-block" data-toggle="tooltip"
             <button type="button" id="queryData" class="btn btn-primary" disabled>Submit</button>
             <br>
             <br>
-            <h5><label data-toggle="tooltip" title="Instagram Locations in last-hovered hexbin">Instagram
-                    Locations</label></h5>
+            <h5><label data-toggle="tooltip" title="Instagram Locations in last-clicked hexbin">Instagram
+                    Locations (click hexbin)</label></h5>
             <div id="locations"></div>
 
 
diff --git a/static/assets/main.js b/static/assets/main.js
index 7dc336a..1f0ff70 100644
--- a/static/assets/main.js
+++ b/static/assets/main.js
@@ -155,6 +155,12 @@ $(document).ready(function () {
             }
             ));
 
+        hexLayer.dispatch()
+            .on('click', function(d, i) {
+                //console.log({ type: 'click', event: d, index: i, context: this });
+                hexagon_click(d);
+            });
+
         updateRadius()
 
         updateColorValueFunction()
@@ -286,18 +292,6 @@ $(document).ready(function () {
         const maxScore = aboveThreshold.reduce((max, obj) => Math.max(max, obj["o"]["score"]), 0);
         /////////////////////////////////////////////////////
 
-        var locations = d.reduce(function (acc, obj) { acc.push(obj["o"]["node.location_id"]); return acc; }, []);
-        locations = [...new Set(locations)]
-
-        let locationsHTML = ""; // initialize result variable as empty string
-
-        for (let i = 0; i < locations.length; i++) {
-            const element = locations[i];
-            const href = `https://www.instagram.com/explore/locations/${element}`; // generate href attribute
-            const link = `<a href="${href}" target="_blank">${element}</a>`; // wrap element in a tag
-            locationsHTML += link + "<br>"; // concatenate link and <br> tag to result
-        }
-
         // plain html version
         var tooltip_text =
             `<table>
@@ -324,9 +318,24 @@ $(document).ready(function () {
         //    Posts: ${String(SumCounts)}<br>
         //    Posts Above Threshold: ${String(aboveThresholdSumCounts)}<br>
         //    Highest Score (Color): ${String(maxScore.toFixed(2))}<br>`
+        return tooltip_text
+    }
+
+    function hexagon_click(d){
+        var locations = d.reduce(function (acc, obj) { acc.push(obj["o"]["node.location_id"]); return acc; }, []);
+        locations = [...new Set(locations)]
+
+        let locationsHTML = ""; // initialize result variable as empty string
+
+        for (let i = 0; i < locations.length; i++) {
+            const element = locations[i];
+            const href = `https://www.instagram.com/explore/locations/${element}`; // generate href attribute
+            const link = `<a href="${href}" target="_blank">${element}</a>`; // wrap element in a tag
+            locationsHTML += link + "<br>"; // concatenate link and <br> tag to result
+        }
 
         $("#locations").html(locationsHTML)
-        return tooltip_text
+
     }
 
     function updateRadius() {