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

More Analysis Javascript updates for unified interaction handeling

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/app/corpora/events.py
View File

@ -128,10 +128,15 @@ def corpus_analysis_query(query):
@socketio.on('corpus_analysis_inspect_match') @socketio.on('corpus_analysis_inspect_match')
@socketio_login_required @socketio_login_required
def corpus_analysis_inspect_match(payload): def corpus_analysis_inspect_match(payload):
type = payload['type']
data_index = payload["data_index"]
client = corpus_analysis_clients.get(request.sid) client = corpus_analysis_clients.get(request.sid)
if client is None: if client is None:
response = {'code': 424, 'desc': 'No client found for this session', response = {'code': 424,
'msg': 'Failed Dependency'} 'desc': 'No client found for this session',
'msg': 'Failed Dependency',
'type': type,
'data_index': data_index}
socketio.emit('corpus_analysis_inspect_match', response, socketio.emit('corpus_analysis_inspect_match', response,
room=request.sid) room=request.sid)
return return
@ -143,10 +148,19 @@ def corpus_analysis_inspect_match(payload):
payload['cpos_ranges'] = True payload['cpos_ranges'] = True
except cqi.errors.CQiException as e: except cqi.errors.CQiException as e:
payload = {'code': e.code, 'desc': e.description, 'msg': e.name} payload = {'code': e.code, 'desc': e.description, 'msg': e.name}
response = {'code': 500, 'desc': None, 'msg': 'Internal Server Error', response = {'code': 500,
'payload': payload} 'desc': None,
'msg': 'Internal Server Error',
'payload': payload,
'type': type,
'data_index': data_index}
else: else:
response = {'code': 200, 'desc': None, 'msg': 'OK', 'payload': payload} response = {'code': 200,
'desc': None,
'msg': 'OK',
'payload': payload,
'type': type,
'data_index': data_index}
socketio.emit('corpus_analysis_inspect_match', response, room=request.sid) socketio.emit('corpus_analysis_inspect_match', response, room=request.sid)

16
web/app/static/js/nopaque.CorpusAnalysisClient.js
View File

@ -86,9 +86,19 @@ class CorpusAnalysisClient {
} }
}); });
// inspect callback handeling based on type
socket.on("corpus_analysis_inspect_match", (response) => { socket.on("corpus_analysis_inspect_match", (response) => {
if (this.callbacks.query_match_context != undefined) { if (response.type === "inspect") {
this.callbacks.query_match_context(response); 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() { 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 // those back
this.socket.emit("corpus_analysis_get_meta_data", this.corpusId); this.socket.emit("corpus_analysis_get_meta_data", this.corpusId);
} }

4
web/app/static/js/nopaque.InteractionElement.js
View File

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

5
web/app/static/js/nopaque.callbacks.js
View File

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

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

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

78
web/app/templates/corpora/analyse_corpus.html.j2
View File

@ -404,7 +404,13 @@
}); });
client.setCallback("query_match_context", (payload) => { client.setCallback("query_match_context", (payload) => {
results.jsList.showMatchContext(payload); results.jsList.showMatchContext(payload);
}) });
client.setCallback("show_sub_subcorpus_choices", (payload) => {
results.jsList.showSubSubcorpusChoices(payload);
});
client.setCallback("save_sub_subcorpus_choices", (payload) => {
saveSubSubcorpusChoices(payload);
});
// Trigger corpus analysis initialization on server side // Trigger corpus analysis initialization on server side
client.init(); client.init();
@ -443,7 +449,6 @@
// stuff that happens in the list table and should also be checked and // stuff that happens in the list table and should also be checked and
// updated if the pagination is used // updated if the pagination is used
interactionElements = new Array(); interactionElements = new Array();
let expertModeInteraction = new InteractionElement("display-options-form-expert_mode"); let expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
expertModeInteraction.setCallback("on", expertModeInteraction.setCallback("on",
@ -454,6 +459,7 @@
results.jsList.expertModeOff, results.jsList.expertModeOff,
results.jsList, results.jsList,
["query-display"]) ["query-display"])
let subSubcorpusInteraction = new InteractionElement("add-to-sub-subcorpus"); let subSubcorpusInteraction = new InteractionElement("add-to-sub-subcorpus");
subSubcorpusInteraction.setCallback("on", subSubcorpusInteraction.setCallback("on",
results.jsList.activateAddToSubSubcorpus, results.jsList.activateAddToSubSubcorpus,
@ -461,16 +467,25 @@
subSubcorpusInteraction.setCallback("off", subSubcorpusInteraction.setCallback("off",
results.jsList.deactivateAddToSubSubcorpus, results.jsList.deactivateAddToSubSubcorpus,
results.jsList); results.jsList);
interactionElements.push(expertModeInteraction, subSubcorpusInteraction);
let activateInspectInteraction = new InteractionElement("inspect",
false);
activateInspectInteraction.setCallback("noCheck",
results.jsList.activateInspect,
results.jsList);
let changeContextInteraction = new InteractionElement("display-options-form-results_per_page",
false);
changeContextInteraction.setCallback("noCheck",
results.jsList.changeContext,
results.jsList)
interactionElements.push(expertModeInteraction, subSubcorpusInteraction, activateInspectInteraction, changeContextInteraction);
// eventListener if pagination is used to apply new context size to new page // eventListener if pagination is used to apply new context size to new page
// and also activate inspect match if progress is 100 // and also activate inspect match if progress is 100
// also adds more interaction buttons like add to subcorpus // also adds more interaction buttons like add to subcorpus
for (let element of paginationElements) { for (let element of paginationElements) {
element.addEventListener("click", results.jsList.changeContext);
element.addEventListener("click", results.jsList.activateInspect);
element.addEventListener("click", results.jsList.activateAddToSubSubcorpus);
element.addEventListener("click", (event) => { element.addEventListener("click", (event) => {
results.jsList.pageChangeEventInteractionHandler(interactionElements); results.jsList.pageChangeEventInteractionHandler(interactionElements);
}); });
@ -479,36 +494,23 @@
// checks if a change for every interactionElement happens and executes // checks if a change for every interactionElement happens and executes
// the callbacks accordingly // the callbacks accordingly
for (let interaction of interactionElements) { for (let interaction of interactionElements) {
let element = interaction.getElement() if (interaction.checkStatus) {
element.addEventListener("change", (event) => { let element = interaction.getElement()
if (event.target.checked) { element.addEventListener("change", (event) => {
let f_on = interaction.bindThisToCallback("on"); if (event.target.checked) {
let args_on = interaction.callbacks.on.args; let f_on = interaction.bindThisToCallback("on");
f_on(...args_on); let args_on = interaction.callbacks.on.args;
} else { f_on(...args_on);
let f_off = interaction.bindThisToCallback("off"); } else {
let args_off = interaction.callbacks.off.args; let f_off = interaction.bindThisToCallback("off");
f_off(...args_off); let args_off = interaction.callbacks.off.args;
} f_off(...args_off);
}); }
});
} else {
continue
}
}; };
// Show add buttons for sub-subcorpus creation if this is pressed
// addToSubSubcorpusElement.addEventListener("change", (event) => {
// if (event.target.checked) {
// results.jsList.activateAddToSubSubcorpus();
// } else {
// results.jsList.deActivateAddToSubSubcorpus();
// }
// });
// expertModeSwitchElement.addEventListener("change", (event) => {
// if (event.target.checked) {
// results.jsList.expertModeOn("query-display");
// } else {
// results.jsList.expertModeOff("query-display");
// }
// });
}); });
// Add onclick to open download modal when Export Results button is pressed // Add onclick to open download modal when Export Results button is pressed
@ -530,8 +532,8 @@
let filename = results.data.createDownloadFilename(`context-id-${results.jsList.contextId}`); let filename = results.data.createDownloadFilename(`context-id-${results.jsList.contextId}`);
results.data.addData(results.metaData); results.data.addData(results.metaData);
results.data.downloadJSONRessource(filename, results.data.downloadJSONRessource(filename,
results.jsList.contextData, results.jsList.contextData,
downloadInspectContextElement); downloadInspectContextElement);
}; };
</script> </script>
{% endblock %} {% endblock %}