Failed to import cytoscape-context-menus.js by AMD require method

[alkorolyov]

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)
cytoscape@3.5.3
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!

[kinimesi]

Did you check the README? Using the code given in the README should work.

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

[alkorolyov]

Thank you! It works as you mentioned. Now I have a continuation of my quiestion. I am trying to debug javascript part of my widget in jupyter notebook using %%javascript keyword. Could you please suggest how can I import cytoscape-context-menus in jupyter notebook?

Currently I import cytoscape/cytoscape-popper and some other modules using the following construction. All .js files are in the same dir as jupyter notebook file. Somehow it works for all the modules exept context-menus.

%%javascript

define('cytoscape-jupyter-widget', 
       ['lodash.js', 
       'cytoscape.js', 
       "@jupyter-widgets/base",
       'cytoscape-cose-bilkent.js',
//        'cytoscape-context-menus',
       'cytoscape-popper.js',
       'tippy.js'],
       function(_,
                 cytoscape, 
                 widgets, 
                 coseBilkent, 
//                  contextMenus, 
                 popper, 
                 tippy) {

    // Register extensions
    coseBilkent( cytoscape );
    popper( cytoscape );
//     console.log(contextMenus);
//     contextMenus( cytoscape, $ );

I tried different combinations of cytoscape-context-menus.js/cytoscape-context-menus. When I uncomment the contextMenus import I get this error message in browser console for cytoscape-context-menus:

kernel.js:1007 Couldn't process kernel message Error: Script error for "cytoscape-context-menus"
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js?v=951f856e81496aaeec2e71a1c2c0d51f:168)
    at HTMLScriptElement.onScriptError (require.js?v=951f856e81496aaeec2e71a1c2c0d51f:1735)

When I change to cytoscape-context-menus.js in the define section contextMenusis undefined with the following errors:

Uncaught (in promise) TypeError: contextMenus is not a function
    at eval (eval at append_javascript (outputarea.js:762), <anonymous>:78:5)
    at Object.execCb (require.js?v=951f856e81496aaeec2e71a1c2c0d51f:1693)
    at Module.check (require.js?v=951f856e81496aaeec2e71a1c2c0d51f:876)
    at Module.<anonymous> (require.js?v=951f856e81496aaeec2e71a1c2c0d51f:1136)
    at require.js?v=951f856e81496aaeec2e71a1c2c0d51f:134
    at require.js?v=951f856e81496aaeec2e71a1c2c0d51f:1186
    at each (require.js?v=951f856e81496aaeec2e71a1c2c0d51f:59)
    at Module.emit (require.js?v=951f856e81496aaeec2e71a1c2c0d51f:1185)
    at Module.check (require.js?v=951f856e81496aaeec2e71a1c2c0d51f:936)
    at Module.enable (require.js?v=951f856e81496aaeec2e71a1c2c0d51f:1173)

[alkorolyov]

Ok, I finally figured out how to to this. A colleague of mine advised me to use the custom.js in the ~/.jupyter/custom/custom.js folder. It starts with the main kernel so I copiedcytoscape-context-menus.js file to the ~/.jupyter/custom folder and added the this line of code to custom.js which allowed to use cytoscape-context-menus in every jupyter notebook I run.

require(['custom/cytoscape-context-menus']);

For more info read jupyter notebook faq