ngx-mol-viewers: Angular components for interactive molecular visualization in bioinformatics

Advancements in bioinformatics have been propelled by technologies like machine learning and have resulted in substantial increases in data generated from both empirical observations and computational models. Hence, well-known biological databases are growing in size and centrality by integrating data from different sources. While the primary goal of these databases is to collect and distribute data through application programming interfaces (APIs), providing visualization and analysis tools directly on the browser interface is crucial for users to understand the data, which increases the usefulness and overall impact of the databases. Currently, some front-end frameworks are available for the sustained development of the user interface (UI) and user experience (UX) of these resources. Angular is one of the most popular frameworks to be broadly adopted within the BioCompUP laboratory. This work describes a library of reusable and customizable components that can be easily integrated into the Angular framework to provide visualizations of various aspects of protein molecules, such as their sequences, structures, and annotations. Currently, the library includes three main independent components. The first is the ngx-structure-viewer, which allows visualization of molecules through the MolStar three-dimensional viewer. The second is the ngx-sequence-viewer, which provides visualization and annotation capabilities for a single sequence or multiple sequence alignments. The third the ngx-features-viewer, enables the mapping and visualization of various biological annotations onto the same molecule. All these tools are available for download through the Node Package Manager (NPM), and more information is available at https://biocomputingup.github.io/ngx-mol-viewers/ (under development).