From c33889f61781c3dbfe137ef42cca709214645904 Mon Sep 17 00:00:00 2001
From: Stephan Porada <sporada@uni-bielefeld.de>
Date: Tue, 31 Mar 2020 10:17:04 +0200
Subject: [PATCH] Enhance pj_analyse
---
app/static/js/nopaque.CorpusAnalysisClient.js | 15 +++-
app/static/js/nopaque.callbacks.js | 31 +++++++
app/templates/corpora/analyse_corpus.html.j2 | 2 +-
.../corpora/pj_analyse_corpus.html.j2 | 80 +++++++++++--------
4 files changed, 91 insertions(+), 37 deletions(-)
create mode 100644 app/static/js/nopaque.callbacks.js
diff --git a/app/static/js/nopaque.CorpusAnalysisClient.js b/app/static/js/nopaque.CorpusAnalysisClient.js
index 1c99c0f7..c14cc3cc 100644
--- a/app/static/js/nopaque.CorpusAnalysisClient.js
+++ b/app/static/js/nopaque.CorpusAnalysisClient.js
@@ -47,13 +47,24 @@ class CorpusAnalysisClient {
this.socket.emit("pj_corpus_analysis_init", this.corpusId);
}
- query(query) {
+ query(queryStr) {
if (this.displays.query.errorContainer != undefined) {this.displays.query.errorContainer.innerHTML == "";}
if (this.displays.query != undefined) {this.displays.query.setVisibilityByStatus("waiting");}
- nopaque.socket.emit("pj_corpus_analysis_query", query);
+ nopaque.socket.emit("pj_corpus_analysis_query", queryStr);
+ }
+
+ getQueryStr(queryFormElement) {
+ // gets query
+ let queryFormData;
+ let queryStr;
+ queryFormData = new FormData(queryFormElement);
+ queryStr = queryFormData.get("query-form-query");
+ return queryStr
}
setCallback(type, callback) {
+ // saves callback functions into an object. Key is function type, callback
+ // is the callback function
this.callbacks[type] = callback;
}
diff --git a/app/static/js/nopaque.callbacks.js b/app/static/js/nopaque.callbacks.js
new file mode 100644
index 00000000..71875278
--- /dev/null
+++ b/app/static/js/nopaque.callbacks.js
@@ -0,0 +1,31 @@
+function querySetup(payload) {
+ // This is called when a query was successfull
+ console.log("Query setup.");
+ console.log(payload);
+ queryResultsDeterminateElement.style.width = "0%";
+ receivedMatchNumElement.innerText = "0";
+ textLookupNumElement.innerText = "0";
+ matchNumElement.innerText = payload.num_matches;
+ results = {};
+ results["matches"] = []; // list of all c with lc and rc
+ results["cpos_lookup"] = {}; // object contains all cpos as key value pair
+ results["text_lookup"] = {}; // same as above for all text ids
+ results[]
+}
+
+function queryRenderResults(payload) {
+ // This is called when results are transmitted.
+ console.log("CHUNK:", payload.chunk);
+ console.log("RESULTS:", results);
+ if (payload.progress === 100) {
+ queryResultsProgressElement.classList.add("hide");
+ }
+ queryResultsDeterminateElement.style.width = `${payload.progress}%`;
+ results.matches.push(...payload.chunk.matches);
+ receivedMatchNumElement.innerText = `${results.matches.length}`;
+ // incorporating new chunk results into full results
+ 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}`;
+}
\ No newline at end of file
diff --git a/app/templates/corpora/analyse_corpus.html.j2 b/app/templates/corpora/analyse_corpus.html.j2
index 7f95bbe9..545111d1 100644
--- a/app/templates/corpora/analyse_corpus.html.j2
+++ b/app/templates/corpora/analyse_corpus.html.j2
@@ -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
diff --git a/app/templates/corpora/pj_analyse_corpus.html.j2 b/app/templates/corpora/pj_analyse_corpus.html.j2
index 3c389bbf..c5912fcc 100644
--- a/app/templates/corpora/pj_analyse_corpus.html.j2
+++ b/app/templates/corpora/pj_analyse_corpus.html.j2
@@ -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>
--
GitLab