dump-heap/analyze_heap.html at main · lhchavez/dump-heap · GitHub

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

    <main class="flex grow overflow-auto text-black bg-white">
      <embed class="max-w-none" src="/heap-dump.svg" type="image/svg+xml" id="graph" width="100%" height="100%"></embed>
    </main>

    <footer class="flex grow-0 self-center">
      <div>❤️ <a href="https://github.com/lhchavez/dump-heap">https://github.com/lhchavez/dump-heap</a></div>
    </footer>
  </body>
</html>