A library for multiscale visualization of high-resolution multiplexed bioimaging data on the web. Directly renders Bio-Formats-compatible Zarr and OME-TIFF. Written in JavaScript and built on Deck.gl with modern web technologies.

Viv is a JavaScript library providing utilities for rendering primary imaging data. Viv supports WebGL-based multi-channel rendering of both pyramidal and non-pyramidal images. The rendering components of Viv are provided as Deck.gl layers, making it easy to compose images with existing layers and efficiently update rendering properties within a reactive paradigm.

More details can be found in our preprint describing the Viv library and related work. Please cite this preprint in your research:

Trevor Manz, Ilan Gold, Nathan Heath Patterson, Chuck McCallum, Mark S Keller, Bruce W Herr II, Katy Börner, Jeffrey M Spraggins, Nils Gehlenborg, "Viv: Multiscale Visualization of High-resolution Multiplexed Bioimaging Data on the Web." OSF Preprints (2020), doi:10.31219/osf.io/wd2gu

• Avivator Included in this repository is Avivator, a lightweight viewer for remote imaging data. Avivator is a purely client-side program that only requires access to Bio-Formats-compatiable Zarr or OME-TIFF data over HTTP or on local disk.
• Vizarr Vizarr is a minimal, purely client-side program for viewing Zarr-based images built with Viv. It exposes a Python API using the imjoy-rpc and can be directly embedded in Jupyter Notebooks or Google Colab Notebooks.
• Viv benchmark A set of scripts to benchmark Viv's retrieval of image tiles from pyramidal OME-TIFF files and Zarr stores via HTTP1 and HTTP2.

• http://vitessce.io

• https://blog.openmicroscopy.org/file-formats/community/2020/11/04/zarr-data/
• https://blog.openmicroscopy.org/file-formats/community/2020/12/01/zarr-hcs/

• https://imjoy.io/docs/#/i2k_tutorial?id=open-integration-with-imjoy

• The Avivator image viewer will be included as the default visualization for OME-TIFF files: galaxyproject/galaxy#10534

• https://github.com/hubmapconsortium/ccf-ui

Viv supports a subset of formats that can be generated with the bioformats2raw + raw2ometiff pipeline:

• OME-TIFF files (pyramidal)
• Bioformats-compatible Zarr stores (pyramidal)

For OME-TIFF, Viv supports any pyramid that implements the OME design spec for TIFF pyramids(which the bioformats2raw + raw2ometiff pipeline provides). Non-pyramidal images are also supported provided the individual texture can be uploaded to the GPU (< 4096 x 4096 in pixel size).

Please see the tutorial for more information on these formats.

Initial load time for OME-TIFFs can be optimized by generating a special offsets.json file containing byte offsets for the associated binary data. For more information, see the documentation.

$ npm install @hms-dbmi/viv

You will also need to install deck.gl (and its companion luma.gl) dependencies as they are listed as peerDependencies here. This is in order to prevent users from installing multiple versions of deck.gl.

$ npm install deck.gl @luma.gl/core

$ git clone https://github.com/hms-dbmi/viv.git
$ cd viv && npm install # install deps for viv library
$ npm run install:avivator # install deps for avivator app
$ npm start # Starts rollup build (for Viv) & dev server for Avivator

Please install the Prettier plug-in for your preferred editor. Badly formatted code will fail on Travis.

To run unit and integration tests locally, use npm test. For full prodcution test (including linting and formatting checks), use npm run test:prod.

• @hms-dbmi/viv library: npm run build
• Avivator viewer: npm run build:avivator

To bump the version number, clean up/update the CHANGELOG.md, and push the tag to Github, please run npm version [major | minor | patch] depending on which you want. Then run ./publish.sh to publish the package/demo.

We support both WebGL1 and WebGL2 contexts, which provides near universal coverage across Safari, Firefox, Chrome, and Edge. Please file an issue if you find a browser in which Viv does not work.

Please navigate to viv.gehlenborglab.org to see the full documenation.