node highlighting is fixed

config.json

@@ -28,6 +28,14 @@
     "defaultColorAttribute": "type",
     "labelThreshold": 8
   },
+  "highlighting": {
+    "nodeOpacity": 0.2,
+    "edgeOpacity": 0.05,
+    "selectedNodeSizeFactor": 1.5,
+    "highlightConnections": true,
+    "highlightedEdgeColor": "#000000",
+    "highlightedEdgeSizeFactor": 5
+  },
   "informationPanel": {
     "groupByEdgeDirection": false,
     "imageAttribute": false

css/style.css

@@ -495,4 +495,25 @@ canvas#sigma_bg_1 {
 
 .col {
   margin-bottom: 20px;
+}
+
+#attributepane .text .nodeattributes {
+  display: block;
+  padding: 10px;
+  color: #333;
+}
+
+#attributepane .text .returntext {
+  color: #007AFF;
+  cursor: pointer;
+  margin: 10px 0;
+  padding: 10px 10px 5px 10px;
+  font-weight: bold;
+  border-bottom: 1px solid #ddd;
+}
+
+#attributepane .text .nodeattributes .nodetype {
+  font-style: italic;
+  color: #666;
+  margin-bottom: 8px;
 } 

index.html

@@ -72,16 +72,16 @@
   
   <div id="attributepane">
     <div class="text">
-      <div class="headertext">Information Pane</div>
+      <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="data"></div>
         <div class="p">Connections:</div>
         <div class="link">
           <ul></ul>
         </div>
       </div>
-      <div class="returntext">Return to the full network</div>
     </div>
   </div>
   

js/main.js

@@ -362,64 +362,111 @@ function nodeActive(nodeId) {
     n.attr.originalColor = n.color;
     
     if (n.id === nodeId) {
-      // Make selected node slightly larger
+      // Make selected node slightly larger based on config
       n.attr.originalSize = n.size;
-      n.size = n.size * 1.5;
+      const sizeFactor = config.highlighting?.selectedNodeSizeFactor ?? 1.5;
+      n.size = n.size * sizeFactor;
     } else if (!neighbors[n.id]) {
       // For non-neighbor nodes, we use a custom attribute to track they should be dimmed
       // (Sigma v0.1 doesn't support opacity directly)
       n.attr.dimmed = true;
-      // Apply a transparent version of the original color
+      // Apply a transparent version of the original color using configured opacity
       var rgb = getRGBColor(n.color);
-      n.color = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',0.2)';
+      const opacity = config.highlighting?.nodeOpacity ?? 0.2;
+      n.color = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + opacity + ')';
     }
   });
   
   // Apply the same to edges
+  let debugCounts = { connected: 0, notConnected: 0 };
+  let edgeCount = 0;
+  
+  console.log("Starting edge processing for node:", nodeId);
+  
   sigmaInstance.iterEdges(function(e) {
+    edgeCount++;
     e.attr = e.attr || {};
     
-    // First, store the original color
-    if (!e.attr.originalColor) {
+    // First, ensure we store the original color (only once)
+    if (typeof e.attr.originalColor === 'undefined') {
       e.attr.originalColor = e.color;
+      console.log("Storing original color for edge:", e.id, "Color:", e.color);
+    }
+    
+    // Store original size for edges (only once)
+    if (typeof e.attr.originalSize === 'undefined') {
+      e.attr.originalSize = e.size || 1;
     }
     
-    // Direct check for connected edges - need to account for both string and object references
-    let isConnected = false;
+    // Get the actual source and target IDs from the edge
+    let sourceId, targetId;
     
-    // Check source connection
+    // Handle source ID extraction
     if (typeof e.source === 'object' && e.source !== null) {
-      if (e.source.id == nodeId) isConnected = true;
-    } else if (String(e.source) == String(nodeId)) {
-      isConnected = true;
+      sourceId = e.source.id;
+    } else {
+      sourceId = String(e.source);
     }
     
-    // Check target connection
+    // Handle target ID extraction
     if (typeof e.target === 'object' && e.target !== null) {
-      if (e.target.id == nodeId) isConnected = true;
-    } else if (String(e.target) == String(nodeId)) {
-      isConnected = true;
+      targetId = e.target.id;
+    } else {
+      targetId = String(e.target);
     }
     
-    // For debugging
+    // For safe comparison, convert nodeId to string as well
+    const selectedNodeId = String(nodeId);
+    
+    // Check if this edge is connected to the selected node
+    const isConnected = (sourceId === selectedNodeId || targetId === selectedNodeId);
+    
+    // Track counts for debugging
     if (isConnected) {
-      console.log("Edge connected:", e.id, 
-                 "Source:", (typeof e.source === 'object' ? e.source.id : e.source), 
-                 "Target:", (typeof e.target === 'object' ? e.target.id : e.target));
-      
-      // IMPORTANT: Make sure the color is the original (non-dimmed) color
-      // In Sigma.js v0.1, we need to completely reset the color property
-      e.color = e.attr.originalColor;
+      debugCounts.connected++;
     } else {
-      // For non-connected edges, apply the dimmed color
-      let rgb = getRGBColor(e.attr.originalColor);
-      e.color = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',0.2)';
+      debugCounts.notConnected++;
+    }
+    
+    // Apply different styles based on connection status
+    if (isConnected) {
+      // Connected edge: make black and increase size
+      const highlightColor = config.highlighting?.highlightedEdgeColor ?? '#000000';
+      const sizeFactor = config.highlighting?.highlightedEdgeSizeFactor ?? 2;
+      e.color = highlightColor;
+      e.size = (e.attr.originalSize) * sizeFactor;
+      console.log("Edge highlighted:", e.id, "Source:", sourceId, "Target:", targetId, "Color set to:", e.color);
+    } else {
+      // For non-connected edges, use a very light gray that's almost invisible
+      // RGBA doesn't seem to work consistently in Sigma.js v0.1
+      e.color = '#ededed';  // Very light gray
+      e.size = e.attr.originalSize * 0.5;  // Make non-connected edges thinner
     }
   });
   
+  console.log("Edge processing complete. Total edges:", edgeCount, "Connected:", debugCounts.connected, "Not connected:", debugCounts.notConnected);
+  
   // Force redraw
   sigmaInstance.draw(2, 2, 2, 2);
   
+  // Add debug check after redraw to verify edge colors
+  setTimeout(function() {
+    console.log("Verifying edge colors after redraw:");
+    let colorCount = { black: 0, transparent: 0, other: 0 };
+    
+    sigmaInstance.iterEdges(function(e) {
+      if (e.color === '#000000') {
+        colorCount.black++;
+      } else if (e.color.includes('rgba')) {
+        colorCount.transparent++;
+      } else {
+        colorCount.other++;
+      }
+    });
+    
+    console.log("Edge color counts:", colorCount);
+  }, 100);
+  
   // Show node details panel and populate it
   try {
     $('#attributepane')
@@ -430,16 +477,16 @@ function nodeActive(nodeId) {
         'opacity': '1'
       });
     
+    // Set the node name/title
     $('.nodeattributes .name').text(selected.label || selected.id);
     
+    // Display the node type
+    $('.nodeattributes .nodetype').text(selected.type ? 'Type: ' + selected.type : '');
+    
+    // Simplify data display to only show degree
     let dataHTML = '';
-    for (let attr in selected) {
-      if (attr !== 'id' && attr !== 'x' && attr !== 'y' && attr !== 'size' && attr !== 'color' && 
-          attr !== 'label' && attr !== 'hidden' && attr !== 'attr' &&
-          typeof selected[attr] !== 'function' && attr !== 'displayX' && attr !== 'displayY' && 
-          attr !== 'displaySize' && !attr.startsWith('_')) {
-        dataHTML += '<div><strong>' + attr + ':</strong> ' + selected[attr] + '</div>';
-      }
+    if (typeof selected.degree !== 'undefined') {
+      dataHTML = '<div><strong>Degree:</strong> ' + selected.degree + '</div>';
     }
     
     if (dataHTML === '') dataHTML = '<div>No additional attributes</div>';
@@ -508,10 +555,16 @@ function nodeNormal() {
   // Restore original edge colors
   sigmaInstance.iterEdges(function(e) {
     e.attr = e.attr || {};
-    if (e.attr.originalColor) {
+    // Restore color with explicit check for undefined
+    if (typeof e.attr.originalColor !== 'undefined') {
       e.color = e.attr.originalColor;
       delete e.attr.originalColor;
     }
+    // Restore size with explicit check for undefined
+    if (typeof e.attr.originalSize !== 'undefined') {
+      e.size = e.attr.originalSize;
+      delete e.attr.originalSize;
+    }
   });
   
   // Reset selected node