Merge branch 'development' of gitlab.ub.uni-bielefeld.de:sfb1288inf/opaque into development

This commit is contained in:
Patrick Jentsch 2020-01-22 16:14:03 +01:00
commit fb089d62f0
2 changed files with 101 additions and 33 deletions

View File

@ -94,6 +94,7 @@ class CQiWrapper(CQiClient):
cpos match positions, produced by the query
query -- query written in cqp query language
'''
self.query = query
self.cqp_query(self.corpus_name, result_subcorpus_name, query)
self.result_subcorpus = (self.corpus_name
+ ':'
@ -198,7 +199,8 @@ class CQiWrapper(CQiClient):
self.results = {'matches': all_matches,
'cpos_lookup': all_cpos_infos,
'text_lookup': text_lookup,
'total_nr_matches': self.total_nr_matches}
'total_nr_matches': self.total_nr_matches,
'query': self.query}
return self.results
def get_cpos_infos(self, all_cpos):

View File

@ -36,6 +36,7 @@
}
</style>
<!-- Query Form -->
<form id="query-form">
<div class="col s12">
<ul class="collapsible expandable">
@ -43,14 +44,25 @@
<!-- <div class="collapsible-header">
<i class="material-icons">search</i>CQP Query
</div> -->
<div class="collapsible-body" style="padding: 0px 2rem;">
<!-- Div element above is part of valid materialize collapsible.
Commented out to prevent the user from collapsing it and also to save
space -->
<div class="collapsible-body" style="padding-top: 10px;
padding-right: 2rem;
padding-bottom: 0px;
padding-left: 2rem;">
<div class="row">
<div class="col s12 m11">
<div class="input-field">
<i class="material-icons prefix">search</i>
{{ query_form.query() }}
{{ query_form.query.label }}
<span class="helper-text" data-error="wrong" data-success="right"><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>
<span class="helper-text" data-error="wrong" data-success="right">
<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>
{% for error in query_form.query.errors %}
<span class="helper-text red-text">{{ error }}</span>
{% endfor %}
@ -59,7 +71,10 @@
<div class="col s12 m1">
<p class="hide-on-small-only" style="
margin: 0px;">&nbsp;</p>
<button class="waves-effect waves-light btn-small right" type="submit">Send<i class="material-icons right">send</i></button>
<button class="waves-effect waves-light btn-small right"
type="submit">Send
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
@ -106,28 +121,54 @@
</div>
</form>
<div id="export-query-results-modal" class="modal modal-fixed-footer no-autoinit">
<!-- <form id="download-query-results-form" method="post"> -->
<div class="modal-content">
{{ query_download_form.hidden_tag() }}
<h4>Download current query Results</h4>
<p>The results of the current query can be downlaoded as several files like csv or json. Those files can be used in other software like excel. Also it is easy to publish your results as raw data like this!</p>
<div class="input-field">
<i class="material-icons prefix">insert_drive_file</i>
{{ query_download_form.file_type() }}
{{ query_download_form.file_type.label }}
{% for error in query_download_form.file_type.errors %}
<span class="helper-text red-text">{{ error }}</span>
{% endfor %}
</div>
</div>
<div class="modal-footer">
<!-- <button class="btn waves-effect waves-light" id="download-form-submit" type="submit">Download</button> -->
<a class="btn waves-effect waves-light" id="downloadAnchorElem">Download</a>
</div>
<!-- </form> -->
<!-- Export query results modal -->
<div id="export-query-results-modal"
class="modal modal-fixed-footer no-autoinit">
<div class="modal-content">
{{ query_download_form.hidden_tag() }}
<h4>Download current query Results</h4>
<p>The results of the current query can be downlaoded as several files like csv or json. Those files can be used in other software like excel. Also it is easy to publish your results as raw data like this!</p>
<table>
<tr>
<td>JSON</td>
<td>
<a class="btn waves-effect waves-light" id="download-results">Download
<i class="material-icons right">file_download</i>
</a>
</td>
</tr>
<tr>
<td>CSV</td>
<td>
<a class="btn waves-effect waves-light disabled">Download
<i class="material-icons right">file_download</i>
</a>
</td>
</tr>
<tr>
<td>EXCEL</td>
<td>
<a class="btn waves-effect waves-light disabled">Download
<i class="material-icons right">file_download</i>
</a>
</td>
</tr>
<tr>
<td>HTML</td>
<td>
<a class="btn waves-effect waves-light disabled">Download
<i class="material-icons right">file_download</i>
</a>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green red btn">Close</a>
</div>
</div>
<!-- Loading animation card when query results are being loaded -->
<div class="row">
<div class="col s12 hide" id="getting-query-results">
<div class="card">
@ -143,6 +184,7 @@
</div>
</div>
<!-- table showing the query results -->
<div class="row">
<div class="col s12" id="recieved-query-results">
<div class="card">
@ -169,6 +211,8 @@
</div>
</div>
<!-- Loding animation modal that waits for the CQP server container to be ready
-->
<div id="loading-modal" class="modal no-autoinit">
<div class="modal-content">
<h4>Waiting for analysis software</h4>
@ -178,6 +222,7 @@
</div>
</div>
<!-- Context modal used for detailed information about one match -->
<div id="context-modal" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Match context and information</h4>
@ -240,8 +285,8 @@
var queryFormElement = document.getElementById("query-form");
var queryResultsElement = document.getElementById("query-results");
var queryResultsMetadataElement = document.getElementById("query-results-metadata")
var exportQueryResults = document.getElementById("export-query-results")
var queryResultsMetadataElement = document.getElementById("query-results-metadata");
var exportQueryResults = document.getElementById("export-query-results");
exportQueryResults.onclick = function() {
exportModal.open();
};
@ -387,21 +432,42 @@
}],
valueNames: ["text-titles", "left-context", "hit", "right-context"]};
var userList = new List('result-list', options);
var inspectBtns = document.getElementsByClassName("inspect");
for(var i = 0; i < inspectBtns.length; i++) {
var inspectBtn = inspectBtns[i];
var dataIndex = inspectBtn.parentNode.parentNode.getAttribute("data-index");
inspectBtn.onclick = function() {
exportModal.open();
contextModal.open();
nopaque.socket.emit("inspect_match", {"cpos": matches[dataIndex]["hit"]});
};
}
// download results as JSON
var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(message, undefined, 2));
console.log(dataStr);
var downloadAnchorElem = document.getElementById("downloadAnchorElem");
downloadAnchorElem.setAttribute("href", dataStr);
downloadAnchorElem.setAttribute("download", "results.json");
// Function to download data to a file
function download(downloadElem, data, filename, type) {
var file = new Blob([data], {type: type});
if (window.navigator.msSaveOrOpenBlob) // IE10+
window.navigator.msSaveOrOpenBlob(file, filename);
else { // Others
var url = URL.createObjectURL(file);
downloadElem.href = url;
downloadElem.download = filename;
}
}
// create json filename for download
var today = new Date();
var currentDate = today.getUTCFullYear() + '-' + (today.getUTCMonth() +1) + '-' + today.getUTCDate();
var currentTime = today.getUTCHours() + ":" + today.getUTCMinutes() + ":" + today.getUTCSeconds();
var safeFilename = message['query'].replace(/[^a-z0-9_-]/gi, "_");
var resultFilename = "UTC-" + currentDate + "_" + currentTime + "_" + safeFilename + ".json";
// get a where download is served
var downloadResults = document.getElementById("download-results");
// stringify JSON object for json download
var dataStr = JSON.stringify(message, undefined, 2);
downloadResults.onclick = download(downloadResults,
dataStr,
resultFilename,
"text/json");
});