COSMOUSE Viewer

CytoscapeJS has rendering issues with Safari. Use Chrome or Firefox for the best experience.

Search for a Protein

Type your favourite protein in the search bar and we'll get to it!
NODES TO DISPLAY

Known interactions of the selected protein will be displayed here.

Legends

query
direct
secondary

Settings

SECONDARY INTERACTIONS

EXPRESSION DATA

expression data unavailable
CS1

DROP ORPHAN NODES

SHOW INTERACTIONS
0.4

View on Desktop

What is COSMOUSE?

COSMOUSE started as a 3-month group project built on Django, React, and MySQL during the course of our MSc. It aims to collate information about protein-protein interactions and embryonic gene expression data from major bioinformatics databases into a single integrative web resource. One particular feature I pioneered for this project was the highly interactive frontend dashboard through which users can interrogate the underlying data models. This distinguishes COSMOUSE from other bioinformatics resources by providing a rich client-side single-page experience to aid data visualization.

Database Size and Data Sources

The COSMOUSE database covers:

  • • over 16,000 human proteins from Uniprot
  • • 1,787,238 combined mouse and human genetic expression records from MGI and DevOmics
  • • 11,938,498 protein-protein interactions from STRING

Tech Stack and Infrastructure

Since the original project, the codebase for COSMOUSE has gone through 3 major refactors as I progressively learned more about layout and component design best-practices and rendering optimization strategies. This live demo runs on the NextJS 13 App router directly served by /api route handlers connected to a MySQL AWS RDS instance. The switch to serverless /api routes from a dedicated Django service was a purely pragmatic decision to minimize complexity for the scale of this application. Client-side data fetching was implemented using the useSWR library to swiftly handle caching as well as request loading and error states.