sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-11-15 09:15:41 +00:00
Code Issues Projects Releases Wiki Activity

Some documentation

Browse Source
This commit is contained in:
Stephan Porada 2020-06-26 09:51:10 +02:00
parent e9cd5dafd1
commit 74104922b6
1 changed files with 46 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
web/app/static/js/nopaque.lists.js
View File

@ -134,11 +134,12 @@ class ResultsList extends List {
this.currentExpertTokenElements = {}; // all token elements which have added
// classes like chip and hoverable for expert view. Collected
//here to delete later on
this.addToSubResultsStatus = {};
this.addToSubResultsIdsToShow = new Set();
this.addToSubResultsStatus = {}; // holds True/false for check buttons used to add matches tu sub-results. If checked, it is True. If unchecked, it is false. Buttons for this have the class add. Those little round check buttons.
this.addToSubResultsIdsToShow = new Set(); // If check button is pressed its corresponding data_index is saved in this set. The set is shown to the user.
}
// handels interactionElements during a pagination navigation
// loops over interactionElements and executes callback functions accordingly
pageChangeEventInteractionHandler(interactionElements) {
// get elements to check thier status
for (let interaction of interactionElements) {
@ -147,18 +148,15 @@ class ResultsList extends List {
let f_on = interaction.bindThisToCallback("on");
let args_on = interaction.callbacks.on.args;
f_on(...args_on);
console.log("ON TRIGGERED");
} else {
let f_off = interaction.bindThisToCallback("off");
let args_off = interaction.callbacks.off.args;
f_off(...args_off);
console.log("OFF TRIGGERED");
}
} else {
let f = interaction.bindThisToCallback("noCheck");
let args = interaction.callbacks.noCheck.args;
f(...args);
console.log("noCheck activated");
}
}
}
@ -179,7 +177,7 @@ class ResultsList extends List {
}
// ###### Functions to add one match to a sub-results ######
// activate add button
// activate the add buttons
activateAddToSubResults() {
subResultsIdListElement.classList.remove("hide");
subResultsCreateElement.classList.remove("hide");
@ -188,7 +186,7 @@ class ResultsList extends List {
addToSubResultsBtn.classList.remove("hide");
}
}
// deactivate add button
// deactivate the add buttons
deactivateAddToSubResults() {
subResultsIdListElement.classList.add("hide");
subResultsCreateElement.classList.add("hide");
@ -198,53 +196,59 @@ class ResultsList extends List {
}
}
// Used in addToSubResults and inspect to toggle the design of the check
// buttons according to its checked unchecked status.
helperActivateBtn(btn) {
console.log(btn);
btn.classList.remove("grey");
btn.classList.add("green");
btn.innerText = "check";
}
// Used in addToSubResults and inspect to toggle the design of the check
// buttons according to its checked unchecked status.
helperDeactivateBtn(btn) {
console.log(btn);
btn.classList.remove("green");
btn.classList.add("grey");
btn.innerText = "add";
}
// add match id on click to a List of marked matches for SubSubcorpora
// remove match id on click from same list
// Either adds or removes a match to the sub-results. For this it checks
// onclick if the current button has been checked or not. For this the
// function checks if its status in addToSubResultsStatus is either flase or
// true. Adds match to sub-results if status is false if status is true it
// removes it.
addToSubResults(dataIndex, tableCall=true) {
console.log(event.target);
let textarea = subResultsIdListElement.getElementsByTagName("textarea")[0]
let textarea = subResultsIdListElement.getElementsByTagName("textarea")[0];
if (!this.addToSubResultsStatus[dataIndex]
|| this.addToSubResultsStatus === undefined) {
// add button is activated
nopaque.flash(`[Match ${dataIndex + 1}] Marked for Sub-Results!`);
// add button is activated because status is either false or undefined
this.helperActivateBtn(event.target);
this.addToSubResultsStatus[dataIndex] = true;
this.addToSubResultsIdsToShow.add(dataIndex + 1);
textarea.innerText = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", ");
M.textareaAutoResize(textarea);
this.addToSubResultsStatus[dataIndex] = true; // sets status to true
this.addToSubResultsIdsToShow.add(dataIndex + 1); // + 1 because user does not see zero indexd data indexes
textarea.innerText = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", "); // automaticalle sorts ids into the textarea in ascending order
M.textareaAutoResize(textarea); // after an insert textarea has to be resized manually
} else if (this.addToSubResultsStatus[dataIndex]) {
// add button is deactivated
nopaque.flash(`[Match ${dataIndex + 1}] Unmarked for Sub-results!`);
// add button is deactivated because status is true
this.helperDeactivateBtn(event.target);
this.addToSubResultsStatus[dataIndex] = false;
this.addToSubResultsIdsToShow.delete(dataIndex + 1);
textarea.innerText = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", ");
M.textareaAutoResize(textarea);
this.addToSubResultsStatus[dataIndex] = false; // sets status to false
this.addToSubResultsIdsToShow.delete(dataIndex + 1); // + 1 because user does not see zero indexd data indexes
textarea.innerText = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", "); // automaticalle sorts ids into the textarea in ascending order
M.textareaAutoResize(textarea); // after an insert textarea has to be resized manually
}
// Toggles the create button accoring to the number of ids in addToSubResultsIdsToShow
if ([...this.addToSubResultsIdsToShow].length > 0) {
subResultsCreateElement.firstElementChild.classList.remove("disabled");
} else if ([...this.addToSubResultsIdsToShow].length === 0) {
subResultsCreateElement.firstElementChild.classList.add("disabled");
}
// After a match as been added or removed the export button will be
// disabled because the sub-results have been alterd and have to be built //// again.
subResultsExportElement.classList.add("disabled");
// also activate/deactivate buttons in the table accordingly if btn in inspect was activated/deactivated
// Also activate/deactivate buttons in the table/jsList results accordingly
//if button in inspect was activated/deactivated.
// This part only runs if tableCall is false.
if (!tableCall) {
let tableAddBtn = document.getElementById("query-results").querySelectorAll(`[data-index="${dataIndex}"]`)[0].getElementsByClassName('add')[0].firstElementChild;
console.log("TABLECALL", tableAddBtn);
let tableAddBtn = document.getElementById("query-results").querySelectorAll(`[data-index="${dataIndex}"]`)[0].getElementsByClassName('add')[0].firstElementChild; // gets the add button from the list view
if (this.addToSubResultsStatus[dataIndex]) {
this.helperActivateBtn(tableAddBtn);
} else {
@ -253,8 +257,8 @@ class ResultsList extends List {
}
}
// triggers emit to get full match context from server for a number of
// matches identified by their data_index
// Triggers emit to get full match context from server for a number of
// matches identified by their data_index.
getMatchWithContext(dataIndexes, type) {
let tmp_first_cpos = [];
let tmp_last_cpos = [];
@ -289,30 +293,30 @@ class ResultsList extends List {
// gets result cpos infos for one dataIndex (list of length 1) to send back to
// the server
inspect(dataIndex, type) {
// get result infos from server and show them in context modal
this.contextId = dataIndex[0];
let contextResultsElement;
contextResultsElement = document.getElementById("context-results");
contextResultsElement.innerHTML = ""; // clear it from old inspects
this.getMatchWithContext(dataIndex, type);
contextModal.open();
// add a button to add this match to sub results
// add a button to add this match to sub results with onclick event
let classes = `btn-floating btn waves-effect` +
`waves-light grey right`
let addToSubResultsIdsBtn = document.createElement("a");
addToSubResultsIdsBtn.setAttribute("class", classes + ` add`);
addToSubResultsIdsBtn.innerHTML = '<i class="material-icons">add</i>';
addToSubResultsIdsBtn.onclick= (event) => {this.addToSubResults(dataIndex[0], false)};
addToSubResultsIdsBtn.onclick= () => {this.addToSubResults(dataIndex[0], false)};
// checks if a button has already been added to the inspect modal and removes it
if (addToSubResultsFromInspectElement.children.length > 0) {
addToSubResultsFromInspectElement.firstElementChild.remove();
}
// Changes the design of the add button according to its checked status
// upon opening the inspect modal.
if (this.addToSubResultsStatus[dataIndex[0]]) {
addToSubResultsIdsBtn.classList.remove("grey");
addToSubResultsIdsBtn.classList.add("green");
addToSubResultsIdsBtn.firstElementChild.innerText = "check";
this.helperActivateBtn(addToSubResultsIdsBtn.firstElementChild);
} else if (!this.addToSubResultsStatus[dataIndex[0]]) {
addToSubResultsIdsBtn.classList.remove("green");
addToSubResultsIdsBtn.classList.add("grey");
addToSubResultsIdsBtn.firstElementChild.innerText = "add";
this.helperDeactivateBtn(addToSubResultsIdsBtn.firstElementChild);
}
addToSubResultsFromInspectElement.appendChild(addToSubResultsIdsBtn);
}
@ -326,6 +330,8 @@ class ResultsList extends List {
return template.content.firstChild;
}
// Used as a callback to handle incoming match context results when inspect
// has been used.
showMatchContext(response) {
this.contextData;
let c;
@ -353,7 +359,6 @@ class ResultsList extends List {
this.contextData["match_count"] = this.contextData.matches.length
this.contextData["corpus_type"] = "inspect-result"
Object.assign(this.contextData, results.metaData);
console.log(this.contextData);
contextResultsElement = document.getElementById("context-results");
modalExpertModeSwitchElement = document.getElementById("inspect-display-options-form-expert_mode_inspect");
highlightSentencesSwitchElement = document.getElementById("inspect-display-options-form-highlight_sentences");
@ -411,9 +416,6 @@ class ResultsList extends List {
tokenHTMlElement = this.HTMLTStrToElement(htmlTokenStr)
tokenHTMLArray.push(tokenHTMlElement);
}
// console.log(tokenHTMLArray);
// console.log(uniqueS);
for (let sId of uniqueS) {
let htmlSentence = `<span class="sentence" data-sid="${sId}"></span>`;
let sentenceElement = this.HTMLTStrToElement(htmlSentence);
@ -466,6 +468,7 @@ class ResultsList extends List {
this.changeSentenceContext(nrOfContextSentences.value)
}
// splits context text into sentences based on spacy sentence split
higlightContextSentences() {
let sentences;
sentences = document.getElementById("context-results").getElementsByClassName("sentence");
@ -484,6 +487,7 @@ class ResultsList extends List {
}
}
// changes how many context sentences in inspect view are shown
changeSentenceContext(sValue, maxSValue=10) {
let array;
let sentences;
@ -589,7 +593,6 @@ class ResultsList extends List {
expertModeOn(htmlId) {
// turn the expert mode on for all tokens in the DOM element identified by its htmlID
console.log(this);
if (!Array.isArray(this.currentExpertTokenElements[htmlId])) {
this.currentExpertTokenElements[htmlId] = [];
}
@ -638,7 +641,6 @@ class ResultsList extends List {
// function to remove extra informations and animations from tokens
expertModeOff(htmlId) {
// console.log("Expert mode is off.");
console.log(this);
if (!Array.isArray(this.currentExpertTokenElements[htmlId])) {
this.currentExpertTokenElements[htmlId] = [];
}