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

Change HTML for corpus analysis

Browse Source
This commit is contained in:
Patrick Jentsch 2019-11-14 15:34:07 +01:00
parent 1b02d73d66
commit df98f3a900
2 changed files with 78 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/corpora/events.py
View File

@ -38,7 +38,7 @@ def init_corpus_analysis(corpus_id):
corpus_id, request.sid) corpus_id, request.sid)
@socketio.on('query_event') @socketio.on('query')
@login_required @login_required
def recv_query(message): def recv_query(message):
logger.warning(message) logger.warning(message)
@ -80,7 +80,7 @@ def recv_query(message):
match['word_list'] = [foo[cpos]['word'] for cpos in match['cpos_list']] match['word_list'] = [foo[cpos]['word'] for cpos in match['cpos_list']]
match.pop('cpos_list', None) match.pop('cpos_list', None)
logger.warning(matches) logger.warning(matches)
socketio.emit('query_results', matches, room=request.sid) socketio.emit('query', matches, room=request.sid)
def observe_corpus_analysis_connection(app, corpus_id, session_id): def observe_corpus_analysis_connection(app, corpus_id, session_id):

174
app/templates/corpora/corpus_analysis.html.j2
View File

@ -1,37 +1,26 @@
{% extends "full_width.html.j2" %} {% extends "full_width.html.j2" %}
{% block page_content %} {% block page_content %}
<div class="col s12 m3 l3 sticky"> <div class="col s12 m3 sticky">
<a class="waves-effect waves-light btn" href="{{ url_for('corpora.corpus', corpus_id=corpus_id) }}"><i class="material-icons left">arrow_back</i>Back to corpus overview</a> <a class="waves-effect waves-light btn" href="{{ url_for('corpora.corpus', corpus_id=corpus_id) }}"><i class="material-icons left">arrow_back</i>Back to corpus overview</a>
<div class="card"> <div class="card">
<form id="query_form" method="POST">
<div class="card-content"> <div class="card-content">
{{ form.hidden_tag() }} <form id="query-form" method="POST">
<span class="card-title">Query and analysis</span> {{ form.hidden_tag() }}
<br> <span class="card-title">Query and analysis</span>
<div class="input-field"> <div class="input-field">
{{ form.query(class='materialize-textarea') }} {{ form.query(class='materialize-textarea') }}
{{ form.query.label }} {{ form.query.label }}
{% for error in form.query.errors %} {% for error in form.query.errors %}
<span class="helper-text red-text">{{ error }}</span> <span class="helper-text red-text">{{ error }}</span>
{% endfor %} {% endfor %}
</div> </div>
<div class="right-align"> <button class="btn waves-effect waves-light" id="query-form-submit" style="width: 100%;" type="submit">Start Query</button>
<button id="sent_query" class="btn" type="submit" name="action">Start Query <p>&nbsp;</p>
<i class="material-icons left">search</i> <span class="card-title">Help</span>
</button> <p><a href="http://cwb.sourceforge.net/files/CQP_Tutorial/">CQP Query Language Tutorial</a></p>
</div> <p>&nbsp;</p>
<br> <span class="card-title">Options</span>
<span class="card-title">Help</span>
<ul>
<li>
<a href="http://cwb.sourceforge.net/files/CQP_Tutorial/">
CQP Query Language Tutorial</a>
</li>
</ul>
<br>
<span class="card-title">Options</span>
<br>
<div class="input-field"> <div class="input-field">
<i class="material-icons prefix">format_list_numbered</i> <i class="material-icons prefix">format_list_numbered</i>
{{ form.hits_per_page() }} {{ form.hits_per_page() }}
@ -40,78 +29,46 @@
<span class="helper-text red-text">{{ error }}</span> <span class="helper-text red-text">{{ error }}</span>
{% endfor %} {% endfor %}
</div> </div>
<br> <div class="input-field">
<div class="input-field"> <i class="material-icons prefix">short_text</i>
<i class="material-icons prefix">short_text</i> {{ form.context() }}
{{ form.context() }} {{ form.context.label }}
{{ form.context.label }} {% for error in form.context.errors %}
{% for error in form.context.errors %} <span class="helper-text red-text">{{ error }}</span>
<span class="helper-text red-text">{{ error }}</span> {% endfor %}
{% endfor %} </div>
</div> </form>
<br> </div>
</form> </div>
<span class="card-title">Download Results</span>
<p>Downlaod all results of the current query as csv, excel or json file.</p> <div class="card">
<form method="POST"> <div class="card-content">
{{ form.hidden_tag() }} <form id="download-form" method="POST">
<div class="input-field"> {{ dl_form.hidden_tag() }}
<i class="material-icons prefix">insert_drive_file</i> <span class="card-title">Download Results</span>
{{ dl_form.file_type() }} <p>Downlaod all results of the current query as csv, excel or json file.</p>
{{ dl_form.file_type.label }} <div class="input-field">
{% for error in dl_form.file_type.errors %} <i class="material-icons prefix">insert_drive_file</i>
<span class="helper-text red-text">{{ error }}</span> {{ dl_form.file_type() }}
{% endfor %} {{ dl_form.file_type.label }}
</div> {% for error in dl_form.file_type.errors %}
<div class="right-align"> <span class="helper-text red-text">{{ error }}</span>
<button class="btn" type="submit" name="action">Download {% endfor %}
<i class="material-icons left">file_download</i> </div>
</button> <button class="btn waves-effect waves-light" id="download-form-submit" style="width: 100%;" type="submit">Download</button>
</div> </form>
</form>
</div> </div>
</div> </div>
</div> </div>
<script>
socket.on('query_results', function(json_results) { <div class="col s12 m9">
console.log('Results recieved')
console.log(json_results)
var queryResultsElement = document.getElementById("query-results");
for (let json_result of json_results) {
queryResultsElement.innerHTML += json_result['word_list'] + '<br>';
}
});
</script>
<div class="col s12 m9 l9">
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<span class="card-title">Query Results</span> <span class="card-title">Query Results</span>
<p id="query-results"></p> <div id="query-results"></div>
</div> </div>
</div> </div>
</div> </div>
<script>
let queryData = document.forms['query_form'].elements;
console.log(queryData);
var queryBtn = document.getElementById('sent_query');
queryBtn.addEventListener('click', function(event) {
event.preventDefault();
sendQueryData();
});
function sendQueryData() {
var query_data = {};
for (element of queryData) {
if (!element.value || element.name == 'csrf_token' || !element.id) {
continue;
}
query_data[element.id] = element.value
}
console.log(query_data)
socket.emit('query_event', query_data);
M.toast({html: 'Query has been sent'});
console.log('Query data has been sent!');
}
</script>
<div id="loading-modal" class="modal no-autoinit"> <div id="loading-modal" class="modal no-autoinit">
<div class="modal-content"> <div class="modal-content">
@ -133,16 +90,37 @@ function sendQueryData() {
</div> </div>
<script> <script>
var loadingModal; var loadingModal;
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
loadingModal = M.Modal.init(document.getElementById("loading-modal"), {"dismissible": false}); loadingModal = M.Modal.init(document.getElementById("loading-modal"),
loadingModal.open(); {"dismissible": false});
}); loadingModal.open();
});
socket.emit('init_corpus_analysis', {{ corpus_id }});
socket.emit('init_corpus_analysis', {{ corpus_id }}); var queryFormElement = document.getElementById("query-form");
socket.on('init_corpus_analysis', function(msg) { var queryFormSubmitElement = document.getElementById("query-form-submit");
if (msg === 'Ready') {loadingModal.close();} var queryResultsElement = document.getElementById("query-results");
});
queryFormSubmitElement.addEventListener('click', function(event) {
event.preventDefault();
let formData = new FormData(queryFormElement);
let queryData = {'context': formData.get('context'),
'hits_per_page': formData.get('hits_per_page'),
'query': formData.get('query')};
socket.emit('query', queryData);
M.toast({html: 'Query has been sent!'});
});
socket.on('init_corpus_analysis', function(msg) {
if (msg === 'Ready') {loadingModal.close();}
});
socket.on('query', function(results) {
queryResultsElement.innerHTML = '';
for (let result of results) {
queryResultsElement.innerHTML += '<p>' + result['word_list'] + '</p>';
}
});
</script> </script>
{% endblock %} {% endblock %}