Skip to Content (Press Enter)
UserImage.jpg
Tsubasa Yoshikawa
31Views
4Comments
Solved
I'm trying to integrate Cytoscape.js but I can't.
Question
JavaScript
Reactive
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
0
0
27 Sep 2021
Copy Link
2023-12-08 14-41-30
Necmettin Sahinbay
Solution

Replying to Tsubasa Yoshikawa's comment on 27 Sep 2021 11:34:30

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

See solution in context
1
0
27 Sep 2021
Copy Link
2021-04-09 11-42-43
assif_tiger
 
MVP

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.



1
0
27 Sep 2021
Copy Link
UserImage.jpg
Tsubasa Yoshikawa

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.


0
0
27 Sep 2021
Copy Link
2023-12-08 14-41-30
Necmettin Sahinbay
Solution

Replying to Tsubasa Yoshikawa's comment on 27 Sep 2021 11:34:30

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

1
0
27 Sep 2021
Copy Link
UserImage.jpg
Tsubasa Yoshikawa
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.