sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-11-15 01:05:42 +00:00
Code Issues Projects Releases Wiki Activity

Add basic style for expert view

Browse Source
This commit is contained in:
Patrick Jentsch 2019-11-27 15:56:39 +01:00
parent 54f3036d89
commit 49311f58f0
2 changed files with 61 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/corpora/events.py
View File

@ -75,10 +75,11 @@ def corpus_analysis(message):
cpos_list = list(set(cpos_list))
pos_list = client.cl_cpos2str('{}.pos'.format(corpus), cpos_list)
simple_pos_list = client.cl_cpos2str('{}.simple_pos'.format(corpus), cpos_list)
text_id_list = client.cl_cpos2struc('{}.text_title'.format(corpus), cpos_list)
s_id_list = client.cl_cpos2struc('{}.s'.format(corpus), cpos_list)
text_id_list = client.cl_cpos2struc('{}.text'.format(corpus), cpos_list)
word_list = client.cl_cpos2str('{}.word'.format(corpus), cpos_list)
for cpos, pos, simple_pos, text_id, word in zip(cpos_list, pos_list, simple_pos_list, text_id_list, word_list):
data['cpos_lookup'][cpos] = {'pos': pos, 'simple_pos': simple_pos, 'text_id': text_id, 'word': word}
for cpos, pos, simple_pos, s_id, text_id, word in zip(cpos_list, pos_list, simple_pos_list, s_id_list, text_id_list, word_list):
data['cpos_lookup'][cpos] = {'pos': pos, 'simple_pos': simple_pos, 's_id': s_id, 'text_id': text_id, 'word': word}
text_author_list = client.cl_struc2str('{}.text_author'.format(corpus), text_id_list)
text_publishing_year_list = client.cl_struc2str('{}.text_publishing_year'.format(corpus), text_id_list)
text_title_list = client.cl_struc2str('{}.text_title'.format(corpus), text_id_list)

70
app/templates/corpora/analyse_corpus.html.j2
View File

@ -1,6 +1,21 @@
{% extends "full_width.html.j2" %}
{% block page_content %}
<style>
.token-box {
padding: 5px;
margin: 2px 0;
border-radius: 5px;
background-color: #009688;
display: inline-block;
color: white;
}
.token-box:hover {
background-color: #00bfa5;
cursor: pointer;
}
</style>
<div class="col s12 m3 sticky">
<div class="card">
<div class="card-content">
@ -36,6 +51,13 @@
<span class="helper-text red-text">{{ error }}</span>
{% endfor %}
</div>
<div class="switch">
<label>
Expert Mode
<input type="checkbox" id="expert-mode-switch">
<span class="lever"></span>
</label>
</div>
</form>
</div>
</div>
@ -69,10 +91,10 @@
<table class="highlight">
<thead>
<tr>
<th>Title</th>
<th>Left context</th>
<th>Match</th>
<th>Right Context</th>
<th style="width: 5%">Title</th>
<th style="width: 25%">Left context</th>
<th style="width: 45%">Match</th>
<th style="width: 25%">Right Context</th>
</tr>
</thead>
<tbody id="query-results"></tbody>
@ -103,7 +125,6 @@
<script>
var loadingModal;
document.addEventListener("DOMContentLoaded", function() {
loadingModal = M.Modal.init(document.getElementById("loading-modal"),
{"dismissible": false});
@ -115,10 +136,23 @@
if (msg === "[201]: Created") {loadingModal.close();}
});
var expertModeSwitchElement = document.getElementById("expert-mode-switch");
var tokenElements = [];
expertModeSwitchElement.addEventListener('change', function(event) {
if (event.target.checked) {
tokenElements.forEach(function(tokenElement) {
tokenElement.classList.add("token-box");
});
} else {
tokenElements.forEach(function(tokenElement) {
tokenElement.classList.remove("token-box");
});
}
})
var queryFormElement = document.getElementById("query-form");
var queryFormSubmitElement = document.getElementById("query-form-submit");
var queryResultsElement = document.getElementById("query-results");
queryFormSubmitElement.addEventListener("click", function(event) {
event.preventDefault();
let formData = new FormData(queryFormElement);
@ -132,6 +166,7 @@
socket.on("corpus_analysis", function(result) {
console.log(result);
var htmlString = "";
var textTitles;
var token;
if (result['matches'].length === 0) {
@ -140,25 +175,32 @@
for (let match of result['matches']) {
htmlString += `<tr class="match">`;
htmlString += `<td class="title"></td>`
htmlString += `<td class="title">`;
textTitles = new Set();
for (cpos of match["hit"]) {
token = result["cpos_lookup"][cpos];
textTitles.add(result["text_loopup"][token["text_id"]]["title"]);
}
htmlString += [...textTitles].join(",");
htmlString += `</td>`;
htmlString += `<td class="left-context">`;
for (cpos of match["lc"]) {
token = result["cpos_lookup"][cpos];
htmlString += token["simple_pos"] != "PUNCT" ? " " : "";
htmlString += " ";
htmlString += `<span class="token" data-cpos="${cpos}">${token["word"]}</span>`;
}
htmlString += `</td>`;
htmlString += `<td class="hit">`;
for (cpos of match["hit"]) {
token = result["cpos_lookup"][cpos];
htmlString += token["simple_pos"] != "PUNCT" ? " " : "";
htmlString += " ";
htmlString += `<span class="token" data-cpos="${cpos}">${token["word"]}</span>`;
}
htmlString += `</td>`;
htmlString += `<td class="right-context">`;
for (cpos of match["rc"]) {
token = result["cpos_lookup"][cpos];
htmlString += token["simple_pos"] != "PUNCT" ? " " : "";
htmlString += " ";
htmlString += `<span class="token" data-cpos="${cpos}">${token["word"]}</span>`;
}
htmlString += `</td>`;
@ -167,10 +209,12 @@
queryResultsElement.innerHTML = htmlString;
queryResultsElement.querySelectorAll(".token").forEach(function(tokenElement) {
tokenElements = queryResultsElement.querySelectorAll(".token");
tokenElements.forEach(function(tokenElement) {
tokenElement.addEventListener("click", function(event) {
let token = result["cpos_lookup"][tokenElement.dataset.cpos];
let text = result["text_loopup"][token["text_id"]];
if (!expertModeSwitchElement.checked) {return;}
var token = result["cpos_lookup"][tokenElement.dataset.cpos];
var text = result["text_loopup"][token["text_id"]];
alert(`${token["word"]} // ${token["pos"]} // ${token["simple_pos"]} // ${text["title"]}`);
});
});