search

jamiewaese / ePlant

ePlant is a data visualization tool for integrating and exploring multiple levels of biological data.
MIT License
2 stars 1 forks source link

Implement Cytoscape interactions #28

Closed jamiewaese closed 10 years ago

jamiewaese commented 11 years ago

Try to use the HTML5 and existing web service you can get from Asher

yuzhenmi commented 11 years ago

I think Cytoscape might also be a viable option for pathways.

yuzhenmi commented 11 years ago

It seems Cytoscape.js uses CSS to style nodes, edges, etc. The nodes and edges are defined with JavaScript objects. We just have to give it the initial parameters and it will do its thing.

Should I try to imitate the graphical layout from the old Interactions Viewer or do you have something else in mind? I'm not familiar with the Flash version of Cytoscape, but I'm guessing CSS should give it more flexibility in appearance.

Here's a demo that Cytoscape.js provides: http://jsbin.com/ERiVulo/1/edit

yuzhenmi commented 11 years ago

Cytoscape becomes broken when the JSmol library is loaded after it... I REALLY hope they don't conflict!!

jamiewaese commented 11 years ago

Sure, or even just use the defaults for now. I'll think about styling once it's up and running.

On 2013-10-14, at 3:41 PM, Hans Yu notifications@github.com wrote:

It seems Cytoscape.js uses CSS to style nodes, edges, etc. The nodes and edges are defined with JavaScript objects. We just have to give it the initial parameters and it will do its thing.

Should I try to imitate the graphical layout from the old Interactions Viewer or do you have something else in mind? I'm not familiar with the Flash version of Cytoscape, but I'm guessing CSS should give it more flexibility in appearance.

Here's a demo that Cytoscape.js provides: http://jsbin.com/ERiVulo/1/edit

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

yuzhenmi commented 11 years ago

It's running with very basic configurations. After you enter the chromosome view, just click on the Cytoscape icon to go there. Right now, it's hard-coded to retrieve data for At2g41460, for testing purpose. I set the layout algorithm to force-directed.

yuzhenmi commented 11 years ago

Using the same approach I came up with for the JSmol demo, I've layered Cytoscape under the main ZUI div to intercept mouse events and then passing them to Cytoscape. There seems to be slight reduction in performance, probably due to the delay in passing the mouse events, but I think it's worth it, since the ZUI layer will maintain complete control over handling user inputs.

jamiewaese commented 11 years ago

Looking forward to seeing it. The link isn't active…

The Cytoscape page is a good start! When we mouse over the nodes, we should get our annotation popup window, eh? Another opportunity to load genes of interest and zoom into them.

A few random styling notes, since it will be easier for you to implement than me right now:

On 2013-10-14, at 9:52 PM, Hans Yu notifications@github.com wrote:

Using the same approach I came up with for the JSmol demo, I've layered Cytoscape under the main ZUI div to intercept mouse events and then passing them to Cytoscape. There seems to be slight reduction in performance, probably due to the delay in passing the mouse events, but I think it's worth it, since the ZUI layer will maintain complete control over handling user inputs.

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

yuzhenmi commented 11 years ago

The link isn't active? That's odd, it works for me!

RE center on stalk: the zoom is centered on the SVG, but I guess I can set the SVG's positional offset to make it center on stalk (the stalk is not at the center of the SVG)

jamiewaese commented 11 years ago

The link to the Cytoscape viewer works. JSMol link doesn't work… did you say you had that view working?

On 2013-10-14, at 11:08 PM, Hans Yu notifications@github.com wrote:

The link isn't active? That's odd, it works for me!

RE center on stalk: the zoom is centered on the SVG, but I guess I can set the SVG's positional offset to make it center on stalk (the stalk is not at the center of the SVG)

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

yuzhenmi commented 11 years ago

Oh no, I havent done JSmol yet. I was referring to my demo from last month.

yuzhenmi commented 11 years ago

Made the styling changes that you requested.

RE mouse over nodes for annotation popup: I think it might be distracting to do this, since the nodes are draggable. I imagine people don't want to see the popup each time they drag a node. Maybe I can try to make it so that a left or right click triggers the popup? If that doesn't work out then we can go for the mouse over trigger and maybe remove the popup when the user drags the node...

jamiewaese commented 11 years ago

A click would be more touch friendly too. Single click to bring up the popup. Click and hold to drag.

Strange that the nodes aren't draggable for me tonight…

Would it be hard to make the label of the target gene darker?

On 2013-10-15, at 9:11 PM, Hans Yu notifications@github.com wrote:

Made the styling changes that you requested.

RE mouse over nodes for annotation popup: I think it might be distracting to do this, since the nodes are draggable. I imagine people don't want to see the popup each time they drag a node. Maybe I can try to make it so that a left or right click triggers the popup? If that doesn't work out then we can go for the mouse over trigger and maybe remove the popup when the user drags the node...

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

yuzhenmi commented 11 years ago

Dragging still works fine for me. Can you try another browser?

What do you mean by making the target gene darker? Make the node and its label darker after the user clicks it?

jamiewaese commented 11 years ago

I mean the centre one, the gene that was targeted when we entered that view.

Double clicking on another gene would make that the new target and the view would reload with the new target centred, and all the other views (efp, jsmol, etc) would update as well.

I have bad internet in the hotel so I'm having page load time-outs.

On 2013-10-15, at 10:06 PM, Hans Yu notifications@github.com wrote:

Dragging still works fine for me. Can you try another browser?

What do you mean by making the target gene darker? Make the node and its label darker after the user clicks it?

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

yuzhenmi commented 11 years ago

I changed the color of the query node to MED_GREY, and the other nodes are set to LIGHT_GREY.

jamiewaese commented 11 years ago

Nice, though let's make the query node DARK_GREY… It is the gene of interest, after all.

I like the stroke around the nodes when dragging.

I think we should try having the popup come up on mouseOver. I'm not sure it will be annoying if people want to drag. It can disappear if people are dragging. But it would be very satisfying to go exploring with a simple mouse over… "Hmm, what's this?"

On 2013-10-15, at 10:26 PM, Hans Yu notifications@github.com wrote:

I changed the color of the query node to MED_GREY, and the other nodes are set to LIGHT_GREY.

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