Refactor renderPlugin as JupyterFrontEndPlugin (#47)

PolusAI · Apr 8, 2024 · 9e2d051 · 9e2d051
1 parent 52743bc
commit 9e2d051
Show file tree

Hide file tree

Showing 6 changed files with 1,592 additions and 958 deletions.
diff --git a/jupyterlab_polus_render/jupyterlab_polus_render/_frontend.py b/jupyterlab_polus_render/jupyterlab_polus_render/_frontend.py
@@ -6,4 +6,4 @@
 """
 
 module_name = "jupyterlab_polus_render"
-module_version = "^1.0.1"
+module_version = "^1.1.0"
diff --git a/jupyterlab_polus_render/package.json b/jupyterlab_polus_render/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jupyterlab_polus_render",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A Jupyterlab extension for Polus Render.",
   "keywords": [
     "jupyter",
@@ -50,6 +50,8 @@
   },
   "dependencies": {
     "@jupyter-widgets/base": "^1.1.10 || ^2 || ^3 || ^4 || ^5 || ^6",
+    "@jupyterlab/application": "^4.0.0",
+    "@jupyterlab/filebrowser": "^4.0.0",
     "@labshare/polus-render": "0.2.6",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",

diff --git a/jupyterlab_polus_render/pyproject.toml b/jupyterlab_polus_render/pyproject.toml
@@ -37,7 +37,7 @@ classifiers = [
 dependencies = [
     "ipywidgets>=8.0.0",
 ]
-version = "1.0.1"
+version = "1.1.0"
 
 [project.optional-dependencies]
 docs = [
@@ -112,7 +112,7 @@ file = [
 ]
 
 [tool.tbump.version]
-current = "1.0.1"
+current = "1.1.0"
 regex = "(?P<major>\\d+)\\.(?P<minor>\\d+)\\.(?P<patch>\\d+)((?P<channel>a|b|rc|.dev)(?P<release>\\d+))?"
 
 [tool.tbump.git]

diff --git a/jupyterlab_polus_render/src/plugin.ts b/jupyterlab_polus_render/src/plugin.ts
@@ -1,21 +1,31 @@
-import { Application, IPlugin } from '@lumino/application';
-
+import { DOMWidgetView } from '@jupyter-widgets/base';
+import { Application } from '@lumino/application';
 import { Widget } from '@lumino/widgets';
-
 import { IJupyterWidgetRegistry } from '@jupyter-widgets/base';
-
-import * as widgetExports from './widget';
-
+import { JupyterFrontEndPlugin } from '@jupyterlab/application';
+import { PageConfig } from '@jupyterlab/coreutils';
+import { IFileBrowserFactory } from '@jupyterlab/filebrowser';
+import { store } from '@labshare/polus-render';
+import { RenderModel } from './widget';
 import { MODULE_NAME, MODULE_VERSION } from './version';
 
+
 const EXTENSION_ID = 'jupyterlab_polus_render:plugin';
 
+// Get the base URL of the JupyterLab session
+const baseUrl = PageConfig.getBaseUrl();
+// URL for serving images
+const renderFilePrefix = 'jupyterlab-polus-render/image'
+
 /**
  * The render plugin.
  */
-const renderPlugin: IPlugin<Application<Widget>, void> = {
+const renderPlugin: JupyterFrontEndPlugin<void> = {
   id: EXTENSION_ID,
-  requires: [IJupyterWidgetRegistry],
+  requires: [
+    IJupyterWidgetRegistry,
+    IFileBrowserFactory
+  ],
   activate: activateWidgetExtension,
   autoStart: true,
 }
@@ -27,11 +37,54 @@ export default renderPlugin;
  */
 function activateWidgetExtension(
   app: Application<Widget>,
-  registry: IJupyterWidgetRegistry
+  registry: IJupyterWidgetRegistry,
+  browserFactory: IFileBrowserFactory
 ): void {
+  const RenderView = class extends DOMWidgetView {
+    render() {
+      let imagePath = this.model.get('imagePath');
+      let overlayPath = this.model.get('overlayPath');
+      let isImagePathUrl = this.model.get('is_imagePath_url');
+      let isOverlayPathUrl = this.model.get('is_overlayPath_url');
+      let imageUrl = isImagePathUrl ? imagePath : `${baseUrl}${renderFilePrefix}${imagePath}`; // T/F condition ? valueIfTrue : valueIfFalse
+      let overlayUrl = isOverlayPathUrl ? overlayPath : `${baseUrl}${renderFilePrefix}${overlayPath}`;
+
+      // Set the image url
+      store.setState({
+        urls: [
+          imageUrl,
+        ],
+      });
+
+      // Set the overlay url
+      fetch(overlayUrl).then((response) => {
+        response.json().then((overlayData) => {
+          store.setState({
+            overlayData,
+          });
+          const heatmapIds = Object.keys(overlayData.value_range)
+            .map((d: any) => ({ label: d, value: d }))
+            .concat({ label: 'None', value: null });
+
+          store.setState({
+            heatmapIds,
+          });
+        });
+      });
+
+      this.el.innerHTML = `
+      <div style="width:100%;height:900px">
+      <polus-render></polus-render>
+      `;
+    }
+  }
+
   registry.registerWidget({
     name: MODULE_NAME,
     version: MODULE_VERSION,
-    exports: widgetExports,
+    exports: {
+      RenderModel,
+      RenderView
+    },
   });
 }
diff --git a/jupyterlab_polus_render/src/widget.ts b/jupyterlab_polus_render/src/widget.ts
@@ -2,21 +2,15 @@
 
 import {
   DOMWidgetModel,
-  DOMWidgetView,
   ISerializers,
 } from '@jupyter-widgets/base';
 
 import { MODULE_NAME, MODULE_VERSION } from './version';
-import { PageConfig } from '@jupyterlab/coreutils';
-import { store } from '@labshare/polus-render';
 
 // Import the CSS
 import '../css/widget.css';
 
-// Get the base URL of the JupyterLab session
-const baseUrl = PageConfig.getBaseUrl();
-// URL for serving images
-const renderFilePrefix = 'jupyterlab-polus-render/image'
+
 
 export class RenderModel extends DOMWidgetModel {
   defaults() {
@@ -43,42 +37,3 @@ export class RenderModel extends DOMWidgetModel {
   static view_module = MODULE_NAME; // Set to null if no view
   static view_module_version = MODULE_VERSION;
 }
-
-export class RenderView extends DOMWidgetView {
-  render() {
-    let imagePath = this.model.get('imagePath');
-    let overlayPath = this.model.get('overlayPath');
-    let isImagePathUrl = this.model.get('is_imagePath_url');
-    let isOverlayPathUrl = this.model.get('is_overlayPath_url');
-    let imageUrl = isImagePathUrl ? imagePath : `${baseUrl}${renderFilePrefix}${imagePath}`; // T/F condition ? valueIfTrue : valueIfFalse
-    let overlayUrl = isOverlayPathUrl ? overlayPath : `${baseUrl}${renderFilePrefix}${overlayPath}`;
-
-    // Set the image url
-    store.setState({
-      urls: [
-        imageUrl,
-      ],
-    });
-
-    // Set the overlay url
-    fetch(overlayUrl).then((response) => {
-      response.json().then((overlayData) => {
-        store.setState({
-          overlayData,
-        });
-        const heatmapIds = Object.keys(overlayData.value_range)
-          .map((d: any) => ({ label: d, value: d }))
-          .concat({ label: 'None', value: null });
-
-        store.setState({
-          heatmapIds,
-        });
-      });
-    });    
-
-    this.el.innerHTML = `
-    <div style="width:100%;height:900px">
-    <polus-render></polus-render>
-    `;
-  }
-}