Improve formatting and interaction

udoprog · Feb 1, 2024 · 6bf0c29 · 6bf0c29
1 parent 79055b8
commit 6bf0c29
Showing 1 changed file with 89 additions and 52 deletions.
diff --git a/wgpu-sync/src/html.rs b/wgpu-sync/src/html.rs
@@ -1,7 +1,7 @@
 //! Module to format captured lock events as html.
 
 use std::collections::{BTreeMap, HashMap};
-use std::io;
+use std::io::{self, Write};
 use std::time::Duration;
 
 use crate::event::{EventBacktrace, EventId, EventKind};
@@ -14,36 +14,56 @@ const STYLE: &str = r#"
     width: 100%;
 }
 
-#traces > .lock .lock-title {
+.title {
     font-family: helvetica;
     font-size: 14px;
     font-weight: bold;
 }
 
-#traces > .lock {
+.lock-instance {
     border: 1px solid #808080;
     padding: 10px;
     background-color: #f0f0f0;
+    margin: 10px 0;
 }
 
-#traces > .lock > .section {
+.lock-instance:last-child {
+    margin-top: 0;
+}
+
+.lock-instance > .section {
     background-color: #ffff80;
-    margin-bottom: 10px;
-    margin-top: 10px;
+    margin: 10px 0;
 }
 
-.section {
+.lock-instance > .section:last-child {
+    margin-bottom: 0;
+}
+
+.timeline {
+    background-color: #ffffff;
+}
+
+.lock-session {
     cursor: pointer;
-    height: 10px;
-    min-width: 10px;
+    margin: 5px 0;
+}
+
+.lock-session:last-child {
+    margin-bottom: 0;
+}
+
+.section {
+    height: 26px;
+    min-width: 2px;
 }
 
 .section.critical {
-    background-color: #808080;
+    background-color: #e0e0e0;
 }
 
 .section.read {
-    background-color: #80ff80;
+    background-color: #367336;
 }
 
 .section.write {
@@ -54,28 +74,50 @@ const STYLE: &str = r#"
     background-color: #ff80ff;
 }
 
-.details {
+.title.critical {
+    color: #808080;
 }
 
-.details-title {
-    font-weight: bold;
+.title.read {
+    color: #367336;
 }
 
-.details-backtrace {
+.title.write {
+    color: #ff8080;
+}
+
+.title.lock {
+    color: #ff80ff;
+}
+
+.details {
+    font-family: helvetica;
+    font-size: 12px;
+    padding: 5px;
+}
+
+.backtrace {
     font-family: monospace;
     font-size: 12px;
     white-space: pre;
 }
 "#;
 
 const SCRIPT: &str = r#"
-let previousTarget = null;
+let visibleTarget = null;
 
 function toggle(element) {
     if (element.style.display === "none") {
+        if (!!visibleTarget) {
+            visibleTarget.style.display = "none";
+            visibleTarget = null;
+        }  
+
         element.style.display = "block";
+        visibleTarget = element;
     } else {
         element.style.display = "none";
+        visibleTarget = null;
     }
 }
 
@@ -85,14 +127,7 @@ document.querySelectorAll('[data-toggle]').forEach(function(element) {
 
     if (!!target) {
         element.addEventListener("click", function(e) {
-            if (!!previousTarget) {
-                toggle(previousTarget);
-                previousTarget = null;
-            }        
-
             toggle(target);
-            previousTarget = target;
-            e.preventDefault();
         });
     }
 });
@@ -159,7 +194,7 @@ where
     writeln!(out, "<div id=\"traces\">")?;
 
     for ((lock, type_name, thread), events) in opens {
-        writeln!(out, "<div class=\"lock\">")?;
+        writeln!(out, "<div class=\"lock-instance\">")?;
 
         let kind = lock.kind();
         let index = lock.index();
@@ -168,12 +203,19 @@ where
 
         writeln!(
             out,
-            "<div class=\"lock-title\">{kind:?}&lt;{type_name}&gt; (index: {index}) (thread: {thread})</div>"
+            "<div class=\"title\">{kind:?}&lt;{type_name}&gt; (index: {index}) (thread: {thread})</div>"
         )?;
 
         for (id, name, open, backtrace) in events {
+            writeln!(
+                out,
+                "<div data-toggle=\"event-{id}-details\" class=\"lock-session\">"
+            )?;
+
             let mut details = Vec::new();
 
+            writeln!(out, "<div class=\"timeline\">")?;
+
             write_section(
                 &mut out,
                 id,
@@ -184,21 +226,21 @@ where
                 &closes,
                 backtrace,
                 &mut details,
-                id,
             )?;
 
+            writeln!(out, "</div>")?;
+
             if !details.is_empty() {
                 writeln!(
                     out,
                     "<div id=\"event-{id}-details\" class=\"details\" style=\"display: none;\">"
                 )?;
 
-                for details in details {
-                    writeln!(out, "{details}")?;
-                }
-
+                out.write_all(&details)?;
                 writeln!(out, "</div>")?;
             }
+
+            writeln!(out, "</div>")?;
         }
 
         writeln!(out, "</div>")?;
@@ -221,8 +263,7 @@ fn write_section(
     children: &HashMap<EventId, Child<'_>>,
     closes: &HashMap<EventId, u64>,
     backtrace: Option<&EventBacktrace>,
-    details: &mut Vec<String>,
-    target_id: EventId,
+    d: &mut Vec<u8>,
 ) -> io::Result<()> {
     let Some(close) = closes.get(&id).copied() else {
         return Ok(());
@@ -234,31 +275,18 @@ fn write_section(
     let left = (((open - start) as f32 / total) * 100.0).round() as u32;
     let width = (((close - open) as f32 / total) * 100.0).round() as u32;
 
+    let s = Duration::from_nanos(open);
+    let e = Duration::from_nanos(close);
     let duration = Duration::from_nanos(close - open);
 
-    let s = open - start;
-    let e = close - start;
+    let style = format!("width: {width}%; margin-left: {left}%;");
+    let hover_title = format!("{title} ({s:?}-{e:?})");
 
     writeln!(
         out,
-        "<div data-toggle=\"event-{target_id}-details\" id=\"event-{id}\" class=\"section {title}\" style=\"width: {width}%; margin-left: {left}%;\" title=\"{title} (start: {s}ns, end: {e}ns, duration: {duration:?})\">"
+        "<div id=\"event-{id}\" class=\"section {title}\" style=\"{style}\" title=\"{hover_title}\">"
     )?;
 
-    details.push(format!(
-        r#"
-        <div class="details-title">{title}</div>
-        <div class="details-entry">Start: {s}ns</div>
-        <div class="details-entry">End: {e}ns</div>
-        <div class="details-entry">Duration: {duration:?}</div>
-        "#
-    ));
-
-    if let Some(backtrace) = backtrace {
-        details.push(format!(
-            "<div class=\"details-backtrace\">Backtrace:\n{backtrace}</div>"
-        ));
-    }
-
     if let Some(&(id, title, child_open, backtrace)) = children.get(&id) {
         write_section(
             out,
@@ -269,11 +297,20 @@ fn write_section(
             children,
             closes,
             backtrace,
-            details,
-            target_id,
+            d,
         )?;
     }
 
+    writeln!(d, "<div class=\"title {title}\">{title}</div>")?;
+    writeln!(
+        d,
+        "<div class=\"entry\">{s:?} &mdash; {e:?} ({duration:?})</div>"
+    )?;
+
+    if let Some(backtrace) = backtrace {
+        writeln!(d, "<div class=\"backtrace\">Backtrace:\n{backtrace}</div>")?;
+    }
+
     writeln!(out, "</div>")?;
     Ok(())
 }