Add ImJoy demo plugin and badge (#20)

* Add description and version number

* improve readability in imjoy_plugin via api.init

* bump imjoy-rpc version

* recover imjoy_plugin

* bump imjoy-rpc version

* Fix plugin name

* Add ImJoy demo plugin and badge

* Simplify vizarr demo

* set workspace to vizarr

* Fix plugin name

* Add readme

* rename type

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)
 

binder/environment.yml

@@ -14,4 +14,4 @@ dependencies:
   - pip:
     - imjoy>=0.10.0
     - imjoy-jupyter-extension
-    - imjoy-rpc
+    - imjoy-rpc>=0.2.11

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).
+
 

example/VizarrDemo.imjoy.html

@@ -0,0 +1,83 @@
+<docs lang="markdown">
+[TODO: write documentation for this plugin.]
+</docs>
+
+<config lang="json">
+{
+  "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": []
+}
+</config>
+
+<script lang="python">
+import os
+os.chdir('vizarr/example')
+
+from imjoy import api
+import zarr
+from create_fixture import create_ome_zarr
+import zarr
+
+def encode_zarr_store(zobj):
+    path_prefix = f"{zobj.path}/" if zobj.path else ""
+
+    def getItem(key):
+        return zobj.store[path_prefix + key]
+
+    def setItem(key, value):
+        zobj.store[path_prefix + key] = value
+
+    def containsItem(key):
+        if path_prefix + key in zobj.store:
+            return True
+
+    return {
+        "_rintf": True,
+        "_rtype": "zarr-array" if isinstance(zobj, zarr.Array) else "zarr-group",
+        "getItem": getItem,
+        "setItem": setItem,
+        "containsItem": containsItem,
+    }
+
+
+api.registerCodec(
+    {"name": "zarr-array", "type": zarr.Array, "encoder": encode_zarr_store}
+)
+api.registerCodec(
+    {"name": "zarr-group", "type": zarr.Group, "encoder": encode_zarr_store}
+)
+
+
+class Plugin:
+    async def setup(self):
+        pass
+
+    async def run(self, ctx):
+        create_ome_zarr("astronaut.zarr") # creates an example OME-Zarr in the current directory
+        multiscale_astronaut = zarr.open("astronaut.zarr", mode="r") # open the zarr created above in jupyter kernel
+
+        # Create Zarr 
+        images = [ { "source": multiscale_astronaut, "name": "astronaut" } ]
+
+        viewer = await api.createWindow(
+            type="vizarr", src="https://hms-dbmi.github.io/vizarr"
+        )
+        for img in images:
+            await viewer.add_image(img)
+
+api.export(Plugin())
+</script>

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)

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

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",

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",

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 });