Finalize inspect view display options

This commit is contained in:
Stephan Porada 2020-04-20 13:48:40 +02:00
parent 889976dc9b
commit 6126477825
2 changed files with 61 additions and 22 deletions

View File

@ -61,8 +61,8 @@ def analyse_corpus(corpus_id):
results_per_page=request.args.get('results_per_page', 30))
query_form = QueryForm(prefix='query-form',
query=request.args.get('query'))
query_download_form = QueryDownloadForm()
inspect_display_options_form = InspectDisplayOptionsForm(prefix='query_download_form')
query_download_form = QueryDownloadForm(prefix='query-download-form')
inspect_display_options_form = InspectDisplayOptionsForm(prefix='inspect-display-options-form')
return render_template('corpora/analyse_corpus.html.j2',
corpus_id=corpus_id,
display_options_form=display_options_form,

View File

@ -193,22 +193,24 @@ class ResultsList extends List {
let contextModalLoading;
let contextModalReady;
let contextResultsElement;
let modalExpertModeSwitchElement;
let highlightSentencesSwitchElement;
let htmlTokenStr;
let lc;
let modalExpertModeSwitchElement;
let modalTokenElements;
let nrOfContextSentences;
let partElement;
let rc;
let token;
let tokenHTMLArray;
let uniqueS;
let htmlTokenStr;
let tokenHTMlElement;
let uniqueS;
this.contextData = response.payload;
contextResultsElement = document.getElementById("context-results");
modalExpertModeSwitchElement = document.getElementById("query_download_form-expert_mode_inspect");
highlightSentencesSwitchElement = document.getElementById("query_download_form-highlight_sentences");
modalExpertModeSwitchElement = document.getElementById("inspect-display-options-form-expert_mode_inspect");
highlightSentencesSwitchElement = document.getElementById("inspect-display-options-form-highlight_sentences");
nrOfContextSentences = document.getElementById("context-sentences");
uniqueS = new Set();
// check if cpos ranges are used or not
if (this.contextData.cpos_ranges == true) {
@ -276,51 +278,87 @@ class ResultsList extends List {
contextResultsElement.appendChild(sentenceElement);
}
modalExpertModeSwitchElement.addEventListener("change", (event) => {
// add inspect display options events
modalExpertModeSwitchElement.onchange = (event) => {
if (event.target.checked) {
this.expertModeOn("context-results");
} else {
this.expertModeOff("context-results")
}
});
};
if (modalExpertModeSwitchElement.checked) {
this.expertModeOn("context-results");
}
highlightSentencesSwitchElement.addEventListener("change", (event) => {
highlightSentencesSwitchElement.onchange = (event) => {
if (event.target.checked) {
this.higlightContextSentences();
} else {
this.unhighlightContextSentences();
}
});
};
nrOfContextSentences.onchange = (event) => {
console.log(event.target.value);
this.changeSentenceContext(event.target.value);
}
// checks on new modal opening if switches are checked
// if switches are checked functions are executed
if (modalExpertModeSwitchElement.checked) {
this.expertModeOn("context-results");
}
if (highlightSentencesSwitchElement.checked) {
this.higlightContextSentences();
}
// checks the value of the number of sentences to show on modal opening
// sets context sentences accordingly
this.changeSentenceContext(nrOfContextSentences.value)
}
higlightContextSentences() {
let sentences;
sentences = document.getElementById("context-results").getElementsByClassName("sentence");
for (let s of sentences) {
s.insertAdjacentHTML("afterend", `<br>`)
s.insertAdjacentHTML("beforeend", `<span><br><br></span>`)
}
}
unhighlightContextSentences() {
let sentences;
let sibling;
let br;
sentences = document.getElementById("context-results").getElementsByClassName("sentence");
for (let s of sentences) {
sibling = s.nextSibling;
sibling.remove();
br = s.lastChild;
br.remove();
}
}
changeSentenceContext(sValue) {
// TODO:
changeSentenceContext(sValue, maxSValue=10) {
let array;
let sentences;
let toHideArray;
let toShowArray;
sValue = maxSValue - sValue;
console.log(sValue);
sentences = document.getElementById("context-results").getElementsByClassName("sentence");
array = Array.from(sentences);
if (sValue != 0) {
toHideArray = array.slice(0, sValue).concat(array.slice(-(sValue)));
toShowArray = array.slice(sValue, 9).concat(array.slice(9, -(sValue)))
} else {
toHideArray = [];
toShowArray = array;
}
console.log(array);
console.log("#######");
console.log(toHideArray);
for (let s of toHideArray) {
s.classList.add("hide");
}
for (let s of toShowArray) {
s.classList.remove("hide");
}
}
// ###### Display options changing live how the matches are being displayed ######
@ -417,11 +455,11 @@ class ResultsList extends List {
this.currentExpertTokenElements[htmlId] = document.getElementById(htmlId).getElementsByClassName("token");
this.tooltipEventCreateBind = this.tooltipEventCreate.bind(this);
this.tooltipEventDestroyBind = this.tooltipEventDestroy.bind(this);
this.eventTokens[htmlId] = [];
for (let tokenElement of this.currentExpertTokenElements[htmlId]) {
tokenElement.classList.add("chip", "hoverable", "expert-view");
tokenElement.onmouseover = this.tooltipEventCreateBind;
tokenElement.onmouseout = this.tooltipEventDestroyBind;
this.eventTokens[htmlId] = [];
this.eventTokens[htmlId].push(tokenElement);
}
}
@ -463,6 +501,7 @@ class ResultsList extends List {
tokenElement.classList.remove("chip", "hoverable", "expert-view");
}
this.currentExpertTokenElements[htmlId] = [];
for (let eventToken of this.eventTokens[htmlId]) {
eventToken.onmouseover = "";
eventToken.onmouseout = "";