@optave/codegraph 3.2.0 → 3.3.0

package/dist/presentation/viewer.js

@@ -0,0 +1,621 @@
+/**
+ * Interactive HTML viewer — presentation layer.
+ *
+ * Exports two concerns:
+ * - renderPlotHTML(): pure data → HTML transform (no I/O) that receives
+ *   prepared graph data and config, returns a self-contained HTML string
+ *   with vis-network. All graph data must be pre-loaded via prepareGraphData().
+ * - loadPlotConfig(): reads .plotDotCfg / .plotDotCfg.json files from disk
+ *   and merges them with defaults. This performs filesystem I/O.
+ *
+ * Color constants are defined in ./colors.js and re-exported here for
+ * backward compatibility.
+ */
+import fs from 'node:fs';
+import path from 'node:path';
+import { COMMUNITY_COLORS, DEFAULT_NODE_COLORS, DEFAULT_ROLE_COLORS } from './colors.js';
+// Re-export color constants so existing consumers are unaffected
+export { COMMUNITY_COLORS, DEFAULT_NODE_COLORS, DEFAULT_ROLE_COLORS };
+export const DEFAULT_CONFIG = {
+    layout: { algorithm: 'hierarchical', direction: 'LR' },
+    physics: { enabled: true, nodeDistance: 150 },
+    nodeColors: DEFAULT_NODE_COLORS,
+    roleColors: DEFAULT_ROLE_COLORS,
+    colorBy: 'kind',
+    edgeStyle: { color: '#666', smooth: true },
+    filter: { kinds: null, roles: null, files: null },
+    title: 'Codegraph',
+    seedStrategy: 'all',
+    seedCount: 30,
+    clusterBy: 'none',
+    sizeBy: 'uniform',
+    overlays: { complexity: false, risk: false },
+    riskThresholds: { highBlastRadius: 10, lowMI: 40 },
+};
+// ─── Config Loading ──────────────────────────────────────────────────
+/**
+ * Load .plotDotCfg or .plotDotCfg.json from given directory.
+ * Returns merged config with defaults.
+ */
+export function loadPlotConfig(dir) {
+    for (const name of ['.plotDotCfg', '.plotDotCfg.json']) {
+        const p = path.join(dir, name);
+        if (fs.existsSync(p)) {
+            try {
+                const raw = JSON.parse(fs.readFileSync(p, 'utf-8'));
+                return {
+                    ...DEFAULT_CONFIG,
+                    ...raw,
+                    layout: { ...DEFAULT_CONFIG.layout, ...(raw.layout || {}) },
+                    physics: { ...DEFAULT_CONFIG.physics, ...(raw.physics || {}) },
+                    nodeColors: {
+                        ...DEFAULT_CONFIG.nodeColors,
+                        ...(raw.nodeColors || {}),
+                    },
+                    roleColors: {
+                        ...DEFAULT_CONFIG.roleColors,
+                        ...(raw.roleColors || {}),
+                    },
+                    edgeStyle: {
+                        ...DEFAULT_CONFIG.edgeStyle,
+                        ...(raw.edgeStyle || {}),
+                    },
+                    filter: { ...DEFAULT_CONFIG.filter, ...(raw.filter || {}) },
+                    overlays: {
+                        ...DEFAULT_CONFIG.overlays,
+                        ...(raw.overlays || {}),
+                    },
+                    riskThresholds: {
+                        ...DEFAULT_CONFIG.riskThresholds,
+                        ...(raw.riskThresholds || {}),
+                    },
+                };
+            }
+            catch {
+                // Invalid JSON — use defaults
+            }
+        }
+    }
+    return { ...DEFAULT_CONFIG };
+}
+// ─── Internal Helpers ────────────────────────────────────────────────
+export function escapeHtml(s) {
+    return String(s)
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+export function buildLayoutOptions(cfg) {
+    const opts = {
+        nodes: {
+            shape: 'box',
+            font: { face: 'monospace', size: 12 },
+        },
+        edges: {
+            arrows: 'to',
+            color: cfg.edgeStyle.color || '#666',
+            smooth: cfg.edgeStyle.smooth !== false,
+        },
+        physics: {
+            enabled: cfg.physics.enabled !== false,
+            barnesHut: {
+                gravitationalConstant: -3000,
+                springLength: cfg.physics.nodeDistance || 150,
+            },
+        },
+        interaction: {
+            tooltipDelay: 200,
+            hover: true,
+        },
+    };
+    if (cfg.layout.algorithm === 'hierarchical') {
+        opts.layout = {
+            hierarchical: {
+                enabled: true,
+                direction: cfg.layout.direction || 'LR',
+                sortMethod: 'directed',
+                nodeSpacing: cfg.physics.nodeDistance || 150,
+            },
+        };
+    }
+    return opts;
+}
+// ─── HTML Renderer ───────────────────────────────────────────────────
+/**
+ * Render a self-contained interactive HTML file with vis-network.
+ *
+ * Pure transform: prepared graph data + config → HTML string.
+ *
+ * @param {{ nodes: Array, edges: Array, seedNodeIds: Array }} data - From prepareGraphData()
+ * @param {object} cfg - Viewer config (from loadPlotConfig or DEFAULT_CONFIG)
+ * @returns {string} Complete HTML document
+ */
+export function renderPlotHTML(data, cfg) {
+    const layoutOpts = buildLayoutOptions(cfg);
+    const title = cfg.title || 'Codegraph';
+    // Resolve effective colorBy (overlays.complexity overrides)
+    const effectiveColorBy = cfg.overlays?.complexity && cfg.colorBy === 'kind' ? 'complexity' : cfg.colorBy || 'kind';
+    const effectiveRisk = cfg.overlays?.risk || false;
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>${escapeHtml(title)}</title>
+<script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: monospace; background: #fafafa; }
+  #controls { padding: 8px 12px; background: #fff; border-bottom: 1px solid #ddd; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
+  #controls label { font-size: 13px; }
+  #controls select, #controls input[type="text"] { font-size: 13px; padding: 2px 6px; }
+  #main { display: flex; height: calc(100vh - 44px); }
+  #graph { flex: 1; }
+  #detail { width: 320px; border-left: 1px solid #ddd; background: #fff; overflow-y: auto; display: none; padding: 12px; font-size: 13px; }
+  #detail h3 { margin-bottom: 6px; word-break: break-all; }
+  #detailClose { float: right; cursor: pointer; font-size: 18px; color: #999; line-height: 1; }
+  #detailClose:hover { color: #333; }
+  .detail-meta { margin-bottom: 4px; }
+  .detail-file { color: #666; margin-bottom: 10px; font-size: 12px; }
+  .detail-section { margin-bottom: 10px; }
+  .detail-section table { width: 100%; border-collapse: collapse; }
+  .detail-section td { padding: 2px 8px 2px 0; }
+  .detail-section ul { list-style: none; padding: 0; }
+  .detail-section li { padding: 2px 0; }
+  .detail-section a { color: #1976D2; text-decoration: none; cursor: pointer; }
+  .detail-section a:hover { text-decoration: underline; }
+  .badge { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 11px; margin-right: 4px; }
+  .kind-badge { background: #E3F2FD; color: #1565C0; }
+  .role-badge { background: #E8F5E9; color: #2E7D32; }
+  .risk-badge { background: #FFEBEE; color: #C62828; }
+  #legend { position: absolute; bottom: 12px; right: 12px; background: rgba(255,255,255,0.95); border: 1px solid #ddd; border-radius: 4px; padding: 8px 12px; font-size: 12px; max-height: 300px; overflow-y: auto; }
+  #legend div { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
+  #legend span.swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
+</style>
+</head>
+<body>
+<div id="controls">
+  <label>Layout:
+    <select id="layoutSelect">
+      <option value="hierarchical"${cfg.layout.algorithm === 'hierarchical' ? ' selected' : ''}>Hierarchical</option>
+      <option value="force"${cfg.layout.algorithm === 'force' ? ' selected' : ''}>Force</option>
+      <option value="radial"${cfg.layout.algorithm === 'radial' ? ' selected' : ''}>Radial</option>
+    </select>
+  </label>
+  <label>Physics: <input type="checkbox" id="physicsToggle"${cfg.physics.enabled ? ' checked' : ''}></label>
+  <label>Search: <input type="text" id="searchInput" placeholder="Filter nodes..."></label>
+  <label>Color by:
+    <select id="colorBySelect">
+      <option value="kind"${effectiveColorBy === 'kind' ? ' selected' : ''}>Kind</option>
+      <option value="role"${effectiveColorBy === 'role' ? ' selected' : ''}>Role</option>
+      <option value="community"${effectiveColorBy === 'community' ? ' selected' : ''}>Community</option>
+      <option value="complexity"${effectiveColorBy === 'complexity' ? ' selected' : ''}>Complexity</option>
+    </select>
+  </label>
+  <label>Size by:
+    <select id="sizeBySelect">
+      <option value="uniform"${(cfg.sizeBy || 'uniform') === 'uniform' ? ' selected' : ''}>Uniform</option>
+      <option value="fan-in"${cfg.sizeBy === 'fan-in' ? ' selected' : ''}>Fan-in</option>
+      <option value="fan-out"${cfg.sizeBy === 'fan-out' ? ' selected' : ''}>Fan-out</option>
+      <option value="complexity"${cfg.sizeBy === 'complexity' ? ' selected' : ''}>Complexity</option>
+    </select>
+  </label>
+  <label>Cluster by:
+    <select id="clusterBySelect">
+      <option value="none"${(cfg.clusterBy || 'none') === 'none' ? ' selected' : ''}>None</option>
+      <option value="community"${cfg.clusterBy === 'community' ? ' selected' : ''}>Community</option>
+      <option value="directory"${cfg.clusterBy === 'directory' ? ' selected' : ''}>Directory</option>
+    </select>
+  </label>
+  <label>Risk: <input type="checkbox" id="riskToggle"${effectiveRisk ? ' checked' : ''}></label>
+</div>
+<div id="main">
+  <div id="graph"></div>
+  <div id="detail">
+    <span id="detailClose">&times;</span>
+    <div id="detailContent"></div>
+  </div>
+</div>
+<div id="legend"></div>
+<script>
+/* ── Data ──────────────────────────────────────────────────────────── */
+var allNodes = ${JSON.stringify(data.nodes)};
+var allEdges = ${JSON.stringify(data.edges)};
+var seedNodeIds = ${JSON.stringify(data.seedNodeIds)};
+var nodeColorMap = ${JSON.stringify(cfg.nodeColors || DEFAULT_NODE_COLORS)};
+var roleColorMap = ${JSON.stringify(cfg.roleColors || DEFAULT_ROLE_COLORS)};
+var communityColors = ${JSON.stringify(COMMUNITY_COLORS)};
+
+/* ── Lookups ───────────────────────────────────────────────────────── */
+var nodeById = {};
+allNodes.forEach(function(n) { nodeById[n.id] = n; });
+var adjIndex = {};
+allNodes.forEach(function(n) { adjIndex[n.id] = { callers: [], callees: [] }; });
+allEdges.forEach(function(e) {
+  if (adjIndex[e.from]) adjIndex[e.from].callees.push(e.to);
+  if (adjIndex[e.to]) adjIndex[e.to].callers.push(e.from);
+});
+
+/* ── State ─────────────────────────────────────────────────────────── */
+var seedSet = new Set(seedNodeIds);
+var visibleNodeIds = new Set(seedNodeIds);
+var expandedNodes = new Set();
+var drillDownActive = ${JSON.stringify((cfg.seedStrategy || 'all') !== 'all')};
+
+/* ── Helpers ───────────────────────────────────────────────────────── */
+function escHtml(s) {
+  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}
+
+/* ── vis-network init ──────────────────────────────────────────────── */
+function getVisibleNodes() {
+  return allNodes.filter(function(n) { return visibleNodeIds.has(n.id); });
+}
+function getVisibleEdges() {
+  return allEdges.filter(function(e) { return visibleNodeIds.has(e.from) && visibleNodeIds.has(e.to); });
+}
+
+var nodes = new vis.DataSet(getVisibleNodes());
+var edges = new vis.DataSet(getVisibleEdges());
+var container = document.getElementById('graph');
+var options = ${JSON.stringify(layoutOpts, null, 2)};
+var network = new vis.Network(container, { nodes: nodes, edges: edges }, options);
+
+/* ── Appearance ────────────────────────────────────────────────────── */
+function refreshNodeAppearance() {
+  var colorBy = document.getElementById('colorBySelect').value;
+  var sizeBy = document.getElementById('sizeBySelect').value;
+  var riskEnabled = document.getElementById('riskToggle').checked;
+  var updates = [];
+
+  allNodes.forEach(function(n) {
+    if (!visibleNodeIds.has(n.id)) return;
+    var update = { id: n.id };
+
+    // Background color
+    var bg;
+    if (colorBy === 'role') {
+      bg = n.role ? (roleColorMap[n.role] || nodeColorMap[n.kind] || '#ccc') : (nodeColorMap[n.kind] || '#ccc');
+    } else if (colorBy === 'community') {
+      bg = n.community !== null ? communityColors[n.community % communityColors.length] : '#ccc';
+    } else {
+      bg = nodeColorMap[n.kind] || '#ccc';
+    }
+
+    var borderColor = '#888';
+    var borderWidth = 1;
+    var borderDashes = false;
+    var shadow = false;
+
+    // Complexity border (when colorBy is 'complexity')
+    if (colorBy === 'complexity' && n.maintainabilityIndex !== null) {
+      var mi = n.maintainabilityIndex;
+      if (mi >= 80) { borderColor = '#4CAF50'; borderWidth = 2; }
+      else if (mi >= 65) { borderColor = '#FFC107'; borderWidth = 3; }
+      else if (mi >= 40) { borderColor = '#FF9800'; borderWidth = 3; }
+      else { borderColor = '#F44336'; borderWidth = 4; }
+    }
+
+    // Risk overlay (overrides border when active)
+    if (riskEnabled && n.risk && n.risk.length > 0) {
+      if (n.risk.indexOf('dead-code') >= 0) {
+        borderColor = '#F44336'; borderDashes = [5, 5]; borderWidth = 3;
+      }
+      if (n.risk.indexOf('high-blast-radius') >= 0) {
+        borderColor = '#FF9800'; shadow = true; borderWidth = 3;
+      }
+      if (n.risk.indexOf('low-mi') >= 0) {
+        borderColor = '#FF9800'; borderWidth = 3;
+      }
+    }
+
+    update.color = { background: bg, border: borderColor };
+    update.borderWidth = borderWidth;
+    update.borderDashes = borderDashes;
+    update.shadow = shadow;
+
+    // Size
+    if (sizeBy === 'fan-in') {
+      update.size = 15 + Math.min(n.fanIn || 0, 30) * 2;
+      update.shape = 'dot';
+    } else if (sizeBy === 'fan-out') {
+      update.size = 15 + Math.min(n.fanOut || 0, 30) * 2;
+      update.shape = 'dot';
+    } else if (sizeBy === 'complexity') {
+      update.size = 15 + Math.min(n.cyclomatic || 0, 20) * 3;
+      update.shape = 'dot';
+    } else {
+      update.shape = 'box';
+    }
+
+    updates.push(update);
+  });
+
+  nodes.update(updates);
+}
+
+/* ── Clustering ────────────────────────────────────────────────────── */
+function applyClusterBy(mode) {
+  // Open all existing clusters first
+  var ids = nodes.getIds();
+  for (var i = 0; i < ids.length; i++) {
+    if (network.isCluster(ids[i])) {
+      try { network.openCluster(ids[i]); } catch(e) { /* ignore */ }
+    }
+  }
+
+  if (mode === 'none') return;
+
+  if (mode === 'community') {
+    var communities = {};
+    allNodes.forEach(function(n) {
+      if (n.community !== null && visibleNodeIds.has(n.id)) {
+        if (!communities[n.community]) communities[n.community] = [];
+        communities[n.community].push(n.id);
+      }
+    });
+    Object.keys(communities).forEach(function(cid) {
+      if (communities[cid].length < 2) return;
+      var cidNum = parseInt(cid, 10);
+      network.cluster({
+        joinCondition: function(opts) { return opts.community === cidNum; },
+        clusterNodeProperties: {
+          label: 'Community ' + cid,
+          shape: 'diamond',
+          color: communityColors[cidNum % communityColors.length]
+        }
+      });
+    });
+  } else if (mode === 'directory') {
+    var dirs = {};
+    allNodes.forEach(function(n) {
+      if (visibleNodeIds.has(n.id)) {
+        var d = n.directory || '(root)';
+        if (!dirs[d]) dirs[d] = [];
+        dirs[d].push(n.id);
+      }
+    });
+    Object.keys(dirs).forEach(function(dir) {
+      if (dirs[dir].length < 2) return;
+      network.cluster({
+        joinCondition: function(opts) { return (opts.directory || '(root)') === dir; },
+        clusterNodeProperties: {
+          label: dir,
+          shape: 'diamond',
+          color: '#B0BEC5'
+        }
+      });
+    });
+  }
+}
+
+/* ── Detail Panel ──────────────────────────────────────────────────── */
+function showDetail(nodeId) {
+  var n = nodeById[nodeId];
+  if (!n) { hideDetail(); return; }
+  var adj = adjIndex[nodeId] || { callers: [], callees: [] };
+
+  var h = '<h3>' + escHtml(n.label) + '</h3>';
+  h += '<div class="detail-meta">';
+  h += '<span class="badge kind-badge">' + escHtml(n.kind) + '</span>';
+  if (n.role) h += '<span class="badge role-badge">' + escHtml(n.role) + '</span>';
+  h += '</div>';
+  h += '<div class="detail-file">' + escHtml(n.file) + ':' + n.line + '</div>';
+
+  h += '<div class="detail-section"><strong>Metrics</strong><table>';
+  h += '<tr><td>Fan-in</td><td>' + n.fanIn + '</td></tr>';
+  h += '<tr><td>Fan-out</td><td>' + n.fanOut + '</td></tr>';
+  if (n.cognitive !== null) h += '<tr><td>Cognitive</td><td>' + n.cognitive + '</td></tr>';
+  if (n.cyclomatic !== null) h += '<tr><td>Cyclomatic</td><td>' + n.cyclomatic + '</td></tr>';
+  if (n.maintainabilityIndex !== null) h += '<tr><td>MI</td><td>' + n.maintainabilityIndex.toFixed(1) + '</td></tr>';
+  h += '</table></div>';
+
+  if (n.risk && n.risk.length > 0) {
+    h += '<div class="detail-section"><strong>Risk</strong><br>';
+    n.risk.forEach(function(r) { h += '<span class="badge risk-badge">' + escHtml(r) + '</span>'; });
+    h += '</div>';
+  }
+
+  if (adj.callers.length > 0) {
+    h += '<div class="detail-section"><strong>Callers (' + adj.callers.length + ')</strong><ul>';
+    adj.callers.forEach(function(cid) {
+      var c = nodeById[cid];
+      if (c) h += '<li><a onclick="focusNode(' + cid + ')">' + escHtml(c.label) + '</a></li>';
+    });
+    h += '</ul></div>';
+  }
+
+  if (adj.callees.length > 0) {
+    h += '<div class="detail-section"><strong>Callees (' + adj.callees.length + ')</strong><ul>';
+    adj.callees.forEach(function(cid) {
+      var c = nodeById[cid];
+      if (c) h += '<li><a onclick="focusNode(' + cid + ')">' + escHtml(c.label) + '</a></li>';
+    });
+    h += '</ul></div>';
+  }
+
+  document.getElementById('detailContent').innerHTML = h;
+  document.getElementById('detail').style.display = 'block';
+}
+
+function hideDetail() {
+  document.getElementById('detail').style.display = 'none';
+}
+
+function focusNode(nodeId) {
+  if (drillDownActive && !visibleNodeIds.has(nodeId)) expandNode(nodeId);
+  network.focus(nodeId, { scale: 1.2, animation: true });
+  network.selectNodes([nodeId]);
+  showDetail(nodeId);
+}
+
+/* ── Drill-down ────────────────────────────────────────────────────── */
+function expandNode(nodeId) {
+  if (!drillDownActive) return;
+  expandedNodes.add(nodeId);
+  var adj = adjIndex[nodeId] || { callers: [], callees: [] };
+  var newNodeData = [];
+  adj.callers.concat(adj.callees).forEach(function(nid) {
+    if (!visibleNodeIds.has(nid)) {
+      visibleNodeIds.add(nid);
+      var n = nodeById[nid];
+      if (n) newNodeData.push(n);
+    }
+  });
+  if (newNodeData.length > 0) {
+    nodes.add(newNodeData);
+    var newEdges = allEdges.filter(function(e) {
+      return visibleNodeIds.has(e.from) && visibleNodeIds.has(e.to) && !edges.get(e.id);
+    });
+    if (newEdges.length > 0) edges.add(newEdges);
+    refreshNodeAppearance();
+  }
+}
+
+function collapseNode(nodeId) {
+  if (!drillDownActive) return;
+  expandedNodes.delete(nodeId);
+  recalculateVisibility();
+}
+
+function recalculateVisibility() {
+  var newVisible = new Set(seedSet);
+  expandedNodes.forEach(function(nid) {
+    newVisible.add(nid);
+    var adj = adjIndex[nid] || { callers: [], callees: [] };
+    adj.callers.concat(adj.callees).forEach(function(id) { newVisible.add(id); });
+  });
+
+  var toRemove = [];
+  visibleNodeIds.forEach(function(id) { if (!newVisible.has(id)) toRemove.push(id); });
+  if (toRemove.length > 0) nodes.remove(toRemove);
+
+  var toAdd = [];
+  newVisible.forEach(function(id) {
+    if (!visibleNodeIds.has(id) && nodeById[id]) toAdd.push(nodeById[id]);
+  });
+  if (toAdd.length > 0) nodes.add(toAdd);
+
+  visibleNodeIds = newVisible;
+  edges.clear();
+  edges.add(allEdges.filter(function(e) {
+    return visibleNodeIds.has(e.from) && visibleNodeIds.has(e.to);
+  }));
+  refreshNodeAppearance();
+}
+
+/* ── Legend ─────────────────────────────────────────────────────────── */
+function updateLegend(colorBy) {
+  var legend = document.getElementById('legend');
+  legend.innerHTML = '';
+  var items = {};
+
+  if (colorBy === 'kind') {
+    allNodes.forEach(function(n) { if (n.kind && visibleNodeIds.has(n.id)) items[n.kind] = nodeColorMap[n.kind] || '#ccc'; });
+  } else if (colorBy === 'role') {
+    allNodes.forEach(function(n) {
+      if (visibleNodeIds.has(n.id)) {
+        var key = n.role || n.kind;
+        items[key] = n.role ? (roleColorMap[n.role] || '#ccc') : (nodeColorMap[n.kind] || '#ccc');
+      }
+    });
+  } else if (colorBy === 'community') {
+    allNodes.forEach(function(n) {
+      if (n.community !== null && visibleNodeIds.has(n.id)) {
+        items['Community ' + n.community] = communityColors[n.community % communityColors.length];
+      }
+    });
+  } else if (colorBy === 'complexity') {
+    items['MI >= 80'] = '#4CAF50';
+    items['MI 65-80'] = '#FFC107';
+    items['MI 40-65'] = '#FF9800';
+    items['MI < 40'] = '#F44336';
+  }
+
+  Object.keys(items).sort().forEach(function(k) {
+    var d = document.createElement('div');
+    d.innerHTML = '<span class="swatch" style="background:' + items[k] + '"></span>' + escHtml(k);
+    legend.appendChild(d);
+  });
+}
+
+/* ── Network Events ────────────────────────────────────────────────── */
+network.on('click', function(params) {
+  if (params.nodes.length === 1) {
+    var nodeId = params.nodes[0];
+    if (network.isCluster(nodeId)) {
+      network.openCluster(nodeId);
+      return;
+    }
+    if (drillDownActive && !expandedNodes.has(nodeId)) expandNode(nodeId);
+    showDetail(nodeId);
+  } else {
+    hideDetail();
+  }
+});
+
+network.on('doubleClick', function(params) {
+  if (params.nodes.length === 1) {
+    var nodeId = params.nodes[0];
+    if (network.isCluster(nodeId)) return;
+    if (drillDownActive && expandedNodes.has(nodeId)) collapseNode(nodeId);
+  }
+});
+
+/* ── Control Events ────────────────────────────────────────────────── */
+document.getElementById('layoutSelect').addEventListener('change', function(e) {
+  var val = e.target.value;
+  if (val === 'hierarchical') {
+    network.setOptions({ layout: { hierarchical: { enabled: true, direction: ${JSON.stringify(cfg.layout.direction || 'LR')} } }, physics: { enabled: document.getElementById('physicsToggle').checked } });
+  } else if (val === 'radial') {
+    network.setOptions({ layout: { hierarchical: false, improvedLayout: true }, physics: { enabled: true, solver: 'repulsion', repulsion: { nodeDistance: 200 } } });
+  } else {
+    network.setOptions({ layout: { hierarchical: false }, physics: { enabled: true } });
+  }
+});
+
+document.getElementById('physicsToggle').addEventListener('change', function(e) {
+  network.setOptions({ physics: { enabled: e.target.checked } });
+});
+
+document.getElementById('searchInput').addEventListener('input', function(e) {
+  var q = e.target.value.toLowerCase();
+  if (!q) {
+    nodes.update(getVisibleNodes().map(function(n) { return { id: n.id, hidden: false }; }));
+    return;
+  }
+  getVisibleNodes().forEach(function(n) {
+    var match = n.label.toLowerCase().includes(q) || (n.file && n.file.toLowerCase().includes(q));
+    nodes.update({ id: n.id, hidden: !match });
+  });
+});
+
+document.getElementById('colorBySelect').addEventListener('change', function() {
+  refreshNodeAppearance();
+  updateLegend(document.getElementById('colorBySelect').value);
+});
+
+document.getElementById('sizeBySelect').addEventListener('change', function() {
+  refreshNodeAppearance();
+});
+
+document.getElementById('clusterBySelect').addEventListener('change', function(e) {
+  applyClusterBy(e.target.value);
+});
+
+document.getElementById('riskToggle').addEventListener('change', function() {
+  refreshNodeAppearance();
+});
+
+document.getElementById('detailClose').addEventListener('click', hideDetail);
+
+/* ── Init ──────────────────────────────────────────────────────────── */
+refreshNodeAppearance();
+updateLegend(${JSON.stringify(effectiveColorBy)});
+${(cfg.clusterBy || 'none') !== 'none' ? `applyClusterBy(${JSON.stringify(cfg.clusterBy)});` : ''}
+</script>
+</body>
+</html>`;
+}
+//# sourceMappingURL=viewer.js.map

package/dist/presentation/viewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewer.js","sourceRoot":"","sources":["../../src/presentation/viewer.js"],"names":[],"mappings":"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"}

package/dist/shared/constants.d.ts

@@ -0,0 +1,11 @@
+export function shouldIgnore(dirName: any): any;
+export function isSupportedFile(filePath: any): boolean;
+/**
+ * Normalize a file path to always use forward slashes.
+ * Ensures cross-platform consistency in the SQLite database.
+ */
+export function normalizePath(filePath: any): any;
+export const IGNORE_DIRS: Set<string>;
+export { SUPPORTED_EXTENSIONS as EXTENSIONS };
+import { SUPPORTED_EXTENSIONS } from '../domain/parser.js';
+//# sourceMappingURL=constants.d.ts.map

package/dist/shared/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/shared/constants.js"],"names":[],"mappings":"AAwBA,gDAEC;AAED,wDAEC;AAED;;;GAGG;AACH,kDAEC;AAnCD,sCAiBG;;qCAnBkC,qBAAqB"}