🚄 Vitessce

Visual Integration Tool for Exploration of Spatial Single-Cell Experiments

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

Architecture

For more information, see the documentation.

Data

The demo features data from several collaborators, with preprocessing done by vitessce-data.

Usage

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

npm install vitessce

The following code demonstrates the <Status/> and <Scatterplot/> components.

Note the vitessce-container and vitessce-theme-light classes added to the parent div element. Vitessce component styles are scoped under these classes, which means that a parent element must apply the classes in order for child components to inherit the expected styles.

import React from 'react';
import { Scatterplot } from 'vitessce/es/production/scatterplot.min.js';
import { Status } from 'vitessce/es/production/status.min.js';
import 'vitessce/es/production/static/css/index.css';

export default function App() {
    const view = { target: [0, 0, 0], zoom: 0.75 };
    const mapping = "PCA";
    const cells = {
        1: { mappings: { [mapping]: [0, 0] } },
        2: { mappings: { [mapping]: [1, 1] } },
        3: { mappings: { [mapping]: [1, 2] } }
    };
    const selectedCellIds = new Set();
    const dimensions = { width: '400px', height: '400px', margin: '10px' };

    return (
        <div className="vitessce-container vitessce-theme-light">
            <div className="card card-body bg-secondary" style={dimensions}>
                <Status
                    info="Hello world"
                    removeGridComponent={() => {}}
                />
            </div>
            <div className="card card-body bg-secondary" style={dimensions}>
                <Scatterplot
                    uuid="my-vitessce-scatterplot"
                    view={view}
                    mapping={mapping}
                    cells={cells}
                    selectedCellIds={selectedCellIds}
                    cellColors={null}
                    updateStatus={(message) => {}}
                    updateCellsSelection={(selectedIds) => {}}
                    updateCellsHover={(hoverInfo) => {}}
                    updateViewInfo={(viewInfo) => {}}
                    clearPleaseWait={(layerName) => {}}
                />
            </div>
        </div>
    );
}

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

Demo

To build the current branch and push to S3, first confirm that you have installed the AWS CLI and are in the appropriate AWS account:

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

and then run this script:

$ ./push-demo.sh

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

Release

If you haven't already, push a fresh demo and do a last manual test of the deployment. If it looks good, copy it to vitessce.io:

$ ./copy-prod.sh https://{url returned by push-demo.sh}

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:

• Check out a new branch for the release,
  • Update the CHANGELOG.md to remove the "in progress" text from the current version heading.
  • Update the version by running npm version [major | minor | patch] (note: this will add a git commit and a git tag).
• 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).

Related Subsidiary Projects

• vitessce-image-viewer: A Deck.gl layer for high bit depth, high resolution, multi-channel images.
• vitessce-grid: Wrapper for react-grid-layout
• vitessce-data: Scripts to generate sample data
• ome-tiff-tiler: Docker container to generate tiles from OME-TIFF

Old Presentations

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