sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-06-14 01:50:40 +00:00
Code Issues Projects Releases Wiki Activity

Corpus analysis version 3.0 lul

Browse Source
This commit is contained in:
Stephan Porada
2020-04-01 13:44:06 +02:00
parent 90cf1bf8a0
commit 46b82f5737
9 changed files with 529 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
app/templates/corpora/pj_analyse_corpus.html.j2
View File

@ -78,20 +78,58 @@
</ul>
</div>
<!-- entire results div/card -->
<div class="col s12" id="query-display">
<div class="card">
<div class="card-content">
<div class="card-content" id="result-list" style="overflow: hidden;">
<span class="card-title">Query Results</span>
<div class="error-container hide show-on-error"></div>
<div class="hide show-on-success">
<p>
<span id="received-match-num"></span> of <span id="match-num"></span> matches loaded.<br>
Matches occured in <span id="text-lookup-num"></span> corpus files.
</p>
<div class="progress" id="query-results-progress">
<div class="determinate" id="query-results-determinate"></div>
<div class="col s12 m6 l6">
<div class="row">
<p>
<span id="received-match-count">
</span> of
<span id="match-count"></span>
matches loaded.
<br>
Matches occured in <span id="text-lookup-count"></span> corpus files.
</p>
<p id="query-results-user-feedback">
<i class="material-icons">help</i>
The Server is still sending your results. Functions like "Export Results" and "Match Inspect" will be available after all matches have been loaded.
</p>
</div>
<div class="row">
<div class="progress" id="query-results-progress">
<div class="determinate" id="query-results-determinate"></div>
</div>
</div>
</div>
<div class="col s12 m6 l6">
<div class="row">
<button id="query-results-export" class="waves-effect waves-light btn-small right disabled" type="submit">Export Results<i class="material-icons right">file_download</i></button>
</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 id="query-results"></div>
</div>
</div>
</div>
@ -99,6 +137,7 @@
<!-- Modals -->
<!-- Analysis init modal -->
<div class="modal no-autoinit" id="init-display">
<div class="modal-content">
<h4>Initializing your corpus analysis session...</h4>
@ -109,11 +148,60 @@
</div>
</div>
<!-- Export query results modal -->
<div id="query-results-download-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>
<script src="{{ url_for('static', filename='js/nopaque.CorpusAnalysisClient.js') }}">
</script>
<script src="{{ url_for('static', filename='js/nopaque.callbacks.js') }}">
</script>
<script src="{{ url_for('static', filename='js/nopaque.pj_analyse_corpus.js') }}">
</script>
<script>
// ###### Defining global variables used in other functions ######
var results; // full JSON object holding match results
@ -121,32 +209,44 @@
var collapsibleElements; // all collapsibles on site
var queryResultsProgressElement; // Div element holding the progress bar
var queryResultsDeterminateElement; // The progress bar for recieved results
var queryResultsUserFeedbackElement; // Element showing match count|total etc
var queryResultsExportElement; // Download button opens download modal
var exportModal;
var initModal;
var downloadResultsJSONElement; // button for downloading results as JSON
var displayOptionsFormElement;
// ###### Initialize variables ######
queryFormElement = document.getElementById("query-form");
queryResultsProgressElement = document.getElementById("query-results-progress");
queryResultsDeterminateElement = document.getElementById("query-results-determinate");
queryResultsUserFeedbackElement = document.getElementById("query-results-user-feedback");
queryResultsExportElement = document.getElementById("query-results-export");
displayOptionsFormElement = document.getElementById("display-options-form");
// ###### Set some css options ######
// get collapsibles to alter options of those
var collapsibleElements = document.querySelector('.collapsible.expandable');
var client = undefined;
var initDisplay = undefined;
var queryDisplay = undefined;
var initDisplayElement = document.getElementById("init-display");
var queryDisplayElement = document.getElementById("query-display");
var queryFormElement = document.getElementById("query-form");
var queryResultsDeterminateElement = document.getElementById("query-results-determinate");
var queryResultsProgressElement = document.getElementById("query-results-progress");
receivedMatchNumElement = document.getElementById("received-match-num");
matchNumElement = document.getElementById("match-num");
textLookupNumElement = document.getElementById("text-lookup-num");
receivedMatchCountElement = document.getElementById("received-match-count");
matchCountElement = document.getElementById("match-count");
textLookupCountElement = document.getElementById("text-lookup-count");
document.addEventListener("DOMContentLoaded", () => {
//set accordion of collapsibles to false
M.Collapsible.init(collapsibleElements, {accordion: false});
var initModal = M.Modal.init(initDisplayElement, {dismissible: false});
// creates some models on DOMContentLoaded
exportModal = M.Modal.init(document.getElementById("query-results-download-modal"),
{"dismissible": true});
initModal = M.Modal.init(initDisplayElement, {dismissible: false});
// Init corpus analysis components
initDisplay = new CorpusAnalysisDisplay(initDisplayElement);
queryDisplay = new CorpusAnalysisDisplay(queryDisplayElement);
@ -157,6 +257,7 @@
client.setCallback("init", () => {
initModal.close();
});
client.setDisplay("query", queryResultsUserFeedbackElement);
client.setDisplay("query", queryDisplay);
client.setCallback("query", (payload) => {
querySetup(payload);
@ -173,8 +274,19 @@
event.preventDefault();
// Get query string and send query to server
let queryStr = client.getQueryStr(queryFormElement);
client.query(queryStr);
client.sendQuery(queryStr);
});
});
// Add onclick to open download modal wen Export Results button is pressed
queryResultsExportElement.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)};
</script>
{% endblock %}