Refactor Voila plugins so that it's easily reusable in Voici (#1387)

* Fix missing theme name * Refactor FileBrowser widget * Refactor VoilaApp
voila-dashboards · Sep 4, 2023 · 253ba77 · 253ba77
1 parent f308cfb
commit 253ba77
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 24 deletions.
diff --git a/packages/voila/src/app.ts b/packages/voila/src/app.ts
@@ -40,7 +40,7 @@ export class VoilaApp extends JupyterFrontEnd<IShell> {
   /**
    * The name of the application.
    */
-  readonly name = 'Voila';
+  readonly name: string = 'Voila';
 
   /**
    * A namespace/prefix plugins may use to denote their provenance.
@@ -136,8 +136,8 @@ export class VoilaApp extends JupyterFrontEnd<IShell> {
     return this._widgetManager;
   }
 
-  private _widgetManager: KernelWidgetManager | null = null;
-  private _widgetManagerPromise = new PromiseDelegate<KernelWidgetManager>();
+  protected _widgetManager: KernelWidgetManager | null = null;
+  protected _widgetManagerPromise = new PromiseDelegate<KernelWidgetManager>();
 }
 
 /**

diff --git a/packages/voila/src/index.ts b/packages/voila/src/index.ts
@@ -11,3 +11,6 @@ export * from './app';
 export * from './shell';
 export * from './voilaplugins';
 export * from './tools';
+export * from './plugins/tree/browser';
+export * from './plugins/tree/listing';
+export * from './plugins/themes/thememanager';
diff --git a/packages/voila/src/plugins/tree/browser.ts b/packages/voila/src/plugins/tree/browser.ts
@@ -1,7 +1,18 @@
 import { FileBrowser, DirListing } from '@jupyterlab/filebrowser';
 import { VoilaDirListing } from './listing';
+import { Widget } from '@lumino/widgets';
 
 export class VoilaFileBrowser extends FileBrowser {
+  constructor(options: VoilaFileBrowser.IOptions) {
+    const { urlFactory, title, ...rest } = options;
+    super(rest);
+    (this.listing as VoilaDirListing).urlFactory = urlFactory;
+    this.addClass('voila-FileBrowser');
+
+    const titleWidget = new Widget();
+    titleWidget.node.innerText = title;
+    this.toolbar.addItem('title', titleWidget);
+  }
   /**
    * Create the underlying DirListing instance.
    *
@@ -13,3 +24,10 @@ export class VoilaFileBrowser extends FileBrowser {
     return new VoilaDirListing(options);
   }
 }
+
+export namespace VoilaFileBrowser {
+  export interface IOptions extends FileBrowser.IOptions {
+    urlFactory: (path: string) => string;
+    title: string;
+  }
+}
diff --git a/packages/voila/src/plugins/tree/index.ts b/packages/voila/src/plugins/tree/index.ts
@@ -10,12 +10,13 @@ import {
   JupyterFrontEnd,
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
+import { PageConfig, URLExt } from '@jupyterlab/coreutils';
 import { DocumentManager } from '@jupyterlab/docmanager';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { FilterFileBrowserModel } from '@jupyterlab/filebrowser';
+import { Widget } from '@lumino/widgets';
 
 import { VoilaFileBrowser } from './browser';
-import { Widget } from '@lumino/widgets';
 
 /**
  * The voila file browser provider.
@@ -34,19 +35,22 @@ export const treeWidgetPlugin: JupyterFrontEndPlugin<void> = {
       manager: docManager,
       refreshInterval: 2147483646
     });
+    const urlFactory = (path: string) => {
+      const baseUrl = PageConfig.getBaseUrl();
+      const frontend = PageConfig.getOption('frontend');
+      const query = PageConfig.getOption('query');
+      return URLExt.join(baseUrl, frontend, 'render', path) + `?${query}`;
+    };
     const fb = new VoilaFileBrowser({
       id: 'filebrowser',
-      model: fbModel
+      model: fbModel,
+      urlFactory,
+      title: 'Select items to open with Voilà.'
     });
 
-    fb.addClass('voila-FileBrowser');
     fb.showFileCheckboxes = false;
     fb.showLastModifiedColumn = false;
 
-    const title = new Widget();
-    title.node.innerText = 'Select items to open with Voilà.';
-    fb.toolbar.addItem('title', title);
-
     const spacerTop = new Widget();
     spacerTop.addClass('spacer-top-widget');
     app.shell.add(spacerTop, 'main');

diff --git a/packages/voila/src/plugins/tree/listing.ts b/packages/voila/src/plugins/tree/listing.ts
@@ -1,9 +1,15 @@
 import { DirListing } from '@jupyterlab/filebrowser';
 import { Contents } from '@jupyterlab/services';
 import { showErrorMessage } from '@jupyterlab/apputils';
-import { PageConfig, URLExt } from '@jupyterlab/coreutils';
 
 export class VoilaDirListing extends DirListing {
+  get urlFactory(): VoilaDirListing.IUrlFactory | undefined {
+    return this._urlFactory;
+  }
+  set urlFactory(f: VoilaDirListing.IUrlFactory | undefined) {
+    this._urlFactory = f;
+  }
+
   /**
    * Handle the opening of an item.
    */
@@ -17,11 +23,11 @@ export class VoilaDirListing extends DirListing {
         .catch((error) => showErrorMessage('Open directory', error));
     } else {
       const path = item.path;
-      const baseUrl = PageConfig.getBaseUrl();
-      const frontend = PageConfig.getOption('frontend');
-      const query = PageConfig.getOption('query');
-      const url = URLExt.join(baseUrl, frontend, 'render', path) + `?${query}`;
-      window.open(url, '_blank');
+      if (this.urlFactory) {
+        window.open(this.urlFactory(path), '_blank');
+      } else {
+        showErrorMessage('Open file', 'URL Factory is not defined');
+      }
     }
   }
 
@@ -30,4 +36,9 @@ export class VoilaDirListing extends DirListing {
       this.evtDblClick(event as MouseEvent);
     }
   }
+  private _urlFactory: VoilaDirListing.IUrlFactory | undefined;
+}
+
+export namespace VoilaDirListing {
+  export type IUrlFactory = (path: string) => string;
 }
diff --git a/packages/voila/src/plugins/widget.ts b/packages/voila/src/plugins/widget.ts
@@ -117,7 +117,6 @@ export const renderOutputsPlugin: JupyterFrontEndPlugin<void> = {
     const cellOutputs = document.body.querySelectorAll(
       'script[type="application/vnd.voila.cell-output+json"]'
     );
-
     cellOutputs.forEach(async (cellOutput) => {
       const model = JSON.parse(cellOutput.innerHTML);
 

diff --git a/packages/voila/src/tree.ts b/packages/voila/src/tree.ts
@@ -9,7 +9,6 @@
  * Distributed under the terms of the Modified BSD License.                 *
  ****************************************************************************/
 import '../style/index.js';
-import '@jupyterlab/filebrowser/style/index.js';
 
 import { PageConfig, URLExt } from '@jupyterlab/coreutils';
 import { ContentsManager, Drive } from '@jupyterlab/services';
@@ -27,7 +26,7 @@ import {
   widgetManager
 } from './voilaplugins';
 
-const disabled = [
+export const TREE_DISABLED_EXTENSIONS = [
   '@jupyter-widgets/jupyterlab-manager:plugin',
   '@jupyter-widgets/jupyterlab-manager:saveWidgetState',
   '@jupyter-widgets/jupyterlab-manager:base-2.0.0',
@@ -101,7 +100,7 @@ async function main() {
   );
   federatedExtensions.forEach((p) => {
     if (p.status === 'fulfilled') {
-      for (const plugin of activePlugins(p.value, disabled)) {
+      for (const plugin of activePlugins(p.value, TREE_DISABLED_EXTENSIONS)) {
         mods.push(plugin);
       }
     } else {
@@ -115,7 +114,7 @@ async function main() {
   );
   federatedMimeExtensions.forEach((p) => {
     if (p.status === 'fulfilled') {
-      for (const plugin of activePlugins(p.value, disabled)) {
+      for (const plugin of activePlugins(p.value, TREE_DISABLED_EXTENSIONS)) {
         mimeExtensions.push(plugin);
       }
     } else {

diff --git a/packages/voila/style/index.js b/packages/voila/style/index.js
@@ -4,4 +4,5 @@ import '@jupyterlab/apputils/style/index.js';
 import '@jupyterlab/rendermime/style/index.js';
 import '@jupyterlab/docregistry/style/index.js';
 import '@jupyterlab/markedparser-extension/style/index.js';
+import '@jupyterlab/filebrowser/style/index.js';
 import './base.css';
diff --git a/share/jupyter/voila/templates/base/spinner.macro.html.j2 b/share/jupyter/voila/templates/base/spinner.macro.html.j2
@@ -9,6 +9,8 @@
         height: 75vh;
         color: var(--jp-content-font-color1);
         font-family: sans-serif;
+        z-index: 100;
+        position: relative;
     }
 
     .spinner {
@@ -36,7 +38,7 @@
 {% endmacro %}
 
 {% macro html() %}
-  <div id="loading" style="display: none;">
+  <div id="loading" style="display: flex;">
     <div class="spinner-container">
       <svg class="spinner" data-name="c1" version="1.1" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title>voila</dc:title></cc:Work></rdf:RDF></metadata><title>spin</title><path class="voila-spinner-color1" d="m250 405c-85.47 0-155-69.53-155-155s69.53-155 155-155 155 69.53 155 155-69.53 155-155 155zm0-275.5a120.5 120.5 0 1 0 120.5 120.5 120.6 120.6 0 0 0-120.5-120.5z"/><path class="voila-spinner-color2" d="m250 405c-85.47 0-155-69.53-155-155a17.26 17.26 0 1 1 34.51 0 120.6 120.6 0 0 0 120.5 120.5 17.26 17.26 0 1 1 0 34.51z"/></svg>
     </div>

diff --git a/share/jupyter/voila/templates/lab/index.html.j2 b/share/jupyter/voila/templates/lab/index.html.j2
@@ -54,10 +54,12 @@
 
 {%- block body_header -%}
 <link rel="icon" href="data:;base64,=">
-{% if resources.theme == 'dark' %}
+{% if resources.theme == 'dark' or resources.theme == 'JupyterLab Dark' %}
 <body class="jp-Notebook theme-dark" data-base-url="{{resources.base_url}}voila/" data-jp-theme-light="false" data-jp-theme-name="JupyterLab Dark">
-{% else %}
+{% elif resources.theme == 'light' or resources.theme == 'JupyterLab Light' %}
 <body class="jp-Notebook theme-light" data-base-url="{{resources.base_url}}voila/" data-jp-theme-light="true" data-jp-theme-name="JupyterLab Light">
+{% else %}
+<body class="jp-Notebook" data-base-url="{{resources.base_url}}voila/" data-jp-theme-name="{{resources.theme}}">
 {% endif %}
 {{ spinner.html() }}
 {{ voila_setup_helper_functions() }}