I'm trying to integrate Cytoscape.js but I can't.
Application Type
Reactive

I want to display the nodes and edges as the below image with Cytoscape.js. This is what I'm expecting.


I implemented it in the client action but nothing shows on the screen. Then I looked into my logic and debugged it but I can't figure out where I'm missing.


I set cytoscape-min.js and parameter and stuff. Here is Cytoscape.js
"https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.18.2/cytoscape.min.js"
The below is what I implemented.




I set both Jquery and cytoscape-min.js to Required Scripts in Web block(CytoscapeBlock).

These are required to use Cytoscape.


The code is running correctly. I've got  html ,css, js file in my local and confirmed it in my code editor.

Do you have any ideas on why it doesn't work.


I'd appreciate it if you could give me any good tips.

I've attached my oml file for your information. If you don't mind, I'd be nice if you could look into it.


I look forward to it.

Best,

Cytoscape.oml

Hi Tsubasa,

.cy {
        width: 100%;
        height: 500px;
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: yellowgreen;
    }

Please update your style. Height: 100% is not working for the container that its position is absolute. It worked in my environment. 


Sincerely,
Necmettin

Champion

Hi,
Had a quick check.
The Module is implemented correctly & JS you added also prepares the CANVAS.

The Issue is with the Position set from .cy css class.
I changed it on chrome-debug & the canvas appeared.



Hi, assif_tiger 

Thanks. I changed position to "inherit" in StyleSheet of diagram screen and i open in browser "Microsoft Edge" but

it doesn't appear like this.




Is there anything I need to edit in addition to .cy css class?

I wonder if I'm missing somewhere else.


Hi Tsubasa,

.cy {
        width: 100%;
        height: 500px;
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: yellowgreen;
    }

Please update your style. Height: 100% is not working for the container that its position is absolute. It worked in my environment. 


Sincerely,
Necmettin

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.