Skip to content
Switch branches/tags
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

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.

Dotlet screenshot


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:

Archive Java source files:

Publication: Bioinformatics, 2000 16(2):178-179

Vital-IT, 2016 - Julien Delafontaine (


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.



  • run.js: Node tasks and some global config.
  • main.js: The main call to ReactDOM.render and binds the router.
  • webpack.config.js: Build configuration.
  • package.json: Project config file. Lists JS dependencies to be installed with npm install in /node_modules. Lists npm run <action> aliases, such as npm run test:watch.


  • Everything that is to be copied for distribution. .ejs files get compiled to html/xml. In particular, don't try to edit the classic index.html, but index.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.


  • /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.


Full JS version of Dotlet




No releases published


No packages published