Skip to content

Commit 8dafa7d

Browse files
keller-markkeller-mark
authored
page_mode and page_esm params (#355)
* page_mode and page_esm params * Update * Fix bug * Linting * Update js version * Add pagemode notebook * Update
1 parent 084b9bf commit 8dafa7d

File tree

3 files changed

+306
-15
lines changed

3 files changed

+306
-15
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/config.py‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -478,7 +478,7 @@ class VitessceConfigView:
478478
A class to represent a view (i.e. visualization component) in the Vitessce view config layout.
479479
"""
480480

481-
def __init__(self, component, coordination_scopes, x, y, w, h):
481+
def __init__(self, component, coordination_scopes, x, y, w, h, uid=None):
482482
"""
483483
Not meant to be instantiated directly, but instead created and returned by the ``VitessceConfig.add_view()`` method.
484484
@@ -498,14 +498,16 @@ def __init__(self, component, coordination_scopes, x, y, w, h):
498498
"w": w,
499499
"h": h
500500
}
501+
if uid is not None:
502+
self.view["uid"] = uid
501503

502504
def _to_py_params(self):
503505
params_dict = {
504506
"component": self.view["component"],
505507
"x": self.view["x"],
506508
"y": self.view["y"],
507509
"w": self.view["w"],
508-
"h": self.view["h"]
510+
"h": self.view["h"],
509511
}
510512
# Only include coordination_scopes if there are coordination scopes other than
511513
# the coorindation scope for the 'dataset' coordination type.
@@ -516,6 +518,8 @@ def _to_py_params(self):
516518
}
517519
if len(non_dataset_coordination_scopes) > 0:
518520
params_dict["coordination_scopes"] = non_dataset_coordination_scopes
521+
if "uid" in self.view:
522+
params_dict["uid"] = self.view["uid"]
519523
return params_dict
520524

521525
def get_coordination_scope(self, c_type):
@@ -1018,7 +1022,7 @@ def get_datasets(self):
10181022
"""
10191023
return self.config["datasets"]
10201024

1021-
def add_view(self, view_type, dataset=None, dataset_uid=None, x=0, y=0, w=1, h=1, mapping=None, coordination_scopes=None, props=None):
1025+
def add_view(self, view_type, dataset=None, dataset_uid=None, x=0, y=0, w=1, h=1, mapping=None, coordination_scopes=None, props=None, uid=None):
10221026
"""
10231027
Add a view to the config.
10241028
@@ -1086,7 +1090,7 @@ def add_view(self, view_type, dataset=None, dataset_uid=None, x=0, y=0, w=1, h=1
10861090
if coordination_scopes is not None:
10871091
internal_coordination_scopes.update(coordination_scopes)
10881092
vcv = VitessceConfigView(
1089-
component_str, internal_coordination_scopes, x, y, w, h)
1093+
component_str, internal_coordination_scopes, x, y, w, h, uid=uid)
10901094

10911095
# Use the mapping parameter if component is scatterplot and the mapping is not None
10921096
if mapping is not None:
@@ -1743,7 +1747,9 @@ def from_dict(config):
17431747
raise ValueError(
17441748
"Multiple datasets are present, so every view must have an explicit dataset coordination scope.")
17451749
new_view = VitessceConfigView(
1746-
c['component'], c_coord_scopes, c['x'], c['y'], c['w'], c['h'])
1750+
c['component'], c_coord_scopes, c['x'], c['y'], c['w'], c['h'],
1751+
uid=(c["uid"] if "uid" in c else None)
1752+
)
17471753
if 'props' in c.keys():
17481754
new_view.set_props(**c['props'])
17491755
vc.config['layout'].append(new_view)

0 commit comments

Comments
 (0)