Bi-directional data-flow, set spans in Python

Author: stuartquin

examples/introduction.ipynb

@@ -4,5 +4,5 @@
 # Copyright (c) Stuart Quin.
 # Distributed under the terms of the Modified BSD License.
 
-version_info = (0, 1, 1)
+version_info = (0, 1, 2)
 __version__ = ".".join(map(str, version_info))

jupyterannotate/_version.py

@@ -1,7 +1,7 @@
 {
   "name": "jupyterannotate",
-  "version": "0.1.1",
-  "description": "A Custom Jupyter Widget Library",
+  "version": "0.1.2",
+  "description": "A Jupyter Text Annotation Widget",
   "keywords": [
     "jupyter",
     "jupyterlab",

package.json

@@ -64,7 +64,7 @@
 
 setup_args = dict(
     name=name,
-    description="A Custom Jupyter Widget Library",
+    description="A Jupyter Text Annotation Widget",
     version=version,
     scripts=glob(pjoin("scripts", "*")),
     cmdclass=cmdclass,

setup.py

@@ -3,6 +3,7 @@ import { faker } from "@faker-js/faker";
 
 import { render, fireEvent, waitFor } from "@testing-library/preact";
 import Annotate from "../components/Annotate";
+import { Span } from "../annotate";
 
 const RANGE = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 const LABELS = RANGE.map(() => faker.random.word());
@@ -27,6 +28,7 @@ describe("Annotate", () => {
         labels: LABELS,
         initialSpans: [],
         onUpdateSpans: jest.fn(),
+        registerSpanChangeCallback: jest.fn(),
         docs: DOCUMENTS,
       })
     );
@@ -47,6 +49,7 @@ describe("Annotate", () => {
         labels: LABELS,
         initialSpans: [],
         onUpdateSpans,
+        registerSpanChangeCallback: jest.fn(),
         docs,
       })
     );
@@ -71,4 +74,41 @@ describe("Annotate", () => {
     const span = await findByTitle(LABELS[0]);
     expect(span.textContent).toEqual(targetText);
   });
+
+  test("should render spans when Python model changes", async () => {
+    let spanChangeCallback = (spans: Span[][]) => {
+      console.log(spans);
+    };
+    const onUpdateSpans = jest.fn();
+    const docs = [faker.lorem.sentence(20)];
+    const { findByTitle } = render(
+      h(Annotate, {
+        labels: LABELS,
+        initialSpans: [],
+        onUpdateSpans,
+        registerSpanChangeCallback: (callback) => {
+          spanChangeCallback = callback;
+        },
+        docs,
+      })
+    );
+
+    const targetText = docs[0].slice(8, 12);
+
+    await waitFor(() => expect(spanChangeCallback).not.toBeNull());
+
+    spanChangeCallback([
+      [
+        {
+          start: 8,
+          end: 12,
+          text: targetText,
+          label: { color: "red", text: LABELS[0] },
+        },
+      ],
+    ]);
+
+    const span = await findByTitle(LABELS[0]);
+    expect(span.textContent).toEqual(targetText);
+  });
 });

src/__tests__/Annotate.spec.ts

@@ -1,5 +1,5 @@
 import { h, VNode } from "preact";
-import { useMemo, useState } from "preact/hooks";
+import { useEffect, useMemo, useState } from "preact/hooks";
 import { ColorLabel, Span } from "../annotate";
 
 import TopBar from "./TopBar";
@@ -11,12 +11,14 @@ interface Props {
   labels: string[];
   initialSpans: Span[][];
   onUpdateSpans: (span: Span[][]) => void;
+  registerSpanChangeCallback: (callback: (span: Span[][]) => void) => void;
 }
 
 export default function Annotate({
   docs,
   labels,
   initialSpans,
+  registerSpanChangeCallback,
   onUpdateSpans,
 }: Props): VNode {
   const totalDocs = docs.length;
@@ -32,6 +34,12 @@ export default function Annotate({
     return docs[docIndex];
   }, [docIndex, docs]);
 
+  useEffect(() => {
+    registerSpanChangeCallback((spans: Span[][]) => {
+      setDocSpans(spans);
+    });
+  }, []);
+
   const onChangeLabel = (label: ColorLabel) => {
     setSelectedLabel(label);
   };

src/components/Annotate.ts

@@ -5,6 +5,7 @@ import {
   DOMWidgetModel,
   DOMWidgetView,
   ISerializers,
+  WidgetModel,
 } from "@jupyter-widgets/base";
 
 import { h, render } from "preact";
@@ -35,11 +36,26 @@ export class AnnotateView extends DOMWidgetView {
     const labels = this.model.get("labels");
     const initialSpans = this.model.get("spans") || [];
 
+    const registerSpanChangeCallback = (
+      callback: (spans: Span[][]) => void
+    ) => {
+      this.model.on(
+        "change:spans",
+        (model: WidgetModel) => {
+          if (callback) {
+            callback(model.changed.spans);
+          }
+        },
+        this
+      );
+    };
+
     const app = h(
       "div",
       { className: "app" },
       h(Annotate, {
         docs,
+        registerSpanChangeCallback,
         labels,
         initialSpans,
         onUpdateSpans: (spans: Span[][]) => this.handleChange(spans),