Updated footer credits in index.html, refined CSS styles for better layout and responsiveness, and modified JavaScript to ensure edge colors match target nodes. Enhanced search functionality to support Enter key input.

css/style.css

@@ -61,7 +61,8 @@ canvas#sigma_bg_1 {
   transform: translateY(-50%);
   right: 20px;
   width: 270px;
-  background-color: #fff;
+  /* background-color: #fff; */
+  background: rgba(255, 255, 255, 0.5);
   margin: 0;
   z-index: 20;
   border-radius: 4px;
@@ -224,28 +225,29 @@ canvas#sigma_bg_1 {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  left: 10px;
+  left: 20px;
   width: 250px;
-  padding: 10px;
+  padding: 15px;
   background: rgba(255, 255, 255, 0.9);
-  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+  box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.2);
   z-index: 20;
   max-height: 80vh;
   overflow-y: auto;
+  border-radius: 4px;
 }
 
 #mainpanel .col {
-  margin-bottom: 20px;
+  margin-bottom: 25px;
 }
 
 #title {
   font-size: 24px;
   font-weight: bold;
-  margin-bottom: 5px;
+  margin-bottom: 10px;
 }
 
 #titletext {
-  margin-bottom: 15px;
+  margin-bottom: 20px;
   line-height: 1.5;
 }
 
@@ -263,15 +265,19 @@ canvas#sigma_bg_1 {
 }
 
 #legend {
-  margin-top: 15px;
-  margin-bottom: 15px;
-  display: block;
+  margin-top: 20px;
+  margin-bottom: 25px;
+}
+
+#legend h2 {
+  margin-bottom: 12px;
 }
 
 .legend-item {
   display: flex;
   align-items: center;
-  margin-bottom: 5px;
+  margin-bottom: 8px;
+  padding: 3px 0;
 }
 
 .legend-color {
@@ -299,23 +305,32 @@ canvas#sigma_bg_1 {
   margin-top: 10px;
 }
 
-#search input {
+#search h2 {
+  margin-bottom: 12px;
+}
+
+.search-wrapper {
+  margin-bottom: 12px;
+}
+
+#search-input {
+  width: 100%;
+  padding: 8px 12px;
   border: 1px solid #ccc;
-  padding: 5px 7px;
-  width: 80%;
+  border-radius: 4px;
+  font-size: 13px;
   box-sizing: border-box;
-  margin-bottom: 5px;
+  transition: border-color 0.2s;
+}
+
+#search-input:focus {
+  border-color: #007AFF;
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
 }
 
 #search-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  background-color: #1f77b4;
-  color: white;
-  border-radius: 0 4px 4px 0;
-  cursor: pointer;
+  display: none;
 }
 
 .state {
@@ -328,18 +343,20 @@ canvas#sigma_bg_1 {
 }
 
 .results {
-  margin-top: 10px;
+  margin-top: 15px;
 }
 
 .results a {
   display: block;
-  padding: 5px 0;
+  padding: 8px 0;
   color: #1f77b4;
   text-decoration: none;
+  border-bottom: 1px solid #eee;
 }
 
 .results a:hover {
   text-decoration: underline;
+  background-color: #f5f5f5;
 }
 
 .select-wrapper {
@@ -458,13 +475,21 @@ canvas#sigma_bg_1 {
 }
 
 #key-features {
-  margin-bottom: 15px;
+  margin-bottom: 25px;
+}
+
+#key-features h2 {
+  margin-bottom: 12px;
 }
 
 #key-features ul {
   padding-left: 20px;
 }
 
+#key-features li {
+  margin-bottom: 8px;
+}
+
 #node-info {
   position: absolute;
   background: rgba(255, 255, 255, 0.8);
@@ -477,32 +502,29 @@ canvas#sigma_bg_1 {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
-.search-wrapper {
-  display: flex;
+#mainpanel .footer {
+  margin-top: 25px;
+  padding-top: 15px;
+  border-top: 1px solid #eee;
+  font-size: 12px;
+  color: #777;
+  text-align: center;
 }
 
-#search-input {
-  flex: 1;
-  padding: 6px 10px;
-  border: 1px solid #ccc;
-  border-radius: 4px 0 0 4px;
+#mainpanel .footer .credits {
+  line-height: 1.4;
 }
 
-#search-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  background-color: #1f77b4;
-  color: white;
-  border-radius: 0 4px 4px 0;
-  cursor: pointer;
+#mainpanel .footer .credits a {
+  color: #007AFF;
+  text-decoration: none;
 }
 
-.col {
-  margin-bottom: 20px;
+#mainpanel .footer .credits a:hover {
+  text-decoration: underline;
 }
 
+/* Ensure attributepane styles are present */
 #attributepane .text .nodeattributes {
   display: block;
   padding: 10px;
@@ -534,38 +556,4 @@ canvas#sigma_bg_1 {
   margin-bottom: 12px;
   font-size: 13px;
   display: block;
-}
-
-#attributepane .text .nodeattributes .p {
-  font-weight: bold;
-  font-size: 14px;
-  margin: 15px 0 5px 0;
-}
-
-#attributepane .text .nodeattributes .link {
-  margin-bottom: 5px;
-}
-
-#attributepane .text .nodeattributes .link ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-#attributepane .text .nodeattributes .link ul li {
-  padding: 4px 0;
-  border-bottom: 1px solid #eee;
-}
-
-#attributepane .text .nodeattributes .link ul li a {
-  color: #007AFF;
-  text-decoration: none;
-  display: block;
-  padding: 2px 0;
-  font-size: 13px;
-}
-
-#attributepane .text .nodeattributes .link ul li a:hover {
-  color: #0056b3;
-  text-decoration: underline;
 } 

daily-paper-atlas/js/main.js

@@ -1,6 +1,6 @@
-// Force edge colors to match their source nodes
+// Force edge colors to match their target nodes
 function forceEdgeColors() {
-  console.log("Forcibly updating all edge colors to match their source nodes");
+  console.log("Forcibly updating all edge colors to match their target nodes");
   
   // Create a map of node IDs to colors for faster lookup
   let nodeColors = {};
@@ -8,14 +8,14 @@ function forceEdgeColors() {
     nodeColors[node.id] = node.color || '#aaa';
   });
   
-  // Update all edge colors based on their source nodes
+  // Update all edge colors based on their target nodes
   sigmaInstance.iterEdges(function(edge) {
-    const sourceColor = nodeColors[edge.source];
-    if (sourceColor) {
-      edge.color = sourceColor;
-      console.log(`Updated edge ${edge.id} color to ${sourceColor} from source ${edge.source}`);
+    const targetColor = nodeColors[edge.target];
+    if (targetColor) {
+      edge.color = targetColor;
+      console.log(`Updated edge ${edge.id} color to ${targetColor} from target ${edge.target}`);
     } else {
-      console.log(`Could not find color for edge ${edge.id}'s source node ${edge.source}`);
+      console.log(`Could not find color for edge ${edge.id}'s target node ${edge.target}`);
     }
   });
   
@@ -56,22 +56,22 @@ function initializeGraph(data) {
       });
     }
     
-    // First add all nodes, then add edges with colors matching their source nodes
+    // First add all nodes, then add edges with colors matching their target nodes
     for (let i = 0; i < graph.edges.length; i++) {
       let edge = graph.edges[i];
       
-      // Find source node to match its color
-      let sourceNodeColor = '#aaa';
+      // Find target node to match its color
+      let targetNodeColor = '#aaa';
       sigmaInstance.iterNodes(function(node) {
-        if (node.id == edge.source) {
-          sourceNodeColor = node.color;
-          console.log(`Setting edge ${edge.id} color to match source node ${node.id}: ${sourceNodeColor}`);
+        if (node.id == edge.target) {
+          targetNodeColor = node.color;
+          console.log(`Setting edge ${edge.id} color to match target node ${node.id}: ${targetNodeColor}`);
         }
       });
       
       sigmaInstance.addEdge(edge.id, edge.source, edge.target, {
         size: edge.size || 1,
-        color: sourceNodeColor
+        color: targetNodeColor
       });
     }
     
@@ -87,7 +87,7 @@ function initializeGraph(data) {
       nodeBorderColor: '#fff',
       defaultNodeBorderColor: '#fff',
       defaultNodeHoverColor: '#fff',
-      edgeColor: 'source',  // This tells sigma to use source node color for edges
+      edgeColor: 'target',  // This tells sigma to use target node color for edges
       defaultEdgeColor: '#f00'  // Set a default that's noticeable so we can see if our explicit coloring fails
     });
     
@@ -139,10 +139,10 @@ function applyNodeStyles() {
       }
     });
     
-    // Then update edge colors to match their source nodes
+    // Then update edge colors to match their target nodes
     sigmaInstance.iterEdges(function(edge) {
       sigmaInstance.iterNodes(function(node) {
-        if (node.id == edge.source) {
+        if (node.id == edge.target) {
           edge.color = node.color;
         }
       });
@@ -188,10 +188,10 @@ function colorNodesByAttribute(attribute) {
     n.color = valueColors[value];
   });
   
-  // Update edge colors to match their source nodes
+  // Update edge colors to match their target nodes
   sigmaInstance.iterEdges(function(edge) {
     sigmaInstance.iterNodes(function(node) {
-      if (node.id == edge.source) {
+      if (node.id == edge.target) {
         edge.originalColor = node.color;
         edge.color = node.color;
       }

index.html

@@ -63,11 +63,16 @@
         <h2>Search:</h2>
         <div class="search-wrapper">
           <input type="text" id="search-input" placeholder="Search by name">
-          <div id="search-button">→</div>
         </div>
         <div class="results"></div>
       </div>
     </div>
+    
+    <div class="col footer">
+      <div class="credits">
+        Web rendering powered by <a href="https://sigmajs.org/" target="_blank">SigmaJS</a>. Developed by Daily Paper Atlas Team.
+      </div>
+    </div>
   </div>
   
   <div id="attributepane">
@@ -90,9 +95,5 @@
     <div class="z" rel="out"></div>
     <div class="z" rel="center"></div>
   </div>
-  
-  <div id="developercontainer">
-    Web rendering powered by <a href="https://sigmajs.org/" target="_blank">SigmaJS</a>. Developed by Daily Paper Atlas Team.
-  </div>
 </body>
 </html> 

js/main.js

@@ -37,7 +37,7 @@ $(document).ready(function() {
   });
 
   // Set up search functionality
-  $('#search-input').keyup(function(e) {
+  $('#search-input').on('input', function(e) {
     let searchTerm = $(this).val();
     if (searchTerm.length > 2) {
       searchNodes(searchTerm);
@@ -46,10 +46,13 @@ $(document).ready(function() {
     }
   });
   
-  $('#search-button').click(function() {
-    let searchTerm = $('#search-input').val();
-    if (searchTerm.length > 2) {
-      searchNodes(searchTerm);
+  // Add functionality for Enter key in search
+  $('#search-input').keypress(function(e) {
+    if (e.which === 13) { // Enter key
+      let searchTerm = $(this).val();
+      if (searchTerm.length > 0) {
+        searchNodes(searchTerm);
+      }
     }
   });
 
@@ -183,8 +186,8 @@ function initializeGraph(data) {
     for (let i = 0; i < graph.edges.length; i++) {
       let edge = graph.edges[i];
       sigmaInstance.addEdge(edge.id, edge.source, edge.target, {
-        size: edge.size || 1,
-        color: edge.color || '#ccc'
+        size: edge.size || 1
+        // Don't set edge color here - let the drawing properties handle it
       });
     }
     
@@ -200,7 +203,7 @@ function initializeGraph(data) {
       nodeBorderColor: '#fff',
       defaultNodeBorderColor: '#fff',
       defaultNodeHoverColor: '#fff',
-      edgeColor: 'target',
+      edgeColor: 'target', // Use target node color for edges
       defaultEdgeColor: '#ccc'
     });
     
@@ -237,6 +240,7 @@ function initializeGraph(data) {
 function applyNodeStyles() {
   if (!sigmaInstance) return;
   try {
+    // First update node colors
     sigmaInstance.iterNodes(function(node) {
       if (node.type && config.nodeTypes && config.nodeTypes[node.type]) {
         node.color = config.nodeTypes[node.type].color;
@@ -246,6 +250,8 @@ function applyNodeStyles() {
         node.size = nodeTypes[node.type].size;
       }
     });
+    
+    // Ensure edges match the target node colors by redrawing
     sigmaInstance.refresh();
   } catch (e) {
     console.error("Error applying node styles:", e);
@@ -300,10 +306,20 @@ function bindEvents() {
   
   // When a node is clicked, display its details
   sigmaInstance.bind('upnodes', function(event) {
-    console.log("Node clicked:", event);
+    console.log("Node clicked event fired:", event);
     if (event.content && event.content.length > 0) {
       var nodeId = event.content[0];
-      nodeActive(nodeId);
+      console.log("Processing node click for node:", nodeId);
+      // Set a flag to indicate we're processing a node click
+      sigmaInstance.isMouseDown = true;
+      // Call nodeActive with a slight delay to ensure event handling is complete
+      setTimeout(function() {
+        nodeActive(nodeId);
+        // Reset the flag after processing
+        setTimeout(function() {
+          sigmaInstance.isMouseDown = false;
+        }, 10);
+      }, 10);
     }
   });
   
@@ -361,9 +377,16 @@ function bindEvents() {
   
   // When stage is clicked, close the attribute pane
   document.getElementById('sigma-canvas').addEventListener('click', function(evt) {
-    // Only process if we didn't click on a node (checked by looking at sigma's settings)
-    if (!sigmaInstance.isMouseDown && !sigmaInstance.detail) {
-      nodeNormal();
+    // If we're in detail view and didn't click on a node, return to full graph
+    if (sigmaInstance.detail && !sigmaInstance.isMouseDown) {
+      // Give priority to node click events by waiting
+      setTimeout(function() {
+        // Only proceed if isMouseDown is still false after the delay
+        if (!sigmaInstance.isMouseDown) {
+          console.log("Canvas clicked while in detail view - returning to full view");
+          nodeNormal();
+        }
+      }, 100);
     }
   });
 }
@@ -497,12 +520,11 @@ function nodeActive(nodeId) {
     
     // Apply different styles based on connection status
     if (isConnected) {
-      // Connected edge: make black and increase size
-      const highlightColor = config.highlighting?.highlightedEdgeColor ?? '#000000';
+      // For connected edges, keep their original color and just increase size
       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);
+      // Don't change the color property at all - preserve exactly as is
+      console.log("Edge connected to selected node:", e.id, "Source:", sourceId, "Target:", targetId, "Keeping original 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
@@ -519,13 +541,13 @@ function nodeActive(nodeId) {
   // 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 };
+    let colorCount = { original: 0, greyed: 0, other: 0 };
     
     sigmaInstance.iterEdges(function(e) {
-      if (e.color === '#000000') {
-        colorCount.black++;
-      } else if (e.color.includes('rgba')) {
-        colorCount.transparent++;
+      if (e.color === '#ededed') {
+        colorCount.greyed++;
+      } else if (e.attr && e.attr.originalColor && e.color === e.attr.originalColor) {
+        colorCount.original++;
       } else {
         colorCount.other++;
       }
@@ -682,6 +704,15 @@ function nodeNormal() {
   
   // Force redraw
   sigmaInstance.draw(2, 2, 2, 2);
+  
+  // Ensure edge colors match target nodes after restoring
+  try {
+    if (typeof forceEdgeColors === 'function') {
+      forceEdgeColors();
+    }
+  } catch (e) {
+    console.error("Error refreshing edge colors:", e);
+  }
 }
 
 // Helper function to convert colors to RGB
@@ -769,12 +800,6 @@ function updateLegend() {
     }
   }
   
-  // Add legend for edges
-  legendHTML += `<div class="legend-item">
-                   <div class="legend-line"></div>
-                   <div class="legend-label">Connections</div>
-                 </div>`;
-  
   // Set the HTML
   $('#colorLegend').html(legendHTML);
 }