Merge pull request #87 from nschloe/improvements

Improvements
nschloe · Oct 4, 2020 · f927cb3 · f927cb3
2 parents 7c342d4 + cf64dcd
commit f927cb3
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 42 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tuna",
   "dependencies": {
-    "bootstrap": "4.5.2",
+    "bootstrap": "5.0.0-alpha2",
     "d3": "6.2.0"
   }
 }
diff --git a/setup.cfg b/setup.cfg
@@ -1,6 +1,6 @@
 [metadata]
 name = tuna
-version = 0.4.8
+version = 0.5.0
 author = Nico Schlömer
 author_email = [email protected]
 description = Visualize Python performance profiles

diff --git a/tuna/web/index.html b/tuna/web/index.html
@@ -12,26 +12,36 @@
   </head>
 
   <body>
-    <nav class="navbar navbar-light bg-light">
-      <div class="navbar-header">
-        <a class="navbar-brand" href="https://github.com/nschloe/tuna">
+    <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
+      <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3"
+        href="https://github.com/nschloe/tuna">
           <img src="static/favicon256.png" width="30" height="30" class="d-inline-block align-top" alt="">
           tuna
-        </a>
+      </a>
+      <div class="text-white w-100">
         ${filename}
       </div>
     </nav>
 
-    <div class="container-fluid py-md-3">
+    <div class="container-fluid">
       <div class="row">
-        <div class="col">
-          <x-icicle data="${data}" row-height="100"></x-icicle>
-        </div>
+        <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sticky-sidebar
+          collapse">
+          <div class="pt-3 sticky-top sticky-offset">
+            <button class="btn btn-dark" id="resetZoomButton">Reset zoom</button>
+          </div>
+        </nav>
+
+        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
+          <div class="pt-3 pb-2 mb-3">
+            <x-icicle data="${data}" row-height="100"></x-icicle>
+          </div>
+        </main>
       </div>
     </div>
 
-    <footer class="footer">
-      <div class="container text-muted">
+    <footer class="bg-light text-center text-lg-left">
+      <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
         tuna v${version}
       </div>
     </footer>

diff --git a/tuna/web/static/icicle.js b/tuna/web/static/icicle.js
@@ -23,17 +23,20 @@ class Icicle extends HTMLElement {
     let id = 0;
     root.descendants().forEach(function(d) {d.id = id; id++;});
 
+    // Find the resetZoomButton and call clicked() with root
+    const button = document.getElementById('resetZoomButton');
+    button.addEventListener('click', (evt => {
+      (clicked.bind(this))(evt, root);
+    }));
+
     const strokeWidth = 1;
     const numLevels = root.height + 1;
     const height = numLevels * this.rowHeight + numLevels * strokeWidth;
 
     this.svg.attr("height", height);
 
-    const x = d3.scaleLinear()
-      .range([0, this.width]);
-
-    const y = d3.scaleLinear()
-      .range([0, height]);
+    const x = d3.scaleLinear().range([0, this.width]);
+    const y = d3.scaleLinear().range([0, height]);
 
     const totalRuntime = root.value;
 
@@ -100,64 +103,59 @@ class Icicle extends HTMLElement {
         )
         .call(el => el.append("tspan")
           .call(tspan2 => { to_anim.tspan2 = tspan2; })
-          .text(d => d3.format(".3f")(d.value) + " s  (" + d3.format(".1%")(d.value / totalRuntime) + ")")
-          .attr("x", d => x(d.x0 + d.x1)/2)
+          .text(
+            d =>
+            d3.format(".3f")(d.value) +
+            " s  (" +
+            d3.format(".1%")(d.value / totalRuntime)
+            + ")"
+          )
+          .attr("x", d => x(d.x0 + d.x1) / 2)
           .attr("dy", "1.5em")
         )
       )
     );
 
-    function clicked(evnt, d) {
+    function clicked(evt, d) {
       const offset = d.y0 ? 20 : 0;
       const height = root.height - d.depth;
       const newHeight = (height+1) * this.rowHeight + (height+1) * strokeWidth;
       x.domain([d.x0, d.x1]).range([0, this.width]);
       y.domain([d.y0, 1]).range([offset, newHeight + offset]);
-
-      const trans = d3.transition()
-        .duration(750);
-
+      const trans = d3.transition().duration(300);
       to_anim.rect.transition(trans)
         .attr("x", d => x(d.x0))
         .attr("y", d => y(d.y0))
         .attr("width", d => x(d.x1) - x(d.x0));
-
       to_anim.clipRect.transition(trans)
         .attr("x", d => x(d.x0))
         .attr("y", d => y(d.y0))
         .attr("width", d => x(d.x1) - x(d.x0));
-
       to_anim.text.transition(trans)
-        .attr("y", d => y((d.y0 + d.y1)/2));
-
+        .attr("y", d => y((d.y0 + d.y1) / 2));
       to_anim.tspan1.transition(trans)
-        .attr("x", d => x((d.x0 + d.x1)/2));
-
+        .attr("x", d => x((d.x0 + d.x1) / 2));
       to_anim.tspan2.transition(trans)
-        .attr("x", d => x((d.x0 + d.x1)/2));
+        .attr("x", d => x((d.x0 + d.x1) / 2));
     }
 
-    // TODO: This repeats a lot of the content of `clicked`
+    // TODO: This repeats much of the content of `clicked`
     window.addEventListener('resize', e => {
       x.range([0, this.width]);
       to_anim.rect
         .attr("x", d => x(d.x0))
         .attr("y", d => y(d.y0))
         .attr("width", d => x(d.x1) - x(d.x0));
-
       to_anim.clipRect
         .attr("x", d => x(d.x0))
         .attr("y", d => y(d.y0))
         .attr("width", d => x(d.x1) - x(d.x0));
-
       to_anim.text
-        .attr("y", d => y((d.y0 + d.y1)/2));
-
+        .attr("y", d => y((d.y0 + d.y1) / 2));
       to_anim.tspan1
-        .attr("x", d => x((d.x0 + d.x1)/2));
-
+        .attr("x", d => x((d.x0 + d.x1) / 2));
       to_anim.tspan2
-        .attr("x", d => x((d.x0 + d.x1)/2));
+        .attr("x", d => x((d.x0 + d.x1) / 2));
     });
   }
 }

diff --git a/tuna/web/static/tuna.css b/tuna/web/static/tuna.css
@@ -62,3 +62,8 @@ body {
   line-height: 60px;
   background-color: #f5f5f5;
 }
+
+/**/
+.sticky-offset {
+  top: 40px !important;
+}