Update tests, use Preact for rendering

Author: stuartquin

css/widget.css

@@ -1,8 +1,10 @@
 .content {
   padding: 20px;
-  line-height: 2;
-  font-size: 20px;
+  line-height: 1.7;
+  font-size: 18px;
   font-family: "Lato", "Trebuchet MS", Roboto, Helvetica, Arial, sans-serif;
+
+  max-width: 720px;
 }
 .label {
   margin: 5px 10px 5px 0;
@@ -12,27 +14,41 @@
   padding: 1px 10px;
   position: relative;
   border-radius: 4px;
+  font-size: 16px;
 }
 .selected {
   background: white;
   color: rgb(31, 41, 55);
 }
 .labelContainer {
   display: flex;
+  flex-grow: 1;
   color: #fff;
-  width: 100%;
-  padding: 12px;
-  font-size: 20px;
-  background: rgb(31, 41, 55);
-  text-align: center;
-  box-sizing: border-box;
   font-weight: bold;
   font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
   text-transform: uppercase;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 
+.topBar {
+  display: flex;
+  color: #fff;
+  width: 100%;
+  padding: 12px;
+  background: rgb(31, 41, 55);
+  box-sizing: border-box;
+  font-size: 20px;
+}
+
+.nav {
+  display: flex;
+}
+
+.navLink {
+  cursor: pointer;
+}
+
 .span {
   font-size: 18px;
   padding: 0.25em 0.4em;

examples/introduction.ipynb

@@ -18,18 +18,18 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 6,
+   "execution_count": 2,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "b9d65f4968cd49c29b1377a964688549",
+       "model_id": "02d172394132421a994a671c9ebea9ec",
        "version_major": 2,
        "version_minor": 0
       },
       "text/plain": [
-       "ExampleWidget(value=None, labels=['person', 'date', 'org'], spans=[{'start': 6, 'end': 16, 'text': 'March 2014…"
+       "AnnotateWidget(value=None, labels=['person', 'date', 'org'], spans=[{'start': 6, 'end': 16, 'text': 'March 201…"
       ]
      },
      "metadata": {},
@@ -40,7 +40,7 @@
     "abstract = \"\"\"\n",
     "In a March 2014 interview, Apple designer Jonathan Ive used the iPhone as an example of Apple's ethos of creating high - quality, life - changing products. \n",
     "\"\"\"\n",
-    "w = jupyterannotate.ExampleWidget(\n",
+    "w = jupyterannotate.AnnotateWidget(\n",
     "    text=abstract,\n",
     "    labels=[\"person\", \"date\", \"org\"],\n",
     "    spans=[{'start': 6, 'end': 16, 'text': 'March 2014', 'label': 'date'}, {'start': 43, 'end': 55, 'text': 'Jonathan Ive', 'label': 'person'}]\n",
@@ -50,23 +50,81 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 8,
+   "execution_count": 3,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "text/plain": [
-       "[{'start': 6, 'end': 16, 'text': 'March 2014', 'label': 'date'}]"
+       "[{'start': 6, 'end': 16, 'text': 'March 2014', 'label': 'date'},\n",
+       " {'start': 43, 'end': 55, 'text': 'Jonathan Ive', 'label': 'person'}]"
       ]
      },
-     "execution_count": 8,
+     "execution_count": 3,
      "metadata": {},
      "output_type": "execute_result"
     }
    ],
    "source": [
     "w.spans"
    ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "83936e8edc8047638f3f7645ed238180",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "AnnotateWidget(value=None, labels=['condition', 'intervention', 'outcome'], text='\\nBackground: Despite advanc…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "abstract = \"\"\"\n",
+    "Background: Despite advances in targeted therapy, treatment options for metastatic NSCLC progressing after initial therapy remains limited. HSP90 is an ATP-dependent molecular chaperone that plays a vital role in protein stabilization. Some HSP90 client proteins are key regulators in cell proliferation and survival. Many mutant oncoproteins are more dependent on HSP90 for proper folding and stability compared to their wildtype counterparts. AUY922 potently inhibits HSP90, showing preclinical activity in a wide range of cancer cell lines, including NSCLC (1). Phase I clinical trials established 70 mg/m2 as the dose for further development (2). A single agent phase II trial demonstrated clinical activity of AUY922 in NSCLC, particularly molecular subsets with driver mutations in the known HSP90 client proteins, epidermal growth factor receptor (EGFR) and anaplastic lymphoma kinase (ALK) (3). Pemetrexed is a folate antimetabolite chemotherapeutic approved for use in advanced non-squamous, NSCLC. In pre-clinical models, mRNA for dihydrofolate reductase (DHFR), a target of pemetrexed, reliably decreased in response to AUY922 exposure (1). These findings suggest that the combination of AUY922 and premetrexed in NSCLC is worthy of investigation. Methods: Adult patients with previously treated stage IV non-squamous, NSCLC, measureable disease per RECIST 1.1, ECOG performance status < 2, and life expectancy > 3 months are eligible for this open label phase Ib clinical trial (NCT01784640). A standard 3 x 3 design will evaluate 3 cohorts, all with pemetrexed at the standard 500 mg/m2 dose, plus: AUY922 40 mg/m2, 55 mg/ m2, and 70 mg/m2 qwk. Enrollment of the 70 mg/m2 qwk cohort has been open since November 2014 and is currently ongoing. After the optimal dose for further evaluation is determined, an additional 20 patients will be enrolled at that dose. This expansion phase will focus on patients with EGFR mutations and ALK gene rearrangements. The primary endpoint is safety and tolerability of AUY922 combined with pemetrexed in patients with previously treated non-squamous NSCLC.\"\"\"\n",
+    "other = jupyterannotate.AnnotateWidget(\n",
+    "    text=abstract,\n",
+    "    labels=[\"condition\", \"intervention\", \"outcome\"],\n",
+    ")\n",
+    "other"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "[]"
+      ]
+     },
+     "execution_count": 5,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "other.spans"
+   ]
   }
  ],
  "metadata": {

jupyterannotate/__init__.py

@@ -4,9 +4,10 @@
 # Copyright (c) Stuart Quin.
 # Distributed under the terms of the Modified BSD License.
 
-from .example import ExampleWidget
+from .annotate import AnnotateWidget
 from ._version import __version__, version_info
 
+
 def _jupyter_labextension_paths():
     """Called by Jupyter Lab Server to detect if it is a valid labextension and
     to install the widget
@@ -19,10 +20,12 @@ def _jupyter_labextension_paths():
         from `src` directory into <jupyter path>/labextensions/<dest> directory
         during widget installation
     """
-    return [{
-        'src': 'labextension',
-        'dest': 'jupyterannotate',
-    }]
+    return [
+        {
+            "src": "labextension",
+            "dest": "jupyterannotate",
+        }
+    ]
 
 
 def _jupyter_nbextension_paths():
@@ -41,9 +44,11 @@ def _jupyter_nbextension_paths():
     require: Path to importable AMD Javascript module inside the
         <jupyter path>/nbextensions/<dest> directory
     """
-    return [{
-        'section': 'notebook',
-        'src': 'nbextension',
-        'dest': 'jupyterannotate',
-        'require': 'jupyterannotate/extension'
-    }]
+    return [
+        {
+            "section": "notebook",
+            "src": "nbextension",
+            "dest": "jupyterannotate",
+            "require": "jupyterannotate/extension",
+        }
+    ]

jupyterannotate/example.py jupyterannotate/annotate.py

@@ -13,13 +13,13 @@
 from ._frontend import module_name, module_version
 
 
-class ExampleWidget(DOMWidget, ValueWidget):
+class AnnotateWidget(DOMWidget, ValueWidget):
     """TODO: Add docstring here"""
 
-    _model_name = Unicode("ExampleModel").tag(sync=True)
+    _model_name = Unicode("AnnotateModel").tag(sync=True)
     _model_module = Unicode(module_name).tag(sync=True)
     _model_module_version = Unicode(module_version).tag(sync=True)
-    _view_name = Unicode("ExampleView").tag(sync=True)
+    _view_name = Unicode("AnnotateView").tag(sync=True)
     _view_module = Unicode(module_name).tag(sync=True)
     _view_module_version = Unicode(module_version).tag(sync=True)
 

jupyterannotate/tests/test_example.py jupyterannotate/tests/test_annotate.py

@@ -6,9 +6,9 @@
 
 import pytest
 
-from ..example import ExampleWidget
+from jupyterannotate.annotate import AnnotateWidget
 
 
-def test_example_creation_blank():
-    w = ExampleWidget()
-    assert w.value == 'Hello World'
+def test_annotate_widget():
+    w = AnnotateWidget()
+    assert w.spans == []

package-lock.json

@@ -71,6 +71,7 @@
     "jest": "^26.0.0",
     "mkdirp": "^0.5.1",
     "npm-run-all": "^4.1.3",
+    "preact": "^10.10.1",
     "prettier": "^2.0.5",
     "rimraf": "^2.6.2",
     "source-map-loader": "^1.1.3",

package.json

@@ -4,23 +4,20 @@
 // Add any needed widget imports here (or from controls)
 // import {} from '@jupyter-widgets/base';
 
-import { createTestModel } from './utils';
+import { createTestModel } from "./utils";
 
-import { ExampleModel } from '..';
+import { AnnotateModel } from "..";
 
-describe('Example', () => {
-  describe('ExampleModel', () => {
-    it('should be createable', () => {
-      const model = createTestModel(ExampleModel);
-      expect(model).toBeInstanceOf(ExampleModel);
-      expect(model.get('value')).toEqual('Hello World');
-    });
+describe("AnnotateModel", () => {
+  it("should be createable", () => {
+    const model = createTestModel(AnnotateModel);
+    expect(model).toBeInstanceOf(AnnotateModel);
+  });
 
-    it('should be createable with a value', () => {
-      const state = { value: 'Foo Bar!' };
-      const model = createTestModel(ExampleModel, state);
-      expect(model).toBeInstanceOf(ExampleModel);
-      expect(model.get('value')).toEqual('Foo Bar!');
-    });
+  it("should be createable with a value", () => {
+    const state = { text: "Foo Bar!" };
+    const model = createTestModel(AnnotateModel, state);
+    expect(model).toBeInstanceOf(AnnotateModel);
+    expect(model.get("text")).toEqual("Foo Bar!");
   });
 });