Skip to content

More details view improvements #78

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sanjayankur31 merged 7 commits into from
Mar 12, 2025
Merged

More details view improvements #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
29471ea
feat: Details pane: make title stick to the top
mstimberg Feb 27, 2025
b4f8c11
feat: Details pane: use different colors for button categories
mstimberg Feb 27, 2025
748c994
fix: Details pane: bring back "Back to simulators" and "Edit this des…
mstimberg Feb 27, 2025
1b9499d
feat: Detail pane: zoom in/out via button next to title
mstimberg Feb 27, 2025
791b28e
fix: Fix errors after clicking edges
mstimberg Mar 11, 2025
db47422
feat: set apart top and bottom with background color
mstimberg Mar 11, 2025
ac10825
feat: replace background by more subtle border
mstimberg Mar 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 24 additions & 6 deletions graph.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
}
Expand All @@ -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();
Expand Down Expand Up @@ -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");
Expand All @@ -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();
Expand Down Expand Up @@ -245,7 +261,9 @@ function unhighlightNode(event) {
};

return_graph_to_init();
showDetails(null, null);
if (unselect) {
showDetails(null, null);
}
}

function updateHighlights() {
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
67 changes: 50 additions & 17 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down