cytoscape / cytoscape.js

Graph theory (network) library for visualisation and analysis
https://js.cytoscape.org
MIT License
9.91k stars 1.64k forks source link

Add 'cytoscape-node-edge-html-label' to list of UI extensions #3245

Open laikmokashi opened 1 month ago

laikmokashi commented 1 month ago

Description of new feature

New feature provide you freedom to create an html and positioned it on any place on edge or on node.

Motivation for new feature

having HTML on edge and on node can provide better ui and similarly can provide better understanding of overall structure. It also help you with having adding events on nodes and lables image

For reviewers

Reviewers should ensure that the following tasks are carried out for incorporated issues:

mikekucera commented 1 month ago

Take a look at the cytoscape-layers extension.

https://www.npmjs.com/package/cytoscape-layers

laikmokashi commented 1 month ago

@mikekucera Sorry i am new to open source contribution but can you help me with which UI extension exactly help me to render html on edges rather than just a labeled text. I have seen it is available for nodes but i didn't get anything for edges , hence i have created new Ui library with the help of node-html-label .

url : https://www.npmjs.com/package/cytoscape-node-edge-html-label sample project : https://github.com/laikmokashi/cytoscape-node-edge-html-lable-example

can you please have a look on it and tell me if we can add it in UI extensions , because i have faced lots of issue to achieve that functionality in my project

mikekucera commented 1 month ago

Sorry, I'm not sure what you're asking for. Did you create a new extension or did you modify an existing extension? The repository link on the NPM page is broken so I'm not sure.

HTML is outside of the scope of cytoscape.js itself, and is best done in an extension. If you have a new extension we can add it to the list of extensions in the docs. But if its a copy of an existing extension (node-html-label?) with modifications then the new functionality should probably be a PR contribution to that extension's repository.

laikmokashi commented 1 month ago

yes i have used source code of node-html-lable only but with this fuctionality i thinks it can act as an complete new library because lot many changes are done for that. what should i do then ? should i add PR contribution or it should add as an new extention only?

mikekucera commented 1 month ago

Ideally this should be a modification to node-html-label. However it doesn't look like that repository is being actively maintained, so that might not be an option. If you want I can add this new extension to the list of UI extensions in the docs.

laikmokashi commented 1 month ago

Allow me some time i will test all scenario again and will create better project so people can get better idea to use it. Thank You . Once done can i connect you on this thread only ?

mikekucera commented 1 month ago

yes, thanks

laikmokashi commented 1 month ago

Hello @mikekucera I have tested the code for extension and also created demo on it. i have published the demo which is visible to everyone. can you please have a look on it once and if all looks good to you please add this package in UI extension in docs. npm link :https://www.npmjs.com/package/cytoscape-node-edge-html-label.

please let me know if anything from my side is needed.

Thanks

mikekucera commented 1 month ago

Ok I'll take a look soon. Thanks.

maxkfranz commented 1 week ago

@laikmokashi, would you link to the github repo?

laikmokashi commented 1 week ago

@maxkfranz where do i need to link it ? Can you please help me with it

maxkfranz commented 1 week ago

The link of your github repo with the extension itself


From: laikmokashi @.> Sent: Monday, July 8, 2024 10:26:24 AM To: cytoscape/cytoscape.js @.> Cc: Max Franz @.>; Mention @.> Subject: Re: [cytoscape/cytoscape.js] Add 'cytoscape-node-edge-html-label' to list of UI extensions (Issue #3245)

@maxkfranzhttps://github.com/maxkfranz where do i need to link it ? Can you please help me with it

— Reply to this email directly, view it on GitHubhttps://github.com/cytoscape/cytoscape.js/issues/3245#issuecomment-2214227578, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AAHRO43W32F2RUMADPEKYJDZLKORBAVCNFSM6AAAAABINOTNG6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMJUGIZDONJXHA. You are receiving this because you were mentioned.Message ID: @.***>

laikmokashi commented 1 week ago

@maxkfranz please let me know if anything else is needed NPM link : https://www.npmjs.com/package/cytoscape-node-edge-html-label github link extention : https://github.com/laikmokashi/cytoscape-node-edge-html-label github link example : https://github.com/laikmokashi/cytoscape-node-edge-html-lable-example Live Demo : https://laikmokashi.github.io/cytoscape-node-edge-html-lable-example/