`;
let sentenceElement = this.HTMLTStroElement(htmlSentence);
for (let tokenElement of tokenHTMLArray) {
if (tokenElement.dataset.sid == sId) {
sentenceElement.appendChild(tokenElement);
sentenceElement.insertAdjacentHTML("beforeend", `
`);
} else {
continue;
}
}
partElement.appendChild(sentenceElement);
}
contextResultsElement.appendChild(partElement);
if (expertModeSwitchElement.checked) {
this.expertModeOn();
}
}
changeSentenceContext(sValue) {
}
// ###### Display options changing live how the matches are being displayed ######
// Event function that changes the shown hits per page.
// Just alters the resultsList.page property
changeHitsPerPage(event) {
try {
// console.log(this);
this.page = event.target.value;
this.update();
if (expertModeSwitchElement.checked) {
this.expertModeOn(); // page holds new result rows, so add new tooltips
}
nopaque.flash("Updated matches per page.")
} catch (e) {
// console.log(e);
// console.log("resultsList has no results right now.");
}
}
// Event function triggered on context select change
// also if pagination is clicked
changeContext(event) {
let array;
let lc;
let newContextValue;
let rc;
try {
if (event.type === "change") {
nopaque.flash("Updated context per match!");
}
} catch (e) {
} finally {
newContextValue = document.getElementById("display-options-form-result_context").value;
lc = document.getElementsByClassName("left-context");
rc = document.getElementsByClassName("right-context");
for (let element of lc) {
array = Array.from(element.childNodes);
for (let element of array.reverse().slice(newContextValue)) {
element.classList.add("hide");
}
for (let element of array.slice(0, newContextValue)) {
element.classList.remove("hide");
}
}
for (let element of rc) {
array = Array.from(element.childNodes);
for (let element of array.slice(newContextValue)) {
element.classList.add("hide");
}
for (let element of array.slice(0, newContextValue)) {
element.classList.remove("hide");
}
}
}
}
// ###### Expert view event functions ######
// Event function to check if pagination is used and then look if
// expertModeSwitchElement is checked
// if checked than expertModeOn is executed
// if unchecked expertModeOff is executed
eventHandlerCheck(event) {
if (expertModeSwitchElement.checked) {
this.expertModeOn(event.currentTarget.tokenElements, resultsJSON);
} else if (!expertModeSwitchElement.checked) {
event.preventDefault();
this.expertModeOff(event.currentTarget.tokenElements);
}
}
// function to create a tooltip for the current hovered token
tooltipEventCreate(event) {
// console.log("Create Tooltip on mouseover.");
let token;
token = results.resultsJSON.cpos_lookup[event.target.dataset.cpos];
if (!token) {
token = this.contextData.cpos_lookup[event.target.dataset.cpos];
}
this.addToolTipToTokenElement(event.target, token);
}
// Function to destroy the current Tooltip for the current hovered tooltip
// on mouse leave
tooltipEventDestroy(event) {
// console.log("Tooltip destroy on leave.");
this.currentTooltipElement.destroy();
}
expertModeOn() {
// console.log("Expert mode is on.");
this.currentExpertTokenElements = document.getElementsByClassName("token");
this.tooltipEventCreateBind = this.tooltipEventCreate.bind(this);
this.tooltipEventDestroyBind = this.tooltipEventDestroy.bind(this);
for (let tokenElement of this.currentExpertTokenElements) {
tokenElement.classList.add("chip", "hoverable", "expert-view");
tokenElement.onmouseover = this.tooltipEventCreateBind;
tokenElement.onmouseout = this.tooltipEventDestroyBind;
this.eventTokens.push(tokenElement);
}
}
// fuction that creates Tooltip for one token and extracts the corresponding
// infos from the result JSON
addToolTipToTokenElement(tokenElement, token) {
this.currentTooltipElement;
this.currentTooltipElement = M.Tooltip.init(tokenElement,
{"html": `
| Token information |
Source information |
Word: ${token.word}
Lemma: ${token.lemma}
POS: ${token.pos}
Simple POS: ${token.simple_pos}
NER: ${token.ner}
|
Title: ${resultsJSON.text_lookup[token.text].title}
Author: ${resultsJSON.text_lookup[token.text].author}
Publishing year: ${resultsJSON.text_lookup[token.text].publishing_year}
|
`}
);
}
// function to remove extra informations and animations from tokens
expertModeOff() {
// console.log("Expert mode is off.");
for (let tokenElement of this.currentExpertTokenElements) {
tokenElement.classList.remove("chip", "hoverable", "expert-view");
}
for (let eventToken of this.eventTokens) {
eventToken.onmouseover = "";
eventToken.onmouseout = "";
}
this.eventTokens = [];
}
createResultRowElement(item, chunk) {
let c;
let cCellElement;
let cpos;
let inspectBtn
let lc;
let lcCellElement;
let matchNrElement;
let matchRowElement;
let rc;
let rcCellElement;
let textTitles;
let textTitlesCellElement;
let token;
let values;
// gather values from item
values = item.values();
if (chunk.cpos_ranges == true) {
// python range like function from MDN
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Sequence_generator_(range)
const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));
lc = range(values.lc[0], values.lc[1], 1)
c = range(values.c[0], values.c[1], 1)
rc = range(values.rc[0], values.rc[1], 1)
} else {
lc = values.lc;
c = values.c;
rc = values.rc;
}
// get infos for full match row
matchRowElement = document.createElement("tr");
matchRowElement.setAttribute("data-index", values.index)
lcCellElement = document.createElement("td");
lcCellElement.classList.add("left-context");
matchRowElement.appendChild(lcCellElement);
for (cpos of lc) {
token = chunk.cpos_lookup[cpos];
lcCellElement.insertAdjacentHTML("beforeend",
`
${token.word} `);
}
// get infos for hit of match
textTitles = new Set();
cCellElement = document.createElement("td");
cCellElement.classList.add("match-hit");
textTitlesCellElement = document.createElement("td");
textTitlesCellElement.classList.add("titles");
matchNrElement = document.createElement("td");
matchNrElement.classList.add("match-nr");
matchRowElement.appendChild(cCellElement);
for (cpos of c) {
token = chunk.cpos_lookup[cpos];
cCellElement.insertAdjacentHTML("beforeend",
`
${token.word} `);
// get text titles of every hit cpos token
textTitles.add(chunk.text_lookup[token.text].title);
// add button to trigger more context to every match td
inspectBtn = document.createElement("a");
inspectBtn.setAttribute("class", `btn-floating btn-flat waves-effect` +
`waves-light grey right inspect disabled`
);
inspectBtn.innerHTML = '
search';
inspectBtn.onclick = () => {this.inspect(values.index)};
}
// add text titles at front as first td of one row
cCellElement.appendChild(inspectBtn);
textTitlesCellElement.innerText = [...textTitles].join(", ");
matchRowElement.insertAdjacentHTML("afterbegin", textTitlesCellElement.outerHTML);
matchNrElement.innerText = values.index + 1;
matchRowElement.insertAdjacentHTML("afterbegin", matchNrElement.outerHTML);
// get infos for right context of match
rcCellElement = document.createElement("td");
rcCellElement.classList.add("right-context");
matchRowElement.appendChild(rcCellElement);
for (cpos of rc) {
token = chunk.cpos_lookup[cpos];
rcCellElement.insertAdjacentHTML("beforeend",
`
${token.word} `);
}
return matchRowElement
}
}