Add interaactive context change

This commit is contained in:
stephan 2020-03-12 14:48:58 +01:00
parent db7ccb2b11
commit 5c134dd8c5
3 changed files with 53 additions and 20 deletions

View File

@ -68,11 +68,16 @@ class QueryForm(FlaskForm):
validators=[DataRequired()])
context = SelectField('Context',
choices=[('', 'Words of context around hit'),
('5', '5'),
('10', '10'),
('15', '15'),
('20', '20'),
('25', '25')],
('30', '30'),
('40', '40'),
('50', '50'),
('60', '60'),
('70', '70'),
('80', '80'),
('90', '90'),
('100', '100')],
validators=[DataRequired()])
submit = SubmitField('Start Query')

View File

@ -56,7 +56,7 @@ def analyse_corpus(corpus_id):
corpus.status = 'start analysis'
db.session.commit()
query_download_form = QueryDownloadForm()
query_form = QueryForm(context=request.args.get('context', 10),
query_form = QueryForm(context=request.args.get('context', 20),
hits_per_page=request.args.get('hits_per_page', 30),
query=request.args.get('query'))
return render_template('corpora/analyse_corpus.html.j2',

View File

@ -305,13 +305,11 @@
// live update of hits per page
var hitsPerPageInputElement = document.getElementById("hits-per-page");
hitsPerPageInputElement.addEventListener("change", changeResultList);
hitsPerPageInputElement.onchange = changeHitsPerPage;
function changeResultList(event) {
let queryFormElement = document.getElementById("query-form");
queryData = getQueryData(queryFormElement);
function changeHitsPerPage(event) {
try {
resultList.page = queryData["hits_per_page"];
resultList.page = event.target.value;
resultList.update();
nopaque.toast("Updated matches per page.")
} catch (e) {
@ -319,19 +317,47 @@
}
}
// live update of lr context per item
// live update of lr context per item if context value is changed
var contextPerItemElement = document.getElementById("context-per-item");
contextPerItemElement.addEventListener("change", changeContext);
contextPerItemElement.onchange = changeContext;
// eventListener if pagination is used to apply new context size to new page
var paginationElements = document.getElementsByClassName("pagination");
for (element of paginationElements) {
element.addEventListener("click", changeContext);
}
// event triggered on context select change and also if pagination is clicked
function changeContext(event) {
let queryFormElement = document.getElementById("query-form");
queryData = getQueryData(queryFormElement);
console.log(queryData);
try {
nopaque.toast("Loading more context.");
sendQuery(event);
} catch (e) {
console.log("No query given.");
// newValue = event.target.value; // cannot use this anymore due to reuse of this function in the above paginationElements eventListener
var contextPerItemElement = document.getElementById("context");
newValue = contextPerItemElement.value;
console.log(newValue);
var lc = document.getElementsByClassName("left-context");
var rc = document.getElementsByClassName("right-context");
// console.log("LC", lc);
// console.log("RC", rc);
for (let element of lc) {
// console.log(element.childNodes);
array = Array.from(element.childNodes);
// console.log(array);
for (let element of array.slice(newValue)) {
element.classList.add("hide");
}
for (let element of array.slice(0, newValue)) {
element.classList.remove("hide");
}
}
for (let element of rc) {
// console.log(element.childNodes);
array = Array.from(element.childNodes);
// console.log(array);
for (let element of array.slice(newValue)) {
element.classList.add("hide");
}
for (let element of array.slice(0, newValue)) {
element.classList.remove("hide");
}
}
}
@ -392,8 +418,10 @@
}
resultList.add(resultItems, items => {
for (let item of items) {
item.elm = resultList.createResultRowElement(item, chunk);}
item.elm = resultList.createResultRowElement(item, chunk);
}
resultList.update();
changeContext(); // sets lr context to current/default value
});
result["loaded_match_count"] += Object.keys(chunk["matches"]).length;
console.log("After current match count", result["loaded_match_count"]);