flamegraph: Bootstrap new temporal_flamegraph.html

Create a template page for a new type of flame graph. Initially this is
just an exactly copy of our existing flame graph template, to make the
changes from the original stand out as diffs in future commits.

Signed-off-by: Matt Wozniski <mwozniski@bloomberg.net>

Makefile

@@ -15,6 +15,7 @@ js_files := $(wildcard $(reporters_path)/assets/*.js)
 generated_js_files := \
     $(reporters_path)/templates/assets/flamegraph_common.js \
     $(reporters_path)/templates/assets/flamegraph.js \
+    $(reporters_path)/templates/assets/temporal_flamegraph.js \
     $(reporters_path)/templates/assets/table.js
 css_files := 'src/**/*.css'
 markdown_files := $(shell find . -name \*.md -not -path '*/\.*' -not -path './src/vendor/*')

src/memray/reporters/assets/temporal_flamegraph.js

@@ -0,0 +1,88 @@
+import { debounced, initMemoryGraph, resizeMemoryGraph } from "./common";
+
+import {
+  initThreadsDropdown,
+  drawChart,
+  handleFragments,
+  onFilterUninteresting,
+  onFilterImportSystem,
+  onFilterThread,
+  onResetZoom,
+  onResize,
+  onInvert,
+  getFlamegraph,
+} from "./flamegraph_common";
+
+window.resizeMemoryGraph = resizeMemoryGraph;
+
+function packedDataToTree(packedData) {
+  const { strings, nodes, unique_threads } = packedData;
+
+  const node_objects = nodes.name.map((_, i) => ({
+    name: strings[nodes["name"][i]],
+    location: [
+      strings[nodes["function"][i]],
+      strings[nodes["filename"][i]],
+      nodes["lineno"][i],
+    ],
+    value: nodes["value"][i],
+    children: nodes["children"][i],
+    n_allocations: nodes["n_allocations"][i],
+    thread_id: strings[nodes["thread_id"][i]],
+    interesting: nodes["interesting"][i] !== 0,
+    import_system: nodes["import_system"][i] !== 0,
+  }));
+
+  for (const node of node_objects) {
+    node["children"] = node["children"].map((idx) => node_objects[idx]);
+  }
+
+  const root = node_objects[0];
+  root["unique_threads"] = unique_threads.map((tid) => strings[tid]);
+  return root;
+}
+
+// Main entrypoint
+function main() {
+  data = packedDataToTree(packed_data);
+  initMemoryGraph(memory_records);
+  initThreadsDropdown(data, merge_threads);
+
+  // Create the flamegraph renderer
+  drawChart(data);
+
+  // Set zoom to correct element
+  if (location.hash) {
+    handleFragments();
+  }
+
+  // Setup event handlers
+  document.getElementById("invertButton").onclick = onInvert;
+  document.getElementById("resetZoomButton").onclick = onResetZoom;
+  document.getElementById("resetThreadFilterItem").onclick = onFilterThread;
+  let hideUninterestingCheckBox = document.getElementById("hideUninteresting");
+  hideUninterestingCheckBox.onclick = onFilterUninteresting.bind(this);
+  let hideImportSystemCheckBox = document.getElementById("hideImportSystem");
+  hideImportSystemCheckBox.onclick = onFilterImportSystem.bind(this);
+  // Enable filtering by default
+  onFilterUninteresting.bind(this)();
+
+  document.onkeyup = (event) => {
+    if (event.code == "Escape") {
+      onResetZoom();
+    }
+  };
+  document.getElementById("searchTerm").addEventListener("input", () => {
+    const termElement = document.getElementById("searchTerm");
+    getFlamegraph().search(termElement.value);
+  });
+
+  window.addEventListener("popstate", handleFragments);
+  window.addEventListener("resize", debounced(onResize));
+
+  // Enable tooltips
+  $('[data-toggle-second="tooltip"]').tooltip();
+  $('[data-toggle="tooltip"]').tooltip();
+}
+
+document.addEventListener("DOMContentLoaded", main);

src/memray/reporters/templates/flamegraph.html

@@ -13,7 +13,7 @@
 </div>
 <div class="form-check mr-3">
   <input class="form-check-input" type="checkbox" data-toggle="tooltip" id="hideUninteresting"
-          title="Hide CPython eval frames and other, memray-related frames" checked>
+          title="Hide CPython eval frames and Memray-related frames" checked>
     <label class="form-check-label text-white bg-dark">Hide Irrelevant Frames</label>
 </div>
 <div class="form-check mr-3">
@@ -72,7 +72,11 @@
 <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/d3-tip@0.9.1/dist/index.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/d3-flame-graph@4.0.6/dist/d3-flamegraph.min.js"></script>
+
+{% block flamegraph_script %}
 <script type="text/javascript">
   {%- include "assets/flamegraph.js" -%}
 </script>
 {% endblock %}
+
+{% endblock %}

src/memray/reporters/templates/temporal_flamegraph.html

@@ -0,0 +1,7 @@
+{% extends "flamegraph.html" %}
+
+{% block flamegraph_script %}
+<script type="text/javascript">
+  {%- include "assets/temporal_flamegraph.js" -%}
+</script>
+{% endblock %}

webpack.config.js

@@ -6,6 +6,7 @@ module.exports = {
   entry: {
     flamegraph_common: "./src/memray/reporters/assets/flamegraph_common.js",
     flamegraph: "./src/memray/reporters/assets/flamegraph.js",
+    temporal_flamegraph: "./src/memray/reporters/assets/temporal_flamegraph.js",
     table: "./src/memray/reporters/assets/table.js",
   },
   output: {