From 74104922b65d06862455780a7378a09bff857458 Mon Sep 17 00:00:00 2001
From: Stephan Porada <sporada@uni-bielefeld.de>
Date: Fri, 26 Jun 2020 09:51:10 +0200
Subject: [PATCH] Some documentation
---
web/app/static/js/nopaque.lists.js | 90 +++++++++++++++---------------
1 file changed, 46 insertions(+), 44 deletions(-)
diff --git a/web/app/static/js/nopaque.lists.js b/web/app/static/js/nopaque.lists.js
index 64925d77..d7825790 100644
--- a/web/app/static/js/nopaque.lists.js
+++ b/web/app/static/js/nopaque.lists.js
@@ -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] = [];
}
--
GitLab