Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

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 (

University of Minho, 2021 - Gil Afonso (


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.

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