search

iVis-at-Bilkent / cytoscape.js-context-menus

A Cytoscape.js extension to provide context menu around elements and core instance
MIT License
86 stars 41 forks source link

Dynamic Context Menus? #77

Closed city-unit closed 1 year ago

city-unit commented 1 year ago

Hi, I've been banging my head against a wall for a bit now trying to have context menus that have different options based on the data present in each node. Is there a way to do this at all or is this really just meant for static declaration of a single set of menu options at the start? What I'd like is that if node 1 contains the data [a, b], I can have a dropdown with options a and b. Node 2 might have c and d.

Thanks in advance.

city-unit commented 1 year ago

My current solution is to make an initial menu with all of the items I'll ever need and then dynamically showing/hiding them depending on the node data. I really don't love that solution though. It would be preferable to be able to dynamically add/remove options or dynamically recreate the menu itself. Neither of those things seem to work. https://github.com/city-unit/st-tree-extension/blob/cd125b1f3ddb45ab878212938bb96ae2adac8212/index.js#L492

hasanbalci commented 1 year ago

You can use cytoscape selectors to specify the nodes that will have the menu item in item options: selector: 'node[weight > 50]'

city-unit commented 1 year ago

You can use cytoscape selectors to specify the nodes that will have the menu item in item options: selector: 'node[weight > 50]'

So I could have a selector which would only select nodes where data == myValue (a, b, c, d, etc.) and have it respectively have that menu item?

hasanbalci commented 1 year ago

Yes, for example if the menu item has selector: 'node[weight > 50]' then it will appear only in the nodes that have 'weight' data greater than 50.

city-unit commented 1 year ago

Yes, for example if the menu item has selector: 'node[weight > 50]' then it will appear only in the nodes that have 'weight' data greater than 50.

Alright, I'll see if I can work with that. Currently the data in the node is a list like ["a","b"] and I would need something like selector: 'node[myList _contains_ X'. I'm not sure if there's a contains selector, but I'll see if I can figure something out. Thanks.

city-unit commented 1 year ago

Thank you for the assistance. I ended up turning the list into a string and using the *= to check if a node contained the given value. Worked like a charm; https://github.com/city-unit/st-tree-extension/blob/f9cf49b62c294638fc07e93639d0b06aea33b013/index.js#L591C48-L591C48