add image preview

ner-edith.js

@@ -32,46 +32,18 @@ function setupInterface(data, file) {
 
         $('#table-body').empty();
 
-        $.each(data.data,
-                    function(nRow, el) {
-
-                        if (nRow < startIndex) return;
-                        if (nRow >= endIndex) return;
-
-                        var row = $("<tr/>");
-                        row.append($('<td> <button class="btn btn-link btn-xs py-0 offset">' +
-                                            nRow + '</button>  </td>'));
-
-                        $.each(el,
-                            function(column, content) {
-
-                                if (column == 'url_id') return
+        function gotoLocation(evt) {
+            if (urls != null) {
 
-                                row.append(
-                                    $(editable_html).
-                                        text(content).
-                                        data('tableInfo', { 'nRow': nRow, 'column': column })
-                                );
-                            });
+                let nRow = parseInt($(evt.target).text());
 
-                        $("#table tbody").append(row);
-                    });
+                let img_url = urls.data[data.data[nRow]['url_id']]['url']
 
-        $("#table td:contains('B-PER')").addClass('ner_per');
-        $("#table td:contains('I-PER')").addClass('ner_per');
-        $("#table td:contains('B-LOC')").addClass('ner_loc');
-        $("#table td:contains('I-LOC')").addClass('ner_loc');
-        $("#table td:contains('B-ORG')").addClass('ner_org');
-        $("#table td:contains('I-ORG')").addClass('ner_org');
-        $("#table td:contains('B-OTH')").addClass('ner_oth');
-        $("#table td:contains('I-OTH')").addClass('ner_oth');
-        $("#table td:contains('B-TODO')").addClass('ner_todo');
-        $("#table td:contains('I-TODO')").addClass('ner_todo');
+                console.log(img_url);
 
-        $(".offset").on('click',
-            function(evt) {
+                $("#preview").attr("src", img_url);
+                $("#preview-link").attr("href", img_url);
 
-                if (urls != null) {
                 return;
             }
 
@@ -106,7 +78,44 @@ function setupInterface(data, file) {
                 }
             );
         }
+
+        $.each(data.data,
+              function(nRow, el) {
+
+                  if (nRow < startIndex) return;
+                  if (nRow >= endIndex) return;
+
+                  var row = $("<tr/>");
+                  row.append($('<td> <button class="btn btn-link btn-xs py-0 offset">' +
+                                      nRow + '</button>  </td>'));
+
+                  $.each(el,
+                      function(column, content) {
+
+                          if (column == 'url_id') return
+
+                          row.append(
+                              $(editable_html).
+                                  text(content).
+                                  data('tableInfo', { 'nRow': nRow, 'column': column })
                           );
+                      });
+
+                  $("#table tbody").append(row);
+              });
+
+        $("#table td:contains('B-PER')").addClass('ner_per');
+        $("#table td:contains('I-PER')").addClass('ner_per');
+        $("#table td:contains('B-LOC')").addClass('ner_loc');
+        $("#table td:contains('I-LOC')").addClass('ner_loc');
+        $("#table td:contains('B-ORG')").addClass('ner_org');
+        $("#table td:contains('I-ORG')").addClass('ner_org');
+        $("#table td:contains('B-OTH')").addClass('ner_oth');
+        $("#table td:contains('I-OTH')").addClass('ner_oth');
+        $("#table td:contains('B-TODO')").addClass('ner_todo');
+        $("#table td:contains('I-TODO')").addClass('ner_todo');
+
+        $(".offset").on('click', gotoLocation);
     }
 
      let table_html =

ner.edith.html

@@ -18,6 +18,11 @@
         .ner_org{background-color:plum}
         .ner_oth{background-color:lightgreen}
         .ner_todo{background-color:turquoise}
+
+        .fit-image{
+            width: 100%;
+            object-fit: cover;
+        }
     </style>
 </head>
 <body>
@@ -41,6 +46,9 @@
     </div>
     <div class="row mt-3">
         <div class="col-2" id="region-left">
+            <a href="" id="preview-link">
+                <img id="preview" class="img-responsive fit-image"/>
+            </a>
         </div>
         <div class="col-8 text-center" id="tableregion">
             Please upload a TSV (tab-separated-values) file in the GermEval2014 data format

tools/cli.py

@@ -6,13 +6,16 @@ from io import StringIO
 
 @click.command()
 @click.argument('tsv-file', type=click.Path(exists=True), required=True, nargs=1)
-def extract_document_links(tsv_file):
+@click.argument('url-file', type=click.Path(exists=False), required=True, nargs=1)
+def extract_document_links(tsv_file, url_file):
 
     parts = extract_doc_links(tsv_file)
 
-    for part in parts:
+    urls = [part['url'] for part in parts]
+
+    urls = pd.DataFrame(urls, columns=['url'])
 
-        print(part['url'])
+    urls.to_csv(url_file, sep="\t", quoting=3, index=False)
 
 
 @click.command()
@@ -24,12 +27,9 @@ def annotate_tsv(tsv_file, annotated_tsv_file):
 
     annotated_parts = []
 
-    urls = []
-
     for part in parts:
 
         part_data = StringIO(part['header'] + part['text'])
-        urls.append(part['url'])
 
         df = pd.read_csv(part_data, sep="\t", comment='#', quoting=3)