More Analysis Javascript updates for unified interaction handeling

This commit is contained in:
Stephan Porada
2020-06-19 15:49:11 +02:00
parent ab61819005
commit ead0117bbb
6 changed files with 130 additions and 75 deletions

View File

@ -86,9 +86,19 @@ class CorpusAnalysisClient {
}
});
// inspect callback handeling based on type
socket.on("corpus_analysis_inspect_match", (response) => {
if (this.callbacks.query_match_context != undefined) {
this.callbacks.query_match_context(response);
if (response.type === "inspect") {
if (this.callbacks.query_match_context != undefined) {
this.callbacks.query_match_context(response);
}
} else if (response.type === "sub-subcorpus"){
if (this.callbacks.show_sub_subcorpus_choices != undefined) {
this.callbacks.show_sub_subcorpus_choices(response);
}
if (this.callbacks.save_sub_subcorpus_choices != undefined) {
this.callbacks.save_sub_subcorpus_choices(response);
}
}
});
}
@ -104,7 +114,7 @@ class CorpusAnalysisClient {
}
getMetaData() {
// just emits thos to tell the server to gather all meta dat infos and send
// just emits thos to tell the server to gather all meta data infos and send
// those back
this.socket.emit("corpus_analysis_get_meta_data", this.corpusId);
}

View File

@ -1,10 +1,12 @@
class InteractionElement {
constructor(htmlId="",
checkStatus=true,
disabledBefore=true,
disabledAfter=false,
hideBefore=true,
hideAfter=false) {
this.htmlId = htmlId;
this.checkStatus = checkStatus;
this.callbacks = {};
this.disabledBefore = disabledBefore;
this.disabledAfter = disabledAfter;
@ -14,7 +16,7 @@ class InteractionElement {
getElement() {
this.interactionStatusElement = document.getElementById(this.htmlId);
return this.interactionStatusElement
return this.interactionStatusElement;
}
setCallback(trigger, callback, bindThis, args=[]) {

View File

@ -3,6 +3,11 @@ function recvMetaData(payload) {
console.log(results.metaData);
}
function saveSubSubcorpusChoices(payload) {
console.log("SAVE");
console.log(payload);
}
function querySetup(payload) {
// This is called when a query was successfull
// some hiding and resetting

View File

@ -141,17 +141,24 @@ class ResultsList extends List {
pageChangeEventInteractionHandler(interactionElements) {
// get elements to check thier status
for (let interaction of interactionElements) {
let element = interaction.getElement();
if (element.checked) {
let f_on = interaction.bindThisToCallback("on");
let args_on = interaction.callbacks.on.args;
f_on(...args_on);
console.log("ON TRIGGERED");
if (interaction.checkStatus) {
let element = interaction.getElement();
if (element.checked) {
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_off = interaction.bindThisToCallback("off");
let args_off = interaction.callbacks.off.args;
f_off(...args_off);
console.log("OFF TRIGGERED");
let f = interaction.bindThisToCallback("noCheck");
let args = interaction.callbacks.noCheck.args;
f(...args);
console.log("noCheck activated");
}
}
}
@ -174,11 +181,9 @@ class ResultsList extends List {
// ###### Functions to add one match to a sub-subcorpus ######
// activate add button
activateAddToSubSubcorpus() {
if (progress === 100) {
let addToSubSubcorpusBtnElements = document.getElementsByClassName("add");
for (let addToSubSubcorpusBtn of addToSubSubcorpusBtnElements) {
addToSubSubcorpusBtn.classList.remove("hide");
}
let addToSubSubcorpusBtnElements = document.getElementsByClassName("add");
for (let addToSubSubcorpusBtn of addToSubSubcorpusBtnElements) {
addToSubSubcorpusBtn.classList.remove("hide");
}
}
// deactivate add button
@ -192,12 +197,16 @@ class ResultsList extends List {
addToSubSubcorpus(dataIndex) {
if (!this.addToSubSubcorpuStatus[dataIndex]
|| this.addToSubSubcorpuStatus === undefined) {
// add button is activated
nopaque.flash(`[Match ${dataIndex + 1}] Marked for Sub-Subcorpus!`);
event.target.classList.remove("grey");
event.target.classList.add("green");
event.target.innerText = "check";
this.addToSubSubcorpuStatus[dataIndex] = true;
console.log(dataIndex);
this.getMatchWithContext(dataIndex, "sub-subcorpus");
} else if (this.addToSubSubcorpuStatus[dataIndex]) {
// add button is deactivated
nopaque.flash(`[Match ${dataIndex + 1}] Unmarked for Sub-Subcorpus!`);
event.target.classList.remove("green");
event.target.classList.add("grey");
event.target.innerText = "add";
@ -205,11 +214,33 @@ class ResultsList extends List {
}
}
// handels incoming match info from socket on event
showSubSubcorpusChoices(response) {
console.log("SHOW");
console.log(response.data_index);
}
// gets full info for one match
getMatchWithContext(dataIndex, type) {
this.contextId = dataIndex;
let contextResultsElement;
contextResultsElement = document.getElementById("context-results");
contextResultsElement.innerHTML = ""; // clear it from old inspects
nopaque.socket.emit("corpus_analysis_inspect_match",
{
type: type,
data_index: dataIndex,
first_cpos: results.data.matches[dataIndex].c[0],
last_cpos: results.data.matches[dataIndex].c[1],
}
);
}
// ###### Functions to inspect one match, to show more details ######
// activate inspect buttons if progress is 100
activateInspect() {
let inspectBtnElements;
if (progress === 100) {
let inspectBtnElements;
inspectBtnElements = document.getElementsByClassName("inspect");
for (let inspectBtn of inspectBtnElements) {
inspectBtn.classList.remove("disabled");
@ -221,17 +252,8 @@ class ResultsList extends List {
//gets result cpos infos for one dataIndex to send back to the server
inspect(dataIndex, type) {
this.contextId = dataIndex;
let contextResultsElement;
contextResultsElement = document.getElementById("context-results");
contextResultsElement.innerHTML = ""; // clear it from old inspects
this.getMatchWithContext(dataIndex, type);
contextModal.open();
nopaque.socket.emit("corpus_analysis_inspect_match",
{"type": type,
first_cpos: results.data.matches[dataIndex].c[0],
last_cpos: results.data.matches[dataIndex].c[1],
}
);
}
// create Element from HTML String helper function
@ -633,7 +655,7 @@ class ResultsList extends List {
// add some interaction buttons
// # some btn css rules and classes
let css = `margin-right: 10px;`
let classes = `btn-floating btn-flat waves-effect` +
let classes = `btn-floating btn waves-effect` +
`waves-light grey right`
// # add button to trigger more context to every match td
inspectBtn = document.createElement("a");