Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
135 changes: 98 additions & 37 deletions 02_approach.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,28 @@ numbering:
---

Already adopted by some clinicians and educators, virtual microscopy could also benefit researchers as an interface for communicating and interpreting image data.
Indeed, interactive microscopy maps were first proposed for this purpose — as an unbiased way to present electron microscopy data [@doi:10.1083/jcb.201201140].
Free and open-source solutions [@doi:10.1242/jcs.262198] and recent advances in file formats [@doi:10.1007/s00418-023-02209-1] now make this feasible, yet these tools have not been used in scientific publishing.
Our approach combined automated image acquisition, multi-scale [pyramid](<wiki:Pyramid_(image_processing)>) formats and embedded interactive viewers ([](#abstract)).
Indeed, interactive microscopy maps were proposed as an unbiased way to present electron microscopy data [@doi:10.1083/jcb.201201140].
Free and open-source solutions [@doi:10.1242/jcs.262198] and recent advances in file formats [@doi:10.1007/s00418-023-02209-1] now make this feasible, yet virtual microscopy remains rare in scientific publishing.
Most journals publish articles as static pages that cannot run code, so interactive figures must be provided as links to external pages.
Even [Elsevier's Virtual Microscope](https://www-prod.elsevier.com/researcher/author/tools-and-resources/data-visualization/virtual-microscope) is opened from links in figure captions.
To our knowledge, Elemental Microscopy is among the first journals that allows interactive viewers to be embedded directly within the article, so each figure is a live view of the full-resolution dataset rather than a static rendering.
Here we describe a workflow for this kind of virtual microscopy: datasets are acquired automatically, converted to multi-scale [pyramid](<wiki:Pyramid_(image_processing)>) formats, hosted in the cloud, and streamed to viewers embedded in an article ([](#abstract)).

```{figure} ./figures/Virtual_microscopy.png
:label: abstract
Virtual microscopy. 1. Automated dataset collection with any suitable microscope. ZDC: Z-drift compensation. 2. Stitch tiles then convert the image to DZI or OME-Zarr, host online. 3. Image tiles or data chunks are retrieved from cloud storage as readers interact with microscopy maps.
```

Elemental Microscopy supports two interactive viewers; [Vizarr](https://github.com/hms-dbmi/vizarr) [@doi:10.1038/s41592-022-01482-7] and [OpenSeadragon](https://openseadragon.github.io/), enabling two methods of virtual microscopy based on OME-Zarr or Deep Zoom.
Authors can also build custom viewers and embed them within online articles.
Brodrick developed [microATLAS](https://github.com/LadInTheLab/microATLAS-widget), which was used to view OME-Zarr data in this article.
All three viewers are readily embeddable in Elemental Microscopy.
For Vizarr and OpenSeadragon, authors simply copy the markdown and replace the source URL with a link to their own data.
For microATLAS, authors are encouraged to use the [widget builder](https://ladinthelab.github.io/microATLAS-widget/builder.html) to generate embedding code that specifies both the image and relevant customizations.
Elemental Microscopy natively supports two interactive viewers; [Vizarr](https://github.com/hms-dbmi/vizarr) [@doi:10.1038/s41592-022-01482-7] and [OpenSeadragon](https://openseadragon.github.io/), which enable virtual microscopy of OME-Zarr and Deep Zoom images.
Authors can also build custom viewers.
Brodrick developed [microATLAS](https://github.com/LadInTheLab/microATLAS-widget) to present the multiplexed immunofluorescence OME-Zarr datasets in this article, and its [widget builder](https://ladinthelab.github.io/microATLAS-widget/builder.html) generates embedding code that specifies both the image and its display settings.
We also collaborated with the developers of [Find Nuclei](https://www.find-nuclei.com/), a browser-based dashboard for OME-Zarr datasets, so that its toolbar generates MyST code for embedding the viewer in Elemental Microscopy articles [@FindNuclei2026].

The four figures below are interactive microscopy maps for readers to try, each using the same dataset: a mosaic of roughly one million nucleus images [@doi:10.5281/zenodo.18776682].
This data was not analyzed in this article; it was included only to show how each viewer handles a very large image.
Three figures stream OME-Zarr data from cloud object storage to Vizarr, microATLAS and Find Nuclei, while the fourth streams a smaller Deep Zoom (DZI) subset from GitHub Pages to OpenSeadragon.
Each viewer is embedded with a single MyST directive, shown below its figure.
For Vizarr and OpenSeadragon, authors replace the source URL with a link to their own data, while microATLAS and Find Nuclei generate the embedding code, so adding an interactive figure amounts to pasting a block of markup.

## OME-Zarr

Expand All @@ -30,45 +37,99 @@ As an advanced implementation of microscopy maps [@doi:10.1242/jcs.262198], pyra

### Vizarr

```{iframe} https://hms-dbmi.github.io/vizarr/?source=https://nyu1.osn.mghpcc.org/barkley-replication/nuclei_mosaic.zarr&viewState={%22target%22:[124547.79378129813,32310.74580437236],%22zoom%22:-3.8361114954494266}
:width: 100%
```

```{code} markdown
:label: vizarr_code
:caption: Minimal markdown to embed Vizarr in Elemental Microscopy. Replace the source with your data.
:caption: Example markdown to embed Vizarr. Replace the source with your data.
:::{any:bundle} https://curvenote.github.io/widgets/widgets/vizarr-viewer.js
{
"source": "https://your-bucket.s3.amazonaws.com/sample.zarr/",
"source": "https://nyu1.osn.mghpcc.org/barkley-replication/nuclei_mosaic.zarr",
"height": "600px"
}
:::
```

### microATLAS

```{code} markdown
:label: microatlas_code
:caption: Example markdown to embed microATLAS in Elemental Microscopy. Create your own with the [builder](https://ladinthelab.github.io/microATLAS-widget/builder.html).
:::{any:bundle} https://ladinthelab.github.io/microATLAS-widget/widget.js
:::{any:bundle} https://LadInTheLab.github.io/microATLAS-widget/widget.js
{
"source": "https://your-bucket.s3.amazonaws.com/sample.zarr/",
"source": "https://nyu1.osn.mghpcc.org/barkley-replication/nuclei_mosaic.zarr",
"width": "600px",
"height": "600px",
"views": [
{
"name": "Overview",
"zoom": -4,
"target": [4886, 4886, 0]
"name": "inferno",
"zoom": -2.866,
"target": [
137103,
166506,
0
],
"appearance": {
"channelsVisible": [
true
],
"channelColors": [
[
255,
255,
255
]
],
"contrastLimits": [
[
0,
255
]
],
"blendMode": "merged",
"colormap": "inferno"
},
"default": true
}
],
"annotations": [
{ "name": "Region A", "target": [2400, 2400], "color": [100, 200, 255] }
],
"scaleBar": { "maxWidth": 120, "position": "bottom-right" }
]
}
:::

```{code} markdown
:label: microatlas_code
:caption: Example markdown to embed microATLAS. Create your own with the [builder](https://ladinthelab.github.io/microATLAS-widget/builder.html).
:::{any:bundle} https://LadInTheLab.github.io/microATLAS-widget/widget.js
{
"source": "https://nyu1.osn.mghpcc.org/barkley-replication/nuclei_mosaic.zarr",
"width": "600px",
"height": "600px"
}
:::
```

```{figure} ./thumbnail.gif
:label: demo
Interacting with microATLAS:
Use the menu (☰, top-left corner) to change the displayed channels, colours, or contrast.
Scroll (↕) to zoom into cells of interest.
### Find Nuclei

:::{any:bundle} https://find-nuclei.github.io/embed/v1/widget.mjs
{
"url": "https://nyu1.osn.mghpcc.org/barkley-replication/nuclei_mosaic.zarr",
"channels": "0:on:FFFFFF:0:240",
"x": 2115, "y": 1688, "zoom": -1.9,
"height": "600",
"invert": true
}
:::

```{code} markdown
:label: findnuclei_code
:caption: Example markdown to embed Find Nuclei. Create your own with the [viewer](https://find-nuclei.github.io/).
:::{any:bundle} https://find-nuclei.github.io/embed/v1/widget.mjs
{
"url": "https://nyu1.osn.mghpcc.org/barkley-replication/nuclei_mosaic.zarr",
"channels": "0:on:FFFFFF:0:240",
"x": 2115, "y": 1688, "zoom": -1.9,
"height": "600",
"invert": true
}
:::
```

## Deep Zoom
Expand All @@ -79,18 +140,18 @@ By default, readers cannot control dimensions like channels or time, so it is be

### OpenSeadragon

:::{any:bundle} https://curvenote.github.io/widgets/widgets/openseadragon.mjs
{
"tileSources": "https://russellbarkley.github.io/nucleusnet-10k/nucleusnet_10k.dzi"
}
:::

```{code} markdown
:label: openseadragon_code
:caption: Minimal markdown to embed OpenSeadragon in Elemental Microscopy. Replace the source with your DZI.
:caption: Example markdown to embed OpenSeadragon. Replace the source with your DZI.
:::{any:bundle} https://curvenote.github.io/widgets/widgets/openseadragon.mjs
{
"tileSources": "https://your-github.github.io/your-repository/sample.dzi"
"tileSources": "https://russellbarkley.github.io/nucleusnet-10k/nucleusnet_10k.dzi"
}
:::
```

## Imaging
Data collection was fully motorized for unbiased sampling of large panoramas from replicate immunofluorescence experiments.
Grids of overlapping tiles were acquired with a robotic XY stage (IX3-SSU) and Z-drift compensation (IX3-ZDC).
Coverslips were imaged with an Olympus Fluoview FV3000 confocal microscope using a 100X objective lens (Olympus model UPLAPO100X, NA 1.50) in immersion oil.
Pinholes in each channel were maximized to capture the widest depth of field.
6 changes: 6 additions & 0 deletions 03_model.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,9 @@ In the results, Barkley annotated transfected cells by infection status to compa
### Cells
HeLa CCL-2 cells were cultured in Dulbecco’s modification of Eagle’s Medium (DMEM) (50-003-PB, Corning) supplemented with 10% fetal bovine serum (FS-0500-AD, Atlas).
Antibiotics were not used in the replication study, although the original study used 100 U/ml penicillin G, 100μg/ml streptomycin and 0.25μg/ml amphotericin B.

### Imaging
Data collection was fully motorized for unbiased sampling of large panoramas from replicate immunofluorescence experiments.
Grids of overlapping tiles were acquired with a robotic XY stage (IX3-SSU) and Z-drift compensation (IX3-ZDC).
Coverslips were imaged with an Olympus Fluoview FV3000 confocal microscope using a 100X objective lens (Olympus model UPLAPO100X, NA 1.50) in immersion oil.
Pinholes in each channel were maximized to capture the widest depth of field.
9 changes: 9 additions & 0 deletions references.bib
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
@misc{FindNuclei2026,
author = {{Find Nuclei}},
title = {Find Nuclei Viewer},
year = {2026},
month = {9},
version = {2026-09-19},
url = {https://find-nuclei.github.io},
note = {Software, version 2026-09-19. Source code: https://github.com/Find-Nuclei/find-nuclei.github.io},
}
Loading