Skip to content

Commit 3f35b8d

Browse files
mstimbergmstimberg
authored
Merge pull request #85 from OCNS/dev-ankur
Reset fixes, tweaks, and performance improvements
2 parents 5023c84 + 39abe2d commit 3f35b8d

File tree

3 files changed

+58
-48
lines changed

3 files changed

+58
-48
lines changed

‎graph.js‎

Lines changed: 53 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,11 @@ var cy_layout;
55
var removed = [];
66
var meta_node;
77
var meta_node_edges;
8-
const cy_pan = {
9-
x: 0,
10-
y: 0
11-
};
8+
const cy_pan = {};
129
const cy_zoom = {
13-
level: 0
10+
value: 0,
1411
};
12+
var highlighted_node;
1513

1614
function selectionChanged() {
1715
removed.toReversed().forEach(eles => eles.restore());
@@ -42,10 +40,13 @@ function layoutNodes() {
4240
name: "fcose",
4341
animate: "end",
4442
padding: 50,
45-
avoidOverlap: true,
4643
nodeDimensionsIncludeLabels: true,
4744
centerGraph: false,
4845
numIter: 10000,
46+
fit: true,
47+
stop: store_positions,
48+
nodeRepulsion: node => 15000,
49+
quality: "proof",
4950
});
5051
cy_layout.run();
5152
}
@@ -93,6 +94,9 @@ function highlightNode(node) {
9394
if (node.id() == "simulators") {
9495
return;
9596
}
97+
// track highlighted node
98+
highlighted_node = node;
99+
96100
// Swap out center/uncenter buttons
97101
const centerButton = document.getElementById("center_button");
98102
const uncenterButton = document.getElementById("uncenter_button");
@@ -203,29 +207,48 @@ function unhighlightNode(event, unselect) {
203207

204208
// return graph to initial state
205209
const return_graph_to_init = () => {
206-
cy.edges().forEach(n => {n.style("curve-style", "unbundled-bezier"); n.style("min-zoomed-font-size", 36)});
207-
cy.animate(
208-
{
209-
pan: cy_pan,
210+
211+
// reset edges
212+
var moved_edges = highlighted_node.closedNeighbourhood((el) => {return el.isEdge()});
213+
moved_edges.forEach(n => {n.style("curve-style", "unbundled-bezier"); n.style("min-zoomed-font-size", 36)});
214+
215+
// reset moved nodes
216+
var moved_nodes = highlighted_node.closedNeighbourhood((el) => {return el.isNode()});
217+
const node_animations = moved_nodes.map(n => n.animation({
218+
position: n.initial_position,
210219
duration: 1500,
211220
easing: 'ease',
212-
zoom: {
213-
level: cy_zoom.level,
221+
queue: false,
222+
fit: {
223+
eles: cy.nodes(),
224+
padding: 50,
214225
},
215-
complete: () => {
216-
console.log("New pan: " + JSON.stringify(cy.pan()) + ", zoom: " + cy.zoom());
226+
})
227+
);
228+
229+
const viewport_animation = cy.animation(
230+
{
231+
pan: cy_pan,
232+
duration: 1500,
233+
easing: 'ease',
234+
queue: false,
235+
zoom: {
236+
level: cy_zoom.value,
237+
},
238+
fit: {
239+
eles: cy.nodes(),
240+
padding: 50,
241+
},
242+
complete: () => {
243+
console.log("New pan: " + JSON.stringify(cy.pan()) + ", zoom: " + cy.zoom());
244+
}
217245
}
218-
});
219-
cy.nodes().forEach(n => n.animation({
220-
position: n.initial_position,
221-
duration: 1500,
222-
easing: 'ease',
223-
complete: () => {
224-
console.log("Init pos: " + n.id() + ": " + n.initial_position.x + ", " + n.initial_position.y);
225-
console.log("New pos: " + n.id() + ": " + n.position().x + ", " + n.position().y);
226-
}
227-
}).play());
246+
);
228247

248+
const node_promises = node_animations.map(an => an.play().promise());
249+
Promise.all([...node_promises, viewport_animation.play().promise]).then(() => {
250+
console.log("Apparently " + moved_nodes.length + " nodes and viewport animations all have completed");
251+
});
229252
};
230253

231254
return_graph_to_init();
@@ -345,9 +368,6 @@ function create_cy_elements(data, style) {
345368
cy.on("drag", "node", store_positions);
346369
cy.$("#simulators").select();
347370
selectionChanged();
348-
349-
// when the layout stops the first time, we store positions of the nodes
350-
cy_layout.one('layoutstop', store_positions);
351371
}
352372

353373
function store_positions(event) {
@@ -357,22 +377,20 @@ function store_positions(event) {
357377
if (event.type === "drag")
358378
{
359379
n = event_target;
360-
const new_pos = {x: n.renderedPosition().x, y: n.renderedPosition().y};
380+
const new_pos = {x: n.position().x, y: n.position().y};
361381
n.initial_position = new_pos;
362382

363383
console.log("Node was dragged");
364384
console.log("New pos: " + n.id() + ": " + n.initial_position.x + ", " + n.initial_position.y);
365385
}
366386
else {
367-
cy.nodes().forEach(n => {const init_pos = {x: n.renderedPosition().x, y: n.renderedPosition().y}; n.initial_position = init_pos;});
387+
cy.nodes().forEach(n => {const init_pos = {x: n.position().x, y: n.position().y}; n.initial_position = init_pos;});
368388
cy.nodes().forEach(n => {console.log("Init pos: " + n.id() + ": " + n.initial_position.x + ", " + n.initial_position.y);});
369-
//
370-
// store the initial pan values
371-
cy_pan.x = cy.pan().x;
372-
cy_pan.y = cy.pan().y;
373389

374-
// store the initial zoom values
375-
cy_zoom.level = cy.zoom();
390+
Object.assign(cy_pan, cy.pan());
391+
// cy.zoom does not return an object
392+
cy_zoom.value = cy.zoom();
393+
376394
console.log("Initial pan: " + JSON.stringify(cy_pan) + ", zoom: " + JSON.stringify(cy_zoom));
377395
}
378396
}

‎index.html‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -62,27 +62,18 @@ <h5 class="offcanvas-title" id="filter_pane_label">Highlight simulators</h5>
6262
</div>
6363

6464
<!-- main content -->
65-
<div class="container-fluid" style="height: 85vh; width: 100vw;">
65+
<div class="container-fluid" style="height: 90vh; width: 100vw;">
6666
<div class="row" >
6767
<!-- graph -->
68-
<div class="col col-8" style="height: 85vh" id="cy"></div>
68+
<div class="col col-8" style="height: 90vh" id="cy"></div>
6969

7070
<!-- details pane -->
71-
<div class="col col-4 d-flex flex-column justify-content-between" style="height: 80vh; overflow: scroll" id="details">
71+
<div class="col col-4 d-flex flex-column justify-content-between" style="height: 90vh; overflow: scroll" id="details">
7272
<div id="details_top" style="overflow-y: scroll; max-height: 80vh"></div>
7373
<div id="details_bottom" class="border-top border-2"></div>
7474
</div>
7575
</div>
7676
</div>
77-
78-
<!-- footer -->
79-
<div class="container-fluid">
80-
<footer class="d-flex flex-wrap justify-content-evenly text-center py-3 my-4 border-top">
81-
<p class="col-md-4 mb-0 text-muted">&copy; 2024 Simselect contributors</p>
82-
<p class="col-md-4 mb-0 text-muted">Built with <a href="https://js.cytoscape.org">cytoscape</a></p>
83-
<p class="col-md-4 mb-0 text-muted"><a href="https://github.com/OCNS/Simselect">Sources</a></p>
84-
</footer>
85-
</div>
8677
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
8778
</body>
8879

‎index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ function showDetails(data, connected) {
2626
details_top.innerHTML += "<h3 class='mt-3'>Contributing</h2>";
2727
details_top.innerHTML += `<p>Contributions are welcome! If you have anything to add or correct in the data,
2828
please follow the link at the end of the tool's details view to edit the data on GitHub.
29-
You can also open an <a href='${REPO_URL}/issues'>issue on the GitHub repository</a>.</p>`;
29+
You can also view the <a href='${REPO_URL}'>sources</a> or open an <a href='${REPO_URL}/issues'>issue on the GitHub repository</a>.</p>`;
30+
details_top.innerHTML += "<p>&copy; 2024 Simselect contributors. Built with <a href='https://js.cytoscape.org'>cytoscape</a>.</p>"
3031
details_bottom.innerHTML = "<div class='d-flex'>";
3132
details_bottom.innerHTML += "<h3 class='mt-3'>List of simulators</h2>";
3233
for (const sim of SIMULATORS) {

0 commit comments

Comments
 (0)