Getting started

This is an example JS notebook for Cytoscape automation. This format supports common HTML and JS components, in addition to markdown and liquid syntax. For the majority of cases, we recommend a notebook style layout of alternating text (like this) and dynamic elements provided by js4cytoscape.

The Cytoscape Badge

For example, the Cytoscape badge displayed above is provided by js4cytoscape and automatically inserted by the notebook template defined by this site. This badge reports the status of your local instance of Cytoscape, displaying the version if it is successfully detected. With the loaded js4cytoscape js and css, the badge is inserted with this single line of code:

<span class="cytoscape-badge"></span>

Single Command Buttons

Now, let's open a sample network and demo a few of the operations you can control Cytoscape from a JS notebook.

Did you see the session load in your local Cytoscape? This is a simple example of a single js4cytoscape commands associated with a button, like so:

<button onclick="openSession()">Open sample session</button>

Multiple Commands

You can also trigger an entire workflow with a single button click.

This can be accomplished by setting a button id and then defining a function triggered by its click. The function can then perform a series of js4cytoscape commands or whatever you want. Just be sure to use async/await to execute and complete commands in series:

<button id="my-workflow">My workflow</button>

<script>
    $('#my-workflow').click(async function(){
        await closeSession(false);
        await openSession();
        //whatever you want here

    })
</script>

List Installed Apps

Embed Snapshots

You can also take snapshots of your work and then embed them in the notebook.

And here is what that code looks like:

<button id="show-my-work">Show my work</button>
<div id="work-shown"></div>

<script>
    $('#show-my-work').click(function(){
        //export image

        //insert image at div $('#work-shown')

    })
</script>