Napolean Paced Mischeviously

    vitessce

    1.1.17 • Public • Published
    Vitessce logo

    Visual Integration Tool for Exploration of Spatial Single-Cell Experiments

    Screenshot of Vitessce with Linnarsson data

    Same data, zoomed in to cellular scale

    Integrations

    Vitessce is being used in the following projects:

    Architecture

    Architecture diagram

    For more information, see the glossary.

    Data

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

    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

    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>
        );
    }

    If you are interested in using Vitessce in the browser as part of a script tag or the like, we also export a umd build (the above snippet uses an es bundle). Note that our es bundles contain none of the dependencies, all of which should be installed by npm automatically when it reads the package.json file that our package ships with. The advanatage of not bundling everything is that we can keep the size of our bundle down and avoid any upstream compilation issues or the like.

    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).

    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 Subsidiary Projects

    Old Presentations

    Install

    npm i vitessce

    Homepage

    vitessce.io/

    DownloadsWeekly Downloads

    245

    Version

    1.1.17

    License

    MIT

    Unpacked Size

    119 MB

    Total Files

    432

    Last publish

    Collaborators

    • keller-mark
    • mccalluc
    • ilanbassgold