feat: Detail pane: zoom in/out via button next to title

Author: mstimberg

graph.js

@@ -92,6 +92,12 @@ function highlightNode(node) {
     if (node.id() == "simulators") {
         return;
     }
+    // Swap out center/uncenter buttons
+    const centerButton = document.getElementById("center_button");
+    const uncenterButton = document.getElementById("uncenter_button");
+    centerButton.classList.add("d-none");
+    uncenterButton.classList.remove("d-none");
+
     // Ignore the meta node
     meta_node.deselect();
     meta_node.remove();
@@ -185,7 +191,7 @@ function highlightElement(event) {
         // Only unhilight node if double tapped on background
         // Single tap is too error prone
         if (event.type === "dbltap") {
-            unhighlightNode(null);
+            unhighlightNode(null, true);
         }
         else {
             console.log("No-op: single tap on background");
@@ -212,7 +218,13 @@ function highlightElement(event) {
     }
 }
 
-function unhighlightNode(event) {
+function unhighlightNode(event, unselect) {
+    // Swap out center/uncenter buttons
+    const centerButton = document.getElementById("center_button");
+    const uncenterButton = document.getElementById("uncenter_button");
+    centerButton.classList.remove("d-none");
+    uncenterButton.classList.add("d-none");
+
     // Ignore the meta node
     meta_node.restore();
     meta_node_edges.restore();
@@ -245,7 +257,9 @@ function unhighlightNode(event) {
     };
 
     return_graph_to_init();
-    showDetails(null, null);
+    if (unselect) {
+        showDetails(null, null);
+    }
 }
 
 function updateHighlights() {

index.js

@@ -44,14 +44,21 @@ function showDetails(data, connected) {
         const quoted_sim = `[id='${data.id}']`;
         description.innerHTML = `<div class='d-flex justify-content-between align-items-center sticky-top' style='background-color: white;'>
                             <h2>${data["full_name"]}</h2>
-                            <button class='btn btn-outline-primary align-middle' title='Center ${data["short_name"]} in the graph' onclick="highlightNode(cy.nodes('${quoted_sim.replace(/'/g, "\\'")}'));">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bullseye" viewBox="0 0 16 16">
-                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
-                            <path d="M8 13A5 5 0 1 1 8 3a5 5 0 0 1 0 10m0 1A6 6 0 1 0 8 2a6 6 0 0 0 0 12"/>
-                            <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8"/>
-                            <path d="M9.5 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
+                            <div id='center_button'>
+                            <button class='btn btn-outline-primary align-middle m-1 me-2' title='Center ${data["short_name"]} in the graph' onclick="highlightNode(cy.nodes('${quoted_sim.replace(/'/g, "\\'")}'));">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-zoom-in" viewBox="0 0 16 16">
+                            <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11M13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0"/>
+                            <path d="M10.344 11.742q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1 6.5 6.5 0 0 1-1.398 1.4z"/>
+                            <path fill-rule="evenodd" d="M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5"/>
+                            </svg>
+                            </div>
+                            <div class="d-none" id='uncenter_button'>
+                            <button class='btn btn-outline-primary align-middle m-1 me-2' title='Go back to default view' onclick="unhighlightNode(null);">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-zoom-out" viewBox="0 0 16 16">
+                            <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11M13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0"/>
+                            <path d="M10.344 11.742q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1 6.5 6.5 0 0 1-1.398 1.4z"/>
+                            <path fill-rule="evenodd" d="M3 6.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5"/>
                             </svg>
-                            </button>
                             </div>`;
     } else {
         description.innerHTML = `<h2 class="sticky-top" style='background-color: white;'>${data["full_name"]}</h2>`;