Implement PathwayView (Reactome)

[yuzhenmi]

I was originally planning to implement PathwayView with Cytoscape.js. However, many Reactome pathway diagrams contain bent edges, i.e. edges that are composed of multiple straight lines with different slopes. In Cytoscape, edges are inferred according to node positions, so the bent edges cannot be created directly.

I think I have two options: -Create pseudo-nodes with 0-radius in Cytoscape to "bend" the edges -Write my own network visualization module

Any opinions?

Right now, the PathwayView simply loads the nodes and runs force-directed algorithm on them. I've enabled the button to direct to the view for At2g41460.

[jamiewaese]

We can discuss this tomorrow, but my initial leaning is to the 0-radius pseudo nodes in Cytoscape. Is it necessary though? I thought I saw curved lines in a Cytoscape viewer once. But I'm not sure that's the same thing. Can you send me an example of what you mean?

I think it could be a pain to write a network visualization module, but if that's the only way count me in -- if we do it in Processing. At least we'd be able to custom fit it to the rest of our architecture.

On 2013-11-04, at 1:06 PM, Hans Yu notifications@github.com wrote:

I was originally planning to implement PathwayView with Cytoscape.js. However, many Reactome pathway diagrams contain bent edges, i.e. edges that are composed of multiple straight lines with different slopes. In Cytoscape, edges are inferred according to node positions, so the bent edges cannot be created directly.

I think I have two options: -Create pseudo-nodes with 0-radius in Cytoscape to "bend" the edges -Write my own network visualization module

Any opinions?

Right now, the PathwayView simply loads the nodes and runs force-directed algorithm on them. I've enabled the button to direct to the view for At2g41460.

— Reply to this email directly or view it on GitHub.

[yuzhenmi]

Notice how in the image below, two lines bend and converge into one... This cannot be done in Cytoscape because there is no option for defining the position of edges. The edges are generated automatically. The first edge between two nodes is drawn as a straight line. Additional edges are drawn as Belzier curves.

[jamiewaese]

That can be challenging. I'm not especially thrilled with the prospect of writing our own tool for this from scratch.

Can we import PNG's or whatever else generates these?

On 2013-11-04, at 4:54 PM, Hans Yu notifications@github.com wrote:

Notice how in the image below, two lines bend and converge into one... This cannot be done in Cytoscape because there is no option for defining the position of edges. The edges are generated automatically. The first edge between two nodes is drawn as a straight line. Additional edges are drawn as Belzier curves.

— Reply to this email directly or view it on GitHub.

[yuzhenmi]

I'm not really interested in recreating it either. I'll give the pseudo-node method a try, it should work, at least in my head. With Cytoscape, I can define CSS classes that can be applied to nodes and edges. Basically, I'm thinking of defining classes for different types of nodes (e.g. reaction node, small molecule, protein, etc.). I can simply define a special node class called pseudo which would have a radius of 0 and no labeling.

There is the option of PNG from Reactome, but I'd like to retain the object-oriented data structure which is available in XML or JSON. That way we can customize the diagram and access data however we want.

[yuzhenmi]

I've been playing around with Cytoscape.js for the PathwayView again. One huge drawback I've found is that Cytoscape.js does not support text wrapping, or even newline characters for node labels. Notice how Reactome has node labels within the nodes, and the size of the nodes are manually curated to fit the labels, which in turn affects the overall network layout. In Cytoscape, this cannot be reproduced since we're limited to one line of node label, so we cannot use Reactome's node sizes. What I did is give the nodes fixed sizes and position labels on the top, like the InteractionView. This, however, does make the layout less visually appealing than the native Reactome layout, since node sizes are shrinked.

The good news is that the pseudo-node method described in my previous comment works perfectly.

To see my current progress, click on the PathwayView icon when you are in ChromosomeView. It is a test view so, as always, you cannot change views after you enter.

[jamiewaese]

That's kinda cool, and kinda crazy looking at the same time.

Can you write your own text wrapping method?

This may be an ugly hack, but what if you draw the labels into temporary PNG files, then place those wherever you need them?

Or… is there an alternative to Cytoscape for this?

On 2013-12-20, at 9:53 PM, Hans Yu notifications@github.com wrote:

I've been playing around with Cytoscape.js for the PathwayView again. One huge drawback I've found is that Cytoscape.js does not support text wrapping, or even newline characters for node labels. Notice how Reactome has node labels within the nodes, and the size of the nodes are manually curated to fit the labels, which in turn affects the overall network layout. In Cytoscape, this cannot be reproduced, so we cannot use Reactome's node sizes. What I did is give the nodes fixed sizes and position labels on the top, like the InteractionView. This, however, does make the layout less visually appealing than the native Reactome layout, since node sizes are shrinked.

The good news is that the pseudo-node method described in my previous comment works perfectly.

To see my current progress, click on the PathwayView icon when you are in ChromosomeView. It is a test view so, as always, you cannot change views after you enter.

— Reply to this email directly or view it on GitHub.

[yuzhenmi]

Hmmm... Using PNG won't be necessary. Maybe I can overlap the labels on my own framework. I think all I have to do is sync the cameras between my framework and Cytoscape's, which I have already done for InteractionView. Then I can add text objects via my framework, which absolutely supports text wrapping!

[yuzhenmi]

I synced the cameras and inserted a shape via my framework to the view for testing purpose. Since my framework does not have to deal with heavy rendering, it is going at a noticeably higher frame rate. This breaks the visual sync between my framework and Cytoscape.

Should we try something else? Or would this be acceptable?

[yuzhenmi]

I went ahead and used this method to get text-wrapped labels, check it out!

One of the next things for this view would be to handle complexes and sets (basically, nodes with child components). I feel that the child components should be shown with some sort of list, instead of rendering them as nodes (it would be hard to decide where to place the child nodes). I think Reactome shows them as part of the node's detailed information in a text section.

[jamiewaese]

I'm in San Francisco with my family at the moment so it may take me a couple days to look at this. We're going to visit Nick in Davis tomorrow so we'll look at it together.

Merry Xmas!

On Dec 24, 2013, at 7:51 PM, Hans Yu notifications@github.com wrote:

I went ahead and used this method to get text-wrapped labels, check it out!

One of the next things for this view would be to handle complexes and sets (basically, nodes with child components). I feel that the child components should be shown with some sort of list, instead of rendering them as nodes (it would be hard to decide where to place the child nodes). I think Reactome shows them as part of the node's detailed information in a text section.

— Reply to this email directly or view it on GitHub.