From e39b57871fe4e61339f2522e42d49ffb833f4ec9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20Kocy=C5=82a?= <maciej.kocyla@polcode.net>
Date: Tue, 3 Dec 2024 13:09:14 +0100
Subject: [PATCH] dc clusters

---
 app/assets/stylesheets/application.scss       |  30 +--
 app/assets/stylesheets/data_center_map.scss   |  44 +++++
 .../api/v1/data_centers_controller.rb         |  11 +-
 .../packs/data_centers/map_component.js       |   2 +
 .../packs/data_centers/map_component.vue      | 173 +++++++++++++++---
 app/javascript/packs/stake_accounts/index.js  |   1 +
 package.json                                  |   1 +
 yarn.lock                                     |  20 ++
 8 files changed, 226 insertions(+), 56 deletions(-)
 create mode 100644 app/assets/stylesheets/data_center_map.scss

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 63b7e6271..72b0b5683 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -30,6 +30,7 @@
 @import "carousels";
 @import "map";
 @import "modals";
+@import "data_center_map";
 
 html {
   overflow-x: hidden;
@@ -50,35 +51,6 @@ body {
   }
 }
 
-#map {
-  height: 600px; /* The height is 400 pixels */
-  width: 100%; /* The width is the width of the web page */
-}
-
-#floating-panel {
-  position: absolute;
-  top: 10px;
-  left: 25%;
-  z-index: 5;
-  background-color: #fff;
-  padding: 5px;
-  border: 1px solid #999;
-  text-align: center;
-  font-family: "Roboto", "sans-serif";
-  line-height: 30px;
-  padding-left: 10px;
-}
-
-#floating-panel {
-  background-color: #fff;
-  border: 1px solid #999;
-  left: 25%;
-  padding: 5px;
-  position: absolute;
-  top: 10px;
-  z-index: 5;
-}
-
 .background-color {
   position: fixed;
   z-index: -2;
diff --git a/app/assets/stylesheets/data_center_map.scss b/app/assets/stylesheets/data_center_map.scss
new file mode 100644
index 000000000..493965404
--- /dev/null
+++ b/app/assets/stylesheets/data_center_map.scss
@@ -0,0 +1,44 @@
+#map {
+  height: 600px; /* The height is 400 pixels */
+  width: 100%; /* The width is the width of the web page */
+  border-radius: 25px;
+}
+
+.data-center {
+    align-items: center;
+    background-color: #17132a;
+    border-radius: 50%;
+    color: #dedede;
+    display: flex;
+    font-size: 14px;
+    gap: 5px;
+    height: 23px;
+    justify-content: center;
+    padding: 4px;
+    position: relative;
+    position: relative;
+    transition: all 0.3s ease-out;
+    width: 23px;
+
+    .data-center-details {
+      display: none;
+      flex-direction: column;
+      flex: 1;
+    }
+
+    &.highlight {
+      // background-color: #FFFFFF;
+      border-radius: 8px;
+      box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
+      height: auto;
+      padding: 8px 15px;
+      width: 230px;
+
+      .data-center-details {
+        padding-left: 10px;
+        display: block;
+        flex-direction: column;
+        flex: 1;
+      }
+    }
+  }
diff --git a/app/controllers/api/v1/data_centers_controller.rb b/app/controllers/api/v1/data_centers_controller.rb
index 34ed9a649..6aab0d3b6 100644
--- a/app/controllers/api/v1/data_centers_controller.rb
+++ b/app/controllers/api/v1/data_centers_controller.rb
@@ -65,8 +65,13 @@ def index_with_nodes
       end
 
       def index_for_map
-        data_centers = DataCenter.joins(:data_center_stats)
+        data_centers = DataCenter.select(:traits_organization, :data_center_key, :location_latitude, :location_longitude, :active_validators_count, :active_validators_stake, :traits_autonomous_system_number)
+                                 .joins(:data_center_stats)
+                                 .where("data_center_stats.network = ?", map_params[:network])
                                  .where.not(data_center_key: "0--Unknown")
+        # if map_params[:asn_search].present?
+        #   data_centers = data_centers.where("data_centers.traits_autonomous_system_number = ?", map_params[:asn_search])
+        # end
         render json: {
           data_centers: data_centers
         }, status: :ok
@@ -98,6 +103,10 @@ def data_center_stats
       def dc_params
         params.permit(:network, :show_gossip_nodes)
       end
+
+      def map_params
+        params.permit(:network, :asn_search)
+      end
     end
   end
 end
diff --git a/app/javascript/packs/data_centers/map_component.js b/app/javascript/packs/data_centers/map_component.js
index d285ed5fa..b8e78c64b 100644
--- a/app/javascript/packs/data_centers/map_component.js
+++ b/app/javascript/packs/data_centers/map_component.js
@@ -1,12 +1,14 @@
 import Vue from 'vue/dist/vue.esm'
 import TurbolinksAdapter from 'vue-turbolinks';
 import MapComponent from './map_component.vue';
+import store from "../stores/main_store.js";
 
 Vue.use(TurbolinksAdapter);
 
 document.addEventListener('turbolinks:load', () => {
   new Vue({
     el: '#data-center-map-component',
+    store,
     render(createElement) {
       return createElement(MapComponent)
     }
diff --git a/app/javascript/packs/data_centers/map_component.vue b/app/javascript/packs/data_centers/map_component.vue
index 97bed280d..489376da2 100644
--- a/app/javascript/packs/data_centers/map_component.vue
+++ b/app/javascript/packs/data_centers/map_component.vue
@@ -1,18 +1,19 @@
 <template>
   <div class="container">
-    <!-- <div id="floating-panel">
-      <button id="toggle-heatmap">Toggle Heatmap</button>
-      <button id="change-gradient">Change gradient</button>
-      <button id="change-radius">Change radius</button>
-      <button id="change-opacity">Change opacity</button>
-    </div> -->
-    <div id="map"></div>
+    <div id="floating-panel">
+      <button id="toggle-heatmap" class="btn btn-xs btn-secondary" v-on:click="toggleHeatmap()">Toggle Heatmap</button>
+      <button id="toggle-markers" class="btn btn-xs btn-secondary" v-on:click="toggleMarkers()">Toggle Markers</button>
+      <input id="search-asn" v-model="asn_search" placeholder="search by asn"></input>
+    </div>
+    <div id="map" class="mt-2"></div>
   </div>
 </template>
 
 <script>
   import axios from 'axios';
   import { mapGetters } from 'vuex';
+  import '../mixins/numbers_mixins'
+  import { MarkerClusterer } from "@googlemaps/markerclusterer";
 
   axios.defaults.headers.get["Authorization"] = window.api_authorization;
 
@@ -27,7 +28,11 @@
       return {
         data_centers: [],
         heat_points: [],
-        map: null
+        map: null,
+        heatmap: null,
+        asn_search: null,
+        markerClusterer: null,
+        markers_visible: true
       }
     },
 
@@ -36,9 +41,38 @@
         this.add_markers();
     },
 
-    computed: mapGetters([
-      'network'
-    ]),
+    computed: {
+      ...mapGetters([
+        'network'
+      ]),
+      marker_list: function() {
+        if(this.markers_visible) {
+          return this.data_centers.map(data_center => data_center.marker);
+        } else {
+          return [];
+        }
+      }
+    },
+
+    watch: {
+      asn_search: function(new_asn, old_asn) {
+        if(new_asn.length > 4) {
+          this.data_centers.forEach(data_center => {
+            if (data_center.traits_autonomous_system_number == new_asn) {
+              data_center.marker.map = this.map;
+            } else {
+              data_center.marker.map = null;
+            }
+            this.markerClusterer.clearMarkers();
+          });
+        } else {
+          this.data_centers.forEach(data_center => {
+            data_center.marker.map = this.map;
+          });
+          this.set_up_clusterer(this.marker_list, this.map);
+        }
+      }
+    },
 
     methods: {
       initMap: async function() {
@@ -54,36 +88,123 @@
         },
 
         add_markers: async function() {
-          const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
+          const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
           const infoWindow = new google.maps.InfoWindow();
-          axios.get('/api/v1/data-centers-for-map')
+          axios.get('/api/v1/data-centers-for-map?network=' + this.network)
                .then(response => {
                  this.data_centers = response.data['data_centers'];
                  this.data_centers.forEach(data_center => {
                     let position = { lat: parseFloat(data_center.location_latitude), lng: parseFloat(data_center.location_longitude) };
                     this.heat_points.push(new google.maps.LatLng(position['lat'], position['lng']));
                     let map = this.map;
-                    const marker = new AdvancedMarkerElement({
+
+                    data_center.marker = new AdvancedMarkerElement({
                       position,
-                      map,
-                      title: data_center.data_center_key,
-                      // content: pin.element,
+                      title: data_center.traits_organization,
+                      content: this.buildContent(data_center),
                       gmpClickable: true,
                     });
 
-                    marker.addListener("click", ({ domEvent, latLng }) => {
-                      const { target } = domEvent;
-
-                      infoWindow.close();
-                      infoWindow.setContent(marker.title);
-                      infoWindow.open(marker.map, marker);
+                    data_center.marker.addListener("click", () => {
+                      this.toggleHighlight(data_center.marker, data_center);
                     });
                 });
-          const heatmap = new google.maps.visualization.HeatmapLayer({
-            data: this.heat_points,
-            map: this.map,
+
+                this.heatmap = new google.maps.visualization.HeatmapLayer({
+                  data: this.heat_points,
+                  map: this.map,
+                });
+
+                this.set_up_clusterer(this.marker_list, this.map);
           });
+        },
+
+        set_up_clusterer: function(marker_list, map) {
+          this.markerClusterer && this.markerClusterer.clearMarkers();
+          this.markerClusterer = new MarkerClusterer( { 
+            map: map,
+            markers: marker_list,
+            renderer: {
+              render: ({ markers, _position: position }) => {
+                const count = markers.length;
+
+                const svg = window.btoa(`
+                <svg fill="#17132a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+                  <circle cx="120" cy="120" opacity=".6" r="70" />
+                  <circle cx="120" cy="120" opacity=".3" r="90" />
+                  <circle cx="120" cy="120" opacity=".2" r="110" />
+                  <circle cx="120" cy="120" opacity=".1" r="130" />
+                </svg>`);
+                return new google.maps.Marker({
+                  position,
+                  icon: {
+                    url: `data:image/svg+xml;base64,${svg}`,
+                    scaledSize: new google.maps.Size(45, 45),
+                  },
+                  label: {
+                    text: String(count),
+                    color: "rgba(255,255,255,0.9)",
+                    fontSize: "12px",
+                  },
+                  zIndex: count,
+                });
+              }
+            }
           });
+        },
+
+        toggleHighlight: function(marker, data_center) {
+          if (marker.content.classList.contains("highlight")) {
+            marker.content.classList.remove("highlight");
+            marker.zIndex = null;
+          } else {
+            marker.content.classList.add("highlight");
+            marker.zIndex = 1;
+          }
+        },
+
+        buildContent: function(data_center) {
+          const content = document.createElement("div");
+          content.classList.add("data-center");
+          content.innerHTML = `
+            <div class="icon">
+                <i class="fa-solid fa-database" aria-hidden="true"></i>
+            </div>
+            <div class="data-center-details">
+                <p class="h4">${data_center.traits_organization}</p>
+                <div class="mb-1">
+                  <span>${data_center.data_center_key}</span>
+                  <span class="text-muted">(${data_center.traits_autonomous_system_number})</span>
+                </div>
+                <div class="mb-1">
+                  <span class="me-1">active stake: ${this.lamports_to_sol(data_center.active_validators_stake)} SOL</span>
+                </div>
+                <div class="mb-1">
+                  <span class="me-1">active validators: ${data_center.active_validators_count}</span>
+                </div>
+            </div>
+            `;
+          return content;
+        },
+
+        toggleHeatmap: function() {
+          this.heatmap.setMap(this.heatmap.getMap() ? null : this.map);
+        },
+
+        toggleMarkers: function() {
+          if(this.markers_visible) {
+            this.asn_search = null;
+            this.markers_visible = false;
+            this.data_centers.forEach(data_center => {
+              data_center.marker.map = null;
+            });
+          } else {
+            this.markers_visible = true;
+            this.data_centers.forEach(data_center => {
+              data_center.marker.map = this.map;
+            });
+          }
+          this.set_up_clusterer(this.marker_list, this.map);
         }
     }
   }
diff --git a/app/javascript/packs/stake_accounts/index.js b/app/javascript/packs/stake_accounts/index.js
index 544a92169..bffae3d29 100644
--- a/app/javascript/packs/stake_accounts/index.js
+++ b/app/javascript/packs/stake_accounts/index.js
@@ -20,6 +20,7 @@ document.addEventListener('DOMContentLoaded', () => {
     render(createElement) {
       return createElement(IndexTemplate);
     },
+    
     component: {
       'StakeAccountRow': StakeAccountRow,
       'StakePoolStats': StakePoolStats,
diff --git a/package.json b/package.json
index 2ad5a713b..bb78521e3 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "@babel/plugin-transform-runtime": "^7.24.7",
     "@babel/preset-env": "^7.24.7",
     "@fortawesome/fontawesome-free": "^6.2.1",
+    "@googlemaps/markerclusterer": "^2.5.3",
     "@rails/actioncable": "^6.1.7",
     "@rails/activestorage": "^6.1.7",
     "@rails/ujs": "^6.1.7",
diff --git a/yarn.lock b/yarn.lock
index 74ebecb28..cd2b77011 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1063,6 +1063,14 @@
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
   integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
 
+"@googlemaps/markerclusterer@^2.5.3":
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/@googlemaps/markerclusterer/-/markerclusterer-2.5.3.tgz#9f891ce7e8e161775f3a3e2c9f66956810284591"
+  integrity sha512-x7lX0R5yYOoiNectr10wLgCBasNcXFHiADIBdmn7jQllF2B5ENQw5XtZK+hIw4xnV0Df0xhN4LN98XqA5jaiOw==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    supercluster "^8.0.1"
+
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
@@ -6906,6 +6914,11 @@ jsonparse@^1.2.0:
   resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
   integrity sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==
 
+kdbush@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/kdbush/-/kdbush-4.0.2.tgz#2f7b7246328b4657dd122b6c7f025fbc2c868e39"
+  integrity sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==
+
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
@@ -9946,6 +9959,13 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
+supercluster@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/supercluster/-/supercluster-8.0.1.tgz#9946ba123538e9e9ab15de472531f604e7372df5"
+  integrity sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==
+  dependencies:
+    kdbush "^4.0.2"
+
 superstruct@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/superstruct/-/superstruct-2.0.2.tgz#3f6d32fbdc11c357deff127d591a39b996300c54"