-1

I'm trying to explore the cytoscape graph core object and I want to access its properties in runtime. Can I use Node.js interpreter to instantiate the cy object and run methods on the elements ? If this is an option, I also don't understand where 're real graphics going to be displayed. Is Node.js will open a browser window ?

chenchuk
  • 5,324
  • 4
  • 34
  • 41

2 Answers2

1

Node.js REPL represents JavaScript interpreter, but it has no relation to DOM. From the examples on how to use cytoscape, the DOM is required:

var cy = cytoscape({
  container: document.getElementById('cy') // container to render in
});

So it seems you can't use cytoscape's visual features with REPL. However, the docs says that:

container : A HTML DOM element in which the graph should be rendered. This is unspecified if Cytoscape.js is run headlessly.

But I think you can use REPL to run Cytoscape headlessly.

Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488
  • When using node.js the docs says that cytoscape will run headlessly. So I guess there is an option but I'm not I understand how – chenchuk Jan 07 '17 at 18:03
  • i understand that headlessly means that its not bounded to HTML element because it runs in a non browser environment. however, if this is the case - then what is the meaning on running it in node.js ? its a graphical library – chenchuk Jan 07 '17 at 19:22
  • @chenchuk, I have no idea. You askedif it can be run inside REPL, and I answered that question. – Max Koretskyi Jan 07 '17 at 19:27
  • 1
    Use cytosnap to generate snapshots on Node.js: https://github.com/cytoscape/cytosnap – maxkfranz Jan 09 '17 at 16:48
  • "then what is the meaning on running it in node.js ? its a graphical library" It's a visualisation lib *and* an analysis lib for graph theory. You could use Cytoscape and a spidering lib on Node.js to implement Google search, for instance. – maxkfranz Jan 25 '17 at 22:57
0

Actually i just find how to run Cytoscape in a REPL environment. still didnt find a way to display it graphically, but i can interact with the object to explore its properties :

$ node
>var cytoscape = require('cytoscape');
>var cy = cytoscape({
  container: document.getElementById('cy'), // container to render in
  elements: [ // list of graph elements to start with
    { // node a
      data: { id: 'a' }
    },
    { // node b
      data: { id: 'b' }
    },
    { // edge ab
      data: { id: 'ab', source: 'a', target: 'b' }
    }
  ],
  style: [ // the stylesheet for the graph
    {
      selector: 'node',
      style: {
        'background-color': '#666',
        'label': 'data(id)'
      }
    },

    {
      selector: 'edge',
      style: {
        'width': 3,
        'line-color': '#ccc',
        'target-arrow-color': '#ccc',
        'target-arrow-shape': 'triangle'
      }
    }
  ],
  layout: {
    name: 'grid',
    rows: 1
  }
});

After i instantiate the cy object, i can interact with it by typing :

> cy.
cy.__defineGetter__      cy.__defineSetter__
cy.__lookupGetter__      cy.__lookupSetter__
cy.__proto__             cy.constructor
cy.hasOwnProperty        cy.isPrototypeOf
cy.propertyIsEnumerable  cy.toLocaleString
cy.toString              cy.valueOf

> cy.elements().forEach(function(e){ console.log(e.data())});
{ id: 'a' }
{ id: 'b' }
{ id: 'ab', source: 'a', target: 'b' }
chenchuk
  • 5,324
  • 4
  • 34
  • 41