#1 fetch client side

Scobiform · Apr 17, 2024 · 86c3832 · 86c3832
1 parent 059aa5e
commit 86c3832
Showing 1 changed file with 18 additions and 46 deletions.
diff --git a/templates/graph.html b/templates/graph.html
@@ -1,21 +1,15 @@
 <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 }}' };
 
-  const graphData = {{ graph_data | tojson }};
-
-  document.addEventListener('DOMContentLoaded', function() {
-    const apiBaseUrl = '{{ api_base_url }}';
-    const accessToken = sessionStorage.getItem('accessToken'); // Ensure this is stored securely
-    const userId = '{{ user.id }}';
-
-    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);
-    });
+      const followers = await fetchAllItems(userId, 'followers');
+      const followings = await fetchAllItems(userId, 'following');
+      const graphData = generateGraphData(user, followers, followings);
+      initGraph(graphData);
   });
 
   async function fetchAllItems(userId, endpoint) {
@@ -33,12 +27,12 @@
   }
 
   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' }));
+      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 })));
+                      .concat(followingNodes.map(f => ({ source: user.id, target: f.id })));
       return { nodes, links };
   }
 
@@ -50,12 +44,10 @@
           .nodeCanvasObject((node, ctx, globalScale) => {
               const label = node.username;
               const fontSize = 12 / globalScale;
-              const imgSize = 28;  // Adjust size as needed
+              const imgSize = 28;
               ctx.font = `${fontSize}px Sans-Serif`;
               ctx.textAlign = 'center';
               ctx.textBaseline = 'middle';
-
-              // 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) {
@@ -66,44 +58,24 @@
                       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) {
+  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);
-}
-
+      };
+      Graph.graphData(filteredData);  // Assuming 'Graph' is your ForceGraph instance
+  }  
 </script>