cytoscape / cytoscape.js-navigator

Bird's eye view pan and zoom control for Cytoscape.js.

cytoscape-navigator

Description

Bird's eye view pan and zoom control for Cytoscape.js

Dependencies

• Cytoscape.js ^2.6.0 || ^3.0.0

Usage instructions

Download the library:

• via npm: npm install cytoscape-navigator,
• via bower: bower install cytoscape-navigator, or
• via direct download in the repository (probably from a tag).

require() the library as appropriate for your project:

CommonJS:

var cytoscape = require('cytoscape');
var navigator = require('cytoscape-navigator');

navigator( cytoscape ); // register extension

AMD:

require(['cytoscape', 'cytoscape-navigator'], function( cytoscape, navigator ){
  navigator( cytoscape ); // register extension
});

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

API

var cy = cytoscape({ /* ... */ });

var defaults = {
    container: false // string | false | undefined. Supported strings: an element id selector (like "#someId"), or a className selector (like ".someClassName"). Otherwise an element will be created by the library.
  , viewLiveFramerate: 0 // set false to update graph pan only on drag end; set 0 to do it instantly; set a number (frames per second) to update not more than N times per second
  , thumbnailEventFramerate: 30 // max thumbnail's updates per second triggered by graph updates
  , thumbnailLiveFramerate: false // max thumbnail's updates per second. Set false to disable
  , dblClickDelay: 200 // milliseconds
  , removeCustomContainer: true // destroy the container specified by user on plugin destroy
  , rerenderDelay: 100 // ms to throttle rerender updates to the panzoom for performance
};

var nav = cy.navigator( defaults ); // get navigator instance, nav

You may call nav.destroy() to remove the navigator widget and associated cleanup.

Publishing instructions

1. Update the package version: npm version major|minor|patch
2. Publish to npm: npm publish
3. Make a release on GitHub to automatically register a new Zenodo DOI

cytoscape.js-navigator's Issues

The navigator did not display in Vue

The height of the div is 0.

I just import it:

import cytoscape from "cytoscape";
var navigator = require('cytoscape-navigator');
navigator( cytoscape );

In the init function:

....
 _this.cy = cytoscape(option);
_this.cy.navigator();
....

Is there anything wrong?

BirdView doesn't show the whole graph when it is too large

I have a slightly large diagram (about 3600pixels when zoomed at 24%). The bird view only shows part of it.

This is the graph:

And this is the bird view, showing only a slight part of the graph:

Navigator should not destroy its container when it hasn't create it

When calling "destroy" on the navigator, I don't expect the container that I've specified for it to go away. This prevent me from putting a new instance there.

Rapidly updating causes memory leaks

In my webapp I change the cytoscape data each second. The navigator creates for each render a base64 image via cytoscape and replaces the img.src with the new string. The problem is, that the old image stays in memory.

Maybe there is a better way to update the image instead of changing the img.src.

Testet on Chrome, 1h = ~ 1GB memory when updating the image every second

Found in "_updateThumbnailImage"

      if( png.indexOf('image/png') < 0 ){
        img.removeAttribute( 'src' );
      } else {
        img.setAttribute( 'src', png );
      }

This doesn't seem to work anymore.

The cytoscape-navigatorView is off by a bit. In the demo if you replace the version of cytoscape with a current release you can reproduce this. I looked at the code to figure out what values were off without luck. Maybe it has to do with graph padding?

/dist folder js files are not working

Please fix /dist folder js files as they are not working.

infinite loop

I noticed that the render() function is called periodically forever, even if the navigator is destroy()ed because of this line:
https://github.com/cytoscape/cytoscape.js-navigator/blob/master/cytoscape.js-navigator.js#L540

This is fine when you instantiate the navigator once, but if you instantiate the navigator more than once, these infinite loops pile up, and eventually consume 100% CPU.

In my project I've overridden window.requestAnimationFrame() so I can break this loop, but it would be nice if, when the navigator is destroy()ed, this loop were interrupted.

Shadow DOM support

Impossible to use this library inside a shadow root.
It happens because all html elements which in shadow root can not be retrieved from document.getElementById and document.getElementByClassName methods.
Needs the ability to pass a function to return a html element as the container option.

performance problems on 1000 elements

I'm trying to load nearly 500 nodes and 500 edges. I have rich and heavy styles. And hardware specs of the machine I'm testing on is not really good.

Just adding elements with add the function of Cytoscape.js is taking nearly 8-9 seconds. The browser freezes.

When I enable this extension I observed it takes nearly 8-10 seconds to execute this line which is simply png function.

I suspect that Cytoscape.js is busy and somehow it takes too much time. So tried to disable rendering. And I call rendering manually after I was sure that the browser is responsive.

setTimeout(() => {
  nav._onRenderHandler();
}, 30000);

Now png function takes 1-2 seconds. This is a lot better.

I see that render event fired too early and multiple times. Maybe I fire the event unnecessarily.

The browser is not responding well during loading elements and rendering. So how can I improve the performance?

Inexpensive no image option

Option would allow for disabling the renderTo() bit, so the extension would run faster. As long as the panner is differently coloured than the background, then the user should understand.

This would make a big difference for large graphs.

Labels in navigator image

Hi,
I am trying to add the navigator to our app, we are using min-zoomed-font-size to control showing nodes label at certain zoom level, but for some reason, the navigator image is always showing label for all nodes (the graph CY is not at the time), any way to sync them up or even to get rid of labels from the navigator image? Thanks

Options don't accept HTML element as container

Hi,
Thanks for the lib.

Looking at the _initPanel method it checks if the container is a string and creates a new one if it's not.
When providing an HTML element instead it's not honored

Wrong positioning of a framed section on the navigator.

Hello, great author/s of this library.
We are using your wonder to display a "mini" version of the canvas and as an easy tool to navigate through it.
With respect, I kindly ask you to help me out on troubleshooting an issue caused by a pretty specific scenario:

Given: N nodes, and N*5 edges;
When: A node is dragged really far away from rest on elements to the top;
And: Navigator is active;
Then: The highlighted/framed section of the visible part of the canvas has the wrong position;
So that: It's hard to identify the position of the node.

Attaching some screenshots for better understanding.

Configuration:

{
      viewLiveFramerate: 1,
      thumbnailEventFramerate: 30,
      thumbnailLiveFramerate: true,
      dblClickDelay: 200,
      removeCustomContainer: true,
      rerenderDelay: 0,
}

I'd be very thankful and happy if you'd like to assist me to understand what can be the root cause/explanation of such behavior!

Update on cy.resize() event

A resize event will be added in 2.3 for manual/programmatic resizes.
cytoscape/cytoscape.js#643

This is more efficient than polling and more flexible than just resize events on window.

Ghost images

Has anyone noticed that if you drag nodes or parent nodes around, after you drop them the there are faded 'ghost' images of the nodes and edges at the original locations?

This also happens when you zoom in/out

wrong rendering with custom html element

It seems like when we use an html element, it behaves erroneously. If we don't give an html element, it looks fine.

Erroneous

Normal

Navigator thumb does not display all elements when using the browsers zooming function

The navigator works fine when the zoom level is at 100%. When you zoom into the webpage the navigator doesn't display all elements.

Remove webpack / revise UMD

Ref #18

must include $ when registering

Using this library in an Aurelia application I find that I must register it with the jquery param or it fails to work.

works ok: navigator( cytoscape, $ );

doesn't work: navigator( cytoscape );

(love it, btw!)

Cytoscape Navigator instantiates at the bottom of the DOM in Angular 2+

Cytoscape Navigator instantiates at the bottom of the DOM in Angular 2+, instead of being a child of the parent container/div.

Licensing

Just a quick note on licensing jquery.json and bower.json specify differenct licenses for the library, LGPLv3 and MIT respectivly, is this intentional?

Wrong Package Name on Bower

Hi,

On README, it is said the name of the Bower package is cytoscape-navigator.
If you try with it, there is no package found.
Instead, it should be "cytoscape.js-navigator".
Hope it would be helpful!

container doesn't seem to work in 2.0.1

It appears that the container setting is ignored in 2.0.1. It always appears to default to a fixed position outside of any container. Works fine in 1.3.3.

Not connecting to container

Hello! Not sure if I am not setting this up correctly, but the navigator is not getting attached under the correct container. It is going under the html body element no matter what I specify in options.

It also does not have any height or the correct positioning, which could be due to not having the correct container?

this.cy.navigator({
      container: this.cy.container(),
      viewLiveFramerate: 0,
      thumbnailEventFramerate: 30,
      thumbnailLiveFramerate: false,
      dblClickDelay: 200,
      removeCustomContainer: true,
      rerenderDelay: 100
    });

Remove jQuery dependency

jQuery was used only for IE support. That's not so important now.

People who really want to support IE can stay on old versions.

This would be very nice to have, but it's difficult to find time to do this given everything planned for the main lib. If anyone is using this extension in their app who doesn't want to use jQuery, a pull request to remove jQuery from this extension would be greatly appreciated!

on/off navigator too much causes slow rendering

I added the extension and then removed it as mentioned in the readme using
"nav.destroy()". Making extension on and off too many times caused lag on rendering. You can observe the lag by zoom-in and out. You should make the extension on/off something like 30 times to observe the lag.

npm warnings related to JQuery

Below is the npm output for npm audit

=== npm audit security report ===

                             Manual Review                                  
         Some vulnerabilities require your attention to resolve             
                                                                            
      Visit https://go.npm.me/audit-guide for additional guidance           

Moderate Prototype Pollution

Package jquery

Patched in >=3.4.0

Dependency of cytoscape-navigator

Path cytoscape-navigator > jquery

More info https://nodesecurity.io/advisories/796

High Cross-Site Scripting (XSS)

Package jquery

Patched in >=3.0.0

Dependency of cytoscape-navigator

Path cytoscape-navigator > jquery

More info https://nodesecurity.io/advisories/328

Reduce peer dep to 2.6

I don't think we're using any 2.7-specific APIs

Problem using navigator and toolbar extensions

Hello.
I trying to use navigator and toolbar (https://github.com/bdparrish/cytoscape.js-toolbar) extensions at the same time but when I do that, can't see neither one.
Is even possible to use both extensions together?
Thanks in advance for the answer.

cytoscape.js-navigator does'nt work with new release of cytoscape.js

Hi,
I update my version of cytoscape.js to the new release (2.3.1) and the navigator doesn't work with. The same problem is present with the release (2.3.0). The previous releases (2.2.*) work fine.
When i load the page, an error is present in the console with the bountingBox() function.

Publish to npm.

Would be great if this module get published on npm.

When all elements are deleted from cy, navigator shows broken link image.

As you can see above, when there is no element in cytoscape.js instance, a broken link image is shown in navigator.

destroy() function does not remove cy listeners eg. cy.onRender

When calling destroy() the navigator element will be deleted but the listeners are not removed. This causes the extention to render even when it's not active any more.

Test script:

<script>
   [...]
   var nav = cy.navigator({
      // options...
      });
   [...]
   function destroyNav(){
       nav.destroy();
   }
   [...]
</script>

<body>
		<h1>cytoscape-navigator demo</h1>
		<button onclick="destroyNav()">Destroy nav</button>
		<div id="cy"></div>
</body>

Thumbnail render uses wrong pan scale factor

In _updateThumbnailImage, render should scale pan.x and pan.y respectively, not use same zoom factor.
otherwise it just render square bounding box properly.

"TypeError: targetOffset is undefined" in cytoscape-navigator.js:600

This issue can be easily reproduced in the demo when the mouse cursor leaves the browser window during a navigational drag, e.g. to the right.

Edges and nodes hidden after zoom

Hi,
Thank you cytoscape.js-navigator work with the release 2.3.1 of cytoscape.js.
But there are a little bug: Zooming hide edges and nodes that are out of the canvas limit.

Issues with cytoscape 2.7.1

I updated to cytoscape.js 2.7.1 and running into some issues using cytoscape.js-navigator
The bird's eye view flickers a lot (e.g. whenever a node is selected) and it does not redraw the complete graph when zooming in on the main view. Attached are the two screens one with less zoom and other with higher zoom. This used to work fine with cytoscape.js 2.6.x
Given here is the style corresponding to the graph.
{
selector: 'node',
style: {
'label': 'data(label)',
'background-color': '#786545',
'text-background-color': '#786545',
'text-background-shape': 'rectangle',
'text-background-opacity': 1.0,
'font-family': 'Roboto',
'color': '#ffffff',
'shape': 'ellipse',
'min-zoomed-font-size': 6,
'text-valign': 'center',
'text-halign': 'right',
'text-events': 'yes',
'text-opacity': 1,
'text-margin-x': -5
}
},
{
selector: 'node:selected',
style: {
'background-color': '#ffffff',
'background-width': '90%',
'background-height': '90%',
'border-color': '#786545',
'border-width': 1,
'text-background-shape': 'rectangle',
'text-background-color': '#ffffff',
'text-background-opacity': 1.0,
'text-border-color': '#786545',
'text-border-width': 1,
'text-border-opacity': 1,
'color': '#524A3D',
'text-events': 'yes'
}
},
{
selector: 'node[hover = 1]',
style: {
'padding-top': 5,
'padding-left': 5,
'padding-bottom': 5,
'padding-right': 5,
'font-weight': 'bold',
'font-size': 16,
'text-events': 'yes'
}
},
{
selector: 'edge',
style: {
'line-color': '#cab07f',
width: 2,
'text-events': 'yes',
'curve-style': 'haystack',
'haystack-radius': 0,
'source-label': 'data(srcTp)',
'target-label': 'data(destTp)',
'source-text-offset': 30,
'target-text-offset': 30,
'min-zoomed-font-size': 10,
'color': '#000000',
'text-background-color': '#cab07f',
'text-background-opacity': 1,
'text-background-shape': 'roundrectangle'
}
},

jQuery is not defined error

I wanted to use the navigator in a React app. I guess in a React app the module gets defined as a CommonJs module.

When initializing the navigator, if I set a container, I get "jQuery is not defined" error.

I guess the _initPanel function is referencing the global jQuery object rather than using the local $ variable.

Remove references to util

Required for 2.5

unable to get navigator working

Hi,

I'm trying to implement cytoscape-navigator in a React.js app. I'm pretty new in javascript development, so it's probably not an issue from your library but something i didn't understood. I've check many things but i don't know how to solve this issue: birds eye works correctly and when i move nodes in my cytoscape div, it's also refreshed in the navigator. However impossible to get other features from navigator (like moving/zooming). Any help would be appreciated to solve this issue.

-- [email protected]
-- [email protected]
-- [email protected]
-- [email protected]

let navigatorDefaults = {
	container: '#investigation-navigator',
	viewLiveFramerate: 0,
	thumbnailEventFramerate: 30,
	thumbnailLiveFramerate: false,
	dblClickDelay: 200,
	removeCustomContainer: false,
	rerenderDelay: 100
};

#investigation-navigator{
	cursor: default;
	position: absolute;
	bottom: 10px;
	right: 10px;
	border: #ffffff 1px solid;
	border-radius: 2px;
	background-color: #444444;
	height: 200px;
	width: 200px;	
	z-index: 1000;
}