predefined options working

timkpaine · timkpaine · commit 7040561dc220 · 2018-06-18T14:09:56.000-04:00
diff --git a/Makefile b/Makefile
@@ -4,6 +4,9 @@ run:  ## clean and make target, run target
 runt:  ## clean and make target, run target (text)
 	python3 -m nannotate text
 
+runt2:  ## clean and make target, run target (text)
+	python3 -m nannotate text nooptions
+
 runi:  ## clean and make target, run target (inline)
 	python3 -m nannotate inline
 
diff --git a/README.md b/README.md
@@ -13,4 +13,4 @@ Automate ML dataset labelling
 
 
 
-![](https://raw.githubusercontent.com/timkpaine/nannotate/master/docs/img/demo.gif)
+![](https://raw.githubusercontent.com/timkpaine/nannotate/master/docs/img/demo_full.gif)
diff --git a/docs/img/demo_full.gif b/docs/img/demo_full.gif
diff --git a/docs/index.rst b/docs/index.rst
@@ -9,9 +9,9 @@ An orchestration layer for plots and tables, dummy datasets, research, reports,
 
 |build-status| |issues| |waffle| |codecov| |bch| |pypil| |pypiv| |npm| |docs|
 
-.. image:: ./img/demo.gif
+.. image:: ./img/demo_full.gif
     :scale: 100%
-    :alt: demo.gif
+    :alt: demo_full.gif
 
 
 .. toctree::
diff --git a/docs/quickstart.rst b/docs/quickstart.rst
@@ -13,3 +13,9 @@ Notebook
 .. image:: ./img/demo_notebook.gif
     :scale: 100%
     :alt: demo_notebook.gif
+
+Predefined Options
+===================
+.. image:: ./img/demo_full.gif
+    :scale: 100%
+    :alt: demo_full.gif
diff --git a/nannotate/__main__.py b/nannotate/__main__.py
@@ -3,12 +3,18 @@
 import pandas as pd
 from pprint import pprint
 from .annotate import *
+from .utils import get_spacy_pos
 
 f = faker.Faker()
 
 if 'text' in sys.argv:
     print('annotating text')
-    dat = pd.DataFrame([{'text': f.text()} for i in range(10)])
+    spacy_options = get_spacy_pos()
+
+    if 'nooptions' in sys.argv:
+        dat = pd.DataFrame([{'text': f.text()} for i in range(10)])
+    else:
+        dat = pd.DataFrame([{'text': f.text(), 'options': spacy_options if i % 2 == 0 else []} for i in range(10)])
     options = {'schema': 'text', 'port': 8080}
     standalone = True
 elif 'inline' in sys.argv:
diff --git a/nannotate/assets/bundle.js b/nannotate/assets/bundle.js
diff --git a/nannotate/utils.py b/nannotate/utils.py
@@ -12,3 +12,12 @@ def in_ipynb():
             return False
         return False
     return False
+
+
+def get_spacy_pos():
+    import spacy
+    ret = []
+    for item in dir(spacy.parts_of_speech):
+        if not item.startswith('__') and item != 'univ_pos_t':
+            ret.append(item)
+    return ret
diff --git a/packages/core/src/annotate.ts b/packages/core/src/annotate.ts
@@ -24,37 +24,43 @@ class AnnotateWidget extends Widget {
     let controls = document.createElement('div');
     controls.classList.add('nano-controls');
 
+    let options = document.createElement('div');
+    options.classList.add('nano-controls-options');
+
     let input = document.createElement('textarea');
-    input.classList.add('nano-io-controls-input');
+    input.classList.add('nano-controls-input');
     controls.appendChild(input);
 
-    let io_controls = document.createElement('div');
-    io_controls.classList.add('nano-io-controls');
+    let controls_buttons = document.createElement('div');
+    controls_buttons.classList.add('nano-controls-buttons');
 
     let next = document.createElement('div');
+    next.classList.add('next-button');
     next.textContent = 'Next';
     next.onclick = () => {
       this._manager._ws.send(JSON.stringify({'command': 'N'}));
     }
 
     let previous = document.createElement('div');
     previous.textContent = 'Previous';
+    previous.classList.add('prev-button');
     previous.onclick = () => {
       this._manager._ws.send(JSON.stringify({'command': 'P'}));
     }
 
-    let skip = document.createElement('div');
-    skip.textContent = 'Skip';
-    skip.onclick = () => {
-      this._manager._ws.send(JSON.stringify({'command': 'N'}));
-    }
+    // let skip = document.createElement('div');
+    // skip.textContent = 'Skip';
+    // skip.onclick = () => {
+    //   this._manager._ws.send(JSON.stringify({'command': 'N'}));
+    // }
 
-    io_controls.appendChild(next);
-    io_controls.appendChild(previous);
-    io_controls.appendChild(skip);
+    controls_buttons.appendChild(next);
+    controls_buttons.appendChild(previous);
+    // controls_buttons.appendChild(skip);
 
+    io_holder.appendChild(options);
     io_holder.appendChild(controls);
-    io_holder.appendChild(io_controls);
+    io_holder.appendChild(controls_buttons);
 
     div.appendChild(data_holder);
     div.appendChild(io_holder);
@@ -80,11 +86,24 @@ class AnnotateWidget extends Widget {
   }
 
   get textAreaNode(): HTMLTextAreaElement {
-    return this.node.getElementsByClassName('nano-io-controls-input')[0] as HTMLTextAreaElement;
+    return this.node.getElementsByClassName('nano-controls-input')[0] as HTMLTextAreaElement;
+  }
+
+  get nextButtonNode(): HTMLDivElement {
+    return this.node.querySelector('div.next-button') as HTMLDivElement;
   }
 
+  get prevButtonNode(): HTMLDivElement {
+    return this.node.querySelector('div.prev-button') as HTMLDivElement;
+  }
+
+  get optionsNode(): HTMLDivElement {
+    return this.node.querySelector('div.nano-controls-options') as HTMLDivElement;
+  }
+
+
   onAfterAttach(msg: Message) : void {
-    this._manager = new DataManager(this.dataNode, this._base, this._comm);
+    this._manager = new DataManager(this, this._base, this._comm);
     let textarea = this.textAreaNode;
 
     textarea.onkeyup = (event: KeyboardEvent) => {
diff --git a/packages/core/src/datagrid.ts b/packages/core/src/datagrid.ts
@@ -1,12 +1,14 @@
 import {DataModel} from '@phosphor/datagrid';
 import {DataSource, DataJSON} from './datasource';
+import {AnnotateWidget} from './annotate';
 
 
 export
 class GridHelper extends DataModel implements DataSource {
-  constructor(ws: WebSocket | any) {
+  constructor(annotate: AnnotateWidget, ws: WebSocket | any) {
     super();
     this._ws = ws;
+    this._annotate = annotate;
   }
 
   rowCount(region: DataModel.RowRegion): number {
@@ -103,4 +105,5 @@ class GridHelper extends DataModel implements DataSource {
 
   private _data: object[][] = [];
   public _ws: WebSocket | any;
+  private _annotate: AnnotateWidget;
 }
diff --git a/packages/core/src/datamanager.ts b/packages/core/src/datamanager.ts
@@ -5,12 +5,14 @@ import {Session} from '@jupyterlab/services';
 import {GridHelper} from './datagrid';
 import {TextHelper} from './textdata';
 import {DataSource} from './datasource';
+import {AnnotateWidget} from './annotate';
 
 
 export
 class DataManager{
-    constructor(bind: HTMLDivElement, base = '', comm = false){
-        this._bind = bind;
+    constructor(bind: AnnotateWidget, base = '', comm = false){
+        this._annotate = bind;
+        this._bind = bind.dataNode;
         let path1 = window.location.host;
         let path2 = window.location.pathname;
 
@@ -77,14 +79,14 @@ class DataManager{
                 rowBackgroundColor: i => i % 2 === 0 ? 'rgba(138, 172, 200, 0.3)' : '',
                 columnBackgroundColor: i => i % 2 === 0 ? 'rgba(100, 100, 100, 0.1)' : ''};
 
-                let model = new GridHelper(this._ws);
+                let model = new GridHelper(this._annotate, this._ws);
                 let grid = new DataGrid({ style: blueStripeStyle });
                 grid.model = model;
                 Widget.attach(grid, this._bind);
                 this._grid = grid;
                 this._helper = model;
             } else if (this._type === 'text'){
-                let model = new TextHelper(this._ws);
+                let model = new TextHelper(this._annotate, this._ws);
                 Widget.attach(model, this._bind);
                 this._helper = model;
             }
@@ -125,6 +127,7 @@ class DataManager{
   _helper: DataSource;
   _loaded: boolean;
 
+  _annotate: AnnotateWidget;
   _grid: DataGrid;
   _bind: HTMLDivElement;
 }
diff --git a/packages/core/src/datasource.ts b/packages/core/src/datasource.ts
@@ -2,7 +2,6 @@ export
 interface DataSource {
   fromServer(data: DataJSON): void;
   toServer(msg: string): void;
-  
   _ws: WebSocket;
 }
 
diff --git a/packages/core/src/textdata.ts b/packages/core/src/textdata.ts
@@ -1,15 +1,17 @@
 import {Widget} from '@phosphor/widgets';
 import {Message} from '@phosphor/messaging';
 import {DataSource, DataJSON} from './datasource';
+import {AnnotateWidget} from './annotate';
 
 
 export
 class TextHelper extends Widget implements DataSource {
-  constructor(ws: WebSocket | any) {
+  constructor(annotate: AnnotateWidget, ws: WebSocket | any) {
     let node = Private.createNode();
     super({ node: node });
     this._ws = ws;
     this._div = node;
+    this._annotate = annotate;
   }
 
   public fromServer(data: DataJSON): void {
@@ -33,12 +35,16 @@ class TextHelper extends Widget implements DataSource {
     let p = document.createElement('p');
     p.classList.add('data');
 
+    let i = 0;
     for(let line of x['text'].split('\n')){
       for(let s of line.split(' ')){
         let span = document.createElement('span');
         span.onclick = function(){this.classList.toggle('selected')};
         span.textContent = s;
         span.setAttribute('value', s);
+        span.setAttribute('index', i.toString());
+        i += 1;
+
         span.classList.add('word');
 
         let span2 = document.createElement('span');
@@ -66,10 +72,12 @@ class TextHelper extends Widget implements DataSource {
       let _t = this;
       for(let tag of Object.keys(x['annotation']['phrases'])){
         let phrase = x['annotation']['phrases'][tag]
-        for(let word of phrase){
+        for(let mapping of phrase){
+          let word = mapping['word'];
+          let index = mapping['index'];
           let spans = p.querySelectorAll('span.word');
           for (let i = 0; i < spans.length; i++){
-            if (spans[i].getAttribute('value') === word){
+            if (spans[i].getAttribute('value') === word && i == index){
               spans[i].lastChild!.textContent = tag;
               (spans[i].lastChild! as HTMLSpanElement).setAttribute('value', tag);
               (spans[i].lastChild! as HTMLSpanElement).onclick = function(event: MouseEvent){
@@ -84,6 +92,35 @@ class TextHelper extends Widget implements DataSource {
         }
       }
     }
+
+    if ('options' in x) {
+      //FIXME
+      let options = this._annotate.optionsNode;
+      while(options.lastChild){
+        options.removeChild(options.lastChild);
+      }
+
+      if (Object.keys(x['options']).length == 0){
+        options.style.flex = '0';
+      } else {
+        options.style.flex = '1';
+
+        for(let option in x['options']){
+          let opt_div = document.createElement('div');
+          opt_div.classList.add('option');
+          opt_div.textContent = x['options'][option];
+
+          let _t = this;
+          opt_div.onclick = function(){
+              _t.toServer(this.textContent);
+          }
+          options.appendChild(opt_div);
+        }
+      }
+    } else {
+      let options = this._annotate.optionsNode;
+      options.style.flex = '0';
+    }
     this._div.appendChild(span);
   };
 
@@ -103,15 +140,15 @@ class TextHelper extends Widget implements DataSource {
           }
       }
 
-      let phrases: {[key: string]: [string]} = {};
+      let phrases: {[key: string]: [{word:string, index:number}]} = {};
 
       let all_spans = this._div.querySelectorAll('span.word');
       for(let i = 0; i < all_spans.length; i++){
         if ((all_spans[i].lastChild! as HTMLSpanElement).getAttribute('value')! != ''){
           if (!((all_spans[i].lastChild! as HTMLSpanElement).getAttribute('value')! in phrases)){
-            phrases[(all_spans[i].lastChild! as HTMLSpanElement).getAttribute('value')!] = [(all_spans[i] as HTMLSpanElement).getAttribute('value')!.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,"")];
+            phrases[(all_spans[i].lastChild! as HTMLSpanElement).getAttribute('value')!] = [{word:(all_spans[i] as HTMLSpanElement).getAttribute('value')!.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,""), index: parseInt((all_spans[i] as HTMLSpanElement).getAttribute('index')!)}];
           } else {
-            phrases[(all_spans[i].lastChild! as HTMLSpanElement).getAttribute('value')!].push((all_spans[i] as HTMLSpanElement).getAttribute('value')!.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,""));
+            phrases[(all_spans[i].lastChild! as HTMLSpanElement).getAttribute('value')!].push({word:(all_spans[i] as HTMLSpanElement).getAttribute('value')!.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,""), index:parseInt((all_spans[i] as HTMLSpanElement).getAttribute('index')!)});
           }
         }
       }
@@ -143,6 +180,7 @@ class TextHelper extends Widget implements DataSource {
 
   public _ws: WebSocket | any;
   private _div: HTMLDivElement;
+  private _annotate: AnnotateWidget;
 }
 
 namespace Private {
diff --git a/packages/core/style/annotate.css b/packages/core/style/annotate.css

Original file line number	Diff line number	Diff line change
`@@ -13,4 +13,4 @@ Automate ML dataset labelling`
`13`	`13`
`14`	`14`
`15`	`15`
`16`		`-![](https://raw.githubusercontent.com/timkpaine/nannotate/master/docs/img/demo.gif)`
	`16`	`+![](https://raw.githubusercontent.com/timkpaine/nannotate/master/docs/img/demo_full.gif)`