Skip to main content

Constants for JS API

When writing view configs in JavaScript, it can be helpful to use the constant variables exported from the vitessce package (rather than using strings). Using constants enables type checking and autocomplete, which can prevent bugs.

Components

We provide the Component constant mapping from JavaScript object keys to component strings. For convenience, you may specify a shorter alias such as cm when the variable is imported.

import { Component as cm } from 'vitessce';
KeyValue
cm.DESCRIPTIONdescription
cm.STATUSstatus
cm.GENESgenes
cm.CELL_SETScellSets
cm.SCATTERPLOTscatterplot
cm.SPATIALspatial
cm.HEATMAPheatmap
cm.LAYER_CONTROLLERlayerController
cm.CELL_SET_SIZEScellSetSizes
cm.GENOMIC_PROFILESgenomicProfiles
cm.CELL_SET_EXPRESSIONcellSetExpression
cm.EXPRESSION_HISTOGRAMexpressionHistogram

Example

import { VitessceConfig, Component as cm } from 'vitessce';

const vc = new VitessceConfig("My config");
const dataset = vc.addDataset("My dataset");
const v1 = vc.addView(dataset, cm.SPATIAL);

Data Types

We provide the DataType and FileType constants mapping from JavaScript object keys to strings. For convenience, you may specify a shorter alias such as dt or ft when the variables are imported.

import { DataType as dt } from 'vitessce';
KeyValue
dt.CELLScells
dt.CELL_SETScell-sets
dt.EXPRESSION_MATRIXexpression-matrix
dt.GENOMIC_PROFILESgenomic-profiles
dt.MOLECULESmolecules
dt.NEIGHBORHOODSneighborhoods
dt.RASTERraster

Example

import { VitessceConfig, DataType as dt, FileType as ft } from 'vitessce';

const vc = new VitessceConfig("My config");
const dataset = vc.addDataset("My dataset")
.addFile(
"http://example.com/my-cells-data.json",
dt.CELLS,
ft.CELLS_JSON,
);

File Types

import { FileType as ft } from 'vitessce';
KeyValue
ft.CELLS_JSONcells.json
ft.CELL_SETS_JSONcell-sets.json
ft.EXPRESSION_MATRIX_ZARRexpression-matrix.zarr
ft.GENOMIC_PROFILES_ZARRgenomic-profiles.zarr
ft.MOLECULES_JSONmolecules.json
ft.NEIGHBORHOODS_JSONneighborhoods.json
ft.RASTER_JSONraster.json
ft.RASTER_OME_ZARRraster.ome-zarr
ft.CLUSTERS_JSONclusters.json
ft.GENES_JSONgenes.json
ft.ANNDATA_CELL_SETS_ZARRanndata-cell-sets.zarr
ft.ANNDATA_CELLS_ZARRanndata-cells.zarr
ft.ANNDATA_EXPRESSION_MATRIX_ZARRanndata-expression-matrix.zarr

Example

import { VitessceConfig, DataType as dt, FileType as ft } from 'vitessce';

const vc = new VitessceConfig("My config");
const dataset = vc.addDataset("My dataset")
.addFile(
"http://example.com/my-cells-data.json",
dt.CELLS,
ft.CELLS_JSON,
);

Coordination Types

We provide the CoordinationType constant mapping from JavaScript object keys to coordination type strings. For convenience, you may specify a shorter alias such as ct when the variable is imported.

import { CoordinationType as ct } from 'vitessce';
KeyValue
ct.DATASETdataset
ct.EMBEDDING_TYPEembeddingType
ct.EMBEDDING_ZOOMembeddingZoom
ct.EMBEDDING_ROTATIONembeddingRotation
ct.EMBEDDING_TARGET_XembeddingTargetX
ct.EMBEDDING_TARGET_YembeddingTargetY
ct.EMBEDDING_TARGET_ZembeddingTargetZ
ct.EMBEDDING_CELL_SET_POLYGONS_VISIBLEembeddingCellSetPolygonsVisible
ct.EMBEDDING_CELL_SET_LABELS_VISIBLEembeddingCellSetLabelsVisible
ct.EMBEDDING_CELL_SET_LABEL_SIZEembeddingCellSetLabelSize
ct.EMBEDDING_CELL_RADIUSembeddingCellRadius
ct.EMBEDDING_CELL_RADIUS_MODEembeddingCellRadiusMode
ct.EMBEDDING_CELL_OPACITYembeddingCellOpacity
ct.EMBEDDING_CELL_OPACITY_MODEembeddingCellOpacityMode
ct.SPATIAL_ZOOMspatialZoom
ct.SPATIAL_ROTATIONspatialRotation
ct.SPATIAL_TARGET_XspatialTargetX
ct.SPATIAL_TARGET_YspatialTargetY
ct.SPATIAL_TARGET_ZspatialTargetZ
ct.SPATIAL_ROTATION_XspatialRotationX
ct.SPATIAL_ROTATION_YspatialRotationY
ct.SPATIAL_ROTATION_ZspatialRotationZ
ct.SPATIAL_ROTATION_ORBITspatialRotationOrbit
ct.SPATIAL_ORBIT_AXISspatialOrbitAxis
ct.SPATIAL_AXIS_FIXEDspatialAxisFixed
ct.HEATMAP_ZOOM_XheatmapZoomX
ct.HEATMAP_ZOOM_YheatmapZoomY
ct.HEATMAP_TARGET_XheatmapTargetX
ct.HEATMAP_TARGET_YheatmapTargetY
ct.CELL_FILTERcellFilter
ct.CELL_HIGHLIGHTcellHighlight
ct.CELL_SET_SELECTIONcellSetSelection
ct.CELL_SET_HIGHLIGHTcellSetHighlight
ct.CELL_SET_COLORcellSetColor
ct.GENE_FILTERgeneFilter
ct.GENE_HIGHLIGHTgeneHighlight
ct.GENE_SELECTIONgeneSelection
ct.GENE_EXPRESSION_COLORMAPgeneExpressionColormap
ct.GENE_EXPRESSION_TRANSFORMgeneExpressionTransform
ct.GENE_EXPRESSION_COLORMAP_RANGEgeneExpressionColormapRange
ct.CELL_COLOR_ENCODINGcellColorEncoding
ct.SPATIAL_RASTER_LAYERSspatialRasterLayers
ct.SPATIAL_CELLS_LAYERspatialCellsLayer
ct.SPATIAL_MOLECULES_LAYERspatialMoleculesLayer
ct.SPATIAL_NEIGHBORHOODS_LAYERspatialNeighborhoodsLayer
ct.GENOMIC_ZOOM_XgenomicZoomX
ct.GENOMIC_ZOOM_YgenomicZoomY
ct.GENOMIC_TARGET_XgenomicTargetX
ct.GENOMIC_TARGET_YgenomicTargetY
ct.ADDITIONAL_CELL_SETSadditionalCellSets
ct.MOLECULE_HIGHLIGHTmoleculeHighlight

Example

import { VitessceConfig, Component as cm, CoordinationType as ct } from 'vitessce';

const vc = new VitessceConfig("My config");
const dataset = vc.addDataset("My dataset");
const v1 = vc.addView(dataset, cm.SPATIAL);
const v2 = vc.addView(dataset, cm.SPATIAL);
vc.linkViews(
[v1, v2]
[ct.SPATIAL_ZOOM, ct.SPATIAL_TARGET_X, ct.SPATIAL_TARGET_Y]
[2, 0, 0]
);