blast_radius 0.1.0

data/lib/blast_radius/html/graph.js

@@ -0,0 +1,852 @@
+// BlastRadius - Interactive ER Diagram with Heatmap
+class BlastRadiusGraph {
+  constructor(data, options = {}) {
+    this.data = data;
+    this.options = {
+      width: options.width || 1200,
+      height: options.height || 800,
+      nodeWidth: 200,
+      nodeHeight: 70,
+      ...options
+    };
+
+    this.selectedModel = options.initialSelection || null;
+    this.currentLayout = 'force'; // force, tree, radial
+    this.nodes = [];
+    this.edges = [];
+    this.svg = null;
+    this.transform = { x: 0, y: 0, scale: 1 };
+    this.isDragging = false;
+    this.dragStart = { x: 0, y: 0 };
+
+    this.init();
+  }
+
+  init() {
+    this.svg = document.getElementById('graph-svg');
+    this.buildGraph();
+    this.render();
+    this.attachEvents();
+    this.setupZoomPan();
+
+    // Auto-select best model on initial load if none selected
+    if (!this.selectedModel) {
+      const bestModel = this.findBestRootModel();
+      if (bestModel) {
+        this.updateHeatmap(bestModel);
+      }
+    }
+  }
+
+  buildGraph() {
+    // Build nodes from all models
+    this.nodes = this.data.nodes.map((node, index) => ({
+      id: node.name,
+      name: node.name,
+      tableName: node.table_name,
+      ...node,
+      x: 0,
+      y: 0
+    }));
+
+    // Build edges from associations
+    this.edges = this.data.edges.map(edge => ({
+      source: edge.from,
+      target: edge.to,
+      label: edge.association,
+      dependent: edge.dependent,
+      associationType: edge.type,
+      ...edge
+    }));
+
+    // Apply layout
+    this.applyLayout(this.currentLayout);
+  }
+
+  applyLayout(layoutType) {
+    switch (layoutType) {
+      case 'tree':
+        this.applyTreeLayout();
+        break;
+      case 'force':
+      default:
+        this.applyForceLayout();
+        break;
+    }
+  }
+
+  applyForceLayout() {
+    const width = this.options.width;
+    const height = this.options.height;
+    const centerX = width / 2;
+    const centerY = height / 2;
+
+    // Strong force-directed layout with minimal overlap
+    const iterations = 400;
+    const repulsion = 500000;
+    const attraction = 0.0003;
+    const damping = 0.7;
+    const minDistance = 300; // Minimum distance between nodes
+
+    // Initialize positions in larger circle
+    this.nodes.forEach((node, i) => {
+      const angle = (i / this.nodes.length) * 2 * Math.PI;
+      const baseRadius = Math.min(width, height) * 0.4;
+      const scaledRadius = this.nodes.length > 15 ? baseRadius * 1.8 : baseRadius * 1.2;
+      node.x = centerX + scaledRadius * Math.cos(angle);
+      node.y = centerY + scaledRadius * Math.sin(angle);
+      node.vx = 0;
+      node.vy = 0;
+    });
+
+    // Simulation
+    for (let iter = 0; iter < iterations; iter++) {
+      // Repulsion between nodes with minimum distance enforcement
+      for (let i = 0; i < this.nodes.length; i++) {
+        for (let j = i + 1; j < this.nodes.length; j++) {
+          const dx = this.nodes[j].x - this.nodes[i].x;
+          const dy = this.nodes[j].y - this.nodes[i].y;
+          const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+
+          // Extra strong repulsion when too close
+          let force = repulsion / (dist * dist);
+          if (dist < minDistance) {
+            force *= 3;
+          }
+
+          this.nodes[i].vx -= (dx / dist) * force;
+          this.nodes[i].vy -= (dy / dist) * force;
+          this.nodes[j].vx += (dx / dist) * force;
+          this.nodes[j].vy += (dy / dist) * force;
+        }
+      }
+
+      // Weak attraction along edges only
+      this.edges.forEach(edge => {
+        const source = this.nodes.find(n => n.id === edge.source);
+        const target = this.nodes.find(n => n.id === edge.target);
+        if (!source || !target) return;
+
+        const dx = target.x - source.x;
+        const dy = target.y - source.y;
+        const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+        const force = dist * attraction;
+
+        source.vx += (dx / dist) * force;
+        source.vy += (dy / dist) * force;
+        target.vx -= (dx / dist) * force;
+        target.vy -= (dy / dist) * force;
+      });
+
+      // Update positions
+      this.nodes.forEach(node => {
+        node.x += node.vx * damping;
+        node.y += node.vy * damping;
+        node.vx *= damping;
+        node.vy *= damping;
+
+        // Keep in bounds with more space
+        const margin = 150;
+        node.x = Math.max(margin, Math.min(width - margin, node.x));
+        node.y = Math.max(margin, Math.min(height - margin, node.y));
+      });
+    }
+  }
+
+  applyTreeLayout() {
+    if (!this.selectedModel) {
+      this.applyForceLayout();
+      return;
+    }
+
+    const width = this.options.width;
+    const height = this.options.height;
+    const levelHeight = 250;
+    const rootX = width / 2;
+    const rootY = 100;
+
+    // Build tree from selected model
+    const visited = new Set();
+    const levels = {};
+
+    const buildTree = (modelName, depth = 0) => {
+      if (visited.has(modelName)) return;
+      visited.add(modelName);
+
+      if (!levels[depth]) levels[depth] = [];
+      levels[depth].push(modelName);
+
+      this.edges.forEach(edge => {
+        if (edge.source === modelName &&
+            ['destroy', 'delete_all', 'destroy_async'].includes(edge.dependent)) {
+          buildTree(edge.target, depth + 1);
+        }
+      });
+    };
+
+    buildTree(this.selectedModel);
+
+    // Position nodes by level with wider spacing
+    Object.keys(levels).forEach(depth => {
+      const nodesInLevel = levels[depth];
+      const levelWidth = width - 200;
+      const minSpacing = 280; // Minimum spacing between nodes
+      const calculatedSpacing = levelWidth / (nodesInLevel.length + 1);
+      const spacing = Math.max(minSpacing, calculatedSpacing);
+
+      nodesInLevel.forEach((modelName, index) => {
+        const node = this.nodes.find(n => n.id === modelName);
+        if (node) {
+          node.x = 100 + spacing * (index + 1);
+          node.y = rootY + depth * levelHeight;
+        }
+      });
+    });
+
+    // Position unvisited nodes at the bottom
+    this.nodes.forEach((node, index) => {
+      if (!visited.has(node.id)) {
+        node.x = 100 + (index % 8) * 200;
+        node.y = height - 100;
+      }
+    });
+  }
+
+  applyRadialLayout() {
+    if (!this.selectedModel) {
+      this.applyForceLayout();
+      return;
+    }
+
+    const width = this.options.width;
+    const height = this.options.height;
+    const centerX = width / 2;
+    const centerY = height / 2;
+
+    // Build levels from selected model
+    const visited = new Set();
+    const levels = {};
+
+    const buildLevels = (modelName, depth = 0) => {
+      if (visited.has(modelName)) return;
+      visited.add(modelName);
+
+      if (!levels[depth]) levels[depth] = [];
+      levels[depth].push(modelName);
+
+      this.edges.forEach(edge => {
+        if (edge.source === modelName &&
+            ['destroy', 'delete_all', 'destroy_async'].includes(edge.dependent)) {
+          buildLevels(edge.target, depth + 1);
+        }
+      });
+    };
+
+    buildLevels(this.selectedModel);
+
+    // Calculate radii for each level with clear separation
+    const numLevels = Object.keys(levels).length;
+    const maxRadius = Math.min(width, height) * 0.4;
+    const radiusStep = numLevels > 1 ? maxRadius / numLevels : maxRadius;
+
+    // Position nodes in concentric circles
+    Object.keys(levels).forEach(depth => {
+      const nodesInLevel = levels[depth];
+      const depthNum = parseInt(depth);
+      const radius = depthNum * radiusStep;
+
+      nodesInLevel.forEach((modelName, index) => {
+        const node = this.nodes.find(n => n.id === modelName);
+        if (node) {
+          if (depthNum === 0) {
+            // Center node
+            node.x = centerX;
+            node.y = centerY;
+          } else {
+            // Distribute evenly around the circle, starting from top
+            const angleOffset = -Math.PI / 2;
+            const angleStep = (2 * Math.PI) / nodesInLevel.length;
+            const angle = angleOffset + (index * angleStep);
+            node.x = centerX + radius * Math.cos(angle);
+            node.y = centerY + radius * Math.sin(angle);
+          }
+        }
+      });
+    });
+
+    // Position unvisited nodes in outermost ring
+    const unvisited = this.nodes.filter(n => !visited.has(n.id));
+    if (unvisited.length > 0) {
+      const outerRadius = maxRadius + radiusStep;
+      const angleOffset = -Math.PI / 2;
+      const angleStep = (2 * Math.PI) / unvisited.length;
+
+      unvisited.forEach((node, index) => {
+        const angle = angleOffset + (index * angleStep);
+        node.x = centerX + outerRadius * Math.cos(angle);
+        node.y = centerY + outerRadius * Math.sin(angle);
+      });
+    }
+  }
+
+  render() {
+    // Clear SVG
+    this.svg.innerHTML = '';
+    this.svg.setAttribute('width', this.options.width);
+    this.svg.setAttribute('height', this.options.height);
+
+    // Create defs for markers
+    const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+    defs.innerHTML = `
+      <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+        <polygon points="0 0, 10 3, 0 6" fill="var(--edge-normal)" />
+      </marker>
+      <marker id="arrowhead-active" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+        <polygon points="0 0, 10 3, 0 6" fill="var(--color-depth-2)" />
+      </marker>
+    `;
+    this.svg.appendChild(defs);
+
+    // Create container group for zoom/pan
+    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    g.setAttribute('id', 'graph-group');
+    g.setAttribute('transform', `translate(${this.transform.x}, ${this.transform.y}) scale(${this.transform.scale})`);
+    this.svg.appendChild(g);
+
+    // Render edges
+    this.edges.forEach(edge => {
+      const source = this.nodes.find(n => n.id === edge.source);
+      const target = this.nodes.find(n => n.id === edge.target);
+      if (!source || !target) return;
+
+      this.renderEdge(g, edge, source, target);
+    });
+
+    // Render nodes
+    this.nodes.forEach(node => {
+      this.renderNode(g, node);
+    });
+
+    // Update heatmap if model is selected
+    if (this.selectedModel) {
+      this.updateHeatmap(this.selectedModel);
+    }
+  }
+
+  renderNode(container, node) {
+    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    g.setAttribute('class', 'node');
+    g.setAttribute('data-model', node.id);
+    g.setAttribute('transform', `translate(${node.x}, ${node.y})`);
+
+    // Rectangle
+    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    rect.setAttribute('x', -this.options.nodeWidth / 2);
+    rect.setAttribute('y', -this.options.nodeHeight / 2);
+    rect.setAttribute('width', this.options.nodeWidth);
+    rect.setAttribute('height', this.options.nodeHeight);
+    g.appendChild(rect);
+
+    // Text
+    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    text.setAttribute('text-anchor', 'middle');
+    text.setAttribute('dy', '0.35em');
+    text.textContent = node.name;
+    g.appendChild(text);
+
+    container.appendChild(g);
+  }
+
+  renderEdge(container, edge, source, target) {
+    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+    line.setAttribute('class', `edge ${edge.dependent || ''}`);
+    line.setAttribute('data-edge', `${edge.source}-${edge.target}`);
+    line.setAttribute('data-label', edge.label);
+    line.setAttribute('data-dependent', edge.dependent);
+    line.setAttribute('x1', source.x);
+    line.setAttribute('y1', source.y);
+    line.setAttribute('x2', target.x);
+    line.setAttribute('y2', target.y);
+    line.setAttribute('marker-end', 'url(#arrowhead)');
+
+    container.appendChild(line);
+  }
+
+  setupZoomPan() {
+    let isPanning = false;
+    let startPoint = { x: 0, y: 0 };
+    let startTransform = { x: 0, y: 0 };
+
+    // Mouse wheel zoom
+    this.svg.addEventListener('wheel', (e) => {
+      e.preventDefault();
+
+      const delta = e.deltaY > 0 ? 0.9 : 1.1;
+      const newScale = Math.max(0.1, Math.min(5, this.transform.scale * delta));
+
+      // Zoom towards mouse position
+      const rect = this.svg.getBoundingClientRect();
+      const mouseX = e.clientX - rect.left;
+      const mouseY = e.clientY - rect.top;
+
+      this.transform.x = mouseX - (mouseX - this.transform.x) * (newScale / this.transform.scale);
+      this.transform.y = mouseY - (mouseY - this.transform.y) * (newScale / this.transform.scale);
+      this.transform.scale = newScale;
+
+      this.updateTransform();
+    });
+
+    // Pan on drag (background only)
+    this.svg.addEventListener('mousedown', (e) => {
+      if (e.target.closest('.node')) return;
+
+      isPanning = true;
+      startPoint = { x: e.clientX, y: e.clientY };
+      startTransform = { ...this.transform };
+      this.svg.style.cursor = 'grabbing';
+    });
+
+    document.addEventListener('mousemove', (e) => {
+      if (!isPanning) return;
+
+      const dx = e.clientX - startPoint.x;
+      const dy = e.clientY - startPoint.y;
+
+      this.transform.x = startTransform.x + dx;
+      this.transform.y = startTransform.y + dy;
+
+      this.updateTransform();
+    });
+
+    document.addEventListener('mouseup', () => {
+      if (isPanning) {
+        isPanning = false;
+        this.svg.style.cursor = 'default';
+      }
+    });
+  }
+
+  updateTransform() {
+    const g = document.getElementById('graph-group');
+    if (g) {
+      g.setAttribute('transform', `translate(${this.transform.x}, ${this.transform.y}) scale(${this.transform.scale})`);
+    }
+  }
+
+  fitToScreen() {
+    if (this.nodes.length === 0) return;
+
+    // Calculate bounding box
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+
+    this.nodes.forEach(node => {
+      minX = Math.min(minX, node.x - this.options.nodeWidth / 2);
+      minY = Math.min(minY, node.y - this.options.nodeHeight / 2);
+      maxX = Math.max(maxX, node.x + this.options.nodeWidth / 2);
+      maxY = Math.max(maxY, node.y + this.options.nodeHeight / 2);
+    });
+
+    const graphWidth = maxX - minX;
+    const graphHeight = maxY - minY;
+    const padding = 50;
+
+    // Calculate scale to fit
+    const scaleX = (this.options.width - padding * 2) / graphWidth;
+    const scaleY = (this.options.height - padding * 2) / graphHeight;
+    const scale = Math.min(scaleX, scaleY, 1);
+
+    // Calculate center offset
+    const centerX = (minX + maxX) / 2;
+    const centerY = (minY + maxY) / 2;
+
+    this.transform.scale = scale;
+    this.transform.x = this.options.width / 2 - centerX * scale;
+    this.transform.y = this.options.height / 2 - centerY * scale;
+
+    this.updateTransform();
+  }
+
+  switchLayout(layoutType) {
+    this.currentLayout = layoutType;
+
+    // Always auto-select best model for tree layout
+    let needsHeatmapUpdate = false;
+    if (layoutType === 'tree') {
+      const bestModel = this.findBestRootModel();
+      if (bestModel) {
+        this.selectedModel = bestModel;
+        needsHeatmapUpdate = true;
+      }
+    }
+
+    this.applyLayout(layoutType);
+    this.render();
+
+    // Update heatmap after render (so classes are applied to new elements)
+    if (needsHeatmapUpdate && this.selectedModel) {
+      this.updateHeatmap(this.selectedModel);
+    }
+
+    // Update active button
+    document.querySelectorAll('.layout-btn').forEach(btn => {
+      btn.classList.remove('active');
+    });
+    const activeBtn = document.querySelector(`[data-layout="${layoutType}"]`);
+    if (activeBtn) activeBtn.classList.add('active');
+  }
+
+  findBestRootModel() {
+    // Find model with most outgoing destructive edges
+    const edgeCounts = {};
+
+    this.nodes.forEach(node => {
+      edgeCounts[node.id] = 0;
+    });
+
+    this.edges.forEach(edge => {
+      if (['destroy', 'delete_all', 'destroy_async'].includes(edge.dependent)) {
+        edgeCounts[edge.source] = (edgeCounts[edge.source] || 0) + 1;
+      }
+    });
+
+    let maxCount = 0;
+    let bestModel = null;
+
+    Object.entries(edgeCounts).forEach(([model, count]) => {
+      if (count > maxCount) {
+        maxCount = count;
+        bestModel = model;
+      }
+    });
+
+    return bestModel;
+  }
+
+  updateHeatmap(modelName) {
+    this.selectedModel = modelName;
+
+    // Calculate cascade paths from selected model
+    const paths = this.calculateCascadePaths(modelName);
+
+    // Update node classes
+    this.nodes.forEach(node => {
+      const nodeEl = this.svg.querySelector(`.node[data-model="${node.id}"]`);
+      if (!nodeEl) return;
+
+      // Remove all depth classes
+      nodeEl.classList.remove('selected', 'depth-1', 'depth-2', 'depth-3', 'depth-4', 'unaffected');
+
+      if (node.id === modelName) {
+        nodeEl.classList.add('selected');
+      } else if (paths[node.id]) {
+        const depth = paths[node.id].depth;
+        if (depth <= 4) {
+          nodeEl.classList.add(`depth-${depth}`);
+        } else {
+          nodeEl.classList.add('depth-4');
+        }
+      } else {
+        nodeEl.classList.add('unaffected');
+      }
+    });
+
+    // Update edge classes
+    this.edges.forEach(edge => {
+      const edgeEl = this.svg.querySelector(`.edge[data-edge="${edge.source}-${edge.target}"]`);
+      if (!edgeEl) return;
+
+      edgeEl.classList.remove('active');
+
+      // Highlight edges in the cascade path
+      if (paths[edge.target] && (edge.source === modelName || paths[edge.source])) {
+        edgeEl.classList.add('active');
+        edgeEl.setAttribute('marker-end', 'url(#arrowhead-active)');
+      } else {
+        edgeEl.setAttribute('marker-end', 'url(#arrowhead)');
+      }
+    });
+
+    // Update sidebar
+    this.updateSidebar(modelName, paths);
+  }
+
+  calculateCascadePaths(startModel) {
+    const paths = {};
+    const queue = [{model: startModel, depth: 0}];
+    const visited = new Set();
+
+    while (queue.length > 0) {
+      const {model, depth} = queue.shift();
+
+      if (visited.has(model)) continue;
+      visited.add(model);
+
+      if (model !== startModel) {
+        paths[model] = {depth};
+      }
+
+      // Find outgoing destructive edges
+      this.edges.forEach(edge => {
+        if (edge.source === model &&
+            ['destroy', 'delete_all', 'destroy_async'].includes(edge.dependent)) {
+          queue.push({model: edge.target, depth: depth + 1});
+        }
+      });
+    }
+
+    return paths;
+  }
+
+  updateSidebar(modelName, paths) {
+    const selectedInfo = document.getElementById('selected-info');
+    const impactList = document.getElementById('impact-list');
+
+    if (!selectedInfo || !impactList) return;
+
+    if (!modelName) {
+      selectedInfo.innerHTML = `
+        <h2>ℹ️ Info</h2>
+        <p style="color: var(--text-secondary); font-size: 0.875rem;">
+          Click on a model to see its cascade deletion impact.
+        </p>
+      `;
+      impactList.innerHTML = '';
+      return;
+    }
+
+    // Update selected model name
+    const maxDepth = Math.max(0, ...Object.values(paths).map(p => p.depth));
+    selectedInfo.innerHTML = `
+      <h2>🔴 ${modelName}</h2>
+      <div class="stat-item">
+        <span class="stat-label">Affected Models:</span>
+        <span class="stat-value">${Object.keys(paths).length}</span>
+      </div>
+      <div class="stat-item">
+        <span class="stat-label">Max Depth:</span>
+        <span class="stat-value">${maxDepth || 'None'}</span>
+      </div>
+    `;
+
+    // Update impact list
+    const sortedPaths = Object.entries(paths).sort((a, b) => a[1].depth - b[1].depth);
+    impactList.innerHTML = sortedPaths.map(([model, info]) => `
+      <li data-model="${model}" class="impact-item">
+        <span class="dependent-badge badge-depth-${Math.min(info.depth, 4)}">
+          Depth ${info.depth}
+        </span>
+        ${model}
+      </li>
+    `).join('');
+
+    // Add click handlers to impact list items
+    impactList.querySelectorAll('.impact-item').forEach(item => {
+      item.addEventListener('click', () => {
+        const model = item.getAttribute('data-model');
+        this.updateHeatmap(model);
+      });
+    });
+  }
+
+  showTooltip(element, x, y) {
+    const tooltip = document.getElementById('tooltip');
+    if (!tooltip) return;
+
+    let content = '';
+
+    if (element.classList.contains('node')) {
+      const modelName = element.getAttribute('data-model');
+      const node = this.nodes.find(n => n.id === modelName);
+      if (node) {
+        content = `
+          <strong>${node.name}</strong><br>
+          Table: ${node.tableName || node.name.toLowerCase() + 's'}
+        `;
+      }
+    } else if (element.classList.contains('edge')) {
+      const label = element.getAttribute('data-label');
+      const dependent = element.getAttribute('data-dependent');
+      content = `
+        Association: <strong>${label}</strong><br>
+        Dependent: <strong>${dependent}</strong>
+      `;
+    }
+
+    if (content) {
+      tooltip.innerHTML = content;
+      tooltip.style.left = x + 15 + 'px';
+      tooltip.style.top = y + 15 + 'px';
+      tooltip.classList.add('visible');
+    }
+  }
+
+  hideTooltip() {
+    const tooltip = document.getElementById('tooltip');
+    if (tooltip) {
+      tooltip.classList.remove('visible');
+    }
+  }
+
+  attachEvents() {
+    // Node click
+    this.svg.addEventListener('click', (e) => {
+      const node = e.target.closest('.node');
+      if (node) {
+        const modelName = node.getAttribute('data-model');
+        this.updateHeatmap(modelName);
+      }
+    });
+
+    // Tooltip on hover
+    this.svg.addEventListener('mousemove', (e) => {
+      const node = e.target.closest('.node');
+      const edge = e.target.closest('.edge');
+
+      if (node || edge) {
+        this.showTooltip(node || edge, e.clientX, e.clientY);
+      } else {
+        this.hideTooltip();
+      }
+    });
+
+    this.svg.addEventListener('mouseleave', () => {
+      this.hideTooltip();
+    });
+
+    // Reset button
+    const resetBtn = document.getElementById('reset-btn');
+    if (resetBtn) {
+      resetBtn.addEventListener('click', () => {
+        this.selectedModel = null;
+        this.render();
+        this.updateSidebar(null, {});
+      });
+    }
+
+    // Fit button
+    const fitBtn = document.getElementById('fit-btn');
+    if (fitBtn) {
+      fitBtn.addEventListener('click', () => {
+        this.fitToScreen();
+      });
+    }
+
+    // Layout buttons
+    document.querySelectorAll('.layout-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const layout = btn.getAttribute('data-layout');
+        this.switchLayout(layout);
+      });
+    });
+
+    // Export dropdown
+    const exportBtn = document.getElementById('export-btn');
+    const exportMenu = document.getElementById('export-menu');
+    if (exportBtn && exportMenu) {
+      exportBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        exportMenu.classList.toggle('show');
+      });
+
+      document.addEventListener('click', () => {
+        exportMenu.classList.remove('show');
+      });
+
+      const exportSvgBtn = document.getElementById('export-svg');
+      if (exportSvgBtn) {
+        exportSvgBtn.addEventListener('click', () => {
+          this.exportAsSVG();
+          exportMenu.classList.remove('show');
+        });
+      }
+
+      const exportPngBtn = document.getElementById('export-png');
+      if (exportPngBtn) {
+        exportPngBtn.addEventListener('click', () => {
+          this.exportAsPNG();
+          exportMenu.classList.remove('show');
+        });
+      }
+    }
+
+    // Keyboard shortcuts
+    document.addEventListener('keydown', (e) => {
+      switch(e.key) {
+        case 'Escape':
+          this.selectedModel = null;
+          this.render();
+          this.updateSidebar(null, {});
+          break;
+        case 'f':
+        case 'F':
+          this.fitToScreen();
+          break;
+        case '+':
+        case '=':
+          this.transform.scale = Math.min(5, this.transform.scale * 1.2);
+          this.updateTransform();
+          break;
+        case '-':
+        case '_':
+          this.transform.scale = Math.max(0.1, this.transform.scale / 1.2);
+          this.updateTransform();
+          break;
+      }
+    });
+  }
+
+  // Export functionality
+  exportAsSVG() {
+    const svgData = this.svg.outerHTML;
+    const blob = new Blob([svgData], { type: 'image/svg+xml' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = 'blast_radius.svg';
+    link.click();
+    URL.revokeObjectURL(url);
+  }
+
+  exportAsPNG() {
+    const svgData = new XMLSerializer().serializeToString(this.svg);
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    const img = new Image();
+
+    canvas.width = this.options.width;
+    canvas.height = this.options.height;
+
+    img.onload = () => {
+      ctx.fillStyle = 'white';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, 0, 0);
+
+      canvas.toBlob((blob) => {
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = 'blast_radius.png';
+        link.click();
+        URL.revokeObjectURL(url);
+      });
+    };
+
+    img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)));
+  }
+}
+
+// Initialize when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+  if (typeof graphData !== 'undefined') {
+    const graph = new BlastRadiusGraph(graphData, {
+      width: window.innerWidth - 320,
+      height: window.innerHeight
+    });
+
+    // Expose graph instance for console access
+    window.blastRadiusGraph = graph;
+
+    // Fit to screen on load
+    setTimeout(() => graph.fitToScreen(), 100);
+  }
+});