load external files

Author: hmsklee

css/style.css

@@ -73,7 +73,15 @@ header > button:hover {
   padding:5px;
   font-size:15px;
 }
-
+label[for="file-input"] {
+  padding:15px;
+  cursor:pointer;
+  background:steelblue;
+  color:white;
+  margin:10px 0;
+  display:inline-block;
+  border-radius:5px;
+}
 
 /* modal */
 .modal {

index.html

@@ -30,14 +30,14 @@
 <div id="brat-input" class="modal">
   <div>
     <header>
-      <span class="tab active">Load file</span>
+      <span class="tab active">Custom annotation</span>
     </header>
     <div class="page active">
-      <div>
-        <button><label for="file-input">Upload</label></button>
-        <input type="file" id="file-input" style="display:none;">
-      </div>
-      <textarea></textarea>
+      <form id="form">
+        <label for="file-input">Upload file(s)</label>
+        <input type="file" id="file-input" style="display:none;" multiple>
+      </form>
+      <textarea id="text-input"></textarea>
       <div id="error-message"></div>
     </div>
   </div>

js/ann-parser.js

@@ -105,7 +105,7 @@ const parseAnn = (function() {
         }
     }
 
-    function parse(input) {
+    function parse(textInput, annInput) {
 
         var output = {
             texts: [],
@@ -118,9 +118,17 @@ const parseAnn = (function() {
             mentions: {}
         }
 
-        let lines = input.split('\n');
+        let text, lines;
+
+        if (!annInput) {
+            let splitLines = textInput.split('\n');
+            text = splitLines[0];
+            lines = splitLines.slice(1);
+        } else {
+            text = textInput;
+            lines = annInput.split('\n');
+        }
 
-        let text = lines[0];
         if (!text) {
             output.unparsedLines = lines;
             return output;
@@ -130,7 +138,7 @@ const parseAnn = (function() {
         let unparsedLines = [];
         let mentions = {};
 
-        for (let i = 1; i < lines.length; ++i) {
+        for (let i = 0; i < lines.length; ++i) {
             const line = lines[i].trim();
             if (!line) { continue; }
 

js/main.js

@@ -25,11 +25,8 @@ const Main = (function() {
   /**
    * init:  set up singleton classes and create initial drawing
    */
-  let _initialized = false;
   function init() {
     // setup
-    if (_initialized) { return; }
-    _initialized = true;
     body = document.body.getBoundingClientRect();
     svg = SVG('main')
       .size(body.width, window.innerHeight - body.top - 10);
@@ -44,6 +41,12 @@ const Main = (function() {
     // load and render initial dataset by default
     changeDataset();
 
+    setupSVGListeners();
+    setupUIListeners();
+  } // end init
+
+
+  function setupSVGListeners() {
     // svg event listeners
     svg.on('row-resize', function(e) {
       lm.stopEditing();
@@ -104,7 +107,9 @@ const Main = (function() {
         tree.resize();
       }
     });
+  }
 
+  function setupUIListeners() {
     // window event listeners
     // resize function
     function resizeWindow() {
@@ -215,7 +220,114 @@ const Main = (function() {
         e.target.classList.remove('open');
       }
     });
+
+    document.getElementById('file-input').onchange = loadFile;
+  }
+
+  function printErrorMessage(text) {
+    document.getElementById('error-message').textContent = text;
   }
+  function clearErrorMessage() {
+    document.getElementById('error-message').textContent = '';
+  }
+  function clearFile() {
+    document.getElementById('form').reset();
+    document.getElementById('text-input') = '';
+  }
+
+  /**
+   * loadFile:  read file 
+   */
+  function loadFile(e) {
+    let files = e.target.files;
+    console.log(files);
+
+    // get extension
+    if (files.length === 1) {
+      const file = files[0];
+      let fr = new FileReader();
+      fr.readAsText(file);
+      fr.onload = parseFile;
+
+      function parseFile() {
+        clearErrorMessage();
+        const text = fr.result;
+
+        // try to coerce it into an accepted format
+        try {
+          let w, l, c;
+          if (file.type === 'application/json') {
+            // reach json
+            parser.parseJson(JSON.parse(text));
+            [w, l, c] = buildWordsAndLinks();
+          } else if (!file.type) {
+            // brat standoff
+            [w, l, c] = buildWordsLinksAnn(text);
+          } else {
+            printErrorMessage("Could not read file type: " + file.type);
+          }
+
+          if (w && l && c) {
+            clear();
+            [words, links, clusters] = [w, l, c];
+            setSyntaxVisibility();
+            draw();
+            document.getElementById('text-input').textContent = text;
+          }
+        } catch(e) {
+          console.log(fr.result, e);
+          printErrorMessage("See error in console");
+        }
+      }
+    }
+    else if (files.length > 1) {
+      // search for matching .ann and .txt file
+
+      // sort by name
+      let sortedFiles = [].slice.call(files).sort((a,b) => a.name.localeCompare(b.name));
+
+      let prev = 0;
+
+      for (let i = 1; i < sortedFiles.length; ++i) {
+        let f1 = sortedFiles[prev].name.toLowerCase(),
+          f2 = sortedFiles[i].name.toLowerCase();
+        let prefixesMatch = f1.slice(0, f1.lastIndexOf('.')) === f2.slice(0, f2.lastIndexOf('.'));
+        let typesMatch = f1.endsWith('.ann') || f2.endsWith('.ann');
+        if (prefixesMatch && typesMatch && f1 !== f2) {
+          // matching files found
+          let fr = new FileReader();
+          fr.readAsText(sortedFiles[prev]);
+          fr.onload = function() {
+            let f1Text = fr.result;
+            fr.readAsText(sortedFiles[i]);
+            fr.onload = function() {
+              let w, l, c, text;
+              if (f1.endsWith('.ann')) {
+                text = fr.result;
+                [w, l, c] = buildWordsLinksAnn(fr.result, f1Text);
+              }
+              else {
+                text = f1Text;
+                [w, l, c] = buildWordsLinksAnn(f1Text, fr.result);
+              }
+
+              if (w && l && c) {
+                clear();
+                [words, links, clusters] = [w, l, c];
+                setSyntaxVisibility();
+                draw();
+                document.getElementById('text-input').textContent = text;
+              }
+            }
+          };
+          break;
+        } else {
+          prev = i;
+        }
+      }
+    }
+  }
+
 
   /**
    * changeDataset:  read and parse data from a json file in the /data folder
@@ -327,7 +439,6 @@ const Main = (function() {
       w.setSyntaxId(token.id);
       return w;
     });
-    console.log('words',words);
     const clusters = [];
 
     [].concat(parser.data.entities, parser.data.triggers).forEach(el => {
@@ -407,8 +518,8 @@ const Main = (function() {
     return [ words, links, clusters ];
   }
 
-  function buildWordsLinksAnn(text) {
-    let data = parseAnn(text);
+  function buildWordsLinksAnn(text, ann) {
+    let data = parseAnn(text, ann);
     let mentions = {};
 
     // build words

js/parser.js

@@ -111,6 +111,10 @@ const Parser = (function() {
       })
     }
 
+    parseJson(json) {
+      parseData(json);
+    }
+
     get tokens() { return _tokens; }
     get text() { return _text; }
     get data() { return _data; }