Skip to content

Commit ae7be31

Browse files
keller-markkeller-mark
committed
Update page component
1 parent d93cad3 commit ae7be31

File tree

1 file changed

+135
-50
lines changed

1 file changed

+135
-50
lines changed

‎docs/notebooks/page_mode_comparative.ipynb‎

Lines changed: 135 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
},
2626
{
2727
"cell_type": "code",
28-
"execution_count": 1,
28+
"execution_count": null,
2929
"metadata": {},
3030
"outputs": [],
3131
"source": [
@@ -42,7 +42,7 @@
4242
},
4343
{
4444
"cell_type": "code",
45-
"execution_count": 2,
45+
"execution_count": null,
4646
"metadata": {},
4747
"outputs": [],
4848
"source": [
@@ -51,7 +51,7 @@
5151
},
5252
{
5353
"cell_type": "code",
54-
"execution_count": 3,
54+
"execution_count": null,
5555
"metadata": {},
5656
"outputs": [],
5757
"source": [
@@ -60,7 +60,7 @@
6060
},
6161
{
6262
"cell_type": "code",
63-
"execution_count": 4,
63+
"execution_count": null,
6464
"metadata": {},
6565
"outputs": [],
6666
"source": [
@@ -241,15 +241,6 @@
241241
"));"
242242
]
243243
},
244-
{
245-
"cell_type": "code",
246-
"execution_count": 5,
247-
"metadata": {},
248-
"outputs": [],
249-
"source": [
250-
"# vc.to_dict(base_url=\"\")"
251-
]
252-
},
253244
{
254245
"cell_type": "markdown",
255246
"metadata": {
@@ -261,23 +252,32 @@
261252
},
262253
{
263254
"cell_type": "code",
264-
"execution_count": 6,
255+
"execution_count": null,
265256
"metadata": {},
266257
"outputs": [],
267258
"source": [
268-
"# Reference: https://github.com/vitessce/vitessce/blob/main/examples/configs/src/view-configs/lake-2023.js\n",
269259
"PAGE_ESM = transform(\"\"\"\n",
260+
"import clsx from \"https://unpkg.com/[email protected]/dist/clsx.m.js\";\n",
261+
"\n",
270262
"function createPage(utilsForPages) {\n",
271263
" const {\n",
272264
" React,\n",
273265
" usePageModeView,\n",
274266
" } = utilsForPages;\n",
275267
" function PageComponent(props) {\n",
276268
" const BiomarkerSelect = usePageModeView('biomarker-select');\n",
277-
" const DualScatterplot = usePageModeView('scatterplot');\n",
269+
" const ComparativeHeading = usePageModeView('comparative-heading');\n",
278270
" const CellSets = usePageModeView('cell-sets');\n",
271+
" const SampleSets = usePageModeView('sample-sets');\n",
272+
" const DualScatterplot = usePageModeView('scatterplot');\n",
279273
" const ViolinPlot = usePageModeView('violin-plot');\n",
280274
" const DotPlot = usePageModeView('dot-plot');\n",
275+
" const Treemap = usePageModeView('treemap');\n",
276+
" const VolcanoPlot = usePageModeView('volcano-plot');\n",
277+
" const VolcanoPlotTable = usePageModeView('volcano-plot-table');\n",
278+
" const SccodaPlot = usePageModeView('sccoda-plot');\n",
279+
" const PathwaysPlot = usePageModeView('pathways-plot');\n",
280+
"\n",
281281
" \n",
282282
" return (\n",
283283
" <>\n",
@@ -294,36 +294,137 @@
294294
" h3 {\n",
295295
" font-size: 28px;\n",
296296
" }\n",
297+
" .stuck-comparative-heading {\n",
298+
" background-color: rgba(255, 255, 255, 0.7);\n",
299+
" }\n",
300+
" .stuck-comparative-heading h2 {\n",
301+
" font-size: 16px;\n",
302+
" }\n",
303+
" .stuck-comparative-heading h3 {\n",
304+
" font-size: 14px;\n",
305+
" }\n",
306+
" .view-row {\n",
307+
" width: 100%;\n",
308+
" display: flex;\n",
309+
" flex-direction: row;\n",
310+
" }\n",
311+
" .view-row-short {\n",
312+
" height: 300px;\n",
313+
" }\n",
314+
" .view-row-tall {\n",
315+
" height: 500px;\n",
316+
" }\n",
317+
" .view-row-left {\n",
318+
" width: ${(15 / 85) * 100}%;\n",
319+
" padding: 10px;\n",
320+
" }\n",
321+
" .view-row-left p {\n",
322+
" font-size: 12px;\n",
323+
" margin-top: 20px;\n",
324+
" }\n",
325+
" .view-row-center {\n",
326+
" width: ${(70 / 85) * 100}%;\n",
327+
" }\n",
328+
" .view-row-right > div {\n",
329+
" max-height: 50vh;\n",
330+
" }\n",
297331
" `}\n",
298332
" </style>\n",
299333
" <div style={{ width: '100%' }}>\n",
334+
" <div style={{ width: '70%', marginLeft: '15%' }}>\n",
300335
" <h1>Comparative visualization of single-cell atlas data</h1>\n",
301336
" <BiomarkerSelect />\n",
337+
" </div>\n",
302338
" </div>\n",
303339
"\n",
304340
" <div style={{ width: '100%', display: 'flex', flexDirection: 'row' }}>\n",
305-
" <div style={{ width: '100%'}}>\n",
306-
" <div style={{ width: '100%', display: 'flex', flexDirection: 'row' }}>\n",
307-
" <div style={{ width: '45%' }}><h2>Chronic Kidney Disease</h2></div>\n",
308-
" <div style={{ width: '5%' }}><h2 style={{ textAlign: 'right' }}>vs.&nbsp;</h2></div>\n",
309-
" <div style={{ width: '50%' }}><h2>Healthy Reference</h2></div>\n",
341+
" <div style={{ width: '85%' }}>\n",
342+
" <div style={{ width: `${(70 / 85) * 100}%`, marginLeft: `${(15 / 85) * 100}%` }}>\n",
343+
" <ComparativeHeading />\n",
310344
" </div>\n",
311-
" <h3>Cell type-level representations</h3>\n",
312-
" <div style={{ width: '100%', height: '500px' }}>\n",
313-
" <DualScatterplot />\n",
345+
" <div className={clsx('view-row', 'view-row-short')}>\n",
346+
" <div className=\"view-row-left\">\n",
347+
" <p>This view contains a treemap visualization to communicate cell type composition in each of the selected sample groups.</p>\n",
348+
" </div>\n",
349+
" <div className=\"view-row-center\">\n",
350+
" <Treemap />\n",
351+
" </div>\n",
314352
" </div>\n",
315-
" <div style={{ width: '100%', height: '500px' }}>\n",
316-
" <ViolinPlot />\n",
353+
" <div className={clsx('view-row', 'view-row-tall')}>\n",
354+
" <div className=\"view-row-left\">\n",
355+
" <p>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.</p>\n",
356+
" </div>\n",
357+
" <div className=\"view-row-center\">\n",
358+
" <SccodaPlot />\n",
359+
" </div>\n",
317360
" </div>\n",
318-
" <div style={{ width: '100%', height: '500px' }}>\n",
319-
" <DotPlot />\n",
361+
" <div className={clsx('view-row', 'view-row-tall')}>\n",
362+
" <div className=\"view-row-left\">\n",
363+
" <p>This view displays differential expression test results, performed using the rank_genes_groups function from Scanpy (Wolf et al. 2018) with method &quot;wilcoxon&quot;. <br /><br />The arrows on the bottom left and bottom right denote the direction of the effect. Click a point in the plot to select the corresponding gene. <br /><br />Note that differential expression tests have been run for each cell type separately, so the each gene can appear multiple times (once per cell type). If there are too many points on the plot, cell types can be selected to filter the points.</p>\n",
364+
" </div>\n",
365+
" <div className=\"view-row-center\">\n",
366+
" <VolcanoPlot />\n",
367+
" </div>\n",
320368
" </div>\n",
369+
" <div className={clsx('view-row', 'view-row-tall')}>\n",
370+
" <div className=\"view-row-left\">\n",
371+
" <p>This view displays differential expression test results in tabular form. Click a row in the table to select the corresponding gene.</p>\n",
372+
" </div>\n",
373+
" <div className=\"view-row-center\">\n",
374+
" <VolcanoPlotTable />\n",
375+
" </div>\n",
376+
" </div>\n",
377+
" <div className={clsx('view-row', 'view-row-tall')} style={{ height: '700px' }}>\n",
378+
" <div className=\"view-row-left\">\n",
379+
" <p>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).</p>\n",
380+
" </div>\n",
381+
" <div className=\"view-row-center\">\n",
382+
" <PathwaysPlot />\n",
383+
" </div>\n",
384+
" </div>\n",
385+
" <div className={clsx('view-row', 'view-row-tall')}>\n",
386+
" <div className=\"view-row-left\">\n",
387+
" <p>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.</p>\n",
388+
" </div>\n",
389+
" <div className=\"view-row-center\">\n",
390+
" <DualScatterplot />\n",
391+
" </div>\n",
392+
" </div>\n",
393+
" <div className={clsx('view-row', 'view-row-tall')}>\n",
394+
" <div className=\"view-row-left\">\n",
395+
" <p>This dot plot view displays gene expression values per cell type and sample group for the selected biomarkers.</p>\n",
396+
" </div>\n",
397+
" <div className=\"view-row-center\">\n",
398+
" <DotPlot />\n",
399+
" </div>\n",
400+
" </div>\n",
401+
" <div className={clsx('view-row', 'view-row-tall')}>\n",
402+
" <div className=\"view-row-left\">\n",
403+
" <p>This violin plot view displays gene expression values per cell type and sample group for the selected biomarker.</p>\n",
404+
" </div>\n",
405+
" <div className=\"view-row-center\">\n",
406+
" <ViolinPlot />\n",
407+
" </div>\n",
408+
" </div>\n",
409+
" {/* <h3>Neighborhood-level representations</h3>\n",
410+
" <h1>TODO</h1>\n",
411+
" <h3>Segmented instance-level representations</h3>\n",
412+
" <h1>TODO</h1>\n",
413+
" <h3>Image-level representations</h3>\n",
414+
" <h1>TODO</h1>\n",
415+
" <h3>Participant-level representations</h3>\n",
416+
" <h1>TODO</h1> */}\n",
321417
" </div>\n",
322-
" <div style={{ width: '14%', height: '500px', marginTop: '213px' }}>\n",
323-
" <CellSets />\n",
418+
" <div style={{ width: '14%', marginTop: '114px', marginBottom: '100px' }}>\n",
419+
" <div className=\"view-row-right\">\n",
420+
" <CellSets />\n",
421+
" </div>\n",
422+
" <div className=\"view-row-right\">\n",
423+
" <SampleSets />\n",
424+
" </div>\n",
324425
" </div>\n",
325-
" </div>\n",
326426
"\n",
427+
" </div>\n",
327428
" </>\n",
328429
" );\n",
329430
" }\n",
@@ -342,27 +443,11 @@
342443
},
343444
{
344445
"cell_type": "code",
345-
"execution_count": 7,
446+
"execution_count": null,
346447
"metadata": {},
347-
"outputs": [
348-
{
349-
"data": {
350-
"application/vnd.jupyter.widget-view+json": {
351-
"model_id": "408477a5c11747ba8e531f0d9c5cd596",
352-
"version_major": 2,
353-
"version_minor": 1
354-
},
355-
"text/plain": [
356-
"VitessceWidget(config={'version': '1.0.17', 'name': 'Lake et al.', 'description': '', 'datasets': [{'uid': 'A'…"
357-
]
358-
},
359-
"execution_count": 7,
360-
"metadata": {},
361-
"output_type": "execute_result"
362-
}
363-
],
448+
"outputs": [],
364449
"source": [
365-
"vw = vc.widget(page_esm=PAGE_ESM, page_mode=True, height=3000)\n",
450+
"vw = vc.widget(page_esm=PAGE_ESM, page_mode=True, height=4700)\n",
366451
"vw"
367452
]
368453
},

0 commit comments

Comments
 (0)