From e539ac8e36bbdb1c51ebafaf2a911c2dbdc88a81 Mon Sep 17 00:00:00 2001
From: Mark Keller <7525285+keller-mark@users.noreply.github.com>
Date: Fri, 8 Aug 2025 10:02:38 -0400
Subject: [PATCH 01/10] Marimo conversion
---
...rowser_to_vitessce_config_conversion.ipynb | 217 ----
...rowser_to_vitessce_config_conversion.mo.py | 149 +++
docs/notebooks/config_to_python.ipynb | 184 ---
docs/notebooks/config_to_python.mo.py | 117 ++
docs/notebooks/data_conversion.ipynb | 103 --
docs/notebooks/data_conversion.mo.py | 90 ++
docs/notebooks/data_export_files.ipynb | 236 ----
docs/notebooks/data_export_files.mo.py | 229 ++++
docs/notebooks/data_export_s3.ipynb | 230 ----
docs/notebooks/data_export_s3.mo.py | 225 ++++
docs/notebooks/page_mode_comparative.ipynb | 490 -------
docs/notebooks/page_mode_comparative.mo.py | 461 +++++++
docs/notebooks/page_mode_example.ipynb | 197 ---
docs/notebooks/page_mode_example.mo.py | 185 +++
docs/notebooks/spatial_data.ipynb | 164 ---
docs/notebooks/spatial_data.mo.py | 181 +++
docs/notebooks/spatial_data_blobs.ipynb | 201 ---
docs/notebooks/spatial_data_blobs.mo.py | 187 +++
docs/notebooks/spatial_data_kpmp_vis.ipynb | 477 -------
docs/notebooks/spatial_data_kpmp_vis.mo.py | 450 +++++++
docs/notebooks/spatial_data_merfish.ipynb | 208 ---
docs/notebooks/spatial_data_merfish.mo.py | 196 +++
docs/notebooks/spatial_data_merfish_2.ipynb | 172 ---
docs/notebooks/spatial_data_merfish_2.mo.py | 180 +++
docs/notebooks/spatial_data_mouseliver.ipynb | 789 -----------
docs/notebooks/spatial_data_mouseliver.mo.py | 754 +++++++++++
.../spatial_data_mouseliver_remote.ipynb | 627 ---------
.../spatial_data_mouseliver_remote.mo.py | 560 ++++++++
docs/notebooks/spatial_data_visium_hd.ipynb | 247 ----
docs/notebooks/spatial_data_visium_hd.mo.py | 248 ++++
docs/notebooks/web_app_brain.ipynb | 253 ----
docs/notebooks/web_app_brain.mo.py | 249 ++++
.../notebooks/widget_anndata_with_image.ipynb | 130 --
.../notebooks/widget_anndata_with_image.mo.py | 126 ++
docs/notebooks/widget_brain.ipynb | 295 -----
docs/notebooks/widget_brain.mo.py | 288 ++++
docs/notebooks/widget_brain_h5ad.ipynb | 170 ---
docs/notebooks/widget_brain_h5ad.mo.py | 164 +++
.../widget_brain_with_base_dir.ipynb | 329 -----
.../widget_brain_with_base_dir.mo.py | 330 +++++
.../widget_brain_with_quality_metric.ipynb | 251 ----
.../widget_brain_with_quality_metric.mo.py | 244 ++++
docs/notebooks/widget_from_dict.ipynb | 108 --
docs/notebooks/widget_from_dict.mo.py | 94 ++
docs/notebooks/widget_genomic_profiles.ipynb | 220 ----
docs/notebooks/widget_genomic_profiles.mo.py | 209 +++
docs/notebooks/widget_imaging.ipynb | 114 --
docs/notebooks/widget_imaging.mo.py | 97 ++
docs/notebooks/widget_imaging_beta.ipynb | 168 ---
docs/notebooks/widget_imaging_beta.mo.py | 135 ++
.../widget_imaging_segmentation.ipynb | 118 --
.../widget_imaging_segmentation.mo.py | 94 ++
docs/notebooks/widget_loom.ipynb | 219 ----
docs/notebooks/widget_loom.mo.py | 218 ++++
docs/notebooks/widget_modify_config.ipynb | 1153 -----------------
docs/notebooks/widget_modify_config.mo.py | 141 ++
docs/notebooks/widget_neuroglancer.ipynb | 239 ----
docs/notebooks/widget_neuroglancer.mo.py | 224 ++++
docs/notebooks/widget_on_colab.ipynb | 137 --
docs/notebooks/widget_on_colab.mo.py | 125 ++
docs/notebooks/widget_pbmc.ipynb | 204 ---
docs/notebooks/widget_pbmc.mo.py | 190 +++
docs/notebooks/widget_pbmc_remote.ipynb | 139 --
docs/notebooks/widget_pbmc_remote.mo.py | 135 ++
docs/notebooks/widget_plugin_custom.ipynb | 184 ---
docs/notebooks/widget_plugin_custom.mo.py | 175 +++
docs/notebooks/widget_plugin_demo.ipynb | 122 --
docs/notebooks/widget_plugin_demo.mo.py | 112 ++
.../widget_plugin_spatial-query.ipynb | 152 ---
.../widget_plugin_spatial-query.mo.py | 134 ++
.../notebooks/widget_segmentations_beta.ipynb | 104 --
.../notebooks/widget_segmentations_beta.mo.py | 100 ++
docs/notebooks/widget_shortcut.ipynb | 176 ---
docs/notebooks/widget_shortcut.mo.py | 148 +++
74 files changed, 7944 insertions(+), 9527 deletions(-)
delete mode 100644 docs/notebooks/cellbrowser_to_vitessce_config_conversion.ipynb
create mode 100644 docs/notebooks/cellbrowser_to_vitessce_config_conversion.mo.py
delete mode 100644 docs/notebooks/config_to_python.ipynb
create mode 100644 docs/notebooks/config_to_python.mo.py
delete mode 100644 docs/notebooks/data_conversion.ipynb
create mode 100644 docs/notebooks/data_conversion.mo.py
delete mode 100644 docs/notebooks/data_export_files.ipynb
create mode 100644 docs/notebooks/data_export_files.mo.py
delete mode 100644 docs/notebooks/data_export_s3.ipynb
create mode 100644 docs/notebooks/data_export_s3.mo.py
delete mode 100644 docs/notebooks/page_mode_comparative.ipynb
create mode 100644 docs/notebooks/page_mode_comparative.mo.py
delete mode 100644 docs/notebooks/page_mode_example.ipynb
create mode 100644 docs/notebooks/page_mode_example.mo.py
delete mode 100644 docs/notebooks/spatial_data.ipynb
create mode 100644 docs/notebooks/spatial_data.mo.py
delete mode 100644 docs/notebooks/spatial_data_blobs.ipynb
create mode 100644 docs/notebooks/spatial_data_blobs.mo.py
delete mode 100644 docs/notebooks/spatial_data_kpmp_vis.ipynb
create mode 100644 docs/notebooks/spatial_data_kpmp_vis.mo.py
delete mode 100644 docs/notebooks/spatial_data_merfish.ipynb
create mode 100644 docs/notebooks/spatial_data_merfish.mo.py
delete mode 100644 docs/notebooks/spatial_data_merfish_2.ipynb
create mode 100644 docs/notebooks/spatial_data_merfish_2.mo.py
delete mode 100644 docs/notebooks/spatial_data_mouseliver.ipynb
create mode 100644 docs/notebooks/spatial_data_mouseliver.mo.py
delete mode 100644 docs/notebooks/spatial_data_mouseliver_remote.ipynb
create mode 100644 docs/notebooks/spatial_data_mouseliver_remote.mo.py
delete mode 100644 docs/notebooks/spatial_data_visium_hd.ipynb
create mode 100644 docs/notebooks/spatial_data_visium_hd.mo.py
delete mode 100644 docs/notebooks/web_app_brain.ipynb
create mode 100644 docs/notebooks/web_app_brain.mo.py
delete mode 100644 docs/notebooks/widget_anndata_with_image.ipynb
create mode 100644 docs/notebooks/widget_anndata_with_image.mo.py
delete mode 100644 docs/notebooks/widget_brain.ipynb
create mode 100644 docs/notebooks/widget_brain.mo.py
delete mode 100644 docs/notebooks/widget_brain_h5ad.ipynb
create mode 100644 docs/notebooks/widget_brain_h5ad.mo.py
delete mode 100644 docs/notebooks/widget_brain_with_base_dir.ipynb
create mode 100644 docs/notebooks/widget_brain_with_base_dir.mo.py
delete mode 100644 docs/notebooks/widget_brain_with_quality_metric.ipynb
create mode 100644 docs/notebooks/widget_brain_with_quality_metric.mo.py
delete mode 100644 docs/notebooks/widget_from_dict.ipynb
create mode 100644 docs/notebooks/widget_from_dict.mo.py
delete mode 100644 docs/notebooks/widget_genomic_profiles.ipynb
create mode 100644 docs/notebooks/widget_genomic_profiles.mo.py
delete mode 100644 docs/notebooks/widget_imaging.ipynb
create mode 100644 docs/notebooks/widget_imaging.mo.py
delete mode 100644 docs/notebooks/widget_imaging_beta.ipynb
create mode 100644 docs/notebooks/widget_imaging_beta.mo.py
delete mode 100644 docs/notebooks/widget_imaging_segmentation.ipynb
create mode 100644 docs/notebooks/widget_imaging_segmentation.mo.py
delete mode 100644 docs/notebooks/widget_loom.ipynb
create mode 100644 docs/notebooks/widget_loom.mo.py
delete mode 100644 docs/notebooks/widget_modify_config.ipynb
create mode 100644 docs/notebooks/widget_modify_config.mo.py
delete mode 100644 docs/notebooks/widget_neuroglancer.ipynb
create mode 100644 docs/notebooks/widget_neuroglancer.mo.py
delete mode 100644 docs/notebooks/widget_on_colab.ipynb
create mode 100644 docs/notebooks/widget_on_colab.mo.py
delete mode 100644 docs/notebooks/widget_pbmc.ipynb
create mode 100644 docs/notebooks/widget_pbmc.mo.py
delete mode 100644 docs/notebooks/widget_pbmc_remote.ipynb
create mode 100644 docs/notebooks/widget_pbmc_remote.mo.py
delete mode 100644 docs/notebooks/widget_plugin_custom.ipynb
create mode 100644 docs/notebooks/widget_plugin_custom.mo.py
delete mode 100644 docs/notebooks/widget_plugin_demo.ipynb
create mode 100644 docs/notebooks/widget_plugin_demo.mo.py
delete mode 100644 docs/notebooks/widget_plugin_spatial-query.ipynb
create mode 100644 docs/notebooks/widget_plugin_spatial-query.mo.py
delete mode 100644 docs/notebooks/widget_segmentations_beta.ipynb
create mode 100644 docs/notebooks/widget_segmentations_beta.mo.py
delete mode 100644 docs/notebooks/widget_shortcut.ipynb
create mode 100644 docs/notebooks/widget_shortcut.mo.py
diff --git a/docs/notebooks/cellbrowser_to_vitessce_config_conversion.ipynb b/docs/notebooks/cellbrowser_to_vitessce_config_conversion.ipynb
deleted file mode 100644
index 3ca1e0cf..00000000
--- a/docs/notebooks/cellbrowser_to_vitessce_config_conversion.ipynb
+++ /dev/null
@@ -1,217 +0,0 @@
-{
- "cells": [
- {
- "cell_type": "markdown",
- "id": "710bc947",
- "metadata": {},
- "source": [
- "# Load UCSC Cell Browser project in Vitessce"
- ]
- },
- {
- "cell_type": "markdown",
- "id": "fad939f6-bd8b-46f8-8dd1-f0816d8ca5b3",
- "metadata": {},
- "source": [
- "This notebook shows you how to use the `convert_cell_browser_project_to_anndata` function, which allows you to take an existing project, published in https://cells.ucsc.edu/ and:\n",
- "1. Convert it into the AnnData format that is supported by Vitessce\n",
- "2. Save the AnnData object as a Zarr store\n",
- "3. Configure Vitessce with the AnnData-Zarr store\n",
- "4. Render a Vitessce widget based on the config (step 3) directly in the notebook.\n",
- "\n",
- "The dataset that you choose to convert needs to be a valid UCSC Cell Browser \"project\", accessible from https://cells.ucsc.edu/, with a configuration available in https://github.com/ucscGenomeBrowser/cellbrowser-confs\n",
- "\n",
- "The `convert_cell_browser_project_to_anndata` function takes the name of that project as an input. For example, to convert this project, https://cells.ucsc.edu/?ds=adultPancreas, you will neeed to pass `\"adultPancreas\"` as the project name."
- ]
- },
- {
- "cell_type": "code",
- "execution_count": 5,
- "id": "532fea6a-69d4-4cac-8afb-6d334dbe7ca1",
- "metadata": {},
- "outputs": [],
- "source": [
- "import os\n",
- "import json\n",
- "from os.path import join\n",
- "from vitessce import (\n",
- " convert_cell_browser_project_to_anndata,\n",
- " AnnDataWrapper,\n",
- " VitessceConfig,\n",
- ")\n",
- "from vitessce.data_utils import VAR_CHUNK_SIZE"
- ]
- },
- {
- "cell_type": "markdown",
- "id": "a8077cfd-abc2-488d-9d91-83bc29a0bbe9",
- "metadata": {},
- "source": [
- "## 1. Convert UCSC Cell Browser project to a format that is supported by Vitessce\n",
- "#### Output:\n",
- "An AnnData object\n"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "id": "743c2d61-d98c-4e8d-a821-d5fe0ec2d93b",
- "metadata": {},
- "outputs": [],
- "source": [
- "## 3. Convert UCSC Cell Browser project to a Vitessce view config"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": 22,
- "id": "6fb3e7dc-baf8-49e9-9d24-264bcd668b49",
- "metadata": {},
- "outputs": [
- {
- "name": "stdout",
- "output_type": "stream",
- "text": [
- "Converting CellBrowser config for project adultPancreas to Anndata-Zarr object\n",
- "Successfully fetched configuration: https://cells.ucsc.edu/adultPancreas/dataset.json.\n",
- "CellBrowser config is valid. Proceeding further with conversion.\n",
- "Downloading expression matrix ...\n",
- "Successfully downloaded expression matrix https://cells.ucsc.edu/adultPancreas/exprMatrix.tsv.gz.\n",
- "Loading expression matrix into Anndata object ...\n",
- "This dataset uses the format identifier|symbol for the ad.obs gene names (e.g. “ENSG0123123.3|HOX3”). We are keeping only the symbol.\n",
- "Adding cell metadata to Anndata object ...\n",
- "Successfully downloaded metadata meta.tsv.\n",
- "Successful extraction of the following coordinates and URLS: {'X_tsne': 'tMinusSNE.coords.tsv.gz'}\n",
- "Adding X_tsne to Anndata object ...\n",
- "X_tsne successfully added.\n",
- "Done adding coordinates to the Anndata object.\n",
- "Filtering out all non-marker genes from Anndata object ...\n",
- "Successfully filtered out all non-marker genes from Anndata object.\n",
- "About to write the Anndata object to the Zarr store. The following properties will be saved:\n",
- " Obs columns: ['cluster', 'age', 'age_unit', 'Key', 'experiment_name', 'fragAnalyzerRange', 'nCells', 'ng_ul', 'plate_nr', 'sample_recieve_date', 'chip_type', 'c1_chip_id', 'enrichment_method', 'capture_position', 'gene_body_coverage', 'intron_exon_ratio', 'mapped_reads', 'total_reads', 'n_genes']\n",
- " Obsm keys: ['X_tsne']\n",
- " Var columns: ['gene', 'n_cells']\n",
- "obsm X_tsne is an instance of DataFrame, converting it to numpy array.\n"
- ]
- }
- ],
- "source": [
- "# Example run, coverting \"adultPancreas\" project:\n",
- "adata = convert_cell_browser_project_to_anndata(project_name=\"adultPancreas\", keep_only_marker_genes=True)"
- ]
- },
- {
- "cell_type": "markdown",
- "id": "cf3cfcbe-4048-4a60-8988-b8c0eace23e2",
- "metadata": {},
- "source": [
- "## 2. Save the AnnData object as a Zarr store"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": 24,
- "id": "8835ab53-2ee3-490e-a68c-c2d8952277a9",
- "metadata": {
- "scrolled": true
- },
- "outputs": [],
- "source": [
- "zarr_filepath = join(\"data\", \"out.adata.zarr\")\n",
- "os.makedirs(os.path.dirname(zarr_filepath), exist_ok=True)\n",
- "adata.write_zarr(zarr_filepath, chunks=[adata.shape[0], VAR_CHUNK_SIZE])"
- ]
- },
- {
- "cell_type": "markdown",
- "id": "d61667b4-dc32-4376-bff1-b4a5bf74140f",
- "metadata": {},
- "source": [
- "## 3. Configure Vitessce with the AnnData-Zarr store"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": 25,
- "id": "259c1804-2e67-4a92-bc90-5ba5e3dba7b3",
- "metadata": {},
- "outputs": [],
- "source": [
- "anndata_wrapper_inst = AnnDataWrapper(\n",
- " adata_path=zarr_filepath,\n",
- " obs_feature_matrix_path=\"X\",\n",
- " obs_embedding_paths=[\"obsm/X_tsne\"],\n",
- " obs_embedding_names=[\"t-SNE\"],\n",
- " obs_set_paths=[\"obs/cluster\", \"obs/age\"],\n",
- " obs_set_names=[\"cluster\", \"age\"],\n",
- ")\n",
- "vc = VitessceConfig(schema_version=\"1.0.15\", name=\"Vitessce configuration for CellBrowser project adultPancreas\")\n",
- "anndata_wrapper_inst.auto_view_config(vc)"
- ]
- },
- {
- "cell_type": "markdown",
- "id": "22e7d2fd-2c2e-4ce5-b551-7809cdc6568e",
- "metadata": {},
- "source": [
- "## 4. Render the Vitessce widget"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": 26,
- "id": "cb9cb8e3-8ef4-49d9-b0a0-ba2f0fc80637",
- "metadata": {},
- "outputs": [
- {
- "data": {
- "application/vnd.jupyter.widget-view+json": {
- "model_id": "e5878bf30e1f4428a14604731928972d",
- "version_major": 2,
- "version_minor": 0
- },
- "text/plain": [
- "VitessceWidget(config={'version': '1.0.15', 'name': 'Vitessce configuration for CellBrowser project adultPancr…"
- ]
- },
- "execution_count": 26,
- "metadata": {},
- "output_type": "execute_result"
- }
- ],
- "source": [
- "vw = vc.widget()\n",
- "vw"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "id": "774b8156-5cc6-4d17-884b-595957366230",
- "metadata": {},
- "outputs": [],
- "source": []
- }
- ],
- "metadata": {
- "kernelspec": {
- "display_name": "Python 3 (ipykernel)",
- "language": "python",
- "name": "python3"
- },
- "language_info": {
- "codemirror_mode": {
- "name": "ipython",
- "version": 3
- },
- "file_extension": ".py",
- "mimetype": "text/x-python",
- "name": "python",
- "nbconvert_exporter": "python",
- "pygments_lexer": "ipython3",
- "version": "3.9.0"
- }
- },
- "nbformat": 4,
- "nbformat_minor": 5
-}
diff --git a/docs/notebooks/cellbrowser_to_vitessce_config_conversion.mo.py b/docs/notebooks/cellbrowser_to_vitessce_config_conversion.mo.py
new file mode 100644
index 00000000..157ee36d
--- /dev/null
+++ b/docs/notebooks/cellbrowser_to_vitessce_config_conversion.mo.py
@@ -0,0 +1,149 @@
+import marimo
+
+__generated_with = "0.13.15"
+app = marimo.App()
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ # Load UCSC Cell Browser project in Vitessce
+ """
+ )
+ return
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ This notebook shows you how to use the `convert_cell_browser_project_to_anndata` function, which allows you to take an existing project, published in https://cells.ucsc.edu/ and:
+ 1. Convert it into the AnnData format that is supported by Vitessce
+ 2. Save the AnnData object as a Zarr store
+ 3. Configure Vitessce with the AnnData-Zarr store
+ 4. Render a Vitessce widget based on the config (step 3) directly in the notebook.
+
+ The dataset that you choose to convert needs to be a valid UCSC Cell Browser "project", accessible from https://cells.ucsc.edu/, with a configuration available in https://github.com/ucscGenomeBrowser/cellbrowser-confs
+
+ The `convert_cell_browser_project_to_anndata` function takes the name of that project as an input. For example, to convert this project, https://cells.ucsc.edu/?ds=adultPancreas, you will neeed to pass `"adultPancreas"` as the project name.
+ """
+ )
+ return
+
+
+@app.cell
+def _():
+ import os
+ import json
+ from os.path import join
+ from vitessce import (
+ convert_cell_browser_project_to_anndata,
+ AnnDataWrapper,
+ VitessceConfig,
+ )
+ from vitessce.data_utils import VAR_CHUNK_SIZE
+ return (
+ AnnDataWrapper,
+ VAR_CHUNK_SIZE,
+ VitessceConfig,
+ convert_cell_browser_project_to_anndata,
+ join,
+ os,
+ )
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ ## 1. Convert UCSC Cell Browser project to a format that is supported by Vitessce
+ #### Output:
+ An AnnData object
+
+ """
+ )
+ return
+
+
+@app.cell
+def _():
+ ## 3. Convert UCSC Cell Browser project to a Vitessce view config
+ return
+
+
+@app.cell
+def _(convert_cell_browser_project_to_anndata):
+ # Example run, coverting "adultPancreas" project:
+ adata = convert_cell_browser_project_to_anndata(project_name="adultPancreas", keep_only_marker_genes=True)
+ return (adata,)
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ ## 2. Save the AnnData object as a Zarr store
+ """
+ )
+ return
+
+
+@app.cell
+def _(VAR_CHUNK_SIZE, adata, join, os):
+ zarr_filepath = join("data", "out.adata.zarr")
+ os.makedirs(os.path.dirname(zarr_filepath), exist_ok=True)
+ adata.write_zarr(zarr_filepath, chunks=[adata.shape[0], VAR_CHUNK_SIZE])
+ return (zarr_filepath,)
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ ## 3. Configure Vitessce with the AnnData-Zarr store
+ """
+ )
+ return
+
+
+@app.cell
+def _(AnnDataWrapper, VitessceConfig, zarr_filepath):
+ anndata_wrapper_inst = AnnDataWrapper(
+ adata_path=zarr_filepath,
+ obs_feature_matrix_path="X",
+ obs_embedding_paths=["obsm/X_tsne"],
+ obs_embedding_names=["t-SNE"],
+ obs_set_paths=["obs/cluster", "obs/age"],
+ obs_set_names=["cluster", "age"],
+ )
+ vc = VitessceConfig(schema_version="1.0.15", name="Vitessce configuration for CellBrowser project adultPancreas")
+ anndata_wrapper_inst.auto_view_config(vc)
+ return (vc,)
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ ## 4. Render the Vitessce widget
+ """
+ )
+ return
+
+
+@app.cell
+def _(vc):
+ vw = vc.widget()
+ vw
+ return
+
+
+@app.cell
+def _():
+ import marimo as mo
+ return (mo,)
+
+
+if __name__ == "__main__":
+ app.run()
diff --git a/docs/notebooks/config_to_python.ipynb b/docs/notebooks/config_to_python.ipynb
deleted file mode 100644
index ed5e2d89..00000000
--- a/docs/notebooks/config_to_python.ipynb
+++ /dev/null
@@ -1,184 +0,0 @@
-{
- "cells": [
- {
- "cell_type": "markdown",
- "id": "10f1c457-d0c8-4630-8e49-45df13b9c6d0",
- "metadata": {},
- "source": [
- "# Generate Python code to reconstruct a VitessceConfig instance"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "id": "67d5193a",
- "metadata": {},
- "outputs": [],
- "source": [
- "from vitessce import VitessceConfig, VitessceChainableConfig, VitessceConfigDatasetFile"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "id": "721dacde",
- "metadata": {},
- "outputs": [],
- "source": [
- "from example_configs import dries as dries_config"
- ]
- },
- {
- "cell_type": "markdown",
- "id": "0954be13-6157-4e72-871d-4b1cd6b36ff0",
- "metadata": {},
- "source": [
- "## Load a view config from a dict representation"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "id": "61000b61",
- "metadata": {
- "scrolled": true
- },
- "outputs": [],
- "source": [
- "vc = VitessceConfig.from_dict(dries_config)"
- ]
- },
- {
- "cell_type": "markdown",
- "id": "0999e895-194e-4890-9cf7-b7c7cc60c9ee",
- "metadata": {},
- "source": [
- "## Print to JSON"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "id": "f777b428-4d75-487e-b08d-9d66f30fbe9a",
- "metadata": {},
- "outputs": [],
- "source": [
- "import json\n",
- "print(json.dumps(vc.to_dict(), indent=2))"
- ]
- },
- {
- "cell_type": "markdown",
- "id": "6b51dc66-096c-4c69-a041-62c5bdd523e7",
- "metadata": {},
- "source": [
- "## Print to Python\n",
- "\n",
- "The `vc.to_python` function generates formatted Python code which can be used to re-generate the `vc` instance."
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "id": "15ae4ca3-490e-4b99-ae4d-8fafedf60885",
- "metadata": {},
- "outputs": [],
- "source": [
- "imports, code = vc.to_python()"
- ]
- },
- {
- "cell_type": "markdown",
- "id": "619a87f0-9eff-49c0-a092-7859c2a54d16",
- "metadata": {},
- "source": [
- "The first value returned is a list of classes used by the code snippet."
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "id": "6ec458e3-1970-42ab-876c-cc7407d9cc19",
- "metadata": {},
- "outputs": [],
- "source": [
- "imports"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "id": "0a458da5-9fe1-45fa-b6d5-a09acb3493d3",
- "metadata": {},
- "outputs": [],
- "source": [
- "print(code)"
- ]
- },
- {
- "cell_type": "markdown",
- "id": "e47433f0-0b65-4204-becb-ec9b0c59b731",
- "metadata": {},
- "source": [
- "The second value is the code snippet. When evaluated, the result will be a new `VitessceConfig` instance."
- ]
- },
- {
- "cell_type": "markdown",
- "id": "a82a7938-923c-4947-bdf9-49d1f30134f6",
- "metadata": {},
- "source": [
- "## Evaluate the code and render a Vitessce widget"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "id": "94434a43",
- "metadata": {},
- "outputs": [],
- "source": [
- "reconstructed_vc = eval(code)"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "id": "bf0110ff",
- "metadata": {},
- "outputs": [],
- "source": [
- "reconstructed_vc.widget()"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "id": "96bf94ce-1963-4ec3-8661-178e6adbbcb7",
- "metadata": {},
- "outputs": [],
- "source": []
- }
- ],
- "metadata": {
- "kernelspec": {
- "display_name": "Python 3 (ipykernel)",
- "language": "python",
- "name": "python3"
- },
- "language_info": {
- "codemirror_mode": {
- "name": "ipython",
- "version": 3
- },
- "file_extension": ".py",
- "mimetype": "text/x-python",
- "name": "python",
- "nbconvert_exporter": "python",
- "pygments_lexer": "ipython3",
- "version": "3.8.0"
- }
- },
- "nbformat": 4,
- "nbformat_minor": 5
-}
diff --git a/docs/notebooks/config_to_python.mo.py b/docs/notebooks/config_to_python.mo.py
new file mode 100644
index 00000000..a9d825bc
--- /dev/null
+++ b/docs/notebooks/config_to_python.mo.py
@@ -0,0 +1,117 @@
+import marimo
+
+__generated_with = "0.13.15"
+app = marimo.App(width="medium")
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(r"""# Generate Python code to reconstruct a VitessceConfig instance""")
+ return
+
+
+@app.cell
+def _():
+ from vitessce import VitessceConfig, VitessceChainableConfig, VitessceConfigDatasetFile
+ return (VitessceConfig,)
+
+
+@app.cell
+def _():
+ from example_configs import dries as dries_config
+ return (dries_config,)
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(r"""## Load a view config from a dict representation""")
+ return
+
+
+@app.cell
+def _(VitessceConfig, dries_config):
+ vc = VitessceConfig.from_dict(dries_config)
+ return (vc,)
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(r"""## Print to JSON""")
+ return
+
+
+@app.cell
+def _(vc):
+ import json
+ print(json.dumps(vc.to_dict(), indent=2))
+ return
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ ## Print to Python
+
+ The `vc.to_python` function generates formatted Python code which can be used to re-generate the `vc` instance.
+ """
+ )
+ return
+
+
+@app.cell
+def _(vc):
+ imports, code = vc.to_python()
+ return code, imports
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(r"""The first value returned is a list of classes used by the code snippet.""")
+ return
+
+
+@app.cell
+def _(imports):
+ imports
+ return
+
+
+@app.cell
+def _(code):
+ print(code)
+ return
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(r"""The second value is the code snippet. When evaluated, the result will be a new `VitessceConfig` instance.""")
+ return
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(r"""## Evaluate the code and render a Vitessce widget""")
+ return
+
+
+@app.cell
+def _(code):
+ reconstructed_vc = eval(code)
+ return (reconstructed_vc,)
+
+
+@app.cell
+def _(reconstructed_vc):
+ reconstructed_vc.widget()
+ return
+
+
+@app.cell
+def _():
+ import marimo as mo
+ return (mo,)
+
+
+if __name__ == "__main__":
+ app.run()
diff --git a/docs/notebooks/data_conversion.ipynb b/docs/notebooks/data_conversion.ipynb
deleted file mode 100644
index 69f3f66f..00000000
--- a/docs/notebooks/data_conversion.ipynb
+++ /dev/null
@@ -1,103 +0,0 @@
-{
- "cells": [
- {
- "cell_type": "markdown",
- "metadata": {
- "nbsphinx": "hidden"
- },
- "source": [
- "# Vitessce Data Preparation Tutorial"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {},
- "source": [
- "# Convert data manually"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {},
- "source": [
- "When running the Vitessce widget, data is converted on-the-fly into formats that the Vitessce JavaScript component can render.\n",
- "The converted data is stored in temporary files, preventing long-term use of the converted files.\n",
- "\n",
- "However, the data conversion utilities used by the widget are exposed so that their outputs can be saved to regular files.\n",
- "This allows the files to be saved for future use with the Vitessce web application by serving the files locally or moving the files onto an object storage system such as AWS S3 (for long-term storage and data sharing).\n",
- "\n",
- "This notebook demonstrates how to save the processed outputs of the `AnnDataWrapper` and `SnapWrapper` classes."
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": [
- "from vitessce import SnapWrapper\n",
- "from os.path import join\n",
- "from scipy.io import mmread\n",
- "import pandas as pd\n",
- "import numpy as np\n",
- "import json"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": [
- "mtx = mmread(join('data', 'snapatac', 'filtered_cell_by_bin.mtx'))\n",
- "barcodes_df = pd.read_csv(join('data', 'snapatac', 'barcodes.txt'), header=None)\n",
- "bins_df = pd.read_csv(join('data', 'snapatac', 'bins.txt'), header=None)\n",
- "clusters_df = pd.read_csv(join('data', 'snapatac', 'umap_coords_clusters.csv'), index_col=0)"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": [
- "zarr_filepath = join('data', 'snapatac', 'out.snap.multires.zarr')\n",
- "\n",
- "w = SnapWrapper(mtx, barcodes_df, bins_df, clusters_df)\n",
- "\n",
- "cells_json = w.create_cells_json()\n",
- "cell_sets_json = w.create_cell_sets_json()\n",
- "\n",
- "with open(join('data', 'snapatac', 'out.cells.json'), 'w') as f:\n",
- " json.dump(cells_json, f)\n",
- "\n",
- "with open(join('data', 'snapatac', 'out.cell-sets.json'), 'w') as f:\n",
- " json.dump(cell_sets_json, f)\n",
- "\n",
- "\n",
- "w.create_genomic_multivec_zarr(zarr_filepath)"
- ]
- }
- ],
- "metadata": {
- "kernelspec": {
- "display_name": "Python 3 (ipykernel)",
- "language": "python",
- "name": "python3"
- },
- "language_info": {
- "codemirror_mode": {
- "name": "ipython",
- "version": 3
- },
- "file_extension": ".py",
- "mimetype": "text/x-python",
- "name": "python",
- "nbconvert_exporter": "python",
- "pygments_lexer": "ipython3",
- "version": "3.8.0"
- }
- },
- "nbformat": 4,
- "nbformat_minor": 4
-}
diff --git a/docs/notebooks/data_conversion.mo.py b/docs/notebooks/data_conversion.mo.py
new file mode 100644
index 00000000..d1a94e09
--- /dev/null
+++ b/docs/notebooks/data_conversion.mo.py
@@ -0,0 +1,90 @@
+import marimo
+
+__generated_with = "0.13.15"
+app = marimo.App()
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ # Vitessce Data Preparation Tutorial
+ """
+ )
+ return
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ # Convert data manually
+ """
+ )
+ return
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ When running the Vitessce widget, data is converted on-the-fly into formats that the Vitessce JavaScript component can render.
+ The converted data is stored in temporary files, preventing long-term use of the converted files.
+
+ However, the data conversion utilities used by the widget are exposed so that their outputs can be saved to regular files.
+ This allows the files to be saved for future use with the Vitessce web application by serving the files locally or moving the files onto an object storage system such as AWS S3 (for long-term storage and data sharing).
+
+ This notebook demonstrates how to save the processed outputs of the `AnnDataWrapper` and `SnapWrapper` classes.
+ """
+ )
+ return
+
+
+@app.cell
+def _():
+ from vitessce import SnapWrapper
+ from os.path import join
+ from scipy.io import mmread
+ import pandas as pd
+ import numpy as np
+ import json
+ return SnapWrapper, join, json, mmread, pd
+
+
+@app.cell
+def _(join, mmread, pd):
+ mtx = mmread(join('data', 'snapatac', 'filtered_cell_by_bin.mtx'))
+ barcodes_df = pd.read_csv(join('data', 'snapatac', 'barcodes.txt'), header=None)
+ bins_df = pd.read_csv(join('data', 'snapatac', 'bins.txt'), header=None)
+ clusters_df = pd.read_csv(join('data', 'snapatac', 'umap_coords_clusters.csv'), index_col=0)
+ return barcodes_df, bins_df, clusters_df, mtx
+
+
+@app.cell
+def _(SnapWrapper, barcodes_df, bins_df, clusters_df, join, json, mtx):
+ zarr_filepath = join('data', 'snapatac', 'out.snap.multires.zarr')
+
+ w = SnapWrapper(mtx, barcodes_df, bins_df, clusters_df)
+
+ cells_json = w.create_cells_json()
+ cell_sets_json = w.create_cell_sets_json()
+
+ with open(join('data', 'snapatac', 'out.cells.json'), 'w') as f:
+ json.dump(cells_json, f)
+
+ with open(join('data', 'snapatac', 'out.cell-sets.json'), 'w') as f:
+ json.dump(cell_sets_json, f)
+
+
+ w.create_genomic_multivec_zarr(zarr_filepath)
+ return
+
+
+@app.cell
+def _():
+ import marimo as mo
+ return (mo,)
+
+
+if __name__ == "__main__":
+ app.run()
diff --git a/docs/notebooks/data_export_files.ipynb b/docs/notebooks/data_export_files.ipynb
deleted file mode 100644
index d2b17c6e..00000000
--- a/docs/notebooks/data_export_files.ipynb
+++ /dev/null
@@ -1,236 +0,0 @@
-{
- "cells": [
- {
- "cell_type": "markdown",
- "metadata": {
- "nbsphinx": "hidden"
- },
- "source": [
- "# Vitessce Data Preparation Tutorial"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {},
- "source": [
- "# Export data to local files"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {},
- "source": [
- "## 1. Import dependencies\n",
- "\n",
- "We need to import the classes and functions that we will be using from the corresponding packages."
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": [
- "import os\n",
- "import json\n",
- "from urllib.parse import quote_plus\n",
- "from os.path import join, isfile, isdir\n",
- "from urllib.request import urlretrieve\n",
- "from anndata import read_h5ad\n",
- "import scanpy as sc\n",
- "\n",
- "from vitessce import (\n",
- " VitessceWidget,\n",
- " VitessceConfig,\n",
- " Component as cm,\n",
- " CoordinationType as ct,\n",
- " AnnDataWrapper,\n",
- ")\n",
- "from vitessce.data_utils import (\n",
- " optimize_adata,\n",
- " VAR_CHUNK_SIZE,\n",
- ")"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {},
- "source": [
- "## 2. Download and process data\n",
- "\n",
- "For this example, we need to download a dataset from the COVID-19 Cell Atlas https://www.covid19cellatlas.org/index.healthy.html#habib17."
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": [
- "adata_filepath = join(\"data\", \"habib17.processed.h5ad\")\n",
- "if not isfile(adata_filepath):\n",
- " os.makedirs(\"data\", exist_ok=True)\n",
- " urlretrieve('https://covid19.cog.sanger.ac.uk/habib17.processed.h5ad', adata_filepath)\n",
- "\n",
- "adata = read_h5ad(adata_filepath)\n",
- "top_dispersion = adata.var[\"dispersions_norm\"][\n",
- " sorted(\n",
- " range(len(adata.var[\"dispersions_norm\"])),\n",
- " key=lambda k: adata.var[\"dispersions_norm\"][k],\n",
- " )[-51:][0]\n",
- "]\n",
- "adata.var[\"top_highly_variable\"] = (\n",
- " adata.var[\"dispersions_norm\"] > top_dispersion\n",
- ")"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": [
- "zarr_filepath = join(\"data\", \"habib17.processed.zarr\")\n",
- "if not isdir(zarr_filepath):\n",
- " adata = optimize_adata(\n",
- " adata,\n",
- " obs_cols=[\"CellType\"],\n",
- " obsm_keys=[\"X_umap\"],\n",
- " var_cols=[\"top_highly_variable\"],\n",
- " optimize_X=True,\n",
- " )\n",
- " adata.write_zarr(zarr_filepath, chunks=[adata.shape[0], VAR_CHUNK_SIZE])"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {},
- "source": [
- "## 3. Create the Vitessce configuration"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {},
- "source": [
- "Set up the configuration by adding the views and datasets of interest."
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": [
- "vc = VitessceConfig(schema_version=\"1.0.15\", name='Habib et al', description='COVID-19 Healthy Donor Brain')\n",
- "dataset = vc.add_dataset(name='Brain').add_object(AnnDataWrapper(\n",
- " adata_path=zarr_filepath,\n",
- " obs_embedding_paths=[\"obsm/X_umap\"],\n",
- " obs_embedding_names=[\"UMAP\"],\n",
- " obs_set_paths=[\"obs/CellType\"],\n",
- " obs_set_names=[\"Cell Type\"],\n",
- " obs_feature_matrix_path=\"X\",\n",
- " feature_filter_path=\"var/top_highly_variable\"\n",
- "))\n",
- "scatterplot = vc.add_view(cm.SCATTERPLOT, dataset=dataset, mapping=\"X_umap\")\n",
- "cell_sets = vc.add_view(cm.OBS_SETS, dataset=dataset)\n",
- "genes = vc.add_view(cm.FEATURE_LIST, dataset=dataset)\n",
- "heatmap = vc.add_view(cm.HEATMAP, dataset=dataset)\n",
- "vc.layout((scatterplot | (cell_sets / genes)) / heatmap);"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {},
- "source": [
- "## 4. Export files to a local directory\n",
- "\n",
- "The `.export(to='files')` method on the view config instance will export files to the specified directory `out_dir`. The `base_url` parameter is required so that the file URLs in the view config point to the location where you ultimately intend to serve the files."
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": [
- "config_dict = vc.export(to='files', base_url='http://localhost:3000', out_dir='./test')"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {},
- "source": [
- "## 5. Serve the files"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {},
- "source": [
- "Now that the files have been saved to the `./test` directory, they can be served by any static web server.\n",
- "\n",
- "If you would like to serve the files locally, we recommend [http-server](https://github.com/http-party/http-server) which can be installed with NPM or Homebrew:\n",
- "```sh\n",
- "cd test\n",
- "http-server ./ --cors -p 3000\n",
- "```"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {},
- "source": [
- "## 6. View on vitessce.io\n",
- "\n",
- "The returned view config dict can be converted to a URL, and if the files are served on the internet (rather than locally), this URL can be used to share the interactive visualizations with colleagues."
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": [
- "vitessce_url = \"http://vitessce.io/?url=data:,\" + quote_plus(json.dumps(config_dict))\n",
- "import webbrowser\n",
- "webbrowser.open(vitessce_url)"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": []
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": []
- }
- ],
- "metadata": {
- "kernelspec": {
- "display_name": "Python 3 (ipykernel)",
- "language": "python",
- "name": "python3"
- },
- "language_info": {
- "codemirror_mode": {
- "name": "ipython",
- "version": 3
- },
- "file_extension": ".py",
- "mimetype": "text/x-python",
- "name": "python",
- "nbconvert_exporter": "python",
- "pygments_lexer": "ipython3",
- "version": "3.8.0"
- }
- },
- "nbformat": 4,
- "nbformat_minor": 4
-}
diff --git a/docs/notebooks/data_export_files.mo.py b/docs/notebooks/data_export_files.mo.py
new file mode 100644
index 00000000..a3f3d968
--- /dev/null
+++ b/docs/notebooks/data_export_files.mo.py
@@ -0,0 +1,229 @@
+import marimo
+
+__generated_with = "0.13.15"
+app = marimo.App()
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ # Vitessce Data Preparation Tutorial
+ """
+ )
+ return
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ # Export data to local files
+ """
+ )
+ return
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ ## 1. Import dependencies
+
+ We need to import the classes and functions that we will be using from the corresponding packages.
+ """
+ )
+ return
+
+
+@app.cell
+def _():
+ import os
+ import json
+ from urllib.parse import quote_plus
+ from os.path import join, isfile, isdir
+ from urllib.request import urlretrieve
+ from anndata import read_h5ad
+ import scanpy as sc
+
+ from vitessce import (
+ VitessceWidget,
+ VitessceConfig,
+ Component as cm,
+ CoordinationType as ct,
+ AnnDataWrapper,
+ )
+ from vitessce.data_utils import (
+ optimize_adata,
+ VAR_CHUNK_SIZE,
+ )
+ return (
+ AnnDataWrapper,
+ VAR_CHUNK_SIZE,
+ VitessceConfig,
+ cm,
+ isdir,
+ isfile,
+ join,
+ json,
+ optimize_adata,
+ os,
+ quote_plus,
+ read_h5ad,
+ urlretrieve,
+ )
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ ## 2. Download and process data
+
+ For this example, we need to download a dataset from the COVID-19 Cell Atlas https://www.covid19cellatlas.org/index.healthy.html#habib17.
+ """
+ )
+ return
+
+
+@app.cell
+def _(isfile, join, os, read_h5ad, urlretrieve):
+ adata_filepath = join("data", "habib17.processed.h5ad")
+ if not isfile(adata_filepath):
+ os.makedirs("data", exist_ok=True)
+ urlretrieve('https://covid19.cog.sanger.ac.uk/habib17.processed.h5ad', adata_filepath)
+
+ adata = read_h5ad(adata_filepath)
+ top_dispersion = adata.var["dispersions_norm"][
+ sorted(
+ range(len(adata.var["dispersions_norm"])),
+ key=lambda k: adata.var["dispersions_norm"][k],
+ )[-51:][0]
+ ]
+ adata.var["top_highly_variable"] = (
+ adata.var["dispersions_norm"] > top_dispersion
+ )
+ return (adata,)
+
+
+@app.cell
+def _(VAR_CHUNK_SIZE, adata, isdir, join, optimize_adata):
+ zarr_filepath = join('data', 'habib17.processed.zarr')
+ if not isdir(zarr_filepath):
+ adata_1 = optimize_adata(adata, obs_cols=['CellType'], obsm_keys=['X_umap'], var_cols=['top_highly_variable'], optimize_X=True)
+ adata_1.write_zarr(zarr_filepath, chunks=[adata_1.shape[0], VAR_CHUNK_SIZE])
+ return (zarr_filepath,)
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ ## 3. Create the Vitessce configuration
+ """
+ )
+ return
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ Set up the configuration by adding the views and datasets of interest.
+ """
+ )
+ return
+
+
+@app.cell
+def _(AnnDataWrapper, VitessceConfig, cm, zarr_filepath):
+ vc = VitessceConfig(schema_version="1.0.15", name='Habib et al', description='COVID-19 Healthy Donor Brain')
+ dataset = vc.add_dataset(name='Brain').add_object(AnnDataWrapper(
+ adata_path=zarr_filepath,
+ obs_embedding_paths=["obsm/X_umap"],
+ obs_embedding_names=["UMAP"],
+ obs_set_paths=["obs/CellType"],
+ obs_set_names=["Cell Type"],
+ obs_feature_matrix_path="X",
+ feature_filter_path="var/top_highly_variable"
+ ))
+ scatterplot = vc.add_view(cm.SCATTERPLOT, dataset=dataset, mapping="X_umap")
+ cell_sets = vc.add_view(cm.OBS_SETS, dataset=dataset)
+ genes = vc.add_view(cm.FEATURE_LIST, dataset=dataset)
+ heatmap = vc.add_view(cm.HEATMAP, dataset=dataset)
+ vc.layout((scatterplot | (cell_sets / genes)) / heatmap);
+ return (vc,)
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ ## 4. Export files to a local directory
+
+ The `.export(to='files')` method on the view config instance will export files to the specified directory `out_dir`. The `base_url` parameter is required so that the file URLs in the view config point to the location where you ultimately intend to serve the files.
+ """
+ )
+ return
+
+
+@app.cell
+def _(vc):
+ config_dict = vc.export(to='files', base_url='http://localhost:3000', out_dir='./test')
+ return (config_dict,)
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ ## 5. Serve the files
+ """
+ )
+ return
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ Now that the files have been saved to the `./test` directory, they can be served by any static web server.
+
+ If you would like to serve the files locally, we recommend [http-server](https://github.com/http-party/http-server) which can be installed with NPM or Homebrew:
+ ```sh
+ cd test
+ http-server ./ --cors -p 3000
+ ```
+ """
+ )
+ return
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ ## 6. View on vitessce.io
+
+ The returned view config dict can be converted to a URL, and if the files are served on the internet (rather than locally), this URL can be used to share the interactive visualizations with colleagues.
+ """
+ )
+ return
+
+
+@app.cell
+def _(config_dict, json, quote_plus):
+ vitessce_url = "http://vitessce.io/?url=data:," + quote_plus(json.dumps(config_dict))
+ import webbrowser
+ webbrowser.open(vitessce_url)
+ return
+
+
+@app.cell
+def _():
+ import marimo as mo
+ return (mo,)
+
+
+if __name__ == "__main__":
+ app.run()
diff --git a/docs/notebooks/data_export_s3.ipynb b/docs/notebooks/data_export_s3.ipynb
deleted file mode 100644
index c84a0e43..00000000
--- a/docs/notebooks/data_export_s3.ipynb
+++ /dev/null
@@ -1,230 +0,0 @@
-{
- "cells": [
- {
- "cell_type": "markdown",
- "metadata": {
- "nbsphinx": "hidden"
- },
- "source": [
- "# Vitessce Data Preparation Tutorial"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {},
- "source": [
- "# Export data to AWS S3"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {},
- "source": [
- "## 1. Import dependencies\n",
- "\n",
- "We need to import the classes and functions that we will be using from the corresponding packages."
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": [
- "import os\n",
- "import boto3\n",
- "import json\n",
- "from urllib.parse import quote_plus\n",
- "from os.path import join, isfile, isdir\n",
- "from urllib.request import urlretrieve\n",
- "from anndata import read_h5ad\n",
- "import scanpy as sc\n",
- "\n",
- "from vitessce import (\n",
- " VitessceWidget,\n",
- " VitessceConfig,\n",
- " Component as cm,\n",
- " CoordinationType as ct,\n",
- " AnnDataWrapper,\n",
- ")\n",
- "from vitessce.data_utils import (\n",
- " optimize_adata,\n",
- " VAR_CHUNK_SIZE,\n",
- ")"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {},
- "source": [
- "## 2. Download and process data\n",
- "\n",
- "For this example, we need to download a dataset from the COVID-19 Cell Atlas https://www.covid19cellatlas.org/index.healthy.html#habib17."
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": [
- "adata_filepath = join(\"data\", \"habib17.processed.h5ad\")\n",
- "if not isfile(adata_filepath):\n",
- " os.makedirs(\"data\", exist_ok=True)\n",
- " urlretrieve('https://covid19.cog.sanger.ac.uk/habib17.processed.h5ad', adata_filepath)\n",
- "\n",
- "adata = read_h5ad(adata_filepath)\n",
- "top_dispersion = adata.var[\"dispersions_norm\"][\n",
- " sorted(\n",
- " range(len(adata.var[\"dispersions_norm\"])),\n",
- " key=lambda k: adata.var[\"dispersions_norm\"][k],\n",
- " )[-51:][0]\n",
- "]\n",
- "adata.var[\"top_highly_variable\"] = (\n",
- " adata.var[\"dispersions_norm\"] > top_dispersion\n",
- ")"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": [
- "zarr_filepath = join(\"data\", \"habib17.processed.zarr\")\n",
- "if not isdir(zarr_filepath):\n",
- " adata = optimize_adata(\n",
- " adata,\n",
- " obs_cols=[\"CellType\"],\n",
- " obsm_keys=[\"X_umap\"],\n",
- " var_cols=[\"top_highly_variable\"],\n",
- " optimize_X=True,\n",
- " )\n",
- " adata.write_zarr(zarr_filepath, chunks=[adata.shape[0], VAR_CHUNK_SIZE])"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {},
- "source": [
- "## 3. Create the Vitessce configuration"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {},
- "source": [
- "Set up the configuration by adding the views and datasets of interest."
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": [
- "vc = VitessceConfig(schema_version=\"1.0.15\", name='Habib et al', description='COVID-19 Healthy Donor Brain')\n",
- "dataset = vc.add_dataset(name='Brain').add_object(AnnDataWrapper(\n",
- " adata_path=zarr_filepath,\n",
- " obs_embedding_paths=[\"obsm/X_umap\"],\n",
- " obs_embedding_names=[\"UMAP\"],\n",
- " obs_set_paths=[\"obs/CellType\"],\n",
- " obs_set_names=[\"Cell Type\"],\n",
- " obs_feature_matrix_path=\"X\",\n",
- " feature_filter_path=\"var/top_highly_variable\"\n",
- "))\n",
- "scatterplot = vc.add_view(cm.SCATTERPLOT, dataset=dataset, mapping=\"UMAP\")\n",
- "cell_sets = vc.add_view(cm.OBS_SETS, dataset=dataset)\n",
- "genes = vc.add_view(cm.FEATURE_LIST, dataset=dataset)\n",
- "heatmap = vc.add_view(cm.HEATMAP, dataset=dataset)\n",
- "vc.layout((scatterplot | (cell_sets / genes)) / heatmap);"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {},
- "source": [
- "## 4. Create a `boto3` resource with S3 credentials"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": [
- "s3 = boto3.resource(\n",
- " service_name='s3',\n",
- " aws_access_key_id=os.environ['VITESSCE_S3_ACCESS_KEY_ID'],\n",
- " aws_secret_access_key=os.environ['VITESSCE_S3_SECRET_ACCESS_KEY'],\n",
- ")"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {},
- "source": [
- "## 5. Upload files to S3\n",
- "\n",
- "The `.export(to='S3')` method on the view config instance will upload all data objects to the specified bucket. Then, the processed view config will be returned as a `dict`, with the file URLs filled in, pointing to the S3 bucket files. For more information about configuring the S3 bucket so that files are accessible over the internet, visit the \"Hosting Data\" page of our core documentation site."
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": [
- "config_dict = vc.export(to='S3', s3=s3, bucket_name='vitessce-export-examples', prefix='test')"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {},
- "source": [
- "## 6. View on vitessce.io\n",
- "\n",
- "The returned view config dict can be converted to a URL, and can be used to share the interactive visualizations with colleagues."
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": [
- "vitessce_url = \"http://vitessce.io/?url=data:,\" + quote_plus(json.dumps(config_dict))\n",
- "import webbrowser\n",
- "webbrowser.open(vitessce_url)"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": []
- }
- ],
- "metadata": {
- "kernelspec": {
- "display_name": "Python 3 (ipykernel)",
- "language": "python",
- "name": "python3"
- },
- "language_info": {
- "codemirror_mode": {
- "name": "ipython",
- "version": 3
- },
- "file_extension": ".py",
- "mimetype": "text/x-python",
- "name": "python",
- "nbconvert_exporter": "python",
- "pygments_lexer": "ipython3",
- "version": "3.8.0"
- }
- },
- "nbformat": 4,
- "nbformat_minor": 4
-}
diff --git a/docs/notebooks/data_export_s3.mo.py b/docs/notebooks/data_export_s3.mo.py
new file mode 100644
index 00000000..189f3fc4
--- /dev/null
+++ b/docs/notebooks/data_export_s3.mo.py
@@ -0,0 +1,225 @@
+import marimo
+
+__generated_with = "0.13.15"
+app = marimo.App()
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ # Vitessce Data Preparation Tutorial
+ """
+ )
+ return
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ # Export data to AWS S3
+ """
+ )
+ return
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ ## 1. Import dependencies
+
+ We need to import the classes and functions that we will be using from the corresponding packages.
+ """
+ )
+ return
+
+
+@app.cell
+def _():
+ import os
+ import boto3
+ import json
+ from urllib.parse import quote_plus
+ from os.path import join, isfile, isdir
+ from urllib.request import urlretrieve
+ from anndata import read_h5ad
+ import scanpy as sc
+
+ from vitessce import (
+ VitessceWidget,
+ VitessceConfig,
+ Component as cm,
+ CoordinationType as ct,
+ AnnDataWrapper,
+ )
+ from vitessce.data_utils import (
+ optimize_adata,
+ VAR_CHUNK_SIZE,
+ )
+ return (
+ AnnDataWrapper,
+ VAR_CHUNK_SIZE,
+ VitessceConfig,
+ boto3,
+ cm,
+ isdir,
+ isfile,
+ join,
+ json,
+ optimize_adata,
+ os,
+ quote_plus,
+ read_h5ad,
+ urlretrieve,
+ )
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ ## 2. Download and process data
+
+ For this example, we need to download a dataset from the COVID-19 Cell Atlas https://www.covid19cellatlas.org/index.healthy.html#habib17.
+ """
+ )
+ return
+
+
+@app.cell
+def _(isfile, join, os, read_h5ad, urlretrieve):
+ adata_filepath = join("data", "habib17.processed.h5ad")
+ if not isfile(adata_filepath):
+ os.makedirs("data", exist_ok=True)
+ urlretrieve('https://covid19.cog.sanger.ac.uk/habib17.processed.h5ad', adata_filepath)
+
+ adata = read_h5ad(adata_filepath)
+ top_dispersion = adata.var["dispersions_norm"][
+ sorted(
+ range(len(adata.var["dispersions_norm"])),
+ key=lambda k: adata.var["dispersions_norm"][k],
+ )[-51:][0]
+ ]
+ adata.var["top_highly_variable"] = (
+ adata.var["dispersions_norm"] > top_dispersion
+ )
+ return (adata,)
+
+
+@app.cell
+def _(VAR_CHUNK_SIZE, adata, isdir, join, optimize_adata):
+ zarr_filepath = join('data', 'habib17.processed.zarr')
+ if not isdir(zarr_filepath):
+ adata_1 = optimize_adata(adata, obs_cols=['CellType'], obsm_keys=['X_umap'], var_cols=['top_highly_variable'], optimize_X=True)
+ adata_1.write_zarr(zarr_filepath, chunks=[adata_1.shape[0], VAR_CHUNK_SIZE])
+ return (zarr_filepath,)
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ ## 3. Create the Vitessce configuration
+ """
+ )
+ return
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ Set up the configuration by adding the views and datasets of interest.
+ """
+ )
+ return
+
+
+@app.cell
+def _(AnnDataWrapper, VitessceConfig, cm, zarr_filepath):
+ vc = VitessceConfig(schema_version="1.0.15", name='Habib et al', description='COVID-19 Healthy Donor Brain')
+ dataset = vc.add_dataset(name='Brain').add_object(AnnDataWrapper(
+ adata_path=zarr_filepath,
+ obs_embedding_paths=["obsm/X_umap"],
+ obs_embedding_names=["UMAP"],
+ obs_set_paths=["obs/CellType"],
+ obs_set_names=["Cell Type"],
+ obs_feature_matrix_path="X",
+ feature_filter_path="var/top_highly_variable"
+ ))
+ scatterplot = vc.add_view(cm.SCATTERPLOT, dataset=dataset, mapping="UMAP")
+ cell_sets = vc.add_view(cm.OBS_SETS, dataset=dataset)
+ genes = vc.add_view(cm.FEATURE_LIST, dataset=dataset)
+ heatmap = vc.add_view(cm.HEATMAP, dataset=dataset)
+ vc.layout((scatterplot | (cell_sets / genes)) / heatmap);
+ return (vc,)
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ ## 4. Create a `boto3` resource with S3 credentials
+ """
+ )
+ return
+
+
+@app.cell
+def _(boto3, os):
+ s3 = boto3.resource(
+ service_name='s3',
+ aws_access_key_id=os.environ['VITESSCE_S3_ACCESS_KEY_ID'],
+ aws_secret_access_key=os.environ['VITESSCE_S3_SECRET_ACCESS_KEY'],
+ )
+ return (s3,)
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ ## 5. Upload files to S3
+
+ The `.export(to='S3')` method on the view config instance will upload all data objects to the specified bucket. Then, the processed view config will be returned as a `dict`, with the file URLs filled in, pointing to the S3 bucket files. For more information about configuring the S3 bucket so that files are accessible over the internet, visit the "Hosting Data" page of our core documentation site.
+ """
+ )
+ return
+
+
+@app.cell
+def _(s3, vc):
+ config_dict = vc.export(to='S3', s3=s3, bucket_name='vitessce-export-examples', prefix='test')
+ return (config_dict,)
+
+
+@app.cell(hide_code=True)
+def _(mo):
+ mo.md(
+ r"""
+ ## 6. View on vitessce.io
+
+ The returned view config dict can be converted to a URL, and can be used to share the interactive visualizations with colleagues.
+ """
+ )
+ return
+
+
+@app.cell
+def _(config_dict, json, quote_plus):
+ vitessce_url = "http://vitessce.io/?url=data:," + quote_plus(json.dumps(config_dict))
+ import webbrowser
+ webbrowser.open(vitessce_url)
+ return
+
+
+@app.cell
+def _():
+ import marimo as mo
+ return (mo,)
+
+
+if __name__ == "__main__":
+ app.run()
diff --git a/docs/notebooks/page_mode_comparative.ipynb b/docs/notebooks/page_mode_comparative.ipynb
deleted file mode 100644
index 49607f86..00000000
--- a/docs/notebooks/page_mode_comparative.ipynb
+++ /dev/null
@@ -1,490 +0,0 @@
-{
- "cells": [
- {
- "cell_type": "markdown",
- "metadata": {
- "nbsphinx": "hidden"
- },
- "source": [
- "# Vitessce Widget Tutorial"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {},
- "source": [
- "# Visualization of ComparativeData object"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {},
- "source": [
- "## Configure Vitessce"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": [
- "from oxc_py import transform\n",
- "from vitessce import VitessceConfig, hconcat, vconcat"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {},
- "source": [
- "## Configure the data and views"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": [
- "# Reference: https://github.com/vitessce/vitessce/blob/main/examples/configs/src/view-configs/kpmp-premiere.js"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": [
- "base_url = 'https://storage.googleapis.com/vitessce-demo-data/kpmp-jan-2025/kpmp_premiere_20250330.adata.zarr'"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": [
- "vc = VitessceConfig(schema_version=\"1.0.17\", name='Lake et al.')\n",
- "\n",
- "dataset = vc.add_dataset('lake_et_al').add_file(\n",
- " file_type='comparisonMetadata.anndata.zarr',\n",
- " url=base_url,\n",
- " options={\n",
- " \"path\": 'uns/comparison_metadata',\n",
- " },\n",
- " coordination_values={\n",
- " \"obsType\": 'cell',\n",
- " \"sampleType\": 'sample',\n",
- " },\n",
- ").add_file(\n",
- " file_type='comparativeFeatureStats.anndata.zarr',\n",
- " url=base_url,\n",
- " options= {\n",
- " \"metadataPath\": 'uns/comparison_metadata',\n",
- " \"indexColumn\": 'names',\n",
- " \"pValueColumn\": 'pvals_adj',\n",
- " \"foldChangeColumn\": 'logfoldchanges',\n",
- " \"pValueAdjusted\": True,\n",
- " \"foldChangeTransformation\": 'log2',\n",
- " },\n",
- " coordination_values={\n",
- " \"obsType\": 'cell',\n",
- " \"sampleType\": 'sample',\n",
- " \"featureType\": 'gene',\n",
- " },\n",
- ").add_file(\n",
- " file_type= 'comparativeObsSetStats.anndata.zarr',\n",
- " url= base_url,\n",
- " options= {\n",
- " \"metadataPath\": 'uns/comparison_metadata',\n",
- " \"indexColumn\": 'Cell Type',\n",
- " \"interceptExpectedSampleColumn\": 'Expected Sample_intercept',\n",
- " \"effectExpectedSampleColumn\": 'Expected Sample_effect',\n",
- " \"foldChangeColumn\": 'log2-fold change',\n",
- " \"foldChangeTransformation\": 'log2',\n",
- " \"isCredibleEffectColumn\": 'is_credible_effect',\n",
- " },\n",
- " coordination_values= {\n",
- " \"obsType\": 'cell',\n",
- " \"sampleType\": 'sample',\n",
- " },\n",
- ").add_file(\n",
- " file_type='comparativeFeatureSetStats.anndata.zarr',\n",
- " url=base_url,\n",
- " options= {\n",
- " \"metadataPath\": 'uns/comparison_metadata',\n",
- " \"indexColumn\": 'pathway_name',\n",
- " \"termColumn\": 'pathway_term',\n",
- " \"pValueColumn\": 'pvals_adj',\n",
- " \"pValueAdjusted\": True,\n",
- " \"analysisType\": 'pertpy_hypergeometric',\n",
- " \"featureSetLibrary\": 'Reactome_2022',\n",
- " },\n",
- " coordination_values= {\n",
- " \"obsType\": 'cell',\n",
- " \"featureType\": 'gene',\n",
- " \"sampleType\": 'sample',\n",
- " },\n",
- ").add_file(\n",
- " file_type='anndata.zarr',\n",
- " url=base_url,\n",
- " coordination_values={\n",
- " \"obsType\": 'cell',\n",
- " \"featureType\": 'gene',\n",
- " \"featureValueType\": 'expression',\n",
- " \"sampleType\": 'sample',\n",
- " },\n",
- " options={\n",
- " \"obsFeatureMatrix\": {\n",
- " \"path\": 'layers/pearson_residuals',\n",
- " },\n",
- " \"obsEmbedding\": [\n",
- " {\n",
- " \"path\": 'obsm/X_densmap',\n",
- " \"embeddingType\": 'densMAP',\n",
- " },\n",
- " ],\n",
- " \"obsSets\": [\n",
- " {\n",
- " \"name\": 'Cell Type',\n",
- " \"path\": 'obs/cell_type',\n",
- " },\n",
- " {\n",
- " \"name\": 'Subclass L1',\n",
- " \"path\": 'obs/subclass_l1',\n",
- " },\n",
- " {\n",
- " \"name\": 'Subclass L2',\n",
- " \"path\": 'obs/subclass_l2',\n",
- " },\n",
- " {\n",
- " \"name\": 'Donor ID',\n",
- " \"path\": 'obs/donor_id',\n",
- " },\n",
- " ],\n",
- " \"sampleEdges\": {\n",
- " \"path\": 'obs/SampleID',\n",
- " },\n",
- " },\n",
- ").add_file(\n",
- " file_type='sampleSets.anndata.zarr',\n",
- " url=f\"{base_url}/uns/__all__.samples\",\n",
- " options={\n",
- " \"sampleSets\": [\n",
- " {\n",
- " \"name\": 'Disease Type',\n",
- " \"path\": 'diseasetype',\n",
- " },\n",
- " {\n",
- " \"name\": 'Adjudicated Category',\n",
- " \"path\": 'AdjudicatedCategory',\n",
- " },\n",
- " {\n",
- " \"name\": 'Enrollment Category',\n",
- " \"path\": 'EnrollmentCategory',\n",
- " },\n",
- " ],\n",
- " },\n",
- " coordination_values= {\n",
- " \"sampleType\": 'sample',\n",
- " },\n",
- ")\n",
- "\n",
- "biomarkerSelect = vc.add_view('biomarkerSelect', dataset=dataset, uid='biomarker-select')\n",
- "comparativeHeading = vc.add_view('comparativeHeading', dataset=dataset, uid='comparative-heading')\n",
- "dualScatterplot = vc.add_view('dualScatterplot', dataset=dataset, uid='scatterplot')\n",
- "obsSets = vc.add_view('obsSets', dataset=dataset, uid='cell-sets')\n",
- "sampleSets = vc.add_view('sampleSetPairManager', dataset=dataset, uid='sample-sets')\n",
- "obsSetSizes = vc.add_view('obsSetSizes', dataset=dataset)\n",
- "featureList = vc.add_view('featureList', dataset=dataset)\n",
- "violinPlots = vc.add_view('obsSetFeatureValueDistribution', dataset=dataset, uid='violin-plot')\n",
- "dotPlot = vc.add_view('dotPlot', dataset=dataset, uid='dot-plot')\n",
- "treemap = vc.add_view('treemap', dataset=dataset, uid='treemap')\n",
- "volcanoPlot = vc.add_view('volcanoPlot', dataset=dataset, uid='volcano-plot')\n",
- "volcanoPlotTable = vc.add_view('featureStatsTable', dataset=dataset, uid='volcano-plot-table')\n",
- "obsSetCompositionBarPlot = vc.add_view('obsSetCompositionBarPlot', dataset=dataset, uid='sccoda-plot')\n",
- "featureSetEnrichmentBarPlot = vc.add_view('featureSetEnrichmentBarPlot', dataset=dataset, uid='pathways-plot')\n",
- "\n",
- "[sampleSetScope_caseControl] = vc.add_coordination('sampleSetSelection')\n",
- "sampleSetScope_caseControl.set_value([['Disease Type', 'CKD'], ['Disease Type', 'Reference']])\n",
- "\n",
- "[featureSelectionScope] = vc.add_coordination('featureSelection')\n",
- "featureSelectionScope.set_value(['UMOD', 'NPHS2'])\n",
- "\n",
- "vc.link_views_by_dict([dualScatterplot], {\n",
- " \"embeddingType\": 'densMAP',\n",
- " \"embeddingContoursVisible\": True,\n",
- " \"embeddingPointsVisible\": False,\n",
- " \"embeddingObsSetLabelsVisible\": True,\n",
- "}, meta=False);\n",
- "\n",
- "\n",
- "vc.link_views([biomarkerSelect, dualScatterplot, obsSets, obsSetSizes, featureList, violinPlots, dotPlot, treemap, volcanoPlot, volcanoPlotTable, comparativeHeading, obsSetCompositionBarPlot, featureSetEnrichmentBarPlot, sampleSets], ['sampleType'], ['sample'])\n",
- "\n",
- "vc.link_views_by_dict([biomarkerSelect, dualScatterplot, obsSets, obsSetSizes, featureList, violinPlots, dotPlot, treemap, volcanoPlot, volcanoPlotTable, comparativeHeading, obsSetCompositionBarPlot, featureSetEnrichmentBarPlot, sampleSets], {\n",
- " \"sampleSetSelection\": sampleSetScope_caseControl,\n",
- " \"featureSelection\": featureSelectionScope,\n",
- "}, meta=False)\n",
- "\n",
- "vc.link_views_by_dict([dualScatterplot, violinPlots, featureList, dotPlot], {\n",
- " # \"featureSelection\": ['UMOD', 'NPHS2'], // , 'ENSG00000074803', 'ENSG00000164825'],\n",
- " \"obsColorEncoding\": 'geneSelection',\n",
- " \"featureValueColormap\": 'jet',\n",
- " \"featureValueColormapRange\": [0, 0.25],\n",
- " \"featureAggregationStrategy\": None,\n",
- "}, meta=False)\n",
- "\n",
- "vc.layout(hconcat(\n",
- " vconcat(dualScatterplot, biomarkerSelect, comparativeHeading, obsSets, obsSetSizes, featureList),\n",
- " vconcat(treemap, featureSetEnrichmentBarPlot, violinPlots, dotPlot, obsSetCompositionBarPlot, sampleSets),\n",
- " volcanoPlotTable,\n",
- "));"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "tags": []
- },
- "source": [
- "## Define the page layout"
- ]
- },
- {
- "cell_type": "code",
- "execution_count": null,
- "metadata": {},
- "outputs": [],
- "source": [
- "PAGE_ESM = transform(\"\"\"\n",
- "import clsx from \"https://unpkg.com/clsx@1.1.1/dist/clsx.m.js\";\n",
- "\n",
- "function createPage(utilsForPages) {\n",
- " const {\n",
- " React,\n",
- " usePageModeView,\n",
- " } = utilsForPages;\n",
- " function PageComponent(props) {\n",
- " const BiomarkerSelect = usePageModeView('biomarker-select');\n",
- " const ComparativeHeading = usePageModeView('comparative-heading');\n",
- " const CellSets = usePageModeView('cell-sets');\n",
- " const SampleSets = usePageModeView('sample-sets');\n",
- " const DualScatterplot = usePageModeView('scatterplot');\n",
- " const ViolinPlot = usePageModeView('violin-plot');\n",
- " const DotPlot = usePageModeView('dot-plot');\n",
- " const Treemap = usePageModeView('treemap');\n",
- " const VolcanoPlot = usePageModeView('volcano-plot');\n",
- " const VolcanoPlotTable = usePageModeView('volcano-plot-table');\n",
- " const SccodaPlot = usePageModeView('sccoda-plot');\n",
- " const PathwaysPlot = usePageModeView('pathways-plot');\n",
- "\n",
- " \n",
- " return (\n",
- " <>\n",
- " \n",
- " \n",
- "
\n",
- "
Comparative visualization of single-cell atlas data \n",
- " \n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This view contains a treemap visualization to communicate cell type composition in each of the selected sample groups.
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This view displays the results of a cell type composition analysis performed using the ScCODA algorithm (Büttner et al. 2021). Cell types with significantly different composition between the selected sample groups are displayed opaque while not-signficant results are displayed with transparent bars. The single outlined bar denotes the automatically-selected reference cell type.
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This view displays differential expression test results, performed using the rank_genes_groups function from Scanpy (Wolf et al. 2018) with method "wilcoxon".
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This view displays differential expression test results in tabular form. Click a row in the table to select the corresponding gene.
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This view displays gene set enrichment test results based on the differential expression results. Gene set enrichment tests have been performed using Reactome 2022 pathway gene sets from BlitzGSEA (Lachmann et al. 2022) via the hypergeometric function of Pertpy (Heumos et al. 2024).
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This view contains contour scatterplots which display the results of a density-preserving dimensionality reduction (Narayan et al. 2021). Contour opacities correspond to the shown percentile thresholds.
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This dot plot view displays gene expression values per cell type and sample group for the selected biomarkers.
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This violin plot view displays gene expression values per cell type and sample group for the selected biomarker.
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- " {/*
Neighborhood-level representations \n",
- "
TODO \n",
- "
Segmented instance-level representations \n",
- "
TODO \n",
- "
Image-level representations \n",
- "
TODO \n",
- "
Participant-level representations \n",
- "
TODO */}\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "\n",
- "
+
+
Comparative visualization of single-cell atlas data
+
+
+
+
+
+
+
+
This view contains a treemap visualization to communicate cell type composition in each of the selected sample groups.
+
+
+
+
+
+
+
This view displays the results of a cell type composition analysis performed using the ScCODA algorithm (Büttner et al. 2021). Cell types with significantly different composition between the selected sample groups are displayed opaque while not-signficant results are displayed with transparent bars. The single outlined bar denotes the automatically-selected reference cell type.
+
+
+
+
+
+
+
This view displays differential expression test results, performed using the rank_genes_groups function from Scanpy (Wolf et al. 2018) with method "wilcoxon".
+
+
+
+
+
+
+
This view displays differential expression test results in tabular form. Click a row in the table to select the corresponding gene.
+
+
+
+
+
+
+
This view displays gene set enrichment test results based on the differential expression results. Gene set enrichment tests have been performed using Reactome 2022 pathway gene sets from BlitzGSEA (Lachmann et al. 2022) via the hypergeometric function of Pertpy (Heumos et al. 2024).
+
+
+
+
+
+
This view contains contour scatterplots which display the results of a density-preserving dimensionality reduction (Narayan et al. 2021). Contour opacities correspond to the shown percentile thresholds.
+
+
+
+
+
+
+
This dot plot view displays gene expression values per cell type and sample group for the selected biomarkers.
+
+
+
+
+
+
+
This violin plot view displays gene expression values per cell type and sample group for the selected biomarker.
+
+
+
+
+ {/*
Neighborhood-level representations
+
TODO
+
Segmented instance-level representations
+
TODO
+
Image-level representations
+
TODO
+
Participant-level representations
+
TODO */}
+
+
+
+
\n",
- "
\n",
- "
This is an arbitrary HTML element with custom CSS \n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
Another HTML element \n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
+
+
This is an arbitrary HTML element with custom CSS
+
+
Another HTML element
+
+
+
+
+
+
\n",
- "
Chat view
\n",
- "
\n",
- " {chatHistory.map(message => (\n",
- "
\n",
- " {message.user} :\n",
- " {message.text} \n",
- "
\n",
- " ))}\n",
- "
\n",
- "
setNextMessage(e.target.value)} disabled={isLoading} />\n",
- "
Send message \n",
- "
+
Chat view
+
+ {chatHistory.map(message => (
+
+ {message.user} :
+ {message.text}
+
+ ))}
+
+
setNextMessage(e.target.value)} disabled={isLoading} />
+
Send message
+
\n",
+ "
\n",
+ "
Comparative visualization of single-cell atlas data \n",
+ " \n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This view contains a treemap visualization to communicate cell type composition in each of the selected sample groups.
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This view displays the results of a cell type composition analysis performed using the ScCODA algorithm (Büttner et al. 2021). Cell types with significantly different composition between the selected sample groups are displayed opaque while not-signficant results are displayed with transparent bars. The single outlined bar denotes the automatically-selected reference cell type.
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This view displays differential expression test results, performed using the rank_genes_groups function from Scanpy (Wolf et al. 2018) with method "wilcoxon".
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This view displays differential expression test results in tabular form. Click a row in the table to select the corresponding gene.
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This view displays gene set enrichment test results based on the differential expression results. Gene set enrichment tests have been performed using Reactome 2022 pathway gene sets from BlitzGSEA (Lachmann et al. 2022) via the hypergeometric function of Pertpy (Heumos et al. 2024).
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This view contains contour scatterplots which display the results of a density-preserving dimensionality reduction (Narayan et al. 2021). Contour opacities correspond to the shown percentile thresholds.
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This dot plot view displays gene expression values per cell type and sample group for the selected biomarkers.
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This violin plot view displays gene expression values per cell type and sample group for the selected biomarker.
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ " {/*
Neighborhood-level representations \n",
+ "
TODO \n",
+ "
Segmented instance-level representations \n",
+ "
TODO \n",
+ "
Image-level representations \n",
+ "
TODO \n",
+ "
Participant-level representations \n",
+ "
TODO */}\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "\n",
+ "
\n",
+ "
\n",
+ "
This is an arbitrary HTML element with custom CSS \n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
Another HTML element \n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
Chat view
\n",
+ "
\n",
+ " {chatHistory.map(message => (\n",
+ "
\n",
+ " {message.user} :\n",
+ " {message.text} \n",
+ "
\n",
+ " ))}\n",
+ "
\n",
+ "
setNextMessage(e.target.value)} disabled={isLoading} />\n",
+ "
Send message \n",
+ "
\n",
- "
\n",
- "
Comparative visualization of single-cell atlas data \n",
- " \n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This view contains a treemap visualization to communicate cell type composition in each of the selected sample groups.
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This view displays the results of a cell type composition analysis performed using the ScCODA algorithm (Büttner et al. 2021). Cell types with significantly different composition between the selected sample groups are displayed opaque while not-signficant results are displayed with transparent bars. The single outlined bar denotes the automatically-selected reference cell type.
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This view displays differential expression test results, performed using the rank_genes_groups function from Scanpy (Wolf et al. 2018) with method "wilcoxon".
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This view displays differential expression test results in tabular form. Click a row in the table to select the corresponding gene.
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This view displays gene set enrichment test results based on the differential expression results. Gene set enrichment tests have been performed using Reactome 2022 pathway gene sets from BlitzGSEA (Lachmann et al. 2022) via the hypergeometric function of Pertpy (Heumos et al. 2024).
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This view contains contour scatterplots which display the results of a density-preserving dimensionality reduction (Narayan et al. 2021). Contour opacities correspond to the shown percentile thresholds.
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This dot plot view displays gene expression values per cell type and sample group for the selected biomarkers.
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This violin plot view displays gene expression values per cell type and sample group for the selected biomarker.
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- " {/*
Neighborhood-level representations \n",
- "
TODO \n",
- "
Segmented instance-level representations \n",
- "
TODO \n",
- "
Image-level representations \n",
- "
TODO \n",
- "
Participant-level representations \n",
- "
TODO */}\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "\n",
- "
\n",
+ "
\n",
+ "
Comparative visualization of single-cell atlas data \n",
+ " \n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This view contains a treemap visualization to communicate cell type composition in each of the selected sample groups.
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This view displays the results of a cell type composition analysis performed using the ScCODA algorithm (Büttner et al. 2021). Cell types with significantly different composition between the selected sample groups are displayed opaque while not-signficant results are displayed with transparent bars. The single outlined bar denotes the automatically-selected reference cell type.
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This view displays differential expression test results, performed using the rank_genes_groups function from Scanpy (Wolf et al. 2018) with method "wilcoxon".
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This view displays differential expression test results in tabular form. Click a row in the table to select the corresponding gene.
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This view displays gene set enrichment test results based on the differential expression results. Gene set enrichment tests have been performed using Reactome 2022 pathway gene sets from BlitzGSEA (Lachmann et al. 2022) via the hypergeometric function of Pertpy (Heumos et al. 2024).
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This view contains contour scatterplots which display the results of a density-preserving dimensionality reduction (Narayan et al. 2021). Contour opacities correspond to the shown percentile thresholds.
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This dot plot view displays gene expression values per cell type and sample group for the selected biomarkers.
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This violin plot view displays gene expression values per cell type and sample group for the selected biomarker.
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ " {/*
Neighborhood-level representations \n",
+ "
TODO \n",
+ "
Segmented instance-level representations \n",
+ "
TODO \n",
+ "
Image-level representations \n",
+ "
TODO \n",
+ "
Participant-level representations \n",
+ "
TODO */}\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "\n",
+ "
\n",
+ "
\n",
+ "
Comparative visualization of single-cell atlas data \n",
+ " \n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This view contains a treemap visualization to communicate cell type composition in each of the selected sample groups.
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This view displays the results of a cell type composition analysis performed using the ScCODA algorithm (B\u00fcttner et al. 2021). Cell types with significantly different composition between the selected sample groups are displayed opaque while not-signficant results are displayed with transparent bars. The single outlined bar denotes the automatically-selected reference cell type.
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This view displays differential expression test results, performed using the rank_genes_groups function from Scanpy (Wolf et al. 2018) with method "wilcoxon".
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This view displays differential expression test results in tabular form. Click a row in the table to select the corresponding gene.
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This view displays gene set enrichment test results based on the differential expression results. Gene set enrichment tests have been performed using Reactome 2022 pathway gene sets from BlitzGSEA (Lachmann et al. 2022) via the hypergeometric function of Pertpy (Heumos et al. 2024).
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This view contains contour scatterplots which display the results of a density-preserving dimensionality reduction (Narayan et al. 2021). Contour opacities correspond to the shown percentile thresholds.
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This dot plot view displays gene expression values per cell type and sample group for the selected biomarkers.
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
This violin plot view displays gene expression values per cell type and sample group for the selected biomarker.
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ " {/*
Neighborhood-level representations \n",
+ "
TODO \n",
+ "
Segmented instance-level representations \n",
+ "
TODO \n",
+ "
Image-level representations \n",
+ "
TODO \n",
+ "
Participant-level representations \n",
+ "
TODO */}\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "\n",
+ "
\n",
- "
\n",
- "
Comparative visualization of single-cell atlas data \n",
- " \n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This view contains a treemap visualization to communicate cell type composition in each of the selected sample groups.
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This view displays the results of a cell type composition analysis performed using the ScCODA algorithm (Büttner et al. 2021). Cell types with significantly different composition between the selected sample groups are displayed opaque while not-signficant results are displayed with transparent bars. The single outlined bar denotes the automatically-selected reference cell type.
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This view displays differential expression test results, performed using the rank_genes_groups function from Scanpy (Wolf et al. 2018) with method "wilcoxon".
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This view displays differential expression test results in tabular form. Click a row in the table to select the corresponding gene.
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This view displays gene set enrichment test results based on the differential expression results. Gene set enrichment tests have been performed using Reactome 2022 pathway gene sets from BlitzGSEA (Lachmann et al. 2022) via the hypergeometric function of Pertpy (Heumos et al. 2024).
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This view contains contour scatterplots which display the results of a density-preserving dimensionality reduction (Narayan et al. 2021). Contour opacities correspond to the shown percentile thresholds.
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This dot plot view displays gene expression values per cell type and sample group for the selected biomarkers.
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
This violin plot view displays gene expression values per cell type and sample group for the selected biomarker.
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- " {/*
Neighborhood-level representations \n",
- "
TODO \n",
- "
Segmented instance-level representations \n",
- "
TODO \n",
- "
Image-level representations \n",
- "
TODO \n",
- "
Participant-level representations \n",
- "
TODO */}\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "\n",
- "
\n",
+ "
\n",
+ "
This is an arbitrary HTML element with custom CSS \n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
Another HTML element \n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
+ "
\n",
- "
\n",
- "
This is an arbitrary HTML element with custom CSS \n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
Another HTML element \n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
- "
\n",
+ "
Chat view
\n",
+ "
\n",
+ " {chatHistory.map(message => (\n",
+ "
\n",
+ " {message.user} :\n",
+ " {message.text} \n",
+ "
\n",
+ " ))}\n",
+ "
\n",
+ "
setNextMessage(e.target.value)} disabled={isLoading} />\n",
+ "
Send message \n",
+ "
\n",
- "
Chat view
\n",
- "
\n",
- " {chatHistory.map(message => (\n",
- "
\n",
- " {message.user} :\n",
- " {message.text} \n",
- "
\n",
- " ))}\n",
- "
\n",
- "
setNextMessage(e.target.value)} disabled={isLoading} />\n",
- "
Send message \n",
- "