@bfra.me/workspace-analyzer 0.1.0 → 0.2.0

package/src/visualizer/templates/graph-template.ts

@@ -0,0 +1,959 @@
+/**
+ * D3.js force-directed graph template for dependency visualization.
+ *
+ * This module generates the JavaScript code that initializes and renders
+ * the interactive dependency graph using D3.js force simulation.
+ * The generated code is embedded directly in the HTML output.
+ *
+ * Features:
+ * - Force-directed layout for automatic node positioning
+ * - Node rendering with severity-based colors and cycle highlighting
+ * - Edge rendering with directional arrows and type styling
+ * - Interactive tooltips with node/edge details
+ * - Zoom and pan controls
+ * - Node dragging
+ * - Client-side filtering (layer, severity, package)
+ */
+
+import type {VisualizationData} from '../types'
+
+/**
+ * Configuration for the graph visualization.
+ */
+export interface GraphConfig {
+  /** Width of the SVG container */
+  readonly width: number
+  /** Height of the SVG container */
+  readonly height: number
+  /** Node radius (base size) */
+  readonly nodeRadius: number
+  /** Link distance for force simulation */
+  readonly linkDistance: number
+  /** Charge strength for force simulation (negative = repulsion) */
+  readonly chargeStrength: number
+  /** Center force strength */
+  readonly centerStrength: number
+  /** Collision force radius multiplier */
+  readonly collisionRadiusMultiplier: number
+  /** Zoom scale extent [min, max] */
+  readonly zoomExtent: readonly [number, number]
+  /** Alpha decay rate for simulation */
+  readonly alphaDecay: number
+  /** Velocity decay rate for simulation */
+  readonly velocityDecay: number
+}
+
+/**
+ * Default graph configuration.
+ */
+export const DEFAULT_GRAPH_CONFIG: GraphConfig = {
+  width: 1200,
+  height: 800,
+  nodeRadius: 8,
+  linkDistance: 80,
+  chargeStrength: -300,
+  centerStrength: 0.05,
+  collisionRadiusMultiplier: 1.5,
+  zoomExtent: [0.1, 4],
+  alphaDecay: 0.0228,
+  velocityDecay: 0.4,
+}
+
+/**
+ * Generates the main graph initialization JavaScript code.
+ *
+ * This code is designed to be embedded in the HTML output and executed
+ * after the D3.js library is loaded. It reads visualization data from
+ * a global variable and renders the force-directed graph.
+ *
+ * @returns JavaScript code as a string
+ */
+export function generateGraphInitScript(): string {
+  return `
+/**
+ * Dependency Graph Visualization
+ * Generated by @bfra.me/workspace-analyzer
+ */
+(function() {
+  'use strict';
+
+  // Get visualization data from global scope
+  const visualizationData = window.VISUALIZATION_DATA;
+  if (!visualizationData) {
+    console.error('Visualization data not found');
+    return;
+  }
+
+  // Extract data
+  const { nodes, edges, cycles, statistics, layers, metadata } = visualizationData;
+
+  // Configuration
+  const config = {
+    nodeRadius: 8,
+    linkDistance: 80,
+    chargeStrength: -300,
+    centerStrength: 0.05,
+    collisionRadiusMultiplier: 1.5,
+    zoomExtent: [0.1, 4],
+    alphaDecay: 0.0228,
+    velocityDecay: 0.4
+  };
+
+  // State management
+  const state = {
+    filters: {
+      layers: new Set(layers.map(l => l.name)),
+      severities: new Set(['critical', 'error', 'warning', 'info']),
+      packages: new Set(),
+      showCyclesOnly: false,
+      showViolationsOnly: false,
+      searchQuery: ''
+    },
+    selectedNode: null,
+    highlightedNodes: new Set(),
+    transform: d3.zoomIdentity
+  };
+
+  // Color scales
+  const severityColors = {
+    critical: '#dc2626',
+    error: '#ea580c',
+    warning: '#ca8a04',
+    info: '#2563eb'
+  };
+
+  const layerColors = {
+    domain: '#8b5cf6',
+    application: '#06b6d4',
+    infrastructure: '#84cc16',
+    presentation: '#f97316',
+    shared: '#6b7280',
+    unknown: '#9ca3af'
+  };
+
+  // Get container dimensions
+  const container = document.querySelector('.graph-container');
+  const width = container.clientWidth;
+  const height = container.clientHeight;
+
+  // Create SVG
+  const svg = d3.select('.graph-canvas')
+    .attr('viewBox', [0, 0, width, height])
+    .attr('preserveAspectRatio', 'xMidYMid meet');
+
+  // Create groups for layering
+  const g = svg.append('g').attr('class', 'graph-layer');
+  const edgeGroup = g.append('g').attr('class', 'edges');
+  const nodeGroup = g.append('g').attr('class', 'nodes');
+
+  // Arrow marker definition
+  svg.append('defs').append('marker')
+    .attr('id', 'arrow')
+    .attr('viewBox', '0 -5 10 10')
+    .attr('refX', 20)
+    .attr('refY', 0)
+    .attr('markerWidth', 6)
+    .attr('markerHeight', 6)
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('d', 'M0,-5L10,0L0,5')
+    .attr('class', 'edge-arrow');
+
+  // Arrow marker for cycle edges
+  svg.select('defs').append('marker')
+    .attr('id', 'arrow-cycle')
+    .attr('viewBox', '0 -5 10 10')
+    .attr('refX', 20)
+    .attr('refY', 0)
+    .attr('markerWidth', 6)
+    .attr('markerHeight', 6)
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('d', 'M0,-5L10,0L0,5')
+    .attr('class', 'edge-arrow cycle');
+
+  // Create simulation data with mutable copies
+  const simNodes = nodes.map(n => ({...n}));
+  const simEdges = edges.map(e => ({
+    ...e,
+    source: e.source,
+    target: e.target
+  }));
+
+  // Create node ID lookup
+  const nodeById = new Map(simNodes.map(n => [n.id, n]));
+
+  // Force simulation
+  const simulation = d3.forceSimulation(simNodes)
+    .force('link', d3.forceLink(simEdges)
+      .id(d => d.id)
+      .distance(config.linkDistance))
+    .force('charge', d3.forceManyBody()
+      .strength(config.chargeStrength))
+    .force('center', d3.forceCenter(width / 2, height / 2)
+      .strength(config.centerStrength))
+    .force('collide', d3.forceCollide()
+      .radius(config.nodeRadius * config.collisionRadiusMultiplier))
+    .alphaDecay(config.alphaDecay)
+    .velocityDecay(config.velocityDecay);
+
+  // Zoom behavior
+  const zoom = d3.zoom()
+    .scaleExtent(config.zoomExtent)
+    .on('zoom', (event) => {
+      state.transform = event.transform;
+      g.attr('transform', 'translate(' + event.transform.x + ',' + event.transform.y + ') scale(' + event.transform.k + ')');
+      updateZoomDisplay();
+    });
+
+  svg.call(zoom);
+
+  // Draw edges
+  function drawEdges() {
+    const filteredEdges = getFilteredEdges();
+
+    const edge = edgeGroup.selectAll('.graph-edge')
+      .data(filteredEdges, d => d.source.id + '-' + d.target.id);
+
+    edge.exit().remove();
+
+    const edgeEnter = edge.enter()
+      .append('g')
+      .attr('class', 'graph-edge');
+
+    // Edge line
+    edgeEnter.append('line')
+      .attr('class', d => getEdgeClass(d))
+      .attr('marker-end', d => d.isInCycle ? 'url(#arrow-cycle)' : 'url(#arrow)')
+      .on('mouseenter', handleEdgeMouseEnter)
+      .on('mouseleave', handleEdgeMouseLeave)
+      .on('click', handleEdgeClick);
+
+    // Merge and update
+    const edgeMerged = edgeEnter.merge(edge);
+
+    edgeMerged.select('line')
+      .attr('class', d => getEdgeClass(d));
+
+    return edgeMerged;
+  }
+
+  // Draw nodes
+  function drawNodes() {
+    const filteredNodes = getFilteredNodes();
+
+    const node = nodeGroup.selectAll('.graph-node')
+      .data(filteredNodes, d => d.id);
+
+    node.exit().remove();
+
+    const nodeEnter = node.enter()
+      .append('g')
+      .attr('class', 'graph-node')
+      .call(drag(simulation));
+
+    // Node circle
+    nodeEnter.append('circle')
+      .attr('r', config.nodeRadius)
+      .attr('class', d => getNodeClass(d));
+
+    // Node label
+    nodeEnter.append('text')
+      .attr('class', 'node-label')
+      .attr('dy', config.nodeRadius + 12)
+      .text(d => getNodeLabel(d));
+
+    // Merge and update
+    const nodeMerged = nodeEnter.merge(node);
+
+    nodeMerged.select('circle')
+      .attr('class', d => getNodeClass(d));
+
+    // Event handlers
+    nodeMerged
+      .on('mouseenter', handleNodeMouseEnter)
+      .on('mouseleave', handleNodeMouseLeave)
+      .on('click', handleNodeClick);
+
+    return nodeMerged;
+  }
+
+  // Get CSS class for edge
+  function getEdgeClass(edge) {
+    const classes = ['edge-line'];
+    if (edge.isInCycle) classes.push('cycle');
+    classes.push('type-' + edge.type);
+    return classes.join(' ');
+  }
+
+  // Get CSS class for node
+  function getNodeClass(node) {
+    const classes = ['node-circle'];
+
+    // Cycle highlighting
+    if (node.isInCycle) classes.push('cycle');
+
+    // Severity-based color (takes precedence)
+    if (node.highestViolationSeverity) {
+      classes.push('severity-' + node.highestViolationSeverity);
+    } else if (node.layer) {
+      // Layer-based color
+      classes.push('layer-' + node.layer.toLowerCase());
+    } else {
+      classes.push('default');
+    }
+
+    return classes.join(' ');
+  }
+
+  // Get display label for node
+  function getNodeLabel(node) {
+    // Show just the filename
+    const parts = node.name.split('/');
+    return parts[parts.length - 1] || node.name;
+  }
+
+  // Filtering
+  function getFilteredNodes() {
+    return simNodes.filter(node => {
+      // Layer filter
+      if (node.layer && !state.filters.layers.has(node.layer)) {
+        return false;
+      }
+
+      // Severity filter - only filter out nodes with violations if their highest severity is not selected
+      if (node.highestViolationSeverity && !state.filters.severities.has(node.highestViolationSeverity)) {
+        return false;
+      }
+
+      // Cycles only
+      if (state.filters.showCyclesOnly && !node.isInCycle) {
+        return false;
+      }
+
+      // Violations only
+      if (state.filters.showViolationsOnly && node.violations.length === 0) {
+        return false;
+      }
+
+      // Search query
+      if (state.filters.searchQuery) {
+        const query = state.filters.searchQuery.toLowerCase();
+        if (!node.name.toLowerCase().includes(query) &&
+            !node.filePath.toLowerCase().includes(query) &&
+            !(node.packageName && node.packageName.toLowerCase().includes(query))) {
+          return false;
+        }
+      }
+
+      return true;
+    });
+  }
+
+  function getFilteredEdges() {
+    const filteredNodeIds = new Set(getFilteredNodes().map(n => n.id));
+    return simEdges.filter(edge => {
+      const sourceId = typeof edge.source === 'object' ? edge.source.id : edge.source;
+      const targetId = typeof edge.target === 'object' ? edge.target.id : edge.target;
+      return filteredNodeIds.has(sourceId) && filteredNodeIds.has(targetId);
+    });
+  }
+
+  // Drag behavior
+  function drag(simulation) {
+    function dragstarted(event) {
+      if (!event.active) simulation.alphaTarget(0.3).restart();
+      event.subject.fx = event.subject.x;
+      event.subject.fy = event.subject.y;
+    }
+
+    function dragged(event) {
+      event.subject.fx = event.x;
+      event.subject.fy = event.y;
+    }
+
+    function dragended(event) {
+      if (!event.active) simulation.alphaTarget(0);
+      event.subject.fx = null;
+      event.subject.fy = null;
+    }
+
+    return d3.drag()
+      .on('start', dragstarted)
+      .on('drag', dragged)
+      .on('end', dragended);
+  }
+
+  // Tooltip
+  const tooltip = d3.select('.tooltip');
+
+  function handleNodeMouseEnter(event, d) {
+    // Show tooltip
+    showTooltip(event, d);
+
+    // Highlight connected nodes
+    highlightConnectedNodes(d);
+  }
+
+  function handleNodeMouseLeave(event, d) {
+    hideTooltip();
+    clearHighlights();
+  }
+
+  function handleNodeClick(event, d) {
+    state.selectedNode = state.selectedNode === d ? null : d;
+    if (state.selectedNode) {
+      centerOnNode(d);
+    }
+  }
+
+  function handleEdgeMouseEnter(event, d) {
+    showEdgeTooltip(event, d);
+  }
+
+  function handleEdgeMouseLeave(event, d) {
+    hideTooltip();
+  }
+
+  function handleEdgeClick(event, d) {
+    event.stopPropagation();
+    showEdgeTooltip(event, d);
+  }
+
+  function showTooltip(event, node) {
+    const iconClass = node.highestViolationSeverity
+      ? 'severity-' + node.highestViolationSeverity
+      : node.isInCycle ? 'cycle' : 'default';
+
+    let violationsHtml = '';
+    if (node.violations.length > 0) {
+      violationsHtml = '<div class="tooltip-violations">' +
+        '<div class="tooltip-violations-title">Violations</div>' +
+        node.violations.slice(0, 5).map(v =>
+          '<div class="tooltip-violation">' +
+          '<div class="tooltip-violation-dot severity-dot ' + v.severity + '"></div>' +
+          '<div class="tooltip-violation-text">' + escapeHtml(v.message) + '</div>' +
+          '</div>'
+        ).join('') +
+        (node.violations.length > 5 ? '<div class="tooltip-violation"><div class="tooltip-violation-text">... and ' + (node.violations.length - 5) + ' more</div></div>' : '') +
+        '</div>';
+    }
+
+    const html = '<div class="tooltip-header">' +
+      '<div class="tooltip-icon ' + iconClass + '">' +
+      (node.isInCycle ? '↻' : node.violations.length > 0 ? '!' : '○') +
+      '</div>' +
+      '<div>' +
+      '<div class="tooltip-title">' + escapeHtml(node.name) + '</div>' +
+      '<div class="tooltip-subtitle">' + escapeHtml(node.filePath) + '</div>' +
+      '</div>' +
+      '</div>' +
+      '<div class="tooltip-content">' +
+      '<div class="tooltip-row">' +
+      '<span class="tooltip-label">Package</span>' +
+      '<span class="tooltip-value">' + escapeHtml(node.packageName || 'N/A') + '</span>' +
+      '</div>' +
+      '<div class="tooltip-row">' +
+      '<span class="tooltip-label">Layer</span>' +
+      '<span class="tooltip-value">' + escapeHtml(node.layer || 'Unknown') + '</span>' +
+      '</div>' +
+      '<div class="tooltip-divider"></div>' +
+      '<div class="tooltip-row">' +
+      '<span class="tooltip-label">Imports</span>' +
+      '<span class="tooltip-value">' + node.importsCount + '</span>' +
+      '</div>' +
+      '<div class="tooltip-row">' +
+      '<span class="tooltip-label">Imported by</span>' +
+      '<span class="tooltip-value">' + node.importedByCount + '</span>' +
+      '</div>' +
+      (node.isInCycle ? '<div class="tooltip-row"><span class="tooltip-label">In Cycle</span><span class="tooltip-value" style="color: #ef4444;">Yes</span></div>' : '') +
+      '</div>' +
+      violationsHtml;
+
+    tooltip.html(html);
+
+    // Position tooltip
+    const tooltipNode = tooltip.node();
+    const tooltipRect = tooltipNode.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    let left = event.clientX + 10;
+    let top = event.clientY + 10;
+
+    // Adjust if tooltip would overflow
+    if (left + tooltipRect.width > viewportWidth - 20) {
+      left = event.clientX - tooltipRect.width - 10;
+    }
+    if (top + tooltipRect.height > viewportHeight - 20) {
+      top = event.clientY - tooltipRect.height - 10;
+    }
+
+    tooltip
+      .style('left', left + 'px')
+      .style('top', top + 'px')
+      .classed('visible', true);
+  }
+
+  function showEdgeTooltip(event, edge) {
+    const sourceId = typeof edge.source === 'object' ? edge.source.id : edge.source;
+    const targetId = typeof edge.target === 'object' ? edge.target.id : edge.target;
+    const sourceNode = nodeById.get(sourceId);
+    const targetNode = nodeById.get(targetId);
+
+    if (!sourceNode || !targetNode) return;
+
+    const iconClass = edge.isInCycle ? 'cycle' : 'default';
+    const importType = edge.type === 'static' ? 'Static Import' :
+                       edge.type === 'dynamic' ? 'Dynamic Import' :
+                       edge.type === 'type-only' ? 'Type-Only Import' :
+                       'Require Import';
+
+    const html = '<div class=\"tooltip-header\">' +
+      '<div class=\"tooltip-icon ' + iconClass + '\">' +
+      (edge.isInCycle ? '↻' : '→') +
+      '</div>' +
+      '<div>' +
+      '<div class=\"tooltip-title\">Import Relationship</div>' +
+      '<div class=\"tooltip-subtitle\">' + escapeHtml(importType) + '</div>' +
+      '</div>' +
+      '</div>' +
+      '<div class=\"tooltip-content\">' +
+      '<div class=\"tooltip-row\">' +
+      '<span class=\"tooltip-label\">From</span>' +
+      '<span class=\"tooltip-value\">' + escapeHtml(sourceNode.name) + '</span>' +
+      '</div>' +
+      '<div class=\"tooltip-row\">' +
+      '<span class=\"tooltip-label\">To</span>' +
+      '<span class=\"tooltip-value\">' + escapeHtml(targetNode.name) + '</span>' +
+      '</div>' +
+      '<div class=\"tooltip-divider\"></div>' +
+      '<div class=\"tooltip-row\">' +
+      '<span class=\"tooltip-label\">Type</span>' +
+      '<span class=\"tooltip-value\">' + escapeHtml(edge.type) + '</span>' +
+      '</div>' +
+      (edge.isInCycle ? '<div class=\"tooltip-row\"><span class=\"tooltip-label\">Part of Cycle</span><span class=\"tooltip-value\" style=\"color: #ef4444;\">Yes</span></div>' : '') +
+      (edge.cycleId ? '<div class=\"tooltip-row\"><span class=\"tooltip-label\">Cycle ID</span><span class=\"tooltip-value\">' + escapeHtml(edge.cycleId) + '</span></div>' : '') +
+      '</div>';
+
+    tooltip.html(html);
+
+    // Position tooltip
+    const tooltipNode = tooltip.node();
+    const tooltipRect = tooltipNode.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    let left = event.clientX + 10;
+    let top = event.clientY + 10;
+
+    // Adjust if tooltip would overflow
+    if (left + tooltipRect.width > viewportWidth - 20) {
+      left = event.clientX - tooltipRect.width - 10;
+    }
+    if (top + tooltipRect.height > viewportHeight - 20) {
+      top = event.clientY - tooltipRect.height - 10;
+    }
+
+    tooltip
+      .style('left', left + 'px')
+      .style('top', top + 'px')
+      .classed('visible', true);
+  }
+
+  function hideTooltip() {
+    tooltip.classed('visible', false);
+  }
+
+  // Highlighting
+  function highlightConnectedNodes(node) {
+    const connectedIds = new Set([node.id]);
+
+    // Find connected nodes
+    simEdges.forEach(edge => {
+      const sourceId = typeof edge.source === 'object' ? edge.source.id : edge.source;
+      const targetId = typeof edge.target === 'object' ? edge.target.id : edge.target;
+      if (sourceId === node.id) connectedIds.add(targetId);
+      if (targetId === node.id) connectedIds.add(sourceId);
+    });
+
+    state.highlightedNodes = connectedIds;
+
+    // Update visual state
+    nodeGroup.selectAll('.graph-node')
+      .classed('dimmed', d => !connectedIds.has(d.id))
+      .classed('highlighted', d => connectedIds.has(d.id));
+
+    edgeGroup.selectAll('.graph-edge')
+      .classed('dimmed', d => {
+        const sourceId = typeof d.source === 'object' ? d.source.id : d.source;
+        const targetId = typeof d.target === 'object' ? d.target.id : d.target;
+        return sourceId !== node.id && targetId !== node.id;
+      })
+      .classed('highlighted', d => {
+        const sourceId = typeof d.source === 'object' ? d.source.id : d.source;
+        const targetId = typeof d.target === 'object' ? d.target.id : d.target;
+        return sourceId === node.id || targetId === node.id;
+      });
+  }
+
+  function clearHighlights() {
+    state.highlightedNodes.clear();
+    nodeGroup.selectAll('.graph-node')
+      .classed('dimmed', false)
+      .classed('highlighted', false);
+    edgeGroup.selectAll('.graph-edge')
+      .classed('dimmed', false)
+      .classed('highlighted', false);
+  }
+
+  // Center on node
+  function centerOnNode(node) {
+    const scale = state.transform.k;
+    const x = width / 2 - node.x * scale;
+    const y = height / 2 - node.y * scale;
+    svg.transition()
+      .duration(500)
+      .call(zoom.transform, d3.zoomIdentity.translate(x, y).scale(scale));
+  }
+
+  // Zoom controls
+  function zoomIn() {
+    svg.transition().call(zoom.scaleBy, 1.3);
+  }
+
+  function zoomOut() {
+    svg.transition().call(zoom.scaleBy, 0.7);
+  }
+
+  function zoomReset() {
+    svg.transition().call(zoom.transform, d3.zoomIdentity);
+  }
+
+  function updateZoomDisplay() {
+    const percentage = Math.round(state.transform.k * 100);
+    const zoomLevel = document.querySelector('.zoom-level');
+    if (zoomLevel) {
+      zoomLevel.textContent = percentage + '%';
+    }
+  }
+
+  // Filter controls
+  function setLayerFilter(layer, enabled) {
+    if (enabled) {
+      state.filters.layers.add(layer);
+    } else {
+      state.filters.layers.delete(layer);
+    }
+    updateGraph();
+  }
+
+  function setSeverityFilter(severity, enabled) {
+    if (enabled) {
+      state.filters.severities.add(severity);
+    } else {
+      state.filters.severities.delete(severity);
+    }
+    updateGraph();
+  }
+
+  function setViewMode(mode) {
+    state.filters.showCyclesOnly = mode === 'cycles';
+    state.filters.showViolationsOnly = mode === 'violations';
+    updateGraph();
+  }
+
+  function setSearchQuery(query) {
+    state.filters.searchQuery = query;
+    updateGraph();
+  }
+
+  // Update graph when filters change
+  function updateGraph() {
+    drawEdges();
+    drawNodes();
+    simulation.alpha(0.3).restart();
+  }
+
+  // Simulation tick handler
+  simulation.on('tick', () => {
+    edgeGroup.selectAll('.graph-edge line')
+      .attr('x1', d => d.source.x)
+      .attr('y1', d => d.source.y)
+      .attr('x2', d => d.target.x)
+      .attr('y2', d => d.target.y);
+
+    nodeGroup.selectAll('.graph-node')
+      .attr('transform', d => 'translate(' + d.x + ',' + d.y + ')');
+  });
+
+  // Helper functions
+  function escapeHtml(str) {
+    if (!str) return '';
+    return str
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+  }
+
+  // Initialize
+  drawEdges();
+  drawNodes();
+
+  // Update statistics display
+  function updateStatistics() {
+    const filtered = getFilteredNodes();
+    const filteredEdges = getFilteredEdges();
+
+    document.getElementById('stat-nodes').textContent = filtered.length;
+    document.getElementById('stat-edges').textContent = filteredEdges.length;
+    document.getElementById('stat-cycles').textContent = cycles.length;
+
+    // Update severity counts
+    const severityCounts = { critical: 0, error: 0, warning: 0, info: 0 };
+    filtered.forEach(n => {
+      n.violations.forEach(v => {
+        severityCounts[v.severity]++;
+      });
+    });
+
+    Object.keys(severityCounts).forEach(severity => {
+      const el = document.getElementById('stat-' + severity);
+      if (el) el.textContent = severityCounts[severity];
+    });
+  }
+
+  updateStatistics();
+
+  // Expose API for control panel
+  window.graphAPI = {
+    zoomIn,
+    zoomOut,
+    zoomReset,
+    setLayerFilter,
+    setSeverityFilter,
+    setViewMode,
+    setSearchQuery,
+    updateGraph,
+    centerOnNode: (nodeId) => {
+      const node = nodeById.get(nodeId);
+      if (node) centerOnNode(node);
+    }
+  };
+
+  // Hide loading overlay
+  const loadingOverlay = document.querySelector('.loading-overlay');
+  if (loadingOverlay) {
+    loadingOverlay.style.display = 'none';
+  }
+
+  console.log('Dependency graph visualization initialized with', nodes.length, 'nodes and', edges.length, 'edges');
+})();
+`
+}
+
+/**
+ * Generates the control panel JavaScript code for filter interactions.
+ *
+ * @returns JavaScript code for control panel functionality
+ */
+export function generateControlPanelScript(): string {
+  return `
+/**
+ * Control Panel Script
+ * Handles user interactions with filter controls
+ */
+(function() {
+  'use strict';
+
+  // Wait for graph API to be available
+  function waitForGraphAPI(callback) {
+    if (window.graphAPI) {
+      callback();
+    } else {
+      setTimeout(() => waitForGraphAPI(callback), 100);
+    }
+  }
+
+  waitForGraphAPI(() => {
+    const api = window.graphAPI;
+
+    // Zoom controls
+    document.getElementById('zoom-in')?.addEventListener('click', api.zoomIn);
+    document.getElementById('zoom-out')?.addEventListener('click', api.zoomOut);
+    document.getElementById('zoom-reset')?.addEventListener('click', api.zoomReset);
+
+    // View mode buttons
+    document.querySelectorAll('.view-mode-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        document.querySelectorAll('.view-mode-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        api.setViewMode(btn.dataset.mode);
+      });
+    });
+
+    // Search input
+    const searchInput = document.getElementById('search-input');
+    if (searchInput) {
+      let debounceTimer;
+      searchInput.addEventListener('input', (e) => {
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => {
+          api.setSearchQuery(e.target.value);
+        }, 300);
+      });
+    }
+
+    // Layer checkboxes
+    document.querySelectorAll('.layer-checkbox').forEach(checkbox => {
+      checkbox.addEventListener('change', (e) => {
+        api.setLayerFilter(e.target.dataset.layer, e.target.checked);
+      });
+    });
+
+    // Severity checkboxes
+    document.querySelectorAll('.severity-checkbox').forEach(checkbox => {
+      checkbox.addEventListener('change', (e) => {
+        api.setSeverityFilter(e.target.dataset.severity, e.target.checked);
+      });
+    });
+
+    // Keyboard shortcuts
+    document.addEventListener('keydown', (e) => {
+      // Only if not focused on input
+      if (document.activeElement.tagName === 'INPUT') return;
+
+      switch (e.key) {
+        case '+':
+        case '=':
+          api.zoomIn();
+          break;
+        case '-':
+        case '_':
+          api.zoomOut();
+          break;
+        case '0':
+          api.zoomReset();
+          break;
+        case 'Escape':
+          api.setSearchQuery('');
+          if (searchInput) searchInput.value = '';
+          break;
+      }
+    });
+
+    console.log('Control panel initialized');
+  });
+})();
+`
+}
+
+/**
+ * Generates the complete HTML template with all visualization scripts and styles.
+ *
+ * @param _data - The visualization data to embed (used by html-renderer.ts)
+ * @param title - The title for the HTML document
+ * @returns Complete HTML document as a string
+ */
+export function generateHtmlTemplate(_data: VisualizationData, title: string): string {
+  // This is a template function - actual implementation is in html-renderer.ts
+  // This provides the structure for the HTML output
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${title}</title>
+  <!-- Styles will be injected here -->
+</head>
+<body>
+  <div class="app-container">
+    <!-- Sidebar -->
+    <aside class="sidebar">
+      <!-- Statistics and filters -->
+    </aside>
+    <!-- Main content -->
+    <main class="main-content">
+      <!-- Control panel -->
+      <div class="control-panel">
+        <!-- Filter controls -->
+      </div>
+      <!-- Graph canvas -->
+      <div class="graph-container">
+        <svg class="graph-canvas"></svg>
+        <div class="loading-overlay">
+          <div class="loading-spinner"></div>
+        </div>
+      </div>
+    </main>
+  </div>
+  <!-- Tooltip -->
+  <div class="tooltip"></div>
+  <!-- D3.js and visualization scripts will be injected here -->
+</body>
+</html>`
+}
+
+/**
+ * Gets the node radius based on its characteristics.
+ *
+ * @param node - Node data
+ * @param node.importsCount - Number of imports from this node
+ * @param node.importedByCount - Number of nodes that import this one
+ * @param node.violations - Array of violations for this node
+ * @param baseRadius - Base radius size
+ * @returns Calculated radius for the node
+ */
+export function calculateNodeRadius(
+  node: {importsCount: number; importedByCount: number; violations: readonly unknown[]},
+  baseRadius: number,
+): number {
+  // Scale by connectivity (clamped)
+  const connectivity = Math.min(node.importsCount + node.importedByCount, 20)
+  const connectivityScale = 1 + connectivity * 0.05
+
+  // Boost for violations
+  const violationBoost = node.violations.length > 0 ? 1.2 : 1
+
+  return Math.round(baseRadius * connectivityScale * violationBoost)
+}
+
+/**
+ * Calculates the optimal link distance based on graph density.
+ *
+ * @param nodeCount - Number of nodes
+ * @param edgeCount - Number of edges
+ * @param baseDistance - Base link distance
+ * @returns Optimal link distance
+ */
+export function calculateLinkDistance(
+  nodeCount: number,
+  edgeCount: number,
+  baseDistance: number,
+): number {
+  // Denser graphs need more spacing
+  const density = edgeCount / Math.max(nodeCount, 1)
+  const densityFactor = Math.min(1 + density * 0.1, 2)
+
+  return Math.round(baseDistance * densityFactor)
+}
+
+/**
+ * Calculates charge strength based on graph size.
+ *
+ * @param nodeCount - Number of nodes
+ * @param baseStrength - Base charge strength (negative for repulsion)
+ * @returns Optimal charge strength
+ */
+export function calculateChargeStrength(nodeCount: number, baseStrength: number): number {
+  // Larger graphs need less repulsion to avoid spreading too far
+  if (nodeCount > 200) {
+    return baseStrength * 0.5
+  }
+  if (nodeCount > 100) {
+    return baseStrength * 0.7
+  }
+  return baseStrength
+}