-1

I am new to Cytoscape.js and also didn't write JavaScript or HTML before.

I installed Cytoscape.js by using npm:

npm install cytoscape

I then created a HTML file from HTML-Kit as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<script src="cytoscape.js"></script>
</head>
</html>

I placed this HTML file under cytoscape.js-2.7.14 folder where the file cytoscape.js resides.

I then opened my HTML file with Chrome. The window (and tab) is opened, but there is nothing there.

I then modified my HTML file as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Testing Cytoscape</title>
</head>
<body>
<script src="cytoscape.js"></script>
</body>
</html>

But there is still nothing in the window when I opened the HTML file.

Any ideas on how to run Cytoscape.js?

Thanks for advice!

qcx
  • 81
  • 1
  • 2
  • 7
  • Follow the steps given in [doc](https://js.cytoscape.org/#getting-started/initialisation), General steps are like this, Import cytoscape js either using npm or CDN, Then create a
    with a id = cy (This is where the cytoscape canvas will be created), Initialize cytoscape object with this div id and graph elements (nodes and edges) also some style
     – Abhi Jul 07 '21 at 03:34

2 Answers2

1

Cytoscape.js is a library.

Library can't do anything by itself. You can't just run it and get a result. You need to write your code to initialize and use a library.

To use it properly, follow tutorials and guides on their website.

u32i64
  • 2,384
  • 3
  • 22
  • 36
0

You can use it many ways, with a web client side only, or distributed architecture with web server. Here is an exemple for a web client side only, where cytoscape libraries are not downloaded but referenced on the web. You can also use it though a notebook, e.g. with Observable. https://observablehq.com/@nfigay/test-adding-compound-with-cytoscape-js

<!DOCTYPE>
<html>
<head>
  
   <title>Test Compound Graph Editor</title>
   <meta charset="utf-8"/>
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
   <script src="https://unpkg.com/cytoscape@3.21.0/dist/cytoscape.min.js"></script>
   <script src="https://unpkg.com/layout-base@2.0.1/layout-base.js"></script>
   <script src="https://unpkg.com/cose-base@2.1.0/cose-base.js"></script>
   <script src="https://unpkg.com/cytoscape-fcose@2.1.0/cytoscape-fcose.js"></script>
   <script src="https://unpkg.com/cytoscape-expand-collapse@4.1.0/cytoscape-expand-collapse.js"></script>
   <script src="https://unpkg.com/pure-uuid@1.6.2/uuid.js"></script>
</head>

<body>
  <div id="cy" style="width:100%;height:90%;background-color:white"></div>

       <div class="menu-container">
          <div style="text-align:center" class="panel">        
             <button id="compound">Add Compound Node</button>  
             <button id="collapseAll">Collapse all</button>
             <button id="collapseRecursively">Collapse Recursively</button>
             <button id="expandAll">Expand all</button> 
             <button id="expandRecursively">Expand Recursively</button>             
          </div>        

 </div>
</body>

<script>
var myData = [
    { data: { id: "o", "label": "Top node" } },
    { data: { id: "a", parent: "o", "label": "a" } },
    { data: { id: "b", parent: "o" } },
    { data: { id: "c", parent: "o" } },
    { data: { id: "d", parent: "o" } },
    { data: { id: "e", parent: "o" } },
    { data: { id: "f", parent: "o" } },
    { data: { id: "a1", parent: "a" } },
    { data: { id: "b1", parent: "b" } },
    { data: { id: "c1", parent: "c" } },
    { data: { id: "d1", parent: "d" } },
    { data: { id: "e1", parent: "e" } },
    { data: { id: "f1", parent: "f" } },
    { data: { id: "a2", parent: "a" } },
    { data: { id: "b2", parent: "b" } },
    { data: { id: "c2", parent: "c" } },
    { data: { id: "d2", parent: "d" } },
    { data: { id: "e2", parent: "e" } },
    { data: { id: "f2", parent: "f" } },
    { data: { id: "a3", parent: "a" } },
    { data: { id: "b3", parent: "b" } },
    { data: { id: "c3", parent: "c" } },
    { data: { id: "d3", parent: "d" } },
    { data: { id: "e3", parent: "e" } },
    { data: { id: "f3", parent: "f" } },
    { data: { id: "a4", parent: "a" } },
    { data: { id: "b4", parent: "b" } },
    { data: { id: "c4", parent: "c" } },
    { data: { id: "d4", parent: "d" } },
    { data: { id: "e4", parent: "e" } },
    { data: { id: "f4", parent: "f" } },
    { data: { id: "a5", parent: "a" } },
    { data: { id: "b5", parent: "b" } },
    { data: { id: "c5", parent: "c" } },
    { data: { id: "d5", parent: "d" } },
    { data: { id: "e5", parent: "e" } },
    { data: { id: "f5", parent: "f" } },
    { data: { id: "a6", parent: "a" } },
    { data: { id: "b6", parent: "b" } },
    { data: { id: "c6", parent: "c" } },
    { data: { id: "d6", parent: "d" } },
    { data: { id: "e6", parent: "e" } },
    { data: { id: "f6", parent: "f" } }
  ];

  
var cy = window.cy = cytoscape({
   container: document.getElementById("cy"),
   ready: function () {
      
        this.layout({
          name: "fcose",
          randomize: true,
          fit: true,
          animate: true,
          nodeDimensionsIncludeLabels: true,
          condense: false
         }).run(20, 0, 10);

        var api = this.expandCollapse({
          layoutBy: {
             name: "fcose",
             animate: true,
             randomize: false,
             fit: true,
             nodeDimensionsIncludeLabels: true,
             condense: false
             },
          fisheye: true,
          animate: true,
          undoable: false
        });
    
        api.expandAll({
          layoutBy: {
             name: "fcose",
             animate: true,
             randomize: false,
             fit: true,
             nodeDimensionsIncludeLabels: true,
             condense: false
          },
          fisheye: true,
          animate: true,
          undoable: false,
          nodeDimensionsIncludeLabels: true,
          condense: false
        });
      },
   elements: myData,
   style: [
     {
       selector: "node",
       style: {
         "label": (ele) => ele.data("label"),
         "color": "blue",
         "shape": "diamond"
       }
     },
     {
       selector: "node.cy-expand-collapse-collapsed-node",
       style: {
          "shape": "rectangle",
          "border-color":"black",
          "border-width":3,
          "color":"blue"
      }
     },
     {
       selector: ":selected",
       style: {
         "overlay-color": "green",
         "overlay-opacity": 0.3,
         'background-color': 'green',
         'shape': 'rectangle',
       }
     },
     {
       selector: ":parent",
       style: {
         "background-color": "yellow",
         "z-compound-depth": "auto",
         shape: "rectangle"
       }
     },
     {
       selector: "edge",
       style: {
         "target-arrow-shape": "triangle",
         "target-endpoint": "outside-to-node",
         "target-arrow-color": "lightgreen",
         "line-color": "green",
         "target-distance-from-node": 0
       }
     }  
   ],
   layout: { name: "fcose" },

   style: [
     {
       selector: "edge",
       style: {
         "curve-style": "bezier",
         "target-arrow-shape": "triangle"
       }
     }   
   ],

   wheelSensitivity: 0.5
   });

var api = cy.expandCollapse("get");


document.getElementById("collapseAll").addEventListener("click", function () {
api.collapseAll();
});

document.getElementById("expandAll").addEventListener("click", function () {
api.expandAll();
});
document
.getElementById("collapseRecursively")
.addEventListener("click", function () {
  api.collapseRecursively(cy.$(":selected"));
});

document
.getElementById("expandRecursively")
.addEventListener("click", function () {
  api.expandRecursively(cy.$(":selected"));
});

document.getElementById("compound").addEventListener("click", function () {
var selection = cy.nodes(":selected");
if (selection.length < 1) {
  return;
}
var parent = selection[0].parent().id();
for (let i = 1; i < selection.length; i++) {
  if (parent !== selection[i].parent().id()) {
    return;
  }
}
var myUUID = new UUID(4);
const parentNode = {
  data: { id: `${myUUID}`, parent: parent, label: "label" }
};
cy.add(parentNode);
for (let i = 0; i < selection.length; i++) {
  selection[i].move({ parent: `${myUUID}` });
}
api.expandAll();
});


</script>
</html>
Dave Newton
  • 158,873
  • 26
  • 254
  • 302
Nicolas Figay
  • 11
  • 3