Kind-of-working clustering performance, slow though

nerves-hub · Oct 29, 2024 · 0cb2d0e · 0cb2d0e
1 parent 9092077
commit 0cb2d0e
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 56 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -240,6 +240,21 @@ Hooks.WorldMap = {
     let self = this;
     let mapId = this.el.id;
     this.markers = [];
+    this.updateProgressBar = function (processed, total, elapsed, layersArray) {
+      if (elapsed > 1000) {
+        // if it takes more than a second to load, display the progress bar:
+
+        // progressBar.classList.remove("hidden");
+        // progressBar.style.width = Math.round(processed / total * 100) + '%';
+      }
+
+      console.log(processed, total)
+
+      if (processed === total) {
+        // all markers processed - hide the progress bar:
+        // progress.classList.add = 'hidden';
+      }
+    }
 
     var mapOptionsZoom = {
       attributionControl: false,
@@ -251,6 +266,7 @@ Hooks.WorldMap = {
       keyboard: false,
       maxZoom: 18,
       minZoom: 1.4,
+      renderer: L.canvas()
     };
 
     var mapStyle = {
@@ -284,21 +300,32 @@ Hooks.WorldMap = {
     let mode = this.el.dataset.mode;
     var devices = [];
 
+    var clusterLayer = L.markerClusterGroup({ chunkedLoading: true, chunkProgress: this.updateProgressBar });
     for (let i = 0; i < markers.length; i++) {
       let marker = markers[i];
-      let location = marker["location"];
-      if (location["longitude"] !== undefined && location["latitude"] !== undefined) {
-        let newMarker = {
-          type: "Feature",
-          properties: {
-            name: marker["identifier"],
-            status: marker["status"],
-            latest_firmware: marker["latest_firmware"]
-          },
-          geometry: {
-            type: "Point",
-            coordinates: [location["longitude"], location["latitude"]]
-          }
+      let location = marker["l"];
+      if (location["ng"] !== undefined && location["at"] !== undefined) {
+        let latlng = [location["at"], location["ng"]];
+        let newMarker;
+        switch (mode) {
+          case 'connected':
+            if (marker["s"] == "connected") {
+              newMarker = L.marker(latlng, markerConnectedOptions);
+            } else {
+              newMarker = L.marker(latlng, markerOfflineOptions);
+            }
+            break;
+          case 'updated':
+            // Only show connected ones, the offline ones are just confusing
+            if (marker["s"] == "connected") {
+              if (marker["lf"]) {
+                newMarker = L.marker(latlng, markerUpdatedOptions);
+              } else {
+                newMarker = L.marker(latlng, markerOutdatedOptions);
+              }
+            }
+            break;
+          default:
         }
         devices.push(newMarker);
       }
@@ -336,36 +363,18 @@ Hooks.WorldMap = {
       fillOpacity: 1
     };
 
-    var clusterLayer = L.markerClusterGroup();
     // Clear previous defined device layer before adding markers
-    if (this.deviceLayer !== undefined) { this.map.removeLayer(this.deviceLayer); }
+    // if (this.deviceLayer !== undefined) { this.map.removeLayer(this.deviceLayer); }
 
-    this.deviceLayer = L.geoJson(devices, {
-      pointToLayer: function (feature, latlng) {
-        switch (mode) {
-          case 'connected':
-            if (feature.properties.status == "connected") {
-              return L.circleMarker(latlng, markerConnectedOptions);
-            } else {
-              return L.circleMarker(latlng, markerOfflineOptions);
-            }
-            break;
-          case 'updated':
-            // Only show connected ones, the offline ones are just confusing
-            if (feature.properties.status == "connected") {
-              if (feature.properties.latest_firmware) {
-                return L.circleMarker(latlng, markerUpdatedOptions);
-              } else {
-                return L.circleMarker(latlng, markerOutdatedOptions);
-              }
-            }
-            break;
-          default:
-        }
-      }
-    });
-    clusterLayer.addLayer(this.deviceLayer);
+    // let f = 0;
+    // this.deviceLayer = L.geoJson(devices, {
+    //   pointToLayer: function (feature, latlng) {
 
+    //   }
+    // });
+    console.log(devices.length)
+    console.log("updated end")
+    clusterLayer.addLayers(devices);
     this.map.addLayer(clusterLayer)
   }
 }

diff --git a/lib/nerves_hub_web/live/dashboard/index.ex b/lib/nerves_hub_web/live/dashboard/index.ex
@@ -7,7 +7,7 @@ defmodule NervesHubWeb.Live.Dashboard.Index do
 
   alias Phoenix.Socket.Broadcast
 
-  @default_refresh 5000
+  @default_refresh 50000
   @delay 500
 
   @impl Phoenix.LiveView
@@ -19,7 +19,7 @@ defmodule NervesHubWeb.Live.Dashboard.Index do
     |> assign(:time, time())
     |> assign(:next_timer, nil)
     |> assign(:loading?, true)
-    |> assign(:mode, "updated")
+    |> assign(:mode, "connected")
     |> assign(:device_count, 0)
     |> assign(:marker_count, 0)
     |> refresh_after(1)
@@ -81,6 +81,7 @@ defmodule NervesHubWeb.Live.Dashboard.Index do
   end
 
   defp update_devices_and_markers(%{assigns: %{org: org, product: product}} = socket) do
+    IO.puts("Starting...")
     t = time()
     duration = t - socket.assigns.time
 
@@ -100,6 +101,8 @@ defmodule NervesHubWeb.Live.Dashboard.Index do
 
       subscribe_to_devices(socket, devices)
 
+      IO.puts("Done!")
+
       socket
       |> assign(:time, t)
       |> assign(:loading?, false)
@@ -130,11 +133,9 @@ defmodule NervesHubWeb.Live.Dashboard.Index do
        when is_number(longitude) and is_number(latitude) do
     new_marker =
       %{
-        id: id,
-        identifier: identifier,
-        status: get_connection_status(connection_status),
-        latest_firmware: Map.has_key?(latest_firmwares, firmware_uuid),
-        location: %{"longitude" => longitude, "latitude" => latitude}
+        s: get_connection_status(connection_status),
+        lf: Map.has_key?(latest_firmwares, firmware_uuid),
+        l: %{"ng" => longitude, "at" => latitude}
       }
 
     [new_marker | markers]

diff --git a/lib/nerves_hub_web/live/dashboard/index.html.heex b/lib/nerves_hub_web/live/dashboard/index.html.heex
@@ -30,7 +30,8 @@
           location from devices.
         </p>
       </div>
-      <div id="map" class="opacity-50" phx-hook="WorldMap" phx-update="ignore" style="height: 720px; background: #2A2D30; margin-top: 48px;"></div>
+      <div id="progress" phx-update="ignore" class="block hidden" style="background-color: cyan;"></div>
+      <div id="map" class="opacity-50" phx-hook="WorldMap" phx-update="ignore" data-mode={@mode} style="height: 720px; background: #2A2D30; margin-top: 48px;"></div>
     <% else %>
       <%= if @loading? do %>
         <div class="no-results-blowup-wrapper no-map-results-positioned">