Adds collapsible profiles to web GUI

scalene/scalene-gui/scalene-gui.js

@@ -1,3 +1,6 @@
+const RightTriangle = '&#9658';   // right-facing triangle symbol (collapsed view)
+const DownTriangle = '&#9660';   // downward-facing triangle symbol (expanded view)
+
 function memory_consumed_str(size_in_mb) {
   // Return a string corresponding to amount of memory consumed.
   let gigabytes = Math.floor(size_in_mb / 1024);
@@ -586,6 +589,44 @@ function buildAllocationMaps(prof, f) {
   return [averageMallocs, peakMallocs];
 }
 
+// Track all profile ids so we can collapse and expand them en masse.
+let allIDs = [];
+
+function collapseAll() {
+    for (const id of allIds) {
+	collapseDisplay(id);
+    }
+}
+
+function expandAll() {
+    for (const id of allIds) {
+	expandDisplay(id);
+    }
+}
+
+function collapseDisplay(id) {
+    const d = document.getElementById(`profile-${id}`);
+    d.style.display = 'none';
+    document.getElementById(`button-${id}`).innerHTML = RightTriangle;
+}
+
+function expandDisplay(id) {
+    const d = document.getElementById(`profile-${id}`);
+    d.style.display = 'block';
+    document.getElementById(`button-${id}`).innerHTML = DownTriangle;
+}
+
+function toggleDisplay(id) {
+    const d = document.getElementById(`profile-${id}`);
+    if (d.style.display == 'block') {
+	d.style.display = 'none';
+	document.getElementById(`button-${id}`).innerHTML = RightTriangle;
+    } else {
+	d.style.display = 'block';
+	document.getElementById(`button-${id}`).innerHTML = DownTriangle;
+    }
+}
+
 async function display(prof) {
   let memory_sparklines = [];
   let memory_activity = [];
@@ -594,8 +635,8 @@ async function display(prof) {
   let memory_bars = [];
   let tableID = 0;
   let s = "";
-  s += '<div class="row justify-content-center">';
-  s += '<div class="col-auto">';
+  s += '<span class="row justify-content-center">';
+  s += '<span class="col-auto">';
   s += '<table width="50%" class="table text-center table-condensed">';
   s += "<tr>";
   s += `<td><font style="font-size: small"><b>Time:</b> <font color="darkblue">Python</font> | <font color="#6495ED">native</font> | <font color="blue">system</font><br /></font></td>`;
@@ -670,12 +711,13 @@ async function display(prof) {
   }
 
   s += '<tr><td colspan="10">';
-  s += `<p class="text-center"><font style="font-size: 90%; font-style: italic; font-color: darkgray">hover over bars to see breakdowns; click on <font style="font-variant:small-caps; text-decoration:underline">column headers</font> to sort.</font></p>`;
+  s += `<span class="text-center"><font style="font-size: 90%; font-style: italic; font-color: darkgray">hover over bars to see breakdowns; click on <font style="font-variant:small-caps; text-decoration:underline">column headers</font> to sort.</font></span>`;
   s += "</td></tr>";
   s += "</table>";
-  s += "</div>";
-  s += "</div>";
+  s += "</span>";
+  s += "</span>";
 
+    s += '<br class="text-left"><span style="font-size: 80%; color: blue; cursor : pointer;" onClick="expandAll()">&nbsp;show all</span> | <span style="font-size: 80%; color: blue; cursor : pointer;" onClick="collapseAll()">hide all</span></br>';
   s += '<div class="container-fluid">';
 
   // Convert files to an array and sort it in descending order by percent of CPU time.
@@ -685,14 +727,30 @@ async function display(prof) {
   });
 
   // Print profile for each file
-  let fileIteration = 0;
-  for (const ff of files) {
-    s += `<p class="text-left"><font style="font-size: 90%"><code>${
+    let fileIteration = 0;
+    allIds = [];
+    for (const ff of files) {
+	allIds.push(ff[0]);
+      s += '<p class="text-left">';
+      s += `<span id="button-${ff[0]}" title="Click to show or hide profile." style="cursor: pointer; color: blue" onClick="toggleDisplay('${ff[0]}')">`;
+      // Always have the first file's profile opened.
+      if (fileIteration == 0) {
+	  s += `${DownTriangle}`;
+      } else {
+	  s += `${RightTriangle}`;
+      }
+      s += '</span>';
+      s += `<font style="font-size: 90%"><code>${
       ff[0]
     }</code>: % of time = ${ff[1].percent_cpu_time.toFixed(
       1
     )}% (${time_consumed_str(ff[1].percent_cpu_time / 100.0 * prof.elapsed_time_sec * 1e3)}) out of ${time_consumed_str(prof.elapsed_time_sec * 1e3)}.</font></p>`;
-    s += "<div>";
+      // Always have the first file's profile opened.
+      if (fileIteration == 0) {
+	  s += `<div style="display:block;" id="profile-${ff[0]}">`;
+      } else {
+	  s += `<div style="display:none;" id="profile-${ff[0]}">`;
+      }
     s += `<table class="profile table table-hover table-condensed" id="table-${tableID}">`;
     tableID++;
     s += makeTableHeader(ff[0], prof.gpu, prof.memory, false);
@@ -753,7 +811,7 @@ async function display(prof) {
     fileIteration++;
     // Insert empty lines between files.
     if (fileIteration < files.length) {
-      s += "<p />&nbsp;<hr><p />&nbsp;<p />";
+      s += "<hr>";
     }
   }
   s += "</div>";