Dotlet reborn
Dotlet is a web app that produces a dot plot representing the alignment of two protein/nucleotide sequences.
It is a pure client-side Javascript application written with React.
History
The original app was written in Java by Marco Pagni and Thomas Junier (Vital-IT). Java applets are no more supported by modern web browsers, so it has to be rewritten with a more modern design, new technologies, and hopefully performance improvements.
Original app: https://myhits.sib.swiss/cgi-bin/dotlet
Archive Java source files: https://github.com/sib-swiss/dotlet
Publication: Bioinformatics, 2000 16(2):178-179
Vital-IT, 2016 - Julien Delafontaine (https://github.com/jdelafon)
Technology
Started from Kriasoft's react-static-boilerplate:
- React - redux
- Webpack - babel - browsersync - hot loader
- Material Design
- CSS modules
Build from source
Install node.js and npm, then from the root directory, run
npm install
node run build [--release]
Start the test server
node run start [--release]
Run tests
npm run test[:watch]
Deploy in production
rm -rf public/dist/*
node run build --release
scp -r public/* <DESTINATION>
where <DESTINATION>
is the DocumentRoot in your server configuration.
Structure
/
run.js
: Node tasks and some global config.main.js
: The main call toReactDOM.render
and binds the router.webpack.config.js
: Build configuration.package.json
: Project config file. Lists JS dependencies to be installed withnpm install
in/node_modules
. Listsnpm run <action>
aliases, such asnpm run test:watch
.
/public
- Everything that is to be copied for distribution.
.ejs
files get compiled to html/xml. In particular, don't try to edit the classicindex.html
, butindex.ejs
instead. /dist
: bundled JS with all dependencies and inlined assets. If some assets are over some size limit, they appear outside of the bundle.
/pages
: Routes. Only home
is actually used in this project.
/node_modules
: JS dependencies, automatically generated by npm install
.
/core
: Things you don't want to touch.
/components
/actions
: Redux reducers and action creators./common
: Common helper functions./constants
: Common variable definitions, to avoid typos./DensityPanel
: The part showing the scores density as a bar chart./DotterPanel
: The main dot plot canvas./GreyScale
: All what concerns the scaling of grey shades./InfoPanel
: The summary showing the currently inspected position and score./InputPanel
: The top menu with input fields./Layout
: MDL layout structure. Header and footer./TwoSeqsPanel
: The bottom part showing the currently inspected alignment./utils
: Helper components.