Better GUI tutorial support for WikiPathways data visualization

[khanspers]

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.

[khanspers]

WP app tutorial has been updated:

• [x] Split into two workflows: Basic / Advanced
• [x] Expand basic visualization to include significance as node border color/width and how to add legend
• [x] New advanced workflow using custom graphics to visualize multiple data points of the same type
• [x] 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)

[DeniseSl22]

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.

[DeniseSl22]

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?

[DeniseSl22]

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

[DeniseSl22]

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

[DeniseSl22]

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

[DeniseSl22]

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

[DeniseSl22]

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.

[DeniseSl22]

https://github.com/cytoscape/cytoscape-tutorials/issues/86#issuecomment-1557001541 Same for the dataset for the advanced data visualization, it's in git raw content, not direct CSV download. (see also #96 )

[khanspers]

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

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.

[khanspers]

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

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

• https://github.com/cytoscape/cytoscape-tutorials/blob/gh-pages/protocols/data/E-GEOD-68086.csv, and instruct users to click on the download button.
• https://raw.githubusercontent.com/cytoscape/cytoscape-tutorials/gh-pages/protocols/data/E-GEOD-68086.csv, and instruct users to right-click anywhere and select Save As.

[khanspers]

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

Sure we can use the same dataset for both.

[khanspers]

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

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.

[khanspers]

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?

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?

[khanspers]

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

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.

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.

[AlexanderPico]

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

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.

[DeniseSl22]

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

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

[DeniseSl22]

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

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.

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

[DeniseSl22]

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?

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

[khanspers]

@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.

[khanspers]

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(https://github.com/cytoscape/cytoscape-tutorials/issues/100). This comment will summarize the remaining updates for the GUI tutorial:

• [ ] Make a new workflow for networks only since its not common to mix the two.
• [x] Legend will be for node fill only
• [x] Data link will be updated (https://cytoscape.org/cytoscape-tutorials/protocols/wikipathways-app/#/title)
• [x] All workflows will use the same data
• [x] Add screenshot showing how to import data to all pathways

[khanspers]

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