flamegraphs: Improve the title page

[libguestfs-talks.git] / 2019-fosdem / 7000-visualization.html

diff --git a/2019-fosdem/7000-visualization.html b/2019-fosdem/7000-visualization.html
index a4cd003..62100f2 100644 (file)
--- a/2019-fosdem/7000-visualization.html
+++ b/2019-fosdem/7000-visualization.html
@@ -4,69 +4,23 @@
 
 <h1>Useful nbdkit plugins and filters for testing filesystems</h1>
 
-<style>
-b {
-    border: 1px solid rgb(204,0,0);
-    background: #eef;
-    padding: 5px;
-    border-radius: 15px;
-}
-</style>
+<script>
+filters("1")
 
-<!-- note: div must have position: relative so child elements position
-     is correct -->
-<div style="background: #ccf; border: 1px solid rgb(204,0,0);
-            position:relative;
-            width: 800px; height: 400px;">
-  <code style="position: absolute; top: 1px; left: 10px;">curl</code>
-  <code style="position: absolute; top: 50px; left: 20px;"><b>data</b></code>
-  <code style="position: absolute; top: 100px; left: 10px;">ext2</code>
-  <code style="position: absolute; top: 120px; left: 140px;"><b>file</b></code>
-  <code style="position: absolute; top: 150px; left: 10px;"><b>floppy</b></code>
-  <code style="position: absolute; top: 200px; left: 20px;">guestfs</code>
-  <code style="position: absolute; top: 250px; left: 10px;">gzip</code>
-  <code style="position: absolute; top: 280px; left: 150px;"><b>iso</b></code>
-  <code style="position: absolute; top: 350px; left: 10px;">libvirt</code>
-
-  <code style="position: absolute; top: 5px; left: 340px;">lua</code>
-  <code style="position: absolute; top: 55px; left: 380px;"><b>memory</b></code>
-  <code style="position: absolute; top: 105px; left: 340px;">nbd</code>
-  <code style="position: absolute; top: 125px; left: 450px;">null</code>
-  <code style="position: absolute; top: 155px; left: 340px;">ocaml</code>
-  <code style="position: absolute; top: 185px; left: 160px;">partitioning</code>
-  <code style="position: absolute; top: 240px; left: 380px;">pattern</code>
-  <code style="position: absolute; top: 300px; left: 320px;">perl</code>
-  <code style="position: absolute; top: 340px; left: 280px;">python</code>
-
-  <code style="position: absolute; top: 10px; left: 600px;">random</code>
-  <code style="position: absolute; top: 60px; left: 600px;">ruby</code>
-  <code style="position: absolute; top: 90px; left: 700px;"><b>sh</b></code>
-  <code style="position: absolute; top: 130px; left: 590px;">split</code>
-  <code style="position: absolute; top: 180px; left: 600px;">streaming</code>
-  <code style="position: absolute; top: 190px; left: 450px;">tar</code>
-  <code style="position: absolute; top: 230px; left: 580px;">tcl</code>
-  <code style="position: absolute; top: 260px; left: 650px;">vddk</code>
-  <code style="position: absolute; top: 290px; left: 600px;">xz</code>
-  <code style="position: absolute; top: 320px; left: 600px;">zero</code>
-</div>
+document.getElementById("filter1-delay").classList.add("highlighted")
+document.getElementById("filter1-error").classList.add("highlighted")
+document.getElementById("filter1-log").classList.add("highlighted")
+</script>
 
 <p></p>
 
-<!-- note: div must have position: relative so child elements position
-     is correct -->
-<div style="background: #cfc; border: 1px solid rgb(204,0,0);
-            position:relative;
-            width: 800px; height: 220px;">
-  <code style="position: absolute; top: 1px; left: 50px;">blocksize</code>
-  <code style="position: absolute; top: 50px; left: 100px;">cache</code>
-  <code style="position: absolute; top: 80px; left: 115px;">cow</code>
-  <code style="position: absolute; top: 140px; left: 10px;"><b>delay</b></code>
-  <code style="position: absolute; top: 180px; left: 100px;"><b>error</b></code>
+<script>
+plugins()
 
-  <code style="position: absolute; top: 10px; left: 400px;">fua</code>
-  <code style="position: absolute; top: 60px; left: 600px;"><b>log</b></code>
-  <code style="position: absolute; top: 90px; left: 250px;">nozero</code>
-  <code style="position: absolute; top: 130px; left: 530px;">offset</code>
-  <code style="position: absolute; top: 150px; left: 280px;">partition</code>
-  <code style="position: absolute; top: 180px; left: 480px;">truncate</code>
-</div>
+document.getElementById("plugin-data").classList.add("highlighted")
+document.getElementById("plugin-file").classList.add("highlighted")
+document.getElementById("plugin-floppy").classList.add("highlighted")
+document.getElementById("plugin-iso").classList.add("highlighted")
+document.getElementById("plugin-memory").classList.add("highlighted")
+document.getElementById("plugin-sh").classList.add("highlighted")
+</script>