eweitz / ideogram

Chromosome visualization for the web
https://eweitz.github.io/ideogram
Other
294 stars 71 forks source link

Show pathway diagrams for interacting genes #370

Closed eweitz closed 3 months ago

eweitz commented 3 months ago

This renders biochemical pathway diagrams for interacting genes. That gives deep functional insight into cell circuits.

Previously (#293), the interactions between a searched gene and an interacting gene were summarized only by text. For example, LDLR was reported to "act on" APOE in certain pathways like "Familial hyperlipidemia type 3".

That was useful, but quite limited. Genes work in directed graphs; the text only summarizes one adjacent gene among many causally related genes in that medical condition. Users could click to see the full pathway, but would be brought to the external WikiPathways website in a static page. Zooming to discern genes in big pathways required clicking to load another page.

Now, the pathway diagram is shown right in the embedding page, and it's interactive. This dramatically reduces cognitive load when exploring. The searched gene (e.g. "LDLR") and interacting gene ("APOE") are highlighted in the pathway. Here's how it looks!

https://github.com/user-attachments/assets/8ebf53e8-86f0-4a59-a504-6055e6b06d84

The interactive zooming, panning, and coloring is enabled by Pvjs. Diagram SVGs and their built-in structured data come from WikiPathways.