Fix filter

beothorn · Nov 26, 2023 · 6fd0671 · 6fd0671
1 parent abd503f
commit 6fd0671
Show file tree

Hide file tree

Showing 6 changed files with 683 additions and 679 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 Simple and easy flame graph for java.  
 No servers or open connections, just plug the agent and get the results.   
 See function calls, parameters and return values all at once.  
-[Latest release v15.0.0](https://github.com/beothorn/javaflame/releases/download/v15.0.0/javaAgent.jar)
+[Latest release v15.1.0](https://github.com/beothorn/javaflame/releases/download/v15.1.0/javaAgent.jar)
 
 Want to see it in action? [Check out this rendering of some sort algorithms flamegraphs](https://beothorn.github.io/javaflame).
 

diff --git a/docs/data.js b/docs/data.js
diff --git a/docs/index.html b/docs/index.html
@@ -5,15 +5,6 @@
 </head>
 <body>
 
-<div id="explanation" class="box" style="padding: 1rem;">
-    <h2>Javaflame</h2>
-    <p>This is a render of different sort algorithms running each on a different thread.</p>
-    <p>This visualization was created using <a href="https://github.com/beothorn/javaflame">Javaflame</a>,
-        a Java agent you can just add to your jar command and it will produce this html, with no other dependencies needed.</p>
-    <p>Here you can see step by step, including parameters and return values, how each sort works.</p>
-    <p>The source for the sort algorithms are <a href="https://github.com/beothorn/javaflame/tree/main/javaExampleApp/src/main/java/com/github/beothorn/sorts/algorithms">here</a>.</p>
-</div>
-
 <div id="header" class="box">
     <img id="logo" width="100px" src="./logo.svg"/>
     <div id="metadata">

diff --git a/docs/style.css b/docs/style.css
@@ -21,6 +21,7 @@ body {
 
 .boxHeader{
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
     width: 100%;

diff --git a/docs/ui.js b/docs/ui.js
@@ -200,30 +200,36 @@ function buildGraph(dataToPlot){
         // ---------------------------
 
         filterButton.addEventListener("click", () => {
-            document.getElementById("flamegraphByTimestamp"+i).innerHTML = '';
-            document.getElementById("flamegraphByChildrenCount"+i).innerHTML = '';
             const filterString = filterInput.value;
             const filtered = filterDataByLambda(dataForGraph, dataToPlot[i].thread, filterString);
 
-            loadData({
-                elementId: "flamegraphByChildrenCount"+i,
-                data: filtered[i].span,
-                graphType: "ChildrenCallCount",
-                colorPalette,
-                zoomOnClick: true,
-                onClick: (n) => showNode(flameGraphNodeOutput.id, n.node),
-                tooltip: (n) => `<div class="tooltip">${n.name}</div>`
-            });
-
-            loadData({
-                elementId: "flamegraphByTimestamp"+i,
-                data: filtered[i].span,
-                graphType: "Timestamp",
-                colorPalette,
-                zoomOnClick: true,
-                onClick: (n) => showNode(byTimestampNodeOutput.id, n.node),
-                tooltip: (n) => `<div class="tooltip">Execution time(millis): ${n.node.exitTime - n.node.entryTime}<br>${n.name}</div>`
-            });
+            const oldFlameGraphByTime = document.getElementById("flamegraphByTimestamp"+i);
+            if (oldFlameGraphByTime) {
+                oldFlameGraphByTime.innerHTML = '';
+                loadData({
+                    elementId: oldFlameGraphByTime.id,
+                    data: filtered[i].span,
+                    graphType: "Timestamp",
+                    colorPalette,
+                    zoomOnClick: true,
+                    onClick: (n) => showNode(byTimestampNodeOutput.id, n.node),
+                    tooltip: (n) => `<div class="tooltip">Execution time(millis): ${n.node.exitTime - n.node.entryTime}<br>${n.name}</div>`      
+                });
+            } 
+
+            const oldFlameGraphByCallCount = document.getElementById("flamegraphByChildrenCount"+i);
+            if (oldFlameGraphByCallCount) {
+                oldFlameGraphByCallCount.innerHTML = '';
+                loadData({
+                    elementId: oldFlameGraphByCallCount.id,
+                    data: filtered[i].span,
+                    graphType: "ChildrenCallCount",
+                    colorPalette,
+                    zoomOnClick: true,
+                    onClick: (n) => showNode(flameGraphNodeOutput.id, n.node),
+                    tooltip: (n) => `<div class="tooltip">${n.name}</div>`
+                });
+            }
         });
 
         headerLeft.appendChild(threadName);

diff --git a/javaAgent/src/main/resources/com/github/beothorn/agent/ui.js b/javaAgent/src/main/resources/com/github/beothorn/agent/ui.js
@@ -200,30 +200,36 @@ function buildGraph(dataToPlot){
         // ---------------------------
 
         filterButton.addEventListener("click", () => {
-            document.getElementById("flamegraphByTimestamp"+i).innerHTML = '';
-            document.getElementById("flamegraphByChildrenCount"+i).innerHTML = '';
             const filterString = filterInput.value;
             const filtered = filterDataByLambda(dataForGraph, dataToPlot[i].thread, filterString);
 
-            loadData({
-                elementId: "flamegraphByChildrenCount"+i,
-                data: filtered[i].span,
-                graphType: "ChildrenCallCount",
-                colorPalette,
-                zoomOnClick: true,
-                onClick: (n) => showNode(flameGraphNodeOutput.id, n.node),
-                tooltip: (n) => `<div class="tooltip">${n.name}</div>`
-            });
-
-            loadData({
-                elementId: "flamegraphByTimestamp"+i,
-                data: filtered[i].span,
-                graphType: "Timestamp",
-                colorPalette,
-                zoomOnClick: true,
-                onClick: (n) => showNode(byTimestampNodeOutput.id, n.node),
-                tooltip: (n) => `<div class="tooltip">Execution time(millis): ${n.node.exitTime - n.node.entryTime}<br>${n.name}</div>`
-            });
+            const oldFlameGraphByTime = document.getElementById("flamegraphByTimestamp"+i);
+            if (oldFlameGraphByTime) {
+                oldFlameGraphByTime.innerHTML = '';
+                loadData({
+                    elementId: oldFlameGraphByTime.id,
+                    data: filtered[i].span,
+                    graphType: "Timestamp",
+                    colorPalette,
+                    zoomOnClick: true,
+                    onClick: (n) => showNode(byTimestampNodeOutput.id, n.node),
+                    tooltip: (n) => `<div class="tooltip">Execution time(millis): ${n.node.exitTime - n.node.entryTime}<br>${n.name}</div>`      
+                });
+            } 
+
+            const oldFlameGraphByCallCount = document.getElementById("flamegraphByChildrenCount"+i);
+            if (oldFlameGraphByCallCount) {
+                oldFlameGraphByCallCount.innerHTML = '';
+                loadData({
+                    elementId: oldFlameGraphByCallCount.id,
+                    data: filtered[i].span,
+                    graphType: "ChildrenCallCount",
+                    colorPalette,
+                    zoomOnClick: true,
+                    onClick: (n) => showNode(flameGraphNodeOutput.id, n.node),
+                    tooltip: (n) => `<div class="tooltip">${n.name}</div>`
+                });
+            }
         });
 
         headerLeft.appendChild(threadName);