Skip to content

Commit edbefcd

Browse files
keller-markkeller-mark
committed
Add pagemode notebook
1 parent 85ec454 commit edbefcd

File tree

2 files changed

+219
-0
lines changed

2 files changed

+219
-0
lines changed

‎docs/notebooks/page_mode_example.ipynb‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
{
2+
"cells": [
3+
{
4+
"cell_type": "markdown",
5+
"metadata": {
6+
"nbsphinx": "hidden"
7+
},
8+
"source": [
9+
"# Vitessce Widget Tutorial"
10+
]
11+
},
12+
{
13+
"cell_type": "markdown",
14+
"metadata": {},
15+
"source": [
16+
"## Page mode example"
17+
]
18+
},
19+
{
20+
"cell_type": "markdown",
21+
"metadata": {},
22+
"source": [
23+
"## Configure Vitessce"
24+
]
25+
},
26+
{
27+
"cell_type": "code",
28+
"execution_count": null,
29+
"metadata": {},
30+
"outputs": [],
31+
"source": [
32+
"from vitessce import (\n",
33+
" VitessceConfig,\n",
34+
" Component as cm,\n",
35+
" CoordinationType as ct,\n",
36+
" AnnDataWrapper,\n",
37+
" CsvWrapper,\n",
38+
")\n",
39+
"from oxc_py import transform"
40+
]
41+
},
42+
{
43+
"cell_type": "markdown",
44+
"metadata": {},
45+
"source": [
46+
"## Configure the data and views"
47+
]
48+
},
49+
{
50+
"cell_type": "code",
51+
"execution_count": null,
52+
"metadata": {},
53+
"outputs": [],
54+
"source": [
55+
"url = 'https://storage.googleapis.com/vitessce-demo-data/anndata-test/pbmc3k_processed.zarr'"
56+
]
57+
},
58+
{
59+
"cell_type": "code",
60+
"execution_count": null,
61+
"metadata": {},
62+
"outputs": [],
63+
"source": [
64+
"vc = VitessceConfig(schema_version=\"1.0.17\", name='PBMC Reference')\n",
65+
"dataset = vc.add_dataset(name='PBMC 3k').add_object(\n",
66+
" AnnDataWrapper(\n",
67+
" adata_url=url,\n",
68+
" obs_set_paths=[\"obs/louvain\"],\n",
69+
" obs_set_names=[\"Louvain\"],\n",
70+
" obs_embedding_paths=[\"obsm/X_umap\", \"obsm/X_pca\"],\n",
71+
" obs_embedding_names=[\"UMAP\", \"PCA\"],\n",
72+
" obs_feature_matrix_path=\"X\"\n",
73+
" )\n",
74+
")\n",
75+
"\n",
76+
"umap = vc.add_view(cm.SCATTERPLOT, dataset=dataset, mapping=\"UMAP\", uid=\"scatterplot-umap\")\n",
77+
"pca = vc.add_view(cm.SCATTERPLOT, dataset=dataset, mapping=\"PCA\", uid=\"scatterplot-pca\")\n",
78+
"cell_sets = vc.add_view(cm.OBS_SETS, dataset=dataset, uid=\"cell-sets\")\n",
79+
"genes = vc.add_view(cm.FEATURE_LIST, dataset=dataset, uid=\"gene-list\")\n",
80+
"heatmap = vc.add_view(cm.HEATMAP, dataset=dataset, uid=\"heatmap\")\n",
81+
"\n",
82+
"vc.layout((umap / pca) | ((cell_sets | genes) / heatmap));"
83+
]
84+
},
85+
{
86+
"cell_type": "markdown",
87+
"metadata": {
88+
"tags": []
89+
},
90+
"source": [
91+
"## Define the page layout"
92+
]
93+
},
94+
{
95+
"cell_type": "code",
96+
"execution_count": null,
97+
"metadata": {},
98+
"outputs": [],
99+
"source": [
100+
"PAGE_ESM = transform(\"\"\"\n",
101+
"function createPage(utilsForPages) {\n",
102+
" const {\n",
103+
" React,\n",
104+
" usePageModeView,\n",
105+
" } = utilsForPages;\n",
106+
" function PageComponent(props) {\n",
107+
" const ScatterplotUmap = usePageModeView('scatterplot-umap');\n",
108+
" const ScatterplotPca = usePageModeView('scatterplot-pca');\n",
109+
" const CellSets = usePageModeView('cell-sets');\n",
110+
" const GeneList = usePageModeView('gene-list');\n",
111+
" const Heatmap = usePageModeView('heatmap');\n",
112+
" \n",
113+
" return (\n",
114+
" <>\n",
115+
" <style>{`\n",
116+
" h1, h2, h3, h4, h5, h6 {\n",
117+
" font-family: sans-serif;\n",
118+
" }\n",
119+
" h3 {\n",
120+
" font-size: 20px;\n",
121+
" }\n",
122+
" .fancy-heading {\n",
123+
" text-shadow: 1px 1px 2px pink;\n",
124+
" }\n",
125+
" `}\n",
126+
" </style>\n",
127+
" <div style={{ width: '100%', display: 'flex', flexDirection: 'row', background: 'lightblue' }}>\n",
128+
" <div style={{ width: '80%'}}>\n",
129+
" <h3 style={{ fontFamily: 'Courier New' }} className=\"fancy-heading\">This is an arbitrary HTML element with custom CSS</h3>\n",
130+
" <div style={{ width: '100%', height: '400px', display: 'flex', flexDirection: 'row' }}>\n",
131+
" <div style={{ width: '45%' }}>\n",
132+
" <ScatterplotUmap />\n",
133+
" </div>\n",
134+
" <div style={{ width: '45%', marginLeft: '5%' }}>\n",
135+
" <ScatterplotPca />\n",
136+
" </div>\n",
137+
" </div>\n",
138+
" <h3>Another HTML element</h3>\n",
139+
" <div style={{ width: '95%', height: '500px' }}>\n",
140+
" <Heatmap />\n",
141+
" </div>\n",
142+
" </div>\n",
143+
" <div style={{ width: '20%', height: '520px' }}>\n",
144+
" <CellSets />\n",
145+
" <GeneList />\n",
146+
" </div>\n",
147+
" </div>\n",
148+
"\n",
149+
" </>\n",
150+
" );\n",
151+
" }\n",
152+
" return PageComponent;\n",
153+
"}\n",
154+
"export default { createPage };\n",
155+
"\"\"\")"
156+
]
157+
},
158+
{
159+
"cell_type": "markdown",
160+
"metadata": {},
161+
"source": [
162+
"## Render page as widget"
163+
]
164+
},
165+
{
166+
"cell_type": "code",
167+
"execution_count": null,
168+
"metadata": {},
169+
"outputs": [],
170+
"source": [
171+
"vw = vc.widget(page_esm=PAGE_ESM, page_mode=True, height=1100)\n",
172+
"vw"
173+
]
174+
},
175+
{
176+
"cell_type": "code",
177+
"execution_count": null,
178+
"metadata": {},
179+
"outputs": [],
180+
"source": []
181+
},
182+
{
183+
"cell_type": "code",
184+
"execution_count": null,
185+
"metadata": {},
186+
"outputs": [],
187+
"source": []
188+
},
189+
{
190+
"cell_type": "code",
191+
"execution_count": null,
192+
"metadata": {},
193+
"outputs": [],
194+
"source": []
195+
}
196+
],
197+
"metadata": {
198+
"kernelspec": {
199+
"display_name": "Python 3 (ipykernel)",
200+
"language": "python",
201+
"name": "python3"
202+
},
203+
"language_info": {
204+
"codemirror_mode": {
205+
"name": "ipython",
206+
"version": 3
207+
},
208+
"file_extension": ".py",
209+
"mimetype": "text/x-python",
210+
"name": "python",
211+
"nbconvert_exporter": "python",
212+
"pygments_lexer": "ipython3",
213+
"version": "3.10.14"
214+
}
215+
},
216+
"nbformat": 4,
217+
"nbformat_minor": 4
218+
}

‎src/vitessce/widget.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -372,6 +372,7 @@ def get_uid_str(uid):
372372
URL.revokeObjectURL(pageEsmUrl);
373373
374374
const pageDeps = {
375+
React,
375376
usePageModeView,
376377
};
377378
PageComponent = await pageModule.createPage(pageDeps);

0 commit comments

Comments
 (0)