Skip to content

Commit 450f6eb

Browse files
lhchavezlhchavez
committed
Generally improve the viewer
Things look a lot less jank now.
1 parent 7fb9eae commit 450f6eb

File tree

1 file changed

+115
-109
lines changed

1 file changed

+115
-109
lines changed

‎analyze_heap.html‎

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

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>
112+
<main class="flex grow overflow-auto text-black bg-white">
113+
<embed class="max-w-none" src="/heap-dump.svg" type="image/svg+xml" id="graph" width="100%" height="100%"></embed>
114+
</main>
111115

112-
<footer class="flex grow-0">hi</footer>
113-
</body>
116+
<footer class="flex grow-0 self-center">
117+
<div>❤️ <a href="https://github.com/lhchavez/dump-heap">https://github.com/lhchavez/dump-heap</a></div>
118+
</footer>
119+
</body>
114120
</html>

0 commit comments

Comments
 (0)