Skip to content

Molecular biology x React = webpage for: transcribe DNA to RNA, reverse complement, protein translation, compute protein parameters

Notifications You must be signed in to change notification settings

ccozens/mol-bio-tools

Repository files navigation

 Netlify Status  Build and test codecov

Welcome to molbiotools


12th April 2023: migrated to vite

Used this repo to test migrating from CRA to vite following [this excellent tutorial from Robin Wieruch](https://www.robinwieruch.de/vite-create-react-app/).

23rd March 2023: update complete

I regard this repo and site as deprecated. Please head over to [astro-mol-bio-tools](https://github.com/ccozens/astro-mol-bio-tools) for the new version.

1st March 2023: updating begun

I'm just starting a 4-stage revamp:
1. remove duplication
2. modularise - ensure I have separate computation and display components
** during modularise, I realise I need to add proper state management to fix some of the workarounds I implemented when I built. Given points 3 and 4, a rebuild with redux or similar baked in from the outset seems most sensible **
3. migrate to TypeScript
4. migrate to something other than CRA (likely Vite / astro / NextJS).

I'm also keen to add some API functionality regarding getting proteins from / sending searches to UniPROT / BLAST.


This repo is what happens when a molecular biologist learns web development - you start building some tools you wish you'd been able to use for the last decade or so. This was my first website, build with React (CRA), JavaScript and Tailwind. On my todo is a significant refactor as its really not DRY, and I'd prefer it in TS. None of that impacts functionality for any molecular biologists out there.

General features

In part, this is another molecular biology tooling site. That said, I've built in a range of features that I've wanted for ages and never found, for example:

  • no submit buttons, no changing page: enter your DNA/protein and analysis appears right next to it, in real time.
  • new line characters automatically removed, so multi-line entries get parsed as a single string. I have spent years removing line breaks from UniProt / NCBI entrez gene to analyse them and it drove me nuts.
  • it tells you where incorrect characters are. A few Ns in the middle of your DNA? The error message will tell you where to look.
  • input boxes clear demo content on first click, and from then you can edit the content as you see fit.
  • output boxes can be highlighted and copied from. Scroll bars will appear if necessary.

Tools available

Enter protein into the box, parameters (length, MW, extinction coefficient and A280) display.

Enter DNA in box, translated protein appears next to it. There are toggles to show output in 1 (MILD...) or 3 (MetIleLeuAsp...) letter code, and for a range of spacers. Again, parameters (length, MW, extinction coefficient and A280) print out in real time.

Enter three letter protein (MetIleLeuAsp...) and it converts to single letter (MILD). This is here as I only wrote the analysis logic for single letter proteins, thoguh

Basically, changes T -> U.

Returns reverse complement of your strand (ATGCAA -> TTGCAT).

Questions / comments

Please get in touch with feedback / requests. This was my first JS project, so I'd love feedback, and I want it to be useful, so happy to add featues. I've a list of possibles, so do let me know if there are any I could prioritise / you'd like to help you (however you like - via Github, email, LinkedIn). Also, do get in touch with problems/typos.

  • primer analysis
    • melting temp calculator
    • GC content
  • BLAST integration
  • RNA shape integration
  • further protein parameters
    • other features
    • print out table of AA content
  • DNA parameters
    • gene length / GC content

Todo

Technical details

This was all written on VSCode in React/JS. Tests are written with jest and React testing library and jest-dom. Its hosted on netlify, deployed directly from this github repo. The favicon is from svgrepo, and I followed these instructions on using svg as favicon. I've a plan to refactor this substantially, as I learned to much doing it that I'd set about it differently (and with much more order) if I started again (probably in Typescript). However, for now I'm moving on to other things as I'd prefer to ship something that works, get some user feedback, and work on another project before returning to this one.

What is the protein?

If anybody is wondering, the demo protein is Tgo, a thermophillic DNA polymerase I worked on for most of my 10 year academic career. This paper is my PhD work - it was accepted just after I'd submitted my thesis.

About

Molecular biology x React = webpage for: transcribe DNA to RNA, reverse complement, protein translation, compute protein parameters

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published