Giters

cytoscape / cytoscape-tutorials

Collection of modular Cytoscape tutorials for online presentation using reveal.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Better GUI tutorial support for WikiPathways data visualization

khanspers opened this issue · comments

commented

The current WikiPathways App tutorial describes a simple use case of importing pathways and visualizing data. From a discussion with a WikiPathways curator and workshop instructor (Freddie) it was clear that some aspects of data visualization on pathways in Cytoscape are not described explicitly so they are hard to find/learn for novice Cytoscape users. For example:

  • Visualizing multiple data points or types on pathways, aka 'striped nodes' (similar to what's described for PathVisio here)
  • Visualizing the same data on multiple pathways in an efficient way

These features are described elsewhere([1], [2]), but they should be described in the context of a WikiPathways data viz project.

One idea would be to expand the existing WP app tutorial so that it includes two separate use cases, one for basic data viz on one pathway (basically the current protocol), and a more advanced use case for loading multiple pathways, and visualizing multiple data points using custom graphics.

commented

WP app tutorial has been updated:

  • Split into two workflows: Basic / Advanced
  • Expand basic visualization to include significance as node border color/width and how to add legend
  • New advanced workflow using custom graphics to visualize multiple data points of the same type
  • Instructions on how to import data to multiple pathways

Remaining to-do:

  • Corresponding R/Python scripts (after initial feedback on reveal slides)
  • Use Cytoscape JS notebooks to do the same thing, using easy to understand forms and file uploads, for users who don't want to use the GUI at all (later)
commented

This step is very difficult to follow, for what you intend to do.
Isn't there a better/easier way to achieve this? (Maybe adding a color pallet for p-values?)

Also, I'm not a fan of the "bright pink" for p-value visualization, I believe green is the clearest way to visualize significance.
image

commented

This step is also a lot of work, isn't there a smarter way to accomplish this? E.g. Download the network an pathway visualization in one Network Collection, and then applying the Styling?
image

commented

I cannot find the dropdown at the top (the Legend app is not part of the "Apps" menu for me)...

image

commented

The "border width" visualization in the legend is not helping me to understand the visualization... How could we change that?
image

commented

The data is not really a CSV, but a git raw....
I think it would make more sense to offer an actual CSV file
image
image

commented

Would it be possible to let people use the same data for the two workflows, iso changing to a new dataset?
image

commented

After the Step "Adding a Legend" (in Basic Workflow), it might be nice to add a slide on how to interpret the visualization? Before the slide telling people how to safe the file/network.

commented

#86 (comment) Same for the dataset for the advanced data visualization, it's in git raw content, not direct CSV download. (see also #96 )
image

commented

The "border width" visualization in the legend is not helping me to understand the visualization... How could we change that? image

Actually, the legend is only correct for the node fill color. And it can't be changed manually in the legend app. I think its a bug, so lets remove the legend completely since it doesn't make sense to just show it for the node fill.

commented

#86 (comment) Same for the dataset for the advanced data visualization, it's in git raw content, not direct CSV download. (see also #96 ) image

It is an actual csv file (in data directory), and we can link to it in two ways:

commented

Would it be possible to let people use the same data for the two workflows, iso changing to a new dataset? image

Sure we can use the same dataset for both.

commented

I cannot find the dropdown at the top (the Legend app is not part of the "Apps" menu for me)...

image

Right, it is an app that needs to be installed, described on setup slide. But based on a previous comment we will remove the use of the legend app because its buggy.

commented

This step is also a lot of work, isn't there a smarter way to accomplish this? E.g. Download the network an pathway visualization in one Network Collection, and then applying the Styling? image

It seems counter-intuitive to have to redo data import and styling for this, but actually we can't copy the style thats already created for the pathway, since it would then change the style of nodes etc to be like the WP style (rectangles etc). This step was left behind from when the tutorial only had a couple of steps, so maybe we don't need to keep it at all. Or maybe it should be another workflow focused on using WP content in a network context. Any ideas?

commented

The "border width" visualization in the legend is not helping me to understand the visualization... How could we change that? image

This step is very difficult to follow, for what you intend to do. Isn't there a better/easier way to achieve this? (Maybe adding a color pallet for p-values?)

Also, I'm not a fan of the "bright pink" for p-value visualization, I believe green is the clearest way to visualize significance. image

I normally always use the same color for any p-value thats significant, instead of a gradient, I think it makes more sense? Its also harder to see a gradient on a border than on node fill.
But I agree its sort of awkward to use the gradient feature to create this kind of threshold. I will think of ways to explain it better.
In terms of color choice, green doesn't look great against the particular palette chosen for the gradient. But I can try other colors other than pink.

commented

The "border width" visualization in the legend is not helping me to understand the visualization... How could we change that? image

Actually, the legend is only correct for the node fill color. And it can't be changed manually in the legend app. I think its a bug, so lets remove the legend completely since it doesn't make sense to just show it for the node fill.

In this case, a legend is only needed for the color gradient. There is not a meaningful/useful legend for border color or thickness. You would just say "pink borders denote p-value < 0.05" in the caption. The Legend Creator app has the option to deselect the legends that you don't want to show.

commented

The "border width" visualization in the legend is not helping me to understand the visualization... How could we change that? image

Actually, the legend is only correct for the node fill color. And it can't be changed manually in the legend app. I think its a bug, so lets remove the legend completely since it doesn't make sense to just show it for the node fill.

In this case, a legend is only needed for the color gradient. There is not a meaningful/useful legend for border color or thickness. You would just say "pink borders denote p-value < 0.05" in the caption. The Legend Creator app has the option to deselect the legends that you don't want to show.

Would the legend work better for the second example (when showing 3 comparisons on one Node?) @khanspers

commented

The "border width" visualization in the legend is not helping me to understand the visualization... How could we change that? image

This step is very difficult to follow, for what you intend to do. Isn't there a better/easier way to achieve this? (Maybe adding a color pallet for p-values?)
Also, I'm not a fan of the "bright pink" for p-value visualization, I believe green is the clearest way to visualize significance. image

I normally always use the same color for any p-value thats significant, instead of a gradient, I think it makes more sense? Its also harder to see a gradient on a border than on node fill. But I agree its sort of awkward to use the gradient feature to create this kind of threshold. I will think of ways to explain it better. In terms of color choice, green doesn't look great against the particular palette chosen for the gradient. But I can try other colors other than pink.

What we could do, is use a column filter, and then for the selected nodes set a Bypass? That's much easier to follow I believe, with the same result. That's also how I would script it @khanspers

commented

This step is also a lot of work, isn't there a smarter way to accomplish this? E.g. Download the network an pathway visualization in one Network Collection, and then applying the Styling? image

It seems counter-intuitive to have to redo data import and styling for this, but actually we can't copy the style thats already created for the pathway, since it would then change the style of nodes etc to be like the WP style (rectangles etc). This step was left behind from when the tutorial only had a couple of steps, so maybe we don't need to keep it at all. Or maybe it should be another workflow focused on using WP content in a network context. Any ideas?

Scripting this would be a lot easier... But, we could also show users from the start the two different visualizations (download the same pathway twice, once as "pathway" and once as "network"). Then, they can pick the one they prefer after the data visualization, right? @khanspers

commented

@DeniseSl22 : I will try to answer all three questions in one reply

  1. "Would the legend work better for the second example (when showing 3 comparisons on one Node?)" => Unfortunately the Legend Creator app doesn't work for Custom Graphics, that's why there's no legend for the second example.
  2. In regards to how to best describe the somewhat awkward creation of a threshold mapping of node border width/color for p-value: "What we could do, is use a column filter, and then for the selected nodes set a Bypass? That's much easier to follow I believe, with the same result. That's also how I would script it". => Thats an interesting idea. Indeed it could be scripted easily, but it could also be done in the GUI easily. The downside is that it only works on the one network/pathway that is selected (so works for use case 1 that only has one pathway), and we 're not teaching users how to incorporate significance as a style mapping. @AlexanderPico : What do you think?
  3. In regards to having to redo the mapping after import-as-network: "But, we could also show users from the start the two different visualizations (download the same pathway twice, once as "pathway" and once as "network"). Then, they can pick the one they prefer after the data visualization, right?" => yes thats a good idea, I can update the instructions.
commented

To capture all the feedback, we categorized them as things that will be fixed in the GUI and things that can be addressed with scripting, and opened a new issue for the scripted solution(#100).
This comment will summarize the remaining updates for the GUI tutorial:

commented

A third network-oriented workflow was added, I consider it draft format. Please add any feedback, and ideas of additional or alternative approaches to include here. @AlexanderPico @DeniseSl22

Direct link: https://cytoscape.org/cytoscape-tutorials/protocols/wikipathways-app/#/4