sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-06-12 00:50:40 +00:00
Code Issues Projects Releases Wiki Activity

compatibility fixes and add reimplementations

Browse Source
This commit is contained in:
Patrick Jentsch
2020-03-28 19:29:19 +01:00
parent 970d7024e0
commit e3fde2d5c9
12 changed files with 499 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -258,11 +258,6 @@ server side -->
queryFinished = false;
analysisClientStatus = {};
nopaque.socket.on("connect", function() {
sessionId = nopaque.socket.id;
console.log("Clients current session id:", sessionId);
setAnalysisStatus("idle", sessionId);
});
// creates some models on DOMContentLoaded
document.addEventListener("DOMContentLoaded", function() {
@ -276,22 +271,38 @@ server side -->
{"dismissible": true});
M.Collapsible.init(elem, {accordion: false});
loadingModal.open();
nopaque.socket.on("connect", function() {
sessionId = nopaque.socket.id;
console.log("Clients current session id:", sessionId);
setAnalysisStatus("idle", sessionId);
});
// close loading modal if container for analysis has started
nopaque.socket.on("corpus_analysis_init", function(response) {
if (response.code === 201) {
loadingModal.close();
} else {
console.log("[ERROR] corpus_analysis_init");
console.log(response);
}
});
// recieves server side analysis status updates and sets those accordingly in
// analysisClientStatus
nopaque.socket.on("send_analysis_status_server", (response) => {
console.log("Recieved new analysis status from server:", response.status);
setAnalysisStatus(response.status);
});
// recieves results on "corpus_analysis_query" via socket.io
nopaque.socket.on("corpus_analysis_query", recieveResults);
// get context of one match if inspected via socket.io
nopaque.socket.on("match_context", showMatchContext);
nopaque.socket.emit("corpus_analysis_init", {{ corpus_id }});
});
// sets collapsible display options to expandable isntead of accordion
var elem = document.querySelector('.collapsible.expandable');
// close loading modal if container for analysis has started
nopaque.socket.on("corpus_analysis_init", function(response) {
if (response.code === 201) {
loadingModal.close();
} else {
console.log("[ERROR] corpus_analysis_init");
console.log(response);
}
});
// getting some HTML-elements to use/hide/remove/show or add some other
// elements to them.
// These elements will be used inside functions in nopaque.analyse_corpus.js
@ -304,19 +315,6 @@ server side -->
queryFormElement = document.getElementById("query-form");
queryFormElement.addEventListener("submit", sendQuery);
// recieves server side analysis status updates and sets those accordingly in
// analysisClientStatus
nopaque.socket.on("send_analysis_status_server", (response) => {
console.log("Recieved new analysis status from server:", response.status);
setAnalysisStatus(response.status);
});
// recieves results on "corpus_analysis_query" via socket.io
nopaque.socket.on("corpus_analysis_query", recieveResults);
// get context of one match if inspected via socket.io
nopaque.socket.on("match_context", showMatchContext);
// live update of hits per page if hits per page value is changed
hitsPerPageInputElement = document.getElementById("hits-per-page");
hitsPerPageInputElement.onchange = changeHitsPerPage;

182
app/templates/corpora/pj_analyse_corpus.html.j2 Normal file
View File

@ -0,0 +1,182 @@
{% extends "nopaque.html.j2" %}
{% set full_width = True %}
{% block page_content %}
<div class="col s12">
<ul class="collapsible expandable">
<li class="active hoverable">
<div class="collapsible-header">
<i class="material-icons">search</i>Query
</div>
<div class="collapsible-body">
<!-- Query form -->
<form id="query-form">
<div class="row">
<div class="col s12 m10">
<div class="input-field">
<i class="material-icons prefix">search</i>
{{ query_form.query() }}
{{ query_form.query.label }}
<span class="helper-text">
<a href="http://cwb.sourceforge.net/files/CQP_Tutorial/">
<i class="material-icons" style="font-size: inherit;">help</i>
CQP query language tutorial
</a>
</span>
</div>
</div>
<div class="col s12 m2">
<br class="hide-on-small-only">
{{ macros.submit_button(query_form.submit) }}
</div>
</div>
</form>
</div>
</li>
<li class="hoverable">
<div class="collapsible-header">
<i class="material-icons">settings</i>Display Options
</div>
<div class="collapsible-body">
<!-- Display options form -->
<form id="display-options-form">
<div class="row">
<div class="col s12 m6">
<div class="input-field">
<i class="material-icons prefix">format_list_numbered</i>
{{ display_options_form.results_per_page() }}
{{ display_options_form.results_per_page.label }}
</div>
</div>
<div class="col s12 m6">
<div class="input-field">
<i class="material-icons prefix">short_text</i>
{{ display_options_form.result_context() }}
{{ display_options_form.result_context.label }}
</div>
</div>
<div class="col s12">
<div class="switch">
<label>
{{ display_options_form.expert_mode.label.text }}
{{ display_options_form.expert_mode() }}
<span class="lever"></span>
</label>
</div>
</div>
</div>
</form>
</div>
</li>
</ul>
</div>
<div class="col s12" id="query-display">
<div class="card">
<div class="card-content">
<span class="card-title">Query Results</span>
<div class="error-container hide show-on-error"></div>
<div class="hide show-on-success">
<p>
<span id="received-match-num"></span> of <span id="total-match-num"></span> matches loaded.<br>
Matches occured in <span id="text-lookup-num"></span> corpus files.
</p>
<div class="progress" id="query-results-progress">
<div class="determinate" id="query-results-determinate"></div>
</div>
<ul class="pagination paginationTop"></ul>
<!-- Query results table -->
<table class="highlight responsive-table">
<thead>
<tr>
<th style="width: 2%">Nr.</th>
<th style="width: 3%">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 class="list"></tbody>
</table>
<ul class="pagination paginationBottom"></ul>
</div>
</div>
</div>
</div>
<!-- Modals -->
<div class="modal no-autoinit" id="init-display">
<div class="modal-content">
<h4>Initializing your corpus analysis session...</h4>
<div class="error-container hide show-on-error"></div>
<div class="hide progress show-while-waiting">
<div class="indeterminate"></div>
</div>
</div>
</div>
<script src="{{ url_for('static', filename='js/nopaque.CorpusAnalysisClient.js') }}"></script>
<script>
var client = undefined;
var initDisplay = undefined;
var queryDisplay = undefined;
var initDisplayElement = document.getElementById("init-display");
var queryDisplayElement = document.getElementById("query-display");
var queryFormElement = document.getElementById("query-form");
var queryResultsDeterminateElement = document.getElementById("query-results-determinate");
var queryResultsProgressElement = document.getElementById("query-results-progress");
var receivedMatchNumElement = document.getElementById("received-match-num");
var textLookupNumElement = document.getElementById("text-lookup-num");
var totalMatchNumElement = document.getElementById("total-match-num");
var results = undefined;
document.addEventListener("DOMContentLoaded", () => {
var initModal = M.Modal.init(initDisplayElement, {dismissible: false});
// Init corpus analysis components
initDisplay = new CorpusAnalysisDisplay(initDisplayElement);
queryDisplay = new CorpusAnalysisDisplay(queryDisplayElement);
client = new CorpusAnalysisClient({{ corpus_id }}, nopaque.socket);
initModal.open();
client.setDisplay("init", initDisplay);
client.setCallback("init", () => {initModal.close();});
client.setDisplay("query", queryDisplay);
client.setCallback("query", (response) => {
// This is called when a query was successfull
results = {matches: [], cpos_lookup: {}, text_lookup: {}};
queryResultsDeterminateElement.style.width = "0%";
receivedMatchNumElement.innerText = "0";
textLookupNumElement.innerText = "0";
totalMatchNumElement.innerText = response.num_matches;
});
client.setCallback("query_results", (response) => {
// This is called when results are transmitted.
if (response.progress === 100) {
queryResultsProgressElement.classList.add("hide");
}
queryResultsDeterminateElement.style.width = `${response.progress}%`;
results.matches.push(...response.chunk.matches);
receivedMatchNumElement.innerText = `${results.matches.length}`;
Object.assign(results.cpos_lookup, response.chunk.cpos_lookup);
Object.assign(results.text_lookup, response.chunk.text_lookup);
textLookupNumElement.innerText = `${Object.keys(results.text_lookup).length}`;
});
// Trigger corpus analysis initialization on server side
client.init();
queryFormElement.addEventListener("submit", (e) => {
// Prevent page from reloading on submit
e.preventDefault();
// Gather query data
var queryFormData = new FormData(queryFormElement);
var query = queryFormData.get("query-form-query");
// Send query to server
client.query(query);
});
});
</script>
{% endblock %}