From 450886cda65456fb2157018bacf985889071db13 Mon Sep 17 00:00:00 2001
From: Kai Labusch <labusch@gmail.com>
Date: Tue, 24 Sep 2019 10:21:49 +0200
Subject: [PATCH] add image preview

---
 ner-edith.js   | 121 ++++++++++++++++++++++++++-----------------------
 ner.edith.html |   8 ++++
 tools/cli.py   |  12 ++---
 3 files changed, 79 insertions(+), 62 deletions(-)

diff --git a/ner-edith.js b/ner-edith.js
index ecb35c4..58f8756 100644
--- a/ner-edith.js
+++ b/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 >= endIndex) return;
+                  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>'));
+                  var row = $("<tr/>");
+                  row.append($('<td> <button class="btn btn-link btn-xs py-0 offset">' +
+                                      nRow + '</button>  </td>'));
 
-                        $.each(el,
-                            function(column, content) {
+                  $.each(el,
+                      function(column, content) {
 
-                                if (column == 'url_id') return
+                          if (column == 'url_id') return
 
-                                row.append(
-                                    $(editable_html).
-                                        text(content).
-                                        data('tableInfo', { 'nRow': nRow, 'column': column })
-                                );
-                            });
+                          row.append(
+                              $(editable_html).
+                                  text(content).
+                                  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',
-            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);
-                            });
-                    }
-                );
-            }
-        );
+        $(".offset").on('click', gotoLocation);
     }
 
      let table_html =
diff --git a/ner.edith.html b/ner.edith.html
index ad58ec5..db2a200 100644
--- a/ner.edith.html
+++ b/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
diff --git a/tools/cli.py b/tools/cli.py
index 83b8668..ce9df71 100644
--- a/tools/cli.py
+++ b/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)