Output spans to Python without color, update Examples

Author: stuartquin

examples/Example.ipynb

@@ -0,0 +1,121 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "id": "ef30f8e3-f583-4b8f-beda-27c5c0797f78",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import jupyterannotate"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "36d45960-3b14-4a33-a7ab-06d506812b9e",
+   "metadata": {},
+   "source": [
+    "# Basic Usage"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "id": "06362c99-b674-4a4a-bfd5-159ba7c3d9fa",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "LABELS = [\"Organization\", \"Product\", \"Person\", \"Country\", \"Date\", \"Quantity\"]\n",
+    "\n",
+    "NEWS_HEADLINES = [\n",
+    "    \"Oracle introduced a new BI platform yesterday, Business Intelligence 10g that rolls up into one solution all of their BI tools. However, more interesting than the nitty-gritty details of what is included is the back story taking place at the same time.\",\n",
+    "    \"Microsoft will delay the release of its SP2 update for another week to fix software glitches. But not everyone is quite so eager to install the SP2 update for Windows XP. In fact, many companies have demanded the ability to prevent their ...\",\n",
+    "    \"SAN JOSE, Calif. - In a sign that Google Inc.'s initial public offering isn't as popular as expected, the company lowered its estimated price range to between \\$85 and \\$95 per share, down from the earlier prediction of \\$108 and \\$135 per share...\",\n",
+    "]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "id": "b0af5576-99f6-4c81-8411-37a44df69fc3",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "2efc9029e27c4548ab03763df8ab9217",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "AnnotateWidget(value=None, docs=['Oracle introduced a new BI platform yesterday, Business Intelligence 10g tha…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "annotation_widget = jupyterannotate.AnnotateWidget(\n",
+    "    docs=NEWS_HEADLINES,\n",
+    "    labels=LABELS\n",
+    ")\n",
+    "annotation_widget"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "id": "926883f8-328f-4c2f-b7e7-99999c9cc6b1",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "[[{'start': 0, 'end': 6, 'text': 'Oracle', 'label': 'Organization'},\n",
+       "  {'start': 69, 'end': 72, 'text': '10g', 'label': 'Quantity'}],\n",
+       " [{'start': 0, 'end': 9, 'text': 'Microsoft', 'label': 'Organization'},\n",
+       "  {'start': 159, 'end': 169, 'text': 'Windows XP', 'label': 'Product'}],\n",
+       " [{'start': 34, 'end': 40, 'text': 'Google', 'label': 'Organization'}]]"
+      ]
+     },
+     "execution_count": 5,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "annotation_widget.spans"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "b89e2cc0-9ce5-43ff-a4f6-e1908a9e181f",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.9.13"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

examples/introduction.ipynb

@@ -6,7 +6,7 @@ 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());
+const LABELS = RANGE.map(() => ({ text: faker.random.word(), color: "red" }));
 const DOCUMENTS = RANGE.map(() => faker.hacker.phrase());
 
 describe("Annotate", () => {
@@ -65,13 +65,13 @@ describe("Annotate", () => {
             start: 8,
             end: 12,
             text: targetText,
-            label: { color: "red", text: LABELS[0] },
+            label: LABELS[0],
           },
         ],
       ])
     );
 
-    const span = await findByTitle(LABELS[0]);
+    const span = await findByTitle(LABELS[0].text);
     expect(span.textContent).toEqual(targetText);
   });
 
@@ -103,12 +103,12 @@ describe("Annotate", () => {
           start: 8,
           end: 12,
           text: targetText,
-          label: { color: "red", text: LABELS[0] },
+          label: LABELS[0],
         },
       ],
     ]);
 
-    const span = await findByTitle(LABELS[0]);
+    const span = await findByTitle(LABELS[0].text);
     expect(span.textContent).toEqual(targetText);
   });
 });