vitessce
Vitessce app and React component library
Last updated 4 days ago by keller-mark .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vitessce 
SYNC missed versions from official npm registry.

???? 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

Current Tags

  • 0.2.3                                ...           latest (4 days ago)

40 Versions

  • 0.2.3                                ...           4 days ago
  • 0.2.2                                ...           5 days ago
  • 0.2.1                                ...           9 days ago
  • 0.2.0                                ...           9 days ago
  • 0.1.10                                ...           15 days ago
  • 0.1.9                                ...           16 days ago
  • 0.1.8                                ...           a month ago
  • 0.1.7                                ...           a month ago
  • 0.1.6                                ...           2 months ago
  • 0.1.5                                ...           2 months ago
  • 0.1.4                                ...           2 months ago
  • 0.1.3                                ...           3 months ago
  • 0.1.2                                ...           3 months ago
  • 0.1.1                                ...           3 months ago
  • 0.1.0                                ...           3 months ago
  • 0.0.25                                ...           4 months ago
  • 0.0.24                                ...           5 months ago
  • 0.0.23                                ...           6 months ago
  • 0.0.22                                ...           7 months ago
  • 0.0.21                                ...           7 months ago
  • 0.0.20                                ...           7 months ago
  • 0.0.19                                ...           8 months ago
  • 0.0.18                                ...           9 months ago
  • 0.0.17                                ...           a year ago
  • 0.0.16                                ...           a year ago
  • 0.0.15                                ...           a year ago
  • 0.0.14                                ...           a year ago
  • 0.0.13                                ...           a year ago
  • 0.0.12                                ...           a year ago
  • 0.0.11                                ...           a year ago
  • 0.0.10                                ...           a year ago
  • 0.0.9                                ...           a year ago
  • 0.0.8                                ...           a year ago
  • 0.0.7                                ...           a year ago
  • 0.0.6                                ...           a year ago
  • 0.0.5                                ...           a year ago
  • 0.0.4                                ...           2 years ago
  • 0.0.3                                ...           2 years ago
  • 0.0.2                                ...           2 years ago
  • 0.0.1                                ...           2 years ago
Downloads
Today 0
This Week 24
This Month 48
Last Day 0
Last Week 68
Last Month 56
Dependencies (50)
Dev Dependencies (67)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |