diff --git a/README.md b/README.md index e137663f..5673697c 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ # vizarr [![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/hms-dbmi/vizarr/master?filepath=example%2Fgetting_started.ipynb) +[![launch ImJoy](https://imjoy.io/static/badge/launch-imjoy-badge.svg)](https://imjoy.io/#/app?workspace=vizarr&plugin=https://github.com/hms-dbmi/vizarr/blob/master/example/VizarrDemo.imjoy.html) ![Multiscale OME-Zarr in Jupyter Notebook with Vizarr](/screenshot.png) diff --git a/binder/environment.yml b/binder/environment.yml index 2a257316..62640a8d 100644 --- a/binder/environment.yml +++ b/binder/environment.yml @@ -14,4 +14,4 @@ dependencies: - pip: - imjoy>=0.10.0 - imjoy-jupyter-extension - - imjoy-rpc + - imjoy-rpc>=0.2.11 diff --git a/example/README.md b/example/README.md index 8c127536..04cb97b4 100644 --- a/example/README.md +++ b/example/README.md @@ -33,4 +33,8 @@ This notebook a contains a `vizarr` example visualizing a generic multiscale Zar $ jupyter notebook mandelbrot.ipynb ``` +## Display an Image in an ImJoy Plugin [![launch ImJoy](https://imjoy.io/static/badge/launch-imjoy-badge.svg)](https://imjoy.io/#/app?workspace=vizarr&plugin=https://github.com/hms-dbmi/vizarr/blob/master/example/VizarrDemo.imjoy.html) + +This [demo plugin](VizarrDemo.imjoy.html) shows how to build an image visualization plugin with `vizarr` in [ImJoy](https://imjoy.io). + diff --git a/example/VizarrDemo.imjoy.html b/example/VizarrDemo.imjoy.html new file mode 100644 index 00000000..cd21e79c --- /dev/null +++ b/example/VizarrDemo.imjoy.html @@ -0,0 +1,83 @@ + +[TODO: write documentation for this plugin.] + + + +{ + "name": "VizarrDemo", + "type": "native-python", + "version": "0.1.0", + "description": "A demo plugin which uses Vizarr to visualize images", + "tags": [], + "ui": "", + "cover": "", + "inputs": null, + "outputs": null, + "flags": [], + "icon": "extension", + "api_version": "0.1.8", + "env": "", + "permissions": [], + "requirements": ["repo:https://github.com/hms-dbmi/vizarr.git", "conda: zarr scikit-image"], + "dependencies": [] +} + + + diff --git a/example/imjoy_plugin.py b/example/imjoy_plugin.py index 5f984878..2c0ad096 100644 --- a/example/imjoy_plugin.py +++ b/example/imjoy_plugin.py @@ -44,7 +44,7 @@ async def setup(self): async def run(self, ctx): viewer = await api.createWindow( - type="viv-plugin", src="https://hms-dbmi.github.io/vizarr" + type="vizarr", src="https://hms-dbmi.github.io/vizarr" ) if self.view_state: await viewer.set_view_state(self.view_state) diff --git a/example/requirements.txt b/example/requirements.txt index d5aa8b5c..99cb4413 100644 --- a/example/requirements.txt +++ b/example/requirements.txt @@ -3,7 +3,7 @@ ipywidgets>=7.0.0 scikit-image imjoy>=0.10.0 fsspec -imjoy-rpc +imjoy-rpc>=0.2.11 zarr numba requests diff --git a/multimodal_registration_vizarr.ipynb b/multimodal_registration_vizarr.ipynb index afa2e850..862d52b6 100644 --- a/multimodal_registration_vizarr.ipynb +++ b/multimodal_registration_vizarr.ipynb @@ -673,7 +673,7 @@ "\n", " async def run(self, ctx):\n", " viewer = await api.createWindow(\n", - " type=\"viv-plugin\",\n", + " type=\"vizarr\",\n", " src=\"https://hms-dbmi.github.io/vizarr/\"\n", " )\n", " for img in self.images:\n", diff --git a/package.json b/package.json index 4ad42265..5cd903ba 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "@material-ui/core": "^4.11.0", "@material-ui/icons": "^4.9.1", "deck.gl": "^8.2.4", - "imjoy-rpc": "^0.2.19", + "imjoy-rpc": "^0.2.22", "next": "^9.5.1", "react": "^16.13.1", "react-dom": "^16.13.1", diff --git a/src/pages/index.js b/src/pages/index.js index 92261df1..6958a70f 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -3,6 +3,7 @@ import { useRouter } from 'next/router'; import { useEffect } from 'react'; import { useSetRecoilState } from 'recoil'; +import { version as vizarrVersion } from '../../package.json'; import { layerIdsState, sourceInfoState, viewerViewState } from '../state'; const Viewer = dynamic(() => import('../components/Viewer')); @@ -37,7 +38,11 @@ function App() { useEffect(() => { async function initImjoy() { const { setupRPC } = await import('imjoy-rpc'); - const api = await setupRPC({ name: 'viv-plugin' }); + const api = await setupRPC({ + name: 'vizarr', + description: 'A minimal, purely client-side program for viewing Zarr-based images with Viv & ImJoy', + version: vizarrVersion, + }); const add_image = async (props) => addImage(props); const set_view_state = async (vs) => setViewState(vs); api.export({ add_image, set_view_state });