diff --git a/02_approach.md b/02_approach.md index 29117c75..cc773537 100644 --- a/02_approach.md +++ b/02_approach.md @@ -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]() 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]() 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 @@ -30,12 +37,16 @@ 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" } ::: @@ -43,32 +54,82 @@ As an advanced implementation of microscopy maps [@doi:10.1242/jcs.262198], pyra ### 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 @@ -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. \ No newline at end of file diff --git a/03_model.md b/03_model.md index de970a0f..b2e72abc 100644 --- a/03_model.md +++ b/03_model.md @@ -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. diff --git a/references.bib b/references.bib new file mode 100644 index 00000000..e1567f1f --- /dev/null +++ b/references.bib @@ -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}, +}