Rename flamegraph "Invert" button

docs/flamegraph.rst

@@ -196,19 +196,24 @@ checkbox:
 Note that allocations in these frames will still be accounted for
 in parent frames, even if they're hidden.
 
-Inverted View
------------------
-
-Although the flame graphs explained above show the calling functions below
-and memory allocating functions above, flame graphs can be inverted
-so that the calling functions are at the top, while memory allocating
-functions are at the bottom. In this view, look for wide ceilings
-instead of wide plateaus to find functions with the largest allocation
-of memory.
-
-To invert the flame graph, press the *Invert* button:
+Flames versus Icicles
+---------------------
 
-.. image:: _static/images/invert_button.png
+The flame graphs explained above show each function above its caller,
+with the root at the bottom. This is what's traditionally called
+a "flame graph", because the wide base with narrowing columns above it
+looks sort of like a burning log with flames leaping into the air above
+it. Memray also supports what's sometimes called an "icicle graph",
+which has the root at the top. In an icicle graph, each function is
+below its caller, and there is a wide ceiling that thinner columns
+descend from, like icicles hanging from a roof. Whichever of these modes
+you choose, the data shown in the table is the same, just mirrored
+vertically.
+
+You can switch between showing a flame graph and an icicle graph with
+this toggle button:
+
+.. image:: _static/images/icicle_flame_toggle.png
     :align: center
 
 .. _memory-leaks-view:

src/memray/reporters/assets/flamegraph.js

@@ -77,7 +77,8 @@ function main() {
   }
 
   // Setup event handlers
-  document.getElementById("invertButton").onclick = onInvert;
+  document.getElementById("icicles").onchange = onInvert;
+  document.getElementById("flames").onchange = onInvert;
   document.getElementById("resetZoomButton").onclick = onResetZoom;
   document.getElementById("resetThreadFilterItem").onclick = onFilterThread;
   let hideUninterestingCheckBox = document.getElementById("hideUninteresting");

src/memray/reporters/assets/flamegraph_common.js

@@ -75,8 +75,11 @@ export function handleFragments() {
 
 // For the invert button
 export function onInvert() {
-  chart.inverted(!chart.inverted());
+  chart.inverted(this === document.getElementById("icicles"));
   chart.resetZoom(); // calls onClick
+
+  // Hide the tooltip for the radio button that was just clicked.
+  $('[data-toggle="tooltip"]').tooltip("hide");
 }
 
 export function onResetZoom() {

src/memray/reporters/assets/temporal_flamegraph.js

@@ -415,7 +415,8 @@ function main() {
   }
 
   // Setup event handlers
-  document.getElementById("invertButton").onclick = onInvert;
+  document.getElementById("icicles").onchange = onInvert;
+  document.getElementById("flames").onchange = onInvert;
   document.getElementById("resetZoomButton").onclick = onResetZoom;
   document.getElementById("resetThreadFilterItem").onclick = onFilterThread;
   let hideUninterestingCheckBox = document.getElementById("hideUninteresting");

src/memray/reporters/templates/assets/flamegraph.css

@@ -88,3 +88,11 @@
   background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black */
   z-index: 99; /* make sure it's on top of other elements */
 }
+
+.flamegraph-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flipped svg { transform: scale(1,-1); }

src/memray/reporters/templates/flamegraph.html

@@ -21,8 +21,29 @@
           title="Hide frames related to the Python import system" >
     <label class="form-check-label text-white bg-dark">Hide Import System Frames</label>
 </div>
+<div class="btn-group btn-group-toggle mr-3" data-toggle="buttons">
+  <label class="btn btn-outline-light shadow-none" data-container="body" data-toggle="tooltip" title="Enable flame graph mode: functions above their callers with the root at the bottom">
+    <input type="radio" name="flames/icicles" id="flames" autocomplete="off">
+    <div class="flamegraph-icon flipped">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M 1 1 h 22 Z M 11 6 h 10 Z M 1 6 h 7 Z M 11 11 h 7 Z M 1 11 h 4 Z M 11 16 h 4 Z M 1 16 h 2 Z M 11 21 h 2 Z"/>
+      </svg>
+    </div>
+    &nbsp;
+    Flames
+  </label>
+  <label class="btn btn-outline-light active shadow-none" data-container="body" data-toggle="tooltip" title="Enable icicle graph mode: functions below their callers with the root at the top">
+    <input type="radio" name="flames/icicles" id="icicles" autocomplete="off" checked/>
+    Icicles
+    &nbsp;
+    <div class="flamegraph-icon">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M 1 1 h 22 Z M 11 6 h 10 Z M 1 6 h 7 Z M 11 11 h 7 Z M 1 11 h 4 Z M 11 16 h 4 Z M 1 16 h 2 Z M 11 21 h 2 Z"/>
+      </svg>
+    </div>
+  </label>
+</div>
 <button id="resetZoomButton" class="btn btn-outline-light mr-3">Reset Zoom</button>
-<button id="invertButton" class="btn btn-outline-light mr-3">Invert</button>
 {% endblock %}
 
 {% block content %}