Prefill initial spans

Author: stuartquin

css/widget.css

@@ -8,22 +8,21 @@
 }
 .label {
   margin: 5px 10px 5px 0;
-  border: 1px solid white;
   cursor: pointer;
   display: block;
   padding: 1px 10px;
   position: relative;
   border-radius: 4px;
   font-size: 16px;
+
+  background-color: #D1D5DB;
 }
 .selected {
   background: white;
-  color: rgb(31, 41, 55);
 }
 .labelContainer {
   display: flex;
   flex-grow: 1;
-  color: #fff;
   font-weight: bold;
   font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
   text-transform: uppercase;
@@ -34,10 +33,10 @@
 .topBar {
   display: flex;
   align-items: center;
-  color: #fff;
+  color: #1F2937;
   width: 100%;
   padding: 12px;
-  background: rgb(31, 41, 55);
+  background: #F3F4F6;
   box-sizing: border-box;
   font-size: 20px;
 }

examples/introduction.ipynb

@@ -18,13 +18,13 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 4,
+   "execution_count": 2,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "e67aa91552c84d7bb5f20bacb49aa9a5",
+       "model_id": "2ed48d10079542f2b9cc81bce88d0614",
        "version_major": 2,
        "version_minor": 0
       },
@@ -43,16 +43,33 @@
     "  \"We investigated the influence of interfraction interval (IFI) on treatment outcome in patients with stage III non-small-cell lung cancer (NSCLC) treated with hyperfractionated radiation therapy (Hfx RT) with or without concurrent chemotherapy (CHT). During 3 randomized phase III and 1 phase II study, a total of 536 patients were treated with Hfx RT alone or with concurrent carboplatin/etoposide. Two hundred eighty-five patients were treated with IFI of 4.5-5.0 hours, while 251 patients were treated with IFI of 5.5-6.0 hours. (4.5-5.0 hours) IFI led to better overall survival (OS) (P = 0.0000) and local recurrence-free survival (LRFS) (P = 0.0000). Multivariate analyses showed IFI to be an independent prognosticator of both OS and LRFS. These results were confirmed when we separated all patients (n = 536) into those treated with Hfx RT only (n = 127) and those treated with concur-rent RT/CHT (n = 409). Various RT-related high-grade acute toxicity was not different between the 2 IFI, but patients treated with shorter IFI had a significantly higher incidence of hematological toxicity (P = 0.002). None of the late high-grade toxicities were different between the 2 interfraction intervals. Using regression analysis, it was shown that IFI was not a significant predictor of any of acute or late high-grade (=3) toxicity. IFI is an important prognosticator of OS and LRFS in patients with stage III NSCLC treated with Hfx RT with or without concurrent carboplatin/etoposide. IFI led to higher incidence only of hematological toxicity, but was not predictive of any acute or late high-grade (=3) toxicity. A carefully designed randomized trial seems necessary to give better insight into the issue of optimal IFI in this disease.\",\n",
     "]\n",
     "\n",
+    "initial_spans = [\n",
+    "[\n",
+    "    {'start': 83, 'end': 88, 'text': 'NSCLC', 'label': 'condition'},\n",
+    "    {'start': 1475, 'end': 1485, 'text': 'pemetrexed', 'label': 'intervention'},\n",
+    "    {'start': 1991,\n",
+    "   'end': 2024,\n",
+    "   'text': 'safety and tolerability of AUY922',\n",
+    "   'label': 'outcome'}\n",
+    "],\n",
+    " [],\n",
+    " [{'start': 110,\n",
+    "   'end': 136,\n",
+    "   'text': 'non-small-cell lung cancer',\n",
+    "   'label': 'condition'}]\n",
+    "]\n",
+    "\n",
     "other = jupyterannotate.AnnotateWidget(\n",
     "    docs=docs,\n",
+    "    spans=initial_spans,\n",
     "    labels=[\"condition\", \"intervention\", \"outcome\"],\n",
     ")\n",
     "other"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 6,
+   "execution_count": 3,
    "metadata": {},
    "outputs": [
     {
@@ -71,7 +88,7 @@
        "   'label': 'condition'}]]"
       ]
      },
-     "execution_count": 6,
+     "execution_count": 3,
      "metadata": {},
      "output_type": "execute_result"
     }

src/annotate.ts

@@ -4,217 +4,3 @@ export interface Span {
   text: string;
   label: string;
 }
-
-interface Props {
-  [key: string]: any;
-}
-interface Component {
-  render: (props?: Props) => HTMLElement;
-}
-
-const Labels = (
-  labels: string[],
-  onLabelChange: (label: string) => void
-): Component => {
-  const el = document.createElement("div");
-  el.classList.add("labelContainer");
-
-  function render(props?: Props) {
-    el.innerHTML = "";
-
-    labels.forEach((label) => {
-      const labelEl = document.createElement("div");
-      labelEl.classList.add("label");
-      if (label === props?.selectedLabel) {
-        labelEl.classList.add("selected");
-      }
-      labelEl.innerHTML = label;
-      labelEl.addEventListener("click", () => onLabelChange(label));
-      el.appendChild(labelEl);
-    });
-
-    return el;
-  }
-
-  return {
-    render,
-  };
-};
-
-const Nav = (onNext: () => void, onPrev: () => void) => {
-  const el = document.createElement("div");
-  el.classList.add("nav");
-
-  function render() {
-    el.innerHTML = "";
-    const prevEl = document.createElement("div");
-    prevEl.classList.add("navLink", "prev");
-    prevEl.innerHTML = "⏵";
-    prevEl.addEventListener("click", onPrev);
-
-    const nextEl = document.createElement("div");
-    nextEl.classList.add("navLink", "next");
-    nextEl.innerHTML = "⮕";
-    nextEl.addEventListener("click", onNext);
-
-    el.appendChild(prevEl);
-    el.appendChild(nextEl);
-
-    return el;
-  }
-
-  return { render };
-};
-
-const TopBar = (
-  labels: string[],
-  onLabelChange: (label: string) => void,
-  onNext: () => void,
-  onPrev: () => void
-): Component => {
-  const el = document.createElement("div");
-  el.classList.add("topBar");
-  const labelComponent = Labels(labels, onLabelChange);
-  const navComponent = Nav(onNext, onPrev);
-
-  function render(props?: Props) {
-    el.innerHTML = "";
-    el.appendChild(
-      labelComponent.render({ selectedLabel: props?.selectedLabel })
-    );
-    el.appendChild(navComponent.render());
-    return el;
-  }
-
-  return {
-    render,
-  };
-};
-
-export function annotate(
-  initialText: string,
-  labels: string[],
-  initialSpans: Span[],
-  onChange: (spans: Span[]) => void
-): HTMLElement {
-  // TODO this is state
-  let spans = initialSpans || [];
-  let selectedLabel = labels.length ? labels[0] : "";
-
-  const wrapperEl = document.createElement("div");
-  const contentEl = document.createElement("div");
-  contentEl.classList.add("content");
-  contentEl.innerHTML = initialText;
-
-  const onChangeLabel = (label: string) => {
-    if (selectedLabel !== label) {
-      selectedLabel = label;
-      navComponent.render({ selectedLabel });
-    }
-  };
-
-  const onNext = () => {
-    console.log("Next");
-  };
-
-  const onPrev = () => {
-    console.log("Prev");
-  };
-
-  wrapperEl.innerHTML = "";
-  const navComponent = TopBar(labels, onChangeLabel, onNext, onPrev);
-  wrapperEl.appendChild(navComponent.render({ selectedLabel }));
-  wrapperEl.appendChild(contentEl);
-
-  function getSpanEl(text: string, span: Span) {
-    const spanEl = document.createElement("span");
-    spanEl.classList.add("span");
-    const content = text.slice(span.start, span.end);
-    spanEl.title = content;
-
-    const spanLabelEl = document.createElement("span");
-    spanLabelEl.classList.add("spanLabel");
-    spanLabelEl.innerHTML = span.label;
-
-    const spanContentEl = document.createElement("span");
-    spanContentEl.innerHTML = content;
-
-    spanEl.appendChild(spanContentEl);
-    spanEl.appendChild(spanLabelEl);
-
-    spanEl.addEventListener("click", () => {
-      spans = spans.filter((s: Span) => s.start !== span.start);
-      updateSpans();
-    });
-
-    return spanEl;
-  }
-
-  function renderSpans() {
-    contentEl.innerHTML = "";
-    contentEl.appendChild(getHighlightedText(initialText));
-  }
-
-  function updateSpans() {
-    onChange(spans);
-    renderSpans();
-  }
-
-  function getHighlightedText(text: string) {
-    const textEl = document.createElement("div");
-    let prevOffset = 0;
-
-    spans
-      .sort((a, b) => (a.start > b.start ? 1 : -1))
-      .forEach((span) => {
-        const prevEl = document.createElement("span");
-        prevEl.dataset.offset = `${prevOffset}`;
-        prevEl.innerHTML = text.slice(prevOffset, span.start);
-        textEl.appendChild(prevEl);
-        textEl.appendChild(getSpanEl(text, span));
-
-        prevOffset = span.end;
-      });
-
-    const prevEl = document.createElement("span");
-    prevEl.dataset.offset = `${prevOffset}`;
-    prevEl.innerHTML = text.slice(prevOffset);
-    textEl.appendChild(prevEl);
-
-    return textEl;
-  }
-
-  function onSelect(event: any): void {
-    const dataset = event.target?.dataset || {};
-    const offset = parseInt(dataset.offset || "0", 10);
-    const selected = window.getSelection();
-    const selectedText = selected?.toString() || "";
-    if (!selectedText.trim() || !selected) {
-      return;
-    }
-
-    const start =
-      selected.anchorOffset > selected.focusOffset
-        ? selected.focusOffset
-        : selected.anchorOffset;
-    const end =
-      selected.anchorOffset < selected.focusOffset
-        ? selected.focusOffset
-        : selected.anchorOffset;
-
-    spans = spans.concat([
-      {
-        start: start + offset,
-        end: end + offset,
-        text: selectedText,
-        label: selectedLabel,
-      },
-    ]);
-    updateSpans();
-  }
-
-  contentEl.addEventListener("mouseup", onSelect);
-  renderSpans();
-
-  return wrapperEl;
-}

src/components/Annotate.ts

@@ -8,19 +8,23 @@ import Highlightable from "./Highlightable";
 interface Props {
   docs: string[];
   labels: string[];
+  initialSpans: Span[][];
   onUpdateSpans: (span: Span[][]) => void;
 }
 
 export default function Annotate({
   docs,
   labels,
+  initialSpans,
   onUpdateSpans,
 }: Props): VNode {
   const totalDocs = docs.length;
   const [selectedLabel, setSelectedLabel] = useState<string>("");
   const [docIndex, setDocIndex] = useState<number>(0);
   const [docSpans, setDocSpans] = useState<Span[][]>(
-    [...Array(totalDocs).keys()].map(() => [])
+    initialSpans.length
+      ? initialSpans
+      : [...Array(totalDocs).keys()].map(() => [])
   );
 
   const text = useMemo<string>(() => {