🚧 dinglehopper: Display segment id in the corresponding column

qurator/dinglehopper/cli.py

@@ -71,8 +71,8 @@ def gen_diff_report(gt_in, ocr_in, css_prefix, joiner, none):
     return \
         '''
         <div class="row">
-           <div class="col-md-6 gt">{}</div>
-           <div class="col-md-6 ocr">{}</div>
+           <div class="col-md-6 gt"><div class="status-box"></div>{}</div>
+           <div class="col-md-6 ocr"><div class="status-box"></div>{}</div>
         </div>
         '''.format(gtx, ocrx)
 

qurator/dinglehopper/templates/report.html.j2

@@ -26,7 +26,7 @@
       border: 2px solid;
       border-radius: 5px;
     }
-   #status-box {
+   .status-box {
       position: fixed;
       background: grey;
       color: white;
@@ -39,10 +39,6 @@
 
 
 
-<div id="status-box"> foo</div>
-
-
-
 <div class="container">
 
 {{ gt }}<br>

qurator/dinglehopper/templates/report.html.js

@@ -8,12 +8,12 @@ $(document).ready(function() {
         $('.' + c).addClass('diff-highlight');
 
         segment_id = $(this).attr('data-segment-id');
-        $('#status-box').text(segment_id);
+        $(this).closest('div').find('.status-box').text(segment_id);
     });
     $('.diff').mouseout(function() {
         let c = find_diff_class($(this).attr('class'));
         $('.' + c).removeClass('diff-highlight');
 
-        $('#status-box').text('');
+        $(this).closest('div').find('.status-box').text('');
     });
 });