Towards a binder

README.md

@@ -1,6 +1,8 @@
 Voila
 =====
 
+[![Binder](https://img.shields.io/badge/launch-binder-brightgreen.svg)](https://mybinder.org/v2/gh/QuantStack/voila/master?urlpath=voila/tree/notebooks)
+
 Rendering of live Jupyter notebooks with interactive widgets.
 
 Introduction
@@ -20,7 +22,6 @@ callbacks to changes in Jupyter interactive widgets.
 When using these default settings, the code powering the Jupyter notebook is
 never sent to the front-end.
 
-
 Usage
 -----
 
@@ -30,14 +31,12 @@ To render the `bqplot` example notebook as a Voila app, run
 voila bqplot.ipynb
 ```
 
-
 Related projects
 ----------------
 
 Voila depends on the [nbconvert](https://github.com/jupyter/nbconvert) and
 [jupyter_server](https://github.com/jupyter/jupyter_server/).
 
-
 License
 -------
 

environment.yaml

@@ -0,0 +1,7 @@
+name: voila
+dependencies:
+  - ipyvolume
+  - bqplot
+  - scipy
+  - pip:
+    - https://github.com/QuantStack/voila/master.zip

etc/jupyter/jupyter_notebook_config.d/voila.json

@@ -0,0 +1,7 @@
+{
+    "NotebookApp": {
+        "nbserver_extensions": {
+            "voila.server_extension": true
+        }
+    }
+}

js/WidgetApplication.js

@@ -1,4 +1,3 @@
-
 import { Kernel, ServerConnection, KernelMessage } from '@jupyterlab/services'
 
 import { WidgetManager } from './manager'

js/webpack.config.js

@@ -31,16 +31,15 @@ var loaders = [
     { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=image/svg+xml' }
 ]
 
-var distRoot = path.resolve(__dirname, '..', 'voila', 'static', 'dist')
+var distRoot = path.resolve(__dirname, '..', 'voila', 'static')
 
 module.exports = [
     {
         entry: ['babel-polyfill', './index.js'],
         output: {
             filename: 'libwidgets.js',
             path: distRoot,
-            libraryTarget: 'amd',
-            publicPath: '/dist/'
+            libraryTarget: 'amd'
         },
         module: { loaders: loaders },
         devtool: 'source-map'

notebooks/ipyvolume.ipynb

@@ -7,8 +7,15 @@
    "outputs": [],
    "source": [
     "import ipyvolume as ipv\n",
-    "ipv.example_ylm();"
+    "ipv.examples.example_ylm();"
    ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
   }
  ],
  "metadata": {
@@ -27,7 +34,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.6.6"
+   "version": "3.6.5"
   }
  },
  "nbformat": 4,

setup.py

@@ -64,7 +64,7 @@ class NPM(Command):
 
     node_modules = os.path.join(node_root, 'node_modules')
 
-    lib_root = os.path.join(here, 'voila', 'static', 'dist')
+    lib_root = os.path.join(here, 'voila', 'static')
     targets = [
         os.path.join(lib_root, 'libwidgets.js')
     ]
@@ -137,7 +137,10 @@ def run(self):
     'description': 'Serving read-only live Jupyter notebooks',
     'packages': find_packages(),
     'zip_safe': False,
-    'data_files': [('etc/jupyter/jupyter_server_config.d', ['etc/jupyter/jupyter_server_config.d/voila.json'])],
+    'data_files': [
+        ('etc/jupyter/jupyter_server_config.d', ['etc/jupyter/jupyter_server_config.d/voila.json']),
+        ('etc/jupyter/jupyter_notebook_config.d', ['etc/jupyter/jupyter_notebook_config.d/voila.json'])
+    ],
     'cmdclass': {
         'build_py': js_prerelease(build_py),
         'egg_info': js_prerelease(egg_info),
@@ -147,8 +150,7 @@ def run(self):
     'package_data': {
         'voila': [
             'templates/*',
-            'static/*',
-            'static/dist/*',
+            'static/*'
         ]
     },
     'entry_points': {
@@ -159,7 +161,7 @@ def run(self):
     'install_requires': [
         'jupyter_server',
         'nbconvert>=5.4,<6',
-        'whatchdog'
+        'watchdog'
     ],
     'author': 'QuantStack',
     'author_email': '[email protected]',

voila/app.py

@@ -21,6 +21,7 @@
 from jupyter_server.services.kernels.handlers import KernelHandler, ZMQChannelsHandler
 from jupyter_server.base.handlers import path_regex
 from jupyter_server.services.contents.largefilemanager import LargeFileManager
+from jupyter_server.utils import url_path_join
 
 from .paths import ROOT, STATIC_ROOT, TEMPLATE_ROOT
 from .handler import VoilaHandler
@@ -110,22 +111,43 @@ def start(self):
             ]
         )
 
-        handlers = [
-            (r'/api/kernels/%s' % _kernel_id_regex, KernelHandler),
-            (r'/api/kernels/%s/channels' % _kernel_id_regex, ZMQChannelsHandler),
+        jenv_opt = {"autoescape": True}  # we might want extra options via cmd line like notebook server
+        env = jinja2.Environment(loader=jinja2.FileSystemLoader(str(TEMPLATE_ROOT)), extensions=['jinja2.ext.i18n'], **jenv_opt)
+        nbui = gettext.translation('nbui', localedir=str(ROOT / 'i18n'), fallback=True)
+        env.install_gettext_translations(nbui, newstyle=False)
+        contents_manager = LargeFileManager()  # TODO: make this configurable like notebook
+
+        webapp = tornado.web.Application(
+            kernel_manager=kernel_manager,
+            allow_remote_access=True,
+            autoreload=self.autoreload,
+            voila_jinja2_env=env,
+            jinja2_env=env,
+            static_path='/',
+            server_root_dir='/',
+            contents_manager=contents_manager
+        )
+
+        base_url = webapp.settings.get('base_url', '/')
+
+        handlers = []
+
+        handlers.extend([
+            (url_path_join(base_url, r'/api/kernels/%s' % _kernel_id_regex), KernelHandler),
+            (url_path_join(base_url, r'/api/kernels/%s/channels' % _kernel_id_regex), ZMQChannelsHandler),
             (
-                r"/voila/static/(.*)",
+                url_path_join(base_url, r'/voila/static/(.*)'),
                 tornado.web.StaticFileHandler,
                 {
                     'path': self.static_root,
                     'default_filename': 'index.html'
                 }
             )
-        ]
+        ])
 
         if self.notebook_path:
             handlers.append((
-                r'/',
+                url_path_join(base_url, r'/'),
                 VoilaHandler,
                 {
                     'notebook_path': self.notebook_path,
@@ -134,34 +156,18 @@ def start(self):
             ))
         else:
             handlers.extend([
-                ('/', VoilaTreeHandler),
-                ('/voila/tree' + path_regex, VoilaTreeHandler),
-                ('/voila/render' + path_regex, VoilaHandler, {'strip_sources': self.strip_sources}),
+                (base_url, VoilaTreeHandler),
+                (url_path_join(base_url, r'/voila/tree' + path_regex), VoilaTreeHandler),
+                (url_path_join(base_url, r'/voila/render' + path_regex), VoilaHandler, {'strip_sources': self.strip_sources}),
             ])
         if self.autoreload:
-            handlers.append(('/voila/watchdog' + path_regex, WatchDogHandler))
-
-        jenv_opt = {"autoescape": True}  # we might want extra options via cmd line like notebook server
-        env = jinja2.Environment(loader=jinja2.FileSystemLoader(str(TEMPLATE_ROOT)), extensions=['jinja2.ext.i18n'], **jenv_opt)
-        nbui = gettext.translation('nbui', localedir=str(ROOT / 'i18n'), fallback=True)
-        env.install_gettext_translations(nbui, newstyle=False)
-
-        contents_manager = LargeFileManager()  # TODO: make this configurable like notebook
-
+            handlers.append(
+                (url_path_join(base_url, r'/voila/watchdog' + path_regex), WatchDogHandler)
+            )
 
-        app = tornado.web.Application(
-            handlers,
-            kernel_manager=kernel_manager,
-            allow_remote_access=True,
-            autoreload=self.autoreload,
-            voila_jinja2_env=env,
-            jinja2_env=env,
-            static_path='/',
-            server_root_dir='/',
-            contents_manager=contents_manager
-        )
+        webapp.add_handlers('.*$', handlers)
 
-        app.listen(self.port)
+        webapp.listen(self.port)
         self.log.info(f'Voila listening on port {self.port}.')
 
         try:

voila/handler.py

@@ -18,7 +18,7 @@ def initialize(self, notebook_path=None, strip_sources=True):
     @tornado.gen.coroutine
     def get(self, path=None):
         if path:
-            path = path.strip('/')  # remove leading /
+            path = path.strip(self.base_url)
             path += '.ipynb'  # when used as a jupyter server extension, we don't use the extension
         # if the handler got a notebook_path argument, always serve that
         notebook_path = self.notebook_path or path
@@ -37,7 +37,7 @@ def get(self, path=None):
         result = executenb(notebook, km=km)
 
         # render notebook to html
-        resources = dict(kernel_id=kernel_id)
+        resources = dict(kernel_id=kernel_id, base_url=self.base_url)
         html, resources = HTMLExporter(template_file=str(TEMPLATE_ROOT / 'voila.tpl'), exclude_input=self.strip_sources,
                                        exclude_output_prompt=self.strip_sources, exclude_input_prompt=self.strip_sources
                                       ).from_notebook_node(result, resources=resources)

voila/server_extension.py

@@ -12,8 +12,7 @@
 from .paths import ROOT, TEMPLATE_ROOT, STATIC_ROOT
 from .handler import VoilaHandler
 from .treehandler import VoilaTreeHandler
-from .watchdog import WatchDogHandler
-
+# from .watchdog import WatchDogHandler
 
 def load_jupyter_server_extension(server_app):
     web_app = server_app.web_app
@@ -26,12 +25,11 @@ def load_jupyter_server_extension(server_app):
     env.install_gettext_translations(nbui, newstyle=False)
 
     host_pattern = '.*$'
+    base_url = url_path_join(web_app.settings['base_url'])
     web_app.add_handlers(host_pattern, [
-        (url_path_join(web_app.settings['base_url'], '/voila/render' + path_regex), VoilaHandler),
-        (url_path_join(web_app.settings['base_url'], '/voila/watchdog' + path_regex), WatchDogHandler),
-        (url_path_join(web_app.settings['base_url'], '/voila'), VoilaTreeHandler),
-        (url_path_join(web_app.settings['base_url'], '/voila/tree' + path_regex), VoilaTreeHandler),
-        (url_path_join(web_app.settings['base_url'], '/voila/static/(.*)'),  tornado.web.StaticFileHandler,
-            {'path': str(STATIC_ROOT)})
-
-    ])
+        (url_path_join(base_url, '/voila/render' + path_regex), VoilaHandler),
+#         (url_path_join(base_url, '/voila/watchdog' + path_regex), WatchDogHandler),
+        (url_path_join(base_url, '/voila'), VoilaTreeHandler),
+        (url_path_join(base_url, '/voila/tree' + path_regex), VoilaTreeHandler),
+        (url_path_join(base_url, '/voila/static/(.*)'),  tornado.web.StaticFileHandler, {'path': str(STATIC_ROOT)})
+    ])

voila/static/main.js

@@ -1,39 +1,32 @@
-
-// Initialize requirejs (for dynamically loading widgets)
-// and render widgets on page.
-
+// Render widgets on page.
 var kernel_id = null;
 var scripts = document.getElementsByTagName('script');
 Array.prototype.forEach.call(scripts, (script) => {
     kernel_id = script.getAttribute('data-jupyter-kernel-id') || kernel_id;
 })
 
-requirejs.config({
-    baseUrl: '/voila/static/dist'
-})
-
 require(['libwidgets'], function(lib) {
-    var BASEURL = window.location.href
+    var BASEURL = window.location.href;
 
     var WSURL;
     if (window.location.protocol.startsWith('https')) {
-        WSURL = 'wss://' + window.location.host
+        WSURL = 'wss://' + window.location.host;
     }
-    else {
-        WSURL = 'ws://' + window.location.host
+    else {;
+        WSURL = 'ws://' + window.location.host;
     }
 
     var widgetApp = new lib.WidgetApplication(BASEURL, WSURL, lib.requireLoader, kernel_id);
 
     var path = window.location.pathname.substr(14);
     var wsWatchdog = new WebSocket(WSURL + '/voila/watchdog/' + path);
     wsWatchdog.onmessage = (evt) => {
-        var msg = JSON.parse(evt.data)
-        console.log('msg', msg)
+        var msg = JSON.parse(evt.data);
         if(msg.type == 'reload') {
             var timeout = 0;
-            if(msg.delay == 'long')
+            if(msg.delay == 'long') {
                 timeout = 1000;
+            }
             setTimeout(() => {
                 location.href = location.href;
             }, timeout)

voila/templates/tree.html

@@ -1,5 +1,6 @@
 {% extends "page.html" %}
 
+
 {% block title %}{{page_title}}{% endblock %}
 
 
@@ -33,17 +34,14 @@
 
   {% for content in contents.content %}
     {% if content.type == 'notebook' %}
-      <li><a href="/voila/render/{{content.path.rpartition('.')[0]}}"><i class="fa fa-book"></i>{{content.name.rpartition('.')[0]}}</a></li>
+      <li><a href="{{base_url}}voila/render/{{content.path.rpartition('.')[0]}}"><i class="fa fa-book"></i>{{content.name.rpartition('.')[0]}}</a></li>
     {% endif %}
     {% if content.type == 'directory' %}
-      <li><a href="/voila/tree/{{content.path}}"><i class="fa fa-folder"></i>{{content.name}}</a></li>
+      <li><a href="{{base_url}}voila/tree/{{content.path}}"><i class="fa fa-folder"></i>{{content.name}}</a></li>
     {% endif %}
   {% endfor %}
 </ul>
 
-
-
-
 {% endblock %}
 
 {% block script %}