RFLP (restriction fragment length polymorphism) draft V0.1

Beginning elements of an illustration showing how the restriction fragment length polymorphism (RFLP) procedure works.

The idea is to have a few DNA strands on which the user can add or remove restriction sites. The illustration will then show how the fragments would look when run on a gel. In this first pass I've started building out some of the interactivity without paying much attention to the esthetics.

The illustration generates a 1500 base pair strand of DNA and shows it diagrammatically as a double red line. Two cuts sites are created in the strand (one XmaI and one KpnI site). The position of the cut sites are shown as annotations on the strand. Hovering in the grey box opens a zoom window that shows a 10 base-long fragment of the strand at the hover point.

v0.1 Status:

• Two cut sites are randomly positioned on each strand. The user has no control over the type and position of these cut sites. I plan to add this level of control in later drafts.
• Only one strand is shown.
• Annotation marks show where the cut sites are.
• Hovering over the shaded area around and below the strand opens a zoom window that shows a small segment of the strand
• The recognition site for the restriction enzymes are underlined when they are shown in the zoom window.
• The hover position is not as robust as it needs to be. It works well at full size, but when scaled down to a smaller size (i.e. when viewed on mobile) the zoom fragment, restriction site markings, and scale bar don't quite line up.

Next steps:

• Modify the look of the short fragment shown on hover:
  • Add a marker on the red double line showing the position of the fragment visible in the zoom window.
  • Make the change of the bases shown in the zoom window smoother as the hover position changes.
  • Sharpen the markings that show the position of cut sites in the zoom window
• Add a way for the user to modify the number, type and position of restriction sites on each strand
• Develop a structure that allows more than one strand to be shown/interacted with.
• Develop the view that shows what the cut and un cut strands look like when run on a gel
• Consider adding a way for the user to view longer lengths of the DNA strands.
• Change the position of the zoom window so it is not obscured but the mouse arrow (or hand on a tablet)