Added detailed examples endpoint and modified results.

app.py

@@ -1,5 +1,6 @@
 import configparser
 import csv
+import hashlib
 import json
 import os
 import random
@@ -130,10 +131,65 @@ def create_app():
         for subtree_id in subtree_ids:
             annodoc += f'# visual-style	{subtree_id}	bgColor:lightgreen\n'
         with open(os.path.join('media', result_id, 'annodoc', sentence_id), 'r') as rf:
-            # annodoc += '\n'.join(rf.readlines())
             annodoc += rf.read() + '\n\n'
         return {'annodoc': annodoc}
-        # return '<div>' + annodoc + '</div>'
+
+    @app.route('/stark/result/<result_id>/<subtree_hash>', methods=['GET'])
+    def examples(result_id, subtree_hash):
+        # find example details
+        with open(os.path.join('media', result_id, 'result.tsv'), 'r') as rf:
+            content = list(csv.reader(rf, delimiter='\t'))
+            head = content[0]
+            content_dict = {h: [] for h in head}
+            table_columns2displayed_table_columns = {
+                'Tree': gettext('Tree'),
+                'Absolute frequency': gettext('Frequency'),
+                'Absolute frequency in second treebank': gettext('Frequency in B'),
+                'Order': gettext('Order'),
+                'Number of nodes': gettext('Number of nodes'),
+                'Head node': gettext('Head node'),
+                'Grew-match URL': gettext('Grew-match URL'),
+                'Ratio': gettext('Ratio'),
+                '%DIFF': gettext('%DIFF'),
+                'OR': gettext('OR'),
+                'BIC': gettext('BIC'),
+                'MI': gettext('MI'),
+                'logDice': gettext('logDice'),
+                't-score': gettext('t-score')
+            }
+            if 'Absolute frequency in second treebank' in head:
+                table_columns2displayed_table_columns['Absolute frequency'] = gettext('Frequency in A')
+            else:
+                del table_columns2displayed_table_columns['Absolute frequency in second treebank']
+            displayed_table_columns2table_columns = {v: k for k, v in table_columns2displayed_table_columns.items()}
+
+            annodoc_index = head.index('Annodoc')
+
+            selected_content = [row for row in content[1:]
+                                if json.loads(row[annodoc_index])['subtree_hash'] == subtree_hash]
+
+            for i, row in enumerate(selected_content):
+                for j, v in enumerate(row):
+                    content_dict[head[j]].append(v)
+
+        head = [(k, v) for k, v in table_columns2displayed_table_columns.items() if k in head]
+
+        displayed_content_dict = {}
+        for f_h, h in head:
+            if f_h == '%DIFF' or f_h == 'OR':
+                displayed_content_dict[f_h] = [sci_notation(eval(n)) for n in
+                                               content_dict[displayed_table_columns2table_columns[h]]]
+            else:
+                displayed_content_dict[f_h] = content_dict[displayed_table_columns2table_columns[h]]
+
+        # add visualization parts to dict
+        visualization_dict = {'example_id': [], 'example_positions': []}
+        with open(os.path.join('media', result_id, 'annodoc_detailed', subtree_hash), 'r') as rf:
+            for vis in list(csv.reader(rf, delimiter='\t')):
+                visualization_dict['example_id'].append(vis[0])
+                visualization_dict['example_positions'].append('+'.join(map(str, eval(vis[1]))))
+
+        return render_template('examples.html', head=head, content=displayed_content_dict, visualization=visualization_dict)
 
     @app.route('/stark/result/<result_id>', methods=['GET', 'POST'])
     def result(result_id):
@@ -158,6 +214,7 @@ def create_app():
         with open(os.path.join('media', result_id, 'result.tsv'), 'r') as rf:
 
             content = list(csv.reader(rf, delimiter='\t'))
+            content = [con + [str(i)] for i, con in enumerate(content)]
             head = content[0]
             content_dict = {h: [] for h in head}
             table_columns2displayed_table_columns = {
@@ -215,7 +272,7 @@ def create_app():
         annodoc_data = [json.loads(el) for el in content_dict['Annodoc']]
         displayed_content_dict['example_id'] = [el['id'] for el in annodoc_data]
         displayed_content_dict['example_positions'] = ['+'.join([str(p) for p in el['positions']]) for el in annodoc_data]
-
+        displayed_content_dict['subtree_hash'] = [el['subtree_hash'] for el in annodoc_data]
 
         return render_template('result.html', head=head, content=displayed_content_dict)
 
@@ -380,6 +437,8 @@ def create_app():
 
             configs['output'] = os.path.join(output_path, 'result.tsv')
             configs['annodoc_example_dir'] = os.path.join(output_path, 'annodoc')
+            configs['annodoc_detailed_dir'] = os.path.join(output_path, 'annodoc_detailed')
+            configs['detailed_results_file'] = os.path.join(output_path, 'detailed_results_file.tsv')
             if len(validation) > 0:
                 return render_template('index.html', validation=validation, translations=translations)
             try:

static/js/examples.js

@@ -0,0 +1,79 @@
+
+$(document).ready(function() {
+    const visualizations = $(".visualization");
+    const batchSize = 10;
+    let startIndex = 0;
+    let loading = false; // Flag to prevent multiple simultaneous loads
+
+    $(".visualization").closest("tr").prev("tr").hide();
+    $(".visualization").closest("tr").hide();
+
+    function loadVisualizations(start, count) {
+        if (loading) return; // Prevent concurrent loads
+        loading = true;
+
+        const visualizationsToLoad = visualizations.slice(start, start + count);
+        let promises = [];
+
+        visualizationsToLoad.each(function() {
+            var $this = $(this); // Cache $(this) for better performance
+            var example_id = $this.data("example-id");
+            var example_positions = $this.data("example-positions");
+            var window_location = window.location.pathname.split("/");
+            var subtree_hash = window_location.pop(); // This line overwrites the earlier subtree_hash, is this intended?
+            var dir_name = window_location.pop();
+            var url = window.location.origin + '/stark/visualization/' + dir_name + '/' + example_id + '/' + example_positions;
+
+            promises.push($.ajax({
+                url: url,
+                success: function(result) {
+                    var escapedHtml = `<pre><code class="conllu">${result['annodoc']}</code></pre>`;
+                    $this.html(escapedHtml);
+                    $('.conllu', $this).each(function() {
+                        Annodoc.embedAnnotation($(this), Annodoc.parseConllU, Config.bratCollData);
+                    });
+                    $this.closest("tr").prev("tr").show();
+                    $this.closest("tr").show();
+                },
+                error: function(jqXHR, textStatus, errorThrown) {
+                    console.error("AJAX Error:", textStatus, errorThrown);
+                    $this.html("<p>Error loading data.</p>");
+                    $this.closest("tr").prev("tr").show();
+                    $this.closest("tr").show();
+                },
+                complete: function() {
+                    // Check if all AJAX calls in the current batch are complete
+                    if (promises.every(p => p.state() === 'resolved' || p.state() === 'rejected')) {
+                        loading = false; // Allow further loading
+                    }
+                }
+            }));
+        });
+    }
+
+    function checkScroll() {
+        if ($(window).scrollTop() + $(window).height() >= $(document).height() - 200 && !loading) { // 200px buffer
+            loadVisualizations(startIndex, batchSize);
+            startIndex += batchSize;
+        }
+    }
+
+    // Initial load
+    if (typeof head !== 'undefined' && typeof head.ready === 'function') {
+        head.ready(function() {
+            loadVisualizations(startIndex, batchSize);
+            startIndex += batchSize;
+        });
+    } else {
+        if (typeof Annodoc !== 'undefined') {
+            loadVisualizations(startIndex, batchSize);
+            startIndex += batchSize;
+        } else {
+            console.error("head.js or Annodoc is not available. Ensure they are loaded correctly.");
+        }
+    }
+
+
+    $(window).scroll(checkScroll); // Attach scroll event listener
+
+});

static/js/result.js

@@ -23,10 +23,14 @@ $(document).ready(function() {
     $(".table-wrapper tbody tr").click(function() {
         $(".visualization-table").show();
         var grew_url = $(this).data("href");
+        var subtree_hash = $(this).data("subtree-hash");
         var example_id = $(this).data("exid");
+        var grew_link_text = $(this).data("grew-link-text");
+        var other_examples_text = $(this).data("other-examples-text");
         var example_positions = $(this).data("expositions");
         var dir_name = window.location.pathname.split("/").pop()
-        var url = window.location.origin + '/stark/visualization/' + dir_name + '/' + example_id + '/' + example_positions
+        var other_examples = window.location.origin + '/stark/result/' + dir_name + '/' + subtree_hash;
+        var url = window.location.origin + '/stark/visualization/' + dir_name + '/' + example_id + '/' + example_positions;
         $.ajax({url: url, success: function(result){
             var escapedHtml = `<pre><code class="conllu">${result['annodoc']}</code></pre>`;
             $(".visualization").html(escapedHtml);
@@ -37,7 +41,12 @@ $(document).ready(function() {
         if (grew_url == 'unknown') {
             $(".grew-link").html("/");
         } else {
-            $(".grew-link").html("<a href=" + grew_url + ">GREW link</a>");
+            $(".grew-link").html("<a href=" + grew_url + ">" + grew_link_text + "</a>");
+        }
+        if (other_examples == 'unknown') {
+            $(".other-examples").html("/");
+        } else {
+            $(".other-examples").html("<a href=" + other_examples + ">" + other_examples_text + "</a>");
         }
     });
     $(".th-desc").hide();

templates/examples.html

@@ -0,0 +1,76 @@
+{% extends "base.html" %}
+
+{% block custom_css %}
+  <link rel="stylesheet" href="/stark/static/css/test/style-vis.css"/>
+  <link rel="stylesheet" href="/stark/static/css/test/turkunlp.css"/>
+{% endblock %}
+{% block content %}
+  <div class="container wider-container">
+    <br>
+
+
+      <!-- Your table with many columns -->
+      <h6>{{ _('Examples') }}</h6>
+      <div class="card">
+        <div class="card-content">
+          <div class="table-wrapper2">
+            <table>
+              <thead>
+                <tr>
+                  {% for h, h_t in head %}
+                    {% if not h == 'Grew-match URL' %}
+                  <th><span>{{ h_t }} </span></th>
+                    {% endif %}
+                  {% endfor %}
+                </tr>
+              </thead>
+              <tbody>
+                {% for i in range(content['Tree']|length) %}
+                <tr class="tr-link" data-toggle="tooltip" title="See an example" data-href={% if 'Grew-match URL' in content %}{{ content['Grew-match URL'][i] }}{% else %}unknown{% endif %}>
+                  {% for col in content %}
+                    {% if not (col == 'Grew-match URL') %}
+                  <td>{{ content[col][i] }}</td>
+                    {% endif %}
+                  {% endfor %}
+                </tr>
+                {% endfor %}
+              </tbody>
+            </table>
+          </div>
+          <br/>
+          <div class="visualization-table">
+            <table style="border: none;">
+              <thead>
+                <tr>
+                  <th>{{ _('Examples') }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {% for i in range(visualization['example_id']|length) %}
+                <tr style="border-bottom: none;">
+                  <td >ID: {{visualization['example_id'][i]}}</td>
+                </tr>
+                <tr style="border-top: none;">
+                  <td ><div class="visualization" data-example-positions="{{visualization['example_positions'][i]}}" data-example-id="{{visualization['example_id'][i]}}"></div></td>
+                </tr>
+                {% endfor %}
+              </tbody>
+            </table>
+            <table style="border: none;">
+              <tbody>
+                <tr >
+                  <td width="50%"><div class="grew-link"></div></td>
+                  <td style="border-left: none;"><div class="other-examples"></div></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+  </div>
+{% endblock %}
+{% block custom_js %}
+  <script src="/stark/static/js/annodoc/head.min.js"></script>
+  <script src="/stark/static/js/annodoc/annodoc.js"></script>
+  <script src="/stark/static/js/examples.js"></script>
+{% endblock %}

templates/result.html

@@ -25,6 +25,29 @@
               </form>
             </div>
           </div>
+          <div class="visualization-table">
+            <table style="border: none;">
+              <thead>
+                <tr>
+                  <th>{{ _('Visualization') }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr >
+                  <td ><div class="visualization"></div></td>
+                </tr>
+              </tbody>
+            </table>
+            <table style="border: none;">
+              <tbody>
+                <tr >
+                  <td width="50%"><div class="grew-link"></div></td>
+                  <td style="border-left: none;"><div class="other-examples"></div></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <br/>
           <div class="table-wrapper">
             <table>
               <thead>
@@ -38,9 +61,9 @@
               </thead>
               <tbody>
                 {% for i in range(content['Tree']|length) %}
-                <tr data-exid="{{content['example_id'][i]}}" data-expositions="{{content['example_positions'][i]}}" class="tr-link" data-toggle="tooltip" title="See an example" data-href={% if 'Grew-match URL' in content %}{{ content['Grew-match URL'][i] }}{% else %}unknown{% endif %}>
+                <tr data-other-examples-text="{{_('Other examples')}}" data-grew-link-text="{{_('GREW link')}}" data-exid="{{content['example_id'][i]}}" data-expositions="{{content['example_positions'][i]}}" data-subtree-hash="{{content['subtree_hash'][i]}}" class="tr-link" data-toggle="tooltip" title="See an example" data-href={% if 'Grew-match URL' in content %}{{ content['Grew-match URL'][i] }}{% else %}unknown{% endif %}>
                   {% for col in content %}
-                    {% if not (col == 'Grew-match URL' or col == 'example_id' or col == 'example_positions') %}
+                    {% if not (col == 'Grew-match URL' or col == 'example_id' or col == 'example_positions' or col == 'subtree_hash') %}
                   <td>{{ content[col][i] }}</td>
                     {% endif %}
                   {% endfor %}
@@ -49,23 +72,6 @@
               </tbody>
             </table>
           </div>
-          <br/>
-          <div class="visualization-table">
-            <table style="border: none;">
-              <thead>
-                <tr>
-                  <th width="80%">Visualization</th>
-                  <th>Grew</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr >
-                  <td style="border-right: none"><div class="visualization"></div></td>
-                  <td style="border-left: none;"><div class="grew-link"></div></td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
         </div>
       </div>
   </div>