Dotlet is a web app that produces a dot plot representing the alignment of two protein/nucleotide sequences.
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)
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]
npm run test[:watch]
Deploy in production
rm -rf public/dist/* node run build --release scp -r public/* <DESTINATION>
<DESTINATION> is the DocumentRoot in your server configuration.
run.js: Node tasks and some global config.
main.js: The main call to
ReactDOM.renderand binds the router.
webpack.config.js: Build configuration.
package.json: Project config file. Lists JS dependencies to be installed with
npm run <action>aliases, such as
npm run test:watch.
- Everything that is to be copied for distribution.
.ejsfiles get compiled to html/xml. In particular, don't try to edit the classic
/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
/core: Things you don't want to touch.
/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.