Skip to content

Make edges not interactive, curve edges on reset #79

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
mstimberg merged 5 commits into from
Mar 12, 2025
Merged

Make edges not interactive, curve edges on reset #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
98dea8d
feat: return edges to curves when resetting
sanjayankur31 Mar 12, 2025
1916fbf
feat: no op when edges are clicked
sanjayankur31 Mar 12, 2025
6fc8aa2
feat: make edges not clickable
sanjayankur31 Mar 12, 2025
02f7673
fix: do not show edge labels after going back to initial view
mstimberg Mar 12, 2025
55ad2d1
feat: configure zoom levels and wheel sensitivity
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
3 changes: 2 additions & 1 deletion assets/cy-style.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
"line-color": "#e2e2e2",
"target-arrow-color": "#e2e2e2",
"color": "#1984c5",
"edge-text-rotation": "autorotate"
"edge-text-rotation": "autorotate",
"events": "no"
}
},
{
Expand Down
51 changes: 13 additions & 38 deletions graph.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,42 +150,7 @@ function showNodeDetails(node) {
}

function highlightEdge(edge) {
const details_top = document.getElementById("details_top");
const details_bottom = document.getElementById("details_bottom");
details_bottom.innerHTML = "";
const headerElement = document.createElement("h2");
headerElement.innerHTML = edge.id();

const sourceLink = document.createElement("a");
sourceLink.href = "#";
sourceLink.addEventListener("click",function(e) { edge.unselect(); edge.source().select(); });
sourceLink.innerHTML = edge.source().id();

const targetLink = document.createElement("a");
targetLink.href = "#";
targetLink.addEventListener("click",function(e) { edge.unselect(); edge.target().select(); });
targetLink.innerHTML = edge.target().id();

details_top.innerHTML = "";

const paragraph = document.createElement("p");
paragraph.appendChild(sourceLink);
const label = document.createElement("i");
label.innerHTML = " " + edge.data("label") + " ";
paragraph.appendChild(label);
paragraph.appendChild(targetLink);
details_top.appendChild(headerElement);
details_top.appendChild(paragraph);
// Only show the edge and the connected nodes
cy.elements().forEach(n => n.style("opacity", 0.2));
edge.style("opacity", 1);
edge.connectedNodes().forEach(n => n.style("opacity", 1));
// 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
if (document.getElementById("filter_pane").classList.contains("show"))
filterPane._isShown = true;
filterPane.hide();
console.log("Edge double tapped: no op");
}

function highlightElement(event) {
Expand Down Expand Up @@ -237,6 +202,7 @@ function unhighlightNode(event, unselect) {

// return graph to initial state
const return_graph_to_init = () => {
cy.edges().forEach(n => {n.style("curve-style", "unbundled-bezier"); n.style("min-zoomed-font-size", 36)});
cy.animate(
{
pan: cy_pan,
Expand All @@ -258,6 +224,7 @@ function unhighlightNode(event, unselect) {
console.log("New pos: " + n.id() + ": " + n.position().x + ", " + n.position().y);
}
}).play());

};

return_graph_to_init();
Expand Down Expand Up @@ -332,7 +299,12 @@ function newEdge(name, relation) {
id: name + " → " + relation["name"],
source: name,
target: relation["name"],
label: relation["description"]
label: relation["description"],
style: {
"event": "no",
"selectable": false,
"grabbable": false
},
}
}
}
Expand All @@ -358,7 +330,10 @@ function create_cy_elements(data, style) {
container: document.getElementById('cy'),
elements: elements,
layout: { name: 'random' },
style: style
style: style,
minZoom: 0.75,
maxZoom: 4,
wheelSensitivity: 0.2,
});
// store the meta_node, since we need to remove it when highlighting nodes
meta_node = cy.$("#simulators");
Expand Down
4 changes: 2 additions & 2 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ function showDetails(data, connected) {
details_top.innerHTML += "<ul>";
details_top.innerHTML += "<li>Use the 'Toggle Filters' button to activate the simulation engine filter.</li>";
details_top.innerHTML += "<li>Select what simulation engines you would like to show in the graph.</li>";
details_top.innerHTML += "<li>Select a node/edge to see its ecosystem in the graph.</li>";
details_top.innerHTML += "<li>Double click/tap on a node/edge to see details of the tool.</li>";
details_top.innerHTML += "<li>Select a node to see its ecosystem in the graph.</li>";
details_top.innerHTML += "<li>Double click/tap on a node to see details of the tool.</li>";
details_top.innerHTML += "<li>Click outside to unselect nodes.</li>";
details_top.innerHTML += "</ul>";
details_top.innerHTML += "<h3 class='mt-3'>Contributing</h2>";
Expand Down