From fc8f858b0d5ca58e83376f5a5a7a655a5fa0192e Mon Sep 17 00:00:00 2001
From: alemi <me@alemi.dev>
Date: Mon, 2 Oct 2023 15:39:47 +0200
Subject: [PATCH] feat: better UI

---
 dist/index.html | 47 ++++++++++++++++++++++++++++++-----------------
 1 file changed, 30 insertions(+), 17 deletions(-)
diff --git a/dist/index.html b/dist/index.html
index 5b9d59d..58e5e43 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -10,14 +10,16 @@
       body {
         background: #111111;
       }
-      #mynetwork {
+      #netgraph {
         width: 100%;
         height: 98vh;
       }
     </style>
   </head>
   <body>
-    <div id="mynetwork"></div>
+    <div id="netgraph">
+      <h3 style="text-align: center;" id="loader"><font color="#BF616A">crunching fedi network data, be patient...</font></h3>
+    </div>
     <script type="text/javascript">
       let nodes_array = []
       let edges_array = []
@@ -29,27 +31,38 @@
         domain = domainParam;
         console.log("scanning domain " + domain);
       } else {
-        domain = "social.alemi.dev";
-        console.log("defaulting to social.alemi.dev");
+        domain = window.prompt("starting instance for charting", "social.alemi.dev");
       }
 
       fetch(`https://api.alemi.dev/akkoma/bubble/crawl?domain=${domain}`)
         .then((res) => res.json().then((graph) => {
+          const palette = [
+            '#81A1C1',
+            '#5B6EA3',
+            '#7468B0',
+            '#84508C',
+            '#AF875F',
+            '#EBCB8B',
+            '#2E8757',
+            '#05979A',
+          ]
+          for (const i in graph.nodes) {
+            if (graph.nodes[i].label === domain) graph.nodes[i].color = '#BF616A';
+            else graph.nodes[i].color = palette[Math.floor(Math.random() * palette.length)];;
+          }
 
-      // create an array with nodes
-      var nodes = new vis.DataSet(graph.nodes);
+          const nodes = new vis.DataSet(graph.nodes);
+          const edges = new vis.DataSet(graph.vertices);
 
-      // create an array with edges
-      var edges = new vis.DataSet(graph.vertices);
-
-      // create a network
-      var container = document.getElementById("mynetwork");
-      var data = {
-        nodes: nodes,
-        edges: edges,
-      };
-      var options = { edges: { dashes: true }, nodes: { color: "#bf616a", shape: "box" }};
-      var network = new vis.Network(container, data, options);
+          // create a network
+          const container = document.getElementById("netgraph");
+          const data = {
+            nodes: nodes,
+            edges: edges,
+          };
+          const options = { edges: { dashes: true, arrows: 'to' }, nodes: { mass: 3, color: "#bf616a", shape: "box" }};
+          const network = new vis.Network(container, data, options);
+          document.getElementById("loader").remove();
       }))
     </script>
   </body>
