Clean up corpus analysis and add new features

This commit is contained in:
Stephan Porada
2020-03-18 15:52:53 +01:00
parent c5e56692b1
commit 3111cc5175
5 changed files with 129 additions and 61 deletions

View File

@ -157,18 +157,25 @@ server side -->
<div class="card">
<div class="card-content" id="result-list" style="overflow: hidden;">
<span class="card-title">Query Results</span>
<div class="row">
<div class="col s12" id="query-results-metadata">
<div class="hide" id="query-results-head">
<div class="col s12 m6 l6">
<div class="row">
<div class="col s10" id="query-results-metadata"></div>
</div>
<div class="col s12">
<div class="row">
<div class="progress">
<div class="determinate" style="width: 70%"></div>
<div class="determinate"></div>
</div>
<p>&nbsp;</p>
<button id="export-query-results" class="waves-effect waves-light btn-small right hide" type="submit">Export Results<i class="material-icons right">file_download</i></button>
</div>
</div>
<div class="col s12 m6 l6">
<div class="row" id="interaction-elements">
<button id="export-query-results" class="waves-effect waves-light btn-small right disabled" type="submit">Export Results<i class="material-icons right">file_download</i></button>
</div>
</div>
</div>
<!-- table showing the query results -->
<div class="col s12">
<ul class="pagination paginationTop"></ul>
<table class="responsive-table highlight">
<thead>
@ -184,6 +191,8 @@ server side -->
</tbody>
</table>
<ul class="pagination paginationBottom"></ul>
</div>
</div>
</div>
</div>
@ -222,10 +231,24 @@ server side -->
<script src="{{ url_for('static', filename='js/nopaque.analyse_corpus.js') }}"></script>
<script>
// Initialising some modals for later usage
// ### Initiating global variables ###
// create some globa modals for later usage
var contextModal;
var loadingModal;
var exportModal;
// create some global variables
var hitsPerPage;
var result;
var resultList;
var queryFinished;
// create some global elements
var exportQueryResultsElement;
var queryResultsDeterminateElement;
var queryResultsTableElement;
var queryLoadingElement;
var contextResultsElement;
document.addEventListener("DOMContentLoaded", function() {
contextModal = M.Modal.init(document.getElementById("context-modal"),
{"onCloseEnd": function() {
@ -250,26 +273,24 @@ server side -->
}
});
// getting some HTML-elements to use/hide/remove/show or add some other elements to them
var queryResultsElement = document.getElementById("query-results");
var queryResultsMetadataElement = document.getElementById("query-results-metadata");
var exportQueryResults = document.getElementById("export-query-results");
exportQueryResults.onclick = function() {
exportModal.open();
};
var contextResultsElement = document.getElementById("context-results");
var queryLoadingElement = document.getElementById("getting-query-results");
// 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
var queryResultsDeterminateElement = document.getElementsByClassName("determinate")[0];
var queryResultsTableElement = document.getElementById("recieved-query-results");
;
// create some global variables
var hitsPerPage;
var result;
var resultList;
var queryLoadingElement = document.getElementById("getting-query-results");
var exportQueryResultsElement = document.getElementById("export-query-results");
var contextResultsElement = document.getElementById("context-results");
// socket.io analysis submit to the CQP server
let queryFormElement = document.getElementById("query-form");
queryFormElement.addEventListener("submit", sendQuery);
// get context of one match if inspected
nopaque.socket.on("match_context", showMatchContext);
// live update of hits per page
var hitsPerPageInputElement = document.getElementById("hits-per-page");
hitsPerPageInputElement.onchange = changeHitsPerPage;
@ -282,11 +303,17 @@ server side -->
var paginationElements = document.getElementsByClassName("pagination");
for (element of paginationElements) {
element.addEventListener("click", changeContext);
element.addEventListener("click", activateInspect);
}
// socket.on triggered when result chunks are recieved
nopaque.socket.on("corpus_analysis_query", recieveResults);
// Add onclick to open download modal
exportQueryResultsElement.onclick = function() {
exportModal.open();
}
// add onclick to download JSON button and download the file
var downloadResultsJSONElement = document.getElementById("download-results-json")
downloadResultsJSONElement.onclick = function() {