Fix layout bug. Convert fetched data node tags to sets

sruti · Feb 12, 2019 · 9e91f11 · 9e91f11
1 parent 1dfd0b3
commit 9e91f11
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 18 deletions.
diff --git a/graph.js b/graph.js
@@ -1,4 +1,4 @@
-const graphElem = document.getElementById('idea-graph');
+const graphElem = document.getElementById("idea-graph");
 const Graph = ForceGraph3D()(graphElem)
 displayGraph();
 
@@ -11,10 +11,11 @@ window.onclick = function (event) {
 async function displayGraph() {
     let newData
     try {
-        newData = await getData()
+        newData = await getData();
+        newData.nodes = newData.nodes.map(node => ({...node, tags: new Set(node.tags)}));
         Graph.graphData(newData)
-            .nodeLabel('name')
-            .onNodeHover(node => graphElem.style.cursor = node ? 'pointer' : null)
+            .nodeLabel("name")
+            .onNodeHover(node => graphElem.style.cursor = node ? "pointer" : null)
             .onNodeClick(node => {
                 // Aim at node from outside it
                 const distance = 40;
@@ -44,10 +45,10 @@ function displayDetail(node) {
     detailTags.textContent = [...node.tags].join(', ');
     detailCreator.textContent = node.creator;
     detailDescription.textContent = node.description;
-
-    modal.style.top = event.pageY;
-    modal.style.left = event.pageX;
-    modal.style.display = 'block';
+    
+    modal.style.top = event.pageY + "px";
+    modal.style.left = event.pageX + "px";
+    modal.style.display = "block";  
 }
 
 function onAddItemClick() {
@@ -86,7 +87,7 @@ function onModalSubmitClick(event, form) {
 }
 
 function onModalCloseClick(modal) {
-    modal.parentElement.style.display = 'none';
+    modal.parentElement.style.display = "none";
 }
 
 function matchTags(newIdea, nodes) {
@@ -97,4 +98,5 @@ function matchTags(newIdea, nodes) {
             newLinks = [...newLinks, { source: newIdea.id, target: idea.id }]
         }
     }
+    return newLinks
 }
diff --git a/index.html b/index.html
@@ -1,16 +1,11 @@
-<!DOCTYPE html>
-<html lang="en-US">
-
 <head>
     <link rel="stylesheet" href="styles.css">
     <script src="https://unpkg.com/3d-force-graph"></script>
 </head>
 
 <body>
     <div id="idea-graph"></div>
-
     <button id="button-add" onclick="onAddItemClick()">Add Idea</button>
-
     <div id="modal-idea-new">
         <button class="button-modal-close" onclick="onModalCloseClick(this)">X</button>
         <form id="form-idea-new" onsubmit="onModalSubmitClick(event, this)">
@@ -37,9 +32,8 @@
         <span id="detail-description"></span><br><br>
         Topics: <span id="detail-tags"></span>
     </div>
-</body>
 
-<script src="api.js"></script>
-<script src="graph.js"></script>
+    <script src="api.js"></script>
+    <script src="graph.js"></script>
+</body>
 
-</html>