CODEWITHSUNDEEP
cytoscape.js
JD.
JD.

Reputation: 2487

How to reload graph in cytoscape.js?

Is there a function that resets the graph to it's freshly loaded state? I've tried cy.reset() but that just resets zoom and pan, not restoring to the virgin graph.

Also is there a way to restore all removed elements?

Thanks!

Upvotes: 6

Views: 10219

Answers (3)

Victoria Stuart
Victoria Stuart

Reputation: 5072

With data (here, a .cyjs file exported from Cytoscape), loaded via a function into Cytoscape.js, and redrawn at the click of a button.

<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>

<body>
  <div id='cy'></div>

  <script>
  $.getJSON("ontology2.cyjs", function (data) {
    var cy = cytoscape({
      container: document.getElementById('cy'),
      elements: data.elements,
      // ...
      });

    // Reset graph:
    $('button.reset')
        .on("click", function() {
            cy.remove('node["*"]');
            cy.add(data.elements);
        });
    });
  </script>

  <button class="reset">Reset</button>
<body>

cytoscape.js reset button demo

Upvotes: 0

Eduardo Vazquez
Eduardo Vazquez

Reputation: 2574

Save in a variable the elements you removed, e.g.:

const elsRemoved = cy.elements().remove();

Then, for restoring them simply call:

elsRemoved.restore();

Refer to https://js.cytoscape.org/#eles.restore for more info

Upvotes: 0

maxkfranz
maxkfranz

Reputation: 12242

Call cy.elements().remove() and cy.add() with the same graph data.

Upvotes: 3

Related Questions