Skip to content

Commit c30cf05

Browse files
lhchavezlhchavez
committed
Add server support
It takes a lot of time to parse the msgpack and keep it in memory. It's going to be a lot more efficient if we keep that alive and iterate on the in-memory representation. This change adds support for a webserver to visualize the heap dump.
1 parent 50fa246 commit c30cf05

File tree

3 files changed

+299
-40
lines changed

3 files changed

+299
-40
lines changed

‎analyze_heap.html‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Heap-dump</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
7+
<style type="text/tailwindcss">
8+
@layer theme, base, components, utilities;
9+
@theme {
10+
--color-clifford: #da373d;
11+
}
12+
</style>
13+
<script type="text/javascript">
14+
addEventListener("DOMContentLoaded", () => {
15+
const zoomIn = document.getElementById("zoom-in");
16+
const zoomOut = document.getElementById("zoom-out");
17+
const zoom = document.getElementById("zoom-value");
18+
const graph = document.getElementById("graph");
19+
function getZoomValue() {
20+
let zoomValue = 100;
21+
try {
22+
zoomValue = parseInt(zoom.value, 10);
23+
if (zoomValue === undefined) {
24+
zoomValue = 100;
25+
}
26+
} catch (e) {}
27+
return zoomValue;
28+
}
29+
let graphWidth = null;
30+
if (window.location.search) {
31+
const params = new URLSearchParams(window.location.search);
32+
for (const name of ["sinks", "sources", "exclude", "highlight", "censor", "max_depth", "max_breadth", "zoom-value"]) {
33+
document.getElementById(name).value = params.get(name);
34+
}
35+
graph.src = "/heap-dump.svg" + window.location.search;
36+
graph.addEventListener("load", (e) => {
37+
graphWidth = graph.scrollWidth;
38+
graph.width = graphWidth * getZoomValue() / 100.0;
39+
});
40+
}
41+
zoomIn.addEventListener("click", (e) => {
42+
e.preventDefault();
43+
zoom.value = `${(getZoomValue() + 10).toFixed(0)}`;
44+
if (graphWidth !== null) {
45+
graph.width = graphWidth * getZoomValue() / 100.0;
46+
}
47+
});
48+
zoomOut.addEventListener("click", (e) => {
49+
e.preventDefault();
50+
zoom.value = `${Math.max(10, getZoomValue() - 10).toFixed(0)}`;
51+
if (graphWidth !== null) {
52+
graph.width = graphWidth * getZoomValue() / 100.0;
53+
}
54+
});
55+
});
56+
</script>
57+
</head>
58+
<body class="flex flex-col h-screen">
59+
<header class="mb-1 flex flex-none flex-row border-b-1 border-neutral-500">
60+
<h1 class="text-1xl font-extrabold flex-none p-1 self-center">Heap dump</h1>
61+
<form class="flex flex-1 flex-col">
62+
<div class="flex flex-row">
63+
<div class="flex-1 flex flex-col">
64+
<label class="text-xs" for="sinks">Sinks</label>
65+
<input class="border-1" type="text" id="sinks" name="sinks"></input>
66+
</div>
67+
<div class="flex-1 flex flex-col">
68+
<label class="text-xs" for="sources">Sources</label>
69+
<input class="border-1" type="text" id="sources" name="sources"></input>
70+
</div>
71+
<div class="flex-1 flex flex-col">
72+
<label class="text-xs" for="exclude">Exclude</label>
73+
<input class="border-1" type="text" id="exclude" name="exclude"></input>
74+
</div>
75+
<div class="flex-1 flex flex-col">
76+
<label class="text-xs" for="highlight">Highlight</label>
77+
<input class="border-1" type="text" id="highlight" name="highlight"></input>
78+
</div>
79+
</div>
80+
<div class="flex flex-row">
81+
<div class="flex-1 flex flex-col">
82+
<label class="text-xs" for="censor">Censor</label>
83+
<input class="border-1" type="text" id="censor" name="censor"></input>
84+
</div>
85+
<div class="flex-1 flex flex-col">
86+
<label class="text-xs" for="max_depth">Max depth</label>
87+
<input class="border-1" type="number" id="max_depth" name="max_depth" value="20"></input>
88+
</div>
89+
<div class="flex-1 flex flex-col">
90+
<label class="text-xs" for="max_breadth">Max breadth</label>
91+
<input class="border-1" type="number" id="max_breadth" name="max_breadth" value="20"></input>
92+
</div>
93+
<div class="flex-1 flex flex-col">
94+
<div class="flex flex-row">
95+
<label class="text-xs" for="zoom-value">Zoom</label>
96+
<button id="zoom-out" class="border-1 px-1 mx-1">-</button>
97+
<button id="zoom-in" class="border-1 px-1 mx-1">+</button>
98+
<input type="number" value="100" name="zoom-value" id="zoom-value" class="grow-1"></input>%
99+
</div>
100+
<input class="border-1" type="submit" value="Apply">
101+
</div>
102+
</div>
103+
</form>
104+
</header>
105+
106+
<main class="grow">
107+
<div class="overflow-scroll">
108+
<embed class="max-w-none" src="/heap-dump.svg" type="image/svg+xml" id="graph"></embed>
109+
</div>
110+
</main>
111+
112+
<footer class="flex grow-0">hi</footer>
113+
</body>
114+
</html>

0 commit comments

Comments
 (0)