I am workin on utilizing an external javascript library called cytoscape.js through JSNI using test data. When I run the script how I want to through JSNI in my java class, it fails to produce the graph. However, when I run it through the Chrome Devtools console, it works correctly.

All of the values pass to the cytoscape.js library seemingly correctly. Currently, the JSNI code fails a test performed by the Javascript library that the console code is able to pass.

Here is the JSNI code I am using:

public static native void cytoscape() /*-{
        var cy = $wnd.cy = $wnd.cytoscape({container: $wnd.document.getElementById('cy'),
            elements: $wnd.glyElements, 
            style: [ { 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 } });

The “$wnd.” is used to get the correct scope.

Here is the console code:

var cy = window.cy = cytoscape({ 
            container: document.getElementById('cy'),
            elements: glyElements, 
            style: [ { 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 } 

The elements I am using in both cases are stored in a .js file and I have made sure they are accessible in both cases. Like I mentioned, Devtools debug shows me the correct values are passed into the cytoscape.js library.

The JSNI code fails this return statement in the cytoscape.js library:

var plainObject = function plainObject(obj) {
    return obj != null && _typeof(obj) === typeofobj && !array(obj) && obj.constructor === Object;

If I comment out “&& obj.constructor === Object;” on line 145 of cytoscape.js, the code runs correctly with my JSNI script. This leads me to believe the cytoscape object is being created differently through JSNI than the console. Still, Dev tools lists the console and JSNI method as providing identical objects. How can I update my JSNI code to make it compliant with this check?

Ideally, JSNI should be usable in this case. I am not sure why passing the values in through JSNI causes this if statement to fail when running it through console passes the if statement.