Revised bubble/cluster behaviour

[maxkfranz]

General information

Update the bubbles, with most of the revised behaviour. Changes on dev.

Associated issues:

• 264

Checklist

Author:

• [x] One or more reviewers have been assigned.
• [ ] N/A -- Automated tests have been included in this pull request, if possible, for the new feature(s) or bug fix.
• [x] The associated GitHub issues are included (above).
• [x] Notes have been included (below).

Reviewers:

• [ ] All automated checks are passing (green check next to latest commit).
• [ ] At least one reviewer has signed off on the pull request. Reviewers have two business days to review the pull request, after which the author may merge in the pull request unilaterally.

Notes

• When you click a bubble, it should show you the genes in the bubble. Basically, select the children.
• Drag anywhere on the cluster to move it.
• All uppercase labels instead of lowercase for now. It's better than lowercase, and getting everything nicely in title case requires cleaning the database.
• Bubbles shouldn't stay expanded. They should auto-close when you click away.
• When you expand, if it expands and overflows the screen it should it to screen.

The labels are easier to read:

Bubbles are easy to drag:

https://github.com/cytoscape/enrichment-map-webapp/assets/989043/318ab297-f77f-4587-a80e-33e935a7a5f4

Selecting a bubble shows you the genes in it:

https://github.com/cytoscape/enrichment-map-webapp/assets/989043/93756779-1a52-4e3c-a20d-0d9214356101

Expanding fits to screen when needed:

https://github.com/cytoscape/enrichment-map-webapp/assets/989043/48865d0e-c489-42fa-be4b-c47149db3f5a

[maxkfranz]

Note: The expand/collapse icon isn't shown when a bubble is expanded. The icon got in the way of the nodes. Tapping the bubble to collapse it is also disabled. It's easy to tap the background to collapse, and this way the icon doesn't get in the way of the nodes when the child labels are visible.

[maxkfranz]

Bonus update: The bubbles follow the nodes smoothly.

Before:

https://github.com/cytoscape/enrichment-map-webapp/assets/989043/531a3fea-f929-415a-9f23-e61e2c92bd0d

After:

https://github.com/cytoscape/enrichment-map-webapp/assets/989043/6ff4364d-f318-4231-bcc2-3e2f0bf60fbf

[maxkfranz]

Edges don't get in the way of bubble labels, expanding bubbles, or dragging bubbles:

https://github.com/cytoscape/enrichment-map-webapp/assets/989043/ed824959-3e99-4f60-8a74-2d29e47948f9

[maxkfranz]

Black labels, since there isn't space to see the nodes. We need to see the nodes if we use a mapper for the p-value.

---

The labels are always legible, even when there's node or edge overlap:

[mikekucera]

Hi Max, I can give you my opinion on the changes, but you're the one who talked to the users so my opinion my not be valid... Feel free to disregard.

• I think the network looks great initially, when its zoomed out and all clusters are collapsed. However expanded clusters now look more complex. Labels are much more likely to overlap each other, making them hard to read.

Before:

After:

• The selection color makes labels hard to read when selected. Why are we using dark grey instead of yellow?

• The labels for many pathways are very long. Maybe they should be shortened with ellipsis?

Here's an example where the pathway name is abbreviated in the table but not in the network :)

• The auto-zoom is nice.