[flamegraph] Add diff modes

Author: alexander-yakushev

res/flamegraph/script.js

@@ -10,6 +10,7 @@ const qString = new URLSearchParams(window.location.search)
 const transformFilterTemplate = document.getElementById('transformFilterTemplate');
 const transformReplaceTemplate = document.getElementById('transformReplaceTemplate');
 const minSamplesToShow = 0; // Don't hide any frames for now.
+const diffModeBtns = [diffModeBtn1, diffModeBtn2, diffModeBtn3, diffModeBtn4, diffModeBtn5];
 const profileId = "<<<profileId>>>";
 
 /// Config handling
@@ -91,6 +92,8 @@ updateSidebarState();
 
 var graphTitle = <<<graphTitle>>> || "Flamegraph";
 var isDiffgraph = <<<isDiffgraph>>>;
+var diffModes = ['bidi_diff', 'a_diff', 'b_diff', 'a', 'b'];
+var currentDiffModeIdx = 0;
 var b_scale_factor;
 var reverseGraph = false;
 var initialStacks = [];
@@ -104,8 +107,7 @@ if (isDiffgraph) {
   maxTooltipWidth = 350;
 } else {
   isNormalizedDiv.remove();
-  tooltipSep2.remove();
-  tooltipPctTotalSpan.remove();
+  diffModeRow.remove();
 }
 tooltip.style['max-width'] = maxTooltipWidth + 'px';
 graphTitleSpan.innerText = graphTitle;
@@ -182,6 +184,7 @@ function applyConfig(config) {
   if (config.highlight) applyHighlight(config.highlight, true);
   if (config.reverse) setReverseGraph(true);
   if (config['sort-by'] == 'name') sortByNameRadio.checked = true;
+  if (config.currentDiffModeIdx) currentDiffModeIdx = config.currentDiffModeIdx;
   if (config.transforms) {
     userTransforms = [];
     for (let configTransform of config.transforms) {
@@ -197,6 +200,8 @@ async function constructPackedConfig() {
   if (highlightState.pattern) config.highlight = _maybeRegexToString(highlightState.pattern);
   if (reverseGraph) config.reverse = true;
   if (sortByNameRadio.checked) config['sort-by'] = 'name';
+  if (currentDiffModeIdx != 0)
+    config.currentDiffModeIdx = currentDiffModeIdx;
 
   let transformsData = [];
   for (let t of userTransforms) {
@@ -503,8 +508,37 @@ function generateLevelsDiffgraph(levels, node, title, level, x) {
 
   levels[level] = levels[level] || [];
   var change = (node.total_samples_a == 0) ? 1.0 : node.total_delta / node.total_samples_a;
-  var color = getDiffColor(change);
-  levels[level].push({left: left, width: node.delta_abs,
+  let width, self_offset, color;
+  switch (diffModes[currentDiffModeIdx]) {
+  case 'bidi_diff':
+    width = node.delta_abs;
+    self_offset = Math.abs(node.self_delta);
+    color = getDiffColor(change);
+    break;
+  case 'a_diff':
+    width = node.total_samples_a;
+    self_offset = node.self_samples_a;
+    color = getDiffColor(change);
+    break;
+  case 'b_diff':
+    width = node.total_samples_b;
+    self_offset = node.self_samples_b;
+    color = getDiffColor(change);
+    break;
+  case 'a':
+    width = node.total_samples_a;
+    self_offset = node.self_samples_a;
+    color = frameColor(title);
+    break;
+  case 'b':
+    width = node.total_samples_b;
+    self_offset = node.self_samples_b;
+    color = frameColor(title);
+    break;
+  }
+
+  levels[level].push({left: left,
+                      width: width,
                       self_samples_a: node.self_samples_a,
                       self_samples_b: node.self_samples_b,
                       self_delta: node.self_delta,
@@ -514,7 +548,7 @@ function generateLevelsDiffgraph(levels, node, title, level, x) {
                       color: color,
                       title: title});
 
-  left += Math.abs(node.self_delta);
+  left += self_offset;
 
   let children = Object.entries(node.children);
   if (sortByNameRadio.checked)
@@ -525,9 +559,17 @@ function generateLevelsDiffgraph(levels, node, title, level, x) {
   for (let i in children) {
     let title = children[i][0];
     let child = children[i][1];
-    generateLevelsDiffgraph(levels, child, title, level+1, left);
-    left += child.delta_abs;
+    left += generateLevelsDiffgraph(levels, child, title, level+1, left);
   }
+  return width;
+}
+
+function setDiffMode(mode) {
+  currentDiffModeIdx = mode;
+  for (let btn of diffModeBtns)
+    btn.classList.remove("toggled");
+  diffModeBtns[mode].classList.add("toggled");
+  fullRedraw();
 }
 
 function generateLevels(node, title) {
@@ -782,7 +824,9 @@ function canvasOnMouseMove(e) {
       tooltip.style.animation = null;
 
       var hoverTipText;
-      if (isDiffgraph) {
+      if (isDiffgraph && currentDiffModeIdx <= 2) {
+        tooltipSep2.style.display = 'inline-block';
+        tooltipPctTotalSpan.style.display = 'inline-block';
         var rel_change = (f.total_samples_a == 0) ? 1.0 : f.total_delta / f.total_samples_a;
         var total_change = f.total_delta / tree.total_samples_a;
         tooltipSamplesSpan.innerHTML = samples(f.total_delta, true, true);
@@ -791,9 +835,22 @@ function canvasOnMouseMove(e) {
         hoverTipText = `${f.title}\n(${samples(f.total_delta, true)}, ${ratioToPct(rel_change)} self, ${ratioToPct(total_change)} total)`;
         // , self_samples_a: ${f.self_samples_a}, self_samples_b: ${f.self_samples_b},  self_delta: ${f.self_delta},  total_samples_a: ${f.total_samples_a},  total_samples_b: ${f.total_samples_b}, total_delta: ${f.total_delta})`;
       } else {
-        tooltipSamplesSpan.innerHTML = samples(f.width, false, true);
-        tooltipPctSelfSpan.innerHTML = bold(pct(f.width, levels[0][0].width));
-        hoverTipText = f.title + '\n(' + samples(f.width) + ', ' + pct(f.width, levels[0][0].width) + ')';
+        tooltipSep2.style.display = 'none';
+        tooltipPctTotalSpan.style.display = 'none';
+        let width, total_width;
+        if (isDiffgraph && currentDiffModeIdx == 3) {
+          width = f.total_samples_a;
+          total_width = levels[0][0].total_samples_a;
+        } else if (isDiffgraph && currentDiffModeIdx == 4) {
+          width = f.total_samples_b;
+          total_width = levels[0][0].total_samples_b;
+        } else {
+          width = f.width;
+          total_width = levels[0][0].width;
+        }
+        tooltipSamplesSpan.innerHTML = samples(width, false, true);
+        tooltipPctSelfSpan.innerHTML = bold(pct(width, total_width));
+        hoverTipText = f.title + '\n(' + samples(width) + ', ' + pct(width, total_width) + ')';
       }
 
       let cursor_x  = e.clientX + window.pageXOffset;

res/flamegraph/template.html

@@ -52,7 +52,7 @@
       .toggle:hover {background-color: #e6f2ff; border-radius: 5px;}
       .toggle.arcs:hover svg {fill:#e6f2ff;}
       .toggle:active {transform:scale(0.90);}
-      .toggle.toggled {background-color: #006d5b; border-radius: 5px;}
+      .toggle.toggled {background-color:#006d5b; border-radius:5px; color:white;}
       .toggle.toggled svg {stroke:#fff; fill:#fff;}
       .toggle.toggled.arcs svg {fill:#006d5b;}
       .toggle.inversed svg { transform: scaleY(-1); }
@@ -164,6 +164,14 @@
                 <svg><use href="#reverse-icon"/></svg>
               </button>
             </div>
+            <div class="sidebar-row" id="diffModeRow">
+              <div class="w-100"><strong>Diff mode</strong></div>
+              <button id="diffModeBtn1" class="toggle toggled" onclick="setDiffMode(0)" title="Bidirectional diff">A|B</button>
+              <button id="diffModeBtn2" class="toggle" onclick="setDiffMode(1)" title="Overlay diff over A">Aᴮ</button>
+              <button id="diffModeBtn3" class="toggle" onclick="setDiffMode(2)" title="Overlay diff over B">ᴬB</button>
+              <button id="diffModeBtn4" class="toggle" onclick="setDiffMode(3)" title="Just A">A</button>
+              <button id="diffModeBtn5" class="toggle" onclick="setDiffMode(4)" title="Just B">B</button>
+            </div>
             <div class="sidebar-row" id="isNormalizedDiv">
               <div class="w-100"><strong>Normalized</strong></div>
               <input type="checkbox" id="isNormalized" name="isNormalized" onchange="onTransformsChangedDontRecreate()">