ShareYourCloning is a web application to generate molecular cloning strategies in json format, and share them with others. It is the first brick in the construction of Genestorian, a web application for model organism collections.
shareyourcloning_video2.mov
If you just want to try the application, the easiest way is to go to the hosted version at: https://shareyourcloning.netlify.app/.
If you want to quickly set up a local instance of the application using docker, you can use the images of backend and frontend hosted in docker hub:
# see docker-compose.yml
docker-compose pull
docker-compose upThen, the application should be running at http://localhost:3000.
If you are interested in contributing, check the contribution guidelines.
ShareYourCloning has a frontend application and backend application.
The code of the backend is here: https://github.com/manulera/ShareYourCloning_backend
The backend is a web API built with FastAPI. For information on what it does, and how to install it and what it does see this.
The code of the frontend is here: https://github.com/manulera/ShareYourCloning_frontend
The frontend application is built with react, and it is the "family tree builder" that you will see in your browser. For more info on what it does and how to install it see this
Recombinant DNA technology is used in a variety of research and industry fields to generate new DNA molecules by combining fragments of existing ones. This means that every molecule in a laboratory collection was created by "cutting and pasting" the sequences of existing molecules.
The aim of this application is to provide a web interface to document the generation of new DNA molecules from existing ones, and to export this information to share it with others. You can imagine it as a family tree builder, where there are two kinds of entities:
- The DNA molecules, or
entities. - The
sources, which are experimental steps that take 0 or moreentitiesas an input, and generate a single output. There can be two kinds ofsources:Sourceswithout a parententity: They represent the source of a DNA molecule received externally (e.g., a plasmid received from a collaborator or from Addgene) or a naturally occurring sequence (e.g., given by an assembly identifier and genome coordinates).Sourcesrepresenting cloning steps combining existingentitiesto generate newentities: They contain references to the input and output DNA sequences, the method name (digestion, ligation, etc.) and the minimal information to do the cloning step in silico.
See the figure below for an example of PCR-based gene targeting, in which a fragment of a plasmid is amplified by PCR with primers that contain 5' extensions homologous to target sequences in the genome. Cells are then transformed with the PCR fragment, which integrates into the genome through homologous recombination.
You can see how the workflow of cloning happens in the app in this video:
shareyourcloning_video2.mov
The idea is to eventually use SBOL to encode all the information, but as a first approach, json is used. You can find the json schema use to describe the sources and entities in the Schema section of the api documentation. These schema is generated by FastAPI from python classes defined using pydantic. You can find the model declarations here.
From the json above, you can see the modular nature of the task. Every entity comes from a source, and every entity can be the input of another source.
The application frontend provides an interface where the user can specify a source (with or without inputs). This source is sent to the backend in a POST request, where the step encoded in the source is executed, and the output entity is returned and displayed in the frontend. When multiple outputs could come out of a source (for example, a restriction enzyme digestion), the user can select which one of them is the desired output. Then the user can use the output entity as an input for a new source, and so on.
In the browser, you should see something like this:
This is an interface element representing a source. You can start by selecting GenBank ID, and this will open an input text field where you can type the GenBank id of a gene, for example NM_001018957.2 for S. pombe ase1 gene. When you click submit, a child element will appear, representing the sequence corresponding to the GenBank id you just typed.
If you click on the eye icon on the top right corner, the sequence will be displayed in the editor at the bottom of the page, and you can see more details.
Now we can perform molecular cloning steps on this sequence. Below, there is a button that says Add source. If you click it, you can now use this sequence as the input for another source. Choose Restriction. This will allow you to type in the name of a restriction enzyme, and will return the resulting fragments by calling the backend API endpoint /restriction. You can type EcoRI as an example. This will expand the current node of the tree, and will show the resulting fragments. You can move between them by using the arrows. When you see the fragment you want click choose fragment, and this will pop the resulting sequence.
NOTE: In essence, restriction enzymes are molecular machines that recognise a palindromic sequence in the DNA (sequence that reads the same backward and forward), and cut the DNA there. This should give you a basic understanding, but there are more nuances. Check this section for more.
A series of molecular biology methods explained for the non-biologist.
For more detail go to wikipedia page.
Thanks to @ikayz for initial improvements to the frontend.
Thanks to @joyceykao for discussions on how to approach UI/UX and users interview.
Thanks to @maratumba for recommending the usage of FastAPI and for giving some general guidelines for the development of the backend and hosting.
Thanks to the whole Open Life Science organising team and community, which were incredibly helpful in setting the foundations of this project. Special thanks to @DimmestP, who mentored @manulera during the program OLS-4.