Narrowly Preventing Mayhem

    vitessce

    0.2.5 • Public • Published

    🚄 Vitessce

    Visual Integration Tool for Exploration of Spatial Single-Cell Experiments

    Vitessce screenshot

    Architecture

    Architecture diagram

    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

    Old Presentations

    Install

    npm i vitessce@0.2.5

    Homepage

    vitessce.io/

    Version

    0.2.5

    License

    MIT

    Unpacked Size

    533 MB

    Total Files

    377

    Last publish

    Collaborators

    • keller-mark
    • mccalluc
    • ilanbassgold