How do I implement click event of Cytoscape.js with JS widget?
Application Type
Reactive

I just implemented a sample app with Cytoscape.js in my Outsystems.

https://tsubasa-yoshikawa.outsystemscloud.com/Cytoscape/diagram?_ts=637929135582616978


What I want to do is

When you put in a Node name in Input widget and click "Search",  it zooms in the Node.

Also this is my Demo page of Cytoscape. If you do what I said above on Demo, you can get what I mean.

https://basatsu.github.io/Cytoscape/cyto2.html?#


However, I can't implement this click function in javascript on Outsystems.


I tried this code in below JS widget (SearchFunction) but it doesn't work. I'm stuck here.


BTW, This is the code I uploaded in my Github. If you go into details, I'd like you to take a look.

https://github.com/basatsu/Cytoscape

https://github.com/basatsu/Cytoscape/blob/main/js/cyto2.js

Like my Javascript (cyto2.js), I embedded this Javascript code into SearcFunction JS widget.


Do you have any solutions to make this click function work?  

I was wondering if you could give me some advice.

Please see attached about my Cytoscape sample app of Outsystems.


Best,



Cytoscape.oml

mvp_badge
MVP
Solution

Hi Tsubasa, 

I didn't encounter the observed exception, probably it might be because of the data. 

Can you try publishing the attached oml and check the same?


Kind regards,

Benjith Sam

Cytoscape.oml

mvp_badge
MVP

Hi Tsubasa,

In addition to the solution which we lastly discussed in this post: Cytoscape Diagram

Add the below JS on search button click:

var j = cy.$('#' + $parameters.SearchNode);

cy.animate({
    fit: {
        eles: j,
        padding: 20
    },
    zoom: 1.2
}, {
    duration: 2000,
});

Also keep the cy object global scoped.

See this demo screen:  Cytoscape Diagram

Refer to the attached oml.


I hope this helps you!


Kind regards,

Benjith Sam

Cytoscape.oml

Thanks.

But, I downloaded your attached oml then uploaded it in my service studio.

The conflict happened so I selected "overwrite my version" then I opened in browser.

I got this error. it keeps happening.

Why does this happen? 


AAA2W02 should not exist in any entities.  I changed all data in ItemList,Item2List,Connect entity.



Does this look familiar?

Best,

mvp_badge
MVP
Solution

Hi Tsubasa, 

I didn't encounter the observed exception, probably it might be because of the data. 

Can you try publishing the attached oml and check the same?


Kind regards,

Benjith Sam

Cytoscape.oml

I looked into it. I wonder if there is a problem about the timing and GetItemListJson and OnRender action....

Sorry, I made a mistake. 

I got what I wanted.


Appreciated!

I'll close this post.

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