Removable spans

Author: stuartquin

examples/introduction.ipynb

@@ -18,13 +18,13 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 2,
+   "execution_count": 8,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "1829eb118f2144af87b08c70337954ba",
+       "model_id": "5ef05f34ae604a9bb8e869e70da5feaf",
        "version_major": 2,
        "version_minor": 0
       },
@@ -50,17 +50,18 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 3,
+   "execution_count": 10,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "text/plain": [
-       "[{'start': 6, 'end': 16, 'text': 'March 2014', 'label': 'date'},\n",
-       " {'start': 43, 'end': 55, 'text': 'Jonathan Ive', 'label': 'person'}]"
+       "[[{'start': 6, 'end': 16, 'text': 'March 2014', 'label': 'date'},\n",
+       "  {'start': 89, 'end': 94, 'text': 'Apple', 'label': 'org'},\n",
+       "  {'start': 28, 'end': 33, 'text': 'Apple', 'label': 'org'}]]"
       ]
      },
-     "execution_count": 3,
+     "execution_count": 10,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -84,7 +85,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "16084c39ab6848f299ceac47c2a55169",
+       "model_id": "844d0d89496342618e5c5d4e6b592a1f",
        "version_major": 2,
        "version_minor": 0
       },
@@ -111,21 +112,8 @@
    ]
   },
   {
-   "cell_type": "code",
-   "execution_count": 5,
+   "cell_type": "raw",
    "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "[]"
-      ]
-     },
-     "execution_count": 5,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
    "source": [
     "other.spans"
    ]

src/components/Annotate.ts

@@ -19,7 +19,9 @@ export default function Annotate({
   const totalDocs = docs.length;
   const [selectedLabel, setSelectedLabel] = useState<string>("");
   const [docIndex, setDocIndex] = useState<number>(0);
-  const [docSpans, setDocSpans] = useState<Span[][]>([]);
+  const [docSpans, setDocSpans] = useState<Span[][]>(
+    [...Array(totalDocs).keys()].map(() => [])
+  );
 
   const text = useMemo<string>(() => {
     return docs[docIndex];

src/components/Highlightable.ts

@@ -2,14 +2,26 @@ import { h, VNode } from "preact";
 import { useEffect, useRef } from "preact/hooks";
 import { Span } from "../annotate";
 
-const SpanLabel = ({ text, label }: { text: string; label: string }): VNode => {
-  return h("span", { className: "span" }, [
+const SpanLabel = ({
+  text,
+  label,
+  onClick,
+}: {
+  text: string;
+  label: string;
+  onClick: () => void;
+}): VNode => {
+  return h("span", { className: "span", onClick }, [
     text,
     h("span", { className: "spanLabel" }, label),
   ]);
 };
 
-const getHighlightedText = (text: string, spans: Span[]): VNode[] => {
+const getHighlightedText = (
+  text: string,
+  spans: Span[],
+  onRemoveSpan: (span: Span) => void
+): VNode[] => {
   const chunks: VNode[] = [];
   let prevOffset = 0;
 
@@ -23,7 +35,13 @@ const getHighlightedText = (text: string, spans: Span[]): VNode[] => {
           text.slice(prevOffset, span.start)
         )
       );
-      chunks.push(SpanLabel({ text: span.text, label: span.label }));
+      chunks.push(
+        SpanLabel({
+          text: span.text,
+          label: span.label,
+          onClick: () => onRemoveSpan(span),
+        })
+      );
       prevOffset = span.end;
     });
   chunks.push(h("span", { "data-offset": prevOffset }, text.slice(prevOffset)));
@@ -76,6 +94,10 @@ const Highlightable = ({
     );
   }
 
+  const onRemoveSpan = (span: Span) => {
+    onUpdate(spans.filter((s) => s.start !== span.start));
+  };
+
   useEffect(() => {
     const el: any = ref.current;
     if (el) {
@@ -86,7 +108,7 @@ const Highlightable = ({
   return h(
     "div",
     { ref, className: "content" },
-    getHighlightedText(text, spans)
+    getHighlightedText(text, spans, onRemoveSpan)
   );
 };
 

src/components/Nav.ts

@@ -15,9 +15,9 @@ const Nav = ({ docIndex, totalDocs, onChangeNav }: Props): VNode => {
   };
 
   return h("div", { className: "nav" }, [
-    h("div", { onClick: onPrev }, "<"),
+    h("div", { className: "navLink", onClick: onPrev }, "<"),
     h("div", null, `${docIndex + 1} / ${totalDocs}`),
-    h("div", { onClick: onNext }, ">"),
+    h("div", { className: "navLink", onClick: onNext }, ">"),
   ]);
 };