mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-12-24 02:24:20 +00:00
Enhance analysis UI add first iteration of results download
This commit is contained in:
Stephan Porada
parent
5c5f7012eb
commit
74e5c47e3b
@ -45,7 +45,7 @@ def corpus_analysis(message):
|
||||
# Prepare and execute a query
|
||||
corpus_name = 'CORPUS'
|
||||
query = str(message['query'])
|
||||
result_len = 500
|
||||
result_len = 100
|
||||
context_len = int(message['context'])
|
||||
result_offset = 0
|
||||
client.select_corpus(corpus_name)
|
||||
@ -55,12 +55,13 @@ def corpus_analysis(message):
|
||||
logger.warning(e)
|
||||
socketio.emit('corpus_analysis', str(e), room=request.sid)
|
||||
else:
|
||||
logger.warning('====== Initial query {} ======'.format(query))
|
||||
results = client.show_query_results(result_len=result_len,
|
||||
context_len=context_len,
|
||||
result_offset=result_offset)
|
||||
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:
|
||||
logger.warning('===While loop start.===')
|
||||
logger.warning('====== While loop start for {} ======'.format(query))
|
||||
logger.warning('result_offset: {}'.format(result_offset))
|
||||
results_append = client.show_query_results(result_len=result_len,
|
||||
context_len=context_len,
|
||||
|
||||
@ -81,5 +81,6 @@ class QueryDownloadForm(FlaskForm):
|
||||
choices=[('', 'Choose file type'),
|
||||
('csv', 'csv'),
|
||||
('json', 'json'),
|
||||
('excel', 'excel')],
|
||||
('excel', 'excel'),
|
||||
('html', 'html-table')],
|
||||
validators=[DataRequired()])
|
||||
|
||||
@ -28,7 +28,7 @@ main {
|
||||
padding-left: 300px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
.modal:not(.bottom-sheet) {
|
||||
left: 300px;
|
||||
}
|
||||
|
||||
|
||||
@ -38,113 +38,133 @@
|
||||
|
||||
<form id="query-form">
|
||||
<div class="col s12">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<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>
|
||||
{% for error in query_form.query.errors %}
|
||||
<span class="helper-text red-text">{{ error }}</span>
|
||||
{% endfor %}
|
||||
<ul class="collapsible expandable">
|
||||
<li class="active">
|
||||
<!-- <div class="collapsible-header">
|
||||
<i class="material-icons">search</i>CQP Query
|
||||
</div> -->
|
||||
<div class="collapsible-body" style="padding: 0px 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>
|
||||
{% 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;"> </p>
|
||||
<button class="waves-effect waves-light btn-small right" type="submit">Send<i class="material-icons right">send</i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s12 m1">
|
||||
<p class="hide-on-small-only"> </p>
|
||||
<button class="waves-effect waves-light btn-small right" type="submit">Send<i class="material-icons right">send</i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="hoverable">
|
||||
<div class="collapsible-header">
|
||||
<i class="material-icons">settings</i>Display Options
|
||||
</div>
|
||||
<div class="collapsible-body">
|
||||
<div class="row">
|
||||
<div class="col s6">
|
||||
<div class="input-field">
|
||||
<i class="material-icons prefix">format_list_numbered</i>
|
||||
{{ query_form.hits_per_page() }}
|
||||
{{ query_form.hits_per_page.label }}
|
||||
{% for error in query_form.hits_per_page.errors %}
|
||||
<span class="helper-text red-text">{{ error }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s6">
|
||||
<div class="input-field">
|
||||
<i class="material-icons prefix">short_text</i>
|
||||
{{ query_form.context() }}
|
||||
{{ query_form.context.label }}
|
||||
{% for error in query_form.context.errors %}
|
||||
<span class="helper-text red-text">{{ error }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="switch">
|
||||
<label>
|
||||
Expert Mode
|
||||
<input type="checkbox" id="expert-mode-switch">
|
||||
<span class="lever"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m3">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div id="query-form">
|
||||
<span class="card-title">Options</span>
|
||||
<div class="input-field">
|
||||
<i class="material-icons prefix">format_list_numbered</i>
|
||||
{{ query_form.hits_per_page() }}
|
||||
{{ query_form.hits_per_page.label }}
|
||||
{% for error in query_form.hits_per_page.errors %}
|
||||
<span class="helper-text red-text">{{ error }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="input-field">
|
||||
<i class="material-icons prefix">short_text</i>
|
||||
{{ query_form.context() }}
|
||||
{{ query_form.context.label }}
|
||||
{% for error in query_form.context.errors %}
|
||||
<span class="helper-text red-text">{{ error }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="switch">
|
||||
<label>
|
||||
Expert Mode
|
||||
<input type="checkbox" id="expert-mode-switch">
|
||||
<span class="lever"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="col s12 hide">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Query Link</span>
|
||||
<span class="card-title">Download Results</span>
|
||||
<p>Downlaod all results of the current query as csv, excel or json file.</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>
|
||||
<button class="btn waves-effect waves-light" id="download-form-submit" style="width: 100%;" type="submit">Download</button>
|
||||
<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>
|
||||
<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="card">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Fetching your results!</span>
|
||||
<div>
|
||||
<div class="progress">
|
||||
<div class="indeterminate"></div>
|
||||
<div class="row">
|
||||
<div class="col s12 hide" id="getting-query-results">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Fetching your results!</span>
|
||||
<div>
|
||||
<div class="progress">
|
||||
<div class="indeterminate"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m9" id="recieved-query-results">
|
||||
<div class="card">
|
||||
<div class="card-content" id="result-list">
|
||||
<span class="card-title">Query Results</span>
|
||||
<p id="query-results-metadata"></p>
|
||||
<ul class="pagination paginationTop"></ul>
|
||||
<table class="responsive-table highlight">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 5%">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" id="query-results"></tbody>
|
||||
</table>
|
||||
<ul class="pagination paginationBottom"></ul>
|
||||
<div class="row">
|
||||
<div class="col s12" id="recieved-query-results">
|
||||
<div class="card">
|
||||
<div class="card-content" id="result-list">
|
||||
<span class="card-title">Query Results</span>
|
||||
<p id="query-results-metadata">
|
||||
<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>
|
||||
</p>
|
||||
<ul class="pagination paginationTop"></ul>
|
||||
<table class="responsive-table highlight">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 5%">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" id="query-results"></tbody>
|
||||
</table>
|
||||
<ul class="pagination paginationBottom"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -179,6 +199,7 @@
|
||||
<script>
|
||||
var contextModal;
|
||||
var loadingModal;
|
||||
var exportModal;
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
contextModal = M.Modal.init(document.getElementById("context-modal"),
|
||||
{"onCloseEnd": function() {
|
||||
@ -186,6 +207,9 @@
|
||||
document.getElementById("context-modal-ready").classList.add("hide");}});
|
||||
loadingModal = M.Modal.init(document.getElementById("loading-modal"),
|
||||
{"dismissible": false});
|
||||
exportModal = M.Modal.init(document.getElementById("export-query-results-modal"),
|
||||
{"dismissible": true});
|
||||
M.Collapsible.init(elem, {accordion: false});
|
||||
loadingModal.open();
|
||||
nopaque.socket.emit("request_corpus_analysis", {{ corpus_id }});
|
||||
});
|
||||
@ -217,6 +241,10 @@
|
||||
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")
|
||||
exportQueryResults.onclick = function() {
|
||||
exportModal.open();
|
||||
};
|
||||
var contextResultsElement = document.getElementById("context-results");
|
||||
var queryLoadingElement = document.getElementById("getting-query-results");
|
||||
var queryResultsTableElement = document.getElementById("recieved-query-results");
|
||||
@ -257,7 +285,9 @@
|
||||
} else {
|
||||
total_nr_matches = message["total_nr_matches"];
|
||||
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 matchTextTitlesElement;
|
||||
@ -362,12 +392,19 @@
|
||||
var inspectBtn = inspectBtns[i];
|
||||
var dataIndex = inspectBtn.parentNode.parentNode.getAttribute("data-index");
|
||||
inspectBtn.onclick = function() {
|
||||
contextModal.open();
|
||||
exportModal.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 addToolTipToTokenElement(tokenElement, token) {
|
||||
M.Tooltip.init(tokenElement,
|
||||
{"html": `<table>
|
||||
@ -434,6 +471,7 @@
|
||||
contextResultsElement.append(sentenceElement);
|
||||
}
|
||||
});
|
||||
|
||||
// collapsible display options
|
||||
var elem = document.querySelector('.collapsible.expandable');
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user