Codev4Graph is a two-year project (2023-2024) funded under the framework of Innovative and Structuring Project Support from the Open Science Directorate (DipSO) of the French INRAE institue.

Summary

Biological systems are often represented as networks, where nodes symbolize biological or biochemical entities, and edges describe physical or functional relationships between them. This representation, accessible to all scientific communities, help to summarize complex data and falicitates interpretation of data. Such networks are, for instance, used to describe relationships and interactions between living organisms in trophic networks, between molecules in metabolic and regulatory networks, or even between concepts in knowledge networks.

Standalone tools, such as Cytoscape or Gephi, enable visualizations networks of all kinds. However, web applications in bioinformatics require interactivity between the biological network and the available experimental data sets. Developing web solutions that consider the specificity of different types of biological networks remains time-consuming, and the produced code is often difficult to reuse. Various libraries offer different levels of performance and integration ease.

The Codev4Graph project has been started to build and distribute Web Components, thereby facilitating the development of web solutions for biological network visualization.

Objectives

Codev4Graph brings together a community of developers with the objective of designing Web Components and enabling the development and distribution of graph visualization solutions.

During previous actions funded by DipSO (the three 'Work4Graph' projects), we were able to assess the broad needs of the INRAE bioinformatics community for graph visualization tools and libraries.

Particularly, we idenfied the following needs, which will be addressed by the Codev4Graph project:

• Unite an inter-CATI community of developers around the visualization of biological networks via the Web.
• Share our knowledge and expertise for best practices in biological network visualization tools.
• Produce a catalog of Web Components for biological network visualization
• Produce and distribute web solutions for visualizing the main types of networks handled by our community

Outcomes

Technical choices

In order to enhance code maintenance and reusability, we have chosen Web Components as the as the technical foundation for our developments

A Web component corresponds to an atomic element of a web page or a combination of atomic elements. For instance, a visualization interface will be composed of several components representing the nodes, edges, and labels of the network, as well as buttons, form elements, etc. This highly modular approach to web design allows for easy reuse of the same components across different interfaces

Among the well established frameworks for available for developing Web Components, the Vue.js framework seems to be the most widely adopted by developers we know within INRAE. Compared to its direct competitors (REACT or Angular), Vue.js is an entirely community-driven solution. Moreover, it is acknowledged that Vue.js offers the fastest learning curve, enabling rapid skill development for the most novice participants. Additionally, some participants already have strong experience in developing with Vue.js. A working group within the national infrastructure for metabolomics and fluxomics, MetaboHub, where some project participants are already involved, has existed for two years and can assist in building a larger community.

For network visualization itself, two JavaScript libraries are commonly used to render the network: d3.js and Cytoscape.js. The first is a general-purpose visualization library with a vast developer community, while the second is specialized in network visualization and has a faster learning curve compared to d3.js. We assesse both solutions — as well as few others — through benchmarks and user feedback.