@macoskolab/vitessce

Visual Integration Tool for Exploration of Spatial Single-Cell Experiments

• Latest release demo
• Previous demos
• Previous releases on NPM

You can also use the demo website for visualizing your own data via view configs passed in as url parameters. If you are storing a json view configuration on a remote server, the url will look something like http://vitessce.io/?url=https://example.com/my_config.json. Otherwise, if you have a view configuration that is not stored somewhere that can be accessed via a web server, you can do something like http://vitessce.io/?url=data:,{"name":"FAKE", "version": "0.1.0", "description":"fake dataset", "layers":[], "staticLayout":[{"component":"description", "props":{"description": "Hello World"}, "x":0, "y": 0, "w": 2, "h": 2}]} where data: prepends the actual view config.

Usage

Vitessce components can be used in React projects by installing the package from NPM:

npm install vitessce

For more details, please visit the documentation.

Development

First check your NodeJS version: It should work with NodeJS 8, 10, 12, 13, or 14.

$ node --version
v14.0.0

Note: NodeJS 14 may require the max_old_space_size option to be increased (apparently due to a different heap management strategy):

export NODE_OPTIONS=--max_old_space_size=4096

Checkout the project, cd, and then:

$ npm install
$ npm start

The development server will refresh the browser as you edit the code.

• To run all the Travis checks: ./test.sh
• To run just the unit tests: npm run test:watch

Deployment

Before running any of the deployment scripts, confirm that you have installed the AWS CLI and are in the appropriate AWS account:

$ aws iam list-account-aliases --query 'AccountAliases[0]'
"gehlenborglab"

Staging

To build the current branch and push the "minimal" demo and docs sites to S3, run this script:

$ ./push-demos.sh

This will build the demo and docs, push both to S3, and finally open the docs deployment in your browser.

Release

To make a release of the dev site, docs site, and NPM package:

$ ./create-release.sh patch

This script does the following:

• Checks out a new branch for the release
• Runs npm version (major | minor | patch) (depending on the first argument passed to the script)
• Pushes staging demos via ./push-demos.sh
• Updates the CHANGELOG.md
• Makes a pull request using the GitHub CLI gh pr create

Publish staged development site

After doing a manual test of the deployment of the dev site, if it looks good, copy it to dev.vitessce.io:

$ ./copy-dev.sh https://{url returned by create-release.sh or push-demos.sh}

Publish staged docs to vitessce.io

After doing a manual test of the deployment of the docs, if it looks good, copy it to vitessce.io:

$ ./copy-docs.sh https://{url returned by create-release.sh or push-demos.sh}

Publish the NPM package

The vitessce package is published to the NPM registry by Travis when the version in package.json has been updated and pushed to the master branch. To perform this update, make a pull request to merge from the release branch into master.

Travis uses the NPM_EMAIL and NPM_TOKEN variables that can be set using the web interface (Settings -> Environment Variables).

Bundling

Vitessce provides a pure ESM export intended for bundlers (e.g. Vite, Webpack, Rollup). Most modern bundlers should work out of the box, however bundling with legacy Webpack (<5.0) requires adding the following resolution alias to your webpack.config.js.

module.exports = {
  //...
  resolve: {
    alias: {
      'txml/txml': 'txml/dist/txml'
    },
  },
};

This fix is temporary and will no longer be necessary after the next release of Viv.

Related repositories

• Viv: A library for multiscale visualization of high-resolution multiplexed tissue data on the web.
• HiGlass: A library for multiscale visualization of genomic data on the web.
• vitessce-python: Python API and Jupyter widget.
• vitessce-r: R API and R htmlwidget.
• vitessce-data: Scripts to generate sample data

Old presentations

• January 2021: Ilan Gold's lab meeting update
• December 2020: Mark Keller's lab meeting update
• November 2020: Ilan Gold's lab meeting update
• October 2020: Mark Keller's lab meeting update
• July 2020: Ilan Gold's lab meeting update
• June 2020: NLM Informatics Training Conference (Trevor)
• May 2020: Trevor Manz's overview of multimodal imaging in Vitessce
• January 2020: Ilan Gold's overview of IF Imagery
• January 2020: Trevor Manz's wrap-up on Arrow, Zarr, and IMS
• September 2019: HuBMAP Poster
• August 2019: SIBMI Presentations
• July 2019: Intern progress reports and HuBMAP collaboration
• May 2019: Harvard IT Summit
• May 2019: Misc. tools
• April 2019: Software engineering