Merge pull request #78 from OCNS/more_details_view_improvements

sanjayankur31 · web-flow · commit 803db6bbedc7 · 2025-03-12T10:08:00.000Z
More details view improvements
diff --git a/graph.js b/graph.js
@@ -69,15 +69,15 @@ const BUTTON_ROWS = [
     ["forum", "issue tracker", "chat", "email"]
 ];
 
-function urlButton(type, url) {
+function urlButton(type, url, btnClass) {
     const button = document.createElement("button");
     let iconFile = BUTTON_ICONS[type];
     button.type = "button"
-    button.classList.add('btn', 'btn-sm', 'm-1');
+    button.classList.add('btn', 'm-1');
     let icon = `<img aria-hidden='true' focusable='false' class='icon' src='assets/${iconFile}'></img>`;
     button.innerHTML = icon + " " + type;
     if (url !== undefined)  {
-        button.classList.add('btn-info');
+        button.classList.add(btnClass);
         button.onclick = function() {
             window.open(url, "_blank");
         }
@@ -92,6 +92,14 @@ 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");
+    if (centerButton) {
+        centerButton.classList.add("d-none");
+        uncenterButton.classList.remove("d-none");
+    }
+
     // Ignore the meta node
     meta_node.deselect();
     meta_node.remove();
@@ -185,7 +193,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 +220,15 @@ 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");
+    if (centerButton) {
+        centerButton.classList.remove("d-none");
+        uncenterButton.classList.add("d-none");
+    }
+
     // Ignore the meta node
     meta_node.restore();
     meta_node_edges.restore();
@@ -245,7 +261,9 @@ function unhighlightNode(event) {
     };
 
     return_graph_to_init();
-    showDetails(null, null);
+    if (unselect) {
+        showDetails(null, null);
+    }
 }
 
 function updateHighlights() {
diff --git a/index.html b/index.html
@@ -69,7 +69,7 @@ <h5 class="offcanvas-title" id="filter_pane_label">Highlight simulators</h5>
                 <!-- details pane -->
                 <div class="col col-4 d-flex flex-column justify-content-between" style="height: 80vh; overflow: scroll" id="details">
                     <div id="details_top" style="overflow-y: scroll; max-height: 80vh"></div>
-                    <div id="details_bottom"></div>
+                    <div id="details_bottom" class="border-top border-2"></div>
                 </div>
             </div>
         </div>
diff --git a/index.js b/index.js
@@ -42,19 +42,26 @@ function showDetails(data, connected) {
     let description = document.createElement("div");
     if (data["features"].includes("simulator")) {
         const quoted_sim = `[id='${data.id}']`;
-        description.innerHTML = `<div class='d-flex justify-content-between align-items-center'>
+        description.innerHTML = `<div class='d-flex justify-content-between align-items-center sticky-top border-bottom border-2' 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>${data["full_name"]}</h2>`;
+        description.innerHTML = `<h2 class="sticky-top border-bottom border-2" style='background-color: white;'>${data["full_name"]}</h2>`;
     }
     description.innerHTML += "<p>" + data["description"] + "</p>";
     // Relations
@@ -103,20 +110,46 @@ function showDetails(data, connected) {
         link_heading.innerHTML = "Links";
         let tool_links = data["urls"];
         details_bottom.appendChild(link_heading);
+        const flex_div = document.createElement("div");
+        flex_div.classList.add("d-flex", "flex-wrap");
+        const btnClasses = ["btn-primary", "btn-success", "btn-warning"];
         for (let row_idx=0; row_idx < BUTTON_ROWS.length; row_idx++) {
-            let row = document.createElement("div");
-            row.classList.add("row");
             // Go through elements in BUTTON_ROWS
             for (const button_type of BUTTON_ROWS[row_idx]) {
-                let col = document.createElement("div");
-                col.classList.add("col-auto");
-                let button = urlButton(button_type, tool_links[button_type]);
-                col.appendChild(button);
-                row.appendChild(col);
+                let button = urlButton(button_type, tool_links[button_type], btnClasses[row_idx]);
+                flex_div.appendChild(button);
             }
-            details_bottom.appendChild(row);
         }
+        details_bottom.appendChild(flex_div);
+
+        // Back to simulators
+        back_p = document.createElement("p");
+        back_p.classList.add("mt-3");
+        back_button = document.createElement("a");
+        back_button.href = "#";
+        back_button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
+                                    <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z"/>
+                                    <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466"/>
+                                    </svg>&nbsp;Back to simulators`;
+        back_button.classList.add("btn", "btn-secondary");
+        back_button.onclick = function() { cy.nodes(`[id = '${data.id}']`).unselect(); cy.nodes("#simulators").select(); unhighlightNode(); };
+        back_p.appendChild(back_button);
+        details_bottom.appendChild(back_p);
+        // Edit footer
+        edit_p = document.createElement("p");
+        edit_p.classList.add("mt-3", "text-end");
+        edit_link = document.createElement("a");
+        edit_link.classList.add("link-secondary");
+        edit_link.href = `${REPO_URL}/edit/${GIT_BRANCH}/${DATA_FOLDER}/${data["short_name"].replaceAll(" ", "-")}.yaml`;
+        edit_link.innerHTML = "Edit this description on GitHub&nbsp;";
+        edit_link.innerHTML += `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
+                                    <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
+                                </svg>`;
+        edit_link.target = "_blank";
+        edit_p.appendChild(edit_link);
+        details_bottom.appendChild(edit_p);
     }
+
     // hide filter pane
     const filterPane = new bootstrap.Offcanvas('#filter_pane');
     // FIXME: not quite sure what is going on here, but sometimes the internal state is incorrect
