Nasty interaction between Cytoscape.js and JSmol

[Roberto Mosca]

Dear all,

I am experiencing some very nasty problem when using Cytoscape.js together with another library called JSmol for molecular visualization. I don't know if the problem depends on Cytoscape.js or JSmol. When loading the two libraries separately they work perfectly, but loading them together generates erratic behaviour in Cytoscape.

Can anyone help me understanding what's going on?

I prepared a tarball (https://www.dropbox.com/s/0k8lufk4gdj602g/cytoscape.js_jsmol.tgz?dl=0) of a very simple page that shows the problem:

The page contains a cytoscape network on the left and a JSmol view on the right. If you click on any of the nodes in the network to select it, it becomes green (correct). But when you click on the background to unselect the node, then it looses its original format. This does not happen if you load Cytoscape.js alone.

Any idea why?

Any help would be greatly appreciated! :)

Best,

Roberto

[Chris Morris]

An alternative to JSMol is PV (Protein Viewer)

[Roberto Mosca]

Thanks Chris!

PV is indeed a beautiful and superfast viewer. The problem is that it does not support setting callbacks for click events inside the viewer (calling functions upon clicking on an atom, for example) and it uses WebGL for rendering which makes it unusable in certain platforms (like most of the mobile platforms...).

Any idea of where the interference might happen? Or how to insulate the two libraries from each other?

I was trying to use Require.js but I have to admit I don't quite know how to use it...

Best,

Roberto

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.
Visit this group at http://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--
La chiocciol@

http://lachiocciola.tumblr.com/

[Roberto Mosca]

News on this topic. I moved back to version 2.1.0 and the two libraries can now work side by side on the same page without problems.

Evidently, something that has been introduced in Cytoscape in between version 2.1.0 and 2.3.1 is related to this strange behavior...

I was wondering if the interference might be due to some global variable sharing the same name. What I got sometimes (but not in all conditions) is a type error related to some variables containing the position of an element ({x:..., y:...}...).

Does this trigger any idea on where to look at for the problem?

Thanks again for your help!

Roberto

[Max Franz]

JSMol might dirty the global namespace by changing the prototypes of builtin objects or by replacing them altogether.  Cytoscape.js uses Mocha for testing, and it can detect global leaks (so I doubt the issue is on the Cytoscape.js side).  You may want to test JSMol and your app itself with Mocha.  This may shed light on the issue.

I strongly suggest against downgrading Cytoscape.js, especially so far as 2.1.  Version 2.2 and 2.3 both have many new features, performance enhancements, and fixes.  It’s not a good long term strategy to downgrade, either, as it will lock you out of future updates (especially bugfixes).

If you must use JSMol, then instead of downgrading Cytoscape.js, I suggest patching JSMol.  I also quickly tried your example, and it seems there are other errors too: 

If you find any issue on the Cytoscape.js side, please don’t hesitate to file an issue.

-Max

[Max Franz]

Another possibility: It might also be related to your application code:  You shouldn’t be sharing/passing objects (like position) around unless you know the code you’re calling is read-only.  If you’re passing objects around and multiple libs think that they “own” those objects, you could run into trouble.  It’s probably safest to copy objects like this when you get them so you don’t have to worry.

On Monday, 29 September 2014 at 04:11, Roberto Mosca wrote:

[Roberto Mosca]

Thanks Max,

in fact it turned out to be a problem of JSmol. Fortunately they have solved it (see email below) and now I can go back to the latest Cytoscape.js 2.3.1.

Great to receive so much help! :)

Best,

Roberto

On Tue, Sep 30, 2014 at 7:00 AM, Robert Hanson <han...@stolaf.edu> wrote:

Thanks for alerting us, Roberto.

Thanks for the clue, Rolf. 

JSmol was inappropriately creating the function Array.isArray(). This was a bug in the core Java2Script code.

It is not relevant to Jmol and not advised in Java anyway.

http://chemapps.stolaf.edu/jmol/zip/jmol-14.3.7_2014.09.29.zip

Jmol.___JmolVersion="14.3.7_2014.09.29"

bug fix: JavaScript j2sjmol.js -- should not create Array.isArray() method as it conflicts with
   JavaScript Array.isArray(a)

Bob

-- 

Robert M. Hanson
Larson-Anderson Professor of Chemistry
Chair, Department of Chemistry
St. Olaf College
Northfield, MN
http://www.stolaf.edu/people/hansonr


If nature does not answer first what we want,
it is better to take what answer we get. 

-- Josiah Willard Gibbs, Lecture XXX, Monday, February 5, 1900