Node click redirects to a certain link/div

[nihaldsouza]

(I am not sure if this feature is supported as I couldn't find a way to implement it. If it is already possible, please let me know how)

I want to be redirected to a particular link (specifically in my case, a particular div) when I click on a node (instead of the pop up). Also, I would also like to disable the pop up window when an edge is clicked.

I am trying to implement a graph in my project - WikiContext - where the nodes are the prerequisites to the main subject. On clicking the nodes, it jumps to the respective div of the prerequisite.

Is there a way I can specify a link in the kwargs when defining the nodes?

[nihaldsouza]

This is my config object

self.config = Config(width=self.width, height=self.height, directed=self.directed, nodeHighlightBehavior=self.nodeHighlightBehavior, highlightColor=self.highlightColor, collapsible=self.collapsible, node_size=self.node_size, highlightStrokeColor="blue", node={'labelProperty':'label'}, link={'labelProperty': 'label', 'renderLabel': True})

[ChrisDelClea]

Hi @nihaldsouza ,

thanks for the post, your project seems interesting.

I am not quite sure if I understand your request correctly. What do you mean by redirect to div or link ?

Unfortunately agraph-component doesn't support personalized behavior for click events yet. I guess it would require passing a function to the component somehow.

However, you can simply fork the project and override the click behavior for nodes and links in the component's frontend folder. Then just rebuild it and install the package. Does that help? If you have more questions i am happy to help.

[nihaldsouza]

Hi Chris,

Yes, I was looking to customise the click events so that clicking on the nodes would redirect to a particular link or a div/section in my webpage. For instance, clicking on Node A would automatically open a new URL or scroll down to the section that defines the subject A.

I'll try editing the project as your suggested and see if I can find any luck there. Hopefully this feature is available in the future releases.

Thanks!

[ChrisDelClea]

Hi @nihaldsouza ,

you can do this actually as of today by passing a URI in the title of a node. E.g.: Node(id="Spider-Man", title="http://marvel.com/characters/60/thor", image="http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_spiderman.png") . You're welcome!

Best regards Chris