Deterministic mode

[Liran]

Hi,

I'm starting a project with cytoscape web.

I'm really enjoying using this tool, it's versatility and ease of use are amazing!

I need the program to generate force-directed graphs.

However, the problem is that with each page refresh the layout changes completely.

Is there a deterministic mode for the graph layout?

Is there a way possibly to control the random seed of the layout generator?

Thanks,

Liran

[Christian Tannus Lopes]

Thanks!

Unfortunately there is no way to control the random seed of the force directed layout in Cytoscape Web.

One thing you could do is use an external layout library (e.g. a Java algorithm in the server-side) and send the positions to Cytoscape Web, either by using XGMML or through the "Preset" layout (http://cytoscapeweb.cytoscape.org/documentation/layout).

[Liran]

OK, thanks.

I have thought about actually running Cytoscapeweb from a command line Chrome-based browser and let it save an XGMML file that will be used as long as data won't change, but maybe I will use an external layout library.

I have a few other questions.

1. I've added custom images to the nodes using PNG files.
   The png files are partly transparent.
   How can I set a node to be transparent where the PNG is?
   I figured that I have to choose a shape for the node even if I've chosen an image, I wish to have borderless nodes but I'm still seeing the original shape, there is no way to change the opacity of the shape.
2. Upon exporting to PDF I'm not getting the custom images I've added (in PNG export it works well).
3. When adding custom context menu actions, in Linux only (ubuntu) when using Chromium the right click does not produce any menu at all. In firefox (linux) the right click menu only appears on constant pressing if I lift my finger the menu is gone. In windows it works perfect on all browsers. On other sites (and even before I'm adding custom context menu actions) right click is fully working.
4. Is there a way to implement the zoom to work with the mouse wheel?
5. What does the "network" attribute mean in graphml?

Thank you,

Liran

[Liran]

One more issue I've been having.

At some zoom level the nodes images seem to disappear when moved to the right.

I've added a video to show what happens.

[Liran]

By the way, selected nodes don't have these problems.

[Christian Tannus Lopes]

Yeah… this is a Flash related bug that happens when the bitmap images are too large.
Try to reduce the images to a size that still looks good when you zoom in all the way. That should solve it.

> <20110322_1349_49.mp4>

[Christian Lopes]

Hi Liran,

1. Unfortunately it is not possible yet, as a node always have a color. But I understand that a "transparent" fill color option would be interesting, and will try to do that in the next versions.

2. The PDF export does not support images. Maybe a better idea would be to export the network to SVG instead, since it can draw the images.

3. Yes, I am aware of this problem, but we haven't had time to fix it yet.

Besides it seems to be a Flash/Chrome/Linux issue only, and I was hopping that a new version of Flash or Chrome would fix it. I will try to take a look at it again, but can't tell you when I will be able to do that.

4. The major problem is that, as far as I'm concerned, Flash does not support the mouse wheel on Mac OS. I have even tried some JavaScript libraries, but they are usually buggy and have browser compatibility issues too.

Anyway it is one thing we would really like to have too, maybe in future versions of Cytoscape Web.

5. Sorry, but I didn't understand the question. Do you have an example?

Thanks,

Christian

[Gary Bader]

Hi Liran,

On 2011-03-24, at 5:13 PM, Christian Lopes wrote:

> Hi Liran,
>
> 1. Unfortunately it is not possible yet, as a node always have a color. But I understand that a "transparent" fill color option would be interesting, and will try to do that in the next versions.
>
> 2. The PDF export does not support images. Maybe a better idea would be to export the network to SVG instead, since it can draw the images.
>
> 3. Yes, I am aware of this problem, but we haven't had time to fix it yet.
> Besides it seems to be a Flash/Chrome/Linux issue only, and I was hopping that a new version of Flash or Chrome would fix it. I will try to take a look at it again, but can't tell you when I will be able to do that.
>
> 4. The major problem is that, as far as I'm concerned, Flash does not support the mouse wheel on Mac OS. I have even tried some JavaScript libraries, but they are usually buggy and have browser compatibility issues too.
> Anyway it is one thing we would really like to have too, maybe in future versions of Cytoscape Web.

If you or someone else can figure out how to get the mousewheel working in a general way, we would be happy to test and apply a patch.

Cheers,
Gary

>
> 5. Sorry, but I didn't understand the question. Do you have an example?
>
> Thanks,
>
> Christian
>
>
> On Tue, Mar 22, 2011 at 5:48 AM, Liran <lir...@gmail.com> wrote:
> OK, thanks.
> I have thought about actually running Cytoscapeweb from a command line Chrome-based browser and let it save an XGMML file that will be used as long as data won't change, but maybe I will use an external layout library.
>
> I have a few other questions.
>
> • I've added custom images to the nodes using PNG files.
> The png files are partly transparent.
> How can I set a node to be transparent where the PNG is?
> I figured that I have to choose a shape for the node even if I've chosen an image, I wish to have borderless nodes but I'm still seeing the original shape, there is no way to change the opacity of the shape.
> • Upon exporting to PDF I'm not getting the custom images I've added (in PNG export it works well).
> • When adding custom context menu actions, in Linux only (ubuntu) when using Chromium the right click does not produce any menu at all. In firefox (linux) the right click menu only appears on constant pressing if I lift my finger the menu is gone. In windows it works perfect on all browsers. On other sites (and even before I'm adding custom context menu actions) right click is fully working.
> • Is there a way to implement the zoom to work with the mouse wheel?
> • What does the "network" attribute mean in graphml?
> Thank you,
> Liran
>

http://baderlab.org
The Donnelly Centre - http://www.thedonnellycentre.utoronto.ca/
University of Toronto

[Liran]

Thanks Christian for all your answers.

3. This is also an issue in firefox/Flash/Linux, but a bit different.

Another thing I wish Cytoscapeweb had was a layout like this:

http://bit.ly/gYBPTh

Without it it's rather difficult for us to implement CytoscapeWeb for our purposes.

It basically allows us to add nodes to an existing graph and draw a new layout while making a best effort to preserve the old layout.

Regards,

Liran

[Liran]

I think I found the problem for the linux/Chrome/Firefox problem.

Remove "wmode", "opaque" from:

                AC_FL_RunContent(

                        "src", this.swfPath,

                        "width", "100%",

                        "height", "100%",

                        "align", "middle",

                        "id", this.id,

                        "quality", "high",

                        "bgcolor", "#ffffff",

                        "name", this.id,

                        "allowScriptAccess", "always",

                        "type", "application/x-shockwave-flash",

                        "pluginspage", "http://www.adobe.com/go/getflashplayer",

                        "wmode", "opaque", // DO NOT set it to "transparent", because it may crash FireFox and IE on Windows!

                        "flashVars", flashVars

                );

[Christian Tannus Lopes]

Hi Liran, 

Thanks for your help!

I will test it and see if we can create a general solution that works in all browsers.

Maybe parse the user agent, and if it has "Linux" and "Chrome", then it removes the wmode.

Just check if you still can get HTML elements, such as a div, on top of Flash when you do that, unless your app does not need it.

Christian

[Christian Tannus Lopes]

Well, I tried to fix it by removing the "opaque" wmode, but then Cytoscape Web covers up any overlapping HTML element, as expected.

Since it is a Chrome or Flash bug on Linux, I think there is not much we can do.

If your application does not need to have any HTML element on top of Cyto.Web, then setting  wmode to "window" may be the only option. 

if you want to do that, without changing the cytoscapeweb.js source code, you could replace the Visualization.embedSWF() function before calling draw(). Example

if (isLinuxChrome) {

    vis.embedSWF = function() {

               // Keep same code…

                AC_FL_RunContent(

                        "src", this.swfPath,

                        "width", "100%",

                        "height", "100%",

                        "align", "middle",

                        "id", this.id,

                        "quality", "high",

                        "bgcolor", "#ffffff",

                        "name", this.id,

                        "allowScriptAccess", "always",

                        "type", "application/x-shockwave-flash",

                        "pluginspage", "http://www.adobe.com/go/getflashplayer",

                        "wmode", "window", // "transparent" may crash FireFox and IE on Windows!

                        "flashVars", flashVars

                );

               // keep same code...

    };

}

For more info about this issue see:

http://code.google.com/p/chromium/issues/detail?id=65538

http://code.google.com/p/chromium/issues/detail?id=40157

A very good explanation about Flash's window mode, with nice examples:

http://www.communitymx.com/content/article.cfm?cid=e5141

On 2011-03-30, at 7:56 AM, Liran wrote:

[Liran]

Hi Christian,

I have HTML elements on top of my Flash and they did not disappear when I removed the window mode (check the screenshot).

This is the HTML that I am using:

<body> <div><a href="#" onclick="vis.exportNetwork('xgmml', 'exporter.php?type=xml&amp;server=1', { window: '_blank' });">Save changes to server</a> | <a href="javascript:testgraph('network.xml');">Load last graph</a> | <a href="#" onclick="vis.exportNetwork('png', 'exporter.php?type=png', { window: '_blank' });">Save to PNG</a></div> <div id="network_map"><embed src="CytoscapeWeb.swf" width="100%" height="100%" align="middle" id="cytoscapeWeb1" quality="high" bgcolor="#ffffff" name="cytoscapeWeb1" allowscriptaccess="always" pluginspage="http://www.adobe.com/go/getflashplayer" flashvars="id=cytoscapeWeb1" type="application/x-shockwave-flash"> </div> </body>

Other Flash objects that I've seen seem to get along without the wmode.

In any case I think I can remove it without trouble so I will do it manually.

As for the issue with the PNG icons (the one that I attached a movie in a reply above), This problem doesn't occur when a node is selected, with it selected I can move it anywhere at any zoom level without trouble.

So this means it's not a Flash problem, right?

Do you think that you can easily support SVG Icons instead of PNG? this will probably solve the problem above and I think Flash supports it Out of the box.

Thanks again for everything, you have built an excellent software.

And of course if you have time to look at this: http://bit.ly/gYBPTh, what do you think? is it possible to implement? do you know of any open source tool that supports this kind of thing?

[Liran]

Hi Christian,

I see, it was my mistake, wmode=opaque is for putting HTML content in front of flash (I thought something else).

So please disregard the first part of my question.

Thanks

[Max Franz]

(1) All right.

(2) Selected nodes just have a different visual style.  It doesn't make sense for there to be a difference in the background like that, because selected nodes are logically structured the same as unselected nodes. 

(3) There is a complication with adding an SVG background.  As I remember, it's easy to add a bitmap as a background for a sprite, but we'd need to create entirely new sprites to draw the SVG---complicating the design. 

[Liran]

(2) Please check the attached AVI.

[Christian Lopes]

Sorry but I could not play the video.
Have you tried to reduce the image size, as I had suggested?

On 2011-04-04, at 12:12 PM, Liran <lir...@gmail.com> wrote:

> (2) Please check the attached AVI.

> <1.avi>

[Liran]

It's acceptable with a 200x200 image, but even than it always happens at some zoom level.

What my video was suppose to show is that it doesn't happen in selected nodes, if you select a node there is no problem but if the node is unselected it happens.

Just figured maybe it's an easy to fix bug since it does work perfectly with selected items.

I will upload the video later when I'll be near a windows machine.

[Christian Lopes]

Flash does not render the images correctly when the elements are scaled down and the images are bigger. I can change the code to redraw the nodes with images after zooming, but that could decrease the performance. I guess that is why selecting the node fixes the problem, because the selection forces the node to be redrawn. Anyway I will try that again, and let you know when it is fixed, so we can also test if the performance is acceptable.

Christian

[Liran]

Hi Christian,

Thank you for checking this.

However, if it does causes performance decrease it's not worth it.

I will have More than a thousand nodes in my graphs and performance is much more important than some missing icons at certain zoom levels.

Maybe you can make a trigger to enable/disable it?

As for the Mouse wheel zoom.

I found a workaround that works great for me:

Download mouswheel jquery plugin:

https://github.com/brandonaaron/jquery-mousewheel/

And add these lines to the onload event:

$('#graph_div').mousewheel(function(event, delta, deltaX, deltaY) {

vis.zoom(vis.zoom() + (deltaY / 10));

});

This worked perfectly for me, still requires more OS/Browsers testing but seem to work pretty well on Windows IE/Chrome .

[Liran]

Fully works in: Windows: IE/Chrome/Firefox Linux: Firefox

Doesn't work in Linux: Chrome

[Christian Lopes]

Which Linux distribution and version?

[Liran]

The mouse wheel zoom workaround doesn't work on Chromium 11.0.696.28 On Ubuntu 10.10 .

Although I have disabled wmode, it may affected by this.

How does this work on Mac/Safari/Chrome?

Maybe there is a different plugin, I need to test this further, I just wanted to make sure that I have a workaround for this.

[Max Franz]

You'll probably have to implement it several times for each browser and operating system, since it's problematic.

[Liran]

I guess...

Most of my users are Windows users, and in windows it works without any problems on all browsers.

So those with Linux/Chrome will have to suffice with the pan/grab/zoom widget.

[Liran]

Hi Christian,

Just wanted to check if there was any progress with this.

This is a big problem when using custom images, it looks very strange when you zoom out enough (I've reached satisfactory results with 90x90 PNGs, but this is a very small image).

Thanks for everything!

By the way when are you planning to release the next build?

[Christian Tannus Lopes]

Hi,

The new version (0.7.3) should have it fixed. It has just been released.
Please give it a try and let us know if you still have any issues.

Thanks!

[Liran]

Hi Christian,

Just tested the new version and it seems to work!

Thanks a lot!

Did this affect performance in any way (on large networks)?

Great update!

[Christian Lopes]

I could not notice any performance issues, but have not run any formal tests either.

Thanks,
Christian