map page load improvements

xmrnodes/routes/meta.py

@@ -1,6 +1,8 @@
 import re
 from random import shuffle
+from math import ceil
 
+import arrow
 from flask import request, redirect, Blueprint
 from flask import render_template, flash, Response
 from urllib.parse import urlparse
@@ -63,16 +65,36 @@ def index():
 
 @bp.route("/map")
 def map():
-    try:
-        peers = Peer.select()
-        nodes = Node.select().where(Node.datetime_checked)
-    except:
-        flash("Couldn't load the map. Try again later.")
-        return redirect("/")
+    fetch = request.args.get("fetch")
+    if fetch:
+        _peers = {}
+        next = None
+        limit = 100
+        rgb = "238,111,45"
+        offset = request.args.get("offset", 0)
+        offset = int(offset)
+        peers = Peer.select().order_by(Peer.datetime.asc())
+        paginated_peers = peers.paginate(offset, limit)
+        total = ceil(peers.count() / limit)
+        if offset < total:
+            next = offset + 1
+        for peer in paginated_peers:
+            opacity = 1 - (peer.hours_elapsed() / 100)
+            _peers[peer.url] = {
+                "rgba": f"rgba({rgb},{opacity})",
+                "lat": peer.lat,
+                "lon": peer.lon,
+                "last_seen": arrow.get(peer.datetime).humanize()
+            }
+        return {
+            "offset": offset,
+            "next": next,
+            "total": total,
+            "peers": _peers
+        }
     return render_template(
         "map.html",
-        peers=peers, 
-        nodes=nodes,
+        recent_peers=Peer.select().count(),
         source_node=config.NODE_HOST
     )
 

xmrnodes/templates/map.html

@@ -56,7 +56,7 @@
 {% endwith %}
 
 <div class="center info">
-  <p>Recent Peers: {{ peers | length }}</p>
+  <p>Recent Peers: {{ recent_peers }}</p>
   <p>Source Node: {{ source_node }}</p>
   <p>
     This is not a full representation of the entire Monero network,
@@ -89,7 +89,8 @@
       target: 'map',
       layers: [
         new ol.layer.Tile({
-          source: new ol.source.OSM()
+          source: new ol.source.OSM(),
+          preload: 4
         }),
         markerLayer
       ],
@@ -99,30 +100,30 @@
       })
     });
 
-    {% for peer in nodes %}
-    {% if peer.datetime_checked | hours_elapsed > 24 %}
-      {% set fill_color = 'rgba(1,1,45,.2)' %}
-    {% elif peer.datetime_checked | hours_elapsed > 16 %}
-      {% set fill_color = 'rgba(1,1,45,.4)' %}
-    {% elif peer.datetime_checked | hours_elapsed > 8 %}
-      {% set fill_color = 'rgba(1,1,45,.6)' %}
-    {% elif peer.datetime_checked | hours_elapsed > 4 %}
-      {% set fill_color = 'rgba(1,1,45,.8)' %}
-    {% else %}
-      {% set fill_color = 'rgba(1,1,45,1)' %}
-    {% endif %}
+    
+    fetch('?fetch=1')
+      .then((response) => response.json())
+      .then((data) => {
+        let total = data.total;
+        for(i=0;i<total+1;i++) {
+          fetch(`?fetch=1&offset=${i}`)
+            .then((res) => res.json())
+            .then((d) => {
+              setTimeout(function() {
+                for (var url in d.peers) {
+                  let peer = d.peers[url];
                   var feature = new ol.Feature(
-      new ol.geom.Point(ol.proj.transform(['{{ peer.lon }}', '{{ peer.lat }}'], 'EPSG:4326', 'EPSG:3857'))
+                    new ol.geom.Point(ol.proj.transform([peer.lon, peer.lat], 'EPSG:4326', 'EPSG:3857'))
                   );
                   feature.description = [
-      'Node {{ peer.url }}',
-      'Last seen {{ peer.datetime_checked | humanize }}'
+                    `Node ${url}`,
+                    `Last Seen ${peer.last_seen}`
                   ];
                   feature.setStyle(new ol.style.Style({
                     image: new ol.style.Circle({
                       radius: 6,
                       fill: new ol.style.Fill({
-          color: '{{ fill_color }}',
+                        color: peer.rgba,
                       }),
                       stroke: new ol.style.Stroke({
                         color: '#fff',
@@ -131,41 +132,11 @@
                     })
                   }));
                   markerLayer.getSource().addFeature(feature);
-    {% endfor %}
-
-    {% for peer in peers %}
-    {% if peer.datetime | hours_elapsed > 24 %}
-      {% set fill_color = 'rgba(238,111,45,.2)' %}
-    {% elif peer.datetime | hours_elapsed > 16 %}
-      {% set fill_color = 'rgba(238,111,45,.4)' %}
-    {% elif peer.datetime | hours_elapsed > 8 %}
-      {% set fill_color = 'rgba(238,111,45,.6)' %}
-    {% elif peer.datetime | hours_elapsed > 4 %}
-      {% set fill_color = 'rgba(238,111,45,.8)' %}
-    {% else %}
-      {% set fill_color = 'rgba(238,111,45,1)' %}
-    {% endif %}
-    var feature = new ol.Feature(
-      new ol.geom.Point(ol.proj.transform(['{{ peer.lon }}', '{{ peer.lat }}'], 'EPSG:4326', 'EPSG:3857'))
-    );
-    feature.description = [
-      'Peer {{ peer.url }}',
-      'Last seen {{ peer.datetime | humanize }}'
-    ];
-    feature.setStyle(new ol.style.Style({
-      image: new ol.style.Circle({
-        radius: 6,
-        fill: new ol.style.Fill({
-          color: '{{ fill_color }}',
-        }),
-        stroke: new ol.style.Stroke({
-          color: '#fff',
-          width: 1
+                }
+              }, 400)
             })
+        }
       })
-    }));
-    markerLayer.getSource().addFeature(feature);
-    {% endfor %}
 
     // Setup popup
     var popup = new ol.Overlay({
@@ -199,7 +170,7 @@
 
   // Wait for full load
   addEventListener("DOMContentLoaded", (event) => {
-    setTimeout(loadMap, 1000);
+    setTimeout(loadMap, 1500);
   });
 </script>