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

Enhance pj_analyse

Browse Source
This commit is contained in:
Stephan Porada
2020-03-31 10:17:04 +02:00
parent 4556a52ffc
commit c33889f617
4 changed files with 91 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/templates/corpora/analyse_corpus.html.j2
View File

@ -247,7 +247,7 @@ server side -->
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 quer form
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

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

@ -5,11 +5,17 @@
{% block page_content %}
<div class="col s12">
<ul class="collapsible expandable">
<li class="active hoverable">
<div class="collapsible-header">
<i class="material-icons">search</i>Query
</div>
<div class="collapsible-body">
<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;">
<!-- Query form -->
<form id="query-form">
<div class="row">
@ -104,8 +110,24 @@
</div>
<script src="{{ url_for('static', filename='js/nopaque.CorpusAnalysisClient.js') }}"></script>
<script src="{{ url_for('static', filename='js/nopaque.CorpusAnalysisClient.js') }}">
</script>
<script src="{{ url_for('static', filename='js/nopaque.callbacks.js') }}">
</script>
<script>
// ###### Defining global variables used in other functions ######
var results; // full JSON object holding match results
var queryFormElement; // the query form
var collapsibleElements; // all collapsibles on site
var queryResultsProgressElement; // Div element holding the progress bar
var queryResultsDeterminateElement; // The progress bar for recieved results
// ###### Initialize variables ######
// get collapsibles to alter options of those
var collapsibleElements = document.querySelector('.collapsible.expandable');
var client = undefined;
var initDisplay = undefined;
var queryDisplay = undefined;
@ -115,53 +137,43 @@
var queryFormElement = document.getElementById("query-form");
var queryResultsDeterminateElement = document.getElementById("query-results-determinate");
var queryResultsProgressElement = document.getElementById("query-results-progress");
var receivedMatchNumElement = document.getElementById("received-match-num");
var matchNumElement = document.getElementById("match-num");
var textLookupNumElement = document.getElementById("text-lookup-num");
receivedMatchNumElement = document.getElementById("received-match-num");
matchNumElement = document.getElementById("match-num");
textLookupNumElement = document.getElementById("text-lookup-num");
var results = undefined;
document.addEventListener("DOMContentLoaded", () => {
//set accordion of collapsibles to false
M.Collapsible.init(collapsibleElements, {accordion: false});
var initModal = M.Modal.init(initDisplayElement, {dismissible: false});
// Init corpus analysis components
initDisplay = new CorpusAnalysisDisplay(initDisplayElement);
queryDisplay = new CorpusAnalysisDisplay(queryDisplayElement);
client = new CorpusAnalysisClient({{ corpus_id }}, nopaque.socket);
initModal.open();
// set displays visibilitys and Callback functions
client.setDisplay("init", initDisplay);
client.setCallback("init", () => {initModal.close();});
client.setCallback("init", () => {
initModal.close();
});
client.setDisplay("query", queryDisplay);
client.setCallback("query", (payload) => {
// This is called when a query was successfull
results = {matches: [], cpos_lookup: {}, text_lookup: {}};
queryResultsDeterminateElement.style.width = "0%";
receivedMatchNumElement.innerText = "0";
textLookupNumElement.innerText = "0";
matchNumElement.innerText = payload.num_matches;
querySetup(payload);
});
client.setCallback("query_results", (payload) => {
// This is called when results are transmitted.
if (payload.progress === 100) {
queryResultsProgressElement.classList.add("hide");
}
queryResultsDeterminateElement.style.width = `${payload.progress}%`;
results.matches.push(...payload.chunk.matches);
receivedMatchNumElement.innerText = `${results.matches.length}`;
Object.assign(results.cpos_lookup, payload.chunk.cpos_lookup);
Object.assign(results.text_lookup, payload.chunk.text_lookup);
textLookupNumElement.innerText = `${Object.keys(results.text_lookup).length}`;
queryRenderResults(payload);
});
// Trigger corpus analysis initialization on server side
client.init();
queryFormElement.addEventListener("submit", (e) => {
// start a query request on submit
queryFormElement.addEventListener("submit", (event) => {
// Prevent page from reloading on submit
e.preventDefault();
// Gather query data
var queryFormData = new FormData(queryFormElement);
var query = queryFormData.get("query-form-query");
// Send query to server
client.query(query);
event.preventDefault();
// Get query string and send query to server
let queryStr = client.getQueryStr(queryFormElement);
client.query(queryStr);
});
});
</script>