Data

Tools

Indexes

Applications

Experiments

Open Source Science

cytoscape-context-menus

A Cytoscape.js extension to provide context menu around elements and core instance

https://github.com/ivis-at-bilkent/cytoscape.js-context-menus

Science Score: 65.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • ✓
    CITATION.cff file
    Found CITATION.cff file
  • ✓
    codemeta.json file
    Found codemeta.json file
  • ✓
    .zenodo.json file
    Found .zenodo.json file
  • ✓
    DOI references
    Found 2 DOI reference(s) in README
  • ○
    Academic publication links
  • ○
    Committers with academic emails
  • ✓
    Institutional organization owner
    Organization ivis-at-bilkent has institutional domain (www.cs.bilkent.edu.tr)
  • ○
    JOSS paper metadata
  • ○
    Scientific vocabulary similarity
    Low similarity (12.8%) to scientific vocabulary

Keywords

cytoscapejs cytoscapejs-extension diagramming editor graph-drawing network-visualization

Keywords from Contributors

graph-algorithms graphviz complexity-management network-analysis bioinformatics biology pathway-analysis sbgn systems-biology undo-redo
Last synced: 6 months ago · JSON representation ·

Repository

A Cytoscape.js extension to provide context menu around elements and core instance

Basic Info
  • Host: GitHub
  • Owner: iVis-at-Bilkent
  • License: mit
  • Language: JavaScript
  • Default Branch: master
  • Homepage:
  • Size: 406 KB
Statistics
  • Stars: 87
  • Watchers: 15
  • Forks: 44
  • Open Issues: 18
  • Releases: 9
Topics
cytoscapejs cytoscapejs-extension diagramming editor graph-drawing network-visualization
Created over 9 years ago · Last pushed 6 months ago
Metadata Files
Readme License Citation

README.md

cytoscape-context-menus

Description

A Cytoscape.js extension to provide context menu around elements and core instance distributed under The MIT License.

Image of extension

Please cite the following paper when using this extension:

U. Dogrusoz , A. Karacelik, I. Safarli, H. Balci, L. Dervishi, and M.C. Siper, "Efficient methods and readily customizable libraries for managing complexity of large networks", PLoS ONE, 13(5): e0197238, 2018.

Demo

Here are demos: simple and customized, respectively:

 

Dependencies

  • Cytoscape.js ^2.7.0 || ^3.0.0

Usage instructions

Download the library: * via npm: npm install cytoscape-context-menus, * via bower: bower install cytoscape-context-menus, or * via direct download in the repository (probably from a tag).

Import the library as appropriate for your project:

ES import:

Note: es import doesn't work for plain javascript applications because webpack doesn't support es module output at the moment.

```js import cytoscape from 'cytoscape'; import contextMenus from 'cytoscape-context-menus';

// register extension cytoscape.use(contextMenus);

// import CSS as well import 'cytoscape-context-menus/cytoscape-context-menus.css'; ```

CommonJS: ```js var cytoscape = require('cytoscape'); var contextMenus = require('cytoscape-context-menus');

contextMenus(cytoscape); // register extension ```

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

Plain HTML/JS has the extension registered for you automatically, because no require() is needed.

Default Options

js 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: [/* { id: 'remove', // ID of menu item content: 'remove', // Display content of menu item tooltipText: 'remove', // Tooltip text for menu item image: {src : "remove.svg", width : 12, height : 12, x : 6, y : 4}, // menu icon // Filters the elements to have this menu item on cxttap // If the selector is not truthy no elements will have this menu item on cxttap selector: 'node, edge', onClickFunction: function () { // The function to be executed on click console.log('remove element'); }, disabled: false, // Whether the item will be created as disabled show: false, // Whether the item will be shown or not hasTrailingDivider: true, // Whether the item will have a trailing divider coreAsWell: false // Whether core instance have this item on cxttap submenu: [] // Shows the listed menuItems as a submenu for this item. An item must have either submenu or onClickFunction or both. }, { id: 'hide', content: 'hide', tooltipText: 'hide', selector: 'node, edge', onClickFunction: function () { console.log('hide element'); }, disabled: true }, { id: 'add-node', content: 'add node', tooltipText: 'add node', image: {src : "add.svg", width : 12, height : 12, x : 6, y : 4}, selector: 'node', coreAsWell: true, onClickFunction: function () { console.log('add node'); } }*/ ], // 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 ], // Indicates that the menu item has a submenu. If not provided default one will be used submenuIndicator: { src: 'assets/submenu-indicator-default.svg', width: 12, height: 12 } };

Note: selector and coreAsWell options are ignored for the items that are inside a submenu. Their visiblity depends on their root parent's visibility.

API

Instance API

js var instance = cy.contextMenus(options);

instance.isActive()

  • Returns whether the extension is active.

instance.appendMenuItem(item, parentID = undefined)

  • Appends given menu item to the menu items list.
  • If parentID is specified, the item is inserted to the submenu of the item with parentID.
  • If the parent has no submenu then it will automatically be created.
  • If not specified item will be inserted to the root of the contextmenu

instance.appendMenuItems(items, parentID = undefined)

  • Same with above but takes an array of items

instance.removeMenuItem(itemID)

  • Removes the menu item with given ID and its submenu along with

instance.setTrailingDivider(itemID, status)

  • Sets whether the menuItem with given ID will have a following divider

instance.insertBeforeMenuItem(item, existingItemID)

  • Inserts given item before the existingitem

instance.moveToSubmenu(itemID, options = null)

  • Moves the item with given ID to the submenu of the parent with the given ID or to root with the specified options
  • If options is a string, then it is the id of the parent
  • If options is a { selector?: string, coreAsWell?: boolean }, then old properties are overwritten by them and the menu item is moved to the root. If it doesn't have either properties item is not moved.
  • If options is null or not provided, then it is just moved to the root

instance.moveBeforeOtherMenuItem(itemID, existingItemID)

  • Inserts the item before the existingItem and moves it to the submenu that contains the existingItem

instance.disableMenuItem(itemID)

  • Disables the menu item with given ID.

instance.enableMenuItem(itemID)

  • Enables the menu item with given ID.

instance.showMenuItem(itemID)

  • Shows the menu item with given ID.

instance.hideMenuItem(itemID)

  • Hides the menu item with given ID.

instance.destroy()

  • Destroys the extension instance

instance.swapItems(x, y)

  • Changes the order of items. x and y are id of context menu items to be swapped

instance.getOptions()

  • Returns the used options

Other API

cy.contextMenus('get')

  • Returns the existing instance to the extension

Build targets

  • npm run build : Build ./src/** into cytoscape-edge-editing.js in production environment and minimize the file.
  • npm run build:dev : Build ./src/** into cytoscape-edge-editing.js in development environment without minimizing the file.

Publishing instructions

This project is set up to automatically be published to npm and bower. To publish:

  1. Build the extension : npm run build
  2. Commit the build : git commit -am "Build for release"
  3. Bump the version number and tag: npm version major|minor|patch
  4. Push to origin: git push && git push --tags
  5. Publish to npm: npm publish .
  6. If publishing to bower for the first time, you'll need to run bower register cytoscape-context-menus https://github.com/iVis-at-Bilkent/cytoscape.js-context-menus.git

Team

Alumni

Owner

  • Name: i-Vis at Bilkent
  • Login: iVis-at-Bilkent
  • Kind: organization

i-Vis Research Lab at Bilkent University

Citation (CITATION.cff) 

cff-version: 1.2.0
message: "If you use this software, please cite it as below."
authors:
- family-names: "Dogrusoz"
  given-names: "Ugur"
  orcid: "https://orcid.org/0000-0002-7153-0784"
- family-names: "Karacelik"
  given-names: "Alper"
  orcid: "https://orcid.org/0000-0000-0000-0000"
- family-names: "Safarli"
  given-names: "Ilkin"
- family-names: "Balci"
  given-names: "Hasan"
  orcid: "https://orcid.org/0000-0001-8319-7758"
- family-names: "Dervishi"
  given-names: "Leonard"
- family-names: "Siper"
  given-names: "Metin Can" 
title: "cytoscape-context-menus"
version: 4.1.0
date-released: 2021-06-16
url: "https://github.com/iVis-at-Bilkent/cytoscape.js-context-menus"
preferred-citation:
  type: article
  authors:
  - family-names: "Dogrusoz"
    given-names: "Ugur"
    orcid: "https://orcid.org/0000-0002-7153-0784"
  - family-names: "Karacelik"
    given-names: "Alper"
    orcid: "https://orcid.org/0000-0000-0000-0000"
  - family-names: "Safarli"
    given-names: "Ilkin"
  - family-names: "Balci"
    given-names: "Hasan"
    orcid: "https://orcid.org/0000-0001-8319-7758"
  - family-names: "Dervishi"
    given-names: "Leonard"
  - family-names: "Siper"
    given-names: "Metin Can"
  doi: "10.1371/journal.pone.0197238"
  journal: "PLOS ONE"
  month: 5
  start: 1 # First page number
  end: 18 # Last page number
  title: "Efficient methods and readily customizable libraries for managing complexity of large networks"
  issue: 5
  volume: 13
  year: 2018

GitHub Events

Total
  • Issues event: 1
  • Issue comment event: 2
  • Push event: 1
  • Fork event: 4
Last Year
  • Issues event: 1
  • Issue comment event: 2
  • Push event: 1
  • Fork event: 4

Committers

Last synced: 8 months ago

All Time
  • Total Commits: 180
  • Total Committers: 17
  • Avg Commits per committer: 10.588
  • Development Distribution Score (DDS): 0.633
Past Year
  • Commits: 4
  • Committers: 1
  • Avg Commits per committer: 4.0
  • Development Distribution Score (DDS): 0.0
Top Committers
Name Email Commits
onur s****0@h****m 66
metincansiper m****r@g****m 35
Hasan Balcı b****9@g****m 25
kinimesi k****i 16
Salih Altun m****n@g****m 7
ugurdogrusoz u****z@g****m 7
mbrowniebytes m****s 7
canbax y****z@g****m 3
Nasim Saleh n****h@g****m 3
Brian Schinazi b****n@a****o 2
Hoogkamer m****r@g****m 2
Renaud Parent r****t@i****u 2
Lukasz Kostrzewa l****r@g****m 1
Przemysław Mierkowski p****i@f****l 1
William Emfinger w****r@g****m 1
Samy Ateia s****a@i****e 1
l2d22 d****a@g****m 1
Committer Domains (Top 20 + Academic)
intrafind.de: 1 finestmedia.pl: 1 inuse.eu: 1 ardent.io: 1

Issues and Pull Requests

Last synced: 6 months ago

All Time
  • Total issues: 54
  • Total pull requests: 30
  • Average time to close issues: 4 months
  • Average time to close pull requests: 28 days
  • Total issue authors: 39
  • Total pull request authors: 17
  • Average comments per issue: 2.67
  • Average comments per pull request: 1.87
  • Merged pull requests: 17
  • Bot issues: 0
  • Bot pull requests: 1
Past Year
  • Issues: 2
  • Pull requests: 1
  • Average time to close issues: 6 days
  • Average time to close pull requests: 1 minute
  • Issue authors: 2
  • Pull request authors: 1
  • Average comments per issue: 1.0
  • Average comments per pull request: 0.0
  • Merged pull requests: 1
  • Bot issues: 0
  • Bot pull requests: 0
View more stats
Top Authors
Issue Authors
  • lilfrootyloops (4)
  • ugurdogrusoz (3)
  • BMahabir (3)
  • KonradHoeffner (3)
  • maxkfranz (3)
  • city-unit (2)
  • karchjd (2)
  • jonng1000 (2)
  • msalihaltun (2)
  • geirmeyer (1)
  • alhuber1502 (1)
  • Marooned-MB (1)
  • hippofant (1)
  • calebeaires (1)
  • grigorijski (1)
Pull Request Authors
  • onsah (5)
  • hasanbalci (4)
  • pmierkowski (3)
  • Hoogkamer (3)
  • lukaszkostrzewa (2)
  • L2D22 (2)
  • rparent (2)
  • finger563 (1)
  • pumpadump (1)
  • earx (1)
  • mbrowniebytes (1)
  • dependabot[bot] (1)
  • oadetoye (1)
  • schinazi (1)
  • witoreel (1)
Top Labels
Issue Labels
Low (5) feature (4) enhancement (2) bug (2) invalid (1)
Pull Request Labels
dependencies (1)

Packages

  • Total packages: 3
  • Total downloads:
    • npm 49,455 last-month
  • Total docker downloads: 124
  • Total dependent packages: 13
    (may contain duplicates)
  • Total dependent repositories: 122
    (may contain duplicates)
  • Total versions: 45
  • Total maintainers: 6
npmjs.org: cytoscape-context-menus

A Cytoscape.js extension to provide context menu around elements and core instance.

  • Versions: 22
  • Dependent Packages: 13
  • Dependent Repositories: 120
  • Downloads: 49,455 Last month
  • Docker Downloads: 124
Rankings
Downloads: 1.1%
Dependent repos count: 1.3%
Docker downloads count: 1.5%
Dependent packages count: 1.7%
Average: 2.5%
Forks count: 4.2%
Stargazers count: 5.3%
Maintainers (6)
ivisatbilkent metincansiper livogindo leonarddrv balcihasan mrsfy
Last synced: 6 months ago
bower.io: cytoscape-context-menus

A Cytoscape.js extension to provide context menu around elements and core instance.

  • License: MIT
  • Latest release: v4.2.1
    published over 1 year ago
  • Versions: 22
  • Dependent Packages: 0
  • Dependent Repositories: 2
Rankings
Dependent packages count: 6.0%
Forks count: 8.5%
Average: 10.0%
Stargazers count: 11.3%
Dependent repos count: 14.2%
Last synced: 6 months ago
repo1.maven.org: org.webjars.npm:github-com-iVis-at-Bilkent-cytoscape-js-context-menus

WebJar for cytoscape-context-menus

  • Versions: 1
  • Dependent Packages: 0
  • Dependent Repositories: 0
Rankings
Forks count: 17.7%
Stargazers count: 21.1%
Average: 29.9%
Dependent repos count: 32.0%
Dependent packages count: 48.9%
Last synced: 6 months ago

Dependencies

bower.json bower
  • cytoscape ^2.7.0 || ^3.0.0
package-lock.json npm
  • 286 dependencies
package.json npm
  • @babel/core ^7.10.3 development
  • @babel/preset-env ^7.10.3 development
  • babel-loader ^8.1.0 development
  • camelcase ^6.2.0 development
  • cross-env ^7.0.2 development
  • webpack ^5.36.1 development
  • webpack-cli ^4.6.0 development