minor fix

css/style.css

@@ -504,16 +504,25 @@ canvas#sigma_bg_1 {
 }
 
 #attributepane .text .returntext {
-  color: #007AFF;
+  color: #ffffff;
   cursor: pointer;
-  margin: 10px 0;
-  padding: 10px 10px 5px 10px;
+  margin: 10px 0 20px 0;
+  padding: 12px;
   font-weight: bold;
-  border-bottom: 1px solid #ddd;
+  font-size: 14px;
+  text-align: center;
+  background-color: #007AFF;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+#attributepane .text .returntext:hover {
+  background-color: #0056b3;
 }
 
 #attributepane .text .nodeattributes .nodetype {
-  font-style: italic;
-  color: #666;
-  margin-bottom: 8px;
+  color: #333;
+  margin-bottom: 12px;
+  font-size: 13px;
+  display: block;
 } 

index.html

@@ -75,7 +75,7 @@
       <div class="returntext">Return to the full network</div>
       <div class="nodeattributes">
         <div class="name">Select a node to see details</div>
-        <div class="nodetype"></div>
+        <div class="nodetype" style="margin-bottom: 12px;"></div>
         <div class="data"></div>
         <div class="p">Connections:</div>
         <div class="link">

js/main.js

@@ -171,6 +171,11 @@ function initializeGraph(data) {
         color: nodeColor,
         type: node.type
       });
+      
+      // Debug output for a few nodes to verify type is set
+      if (i < 3) {
+        console.log("Added node:", node.id, "with type:", node.type);
+      }
     }
     
     // Add edges to the graph
@@ -480,8 +485,40 @@ function nodeActive(nodeId) {
     // Set the node name/title
     $('.nodeattributes .name').text(selected.label || selected.id);
     
-    // Display the node type
-    $('.nodeattributes .nodetype').text(selected.type ? 'Type: ' + selected.type : '');
+    // Debug the node object to see what fields are available
+    console.log("Selected node:", selected);
+    console.log("Node properties:");
+    for (let prop in selected) {
+      console.log(`- ${prop}: ${selected[prop]}`);
+    }
+    
+    // Display the node type by parsing the ID
+    let nodeType = null;
+    
+    // Try to parse the node type from the ID (format: type_number)
+    if (selected.id && selected.id.includes('_')) {
+      const idParts = selected.id.split('_');
+      if (idParts.length >= 2) {
+        nodeType = idParts[0];
+        console.log("Extracted type from ID:", nodeType);
+      }
+    } 
+    // Fallbacks if we couldn't get the type from ID
+    else if (selected.type) {
+      nodeType = selected.type;
+      console.log("Node has type directly:", selected.type);
+    } else if (selected.attr && selected.attr.type) {
+      nodeType = selected.attr.type;
+      console.log("Node has type in attr:", selected.attr.type);
+    }
+    
+    // Format the type nicely - capitalize first letter
+    if (nodeType) {
+      nodeType = nodeType.charAt(0).toUpperCase() + nodeType.slice(1);
+      $('.nodeattributes .nodetype').text('Type: ' + nodeType).show();
+    } else {
+      $('.nodeattributes .nodetype').hide();
+    }
     
     // Simplify data display to only show degree
     let dataHTML = '';