DRAFT: build and use local copy of vizarr on mybinder

README.md

@@ -1,4 +1,5 @@
 # vizarr
+[![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/hms-dbmi/vizarr/master?filepath=example%2Fgetting_started.ipynb)
 
 ![Multiscale OME-Zarr in Jupyter Notebook with Vizarr](/screenshot.png)
 

binder/environment.yml

@@ -0,0 +1,17 @@
+name: vizarr
+channels:
+  - conda-forge
+  - defaults
+dependencies:
+  - fsspec
+  - ipywidgets
+  - jupyter-server-proxy
+  - numba
+  - numpy
+  - requests
+  - scikit-image
+  - zarr
+  - pip:
+    - imjoy>=0.10.0
+    - imjoy-jupyter-extension
+    - imjoy-rpc

binder/postBuild

@@ -0,0 +1,7 @@
+#!/bin/bash
+set -eu
+
+npm install
+npm run export
+
+pip install ./binder/vizarr-server-proxy

binder/vizarr-server-proxy/setup.py

@@ -0,0 +1,12 @@
+import setuptools
+
+setuptools.setup(
+    name="jupyter-vizarr-server",
+    py_modules=['vizarr_server_proxy'],
+    entry_points={
+        'jupyter_serverproxy_servers': [
+            'vizarr = vizarr_server_proxy:setup_vizarr',
+        ]
+    },
+    install_requires=['jupyter-server-proxy'],
+)

binder/vizarr-server-proxy/vizarr_server_proxy.py

@@ -0,0 +1,6 @@
+def setup_vizarr():
+    return {
+        'command': [
+            'python', '-m', 'http.server', '--directory', 'out/', '{port}',
+        ]
+    }

example/imjoy_plugin.py

@@ -1,4 +1,5 @@
 from imjoy import api
+from os import getenv
 import zarr
 
 
@@ -43,8 +44,14 @@ async def setup(self):
         pass
 
     async def run(self, ctx):
+        # If we're running on Binder vizarr should be built locally and served
+        # by jupyter-server-proxy under PREFIX/vizarr/
+        if getenv("BINDER_REPO_URL"):
+            vizarr_src = f"{getenv('JUPYTERHUB_SERVICE_PREFIX')}vizarr"
+        else:
+            vizarr_src = "https://hms-dbmi.github.io/vizarr"
         viewer = await api.createWindow(
-            type="viv-plugin", src="https://hms-dbmi.github.io/vizarr"
+            type="viv-plugin", src=vizarr_src
         )
         if self.view_state:
             await viewer.set_view_state(self.view_state)

next.config.js

@@ -1,7 +1,7 @@
 const path = require('path');
 
 module.exports = {
-  assetPrefix:  process.env.GITHUB_JOB === 'build-and-deploy' ? '/vizarr/' : '',
+  assetPrefix:  process.env.GITHUB_JOB === 'build-and-deploy' ? '/vizarr/' : './',
   webpack: config => {
     config.resolve.alias['@hms-dbmi/viv'] = path.resolve(
       __dirname, './node_modules/@hubmap/vitessce-image-viewer/dist/bundle.es.js'