| |
 |
 |
|---|
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/).
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.
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.
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.
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).
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
- add text export feature for caclulated parameters
- add file import, eg:
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.
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent