Datasets
Models
Diff of
/docs/interactive.html
[000000]
..
[413088]
Switch to side-by-side view
--- a +++ b/docs/interactive.html @@ -0,0 +1,676 @@ +<!DOCTYPE html> + +<html> + +<head> + +<meta charset="utf-8" /> +<meta name="generator" content="pandoc" /> +<meta http-equiv="X-UA-Compatible" content="IE=EDGE" /> + + + + +<title>Interactive</title> + +<script src="site_libs/header-attrs-2.29/header-attrs.js"></script> +<script src="site_libs/jquery-3.6.0/jquery-3.6.0.min.js"></script> +<meta name="viewport" content="width=device-width, initial-scale=1" /> +<link href="site_libs/bootstrap-3.3.5/css/flatly.min.css" rel="stylesheet" /> +<script src="site_libs/bootstrap-3.3.5/js/bootstrap.min.js"></script> +<script src="site_libs/bootstrap-3.3.5/shim/html5shiv.min.js"></script> +<script src="site_libs/bootstrap-3.3.5/shim/respond.min.js"></script> +<style>h1 {font-size: 34px;} + h1.title {font-size: 38px;} + h2 {font-size: 30px;} + h3 {font-size: 24px;} + h4 {font-size: 18px;} + h5 {font-size: 16px;} + h6 {font-size: 12px;} + code {color: inherit; background-color: rgba(0, 0, 0, 0.04);} + pre:not([class]) { background-color: white }</style> +<script src="site_libs/jqueryui-1.13.2/jquery-ui.min.js"></script> +<link href="site_libs/tocify-1.9.1/jquery.tocify.css" rel="stylesheet" /> +<script src="site_libs/tocify-1.9.1/jquery.tocify.js"></script> +<script src="site_libs/navigation-1.1/tabsets.js"></script> +<link href="site_libs/highlightjs-9.12.0/textmate.css" rel="stylesheet" /> +<script src="site_libs/highlightjs-9.12.0/highlight.js"></script> +<link href="site_libs/font-awesome-6.5.2/css/all.min.css" rel="stylesheet" /> +<link href="site_libs/font-awesome-6.5.2/css/v4-shims.min.css" rel="stylesheet" /> + +<style type="text/css"> + code{white-space: pre-wrap;} + span.smallcaps{font-variant: small-caps;} + span.underline{text-decoration: underline;} + div.column{display: inline-block; vertical-align: top; width: 50%;} + div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} + ul.task-list{list-style: none;} + </style> + +<style type="text/css">code{white-space: pre;}</style> +<script type="text/javascript"> +if (window.hljs) { + hljs.configure({languages: []}); + hljs.initHighlightingOnLoad(); + if (document.readyState && document.readyState === "complete") { + window.setTimeout(function() { hljs.initHighlighting(); }, 0); + } +} +</script> + + + + + + + + + +<style type = "text/css"> +.main-container { + max-width: 940px; + margin-left: auto; + margin-right: auto; +} +img { + max-width:100%; +} +.tabbed-pane { + padding-top: 12px; +} +.html-widget { + margin-bottom: 20px; +} +button.code-folding-btn:focus { + outline: none; +} +summary { + display: list-item; +} +details > summary > p:only-child { + display: inline; +} +pre code { + padding: 0; +} +</style> + + +<style type="text/css"> +.dropdown-submenu { + position: relative; +} +.dropdown-submenu>.dropdown-menu { + top: 0; + left: 100%; + margin-top: -6px; + margin-left: -1px; + border-radius: 0 6px 6px 6px; +} +.dropdown-submenu:hover>.dropdown-menu { + display: block; +} +.dropdown-submenu>a:after { + display: block; + content: " "; + float: right; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + border-width: 5px 0 5px 5px; + border-left-color: #cccccc; + margin-top: 5px; + margin-right: -10px; +} +.dropdown-submenu:hover>a:after { + border-left-color: #adb5bd; +} +.dropdown-submenu.pull-left { + float: none; +} +.dropdown-submenu.pull-left>.dropdown-menu { + left: -100%; + margin-left: 10px; + border-radius: 6px 0 6px 6px; +} +</style> + +<script type="text/javascript"> +// manage active state of menu based on current page +$(document).ready(function () { + // active menu anchor + href = window.location.pathname + href = href.substr(href.lastIndexOf('/') + 1) + if (href === "") + href = "index.html"; + var menuAnchor = $('a[href="' + href + '"]'); + + // mark the anchor link active (and if it's in a dropdown, also mark that active) + var dropdown = menuAnchor.closest('li.dropdown'); + if (window.bootstrap) { // Bootstrap 4+ + menuAnchor.addClass('active'); + dropdown.find('> .dropdown-toggle').addClass('active'); + } else { // Bootstrap 3 + menuAnchor.parent().addClass('active'); + dropdown.addClass('active'); + } + + // Navbar adjustments + var navHeight = $(".navbar").first().height() + 15; + var style = document.createElement('style'); + var pt = "padding-top: " + navHeight + "px; "; + var mt = "margin-top: -" + navHeight + "px; "; + var css = ""; + // offset scroll position for anchor links (for fixed navbar) + for (var i = 1; i <= 6; i++) { + css += ".section h" + i + "{ " + pt + mt + "}\n"; + } + style.innerHTML = "body {" + pt + "padding-bottom: 40px; }\n" + css; + document.head.appendChild(style); +}); +</script> + +<!-- tabsets --> + +<style type="text/css"> +.tabset-dropdown > .nav-tabs { + display: inline-table; + max-height: 500px; + min-height: 44px; + overflow-y: auto; + border: 1px solid #ddd; + border-radius: 4px; +} + +.tabset-dropdown > .nav-tabs > li.active:before, .tabset-dropdown > .nav-tabs.nav-tabs-open:before { + content: "\e259"; + font-family: 'Glyphicons Halflings'; + display: inline-block; + padding: 10px; + border-right: 1px solid #ddd; +} + +.tabset-dropdown > .nav-tabs.nav-tabs-open > li.active:before { + content: "\e258"; + font-family: 'Glyphicons Halflings'; + border: none; +} + +.tabset-dropdown > .nav-tabs > li.active { + display: block; +} + +.tabset-dropdown > .nav-tabs > li > a, +.tabset-dropdown > .nav-tabs > li > a:focus, +.tabset-dropdown > .nav-tabs > li > a:hover { + border: none; + display: inline-block; + border-radius: 4px; + background-color: transparent; +} + +.tabset-dropdown > .nav-tabs.nav-tabs-open > li { + display: block; + float: none; +} + +.tabset-dropdown > .nav-tabs > li { + display: none; +} +</style> + +<!-- code folding --> + + + +<style type="text/css"> + +#TOC { + margin: 25px 0px 20px 0px; +} +@media (max-width: 768px) { +#TOC { + position: relative; + width: 100%; +} +} + +@media print { +.toc-content { + /* see https://github.com/w3c/csswg-drafts/issues/4434 */ + float: right; +} +} + +.toc-content { + padding-left: 30px; + padding-right: 40px; +} + +div.main-container { + max-width: 1200px; +} + +div.tocify { + width: 20%; + max-width: 260px; + max-height: 85%; +} + +@media (min-width: 768px) and (max-width: 991px) { + div.tocify { + width: 25%; + } +} + +@media (max-width: 767px) { + div.tocify { + width: 100%; + max-width: none; + } +} + +.tocify ul, .tocify li { + line-height: 20px; +} + +.tocify-subheader .tocify-item { + font-size: 0.90em; +} + +.tocify .list-group-item { + border-radius: 0px; +} + +.tocify-subheader { + display: inline; +} +.tocify-subheader .tocify-item { + font-size: 0.95em; +} + +</style> + + + +</head> + +<body> + + +<div class="container-fluid main-container"> + + +<!-- setup 3col/9col grid for toc_float and main content --> +<div class="row"> +<div class="col-xs-12 col-sm-4 col-md-3"> +<div id="TOC" class="tocify"> +</div> +</div> + +<div class="toc-content col-xs-12 col-sm-8 col-md-9"> + + + + +<div class="navbar navbar-default navbar-fixed-top" role="navigation"> + <div class="container"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-bs-toggle="collapse" data-target="#navbar" data-bs-target="#navbar"> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="index.html">VoltRon</a> + </div> + <div id="navbar" class="navbar-collapse collapse"> + <ul class="nav navbar-nav"> + <li> + <a href="tutorials.html">Explore</a> +</li> +<li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> + Vignette + + <span class="caret"></span> + </a> + <ul class="dropdown-menu" role="menu"> + <li class="dropdown-submenu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Spatial Data Integration</a> + <ul class="dropdown-menu" role="menu"> + <li> + <a href="registration.html">Spatial Data Alignment</a> + </li> + <li> + <a href="multiomic.html">Multi-omic Integration</a> + </li> + <li> + <a href="nicheclustering.html">Niche Clustering</a> + </li> + </ul> + </li> + <li class="dropdown-submenu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Downstream Analysis</a> + <ul class="dropdown-menu" role="menu"> + <li> + <a href="roianalysis.html">ROI Analysis</a> + </li> + <li> + <a href="spotanalysis.html">Cell/Spot Analysis</a> + </li> + <li> + <a href="moleculeanalysis.html">Molecule Analysis</a> + </li> + <li> + <a href="pixelanalysis.html">Pixels (Image Only) Analysis</a> + </li> + </ul> + </li> + <li class="dropdown-submenu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Utilities</a> + <ul class="dropdown-menu" role="menu"> + <li> + <a href="interactive.html">Interactive Utilities</a> + </li> + <li> + <a href="importingdata.html">Importing Spatial Data</a> + </li> + <li> + <a href="voltronobjects.html">Working with VoltRon Objects</a> + </li> + <li> + <a href="conversion.html">Converting VoltRon Objects</a> + </li> + <li> + <a href="ondisk.html">OnDisk-based Analysis Utilities</a> + </li> + </ul> + </li> + </ul> +</li> + </ul> + <ul class="nav navbar-nav navbar-right"> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> + <span class="fa fa-envelope-o"></span> + + Contact + + <span class="caret"></span> + </a> + <ul class="dropdown-menu" role="menu"> + <li> + <a href="https://bioinformatics.mdc-berlin.de">Altuna Lab/BIMSB Bioinfo</a> + </li> + <li> + <a href="https://www.mdc-berlin.de/landthaler">Landthaler Lab/BIMSB</a> + </li> + </ul> +</li> +<li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> + <span class="fa fa-github"></span> + + GitHub + + <span class="caret"></span> + </a> + <ul class="dropdown-menu" role="menu"> + <li> + <a href="https://github.com/BIMSBbioinfo/VoltRon">VoltRon</a> + </li> + <li> + <a href="https://github.com/BIMSBbioinfo">BIMSB Bioinfo</a> + </li> + </ul> +</li> + </ul> + </div><!--/.nav-collapse --> + </div><!--/.container --> +</div><!--/.navbar --> + +<div id="header"> + + + +<h1 class="title toc-ignore">Interactive</h1> + +</div> + + +<style> +.title{ + display: none; +} +body { + text-align: justify +} +.center { + display: block; + margin-left: auto; + margin-right: auto; +} +</style> +<style type="text/css"> +.watch-out { + color: black; +} +</style> +<p><br></p> +<div id="interactive-annotation" class="section level1"> +<h1>Interactive Annotation</h1> +<p><strong>VoltRon</strong> includes interactive applications to select +and manually label spatial points by drawing polygons and circles. As an +example, we will use a Spot-based spatial transcriptomic assay, +specifically the <strong>Mouse Brain Serial Section 1/2</strong> +datasets, analyzed in the <a href="nicheclustering.html">Niche +Clustering</a> tutorial. You can find the already analyzed data stored +as a VoltRon object <a +href="https://bimsbstatic.mdc-berlin.de/landthaler/VoltRon/NicheClustering/Visium&Visium_data_decon_analyzed.rds">here</a></p> +<pre class="r watch-out"><code>MBrain_Sec <- readRDS("Visium&Visium_data_decon_analyzed.rds")</code></pre> +<p>We can start annotating the spatial assay. By passing arguments used +by the <strong>vrSpatialPlot</strong> function to visualize labels +(e.g. clusters), we can better select regions within tissue sections for +annotation.</p> +<pre class="r watch-out"><code>MBrain_Sec <- annotateSpatialData(MBrain_Sec, assay = "Assay1", + group.by = "clusters", label = "annotation")</code></pre> +<p><img width="100%" height="100%" src="https://bimsbstatic.mdc-berlin.de/landthaler/VoltRon/Package/images/interactive_annotation.png" class="center"></p> +<p><br></p> +<p>Here, <strong>annotateSpatialData</strong> function not only labels +spots with within regions of interests (ROIs) selected by the user, but +also records these regions in ROI assays within the same layer of the +annotated Visium assay. The new assay type will be given the name +<strong>ROIAnnotations</strong> if otherwise not specified using the +<strong>annotation_assay</strong> arguement in the function.</p> +<pre class="r watch-out"><code>MBrain_Sec </code></pre> +<pre><code>VoltRon Object +Anterior: + Layers: Section1 Section2 +Posterior: + Layers: Section1 Section2 +Assays: Visium_decon(Main) Visium ROIAnnotation </code></pre> +<pre class="r watch-out"><code>MBrain_Sec@sample.metadata </code></pre> +<pre><code>> MBrain_Sec@sample.metadata + Assay Layer Sample +Assay1 Visium Section1 Anterior +Assay2 Visium Section2 Anterior +Assay3 Visium Section1 Posterior +Assay4 Visium Section2 Posterior +Assay5 ROIAnnotation Section1 Anterior</code></pre> +<p>The new annotations are available in the metadata of the spot assay +(default assay in this object) and can be visualized if wanted.</p> +<pre class="r watch-out"><code>head(Metadata(MBrain_Sec))</code></pre> +<pre><code> Count Assay Layer Sample clusters annotation +AAACAAGTATCTCCCA-1_Assay1 1 Visium_decon Section1 Anterior 1 Region 3 +AAACACCAATAACTGC-1_Assay1 1 Visium_decon Section1 Anterior 3 undefined +AAACAGAGCGACTCCT-1_Assay1 1 Visium_decon Section1 Anterior 4 undefined +AAACAGCTTTCAGAAG-1_Assay1 1 Visium_decon Section1 Anterior 5 Region 1 +AAACAGGGTCTATATT-1_Assay1 1 Visium_decon Section1 Anterior 5 Region 1 +AAACATGGTGAGAGGA-1_Assay1 1 Visium_decon Section1 Anterior 3 undefined</code></pre> +<pre class="r watch-out"><code>vrSpatialPlot(MBrain_Sec, assay = "Assay1", group.by = "annotation")</code></pre> +<p><img width="80%" height="80%" src="https://bimsbstatic.mdc-berlin.de/landthaler/VoltRon/Package/images/interactive_annotation_plot.png" class="center"></p> +<p><br></p> +<p>You can also overlay the ROI annotations with the clustered spots to +visualize multiple assays in the same time.</p> +<pre class="r watch-out"><code>library(ggnewscale) +vrSpatialPlot(MBrain_Sec, assay = "Assay1", group.by = "clusters") |> + addSpatialLayer(MBrain_Sec, assay = "Assay5", group.by = "annotation", alpha = 0.7)</code></pre> +<p><img width="80%" height="80%" src="https://bimsbstatic.mdc-berlin.de/landthaler/VoltRon/Package/images/interactive_annotation_example_overlay_plot.png" class="center"></p> +<p><br></p> +</div> +<div id="interactive-visualization" class="section level1"> +<h1>Interactive Visualization</h1> +<p>VoltRon incorporates utilities</p> +<ul> +<li><strong>(i)</strong> to convert VoltRon objects into other spatial +data objects and files that could be used platforms, and</li> +<li><strong>(ii)</strong> to incorporate wrapper functions to call +methods from package that achieves interactive visualization</li> +</ul> +<p><br></p> +<div id="vitessce" class="section level2"> +<h2>Vitessce</h2> +<p>We will transform VoltRon objects of Xenium data into zarr arrays, +and use them for interactive visualization in <a +href="http://vitessce.io/">Vitessce</a>. We should first download the +vitessceR package which incorporates wrapper function to visualize zarr +arrays interactively in R.</p> +<pre class="r watch-out"><code>if (!require("devtools", quietly = TRUE)) + install.packages("devtools") +if (!require("vitessceR", quietly = TRUE)) + devtools::install_github("Artur-man/vitessceR")</code></pre> +<p>We can convert the VoltRon object into an anndata object and save it +as a a zarr array using the <strong>as.AnnData</strong> function which +will create the array in the specified location. We use the +<strong>flip_coordinates=TRUE</strong> argument to flip the coordinates +of cells vertically, hence match it with the top to bottom system of the +background DAPI image. Also, we can save an OMETIFF file of the DAPI +image using <strong>create.ometiff</strong> arguement to be used by +vitessceR later.</p> +<pre class="r watch-out"><code>xenium_data <- as.AnnData(xenium_data, file = "xenium_data.zarr", assay = "Xenium", + flip_coordinates = TRUE, create.ometiff = TRUE)</code></pre> +<p><br></p> +<p>We can use the zarr file directly in the +<strong>vrSpatialPlot</strong> function to visualize the zarr array +interactively in Rstudio viewer. The <strong>reduction</strong> +arguement allows the umap of the Xenium data to be visualized alongside +with the spatial coordinates of the Xenium cells (thus associated cell +segmentations).</p> +<pre class="r watch-out"><code>vrSpatialPlot("xenium_data.zarr", group.by = "clusters", reduction = "umap")</code></pre> +<p><img width="90%" height="90%" src="https://bimsbstatic.mdc-berlin.de/landthaler/VoltRon/Package/images/interactive_vitessce.png" class="center"></p> +<p><br></p> +<p>The vitessce application in the viewer pane allows visualizing +background DAPI image and segmentations simultaneously while allowing +users to zoom in and control the pane for advanced visualization.</p> +<p><img width="90%" height="90%" src="https://bimsbstatic.mdc-berlin.de/landthaler/VoltRon/Package/images/interactive_vitessce_zoom.png" class="center"></p> +<p><br></p> +</div> +<div id="tissuumaps" class="section level2"> +<h2>TissUUmaps</h2> +<p>To use <strong>TissUUmaps</strong> for interactive investigation of +your spatial omic data, we first need to convert the VoltRon object into +an anndata object. However, this time we save the anndata object as an +h5ad array using again the <strong>as.AnnData</strong> function which +will create the array in the specified location. We use the +<strong>flip_coordinates=TRUE</strong> argument to flip the coordinates +of cells vertically, hence match it with the top to bottom system of the +background DAPI image.</p> +<pre class="r watch-out"><code>as.AnnData(xenium_data, file = "xenium_data.h5ad", assay = "Xenium", flip_coordinates = TRUE)</code></pre> +<p>To use <strong>TissUUmaps</strong>, you can follow the instructions +<a href="https://tissuumaps.github.io/installation/">here</a>. Once +installed and executed, simply drag and drop the h5ad file to the main +panel of the application</p> +<p><img width="100%" height="100%" src="https://bimsbstatic.mdc-berlin.de/landthaler/VoltRon/Package/images/interactive_tissuumaps.png" class="center"></p> +<p><br></p> +</div> +<div id="voltron" class="section level2"> +<h2>VoltRon</h2> +<p>You can also use the built-in Shiny-based interactive visualizers of +the VoltRon package by calling <strong>interactive=TRUE</strong>. You +can zoom in by drawing a box on the plot and double-clicking in the +selected area.</p> +<pre class="r watch-out"><code>vrSpatialPlot(xenium_data, group.by = "clusters", plot.segments = TRUE, interactive = TRUE)</code></pre> +<p><img width="85%" height="85%" src="https://bimsbstatic.mdc-berlin.de/landthaler/VoltRon/Package/images/interactive_voltron.png" class="center"></p> +<p><br></p> +</div> +</div> + + + +</div> +</div> + +</div> + +<script> + +// add bootstrap table styles to pandoc tables +function bootstrapStylePandocTables() { + $('tr.odd').parent('tbody').parent('table').addClass('table table-condensed'); +} +$(document).ready(function () { + bootstrapStylePandocTables(); +}); + + +</script> + +<!-- tabsets --> + +<script> +$(document).ready(function () { + window.buildTabsets("TOC"); +}); + +$(document).ready(function () { + $('.tabset-dropdown > .nav-tabs > li').click(function () { + $(this).parent().toggleClass('nav-tabs-open'); + }); +}); +</script> + +<!-- code folding --> + +<script> +$(document).ready(function () { + + // temporarily add toc-ignore selector to headers for the consistency with Pandoc + $('.unlisted.unnumbered').addClass('toc-ignore') + + // move toc-ignore selectors from section div to header + $('div.section.toc-ignore') + .removeClass('toc-ignore') + .children('h1,h2,h3,h4,h5').addClass('toc-ignore'); + + // establish options + var options = { + selectors: "h1,h2,h3", + theme: "bootstrap3", + context: '.toc-content', + hashGenerator: function (text) { + return text.replace(/[.\\/?&!#<>]/g, '').replace(/\s/g, '_'); + }, + ignoreSelector: ".toc-ignore", + scrollTo: 0 + }; + options.showAndHide = false; + options.smoothScroll = false; + + // tocify + var toc = $("#TOC").tocify(options).data("toc-tocify"); +}); +</script> + +<!-- dynamically load mathjax for compatibility with self-contained --> +<script> + (function () { + var script = document.createElement("script"); + script.type = "text/javascript"; + script.src = "https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"; + document.getElementsByTagName("head")[0].appendChild(script); + })(); +</script> + +</body> +</html>