0

I exported a protein-protien network from Cytoscape 3.1 BETA 3 using the built-in exporter to a JSON (cyjs) file. I tried to import this cyjs file to a web application using Cytoscape.js library but I failed.

I read the question asked by gcpdev yesterday (Exporting and importing JSON data to Cytoscape.js) here, but it doesn't helped me.

Imported JavaScript libraries: jQuery-1.11, Cytoscape.js, Arbor, Arbor-tween. My code is:

<script type="text/javascript">

$('#cy').cytoscape({
  layout: {
    name: 'arbor',
    liveUpdate: true, 
  },

   ready: function(){

     window.cy = this;
     var jsonfile = "src/inside_sc.cyjs";

     $(document).ready(function() {

       $.getJSON(jsonfile, function(json) {
         cy.add( JSON.parse( json ) );
       });

     });

   }
});

</script>

I always get an error message like this on Chrome Console:

Uncaught SyntaxError: Unexpected token o      index.html:38
  (anonymous function)                        index.html:38
  j                                           jquery-1.11.0.min.js:2
  k.fireWith                                  jquery-1.11.0.min.js:2
  x                                           jquery-1.11.0.min.js:4
  b                                           jquery-1.11.0.min.js:4

where index.html is my file and line:38 is:

 cy.add( JSON.parse( json ) );

I got the same error message with changes. Neither work if I add some styling and basic nodes & edges, Nor with $.parseJSON() function.

I tried to change this line to cy.add( json ); The result was the same like the mentioned question above:

 An element must be of type `nodes` or `edges`; you specified `undefined`
 Uncaught TypeError: Cannot read property 'single' of undefined

When I try to show the JSON information to console, like console.log( json ); it works properly.

What is wrong with my script? What should I do?

Community
  • 1
  • 1
Zoliqa
  • 174
  • 1
  • 1
  • 10

1 Answers1

2

As far as I know, the exported JS from Cytoscape-desktop isn't a drop-in replacement for cy.add() or the init options. You'll need to inspect the file generated by Cytoscape-desktop and specify the path to the elements in the JSON in the init options (options.elements).

maxkfranz
  • 11,896
  • 1
  • 27
  • 36
  • Sorry, but I'm a beginner in app developement and I don't really understand. So what should I code to convert a simple CyDesktop export to real CyJS network? How could I implement new elements to elements objects? – Zoliqa Feb 11 '14 at 19:57
  • You need to use `options: { elements: json.path.to.elements }` or similar, where `path.to.elements` is the path in the JSON exported from Cytoscape that points to the elements. – maxkfranz Feb 14 '14 at 00:10
  • @maxkfranz I have a variable `newdata` which contains a string that specifies the `elements`. In `$('#cy').cytoscape({` can I do `elements:newdata`? – Archit Verma Mar 30 '14 at 05:28