joe/notfiles
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(notgraph): render dep graph edges, add dark mode

Browse Source
This commit is contained in:
Joseph O'Brien
2026-04-02 03:04:27 -04:00
parent 0cc1413a04
commit dcde5d1e82
3 changed files with 139 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
crates/notgraph/templates/report.html.template
View File

@@ -5,13 +5,33 @@
<title>notgraph Report</title>
<script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<style>
body {{ font-family: sans-serif; margin: 2rem; max-width: 1200px; }}
#graph {{ height: 400px; border: 1px solid #ccc; margin-bottom: 2rem; }}
:root {{
--bg: #1a1a1a;
--bg2: #242424;
--bg3: #2e2e2e;
--border: #3a3a3a;
--text: #e0e0e0;
--text-dim: #888;
--accent: #4a9eff;
--accent2: #2a5fa0;
--node-bg: #1e3a5f;
--node-border: #4a9eff;
--heading-border: #4a9eff;
}}
* {{ box-sizing: border-box; }}
body {{ font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 2rem; max-width: 1200px; }}
h1 {{ color: var(--accent); margin-bottom: 0.5rem; }}
h2 {{ border-bottom: 2px solid var(--heading-border); padding-bottom: 0.3rem; color: var(--text); margin-top: 2rem; }}
#graph {{ height: 480px; border: 1px solid var(--border); margin-bottom: 2rem; background: var(--bg2); border-radius: 4px; }}
table {{ border-collapse: collapse; width: 100%; margin-bottom: 2rem; }}
th, td {{ border: 1px solid #ccc; padding: 0.4rem 0.8rem; text-align: left; }}
th {{ background: #f5f5f5; cursor: pointer; user-select: none; }}
th:hover {{ background: #e8e8e8; }}
h2 {{ border-bottom: 2px solid #333; padding-bottom: 0.3rem; }}
th, td {{ border: 1px solid var(--border); padding: 0.4rem 0.8rem; text-align: left; }}
th {{ background: var(--bg3); cursor: pointer; user-select: none; color: var(--accent); }}
th:hover {{ background: var(--border); }}
td {{ background: var(--bg2); }}
tr:hover td {{ background: var(--bg3); }}
p {{ color: var(--text); }}
.ok {{ color: #4caf50; }}
.cycle {{ color: #f44336; }}
</style>
</head>
<body>
@@ -20,11 +40,12 @@
<div id="graph"></div>
<script>
const nodes = new vis.DataSet([{nodes_js}]);
const edges = new vis.DataSet([]);
const edges = new vis.DataSet([{edges_js}]);
new vis.Network(document.getElementById('graph'), {{nodes, edges}}, {{
layout: {{ hierarchical: {{ direction: 'LR', sortMethod: 'directed' }} }},
layout: {{ hierarchical: {{ direction: 'LR', sortMethod: 'directed', levelSeparation: 180 }} }},
physics: false,
nodes: {{ shape: 'box', color: {{ background: '#d4e8ff', border: '#336699' }} }}
edges: {{ arrows: {{ to: {{ enabled: true, scaleFactor: 0.8 }} }}, color: {{ color: '#4a9eff', opacity: 0.8 }}, smooth: {{ type: 'cubicBezier' }} }},
nodes: {{ shape: 'box', font: {{ color: '#e0e0e0', size: 14 }}, color: {{ background: '#1e3a5f', border: '#4a9eff', highlight: {{ background: '#2a5fa0', border: '#7bbfff' }} }}, margin: 8 }}
}});
</script>
<h2>Hotspots</h2>