dashboard: figures open on press

1 files changed, 14 insertions, 2 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index d8b8f6c..6490cd5 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -368,8 +368,20 @@ function tree(key, value, path) {
       if (details.open) open.add(path); else open.delete(path);
     });
     const entries = Array.isArray(value) ? value.map((v, i) => [String(i), v]) : Object.entries(value);
-    details.append(el("summary", {}, el("span", { class: "key" }, key),
-      Array.isArray(value) ? " [" + value.length + "]" : ""));
+    const summary = el("summary", {}, el("span", { class: "key" }, key),
+      Array.isArray(value) ? " [" + value.length + "]" : "");
+    // Opened or closed on press, as the peers' rows are focused: the tree is drawn anew
+    // every second (ages), and a click whose press and release land on two drawings is
+    // lost. Keys (Enter, space) still click.
+    summary.addEventListener("pointerdown", event => {
+      if (event.button !== 0) return;
+      event.preventDefault();
+      details.open = !details.open;
+    });
+    summary.addEventListener("click", event => {
+      if (event.detail !== 0) event.preventDefault();
+    });
+    details.append(summary);
     for (const [k, v] of entries) details.append(tree(k, v, path + "." + k));
     return details;
   }