Skip to main page content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Access keys NCBI Homepage MyNCBI Homepage Main Content Main Navigation
. 2018 Apr 1;34(7):1208-1214.
doi: 10.1093/bioinformatics/btx752.

Reactome diagram viewer: data structures and strategies to boost performance

Antonio Fabregat  1   2 , Konstantinos Sidiropoulos  1 , Guilherme Viteri  1 , Pablo Marin-Garcia  3   4 , Peipei Ping  5 , Lincoln Stein  6   7 , Peter D'Eustachio  8 , Henning Hermjakob  1   9
Affiliations

Reactome diagram viewer: data structures and strategies to boost performance

Antonio Fabregat et al. Bioinformatics. .

Abstract

Motivation: Reactome is a free, open-source, open-data, curated and peer-reviewed knowledgebase of biomolecular pathways. For web-based pathway visualization, Reactome uses a custom pathway diagram viewer that has been evolved over the past years. Here, we present comprehensive enhancements in usability and performance based on extensive usability testing sessions and technology developments, aiming to optimize the viewer towards the needs of the community.

Results: The pathway diagram viewer version 3 achieves consistently better performance, loading and rendering of 97% of the diagrams in Reactome in less than 1 s. Combining the multi-layer html5 canvas strategy with a space partitioning data structure minimizes CPU workload, enabling the introduction of new features that further enhance user experience. Through the use of highly optimized data structures and algorithms, Reactome has boosted the performance and usability of the new pathway diagram viewer, providing a robust, scalable and easy-to-integrate solution to pathway visualization. As graph-based visualization of complex data is a frequent challenge in bioinformatics, many of the individual strategies presented here are applicable to a wide range of web-based bioinformatics resources.

Availability and implementation: Reactome is available online at: https://reactome.org. The diagram viewer is part of the Reactome pathway browser (https://reactome.org/PathwayBrowser/) and also available as a stand-alone widget at: https://reactome.org/dev/diagram/. The source code is freely available at: https://github.com/reactome-pwp/diagram.

Contact: [email protected] or [email protected].

Supplementary information: Supplementary data are available at Bioinformatics online.

PubMed Disclaimer

Figures

Fig. 1.
Fig. 1.
Schematic view of a pathway made up of two reactions. (a) The pathway diagram as presented to the final user. (b) Underlying graph with the whole content of the pathway. (c) Representation of the merging of both the diagram and graph on the client side. In the figure, Pn are proteins, SMn are chemicals, Cn are complexes and Rn are reactions. From the graph, it can be extracted that C1 contains [P1, P2], C2 contains [P3, P4, SM1, SM2] and C3 contains [C1, C2], but by traversing the graph it can be easily inferred that C3 actually contains [P1, P2, P3, P4, SM1, SM2]
Fig. 2.
Fig. 2.
UML sequence diagram comparing sequential and render-first loading strategies. The difference between the blue and red lines shows the true loading time improvement. The improvement in the perceived loading time is highlighted by the difference between the green and red lines
Fig. 3.
Fig. 3.
A simplified example of the adopted multi-layer canvas strategy. First four images from left to right represent different layers composing the final image: (1) Cellular compartments, (2) Halo effect, (3) Nodes & Edges and (4) Selection and Highlight. The rightmost image shows the pathway diagram as seen from the user’s perspective
Fig. 4.
Fig. 4.
Hypothetical diagram composed of two separate reactions where (a) shows how the viewport is recursively split into different quadrants, so each of them contains two or less elements, (b) is the representation of the resulting QuadTree to achieve the two-dimensional space partitioning while (c) presents the same diagram elements placed in a normal collection for comparison purposes. The red dot in (a) represents the mouse pointer location and the red path in (b) depicts the tree traversing steps to narrow down the elements to be checked against the mouse location
Fig. 5.
Fig. 5.
In the new pathway diagram viewer, the flow of displayed information is controlled through zooming in and out. As a result, depending on the zoom level, the viewer abstracts or enriches the view with layers of information
Fig. 6.
Fig. 6.
(a) Comparison of file sizes for both XML and JSON formats versus the diagram size in terms of number of entities present in a diagram. (b) Comparison of processing times achieved by Diagram Viewer v2.0 (consuming diagrams in XML) and Diagram Viewer v3.0 (consuming diagrams in JSON) versus the total number of diagram entities. (c) Comparison of perceived loading times achieved by Diagram Viewer version 2 (consuming diagrams in XML) and version 3 (consuming diagrams in JSON) versus the diagram size (in number of diagram entities). Measured over all human pathway diagrams from Reactome data version 52
See this image and copyright information in PMC

Similar articles

  • Reactome enhanced pathway visualization.
    Sidiropoulos K, Viteri G, Sevilla C, Jupe S, Webber M, Orlic-Milacic M, Jassal B, May B, Shamovsky V, Duenas C, Rothfels K, Matthews L, Song H, Stein L, Haw R, D'Eustachio P, Ping P, Hermjakob H, Fabregat A. Sidiropoulos K, et al. Bioinformatics. 2017 Nov 1;33(21):3461-3467. doi: 10.1093/bioinformatics/btx441. Bioinformatics. 2017. PMID: 29077811 Free PMC article.
  • The Reactome Pathway Knowledgebase.
    Fabregat A, Jupe S, Matthews L, Sidiropoulos K, Gillespie M, Garapati P, Haw R, Jassal B, Korninger F, May B, Milacic M, Roca CD, Rothfels K, Sevilla C, Shamovsky V, Shorser S, Varusai T, Viteri G, Weiser J, Wu G, Stein L, Hermjakob H, D'Eustachio P. Fabregat A, et al. Nucleic Acids Res. 2018 Jan 4;46(D1):D649-D655. doi: 10.1093/nar/gkx1132. Nucleic Acids Res. 2018. PMID: 29145629 Free PMC article.
  • Reactome pathway analysis: a high-performance in-memory approach.
    Fabregat A, Sidiropoulos K, Viteri G, Forner O, Marin-Garcia P, Arnau V, D'Eustachio P, Stein L, Hermjakob H. Fabregat A, et al. BMC Bioinformatics. 2017 Mar 2;18(1):142. doi: 10.1186/s12859-017-1559-2. BMC Bioinformatics. 2017. PMID: 28249561 Free PMC article.
  • Plant Reactome and PubChem: The Plant Pathway and (Bio)Chemical Entity Knowledgebases.
    Gupta P, Naithani S, Preece J, Kim S, Cheng T, D'Eustachio P, Elser J, Bolton EE, Jaiswal P. Gupta P, et al. Methods Mol Biol. 2022;2443:511-525. doi: 10.1007/978-1-0716-2067-0_27. Methods Mol Biol. 2022. PMID: 35037224 Review.
  • A survey of metabolic databases emphasizing the MetaCyc family.
    Karp PD, Caspi R. Karp PD, et al. Arch Toxicol. 2011 Sep;85(9):1015-33. doi: 10.1007/s00204-011-0705-2. Epub 2011 Apr 27. Arch Toxicol. 2011. PMID: 21523460 Free PMC article. Review.
See all similar articles

Cited by

See all "Cited by" articles

References

    1. Agarwal P.K., Erickson J. (1998) Geometric range searching and its relatives. Adv. Discret. Comput. Geom. Am. Math. Soc., 23, 1–56.
    1. Boci L. et al. (2012) Comparison between JSON and XML in applications based on AJAX In: International Conference On Computer Science and Service System, Nanjing, China.
    1. Cerami E.G. et al. (2011) Pathway Commons, a web resource for biological pathway data. Nucleic Acids Res., 39, D685–D690. - PMC - PubMed
    1. D'eustachio P. (2011) Reactome knowledgebase of human biological pathways and processes. Methods Mol. Biol., 69, 49–61. - PubMed
    1. Denning P.J. (1968) The working set model for program behavior. Commun. ACM, 11, 323–333.

Publication types