Web app for visualizing pathogen evolution
Source code
github.com/nextstrain/auspice
Contributors
jameshadfield
trvrb
colinmegill
rneher
victorlin
joverlee521
tsibley
emmahodcroft
eharkins
kairstenfay
Latest commits
Pages

Contributing to Auspice development

Thank you for helping us to improve Nextstrain!

To get started, please see the contributing guide for useful information about how to pick an issue, submit your contributions, and so on.

This project strictly adheres to the Contributor Covenant Code of Conduct.

Please see the project boards for currently available issues.

Developer Installation

This is useful for debugging, modifying the source code, or using an unpublished feature branch.

You can install using your system npm or within a Conda environment to keep things isolated.

# grab the GitHub auspice repo
git clone https://github.com/nextstrain/auspice.git
cd auspice

# install dependencies and build auspice
npm ci

# make `auspice` available globally
npm install --global .

Updating Auspice should only require pulling the new version from GitHub - it shouldn’t require any npm commands. You will, however, have to re-build Auspice whenever the client-related code has changed, via auspice build.

Contributing code

Please comment on an open issue if you are working on it. For changes unrelated to an open issue, please make an issue outlining what you would like to change/add.

Where possible, please rebase your work onto master rather than merging changes from master into your PR.

From a fork: git pull --rebase upstream master

Make sure tests are passing

We use the following libraries for all kinds of testing, so it’d help to read the docs to get familiar with their APIs and features:

  1. Jest
  2. Puppeteer
  3. Jest-Puppeteer
  4. Jest-Image-Snapshot

When you submit a pull request to the auspice repository, a variety of integration and unit tests will need to pass before it can be merged.

You will likely want to run these tests locally before submitting:

First, install the dependencies with npm i, then:

For unit tests

Run npm test.

For linting

Run npm run lint. If there are issues run npm run lint:fix.

For integration tests

For integration tests to work, you’ll need to have git-lfs installed (see below) as it stores the images that the snapshot tests will use.

  1. Fetch the datasets with npm run get-data.
  2. Ensure you are not currently running the site locally, then run npm run integration-test:ci.

How to update test snapshots

  1. Unit tests: npm run test -- -u
  2. Integration tests npm run integration-test -- -u

For smoke tests

  1. Fetch the datasets with npm run get-data.
  2. Ensure you are not currently running the site locally, then run npm run smoke-test:ci.

Test Tips

  1. Run a single describe(), it(), or test() within a file, add .only():

    E.g., describe.only(), it.only(), or test.only()

  2. Run a single test file, append the following to your test command -- relative_or_absolute_path/to/file:

    E.g., npm run integration-test -- test/integration/zika.test.js

  3. Run integration tests in headful mode, prepend HEADLESS=false to your command:

    E.g., HEADLESS=false npm run integration-test

  4. For integration tests, please try to use expect-puppeteer as much as possible, and only resort to puppeteer’s native API when we can’t do it with expect-puppeteer. The reason is because expect-puppeteer has better DX, as explained here

  5. How to add a new integration image test:

    1. Wrap your image test with helper function toMatchImageSnapshot() from test/integration/helpers.js, and it will take a screenshot every 100ms until it matches the expected snapshot or timeout (default: 10s)

    2. Temporarily add page.waitFor(__ENOUGH__MS__) before taking the new snapshot to give the browser enough time to render a complete image

    3. Example: test/integration/zika.test.js

Manual testing

A Heroku pipeline for this repository is connected to GitHub under the nextstrain-bot user account. The Review Apps feature facilitates manual review of changes by automatically creating a test instance from the PR source branch and adding a link to it on the GitHub PR page. These apps are based on configuration in app.json.

Test on downstream repositories

Additionally, a GitHub Actions workflow has been set up to generate PRs in downstream repositories that reflect the new changes in Auspice. To use it:

  1. Go to the workflow page.
  2. Select Run workflow.
  3. Pick the PR branch, select the downstream repositories you wish to test, and Run workflow.
  4. Wait for the workflow to finish running. The Auspice PR should show new reference links from the generated PRs.

git-lfs

We use Git Large File Storage to manage certain assets. Currently these are limited to images within the ./test directory (which we use for snapshot integration testing) but this may change in the future. If you are not using these images, you don’t need to have git-lfs installed; however will not be able to run integration tests without it. See here for installation instructions.

Helpful commands:

git lfs status
git lfs ls-files # list LFS tracked tiles

Typescript

Auspice is in the process of moving to typescript, and currently supports both .js(x) and .ts(x) files. This guide is helpful to understand the bigger picture of migrating a JS project to TS. Typescript is supposed to help us, so there’s no problem using any types as we move code from JS to TS, however new code would ideally be typed.

You can check the types via npm type-check or run npm type-check:watch; alternatively your editor should be able to show this.

Our CI (GitHub action) will type-check the project.

The various moving parts involved are:

  • typescript (tsc command) is used by npm run type-check as well as other plugins/libraries
  • @typescript-eslint/eslint-plugin, @typescript-eslint/parser allow ESLint to parse TypeScript syntax
  • @babel/preset-typescript is used by babel-loader (via webpack) to parse .ts(x) files

Contributing to Documentation

The main Nextstrain documentation is available at docs.nextstrain.org. That documentation is built from the docs.nextstrain.org GitHub repo – see the contributing page for docs.nextstrain.org for more details on how to contribute to that documentation.

The Auspice technical reference guide is available at docs.nextstrain.org/projects/auspice. That documentation is built from the files in this repo in the ./docs folder.

To preview the Auspice documentation locally,

  1. Create and activate a Conda environment from docs/environment.yml. Example using Mamba:

     mamba env create --file docs/environment.yml
 conda activate auspice-docs

  2. Build the docs from a clean slate.

     make -C docs clean livehtml

  3. Open the preview link (http://127.0.0.1:8000) in a browser.

Changes to documentation source files (.md and .rst files under docs/) should automatically be reflected upon page refresh.

Contributing to Internationalization and Localization (i18n/l18n)

If you can assist in efforts to translate the Auspice interface to more languages your assistance would be very much appreciated. The currently available languages are displayed via a drop-down at the bottom of the sidebar.

Adding a new language

1) Add the language to the getlanguageOptions function in this file 2) If this is a new language, copy the folder (and the JSONs within it) src/locales/en and name it to match the language code for the new translation – e.g. for Spanish this would be src/locales/es 3) For each key-value in the JSONs, translate the english phrase to the new locale. (Do not modify the strings within `` sections.)

For example, a spanish translation would change the English:

  "sampled between  and ": "sampled between  and ",
  "and comprising": "and comprising",

to

  "sampled between  and ": "aislados entre  y ",
  "and comprising": "y compuesto de",

Helper script to check what parts of a translation are out-of-date or missing

Run npm run diff-lang -- X, where X is the language you wish to check, for instance es. This will display the strings which:

  • need to be added to the translation
  • are present but should be removed as they are no longer used
  • are present but are simply a copy of the English version & need to be translated

Running npm run diff-lang will check all available languages.

Improving an existing translation

If a translation of a particular string is not yet available, then auspice will fall-back to the english version.

1) Find the relevant key in the (EN) JSONs in this directory 2) Add the key to the JSON with the same name, but in the directory corresponding to the language you are translating into (see above for an example).

Releases & versioning

  1. Run the ./releaseNewVersion.sh script from an up-to-date master branch. It will prompt you for the version number increase, push changes to the release branch and, as long as the GitHub workflow is successful then a new version will be automatically published to npm.
  2. Update the version on Bioconda:
    1. Click to edit the Bioconda recipe. Or, consider using the Nextstrain fork to create PRs that other team members can contribute to.
    2. Make the following changes:
      1. Update the version number in the first line.

      2. Change source.sha256 to the sha256 hash of the file at source.url. You can get the value using the following command:

         curl -s https://registry.npmjs.com/auspice/latest \
     | jq -r ".dist.tarball" \
     | xargs curl -s \
     | shasum -a 256 \
     | cut -f 1 -d " "
    3. Click through to create a Pull Request to the Bioconda GitHub repository.
  3. When the new version of Auspice is available on Bioconda, manually run the conda-base CI workflow on the main branch.