ivis-at-bilkent / cytoscape.js-context-menus Goto Github PK

Can anyone tell me how to import this extension into my Ember project? It's just not clear to me from the instructions given. I have already installed it locally using npm install. Thank you!

I simply cut-&-paste the example from the basic demo into my prototyping project, and this is the result. First SS is right-clicking on whitespace, second SS is from right-clicking on a node. Also the X appears at the very top-left of the screen (not shown).

The menu is not shown when setting it up in a Node.js application.

By adding console.log messages into cytoscape-context-menus.js shows that the menu-system is used, for instance is function adjustCxtMenu() called from a right-click.

Page https://github.com/iVis-at-Bilkent/ lists cytoscape.js-context-menus as html and not javascript.
Is it not possible to use it within a Node.js application?

The menu has been set up as shown in attached node-js-test.txt file.

node-js-test.txt

It'd be great if the minimal functionality on context menus of the demo were actually working. For instance,

• Node: Remove, Select All Nodes
• Edge: Remove, Select All Edges
• Core: Add node, Remove Selected

This extension writes many things to the global Core prototype. That means you can have collisions with other extensions. An extension is supposed to set only one field in the prototype of the core and/or collections -- the same as the extension name.

It would be better to have something like this:

let menu = cy.contextMenu({ /* options... */ }); 
// or
let menu = cy.$('#some-node').contextMenu({ /* options... */ });

menu.enable();
menu.disable();
menu.add( someItem );
menu.remove( someItem );
menu.destroy();

// etc...

compilation error Property 'contextMenus' does not exist on type 'Core'.

• The selected layout in the demos('simple' and 'customized') puts multiple edges on top of each other. So, it seems as if the menu items, hide and remove, are not working properly.

• A minor detail, but it is stated that the third demo is 'with different menu items'. But the differences between the first demo are having one extra menu item and removed symbols in front of the menu items. Maybe we can change the menu items a bit more or just remove the demo?

If both of these extensions are enabled at the same time, the menu items are not clickable.

Hi there,

when I use the following option:
contextMenuClasses: [ 'border', 'm-0', 'border-primary' ]

The classes are applied as shown here:
<div class="border cy-context-menus-cxt-menu" m-0="" border-primary="" style="inset: auto 615px 432px auto;">...</div>

It seems that only the first class is applied.
Or am I missing something?

Cheers!

Any idea why this example (https://codesandbox.io/s/l2r00?file=/src/index.js:860-876) works with 4.0.0 but fails with 4.1.0? You can change the version easily on the left-hand side. Only difference I can see between the releases is an upgrade of webpack from 4 -> 5. Is it possible that broke something with module export?

Description:
I've implemented functionality to dynamically add items to a submenu depending on the kind of node that has been selected using appendMenuItems(). However, when I open the context menu immediately again, even for a completely different node, I am running into the following runtime error:

Error: There is already an element with id=swagSauce in the context menu

I understand why I would see this error if I were to open the context menu for the same node back-to-back, because appendMenuItems() is trying to create submenu items that already exist by running again with the same parameters from earlier; however, I am not sure why this is happening when I try to open the context menu for a different node. I think what I need to do is wrap appendMenuItems() inside of a conditional statement so that it will only run if one of the parameters being passed into appendMenuItems() doesn't already exist; however, I am not sure how I can check for that.

Is it possible to see whether there is already an element with the same id in the context menu? If so, I'd really appreciate it if someone could explain how I can do that. I've included my code below:

Code:

let submenuItems = [];

function Object(x, y) {
    this.id = x;
    this.content = `${x}: ${y}`;
    this.tooltipText = `${x}: ${y}`;
    this.onClickFunction = () => {
        testFunction(x, y)
    };
};

const options = {
    evtType: 'cxttap',
    menuItems: [
        {
            id: 'one',
            content: 'This is the first option in the menu',
            selector: 'node',
            onClickFunction(evt) {
                genericFunctionName(evt, 'one')
            },
        },
        {
            id: 'two',
            content: 'This is the second option in the menu',
            selector: 'node',
            onClickFunction(evt) {
                genericFunctionName(evt, 'two')
            },
        },
        {
            id: 'three',
            content: 'This is the third option in the menu',
            selector: 'node',
            submenu: [],
        },
    ],
};

let instance = cyRef.current.contextMenus(options);

cyRef.current.on('cxttap', "node", function(evt) {
    for (const variable in evt.target.data('properties')) {
        submenuItems.push(new Object(variable, evt.target.data('properties')[variable]));
    }

    instance.appendMenuItems(submenuItems, "three");
}

Additional Context
I am using Cytoscape Context Menus v4.1.0.

Hi,

I am trying to use this plug-in with ReactJs using import module concept. I have tried as below but not working. Would you please throw some light on this about how to make it work with Es6 module system

import jquery from "jquery";
import contextMenus from "cytoscape-context-menus";
class myclass extends React.Component {
constructor(){
// Plug-in to support context-menu
contextMenus( cytoscape, jquery ); // register extension
}
componentDidMount() {
this.cy = ....// creating cytosccape instance or core
this.cy.contextMenus( this.options);
}
}

I would like to open the menu with a right click with a mouse, but with taphold on a touchscreen. Is it is possible to use multiple events or could this be added?

Hi,

Is there a way to use the context menu itself to show information attached to the node in CytoJS? With the onClickFunction, I can target the node using event.target and access its attributes, but I'd like to do something similar with the static text. So something like:

                id: 'link',
                content: 'Visit ' + node.data('url'),
                tooltipText: 'Opens in a new window!',
                selector: 'node',
                onClickFunction: function (event) {
                  window.open(event.target.data('url'));
                },
                hasTrailingDivider: true

So the user could be informed where the link is going, depending on the node they're clicking.

This problem should be handled at rendering level since menu items can be dynamically hidden/shown.

I can't get the menu to appear on Chrome on a Samsung S9+, I tried holding, double tapping and two finger tapping.
When I use it in my own code, I get the menu to appear by adding the "dbltap" event, however then I cannot select anything from the menu after it pops up.

Can we at least allow the menu bounding rectangle to be a rounded rectangle for flexible styling?

Description:
As I mentioned in my other issue, after implementing functionality to dynamically add items to a submenu depending on the node that has been selected using appendMenuItems(), I'm currently running into a runtime error whenever I open a context menu for either the same or a different node after opening a context menu prior. The error is as follows:

Error: There is already an element with id=swagSauce in the context menu

Rather than setting conditions to check whether a menu item with a particular ID already exists and then preventing appendMenuItems() from running (which as I mentioned in the other issue I raised, I do not know how to do & would like to understand how to do so), would it be possible to just clear the context menu and generate a fresh one during every right-click event on a node? If so, I'd really appreciate it if someone could explain how I can do that. I've included my code below:

Code:

let submenuItems = [];

function Object(x, y) {
    this.id = x;
    this.content = `${x}: ${y}`;
    this.tooltipText = `${x}: ${y}`;
    this.onClickFunction = () => {
        testFunction(x, y)
    };
};

const options = {
    evtType: 'cxttap',
    menuItems: [
        {
            id: 'one',
            content: 'This is the first option in the menu',
            selector: 'node',
            onClickFunction(evt) {
                genericFunctionName(evt, 'one')
            },
        },
        {
            id: 'two',
            content: 'This is the second option in the menu',
            selector: 'node',
            onClickFunction(evt) {
                genericFunctionName(evt, 'two')
            },
        },
        {
            id: 'three',
            content: 'This is the third option in the menu',
            selector: 'node',
            submenu: [],
        },
    ],
};

let instance = cyRef.current.contextMenus(options);

cyRef.current.on('cxttap', "node", function(evt) {
    for (const variable in evt.target.data('properties')) {
        submenuItems.push(new Object(variable, evt.target.data('properties')[variable]));
    }

    instance.appendMenuItems(submenuItems, "three");
}

Additional Context
I am using Cytoscape Context Menus v4.1.0.

Only the most recently created cytoscape instance will have functional context menus. The other cytoscape instances will not respond to the right-click event (nothing will show up)

Hi,
I am using context menu the issue that on scroll and zoom the menu isnt hide,
Do have any option to pass for this? also same for navigation from page to page its still present.

I'm trying to use cytoscape.js-context-menus with the edgehandles extensions and use the events defined in the latter to trigger UI options.

Is it possible to simply hide/show cytoscape.js-context-menus, like

contextMenu = cy.contextMenus( options );
...
contextMenu.show(); or
contextMenu.hide();

and still get the selector-based options defined in the contextMenu options?

Thanks!

I propose to use custom attribute to display menu item title. If using standart "title" attribute tooltip is shown in addition to menu item (with same text) if I stay on item for a while

Proposed changes :

Library

220c220
<       var itemStr = '<button id="' + item.id + '" data-title="' + item.title + '" class="' + classStr + '"';
---
>       var itemStr = '<button id="' + item.id + '" title="' + item.title + '" class="' + classStr + '"';

CSS:

42,43c42,43
< .cy-context-menus-cxt-menuitem[data-title]:before {
<     content:attr(data-title);
---
> .cy-context-menus-cxt-menuitem[title]:before {
>     content:attr(title);
46c46
< .cy-context-menus-cxt-menuitem:not([data-title]):before {
---
> .cy-context-menus-cxt-menuitem:not([title]):before {

When the context menu is shown and while hovering the context menus, if there are nodes or edges under those context menus then those elements mouseover is activated.

In my case, I have tooltip enabled for the elements on mouseover and when I hover over the context menu and if there are any elements under the menus then tooltip for the underlying elements is shown.

Could you please take a look?

Hi, I noticed that my pop up menu appears outside cytoscape network, even when nothing is clicked. May I know how to solve it please?

My code is

<CytoscapeComponent 
              elements={props.elements} 
              style={ {  
                height: sizeHeight + 'px',
                cursor: my_cursor
              } } 
              cy={cy => {
                cy.on('add', 'node', _evt => {
                    cy.layout(layout).run()
                    cy.fit()
                    setCy(cy)
                })
                cy.on('mouseover', 'node', (evt) => {
                  changeCursor('pointer')
                  //makePopper(evt.target)
                });
                cy.on('mouseout', 'node', (evt) => {
                  changeCursor('default')
                });

                var options = {
                  // Customize event to bring up the context menu
                  // Possible options https://js.cytoscape.org/#events/user-input-device-events
                  evtType: 'cxttap',
                  // List of initial menu items
                  // A menu item must have either onClickFunction or submenu or both
                  menuItems: [
                    {
                      content: 'test',
                      selector: 'node',
                      onClickFunction: function (evt) { 
                        console.log(evt.target.data('123'))// The function to be executed on click
                        //console.log('remove element');
                      },
                      show: false
                    },
                    {
                      id: 'test',
                      content: 'test1',
                      selector: 'node',
                      coreAsWell: false,
                      show: true,
                      onClickFunction: function (evt) { 
                        console.log('test')// The function to be executed on click
                        //console.log('remove element');
                      },
                    }
                  ],
                  // css classes that menu items will have
                  menuItemClasses: [
                    // add class names to this list
                  ],
                  // css classes that context menu will have
                  contextMenuClasses: [
                    // add class names to this list
                  ]
                };
                cy.contextMenus(options);
              }}

Thank you

Hi, how do I trigger context menus only for nodes?

I did:

  cy.on('tap', 'node', function (evt) {
    evt.target.contextMenus()
    /*
    evt.target.popper({
      content: () => {
        let div = document.createElement("div");
        div.innerHTML = "Popper content";
        document.body.appendChild(div);
        return div;
      },
      popper: {} // my popper options here
    });
   */

But had a
TypeError: evt.target.contextMenus is not a function

Could I get detailed instructions on how to trigger this for only nodes please? If Iuse the popper code above, it seems to work.

Thank you
Jonathan

Just a quick ask for best practices on calling the context menu on a left click / tap (while the default is still cxttap).
This is similar to this issue: #54, but I am simply calling a .trigger('cxttap') on the given node that was tapped on, however this is not causing a context menu to show up (unless I have previously created a menu via right click elsewhere). Any thoughts on how best to do this?

Hi,
I'm using the context menu in a project that is build with the react starter project (webpack).
It works locally, but when i run a production build (minified css + js) the css for the context menu is missing. If i revert back to 3.0.0 everything works fine.

best

Samy

I am not able to display the context menu on a touch screen : I tried with two fingers with no success.
Is there a way to bind the display of the menu on an event tap ou touch ?

Many thanks in advance,

David

I am trying to use this on Next.js v12 I get the self is not defined error.

To fix that, I tried Next.js Dynamic, but the error persists in other ways.

const contextMenus = dynamic(() => import("cytoscape-context-menus"), {
  ssr: false,
});

Cytoscape.use(contextMenus); //-> throws error etc.apply is undefined

I also tried this,

dynamic(() => {
   return import("cytoscape-context-menus").then((x) => {
     Cytoscape.use(x); // simply doesn't work (cy.contextMenus doesn't exist)
     return x;
   })
});

Am I missing something? Thank you!

Hi,

I am currently trying to create and customize cytoscape widget for jupyter notebook. I have already succesfully implemented cytoscape-popper.js functionality, however I failed to load cytoscape-context-menus.js. During the tests I run simple test.js with one require statement which gave me contextMenus variable undefined. I have downloaded the latest versions of all cytoscape, requireJS and jQuery.

Chrome Version 74.0.3729.131 (Official Build) (64-bit)
[email protected]
jQuery JavaScript Library v3.4.1 
RequireJS 2.3.6

test.js:

require(['cytoscape.js', 'cytoscape-context-menus.js', 'jquery.js'], function( cytoscape, contextMenus, jquery ){
  console.log(contextMenus);
  contextMenus( cytoscape, jquery );  // register extension
});

Error message:

test.js:3 Uncaught TypeError: contextMenus is not a function
    at test.js:3
    at Object.execCb (require.js:1696)
    at Module.check (require.js:883)
    at Module.<anonymous> (require.js:1139)
    at require.js:134
    at require.js:1189
    at each (require.js:59)
    at Module.emit (require.js:1188)
    at Module.check (require.js:938)
    at Module.enable (require.js:1176)

Also for AMD import you shouldn't probably use context-menus variable name as it stated in Readme, because it's causing syntax error.

Any help would be much appreciated!

I have fully fleshed out and implemented this extension in my project, and now management wants to be able to access context menus with a left-click instead of a right-click. I don't want to scrap this and start over with a different extension/library/etc... is there any way to do this with this extension? (or something equally simple).

Thanks for your time!

Might be a good idea to add this extension and any others you have to Zenodo (https://zenodo.org/). Really easy to set up and it integrates with GitHub so that on every new release it will automatically register the extension with a new DOI.

Please, add the ability to create submenus. E.g. it can be implemented by adding parent option to menu item.

Hi,
I want to be able to switch between a desktop-friendly and a mobile-friendly menu.

But when I recall cy.contextMenus(options) with new options it does not seem to work correctly anymore:

• The menu pops up at a strange position
• Selectors don't work anymore.

Example, when I add this to demo.html after line 190

cy.contextMenus({
          menuItems: [
            {
              id: "removeNew",
              content: "remove NEW",
              tooltipText: "remove",
              image: { src: "remove.svg", width: 12, height: 12, x: 6, y: 4 },
              selector: "node, edge",
              onClickFunction: function(event) {
                var target = event.target || event.cyTarget;
                target.remove();
              },
              hasTrailingDivider: true
            },
            {
              id: "select-all-edges",
              content: "select all edges NEW",
              tooltipText: "select all edges",
              selector: "edge",
              onClickFunction: function(event) {
                selectAllOfTheSameType(event.target || event.cyTarget);
              }
            }
          ]
        });

I get this when I click on Kramer (or any other element)

There is a bug when you increase the height of the top level menus in the css. The submenus are not adjacent (they are to the right and above) so you can't mouse over from the top menu to the submenus without them closing first. I can attempt a PR if someone provides a brief overview of the rendering flow of submenus.

In both of the demos in unstable, when select all nodes/edges options are used and then elements are manually unselected -via click on anywhere for example-, the option that appears on the context menu is still "unselect", even though elements are unselected already. Seems to be an oversight.

Our tean intend to use it on a angular 6 project. How to use this extension without jQuery dependece?

There's already a great example stylesheet in the repo: https://github.com/iVis-at-Bilkent/cytoscape.js-context-menus/blob/master/cytoscape-context-menus.css

It would be good to have explicit descriptions of each class name in the readme.

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.

Description:
In my Next.js application, I am trying to create a submenu that is dynamically updated to include specific options depending on what kind of node has been selected. The values for the submenu items are already being passed into the overarching menu via an evt object. I have tried using submenu.push(); however, I am running into the following error:

Syntax error: Unexpected token, expected ","

Before putting together functionality within the push() method to dynamically grab items from evt to create objects out of them, I tried running the push() method on pre-defined objects to test whether this concept would work in general; however, it did not for me. I'd really appreciate it if someone could point out what I may have been doing wrong and explain how I can dynamically add items in a submenu — if it's possible. I've included my code below:

Code:

const options = {
    evtType: 'cxttap',
    menuItems: [
        {
            id: 'one',
            content: 'This is the first option in the menu',
            selector: 'node',
            onClickFunction(evt) {
                genericFunctionName(evt, 'one')
            },
        },
        {
            id: 'two',
            content: 'This is the second option in the menu',
            selector: 'node',
            onClickFunction(evt) {
                genericFunctionName(evt, 'two')
            },
        },
        {
            id: 'three',
            content: 'This is the third option in the menu',
            selector: 'node',
            onClickFunction(evt) {
                console.log(evt.target.data('properties'));
            },
            submenu: [
                {
                    id: 'submenuOne',
                    content: 'This is the first option in the submenu',
                    tooltipText: 'blue',
                    onClickFunction: function () {
                        console.log("The first option in the submenu was clicked on")
                    },
                },
                {
                    id: 'submenuTwo',
                    content: 'This is the second option in the submenu',
                    tooltipText: 'blue',
                    onClickFunction: function () {
                        console.log("The second option in the submenu was clicked on")
                    },
                },
            ],
            submenu.push(
                {
                    id: 'submenuThree',
                    content: 'This should be the third option in the submenu',
                    tooltipText: 'blue',
                    onClickFunction: function () {
                        console.log("The third option in the submenu was clicked on")
                    },
                },
            ),
        },
    ],
};

Additional Context
I am using Cytoscape Context Menus v4.1.0.

Hi
Is there a way to have different menu items for particular nodes?
In my graphs nodes have different states (and classes) like "success", "running" etc - I would like to display different set of menu items for particular class. How can I achieve that?

I can see selector field but in some example I saw syntax like node[?foo] and node[!foo] but couldn't find that in the documentation.

Thanks

Tooltips might be used to provide help on the menu items but the users might prefer to disable them. Maybe an option to disable them if not needed?

Hello,

I've a very long submenu under "Social" submenu and I've managed to set a height and a overflow-y : auto in CSS but whenever I scroll in the submenu, the graph itself if zooming and then, menu closed itself.
Everything is 'normal' from what I've seen in the library code, but how to prevent this ?
I see 2 ways :

• Having a method that return a boolean whether or not the context-menu is shown, that boolean can then be used to disabled graph zoom for example.
• Having the possibility to disabled auto close menu on zoom maybe ?

Thanks for feedbacks,
Have a nice day.

Description:

I see that there's built-in functionality through menuItemClasses and contextMenuClasses to add styling to both menus and submenus; however, I would like to add styling only to a submenu and not the menu. I have tried moving menuItemClasses and contextMenuClasses to inside where the submenu is being defined, but that does not work. Is it even possible to only style a submenu and not the menu? If so, could you please explain how this can be done.

In addition, I would like to style the options within the submenu so that only part of the content is bolded. In my case, the content that is being displayed as options in the submenu are key-value pairs, being structured as ${x}: ${y}. I only want what is being passed into x to be bolded (e.g., key: value). Is this possible to do? If so, I'd really appreciate it if it can be explained how to be done. I've included my code below:

Code:

memoizedCytoscapeComponent.jsx

let submenuItems = [];

function Object(x, y) {
    this.id = x;
    this.content = `${x}: ${y}`;
    this.tooltipText = `${x}: ${y}`;
    this.onClickFunction = () => {
        testFunction(x, y)
    };
};

const options = {
    evtType: 'cxttap',
    menuItems: [
        {
            id: 'one',
            content: 'This is the first option in the menu',
            selector: 'node',
            onClickFunction(evt) {
                genericFunctionName(evt, 'one')
            },
        },
        {
            id: 'two',
            content: 'This is the second option in the menu',
            selector: 'node',
            onClickFunction(evt) {
                genericFunctionName(evt, 'two')
            },
        },
        {
            id: 'three',
            content: 'This is the third option in the menu',
            selector: 'node',
            submenu: [],
        },
    ],
    menuItemClasses: ['custom-menu-item']
};

let instance = cyRef.current.contextMenus(options);

cyRef.current.on('cxttap', "node", function(evt) {
    for (const variable in evt.target.data('properties')) {
        submenuItems.push(new Object(variable, evt.target.data('properties')[variable]));
    }

    instance.appendMenuItems(submenuItems, "three");
}

globals.css

.custom-menu-item > * {
    font-weight: bold !important;
}    

Additional Context
I am using Cytoscape Context Menus v4.1.0.

I can use this library with SvelteKit with the following code and everything works except the submenu indicator, as I get a 404 of http://localhost:5000/assets/submenu-indicator-default.svg when using vite build and then vite preview.
Svelte does place it under assets/submenu-indicator-default.80459c67.svg but it does the same thing for the css, which gets combined into assets/index.6986e23f.css, where it somehow works, but it doesn't seem to achieve the same "magic" for the SVG file.
How can I get Svelte to find the submenu indicator SVG file?

import contextMenus from "cytoscape-context-menus";
cytoscape.use(contextMenus);
import "cytoscape-context-menus/cytoscape-context-menus.css";
import "cytoscape-context-menus/assets/submenu-indicator-default.svg";

Hi ...

I'm initialising the menu as suggested below

var cytoscape = require('cytoscape');
var contextmenus = require('cytoscape-context-menus');
contextmenus(cytoscape); // register extension

However I get the following error when I 'require' the context-menu.

cytoscape-context-menus.js:420Uncaught ReferenceError: cytoscape is not defined
2318 @ cytoscape-context-menus.js:420
webpack_require @ bootstrap 414671b…:50
2383 @ app.js:11__webpack_require__ @ bootstrap 414671b…:50
0 @ analysisCentre.entry.js:29
webpack_require @ bootstrap 414671b…:50
webpackJsonpCallback @ bootstrap 414671b…:21
(anonymous function) @ analysisCentre.bundle.js?v=8467:1

Am I missing something?

Create a simple graph and assign a context menu.
Right click on the node/edge to show context menu
Press F12 on your browser to switch to full screen
The context menu won´t appear anymore

Report by @qtttttttttting

Issue type

Bug report

Environment info

• Cytoscape.js version : v3.1.2
• Browser/Node.js & version : chrome 59.0.3071.115

Current (buggy) behaviour

I use the context-menus of UI extension , but when the node is on the right or bottom of the screen ,the context-menus will beyond the screen .And I see the source code ,it does not consider this situation.

207 var containerPos = $(cy.container()).offset();
208 var renderedPos = event.renderedPosition || event.cyRenderedPosition;
209
210 var left = containerPos.left + renderedPos.x;
211 var top = containerPos.top + renderedPos.y;
212
213 $cxtMenu.css('left', left);
214 $cxtMenu.css('top', top);

Desired behaviour

Minimum steps to reproduce

In Safari on desktop an Illegal constructor error is thrown, which prevents the menu from working:

All of your demos seem to be affected - happy to help with any further information.

Thanks