|
|
|
|
@ -1,5 +1,5 @@
|
|
|
|
|
/**
|
|
|
|
|
* This class implements a NotificationListener that is listening for the
|
|
|
|
|
* This class implements a ViewEventListener that is listening for the
|
|
|
|
|
* specified
|
|
|
|
|
*/
|
|
|
|
|
class ViewEventListener {
|
|
|
|
|
@ -43,16 +43,23 @@ class ResultsList extends List {
|
|
|
|
|
*/
|
|
|
|
|
this.eventTokens = {};
|
|
|
|
|
/**
|
|
|
|
|
* all token elements which have added
|
|
|
|
|
* classes like chip and hoverable for expert view. Collected
|
|
|
|
|
* here to delete later on
|
|
|
|
|
* All token elements which have added classes like chip and hoverable for
|
|
|
|
|
* expert view. Collected here to delete later on.
|
|
|
|
|
*/
|
|
|
|
|
this.currentExpertTokenElements = {};
|
|
|
|
|
// TODO: Rename both variables to something more descreptive and clear
|
|
|
|
|
// 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.
|
|
|
|
|
/**
|
|
|
|
|
* Holds True/false for check buttons used to add matches to sub-results.
|
|
|
|
|
* If checked, it is True. If unchecked, it is false. Buttons for this
|
|
|
|
|
* have the class add. The ittle round check buttons to add matches to sub
|
|
|
|
|
* results.
|
|
|
|
|
*/
|
|
|
|
|
this.addToSubResultsStatus = {};
|
|
|
|
|
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.
|
|
|
|
|
// notification listeners listening for client notifications (or other in the future?)
|
|
|
|
|
/**
|
|
|
|
|
* If a check button is pressed its corresponding data_index is saved in
|
|
|
|
|
* this set. The set is shown to the user.
|
|
|
|
|
*/
|
|
|
|
|
this.addToSubResultsIdsToShow = new Set();
|
|
|
|
|
// ViewEventListeners listening for client notifications.
|
|
|
|
|
this.notificationListeners = {};
|
|
|
|
|
this.knownHTMLElements = new Set();
|
|
|
|
|
}
|
|
|
|
|
@ -80,8 +87,11 @@ class ResultsList extends List {
|
|
|
|
|
* class field in the ResultsList object with the query selector
|
|
|
|
|
* string as the key. The selector will be converted to a valid JavaScript
|
|
|
|
|
* Field name i. e. #html-id-string -> this.htmlIdString
|
|
|
|
|
* The value will be the identifed element or elements fetched with the querySelector
|
|
|
|
|
* method.
|
|
|
|
|
* The value will be the identifed element or elements fetched with the
|
|
|
|
|
* querySelector respectively querySelectorAll method.
|
|
|
|
|
* If the query selector is passed as an Array of length 2, with the second
|
|
|
|
|
* element defining modal options, teh identified element will be initialized
|
|
|
|
|
* as a modal with the given options.
|
|
|
|
|
*/
|
|
|
|
|
getHTMLElements(arrayOfSelectors) {
|
|
|
|
|
for (let selector of arrayOfSelectors) {
|
|
|
|
|
@ -116,7 +126,7 @@ class ResultsList extends List {
|
|
|
|
|
cleanKey[0] = cleanKey[0].toLowerCase();
|
|
|
|
|
cleanKey = cleanKey.join('');
|
|
|
|
|
this[cleanKey] = element ? element: elements;
|
|
|
|
|
// Initialize current element as modal if true.
|
|
|
|
|
// Initialize current element as modal if modalInit true.
|
|
|
|
|
if (modalInit) {
|
|
|
|
|
this[cleanKey] = M.Modal.init(this[cleanKey], options);
|
|
|
|
|
}
|
|
|
|
|
@ -127,20 +137,20 @@ class ResultsList extends List {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Register notificationListeners to the ResultsList. Which will listen for
|
|
|
|
|
* Register ViewEventListeners to the ResultsList. Which will listen for
|
|
|
|
|
* the specified event.
|
|
|
|
|
*/
|
|
|
|
|
setNotificationListeners(notificationListeners) {
|
|
|
|
|
setViewEventListeners(notificationListeners) {
|
|
|
|
|
for (let notificationListener of notificationListeners) {
|
|
|
|
|
this.notificationListeners[notificationListener.type] = notificationListener;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Loads the notificationListeners so that hey will be listening to their
|
|
|
|
|
* Loads the ViewEventListeners so that hey will be listening to their
|
|
|
|
|
* assigned custom events.
|
|
|
|
|
*/
|
|
|
|
|
loadNotificationListeners() {
|
|
|
|
|
loadViewEventListeners() {
|
|
|
|
|
for (let [type, listener] of Object.entries(this.notificationListeners)) {
|
|
|
|
|
listener.listenerFunction(type, this);
|
|
|
|
|
}
|
|
|
|
|
@ -165,8 +175,10 @@ class ResultsList extends List {
|
|
|
|
|
let c;
|
|
|
|
|
let rc;
|
|
|
|
|
if (cpos_ranges) {
|
|
|
|
|
// python range like function from MDN
|
|
|
|
|
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Sequence_generator_(range)
|
|
|
|
|
/**
|
|
|
|
|
* 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(cpos_values.lc[0], cpos_values.lc[1], 1)
|
|
|
|
|
c = range(cpos_values.c[0], cpos_values.c[1], 1)
|
|
|
|
|
@ -179,30 +191,7 @@ class ResultsList extends List {
|
|
|
|
|
return {lc: lc, c: c, rc: rc};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 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.interactions) {
|
|
|
|
|
if (interaction.checkStatus) {
|
|
|
|
|
if (interaction.element.checked) {
|
|
|
|
|
let f_on = interaction.bindThisToCallback("on");
|
|
|
|
|
let args_on = interaction.callbacks.on.args;
|
|
|
|
|
f_on(...args_on);
|
|
|
|
|
} else {
|
|
|
|
|
let f_off = interaction.bindThisToCallback("off");
|
|
|
|
|
let args_off = interaction.callbacks.off.args;
|
|
|
|
|
f_off(...args_off);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
let f = interaction.bindThisToCallback("noCheck");
|
|
|
|
|
let args = interaction.callbacks.noCheck.args;
|
|
|
|
|
f(...args);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// get display options from display options form element
|
|
|
|
|
// Get display options from display options form element.
|
|
|
|
|
static getDisplayOptions(htmlId) {
|
|
|
|
|
// gets display options parameters
|
|
|
|
|
let displayOptionsFormElement = document.getElementById(htmlId);
|
|
|
|
|
@ -215,48 +204,56 @@ class ResultsList extends List {
|
|
|
|
|
};
|
|
|
|
|
return displayOptionsData
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Used in addToSubResults and inspect to toggle the design of the check
|
|
|
|
|
// buttons according to its checked unchecked status.
|
|
|
|
|
/**
|
|
|
|
|
* Used in addToSubResults and inspect to toggle the design of the check
|
|
|
|
|
* buttons according to its checked unchecked status.
|
|
|
|
|
*/
|
|
|
|
|
helperActivateAddBtn(btn) {
|
|
|
|
|
btn.classList.remove("corpus-analysis-color.lighten");
|
|
|
|
|
btn.classList.add("green");
|
|
|
|
|
btn.textContent = "check";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Used in addToSubResults and inspect to toggle the design of the check
|
|
|
|
|
// buttons according to its checked unchecked status.
|
|
|
|
|
/**
|
|
|
|
|
* Used in addToSubResults and inspect to toggle the design of the check
|
|
|
|
|
* buttons according to its checked unchecked status.
|
|
|
|
|
*/
|
|
|
|
|
helperDeactivateAddBtn(btn) {
|
|
|
|
|
btn.classList.remove("green");
|
|
|
|
|
btn.classList.add("corpus-analysis-color.lighten");
|
|
|
|
|
btn.textContent = "add";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 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.
|
|
|
|
|
/**
|
|
|
|
|
* 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, client, tableCall=true) {
|
|
|
|
|
if (!this.addToSubResultsStatus[dataIndex]
|
|
|
|
|
|| this.addToSubResultsStatus === undefined) {
|
|
|
|
|
// add button is activated because status is either false or undefined
|
|
|
|
|
this.helperActivateAddBtn(event.target);
|
|
|
|
|
this.addToSubResultsStatus[dataIndex] = true; // sets status to true
|
|
|
|
|
this.addToSubResultsIdsToShow.add(dataIndex + 1); // + 1 because user does not see zero indexd data indexes
|
|
|
|
|
this.subResultsMatchIds.textContent = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", "); // automaticalle sorts ids into the textarea in ascending order
|
|
|
|
|
M.textareaAutoResize(this.subResultsMatchIds); // after an insert textarea has to be resized manually
|
|
|
|
|
this.addToSubResultsStatus[dataIndex] = true;
|
|
|
|
|
// Add 1 because indexes are zero based. User sees 1 based numbering.
|
|
|
|
|
this.addToSubResultsIdsToShow.add(dataIndex + 1);
|
|
|
|
|
// Allways sort the shown indexes for the user if new match is added.
|
|
|
|
|
this.subResultsMatchIds.textContent = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", ");
|
|
|
|
|
M.textareaAutoResize(this.subResultsMatchIds);
|
|
|
|
|
this.nrMarkedMatches.textContent = [...this.addToSubResultsIdsToShow].length;
|
|
|
|
|
} else if (this.addToSubResultsStatus[dataIndex]) {
|
|
|
|
|
// add button is deactivated because status is true
|
|
|
|
|
this.helperDeactivateAddBtn(event.target);
|
|
|
|
|
this.addToSubResultsStatus[dataIndex] = false; // sets status to false
|
|
|
|
|
this.addToSubResultsIdsToShow.delete(dataIndex + 1); // + 1 because user does not see zero indexd data indexes
|
|
|
|
|
this.subResultsMatchIds.textContent = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", "); // automaticalle sorts ids into the textarea in ascending order
|
|
|
|
|
this.addToSubResultsStatus[dataIndex] = false;
|
|
|
|
|
// Add 1 because indexes are zero based. User sees 1 based numbering.
|
|
|
|
|
this.addToSubResultsIdsToShow.delete(dataIndex + 1);
|
|
|
|
|
// Allways sort the shown indexes for the user if new match is added.
|
|
|
|
|
this.subResultsMatchIds.textContent = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", ");
|
|
|
|
|
this.nrMarkedMatches.textContent = [...this.addToSubResultsIdsToShow].length;
|
|
|
|
|
M.textareaAutoResize(this.subResultsMatchIds); // after an insert textarea has to be resized manually
|
|
|
|
|
M.textareaAutoResize(this.subResultsMatchIds);
|
|
|
|
|
}
|
|
|
|
|
// Toggles the create button according to the number of ids in addToSubResultsIdsToShow
|
|
|
|
|
// Toggles create button according to the number of ids in addToSubResultsIdsToShow
|
|
|
|
|
if ([...this.addToSubResultsIdsToShow].length > 0 && !client.isBusy) {
|
|
|
|
|
this.subResultsCreate.classList.toggle('disabled', false);
|
|
|
|
|
} else if ([...this.addToSubResultsIdsToShow].length === 0) {
|
|
|
|
|
@ -270,7 +267,7 @@ class ResultsList extends List {
|
|
|
|
|
this.subResultsExport.classList.add("hide");
|
|
|
|
|
this.subResultsCreate.classList.remove("hide");
|
|
|
|
|
/**
|
|
|
|
|
* Also activate/deactivate buttons in the table/jsList results accordingly
|
|
|
|
|
* Also activate/deactivate buttons in the table/resultsList accordingly
|
|
|
|
|
* if button in inspect was activated/deactivated.
|
|
|
|
|
* This part only runs if tableCall is set to false when this function is
|
|
|
|
|
* called.
|
|
|
|
|
@ -287,8 +284,7 @@ class ResultsList extends List {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ###### Functions to inspect one match, to show more details ######
|
|
|
|
|
// Activate inspect buttons depending on the Client status
|
|
|
|
|
// Toggle inspect buttons depending on the Client status
|
|
|
|
|
toggleInspectButtons(client) {
|
|
|
|
|
if (!client.isBusy) {
|
|
|
|
|
this.activateInspectButtons();
|
|
|
|
|
@ -297,7 +293,7 @@ class ResultsList extends List {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Activate inspect buttons. Should be private if this is supported.
|
|
|
|
|
// Helper function. Should be private if feature is available.
|
|
|
|
|
activateInspectButtons() {
|
|
|
|
|
let inspectBtnElements;
|
|
|
|
|
inspectBtnElements = document.querySelectorAll('.inspect');
|
|
|
|
|
@ -306,7 +302,7 @@ class ResultsList extends List {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Deactivate inspect buttons. Should be private if this is supported.
|
|
|
|
|
// Helper function. Should be private if feature is available.
|
|
|
|
|
deactivateInspectButtons() {
|
|
|
|
|
let inspectBtnElements;
|
|
|
|
|
inspectBtnElements = document.querySelectorAll('.inspect');
|
|
|
|
|
@ -314,10 +310,13 @@ class ResultsList extends List {
|
|
|
|
|
inspectBtn.classList.toggle('disabled', true);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ### functions to inspect imported Matches
|
|
|
|
|
// gets result cpos infos for dataIndexes (use list of length 1 for one match) to send back to
|
|
|
|
|
// the server
|
|
|
|
|
/**
|
|
|
|
|
* Function to inspect one match in more detail (Showing more context).
|
|
|
|
|
* If in dynamic mode the view notifies the client to requests the new
|
|
|
|
|
* context for the one match identified by the given dataIndex.
|
|
|
|
|
* If not in dynamic mode the the needed context will be gathered from the
|
|
|
|
|
* already present results in results.data.
|
|
|
|
|
*/
|
|
|
|
|
inspect(client, results, dataIndex, type) {
|
|
|
|
|
// initialize context modal
|
|
|
|
|
this.getHTMLElements([
|
|
|
|
|
@ -326,31 +325,37 @@ class ResultsList extends List {
|
|
|
|
|
'#create-inspect-menu',
|
|
|
|
|
'#create-from-inspect',
|
|
|
|
|
]);
|
|
|
|
|
// get result infos from server and show them in context modal
|
|
|
|
|
// Clear fields from old data on every new inspect() call.
|
|
|
|
|
this.contextId = dataIndex[0];
|
|
|
|
|
this.contextResults.innerHTML = ""; // clear it from old inspects
|
|
|
|
|
this.contextResults.innerHTML = "";
|
|
|
|
|
if (client.dynamicMode) {
|
|
|
|
|
// Notify Client to get results from server.
|
|
|
|
|
this.notifyClient('get-results', {resultsType: 'inspect-results',
|
|
|
|
|
dataIndexes: [dataIndex],
|
|
|
|
|
resultsList: this});
|
|
|
|
|
} else {
|
|
|
|
|
// Gather results data from already present data.
|
|
|
|
|
results.inspectResultsData.matches = [results.data.matches[dataIndex[0]]];
|
|
|
|
|
results.inspectResultsData.cpos_ranges = results.data.cpos_ranges;
|
|
|
|
|
this.showMatchContext(results, client)
|
|
|
|
|
}
|
|
|
|
|
// match nr for user to display derived from data_index
|
|
|
|
|
// Match nr for user to display derived from data_index.
|
|
|
|
|
let contextMatchNrElement = document.getElementById("context-match-nr");
|
|
|
|
|
contextMatchNrElement.textContent = this.contextId + 1;
|
|
|
|
|
this.contextModal.open();
|
|
|
|
|
// add a button to add this match to sub results with onclick event
|
|
|
|
|
// Add the add button to add this match to sub results with onclick event.
|
|
|
|
|
let classes = `btn-floating btn waves-effect` +
|
|
|
|
|
` waves-light corpus-analysis-color.lighten right`
|
|
|
|
|
let addToSubResultsIdsBtn = document.createElement("a");
|
|
|
|
|
addToSubResultsIdsBtn.setAttribute("class", classes + ` add`);
|
|
|
|
|
addToSubResultsIdsBtn.innerHTML = '<i class="material-icons">add</i>';
|
|
|
|
|
addToSubResultsIdsBtn.onclick= () => {this.addToSubResults(dataIndex[0], client, false)};
|
|
|
|
|
// checks if the match has or has not been added to sub results yet
|
|
|
|
|
// sets the color and status of the button accordingly
|
|
|
|
|
addToSubResultsIdsBtn.onclick= () => {
|
|
|
|
|
this.addToSubResults(dataIndex[0], client, false)
|
|
|
|
|
};
|
|
|
|
|
/**
|
|
|
|
|
* Checks if the match has or has not been added to sub results yet.
|
|
|
|
|
* Sets the color and status of the button accordingly.
|
|
|
|
|
*/
|
|
|
|
|
if (this.addToSubResultsStatus[dataIndex[0]]) {
|
|
|
|
|
this.helperActivateAddBtn(addToSubResultsIdsBtn.firstElementChild);
|
|
|
|
|
} else if (!this.addToSubResultsStatus[dataIndex[0]]) {
|
|
|
|
|
@ -358,25 +363,27 @@ class ResultsList extends List {
|
|
|
|
|
}
|
|
|
|
|
this.createInspectMenu.innerHTML = '';
|
|
|
|
|
this.createInspectMenu.appendChild(addToSubResultsIdsBtn);
|
|
|
|
|
// Hide create menu if not in dynamic mode
|
|
|
|
|
// Hide create menu if not in dynamic mode.
|
|
|
|
|
if (!client.dynamicMode) {
|
|
|
|
|
this.createFromInspect.classList.add('hide');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// create Element from HTML String helper function
|
|
|
|
|
/**
|
|
|
|
|
* Create Element from HTML String. Helper function should be private.
|
|
|
|
|
* https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro/35385518#35385518
|
|
|
|
|
*/
|
|
|
|
|
HTMLTStrToElement(htmlStr) {
|
|
|
|
|
// https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro/35385518#35385518
|
|
|
|
|
let template = document.createElement("template");
|
|
|
|
|
htmlStr = htmlStr.trim();
|
|
|
|
|
template.innerHTML = htmlStr;
|
|
|
|
|
return template.content.firstChild;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Used as a callback to handle incoming match context results when inspect
|
|
|
|
|
// has been used.
|
|
|
|
|
/**
|
|
|
|
|
* Used either as a callback if the client has been notified to get new
|
|
|
|
|
* results with new full context. Or just directly invoced as a function
|
|
|
|
|
* with the according input data.
|
|
|
|
|
*/
|
|
|
|
|
showMatchContext(results, client) {
|
|
|
|
|
|
|
|
|
|
this.getHTMLElements([
|
|
|
|
|
'#context-results',
|
|
|
|
|
'#inspect-display-options-form-expert_mode_inspect',
|
|
|
|
|
@ -388,7 +395,7 @@ class ResultsList extends List {
|
|
|
|
|
let uniqueContextS = new Set();
|
|
|
|
|
let {lc, c, rc} = this.helperCreateCpos(results.inspectResultsData.cpos_ranges,
|
|
|
|
|
results.inspectResultsData.matches[0]);
|
|
|
|
|
// create sentence strings as tokens
|
|
|
|
|
// Create sentence strings as tokens.
|
|
|
|
|
let tokenHTMLArray = [];
|
|
|
|
|
let htmlTokenStr = ``;
|
|
|
|
|
let tokenHTMlElement;
|
|
|
|
|
@ -457,9 +464,7 @@ class ResultsList extends List {
|
|
|
|
|
}
|
|
|
|
|
this.contextResults.appendChild(sentenceElement);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// add inspect display options events
|
|
|
|
|
// Add expert mode switch event for the modal to toggle expert mode.
|
|
|
|
|
this.inspectDisplayOptionsFormExpertModeInspect.onchange = (event) => {
|
|
|
|
|
if (event.target.checked) {
|
|
|
|
|
this.expertModeOn("context-results", results);
|
|
|
|
|
@ -467,7 +472,7 @@ class ResultsList extends List {
|
|
|
|
|
this.expertModeOff("context-results")
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Add switch event to toggle Sentence highlighting.
|
|
|
|
|
this.inspectDisplayOptionsFormHighlightSentences.onchange = (event) => {
|
|
|
|
|
if (event.target.checked) {
|
|
|
|
|
this.higlightContextSentences();
|
|
|
|
|
@ -475,56 +480,52 @@ class ResultsList extends List {
|
|
|
|
|
this.unhighlightContextSentences();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Add range event to change nr of context sentences.
|
|
|
|
|
this.contextSentences.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
|
|
|
|
|
/**
|
|
|
|
|
* Checks on new modal opening if switches are checked
|
|
|
|
|
* if switches are checked functions are executed.
|
|
|
|
|
*/
|
|
|
|
|
if (this.inspectDisplayOptionsFormExpertModeInspect.checked) {
|
|
|
|
|
this.expertModeOn("context-results", results);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (this.inspectDisplayOptionsFormHighlightSentences.checked) {
|
|
|
|
|
this.higlightContextSentences();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// checks the value of the number of sentences to show on modal opening
|
|
|
|
|
// sets context sentences accordingly
|
|
|
|
|
/**
|
|
|
|
|
* Checks the value of the number of sentences to show on modal opening
|
|
|
|
|
* sets context sentences accordingly
|
|
|
|
|
*/
|
|
|
|
|
this.changeSentenceContext(this.contextSentences.value);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// splits context text into sentences based on spacy sentence split
|
|
|
|
|
// Splits context text into sentences based on spacy sentence split
|
|
|
|
|
higlightContextSentences() {
|
|
|
|
|
let sentences;
|
|
|
|
|
sentences = document.getElementById("context-results").getElementsByClassName("sentence");
|
|
|
|
|
let sentences = document.getElementById("context-results").getElementsByClassName("sentence");
|
|
|
|
|
for (let s of sentences) {
|
|
|
|
|
s.insertAdjacentHTML("beforeend", `<span><br><br></span>`)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Reverse operation of above function.
|
|
|
|
|
unhighlightContextSentences() {
|
|
|
|
|
let sentences;
|
|
|
|
|
let sentences = document.getElementById("context-results").getElementsByClassName("sentence");
|
|
|
|
|
let br;
|
|
|
|
|
sentences = document.getElementById("context-results").getElementsByClassName("sentence");
|
|
|
|
|
for (let s of sentences) {
|
|
|
|
|
br = s.lastChild;
|
|
|
|
|
br.remove();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// changes how many context sentences in inspect view are shown
|
|
|
|
|
// Changes how many context sentences in inspect view are shown.
|
|
|
|
|
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);
|
|
|
|
|
let sentences = document.getElementById("context-results").getElementsByClassName("sentence");
|
|
|
|
|
let array = Array.from(sentences);
|
|
|
|
|
let toHideArray;
|
|
|
|
|
let toShowArray;
|
|
|
|
|
if (sValue != 0) {
|
|
|
|
|
toHideArray = array.slice(0, sValue).concat(array.slice(-(sValue)));
|
|
|
|
|
toShowArray = array.slice(sValue, 9).concat(array.slice(9, -(sValue)))
|
|
|
|
|
@ -540,10 +541,12 @@ class ResultsList extends List {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ###### Display options changing live how the matches are being displayed ######
|
|
|
|
|
// ###### Display options functions changing how results are being displayed ######
|
|
|
|
|
|
|
|
|
|
// Event function that changes the shown hits per page.
|
|
|
|
|
// Just alters the resultsList.page property
|
|
|
|
|
/**
|
|
|
|
|
* Event function that changes the shown hits per page.
|
|
|
|
|
* Just alters the resultsList.page property.
|
|
|
|
|
*/
|
|
|
|
|
changeHitsPerPage(client, results) {
|
|
|
|
|
this.page = this.displayOptionsFormResultsPerPage.value;
|
|
|
|
|
this.update();
|
|
|
|
|
@ -553,9 +556,10 @@ class ResultsList extends List {
|
|
|
|
|
this.expertModeOn('query-display', results);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Event function triggered on context select change
|
|
|
|
|
// also if pagination is clicked
|
|
|
|
|
/**
|
|
|
|
|
* Event function triggered on context select change also if pagination is
|
|
|
|
|
* clicked.
|
|
|
|
|
*/
|
|
|
|
|
changeContext() {
|
|
|
|
|
let newContextValue = this.displayOptionsFormResultContext.value;
|
|
|
|
|
let lc = document.querySelectorAll(".left-context");
|
|
|
|
|
@ -581,48 +585,15 @@ class ResultsList extends List {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ###### Expert view event functions ######
|
|
|
|
|
// function to create a tooltip for the current hovered token
|
|
|
|
|
|
|
|
|
|
// Function to create a tooltip for the current hovered token.
|
|
|
|
|
tooltipEventCreate(event, results) {
|
|
|
|
|
// console.log("Create Tooltip on mouseover.");
|
|
|
|
|
let token;
|
|
|
|
|
token = results.data.cpos_lookup[event.target.dataset.cpos];
|
|
|
|
|
let token = results.data.cpos_lookup[event.target.dataset.cpos];
|
|
|
|
|
if (!token) {
|
|
|
|
|
token = results.inspectResultsData.cpos_lookup[event.target.dataset.cpos];
|
|
|
|
|
}
|
|
|
|
|
this.addToolTipToTokenElement(event.target, token, results);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 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();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// turn the expert mode on for all tokens in the DOM element identified by its htmlID
|
|
|
|
|
expertModeOn(htmlId, results) {
|
|
|
|
|
if (!Array.isArray(this.currentExpertTokenElements[htmlId])) {
|
|
|
|
|
this.currentExpertTokenElements[htmlId] = [];
|
|
|
|
|
}
|
|
|
|
|
let container = document.getElementById(htmlId);
|
|
|
|
|
let tokens = container.querySelectorAll('span.token');
|
|
|
|
|
this.currentExpertTokenElements[htmlId].push(...tokens);
|
|
|
|
|
this.eventTokens[htmlId] = [];
|
|
|
|
|
for (let tokenElement of this.currentExpertTokenElements[htmlId]) {
|
|
|
|
|
tokenElement.classList.add("chip", "hoverable", "expert-view");
|
|
|
|
|
const eventCreate = (event, arg) => this.tooltipEventCreate(event, arg);
|
|
|
|
|
tokenElement.onmouseover = (event) => eventCreate(event, results);
|
|
|
|
|
tokenElement.onmouseout = (event) => this.tooltipEventDestroy(event);
|
|
|
|
|
this.eventTokens[htmlId].push(tokenElement);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// fuction that creates Tooltip for one token and extracts the corresponding
|
|
|
|
|
// infos from the result JSON
|
|
|
|
|
addToolTipToTokenElement(tokenElement, token, results) {
|
|
|
|
|
this.currentTooltipElement;
|
|
|
|
|
this.currentTooltipElement = M.Tooltip.init(tokenElement,
|
|
|
|
|
{"html": `<table>
|
|
|
|
|
this.currentTooltipElement = M.Tooltip.init(event.target, {
|
|
|
|
|
'html': `<table>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Token information</th>
|
|
|
|
|
<th>Source information</th>
|
|
|
|
|
@ -643,13 +614,44 @@ class ResultsList extends List {
|
|
|
|
|
Publishing year: ${results.data.text_lookup[token.text].publishing_year}
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>`}
|
|
|
|
|
</table>`
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
/**
|
|
|
|
|
* Function to destroy the current Tooltip for the current hovered tooltip
|
|
|
|
|
* on mouse leave
|
|
|
|
|
*/
|
|
|
|
|
tooltipEventDestroy(event) {
|
|
|
|
|
this.currentTooltipElement.destroy();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// function to remove extra informations and animations from tokens
|
|
|
|
|
/**
|
|
|
|
|
* Turn the expert mode on for all tokens in the DOM element identified by
|
|
|
|
|
* its htmlID.
|
|
|
|
|
*/
|
|
|
|
|
expertModeOn(htmlId, results) {
|
|
|
|
|
if (!Array.isArray(this.currentExpertTokenElements[htmlId])) {
|
|
|
|
|
this.currentExpertTokenElements[htmlId] = [];
|
|
|
|
|
}
|
|
|
|
|
let container = document.getElementById(htmlId);
|
|
|
|
|
let tokens = container.querySelectorAll('span.token');
|
|
|
|
|
this.currentExpertTokenElements[htmlId].push(...tokens);
|
|
|
|
|
this.eventTokens[htmlId] = [];
|
|
|
|
|
for (let tokenElement of this.currentExpertTokenElements[htmlId]) {
|
|
|
|
|
tokenElement.classList.add('chip', 'hoverable', 'expert-view');
|
|
|
|
|
const eventCreate = (event, arg) => this.tooltipEventCreate(event, arg);
|
|
|
|
|
tokenElement.onmouseover = (event) => eventCreate(event, results);
|
|
|
|
|
tokenElement.onmouseout = (event) => this.tooltipEventDestroy(event);
|
|
|
|
|
this.eventTokens[htmlId].push(tokenElement);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Turn the expert mode off for all tokens in the DOM element identified by
|
|
|
|
|
* its htmlID.
|
|
|
|
|
*/
|
|
|
|
|
expertModeOff(htmlId) {
|
|
|
|
|
// console.log("Expert mode is off.");
|
|
|
|
|
if (!Array.isArray(this.currentExpertTokenElements[htmlId])) {
|
|
|
|
|
this.currentExpertTokenElements[htmlId] = [];
|
|
|
|
|
}
|
|
|
|
|
@ -662,78 +664,62 @@ class ResultsList extends List {
|
|
|
|
|
this.currentExpertTokenElements[htmlId] = [];
|
|
|
|
|
|
|
|
|
|
for (let eventToken of this.eventTokens[htmlId]) {
|
|
|
|
|
eventToken.onmouseover = "";
|
|
|
|
|
eventToken.onmouseout = "";
|
|
|
|
|
eventToken.onmouseover = '';
|
|
|
|
|
eventToken.onmouseout = '';
|
|
|
|
|
}
|
|
|
|
|
this.eventTokens[htmlId] = [];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
createResultRowElement(item, chunk, client, imported=false) {
|
|
|
|
|
let aCellElement;
|
|
|
|
|
let addToSubResultsBtn;
|
|
|
|
|
let cCellElement;
|
|
|
|
|
let cpos;
|
|
|
|
|
let fakeResponse; // used if imported results are being created;
|
|
|
|
|
let inspectBtn
|
|
|
|
|
let lcCellElement;
|
|
|
|
|
let matchNrElement;
|
|
|
|
|
let matchRowElement;
|
|
|
|
|
let rcCellElement;
|
|
|
|
|
let textTitles;
|
|
|
|
|
let textTitlesCellElement;
|
|
|
|
|
let token;
|
|
|
|
|
let values;
|
|
|
|
|
// gather values from item
|
|
|
|
|
values = item.values();
|
|
|
|
|
// Gather values from item.
|
|
|
|
|
let values = item.values();
|
|
|
|
|
let {lc, c, rc} = this.helperCreateCpos(chunk.cpos_ranges,
|
|
|
|
|
values)
|
|
|
|
|
// get infos for full match row
|
|
|
|
|
matchRowElement = document.createElement("tr");
|
|
|
|
|
// Get infos for full match row.
|
|
|
|
|
let matchRowElement = document.createElement("tr");
|
|
|
|
|
matchRowElement.setAttribute("data-index", values.index)
|
|
|
|
|
lcCellElement = document.createElement("td");
|
|
|
|
|
let lcCellElement = document.createElement("td");
|
|
|
|
|
lcCellElement.classList.add("left-context");
|
|
|
|
|
matchRowElement.appendChild(lcCellElement);
|
|
|
|
|
for (cpos of lc) {
|
|
|
|
|
token = chunk.cpos_lookup[cpos];
|
|
|
|
|
for (let cpos of lc) {
|
|
|
|
|
let token = chunk.cpos_lookup[cpos];
|
|
|
|
|
lcCellElement.insertAdjacentHTML("beforeend",
|
|
|
|
|
`<span class="token" data-cpos="${cpos}">${token.word} </span>`);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// get infos for hit of match and set actions
|
|
|
|
|
textTitles = new Set();
|
|
|
|
|
aCellElement = document.createElement("td");
|
|
|
|
|
// Get infos for hit of match and set actions.
|
|
|
|
|
let textTitles = new Set();
|
|
|
|
|
let aCellElement = document.createElement("td");
|
|
|
|
|
aCellElement.classList.add("actions");
|
|
|
|
|
cCellElement = document.createElement("td");
|
|
|
|
|
let cCellElement = document.createElement("td");
|
|
|
|
|
cCellElement.classList.add("match-hit");
|
|
|
|
|
textTitlesCellElement = document.createElement("td");
|
|
|
|
|
let textTitlesCellElement = document.createElement("td");
|
|
|
|
|
textTitlesCellElement.classList.add("titles");
|
|
|
|
|
matchNrElement = document.createElement("td");
|
|
|
|
|
let matchNrElement = document.createElement("td");
|
|
|
|
|
matchNrElement.classList.add("match-nr");
|
|
|
|
|
matchRowElement.appendChild(cCellElement);
|
|
|
|
|
matchRowElement.appendChild(aCellElement);
|
|
|
|
|
for (cpos of c) {
|
|
|
|
|
token = chunk.cpos_lookup[cpos];
|
|
|
|
|
for (let cpos of c) {
|
|
|
|
|
let token = chunk.cpos_lookup[cpos];
|
|
|
|
|
cCellElement.insertAdjacentHTML("beforeend",
|
|
|
|
|
`<span class="token" data-cpos="${cpos}">${token.word} </span>`);
|
|
|
|
|
// get text titles of every hit cpos token
|
|
|
|
|
// Get text titles of every hit cpos token.
|
|
|
|
|
textTitles.add(chunk.text_lookup[token.text].title);
|
|
|
|
|
}
|
|
|
|
|
// add some interaction buttons
|
|
|
|
|
// # some btn css rules and classes
|
|
|
|
|
// Add some interaction buttons.
|
|
|
|
|
let css = `margin-right: 5px; margin-bottom: 5px;`
|
|
|
|
|
let classes = `btn-floating btn waves-effect` +
|
|
|
|
|
` waves-light corpus-analysis-color.lighten`
|
|
|
|
|
// # add button to trigger more context to every match td
|
|
|
|
|
inspectBtn = document.createElement("a");
|
|
|
|
|
// Add inspect button to trigger inspect view with more context.
|
|
|
|
|
let inspectBtn = document.createElement("a");
|
|
|
|
|
inspectBtn.setAttribute("style", css);
|
|
|
|
|
inspectBtn.setAttribute("class", classes + ` disabled inspect`
|
|
|
|
|
);
|
|
|
|
|
inspectBtn.innerHTML = '<i class="material-icons inspect-btn">search</i>';
|
|
|
|
|
// # add btn to add matches to sub-results. hidden per default
|
|
|
|
|
addToSubResultsBtn = document.createElement("a");
|
|
|
|
|
// Add btn to be able add matches to sub-results.
|
|
|
|
|
let addToSubResultsBtn = document.createElement("a");
|
|
|
|
|
addToSubResultsBtn.setAttribute("style", css);
|
|
|
|
|
addToSubResultsBtn.setAttribute("class", classes + ` add`
|
|
|
|
|
);
|
|
|
|
|
addToSubResultsBtn.setAttribute("class", classes + ` add`);
|
|
|
|
|
addToSubResultsBtn.innerHTML = '<i class="material-icons add-btn">add</i>';
|
|
|
|
|
if (client.dynamicMode || client.fullContext) {
|
|
|
|
|
aCellElement.appendChild(inspectBtn);
|
|
|
|
|
@ -741,25 +727,27 @@ class ResultsList extends List {
|
|
|
|
|
if (client.dynamicMode) {
|
|
|
|
|
aCellElement.appendChild(addToSubResultsBtn);
|
|
|
|
|
}
|
|
|
|
|
// add text titles at front as first td of one row
|
|
|
|
|
// Add text titles at front as first td of one row.
|
|
|
|
|
textTitlesCellElement.textContent = [...textTitles].join(", ");
|
|
|
|
|
matchRowElement.insertAdjacentHTML("afterbegin", textTitlesCellElement.outerHTML);
|
|
|
|
|
matchNrElement.textContent = values.index + 1;
|
|
|
|
|
matchRowElement.insertAdjacentHTML("afterbegin", matchNrElement.outerHTML);
|
|
|
|
|
|
|
|
|
|
// get infos for right context of match
|
|
|
|
|
rcCellElement = document.createElement("td");
|
|
|
|
|
// Get infos for right context of match
|
|
|
|
|
let rcCellElement = document.createElement("td");
|
|
|
|
|
rcCellElement.classList.add("right-context");
|
|
|
|
|
matchRowElement.appendChild(rcCellElement);
|
|
|
|
|
for (cpos of rc) {
|
|
|
|
|
token = chunk.cpos_lookup[cpos];
|
|
|
|
|
for (let cpos of rc) {
|
|
|
|
|
let token = chunk.cpos_lookup[cpos];
|
|
|
|
|
rcCellElement.insertAdjacentHTML("beforeend",
|
|
|
|
|
`<span class="token" data-cpos="${cpos}">${token.word} </span>`);
|
|
|
|
|
}
|
|
|
|
|
return matchRowElement
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// creates the HTML table code for the metadata view in the corpus analysis interface
|
|
|
|
|
/**
|
|
|
|
|
* Creates the HTML table code for the metadata view in the corpus analysis
|
|
|
|
|
* interface
|
|
|
|
|
*/
|
|
|
|
|
createMetaDataForModal(metaDataObject) {
|
|
|
|
|
let html = `<div class="col s12">
|
|
|
|
|
<table class="highlight">
|
|
|
|
|
@ -771,7 +759,7 @@ class ResultsList extends List {
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>`
|
|
|
|
|
for (let [outerKey, outerValue] of Object.entries(metaDataObject)) {
|
|
|
|
|
// Use more descriptive names
|
|
|
|
|
// Use more descriptive names.
|
|
|
|
|
if (outerKey === 'corpus_all_texts') {
|
|
|
|
|
let tmpName = 'All texts in this corpus';
|
|
|
|
|
html += `<tr>
|
|
|
|
|
@ -823,8 +811,10 @@ class ResultsList extends List {
|
|
|
|
|
</table>`
|
|
|
|
|
return html
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Creates the text details for the texts shown in the corpus analysis metadata modal.
|
|
|
|
|
/**
|
|
|
|
|
* Creates the text details for the texts shown in the corpus analysis
|
|
|
|
|
* metadata modal table.
|
|
|
|
|
*/
|
|
|
|
|
createTextDetails(metaData) {
|
|
|
|
|
let metadataKey = event.target.dataset.metadataKey;
|
|
|
|
|
let textKey = event.target.dataset.textKey;
|
|
|
|
|
@ -834,11 +824,18 @@ class ResultsList extends List {
|
|
|
|
|
for (let [key, value] of Object.entries(textData)) {
|
|
|
|
|
bibliographicData.insertAdjacentHTML("afterbegin",
|
|
|
|
|
`
|
|
|
|
|
<li><span style="text-transform: capitalize;">${key}:</span> ${value}</li>
|
|
|
|
|
`);
|
|
|
|
|
<li>
|
|
|
|
|
<span style="text-transform: capitalize;">${key}:</span>
|
|
|
|
|
${value}
|
|
|
|
|
</li>
|
|
|
|
|
`
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// export classses
|
|
|
|
|
export { ViewEventListener, ResultsList };
|
|
|
|
|
// Export classes.
|
|
|
|
|
export {
|
|
|
|
|
ViewEventListener,
|
|
|
|
|
ResultsList
|
|
|
|
|
};
|
Stephan Porada