Page mode example

Configure Vitessce

[ ]:

from vitessce import (
    VitessceConfig,
    Component as cm,
    CoordinationType as ct,
    AnnDataWrapper,
    CsvWrapper,
)
from oxc_py import transform

Configure the data and views

[ ]:

url = 'https://storage.googleapis.com/vitessce-demo-data/anndata-test/pbmc3k_processed.zarr'

[ ]:

vc = VitessceConfig(schema_version="1.0.17", name='PBMC Reference')
dataset = vc.add_dataset(name='PBMC 3k').add_object(
    AnnDataWrapper(
        adata_url=url,
        obs_set_paths=["obs/louvain"],
        obs_set_names=["Louvain"],
        obs_embedding_paths=["obsm/X_umap", "obsm/X_pca"],
        obs_embedding_names=["UMAP", "PCA"],
        obs_feature_matrix_path="X"
    )
)

umap = vc.add_view(cm.SCATTERPLOT, dataset=dataset, mapping="UMAP", uid="scatterplot-umap")
pca = vc.add_view(cm.SCATTERPLOT, dataset=dataset, mapping="PCA", uid="scatterplot-pca")
cell_sets = vc.add_view(cm.OBS_SETS, dataset=dataset, uid="cell-sets")
genes = vc.add_view(cm.FEATURE_LIST, dataset=dataset, uid="gene-list")
heatmap = vc.add_view(cm.HEATMAP, dataset=dataset, uid="heatmap")

vc.layout((umap / pca) | ((cell_sets | genes) / heatmap));

Define the page layout

[ ]:

PAGE_ESM = transform("""
function createPage(utilsForPages) {
  const {
    React,
    usePageModeView,
  } = utilsForPages;
  function PageComponent(props) {
    const ScatterplotUmap = usePageModeView('scatterplot-umap');
    const ScatterplotPca = usePageModeView('scatterplot-pca');
    const CellSets = usePageModeView('cell-sets');
    const GeneList = usePageModeView('gene-list');
    const Heatmap = usePageModeView('heatmap');

    return (
        <>
          <style>{`
          h1, h2, h3, h4, h5, h6 {
            font-family: sans-serif;
          }
          h3 {
            font-size: 20px;
          }
          .fancy-heading {
              text-shadow: 1px 1px 2px pink;
          }
          `}
          </style>
          <div style={{ width: '100%', display: 'flex', flexDirection: 'row', background: 'lightblue' }}>
            <div style={{ width: '80%'}}>
              <h3 style={{ fontFamily: 'Courier New' }} className="fancy-heading">This is an arbitrary HTML element with custom CSS</h3>
              <div style={{ width: '100%', height: '400px', display: 'flex', flexDirection: 'row' }}>
                <div style={{ width: '45%' }}>
                  <ScatterplotUmap />
                </div>
                <div style={{ width: '45%', marginLeft: '5%' }}>
                  <ScatterplotPca />
                </div>
              </div>
              <h3>Another HTML element</h3>
              <div style={{ width: '95%', height: '500px' }}>
                <Heatmap />
              </div>
            </div>
            <div style={{ width: '20%', height: '520px' }}>
              <CellSets />
              <GeneList />
            </div>
          </div>

        </>
      );
  }
  return PageComponent;
}
export default { createPage };
""")