Add support for reading zarr images

[thewtex]

[oeway]

@thewtex It seems you have made some progress on working with zarr file support: https://github.com/Kitware/itk-vtk-viewer/pull/231 This is very exciting. Do you have a test zarr url which I can used as a demo? And how can I generate the image/volume pyramid?

[thewtex]

@oeway yes, getting there!

Support was added to visualize a single-resolution Zarr image. Todo's are:

• [ ] Multi-scale pyramid support
• [ ] IndexedDB chunk caching
• [ ] Multi-scale spatial image unit test
• [ ] Single scale spatial image unit test
• [ ] Single array unit test

Here's and example of pyramid generation: https://github.com/thewtex/fiber-bed-zarr/blob/master/ConvertToXArrayZarr.ipynb

Here is a demo URL for a single resolution:

https://kitware.github.io/itk-vtk-viewer/app/?fileToLoad=https://fiber-bed-zarr.netlify.com/rec20160318_191511_232p3_2cm_cont__4097im_1500ms_ML17keV_6.zarr/level_4.zarr

This could be deployed to AWS, GCS, etc. For smaller datasets, it can be deployed to GitHub Pages. For this larger dataset, I experimented with Netlify, but this post-processing script and a _headers file for CORS is required for deployment.

[oeway]

Hey @thewtex Awesome!

It seems the demo is broken at the moment:

Uncaught (in promise) ReferenceError: zbottomMeta is not defined
    at Function.<anonymous> (itkVtkViewer.js:197)
    at m (itkVtkViewer.js:197)
    at Generator._invoke (itkVtkViewer.js:197)
    at Generator.forEach.e.<computed> [as next] (itkVtkViewer.js:197)
    at n (itkVtkViewer.js:16)
    at s (itkVtkViewer.js:16)

Edit: I think that’s because your demo dataset is not available anymore .

[thewtex]

It seems the demo is broken at the moment:

Thanks for the note! Fixed in 9.20.3. I will also add unit tests for the different data models.

[oeway]

Thanks, just tried, it's working now!

[bpavie]

@thewtex , unfortunately the demo URL is not working due to a javascript error (at least on Firefox and Chrome)

ServiceWorker registration successful with scope:  https://kitware.github.io/itk-vtk-viewer/app/ app:30:21
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://fiber-bed-zarr.netlify.com/rec20160318_191511_232p3_…m_cont__4097im_1500ms_ML17keV_6.zarr/level_4.zarr/.zmetadata. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Error: Network Error

[thewtex]

@bpavie it seems that we still have a few CORS headers issue with that dataset/deployment.

Try:

https://kitware.github.io/itk-vtk-viewer/app/?fileToLoad=https://thewtex.github.io/allen-ccf-itk-vtk-zarr/average_template_50_chunked.zarr

[bpavie]

Thanks @thewtex this one is working!

[oeway]

@thewtex any updates on the multi-scale pyramid support? Got some users asking about this feature.

[thewtex]

@oeway WIP is in #343 . Refactoring underway to support:

• Client-side multi-scale pyramid
• Utilization of the multi-scale pyramid based on rendering performance
• Support for xarray, xarray-zarr, ome-zarr

[oeway]

@thewtex With the zarr store interface supported(https://github.com/Kitware/itk-vtk-viewer/pull/391), we can now visualize zarr volume directly from a Jupyter notebook.

Here are the steps to try it:

1. Installation

!pip install imjoy-rpc imjoy-jupyter-extension zarr fsspec

Now restart the jupyter notebook to make sure we load the imjoy jupyter extension

2. Define a view function

import zarr
from imjoy_rpc import api

from imjoy_rpc import register_default_codecs
register_default_codecs()

class ImJoyPlugin:
    def __init__(self, image):
        self.img = image

    async def setup(self):
        pass

    async def run(self, ctx):
        viewer = await api.createWindow(
            src="https://kitware.github.io/itk-vtk-viewer/app/"
        )
        await viewer.setImage(self.img)

def view(image):
    api.export(ImJoyPlugin(image))

3. To visualize an image, we can do:

import zarr
from fsspec.implementations.http import HTTPFileSystem
fs = HTTPFileSystem()
http_map = fs.get_mapper("https://openimaging.github.io/demos/multi-scale-chunked-compressed/build/data/medium.zarr")
z_group = zarr.open(http_map, mode='r')

view(z_group)

(cc @jxchen01)

[thewtex]

@oeway brilliant!!!