save

Author: TheSmallPixel

docs/enhanced_index.html

@@ -1,5 +1,13 @@
 // Enhanced C# Code Graph Visualizer
+// -----------------------------------------------------
+// This script creates an interactive visualization of C# code relationships
+// using D3.js for graph rendering and manipulation.
+
 document.addEventListener('DOMContentLoaded', function() {
+  // ============================================================
+  // GLOBAL VARIABLES AND INITIALIZATION
+  // ============================================================
+  
   // Global variables
   let graph;
   let svg;
@@ -22,6 +30,10 @@ document.addEventListener('DOMContentLoaded', function() {
   // Track current visualization state
   let unusedElements = new Set();
 
+  // ============================================================
+  // INITIALIZATION FUNCTIONS
+  // ============================================================
+  
   // Load and initialize visualization
   async function initVisualization() {
     try {
@@ -275,11 +287,7 @@ document.addEventListener('DOMContentLoaded', function() {
       .data(graph.links)
       .enter()
       .append('line')
-      .attr('class', 'link')
-      .attr('data-id', (d, i) => `link-${i}`)
-      .attr('data-source', d => typeof d.source === 'object' ? d.source.id : d.source)
-      .attr('data-target', d => typeof d.target === 'object' ? d.target.id : d.target)
-      .attr('data-type', d => d.type || 'default')
+      .attr('class', d => `link ${d.type}`)
       .style('stroke', d => getLinkColor(d))
       .style('stroke-width', 1.5);
 
@@ -316,8 +324,10 @@ document.addEventListener('DOMContentLoaded', function() {
       .style('font-size', '10px')
       .style('fill', 'black')
       .style('stroke', 'white')
-      .style('stroke-width', '0.5px')
+      .style('stroke-width', '0.7px')
       .style('paint-order', 'stroke')
+      .style('font-weight', 'bold')
+      .style('text-shadow', 'none') // Explicitly remove any text shadow
       .style('pointer-events', 'none');
 
     console.log("Graph drawing complete");
@@ -326,6 +336,10 @@ document.addEventListener('DOMContentLoaded', function() {
     setTimeout(applyFilters, 100);
   }
 
+  // ============================================================
+  // VISUAL STYLING AND APPEARANCE
+  // ============================================================
+  
   // Get node color based on its type and status
   function getNodeColor(d) {
     // If node is not used, return unused color
@@ -361,15 +375,17 @@ document.addEventListener('DOMContentLoaded', function() {
   function getLinkColor(d) {
     switch (d.type) {
       case 'containment':
-        return getComputedStyle(document.documentElement).getPropertyValue('--link-color');
-      case 'call':
-        return '#555';
-      case 'reference':
-        return 'blue';
-      case 'external':
-        return getComputedStyle(document.documentElement).getPropertyValue('--external-color');
+        return '#666';
+      case 'inheritance':
+        return '#3498db';
+      case 'implementation':
+        return '#2ecc71';
+      case 'usage':
+        return '#e74c3c';
+      case 'calls':
+        return '#f39c12';
       default:
-        return '#ccc';
+        return '#aaa';
     }
   }
 
@@ -1435,3 +1451,70 @@ function resetAllFilters() {
 
   console.log("All filters have been reset");
 }
+
+  // Get link color based on its type
+  function getLinkColor(d) {
+    switch (d.type) {
+      case 'containment':
+        return '#666';
+      case 'inheritance':
+        return '#3498db';
+      case 'implementation':
+        return '#2ecc71';
+      case 'usage':
+        return '#e74c3c';
+      case 'calls':
+        return '#f39c12';
+      default:
+        return '#aaa';
+    }
+  }
+  
+  // ============================================================
+  // GRAPH MANIPULATION AND LAYOUT
+  // ============================================================
+
+  // Zoom behavior functions
+  function zoomed(event) {
+    gContainer.attr('transform', event.transform);
+  }
+
+  // Zoom to a specific node
+  function zoomToNode(node) {
+    // Get the current transform
+    const currentTransform = d3.zoomTransform(svg.node());
+    
+    // Create a new transform centered on the node
+    const targetX = width / 2 - node.x * currentTransform.k;
+    const targetY = height / 2 - node.y * currentTransform.k;
+    
+    // Smoothly transition to the new transform
+    svg.transition()
+      .duration(750)
+      .call(
+        zoomBehavior.transform,
+        d3.zoomIdentity
+          .translate(targetX, targetY)
+          .scale(currentTransform.k)
+      );
+  }
+
+  // Fixed unterminated template literal syntax error
+  function zoomToNode(node) {
+    // Get the current transform
+    const currentTransform = d3.zoomTransform(svg.node());
+    
+    // Create a new transform centered on the node
+    const targetX = width / 2 - node.x * currentTransform.k;
+    const targetY = height / 2 - node.y * currentTransform.k;
+    
+    // Smoothly transition to the new transform
+    svg.transition()
+      .duration(750)
+      .call(
+        zoomBehavior.transform,
+        d3.zoomIdentity
+          .translate(targetX, targetY)
+          .scale(currentTransform.k)
+      );
+  }