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)

University of Minho, 2021 - Gil Afonso (https://github.com/gilafonso)

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.

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

Structure

/

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

/public

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

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