From c707650bb66dc6249d555dabdc719c57e1688bae Mon Sep 17 00:00:00 2001 From: Kai Date: Wed, 3 Feb 2021 15:22:02 +0100 Subject: [PATCH] support visualization of ocr confidences --- neat.html | 4 ++-- neat.js | 66 +++++++++++++++++++++++++++++-------------------------- 2 files changed, 37 insertions(+), 33 deletions(-) diff --git a/neat.html b/neat.html index 2379e3f..b1e55ba 100644 --- a/neat.html +++ b/neat.html @@ -17,8 +17,8 @@ body{font-family:Verdana;font-size:16px} table{table-layout:fixed;width:100%;text-align:center} th{background-color:lightgray} - .editable:focus{background-color:#f0e442} - tr:focus-within{background-color:#dddddd} + .editable:focus{background-color:#f0e442 !important} + tr:focus-within{background-color:#dddddd !important} .accordion:hover .accordion-item:hover .accordion-item-content, .accordion .accordion-item--default .accordion-item-content{height:10.5em} diff --git a/neat.js b/neat.js index 93e3a4a..7b64f14 100644 --- a/neat.js +++ b/neat.js @@ -54,7 +54,7 @@ function setupInterface(data, file, urls) { let startIndex=0; let endIndex=displayRows; - let do_not_display = new Set(['url_id', 'left', 'right', 'top', 'bottom']); + let do_not_display = new Set(['url_id', 'left', 'right', 'top', 'bottom', 'ocrconf']); let tagClasses = 'ner_per ner_loc ner_org ner_work ner_conf ner_evt ner_todo'; let has_changes = false; @@ -238,7 +238,7 @@ function setupInterface(data, file, urls) { $("#full-page-link").attr("href", full_img_url); } - function colorCode() { + function colorCodeNETag() { $(".editable").removeClass(tagClasses); $("#table td:contains('B-PER')").addClass('ner_per'); @@ -264,7 +264,6 @@ function setupInterface(data, file, urls) { let tableInfo = $(td).data('tableInfo'); editingTd = { - data: data.data[tableInfo.nRow][tableInfo.column], finish: function (isOk) { $(td).addClass('editable'); @@ -272,22 +271,16 @@ function setupInterface(data, file, urls) { listener.reset(); if (isOk) { - let newValue = $('#edit-area').val(); - console.log(newValue); - - tableInfo.fillAction($(td), newValue); - data.data[tableInfo.nRow][tableInfo.column] = newValue; sanitizeData(); notifyChange(); updateTable(); } - else { - tableInfo.fillAction($(td), editingTd.data); - } + + tableInfo.fillAction($(td)); editingTd = null; $(".simple-keyboard").html(""); @@ -356,12 +349,6 @@ function setupInterface(data, file, urls) { new Keyboard( { onChange: input => onChange(input), layout: { - /*'default': ['ſ ꝛ Æ Œ æ œ aͤ oͤ uͤ Aͤ Oͤ Uͤ  {bksp}', '⁰ ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹', - '⸗ — ‹ › » « „ ” ’ £ § †', '{space}'], - - 'layout1': ['Α Δ Κ Π Σ ά έ ή ί α β γ δ ε ζ {bksp}', 'η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ', - 'φ χ ψ ω ό ύ ώ ϑ ϰ ϱ', '½ ¼ ¾ ⅓ ⅔ ⅕ ⅖ ⅗ ⅘ ⅙ ⅐ ⅚ ⅛ ⅜ ⅝ ⅞ ⅑ ⅒']*/ - 'default': [ "\u00AC \u00BD \u00E6 \u0101 \u2C65 \u023A \u00C6 \u0253 \u00E7 \u00C7 \u00EB \u00CB", "\u0113 \u0119 \u0118 \u0247 \u0246 \u204A \u1EBD \uFB00 \uFB01 \uFB02 \uFB03 \uA7A0", @@ -507,16 +494,13 @@ function setupInterface(data, file, urls) { editingTd = { data: data.data[tableInfo.nRow][tableInfo.column], finish: function(isOk) { - - data.data[tableInfo.nRow][tableInfo.column] = editingTd.data; - - tableInfo.fillAction($(td), data.data[tableInfo.nRow][tableInfo.column]) + tableInfo.fillAction($(td)) $(td).addClass('editable'); editingTd = null; - colorCode(); + colorCodeNETag(); notifyChange(); } @@ -557,7 +541,7 @@ function setupInterface(data, file, urls) { $('.type_select').click( function(event) { - editingTd.data = $(event.target).text().trim(); + data.data[tableInfo.nRow][tableInfo.column] = $(event.target).text().trim(); editingTd.finish(true); }); @@ -658,7 +642,22 @@ function setupInterface(data, file, urls) { if (do_not_display.has(column)) return let clickAction = function() { console.log('Do something different');} - let fillAction = function(td, content) { td.text(content); }; + + let fillAction = (function(column) { + return function(td) { + let tableInfo = $(td).data('tableInfo'); + + let content = data.data[tableInfo.nRow][tableInfo.column]; + + td.text(content); + + if ( ((column == 'TEXT') || (column == 'TOKEN')) + && (data.meta.fields.includes('ocrconf'))) { + + td.css('background-color', data.data[tableInfo.nRow]['ocrconf']); + } + + }; })(column); let head_html = ` @@ -680,7 +679,12 @@ function setupInterface(data, file, urls) { if (column == 'ID') { fillAction = - function(td,content) { + function(td) { + + let tableInfo = $(td).data('tableInfo'); + + let content = data.data[tableInfo.nRow]['ID']; + if (String(content).match(/^Q[0-9]+.*/g) == null) { td.text(content); } @@ -708,7 +712,7 @@ function setupInterface(data, file, urls) { count++; } } - } + }; } } else if ((column == 'NE-TAG') || (column == 'NE-EMB')) { @@ -721,7 +725,7 @@ function setupInterface(data, file, urls) { data.data[tableInfo.nRow][tableInfo.column] = tag; td.html(tag); - colorCode(); + colorCodeNETag(); notifyChange(); }; @@ -752,7 +756,7 @@ function setupInterface(data, file, urls) { 'fillAction': fillAction }); - fillAction(td,content); + fillAction(td); row.append(td); }); @@ -760,7 +764,7 @@ function setupInterface(data, file, urls) { $("#table tbody").append(row); }); - colorCode(); + colorCodeNETag(); $(".hover").on('mouseover', function (evt) { @@ -819,7 +823,7 @@ function setupInterface(data, file, urls) { td.data('tableInfo', tableInfo); - tableInfo.fillAction(td, content); + tableInfo.fillAction(td); pColumn++; }); @@ -827,7 +831,7 @@ function setupInterface(data, file, urls) { pRow++; }); - colorCode(); + colorCodeNETag(); if ($("#docpos").val() != startIndex) {