+
+
+
+
+
+
+
+
+
diff --git a/codegraph/web/static/ui/helpers.js b/codegraph/web/static/ui/helpers.js
new file mode 100644
index 0000000..5f5c035
--- /dev/null
+++ b/codegraph/web/static/ui/helpers.js
@@ -0,0 +1,101 @@
+/* codegraph dashboard - shared UI helpers */
+'use strict';
+
+// Global namespaces used by all view scripts.
+window.CGUI = window.CGUI || {};
+window.CGViews = window.CGViews || {};
+
+// ---- esc ----
+CGUI.esc = function esc(s) {
+ return String(s ?? '').replace(/[&<>"']/g, c =>
+ ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
+};
+
+// ---- shortQn ----
+CGUI.shortQn = function shortQn(qn) {
+ const parts = String(qn).split('.');
+ return parts.length > 3 ? '…' + parts.slice(-3).join('.') : qn;
+};
+
+/* HTML version of shortQn that dims the parent path and highlights the leaf.
+ Returns sanitized markup. */
+CGUI.formatQn = function formatQn(qn, opts) {
+ const esc = CGUI.esc;
+ const max = (opts && opts.maxParts) || 3;
+ const parts = String(qn ?? '').split('.');
+ if (!parts.length) return '';
+ const leaf = parts[parts.length - 1];
+ const headParts = parts.slice(0, -1);
+ const truncated = headParts.length > max - 1;
+ const visibleHead = truncated ? headParts.slice(-(max - 1)) : headParts;
+ const prefix = truncated ? '…' : '';
+ const head = visibleHead.length
+ ? `${prefix}${esc(visibleHead.join('.'))}. `
+ : (truncated ? `${prefix} ` : '');
+ return `${head}${esc(leaf)} `;
+};
+
+// ---- Tooltip ----
+CGUI.showTip = function showTip(html, x, y) {
+ const tt = document.getElementById('tooltip');
+ tt.innerHTML = html;
+ const r = tt.getBoundingClientRect();
+ let lx = x + 14, ly = y + 14;
+ if (lx + r.width > innerWidth - 8) lx = x - r.width - 14;
+ if (ly + r.height > innerHeight - 8) ly = y - r.height - 14;
+ tt.style.left = lx + 'px';
+ tt.style.top = ly + 'px';
+ tt.style.opacity = '1';
+};
+CGUI.hideTip = function hideTip() {
+ document.getElementById('tooltip').style.opacity = '0';
+};
+
+// ---- Toast ----
+CGUI.toast = function toast(msg, kind) {
+ const host = document.getElementById('toast-host');
+ const el = document.createElement('div');
+ el.className = 'toast ' + (kind || '');
+ el.textContent = msg;
+ host.appendChild(el);
+ setTimeout(() => { el.style.opacity = '0'; el.style.transition = 'opacity 0.3s';
+ setTimeout(() => el.remove(), 350); }, 2400);
+};
+
+// ---- Mermaid theme helpers ----
+CGUI.mermaidThemeVars = function mermaidThemeVars() {
+ const light = document.documentElement.classList.contains('theme-light');
+ return light
+ ? { fontFamily: 'Inter, system-ui, sans-serif', fontSize: '14px',
+ background: 'transparent',
+ primaryColor: '#eef2ff', primaryTextColor: '#0f172a',
+ primaryBorderColor: '#a5b4fc', lineColor: '#6366f1',
+ secondaryColor: '#f5f3ff', tertiaryColor: '#ffffff',
+ clusterBkg: 'rgba(238,242,255,0.7)', clusterBorder: '#a5b4fc',
+ nodeBorder: '#a5b4fc', mainBkg: '#eef2ff',
+ edgeLabelBackground: '#ffffff', titleColor: '#1e293b' }
+ : { fontFamily: 'Inter, system-ui, sans-serif', fontSize: '14px',
+ background: 'transparent',
+ primaryColor: '#1d2942', primaryTextColor: '#e6ecf5',
+ primaryBorderColor: '#3b4a6a', lineColor: '#5b6b8c',
+ secondaryColor: '#161f33', tertiaryColor: '#0f1626',
+ clusterBkg: 'rgba(15,22,38,0.6)', clusterBorder: '#3b4a6a',
+ nodeBorder: '#3b4a6a', mainBkg: '#1d2942',
+ edgeLabelBackground: '#0a0f1c', titleColor: '#c4cfe2' };
+};
+
+// ---- HLD symbol kind helpers (shared by hld.js) ----
+CGUI.kindIcon = function kindIcon(k) {
+ return k === 'CLASS' ? 'box' : k === 'METHOD' ? 'corner-down-right' : 'function-square';
+};
+CGUI.kindColor = function kindColor(k) {
+ return k === 'CLASS' ? 'var(--accent-violet)'
+ : k === 'METHOD' ? 'var(--accent-cyan)'
+ : 'var(--accent-emerald)';
+};
+
+// ---- pyvisHref (shared by explorers + files views) ----
+CGUI.pyvisHref = function pyvisHref(path) {
+ const t = document.documentElement.classList.contains('theme-light') ? 'light' : 'dark';
+ return path + '?theme=' + t;
+};
diff --git a/codegraph/web/static/views/flows.js b/codegraph/web/static/views/flows.js
new file mode 100644
index 0000000..1d80c12
--- /dev/null
+++ b/codegraph/web/static/views/flows.js
@@ -0,0 +1,68 @@
+/* codegraph dashboard - Flows view */
+'use strict';
+
+CGViews.flows = function renderFlows(host) {
+ const esc = CGUI.esc;
+ const formatQn = CGUI.formatQn;
+ const flows = window.state.data.flows;
+ if (!flows.length) {
+ host.innerHTML = `No call chains found.
`;
+ return;
+ }
+ if (window.state.flowSel >= flows.length) window.state.flowSel = 0;
+ host.innerHTML = `
+
+
+
+
Call flow inspector. Pick an entry point on the left to see its real downstream call tree (BFS depth 4).
+ Highlighted node = entry; arrows = CALLS edges from the actual graph.
+
+
+
${formatQn(f.qualname, {maxParts: 3})}
+ · ${esc(f.file)}
`;
+ el.onclick = () => _selectFlow(i);
+ list.appendChild(el);
+ });
+ document.getElementById('flow-search').addEventListener('input', e => {
+ const q = e.target.value.toLowerCase();
+ [...list.children].forEach((el, i) => {
+ el.style.display = JSON.stringify(flows[i]).toLowerCase().includes(q) ? '' : 'none';
+ });
+ });
+ _selectFlow(window.state.flowSel);
+};
+
+function _selectFlow(i) {
+ const esc = CGUI.esc;
+ const formatQn = CGUI.formatQn;
+ window.state.flowSel = i;
+ const flow = window.state.data.flows[i];
+ if (!flow) return;
+ document.querySelectorAll('.flow-item').forEach((el, j) =>
+ el.classList.toggle('active', j === i));
+ document.getElementById('flow-title').innerHTML = formatQn(flow.qualname, {maxParts: 4});
+ document.getElementById('flow-title').classList.add('qn-mono');
+ document.getElementById('flow-meta').textContent = flow.reason;
+ const canvas = document.getElementById('flow-canvas');
+ canvas.innerHTML = `${esc(flow.mermaid)} `;
+ mermaid.run({ nodes: canvas.querySelectorAll('.mermaid') });
+}
diff --git a/codegraph/web/static/views/hld.js b/codegraph/web/static/views/hld.js
new file mode 100644
index 0000000..dc3d8bf
--- /dev/null
+++ b/codegraph/web/static/views/hld.js
@@ -0,0 +1,334 @@
+/* codegraph dashboard - HLD view */
+'use strict';
+
+// Module-local nav state (persists across re-renders within session).
+const _hldNav = { layer: null, module: null, symbol: null };
+
+CGViews.hld = function renderHld(host) {
+ const esc = CGUI.esc;
+ const hld = window.state.data.hld;
+ if (!hld) { host.innerHTML = 'No HLD payload.
'; return; }
+ const m = hld.metrics;
+ const card = (n, l) => `
+ `;
+
+ host.innerHTML = `
+
+
+
+
How to read this. Top = system context. Below = the layered architecture (heaviest modules per layer; +N more means more exist — see Navigator). The Navigator drills Layer → Module → Symbol ; selecting a symbol draws a live focus graph of who calls it and what it calls.
+
+
+ ${card(m.layers, 'Layers')}
+ ${card(m.components, 'Modules')}
+ ${card(m.cross_layer_edges, 'Cross-layer edges')}
+ ${card(m.total_cross_layer_calls, 'Cross-layer calls')}
+
+
+
System context
+ C4-style
+
${esc(hld.mermaid_context)}
+
+
+
Layered architecture
+ top modules per layer · +N more = drill in Navigator
+
${esc(hld.mermaid_layered)}
+
+
+
Layers
` +
+ layers.map(L => {
+ const n = (hld.components[L.id] || []).length;
+ const active = _hldNav.layer === L.id ? ' active' : '';
+ return `
+
+
+
${esc(L.title)}
+
${esc(L.subtitle)}
+
+
${n}
+
+
Modules
+ Pick a layer →
`;
+ } else {
+ const modules = (hld.components[_hldNav.layer] || [])
+ .slice().sort((a, b) => b.symbols - a.symbols);
+ colMods.innerHTML = `Modules · ${esc(_hldLayerTitle(_hldNav.layer))}
` +
+ modules.map(c => {
+ const active = _hldNav.module === c.qualname ? ' active' : '';
+ return `
+
+
+
${formatQn(c.qualname, {maxParts: 2})}
+
${esc(c.file || '')}
+
+
${c.symbols}
+
+
No modules.
';
+ colMods.querySelectorAll('[data-module]').forEach(el => {
+ el.onclick = () => { _hldNav.module = el.dataset.module;
+ _hldNav.symbol = null; _hldRenderNav(); };
+ });
+ }
+
+ // ---- Symbols column
+ if (!_hldNav.module) {
+ colSyms.innerHTML = `Symbols
+ Pick a module →
`;
+ } else {
+ const mod = (hld.modules || {})[_hldNav.module];
+ const symbols = mod ? (mod.symbols || []) : [];
+ colSyms.innerHTML = `Symbols · ${esc(CGUI.shortQn(_hldNav.module))}
` +
+ (symbols.length
+ ? symbols.map(s => {
+ const active = _hldNav.symbol === s.qualname ? ' active' : '';
+ return `
+
+
+
${esc(s.name)}
+
${s.kind} · L${s.line || '?'}
+
+
${s.fan_in}/${s.fan_out}
+
No symbols recorded.
');
+ colSyms.querySelectorAll('[data-symbol]').forEach(el => {
+ el.onclick = () => { _hldNav.symbol = el.dataset.symbol; _hldRenderNav(); };
+ });
+ }
+
+ // ---- Crumb
+ const parts = [];
+ parts.push(`All layers `);
+ if (_hldNav.layer) parts.push(`/
+ ${esc(_hldLayerTitle(_hldNav.layer))} `);
+ if (_hldNav.module) parts.push(`/
+ ${esc(CGUI.shortQn(_hldNav.module))} `);
+ if (_hldNav.symbol) parts.push(`/
+ ${esc(CGUI.shortQn(_hldNav.symbol))} `);
+ crumb.innerHTML = parts.join(' ');
+ crumb.querySelectorAll('[data-jump]').forEach(el => {
+ el.onclick = () => {
+ if (el.dataset.jump === 'root') { _hldNav.layer = _hldNav.module = _hldNav.symbol = null; }
+ else if (el.dataset.jump === 'layer') { _hldNav.module = _hldNav.symbol = null; }
+ else if (el.dataset.jump === 'module') { _hldNav.symbol = null; }
+ _hldRenderNav();
+ };
+ });
+
+ // ---- Detail panel + focus graph (only when a symbol is selected)
+ const focus = document.getElementById('hld-focus');
+ if (_hldNav.symbol) {
+ const mod = (hld.modules || {})[_hldNav.module];
+ const sym = mod && (mod.symbols || []).find(s => s.qualname === _hldNav.symbol);
+ if (sym) detail.innerHTML = _symbolDetailHtml(sym, mod);
+ detail.querySelectorAll('[data-jumpqn]').forEach(el => {
+ el.onclick = () => _jumpToQualname(el.dataset.jumpqn);
+ });
+ if (sym) _drawFocusGraph(focus, sym);
+ } else {
+ detail.innerHTML = '';
+ if (focus) { focus.style.display = 'none'; focus.innerHTML = ''; }
+ }
+
+ lucide.createIcons();
+}
+
+function _symbolDetailHtml(sym, mod) {
+ const esc = CGUI.esc;
+ const formatQn = CGUI.formatQn;
+ const kindIcon = CGUI.kindIcon;
+ const kindColor = CGUI.kindColor;
+ const callRow = qn => `
+ ${formatQn(qn, {maxParts: 3})}
`;
+ const callerRow = qn => `
+ ${formatQn(qn, {maxParts: 3})}
`;
+
+ return `
+
+
+
+
+
${formatQn(sym.qualname, {maxParts: 5})}
+
+ ${sym.kind}
+ L${sym.line || '?'}
+ in: ${sym.fan_in}
+ out: ${sym.fan_out}
+ ${esc(mod ? mod.file : '')}
+
+
+
+
+
+
+ ${(sym.callers && sym.callers.length)
+ ? sym.callers.map(callerRow).join('')
+ : '
No callers in graph.
'}
+
+
+
+ ${(sym.callees && sym.callees.length)
+ ? sym.callees.map(callRow).join('')
+ : '
Calls nothing tracked.
'}
+
+
No cross-module CALLS recorded.
`;
+ return;
+ }
+ const max = m.max || 1;
+ const colour = v => {
+ if (!v) return 'transparent';
+ const t = v / max;
+ // Cool indigo -> violet -> warm rose for heat.
+ const stops = [
+ [42, 57, 87], // ink-500
+ [99, 102, 241], // brand-600
+ [167, 139, 250], // accent-violet
+ [248, 113, 113], // accent-rose
+ ];
+ const seg = Math.min(stops.length - 2, Math.floor(t * (stops.length - 1)));
+ const lt = (t * (stops.length - 1)) - seg;
+ const a = stops[seg], b = stops[seg + 1];
+ const r = Math.round(a[0] + lt * (b[0] - a[0]));
+ const g = Math.round(a[1] + lt * (b[1] - a[1]));
+ const bl= Math.round(a[2] + lt * (b[2] - a[2]));
+ return `rgb(${r},${g},${bl})`;
+ };
+ let html = `
+
+
+
Module call matrix. Each row is a caller, each column a callee. Cell color and number = number of calls.
+ Rotate your head 45° to read column labels - or hover any cell for the exact pair.
+
+
+
${esc(mod.name)} `;
+ });
+ html += ``;
+ m.modules.forEach((row, i) => {
+ html += `${esc(row.qualname)} `;
+ m.counts[i].forEach((v, j) => {
+ const tip = v ? `${esc(row.name)} -> ${esc(m.modules[j].name)} ${v || ''} `;
+ });
+ html += `
+
${esc(k)} ${v}
+ ${formatQn(h.qualname, {maxParts: 4})} ${esc(h.file)}${h.fan_in}
+ ${h.fan_out}
+ ${h.loc}
+ ${h.score} `).join('');
+
+ host.innerHTML = `
+
+
+
+
Where to start. Open HLD for a clean layered diagram of how the codebase is wired.
+ Use Call flows to step through specific functions, or Matrix to see who calls whom in one glance.
+
+
+ ${card(m.nodes, 'Nodes')}
+ ${card(m.edges, 'Edges')}
+ ${card(m.unresolved, 'Unresolved', m.unresolved ? 'text-accent-amber' : '')}
+ ${card(iss.cycles, 'Cycles', iss.cycles ? 'text-accent-rose' : '')}
+ ${card(iss.dead, 'Dead-code candidates', iss.dead ? 'text-accent-amber' : '')}
+ ${card(iss.untested, 'Untested fns', iss.untested ? 'text-accent-amber' : '')}
+
+
+
+
Top hotspots
+ score = fan_in*2 + fan_out + LOC/50
+
+ Symbol File Fan-in
+ Fan-out LOC Score ${hot}
+
+
+
+
+
+
Inter-module call flows. Width of each ribbon = number of calls between two modules.
+ Hover anything for exact counts.
+
+
+
Top call flows ${data.links.length} flows
+ ${data.links.length ? '
'
+ : '
No cross-module flows yet.
'}
+
${esc(d.qualname)}
+
+
+
Codebase footprint. Each rectangle = one module. Area = LOC; brighter color = higher hotspot score.
+ Hover any cell for full details.
+
+
${esc(d.data.name)}