lkrsnik/STARK-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added detailed examples endpoint and modified results.

Browse Source
This commit is contained in:
lkrsnik 2024-12-26 15:30:00 +01:00
parent fb3acbda78
commit e6b57ce789
5 changed files with 253 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
app.py
View File

@ -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:

79
static/js/examples.js Normal file
View File

@ -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
});

13
static/js/result.js
View File

@ -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();

76
templates/examples.html Normal file
View File

@ -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 %}

44
templates/result.html
View File

@ -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>