From 178cd9d95f201f4abf0bc944a3f0051833fe7387 Mon Sep 17 00:00:00 2001
From: Scobiform <datenkrake@scobiform.com>
Date: Wed, 17 Apr 2024 21:45:20 +0200
Subject: [PATCH] #1 js

---
 templates/graph.html | 170 ++++++++++++++++++-------------------------
 1 file changed, 72 insertions(+), 98 deletions(-)

diff --git a/templates/graph.html b/templates/graph.html
index 90a85b7..1aa1b29 100644
--- a/templates/graph.html
+++ b/templates/graph.html
@@ -1,107 +1,81 @@
 <div id="graph"></div>
 <script>
+document.addEventListener('DOMContentLoaded', async function() {
+            const apiBaseUrl = '{{ api_base_url }}';
+            const accessToken = sessionStorage.getItem('accessToken');
+            const userId = '{{ user.id }}';
+            const user = { id: userId, username: '{{ user.username }}', avatar: '{{ user.avatar }}' };
 
-  document.addEventListener('DOMContentLoaded', function() {
-    const apiBaseUrl = '{{ api_base_url }}';
-    const accessToken = sessionStorage.getItem('accessToken'); // Ensure this is stored securely
-    const userId = '{{ user.id }}';
+            const followers = await fetchAllItems(userId, 'followers');
+            const followings = await fetchAllItems(userId, 'following');
+            const graphData = generateGraphData(user, followers, followings);
+            initGraph(graphData);
+        });
 
-    Promise.all([
-        fetchAllItems(userId, 'followers'),
-        fetchAllItems(userId, 'following')
-    ]).then(([followers, followings]) => {
-        const user = { id: userId, username: 'User' }; // Mock user data, replace with actual data as needed
-        const graphData = generateGraphData(user, followers, followings);
-        initGraph(graphData);
-    });
-  });
+        async function fetchAllItems(userId, endpoint) {
+            let items = [];
+            let maxId = null;
+            do {
+                const response = await fetch(`${apiBaseUrl}/${endpoint}/${userId}?limit=500&max_id=${maxId}`, {
+                    headers: { 'Authorization': `Bearer ${accessToken}` }
+                });
+                const data = await response.json();
+                items = items.concat(data);
+                maxId = data.length > 0 ? data[data.length - 1].id : null;
+            } while (maxId != null);
+            return items;
+        }
 
-  async function fetchAllItems(userId, endpoint) {
-      let items = [];
-      let maxId = null;
-      do {
-          const response = await fetch(`${apiBaseUrl}/${endpoint}/${userId}?limit=500&max_id=${maxId}`, {
-              headers: { 'Authorization': `Bearer ${accessToken}` }
-          });
-          const data = await response.json();
-          items = items.concat(data);
-          maxId = data.length > 0 ? data[data.length - 1].id : null;
-      } while (maxId != null);
-      return items;
-  }
+        function generateGraphData(user, followers, followings) {
+            const nodes = [{ id: user.id, username: user.username, type: 'user', avatar: user.avatar }];
+            const followerNodes = followers.map(f => ({ id: f.id, username: f.username, type: 'follower', avatar: f.avatar }));
+            const followingNodes = followings.map(f => ({ id: f.id, username: f.username, type: 'following', avatar: f.avatar }));
+            nodes.push(...followerNodes, ...followingNodes);
+            const links = followerNodes.map(f => ({ source: user.id, target: f.id }))
+                            .concat(followingNodes.map(f => ({ source: user.id, target: f.id })));
+            return { nodes, links };
+        }
 
-  function generateGraphData(user, followers, followings) {
-      const nodes = [{ id: user.id, username: user.username, type: 'user' }];
-      const followerNodes = followers.map(f => ({ id: f.id, username: f.username, type: 'follower' }));
-      const followingNodes = followings.map(f => ({ id: f.id, username: f.username, type: 'following' }));
-      nodes.push(...followerNodes, ...followingNodes);
-      const links = followerNodes.map(f => ({ source: user.id, target: f.id }))
-                        .concat(followingNodes.map(f => ({ source: user.id, target: f.id })));
-      return { nodes, links };
-  }
+        function initGraph(graphData) {
+            const Graph = ForceGraph()(document.getElementById('graph'))
+                .backgroundColor('#F5F5FF')
+                .height(window.innerHeight - 60)
+                .graphData(graphData)
+                .nodeCanvasObject((node, ctx, globalScale) => {
+                    const label = node.username;
+                    const fontSize = 12 / globalScale;
+                    const imgSize = 28;
+                    ctx.font = `${fontSize}px Sans-Serif`;
+                    ctx.textAlign = 'center';
+                    ctx.textBaseline = 'middle';
+                    if (node.avatar && node.img) {
+                        ctx.drawImage(node.img, node.x - imgSize / 2, node.y - imgSize / 2, imgSize, imgSize);
+                    } else if (node.avatar && !node.img) {
+                        const img = new Image();
+                        img.src = node.avatar;
+                        img.onload = () => {
+                            node.img = img;
+                            ctx.drawImage(img, node.x - imgSize / 2, node.y - imgSize / 2, imgSize, imgSize);
+                        };
+                    }
+                    ctx.fillStyle = (node.type === 'follower') ? 'red' : 'blue'; 
+                    ctx.fillText(label, node.x, node.y + imgSize / 2 + 5);
+                })
+                .onNodeClick(node => console.log(node));
 
-  function initGraph(graphData) {
-      const Graph = ForceGraph()(document.getElementById('graph'))
-          .backgroundColor('#F5F5FF')
-          .height(window.innerHeight - 60)
-          .graphData(graphData)
-          .nodeCanvasObject((node, ctx, globalScale) => {
-              const label = node.username;
-              const fontSize = 12 / globalScale;
-              const imgSize = 28;  // Adjust size as needed
-              ctx.font = `${fontSize}px Sans-Serif`;
-              ctx.textAlign = 'center';
-              ctx.textBaseline = 'middle';
+            Graph.d3Force('charge', d3.forceManyBody().strength(-120));
+            Graph.d3Force('link', d3.forceLink().distance(140));
+        }
 
-              // Draw avatar images
-              if (node.avatar && node.img) {
-                  ctx.drawImage(node.img, node.x - imgSize / 2, node.y - imgSize / 2, imgSize, imgSize);
-              } else if (node.avatar && !node.img) {
-                  const img = new Image();
-                  img.src = node.avatar;
-                  img.onload = () => {
-                      node.img = img;
-                      ctx.drawImage(img, node.x - imgSize / 2, node.y - imgSize / 2, imgSize, imgSize);
-                  };
-              }
-
-              // Draw labels
-              ctx.fillStyle = (node.type === 'follower') ? 'red' : 'blue'; 
-              ctx.fillText(label, node.x, node.y + imgSize / 2 + 5);
-          })
-          .onNodeClick(node => console.log(node));
-
-      // Configuration for forces
-      Graph.d3Force('charge', d3.forceManyBody().strength(-120));
-      Graph.d3Force('link', d3.forceLink().distance(140));
-
-      elementResizeDetectorMaker().listenTo(
-          document.getElementById('graph'),
-          el => Graph.width(el.offsetWidth)
-      );
-  }
-
-    // Configuration for forces
-    Graph.d3Force('charge', d3.forceManyBody().strength(-120));
-    Graph.d3Force('link', d3.forceLink().distance(140));
-
-    elementResizeDetectorMaker().listenTo(
-      document.getElementById('graph'),
-      el => Graph.width(el.offsetWidth)
-    );
-    
-    function filterNodes(filterType) {
-      const filteredData = {
-          nodes: graphData.nodes.filter(node => filterType === 'all' || node.type === filterType),
-          links: graphData.links.filter(link => {
-              const sourceVisible = filterType === 'all' || link.source.type === filterType;
-              const targetVisible = filterType === 'all' || link.target.type === filterType;
-              return sourceVisible && targetVisible;
-          })
-    };
-
-    // Update the graph with the filtered data
-    Graph.graphData(filteredData);
-}
-  
+        function filterNodes(filterType) {
+            const filteredData = {
+                nodes: graphData.nodes.filter(node => filterType === 'all' || node.type === filterType),
+                links: graphData.links.filter(link => {
+                    const sourceVisible = filterType === 'all' || link.source.type === filterType;
+                    const targetVisible = filterType === 'all' || link.target.type === filterType;
+                    return sourceVisible && targetVisible;
+                })
+            };
+            Graph.graphData(filteredData);  // Assuming 'Graph' is your ForceGraph instance
+        }
 </script>
\ No newline at end of file