add image preview

ner-edith.js

@@ -32,30 +32,77 @@ function setupInterface(data, file) {
 
         $('#table-body').empty();
 
+        function gotoLocation(evt) {
+            if (urls != null) {
+
+                let nRow = parseInt($(evt.target).text());
+
+                let img_url = urls.data[data.data[nRow]['url_id']]['url']
+
+                console.log(img_url);
+
+                $("#preview").attr("src", img_url);
+                $("#preview-link").attr("href", img_url);
+
+                return;
+            }
+
+            let url_mapping_html =
+                `
+                <br/>
+                <br/>
+                <br/>
+                <input type="file" id="url-mapping-tsv-file" style="visibility: hidden; width: 1px; height: 1px"/>
+                Please
+                <a href="" onclick="$('#url-mapping-tsv-file').click(); return false">upload a url mapping file</a>
+                 or<button class="btn btn-link" id="goback">go back to edit mode.</button>
+                `;
+
+            $("#tableregion").html(url_mapping_html);
+            $("#btn-region").empty();
+
+            $('#goback').on('click',
+                function(evt) {
+                    setupInterface(data, file);
+                 }
+            );
+
+            $('#url-mapping-tsv-file').change(
+                function(evt) {
+                    loadFile(evt,
+                        function(results, url_mapping_file) {
+                            urls = results;
+
+                            setupInterface(data, file);
+                        });
+                }
+            );
+        }
+
         $.each(data.data,
-                    function(nRow, el) {
+              function(nRow, el) {
 
-                        if (nRow < startIndex) return;
+                  if (nRow < startIndex) return;
-                        if (nRow >= endIndex) return;
+                  if (nRow >= endIndex) return;
 
-                        var row = $("<tr/>");
+                  var row = $("<tr/>");
-                        row.append($('<td> <button class="btn btn-link btn-xs py-0 offset">' +
+                  row.append($('<td> <button class="btn btn-link btn-xs py-0 offset">' +
-                                            nRow + '</button>  </td>'));
+                                      nRow + '</button>  </td>'));
 
-                        $.each(el,
+                  $.each(el,
-                            function(column, content) {
+                      function(column, content) {
 
-                                if (column == 'url_id') return
+                          if (column == 'url_id') return
 
-                                row.append(
+                          row.append(
-                                    $(editable_html).
+                              $(editable_html).
-                                        text(content).
+                                  text(content).
-                                        data('tableInfo', { 'nRow': nRow, 'column': column })
+                                  data('tableInfo', { 'nRow': nRow, 'column': column })
-                                );
+                          );
-                            });
+                      });
 
-                        $("#table tbody").append(row);
+                  $("#table tbody").append(row);
-                    });
+              });
 
         $("#table td:contains('B-PER')").addClass('ner_per');
         $("#table td:contains('I-PER')").addClass('ner_per');
@@ -68,45 +115,7 @@ function setupInterface(data, file) {
         $("#table td:contains('B-TODO')").addClass('ner_todo');
         $("#table td:contains('I-TODO')").addClass('ner_todo');
 
-        $(".offset").on('click',
+        $(".offset").on('click', gotoLocation);
-            function(evt) {
-
-                if (urls != null) {
-                    return;
-                }
-
-                let url_mapping_html =
-                    `
-                    <br/>
-                    <br/>
-                    <br/>
-                    <input type="file" id="url-mapping-tsv-file" style="visibility: hidden; width: 1px; height: 1px"/>
-                    Please
-                    <a href="" onclick="$('#url-mapping-tsv-file').click(); return false">upload a url mapping file</a>
-                     or<button class="btn btn-link" id="goback">go back to edit mode.</button>
-                    `;
-
-                $("#tableregion").html(url_mapping_html);
-                $("#btn-region").empty();
-
-                $('#goback').on('click',
-                    function(evt) {
-                        setupInterface(data, file);
-                     }
-                );
-
-                $('#url-mapping-tsv-file').change(
-                    function(evt) {
-                        loadFile(evt,
-                            function(results, url_mapping_file) {
-                                urls = results;
-
-                                setupInterface(data, file);
-                            });
-                    }
-                );
-            }
-        );
     }
 
      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)