Skip to content
Snippets Groups Projects
Commit 74e5c47e authored by Stephan Porada's avatar Stephan Porada :speech_balloon:
Browse files

Enhance analysis UI add first iteration of results download

parent 5c5f7012
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/corpora/events.py
+ 3
− 2
View file @ 74e5c47e
...@@ -45,7 +45,7 @@ def corpus_analysis(message): ...@@ -45,7 +45,7 @@ def corpus_analysis(message):
# Prepare and execute a query # Prepare and execute a query
corpus_name = 'CORPUS' corpus_name = 'CORPUS'
query = str(message['query']) query = str(message['query'])
result_len = 500 result_len = 100
context_len = int(message['context']) context_len = int(message['context'])
result_offset = 0 result_offset = 0
client.select_corpus(corpus_name) client.select_corpus(corpus_name)
...@@ -55,12 +55,13 @@ def corpus_analysis(message): ...@@ -55,12 +55,13 @@ def corpus_analysis(message):
logger.warning(e) logger.warning(e)
socketio.emit('corpus_analysis', str(e), room=request.sid) socketio.emit('corpus_analysis', str(e), room=request.sid)
else: else:
logger.warning('====== Initial query {} ======'.format(query))
results = client.show_query_results(result_len=result_len, results = client.show_query_results(result_len=result_len,
context_len=context_len, context_len=context_len,
result_offset=result_offset) result_offset=result_offset)
result_offset += result_len # initial offfset is plus result len because client.show_query_results has been already executed once result_offset += result_len # initial offfset is plus result len because client.show_query_results has been already executed once
while result_offset < client.total_nr_matches: while result_offset < client.total_nr_matches:
logger.warning('===While loop start.===') logger.warning('====== While loop start for {} ======'.format(query))
logger.warning('result_offset: {}'.format(result_offset)) logger.warning('result_offset: {}'.format(result_offset))
results_append = client.show_query_results(result_len=result_len, results_append = client.show_query_results(result_len=result_len,
context_len=context_len, context_len=context_len,
......
app/corpora/forms.py
+ 2
− 1
View file @ 74e5c47e
...@@ -81,5 +81,6 @@ class QueryDownloadForm(FlaskForm): ...@@ -81,5 +81,6 @@ class QueryDownloadForm(FlaskForm):
choices=[('', 'Choose file type'), choices=[('', 'Choose file type'),
('csv', 'csv'), ('csv', 'csv'),
('json', 'json'), ('json', 'json'),
('excel', 'excel')], ('excel', 'excel'),
('html', 'html-table')],
validators=[DataRequired()]) validators=[DataRequired()])
app/static/css/nopaque.css
+ 1
− 1
View file @ 74e5c47e
...@@ -28,7 +28,7 @@ main { ...@@ -28,7 +28,7 @@ main {
padding-left: 300px; padding-left: 300px;
} }
.modal { .modal:not(.bottom-sheet) {
left: 300px; left: 300px;
} }
......
app/templates/corpora/analyse_corpus.html.j2
+ 130
− 92
View file @ 74e5c47e
...@@ -38,113 +38,133 @@ ...@@ -38,113 +38,133 @@
<form id="query-form"> <form id="query-form">
<div class="col s12"> <div class="col s12">
<div class="card"> <ul class="collapsible expandable">
<div class="card-content"> <li class="active">
<div class="row"> <!-- <div class="collapsible-header">
<div class="col s12 m11"> <i class="material-icons">search</i>CQP Query
<div class="input-field"> </div> -->
<i class="material-icons prefix">search</i> <div class="collapsible-body" style="padding: 0px 2rem;">
{{ query_form.query() }} <div class="row">
{{ query_form.query.label }} <div class="col s12 m11">
<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> <div class="input-field">
{% for error in query_form.query.errors %} <i class="material-icons prefix">search</i>
<span class="helper-text red-text">{{ error }}</span> {{ query_form.query() }}
{% endfor %} {{ 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>
{% for error in query_form.query.errors %}
<span class="helper-text red-text">{{ error }}</span>
{% endfor %}
</div>
</div>
<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>
</div> </div>
</div>
<div class="col s12 m1">
<p class="hide-on-small-only">&nbsp;</p>
<button class="waves-effect waves-light btn-small right" type="submit">Send<i class="material-icons right">send</i></button>
</div> </div>
</div> </div>
</div> </li>
</div> <li class="hoverable">
</div> <div class="collapsible-header">
<i class="material-icons">settings</i>Display Options
<div class="col s12 m3"> </div>
<div class="card"> <div class="collapsible-body">
<div class="card-content"> <div class="row">
<div id="query-form"> <div class="col s6">
<span class="card-title">Options</span> <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> {{ query_form.hits_per_page() }}
{{ query_form.hits_per_page() }} {{ query_form.hits_per_page.label }}
{{ query_form.hits_per_page.label }} {% for error in query_form.hits_per_page.errors %}
{% for error in query_form.hits_per_page.errors %} <span class="helper-text red-text">{{ error }}</span>
<span class="helper-text red-text">{{ error }}</span> {% endfor %}
{% endfor %} </div>
</div> </div>
<div class="input-field"> <div class="col s6">
<i class="material-icons prefix">short_text</i> <div class="input-field">
{{ query_form.context() }} <i class="material-icons prefix">short_text</i>
{{ query_form.context.label }} {{ query_form.context() }}
{% for error in query_form.context.errors %} {{ query_form.context.label }}
<span class="helper-text red-text">{{ error }}</span> {% for error in query_form.context.errors %}
{% endfor %} <span class="helper-text red-text">{{ error }}</span>
{% endfor %}
</div>
</div>
</div> </div>
<div class="switch"> <div class="row">
<label> <div class="switch">
Expert Mode <label>
<input type="checkbox" id="expert-mode-switch"> Expert Mode
<span class="lever"></span> <input type="checkbox" id="expert-mode-switch">
</label> <span class="lever"></span>
</label>
</div>
</div> </div>
</div> </div>
</div> </li>
</div> </ul>
</div> </div>
</form> </form>
<div class="col s12 hide"> <div id="export-query-results-modal" class="modal modal-fixed-footer no-autoinit">
<div class="card"> <!-- <form id="download-query-results-form" method="post"> -->
<div class="card-content"> <div class="modal-content">
<span class="card-title">Query Link</span> {{ query_download_form.hidden_tag() }}
<span class="card-title">Download Results</span> <h4>Download current query Results</h4>
<p>Downlaod all results of the current query as csv, excel or json file.</p> <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"> <div class="input-field">
<i class="material-icons prefix">insert_drive_file</i> <i class="material-icons prefix">insert_drive_file</i>
{{ query_download_form.file_type() }} {{ query_download_form.file_type() }}
{{ query_download_form.file_type.label }} {{ query_download_form.file_type.label }}
{% for error in query_download_form.file_type.errors %} {% for error in query_download_form.file_type.errors %}
<span class="helper-text red-text">{{ error }}</span> <span class="helper-text red-text">{{ error }}</span>
{% endfor %} {% endfor %}
</div>
<button class="btn waves-effect waves-light" id="download-form-submit" style="width: 100%;" type="submit">Download</button>
</div> </div>
</div> </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> -->
</div>
<div class="col s12 m9 hide" id="getting-query-results"> <div class="row">
<div class="card"> <div class="col s12 hide" id="getting-query-results">
<div class="card-content"> <div class="card">
<span class="card-title">Fetching your results!</span> <div class="card-content">
<div> <span class="card-title">Fetching your results!</span>
<div class="progress"> <div>
<div class="indeterminate"></div> <div class="progress">
<div class="indeterminate"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col s12 m9" id="recieved-query-results"> <div class="row">
<div class="card"> <div class="col s12" id="recieved-query-results">
<div class="card-content" id="result-list"> <div class="card">
<span class="card-title">Query Results</span> <div class="card-content" id="result-list">
<p id="query-results-metadata"></p> <span class="card-title">Query Results</span>
<ul class="pagination paginationTop"></ul> <p id="query-results-metadata">
<table class="responsive-table highlight"> <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>
<thead> </p>
<tr> <ul class="pagination paginationTop"></ul>
<th style="width: 5%">Title</th> <table class="responsive-table highlight">
<th style="width: 25%">Left context</th> <thead>
<th style="width: 45%">Match</th> <tr>
<th style="width: 25%">Right Context</th> <th style="width: 5%">Title</th>
</tr> <th style="width: 25%">Left context</th>
</thead> <th style="width: 45%">Match</th>
<tbody class="list" id="query-results"></tbody> <th style="width: 25%">Right Context</th>
</table> </tr>
<ul class="pagination paginationBottom"></ul> </thead>
<tbody class="list" id="query-results"></tbody>
</table>
<ul class="pagination paginationBottom"></ul>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -179,6 +199,7 @@ ...@@ -179,6 +199,7 @@
<script> <script>
var contextModal; var contextModal;
var loadingModal; var loadingModal;
var exportModal;
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
contextModal = M.Modal.init(document.getElementById("context-modal"), contextModal = M.Modal.init(document.getElementById("context-modal"),
{"onCloseEnd": function() { {"onCloseEnd": function() {
...@@ -186,6 +207,9 @@ ...@@ -186,6 +207,9 @@
document.getElementById("context-modal-ready").classList.add("hide");}}); document.getElementById("context-modal-ready").classList.add("hide");}});
loadingModal = M.Modal.init(document.getElementById("loading-modal"), loadingModal = M.Modal.init(document.getElementById("loading-modal"),
{"dismissible": false}); {"dismissible": false});
exportModal = M.Modal.init(document.getElementById("export-query-results-modal"),
{"dismissible": true});
M.Collapsible.init(elem, {accordion: false});
loadingModal.open(); loadingModal.open();
nopaque.socket.emit("request_corpus_analysis", {{ corpus_id }}); nopaque.socket.emit("request_corpus_analysis", {{ corpus_id }});
}); });
...@@ -217,6 +241,10 @@ ...@@ -217,6 +241,10 @@
var queryFormElement = document.getElementById("query-form"); var queryFormElement = document.getElementById("query-form");
var queryResultsElement = document.getElementById("query-results"); var queryResultsElement = document.getElementById("query-results");
var queryResultsMetadataElement = document.getElementById("query-results-metadata") 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 contextResultsElement = document.getElementById("context-results");
var queryLoadingElement = document.getElementById("getting-query-results"); var queryLoadingElement = document.getElementById("getting-query-results");
var queryResultsTableElement = document.getElementById("recieved-query-results"); var queryResultsTableElement = document.getElementById("recieved-query-results");
...@@ -257,7 +285,9 @@ ...@@ -257,7 +285,9 @@
} else { } else {
total_nr_matches = message["total_nr_matches"]; total_nr_matches = message["total_nr_matches"];
let count_corpus_files = Object.keys(message["text_lookup"]).length; let count_corpus_files = Object.keys(message["text_lookup"]).length;
queryResultsMetadataElement.innerText = message["total_nr_matches"] + " matches in " + count_corpus_files + " corpus files."; queryResultsMetadataElement.innerHTML = message["total_nr_matches"] + " matches in " + count_corpus_files + " corpus files.";
queryResultsMetadataElement.appendChild(exportQueryResults);
exportQueryResults.classList.remove("hide");
var matchElement; var matchElement;
var matchTextTitlesElement; var matchTextTitlesElement;
...@@ -362,12 +392,19 @@ ...@@ -362,12 +392,19 @@
var inspectBtn = inspectBtns[i]; var inspectBtn = inspectBtns[i];
var dataIndex = inspectBtn.parentNode.parentNode.getAttribute("data-index"); var dataIndex = inspectBtn.parentNode.parentNode.getAttribute("data-index");
inspectBtn.onclick = function() { inspectBtn.onclick = function() {
contextModal.open(); exportModal.open();
nopaque.socket.emit("inspect_match", {"cpos": matches[dataIndex]["hit"]}); 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 addToolTipToTokenElement(tokenElement, token) { function addToolTipToTokenElement(tokenElement, token) {
M.Tooltip.init(tokenElement, M.Tooltip.init(tokenElement,
{"html": `<table> {"html": `<table>
...@@ -434,6 +471,7 @@ ...@@ -434,6 +471,7 @@
contextResultsElement.append(sentenceElement); contextResultsElement.append(sentenceElement);
} }
}); });
// collapsible display options
var elem = document.querySelector('.collapsible.expandable');
</script> </script>
{% endblock %} {% endblock %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment