Visit

MolProphet is a project I was responsible for developing as a web engineer at the company. Targeting professionals in the biopharmaceutical field, it serves as a one-stop, AI-based platform for early drug discovery.

The Challenges

The project encompassed some complex requirements.

Firstly, as a bioinformatics website, a highly challenging task was "viewing proteins in a 3D view," with main objectives including:

1. Allowing free rotation and zooming of the view.
2. Enabling users to "select multiple amino acids" to extract a portion of the protein, forming a "target pocket" (a critical site capable of interacting with potential drugs).
3. Proteins usually contain a series of chemical components, such as small molecules, water, ions, and lines simulating interaction forces, which need to be finely controlled for display or hiding through interaction.
4. The protein viewer needed to be utilized across multiple pages, each requiring different functionalities. For instance, Module A only needed to display the protein itself, while Module B needed to show the protein along with multiple small molecules potentially interacting with it.

Below is a demonstration of one of the features in MolProphet, covering some use cases of the protein viewer:

Moreover, the website had to present up to 2000 AI-generated molecular results, displayed as 2D images in one single page. Ensuring smooth page interaction is quite a task.

The Results

Since joining SanOmics in April 2022, I have been responsible for the front-end development of MolProphet, which has been running stably online for a year and continues to release new versions to introduce new features or fix problems.

Technically, this project is a SPA based on Vue 3, utilizing a series of Vue ecosystem tools including Vue Router and Pinia. Like all other SanOmics projects, it uses TypeScript to ensure code readability and facilitate team collaboration. In terms of UI, it mainly uses Quasar UI and UnoCSS.

In response to the project challenges, I explored the biochemistry field in the open-source community and then developed a protein viewer component based on MolStar, applied to all functional modules requiring 3D protein displays, meeting the series of complex requirements mentioned above.

Additionally, for the batch display of 2D molecular images, this project employs RDKit.js for local rendering of 2D molecular pictures, ensuring page smoothness through techniques like web workers, IndexedDB caching of rendered molecules, and virtual scrolling.