mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 01:05:42 +00:00
First feature complete rebuilt of analysis interface
This commit is contained in:
parent
38e1408e01
commit
12586bb13d
@ -96,7 +96,7 @@ def pj_corpus_analysis_query(query):
|
||||
@socketio.on('pj_corpus_analysis_inspect_match')
|
||||
@socketio_login_required
|
||||
def pj_corpus_analysis_inspect_match(payload):
|
||||
logger.warning(payload)
|
||||
payload = payload["payload"]
|
||||
client = pj_corpus_analysis_clients.get(request.sid)
|
||||
if client is None:
|
||||
socketio.emit('query', '[424]: Failed Dependency',
|
||||
@ -106,8 +106,9 @@ def pj_corpus_analysis_inspect_match(payload):
|
||||
corpus = client.corpora.get('CORPUS')
|
||||
s = corpus.attributes.structural.get('s')
|
||||
match_context = s.export(payload['first_cpos'], payload['last_cpos'],
|
||||
context=3, expand_lists=True)
|
||||
socketio.emit('pj_corpus_analysis_inspect_match',
|
||||
context=3, expand_lists=False)
|
||||
match_context['cpos_ranges'] = True
|
||||
socketio.emit('pj_match_context',
|
||||
{'payload': match_context}, room=request.sid)
|
||||
|
||||
|
||||
|
@ -86,58 +86,80 @@ function inspect(dataIndex) {
|
||||
// This function should be in the AnalysisClient class as a method.
|
||||
console.log("Inspect!");
|
||||
console.log(results.resultsJSON.matches[dataIndex].c);
|
||||
contextResultsElement = document.getElementById("context-results");
|
||||
contextResultsElement.innerHTML = ""; // clear it from old inspects
|
||||
contextModal.open();
|
||||
nopaque.socket.emit("pj_corpus_analysis_inspect_match",
|
||||
{payload: {first_cpos: results.resultsJSON.matches[dataIndex].c[0],
|
||||
last_cpos: results.resultsJSON.matches[dataIndex].c[1]}});
|
||||
{payload: {
|
||||
first_cpos: results.resultsJSON.matches[dataIndex].c[0],
|
||||
last_cpos: results.resultsJSON.matches[dataIndex].c[1]
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showMatchContext(payload) {
|
||||
function showMatchContext(response) {
|
||||
let contextData = response.payload
|
||||
let contextResultsElement;
|
||||
let sentenceElement
|
||||
let contextModalLoading;
|
||||
let contextModalReady;
|
||||
let expertModeSwitchElement
|
||||
let partElement
|
||||
let token;
|
||||
let tokenElement;
|
||||
console.log("###### match_context ######");
|
||||
console.log("Incoming data:", payload);
|
||||
console.log("Incoming data:", contextData);
|
||||
expertModeSwitchElement = document.getElementById("display-options-form-expert_mode");
|
||||
contextResultsElement = document.getElementById("context-results");
|
||||
contextResultsElement.innerHTML = "<p> </p>";
|
||||
document.getElementById("context-modal-loading").classList.add("hide");
|
||||
document.getElementById("context-modal-ready").classList.remove("hide");
|
||||
contextModalLoading = document.getElementById("context-modal-loading");
|
||||
contextModalLoading.classList.add("hide");
|
||||
contextModalReady = document.getElementById("context-modal-ready");
|
||||
contextModalReady.classList.remove("hide");
|
||||
|
||||
for (let [key, value] of Object.entries(payload['context_s_cpos'])) {
|
||||
sentenceElement = document.createElement("p");
|
||||
for (let cpos of value) {
|
||||
token = payload["cpos_lookup"][cpos];
|
||||
tokenElement = document.createElement("span");
|
||||
tokenElement.classList.add("token");
|
||||
if (payload["match_cpos_list"].includes(cpos)) {
|
||||
tokenElement.classList.add("bold");
|
||||
tokenElement.classList.add("light-green");
|
||||
if (contextData.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(contextData.match.lc[0], contextData.match.lc[1], 1)
|
||||
c = range(contextData.match.c[0], contextData.match.c[1], 1)
|
||||
rc = range(contextData.match.rc[0], contextData.match.rc[1], 1)
|
||||
} else {
|
||||
lc = contextData.match.lc;
|
||||
c = contextData.match.c;
|
||||
rc = contextData.match.rc;
|
||||
}
|
||||
|
||||
partElement = document.createElement("p");
|
||||
for (let cpos of lc) {
|
||||
token = contextData["cpos_lookup"][cpos];
|
||||
partElement.insertAdjacentHTML("beforeend", `<span class="token" data-cpos="${cpos}">${token["word"]} </span>`);
|
||||
contextResultsElement.append(partElement);
|
||||
}
|
||||
for (let cpos of c) {
|
||||
token = contextData["cpos_lookup"][cpos];
|
||||
partElement.insertAdjacentHTML("beforeend", `<span class="token bold underline" data-cpos="${cpos}" style="text-decoration-line: underline;">${token["word"]} </span>`);
|
||||
contextResultsElement.append(partElement);
|
||||
}
|
||||
for (let cpos of rc) {
|
||||
token = contextData["cpos_lookup"][cpos];
|
||||
partElement.insertAdjacentHTML("beforeend", `<span class="token" data-cpos="${cpos}">${token["word"]} </span>`);
|
||||
contextResultsElement.append(partElement);
|
||||
}
|
||||
tokenElement.dataset.cpos = cpos;
|
||||
tokenElement.innerText = token["word"];
|
||||
var expertModeSwitchElement = document.getElementById("expert-mode-switch");
|
||||
if (expertModeSwitchElement.checked) {
|
||||
expertModeOn([tokenElement], payload);
|
||||
}
|
||||
sentenceElement.append(tokenElement);
|
||||
sentenceElement.append(document.createTextNode(" "));
|
||||
}
|
||||
contextResultsElement.append(sentenceElement);
|
||||
let tokenElements = partElement.getElementsByClassName("token");
|
||||
expertModeOn(tokenElements, contextData);
|
||||
}
|
||||
}
|
||||
|
||||
// ###### Display options changing live how the matches are being displayed ######
|
||||
|
||||
// Event function that changes the shown hits per page.
|
||||
// Just alters the resultList.page property
|
||||
// Just alters the resultsList.page property
|
||||
function changeHitsPerPage(event) {
|
||||
try {
|
||||
resultList.page = event.target.value;
|
||||
resultList.update();
|
||||
resultsList.page = event.target.value;
|
||||
resultsList.update();
|
||||
nopaque.flash("Updated matches per page.")
|
||||
} catch (e) {
|
||||
console.log("resultList has no results right now. Live update of items per page is useless for now.");
|
||||
console.log("resultsList has no results right now. Live update of items per page is useless for now.");
|
||||
}
|
||||
}
|
||||
|
||||
@ -190,7 +212,7 @@ function eventHandlerCheck(event) {
|
||||
console.log("pagination used!");
|
||||
console.log(expertModeSwitchElement.checked);
|
||||
if (expertModeSwitchElement.checked) {
|
||||
expertModeOn(event.currentTarget.tokenElements, result);
|
||||
expertModeOn(event.currentTarget.tokenElements, resultsJSON);
|
||||
} else if (!expertModeSwitchElement.checked) {
|
||||
event.preventDefault();
|
||||
console.log("prevented! Destroy");
|
||||
@ -199,19 +221,21 @@ function eventHandlerCheck(event) {
|
||||
}
|
||||
|
||||
// function to apply extra information and animation to every token
|
||||
function expertModeOn(tokenElements, result_lookup) {
|
||||
function expertModeOn(tokenElements, results) {
|
||||
let token;
|
||||
|
||||
console.log("expertModeOn!");
|
||||
console.log(results);
|
||||
console.log("hier:", tokenElements);
|
||||
for (let tokenElement of tokenElements) {
|
||||
tokenElement.classList.add("chip");
|
||||
tokenElement.classList.add("hoverable");
|
||||
tokenElement.classList.add("expert-view");
|
||||
token = result_lookup["cpos_lookup"][tokenElement.dataset.cpos];
|
||||
token = results["cpos_lookup"][tokenElement.dataset.cpos];
|
||||
tokenElement.addEventListener("mouseover", function(event) {
|
||||
console.log("Mouseover!");
|
||||
console.log(event.target);
|
||||
token = result_lookup["cpos_lookup"][event.target.dataset.cpos];
|
||||
token = results["cpos_lookup"][event.target.dataset.cpos];
|
||||
addToolTipToTokenElement(event.target, token);
|
||||
});
|
||||
}
|
||||
@ -235,16 +259,12 @@ function addToolTipToTokenElement(tokenElement, token) {
|
||||
NER: ${token["ner"]}
|
||||
</td>
|
||||
<td class="left-align">
|
||||
Title: ${result["text_lookup"][token["text"]]["title"]}<br>
|
||||
Author: ${result["text_lookup"][token["text"]]["author"]}<br>
|
||||
Publishing year: ${result["text_lookup"][token["text"]]["publishing_year"]}
|
||||
Title: ${resultsJSON["text_lookup"][token["text"]]["title"]}<br>
|
||||
Author: ${resultsJSON["text_lookup"][token["text"]]["author"]}<br>
|
||||
Publishing year: ${resultsJSON["text_lookup"][token["text"]]["publishing_year"]}
|
||||
</td>
|
||||
</tr>
|
||||
</table>`,
|
||||
"inDuration": 1500,
|
||||
"margin": 15,
|
||||
"position": "top",
|
||||
"transitionMovement": 0});
|
||||
</table>`});
|
||||
}
|
||||
|
||||
// function to remove extra informations and animations from tokens
|
||||
|
@ -327,10 +327,44 @@
|
||||
|
||||
// get context of one match if inspected via socket.io
|
||||
nopaque.socket.on("pj_match_context", showMatchContext);
|
||||
|
||||
// live update of hits per page if hits per page value is changed
|
||||
hitsPerPageInputElement = document.getElementById("display-options-form-results_per_page");
|
||||
hitsPerPageInputElement.onchange = changeHitsPerPage;
|
||||
|
||||
// live update of lr context per item if context value is changed
|
||||
contextPerItemElement = document.getElementById("display-options-form-result_context");
|
||||
contextPerItemElement.onchange = changeContext;
|
||||
|
||||
// eventListener if pagination is used to apply new context size to new page
|
||||
// and also activate inspect match if queryFinished is true
|
||||
paginationElements = document.getElementsByClassName("pagination");
|
||||
for (element of paginationElements) {
|
||||
element.addEventListener("click", changeContext);
|
||||
element.addEventListener("click", activateInspect);
|
||||
}
|
||||
|
||||
// epxert mode table view
|
||||
expertModeSwitchElement = document.getElementById("display-options-form-expert_mode");
|
||||
expertModeSwitchElement.addEventListener("change", function(event) {
|
||||
let currentTokenElements = document.getElementsByClassName("token");
|
||||
let paginationElements = document.getElementsByClassName("pagination");
|
||||
if (event.target.checked) {
|
||||
console.log("Checked!");
|
||||
expertModeOn(currentTokenElements, resultsJSON);
|
||||
for (element of paginationElements) {
|
||||
element.tokenElements = currentTokenElements;
|
||||
element.addEventListener("click", eventHandlerCheck);
|
||||
}
|
||||
} else {
|
||||
console.log("Unchecked!");
|
||||
expertModeOff(currentTokenElements);
|
||||
console.log("unchecked! Destroy");
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
// Add onclick to open download modal wen Export Results button is pressed
|
||||
// Add onclick to open download modal when Export Results button is pressed
|
||||
queryResultsExportElement.onclick = function() {
|
||||
exportModal.open();
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user