mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 01:05:42 +00:00
Remove old analysis template
This commit is contained in:
Stephan Porada
parent
9ec1b596f8
commit
0ffcf972ca
@ -1,364 +0,0 @@
|
||||
{% extends "nopaque.html.j2" %}
|
||||
|
||||
{% set full_width = True %}
|
||||
|
||||
{% block page_content %}
|
||||
<!-- Query Form and display options -->
|
||||
<form id="query-form">
|
||||
<div class="col s12">
|
||||
<ul class="collapsible expandable">
|
||||
<li class="active">
|
||||
<!-- <div class="collapsible-header">
|
||||
<i class="material-icons">search</i>CQP Query
|
||||
</div> -->
|
||||
<!-- 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>
|
||||
{% 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>
|
||||
</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" id="hits-per-page">
|
||||
<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" id ="context-per-item">
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
</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-json">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" id="download-results-csv">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-light red btn">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading animation card when query results are being calculated on the
|
||||
server side -->
|
||||
<div class="row">
|
||||
<div class="col s12 hide" id="calculating-query-results">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Calculating your total results!</span>
|
||||
<div>
|
||||
<div class="progress">
|
||||
<div class="indeterminate"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- entire results div/card -->
|
||||
<div class="col s12" id="recieved-query-results">
|
||||
<div class="card">
|
||||
<div class="card-content" id="result-list" style="overflow: hidden;">
|
||||
<span class="card-title">Query Results</span>
|
||||
<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="row">
|
||||
<div class="progress">
|
||||
<div class="determinate"></div>
|
||||
</div>
|
||||
</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>
|
||||
<tr>
|
||||
<th style="width: 2%">Nr.</th>
|
||||
<th style="width: 3%">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>
|
||||
|
||||
<!-- 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>Building your own analysis interface!</h4>
|
||||
<div class="progress">
|
||||
<div class="indeterminate"></div>
|
||||
</div>
|
||||
</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>
|
||||
<div id="context-modal-loading">
|
||||
<div class="progress">
|
||||
<div class="indeterminate"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="context-modal-ready" class="hide">
|
||||
<div id="context-results"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class="left waves-effect waves-light btn">Export</a>
|
||||
<a href="#!" class="modal-close waves-effect waves-light red btn">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading external script -->
|
||||
<script src="{{ url_for('static', filename='js/nopaque.analyse_corpus.js') }}"></script>
|
||||
<script>
|
||||
|
||||
// ### Initiating global variables ###
|
||||
// create some globa modals for later usage
|
||||
var contextModal;
|
||||
var loadingModal;
|
||||
var exportModal;
|
||||
// create some global variables
|
||||
var result; // will gradually be filled with JSON result chunks of a query
|
||||
var resultsList; // the list.js new ResultList object displaying the results
|
||||
var queryFinished; // bool flag that shows if query is finished or not
|
||||
var analysisClientStatus; // Object holding: {<sid>: 'running'|'idle'}
|
||||
var sessionId; // the clients current session id
|
||||
// create some global elements
|
||||
var exportQueryResultsElement; // export button opens onclick download modal
|
||||
var queryResultsDeterminateElement; // progress bar for recieved query status
|
||||
var queryResultsTableElement; // table element displaying the query results
|
||||
var queryLoadingElement; // shows progress bar until first results are in
|
||||
var queryFormElement; // the query form
|
||||
var hitsPerPageInputElement; // value of hits per page (part of query form)
|
||||
var contextPerItemElement; // value of contex per match (part of query form)
|
||||
var paginationElements; // top and button pagination elements
|
||||
var downloadResultsJSONElement; // button for downloading results as JSON
|
||||
var expertModeSwitchElement; // switch to show if expert mode is on/off
|
||||
|
||||
// set queryFinished to false initially
|
||||
queryFinished = false;
|
||||
analysisClientStatus = {};
|
||||
|
||||
|
||||
// creates some models on DOMContentLoaded
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
contextModal = M.Modal.init(document.getElementById("context-modal"),
|
||||
{"onCloseEnd": function() {
|
||||
document.getElementById("context-modal-loading").classList.remove("hide");
|
||||
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.on("connect", function() {
|
||||
sessionId = nopaque.socket.id;
|
||||
console.log("Clients current session id:", sessionId);
|
||||
setAnalysisStatus("idle", sessionId);
|
||||
});
|
||||
// close loading modal if container for analysis has started
|
||||
nopaque.socket.on("corpus_analysis_init", function(response) {
|
||||
if (response.code === 201) {
|
||||
loadingModal.close();
|
||||
} else {
|
||||
console.log("[ERROR] corpus_analysis_init");
|
||||
console.log(response);
|
||||
}
|
||||
});
|
||||
// recieves server side analysis status updates and sets those accordingly in
|
||||
// analysisClientStatus
|
||||
nopaque.socket.on("send_analysis_status_server", (response) => {
|
||||
console.log("Recieved new analysis status from server:", response.status);
|
||||
setAnalysisStatus(response.status);
|
||||
});
|
||||
|
||||
// recieves results on "corpus_analysis_query" via socket.io
|
||||
nopaque.socket.on("corpus_analysis_query", recieveResults);
|
||||
|
||||
// get context of one match if inspected via socket.io
|
||||
nopaque.socket.on("match_context", showMatchContext);
|
||||
nopaque.socket.emit("corpus_analysis_init", {{ corpus_id }});
|
||||
});
|
||||
|
||||
// sets collapsible display options to expandable isntead of accordion
|
||||
var elem = document.querySelector('.collapsible.expandable');
|
||||
|
||||
// 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
|
||||
queryResultsDeterminateElement = document.getElementsByClassName("determinate")[0];
|
||||
queryResultsTableElement = document.getElementById("recieved-query-results");
|
||||
queryLoadingElement = document.getElementById("calculating-query-results");
|
||||
exportQueryResultsElement = document.getElementById("export-query-results");
|
||||
|
||||
// submits query via socket.emit in the event function to the CQP server
|
||||
queryFormElement = document.getElementById("query-form");
|
||||
queryFormElement.addEventListener("submit", sendQuery);
|
||||
|
||||
// live update of hits per page if hits per page value is changed
|
||||
hitsPerPageInputElement = document.getElementById("hits-per-page");
|
||||
hitsPerPageInputElement.onchange = changeHitsPerPage;
|
||||
|
||||
// live update of lr context per item if context value is changed
|
||||
contextPerItemElement = document.getElementById("context-per-item");
|
||||
contextPerItemElement.onchange = changeContext;
|
||||
|
||||
// eventListener if pagination is used to apply new context size to new page
|
||||
// and also activate inspect match if queryFinished is true
|
||||
paginationElements = document.getElementsByClassName("pagination");
|
||||
for (element of paginationElements) {
|
||||
element.addEventListener("click", changeContext);
|
||||
element.addEventListener("click", activateInspect);
|
||||
}
|
||||
|
||||
// Add onclick to open download modal wen Export Results button is pressed
|
||||
exportQueryResultsElement.onclick = function() {
|
||||
exportModal.open();
|
||||
}
|
||||
|
||||
// add onclick to download JSON button and download the file
|
||||
downloadResultsJSONElement = document.getElementById("download-results-json")
|
||||
downloadResultsJSONElement.onclick = function() {
|
||||
let filename = createDownloadFilename();
|
||||
downloadJSONRessource(filename)};
|
||||
|
||||
// epxert mode table view
|
||||
expertModeSwitchElement = document.getElementById("expert-mode-switch");
|
||||
expertModeSwitchElement.addEventListener("change", function(event) {
|
||||
let currentTokenElements = document.getElementsByClassName("token");
|
||||
let paginationElements = document.getElementsByClassName("pagination");
|
||||
if (event.target.checked) {
|
||||
console.log("Checked!");
|
||||
expertModeOn(currentTokenElements, result);
|
||||
for (element of paginationElements) {
|
||||
element.addEventListener("click", eventHandlerCheck);
|
||||
element.tokenElements = currentTokenElements;
|
||||
}
|
||||
} else {
|
||||
console.log("Unchecked!");
|
||||
expertModeOff(currentTokenElements);
|
||||
console.log("unchecked! Destroy");
|
||||
}
|
||||
})
|
||||
</script>
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue
Block a user