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)
University of Minho, 2021 - Gil Afonso (https://github.com/gilafonso)
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.
Build the desktop application version
To build for the OS currently being used, run
npm run dist
For each OS with the specified system architecture:
npm run package-mac npm run package-win npm run package-linux
If building for a macOS from Windows, make sure to run the console with admin privileges.
To build for every OS and every arch, run
npm run package-all
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.