sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-01-31 03:49:03 +00:00
Code Issues Projects Releases Wiki Activity

Add more old functionality

Browse Source
This commit is contained in:
Stephan Porada 2020-08-27 16:12:21 +02:00
parent 64f8f82fe8
commit 73160c8210
9 changed files with 153 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/app/static/js/modules/corpus_analysis/client/Client.js
View File

@ -83,10 +83,6 @@ class Client {
connect() {
console.info('corpus_analysis_init: Client connecting to session via',
'socket.emit');
// if (this.displays.init != undefined) {
// this.displays.init.element.M_Modal.open();
// this.displays.init.setVisibilityByStatus('waiting');
// }
this.socket.emit('corpus_analysis_init', this.corpusId);
}
@ -118,12 +114,10 @@ class Client {
tmp_last_cpos.push(results.data.matches[dataIndex].c[1]);
}
nopaque.socket.emit("corpus_analysis_inspect_match",
{
type: resultsType,
data_indexes: dataIndexes,
first_cpos: tmp_first_cpos,
last_cpos: tmp_last_cpos,
});
{type: resultsType,
data_indexes: dataIndexes,
first_cpos: tmp_first_cpos,
last_cpos: tmp_last_cpos,});
}
}

24
web/app/static/js/modules/corpus_analysis/client/callbacks.js
View File

@ -53,10 +53,26 @@ function getResultsData(args) {
}
function saveResultsData(args) {
let [payload, client, results, rest] = arguments;
// code to save results data depending on type
console.info('Results data has been saved.');
client.notifyView('results-data-recieved');
let [payload, type, client, results, rest] = arguments;
let objectKey = '';
if (type === 'full-results') {
console.info('Saving full-results data.');
objectKey = 'fullResultsData';
} else if (type === 'sub-results') {
console.info('Saving sub-results data.');
objectKey = 'subResultsData';
}
results[objectKey].init();
results[objectKey].matches.push(...payload.matches);
results[objectKey].addData(payload.cpos_lookup, "cpos_lookup");
results[objectKey].addData(payload.text_lookup, "text_lookup");
results[objectKey].addData(results.metaData);
results[objectKey].query = results.data.query;
results[objectKey].corpus_type = type;
results[objectKey].match_count = [...payload.matches].length;
results[objectKey].cpos_ranges = payload.cpos_ranges;
console.info('Results data has been saved.', results);
client.notifyView('results-data-recieved', {type: type});
}
// export callbacks

3
web/app/static/js/modules/corpus_analysis/client/listeners.js
View File

@ -154,7 +154,8 @@ function recieveResultsData(type, client) {
console.info(`corpus_analysis_inspect_match: ${response.code} - ${response.msg}`);
console.info(response);
// executing the registered callbacks
client.eventListeners[type].executeCallbacks([response.payload]);
client.eventListeners[type].executeCallbacks([response.payload,
response.type]);
console.groupEnd();
} else {
console.group('Failed to recieve results data.');

17
web/app/static/js/modules/corpus_analysis/view/ResultsView.js
View File

@ -53,6 +53,7 @@ class ResultsList extends List {
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?)
this.notificationListeners = {};
this.clientIsBusy = false;
}
/**
@ -270,23 +271,21 @@ class ResultsList extends List {
// ###### Functions to inspect one match, to show more details ######
// activate inspect buttons if progress is 100
activateInspect() {
if (this.requestQueryProgress === 100) {
if (!this.clientIsBusy) {
let inspectBtnElements;
inspectBtnElements = document.getElementsByClassName("inspect");
inspectBtnElements = document.querySelectorAll('.inspect');
for (let inspectBtn of inspectBtnElements) {
inspectBtn.classList.remove("disabled");
inspectBtn.classList.toggle('disabled', false);
}
} else {
return
}
}
// deactivate inspect buttons
deactivateInspect() {
let inspectBtnElements;
inspectBtnElements = document.getElementsByClassName("inspect");
inspectBtnElements = document.querySelectorAll('.inspect');
for (let inspectBtn of inspectBtnElements) {
inspectBtn.classList.add("disabled");
inspectBtn.classList.toggle('disabled', true);
}
}
@ -746,7 +745,7 @@ class ResultsList extends List {
// # some btn css rules and classes
let css = `margin-right: 5px; margin-bottom: 5px;`
let classes = `btn-floating btn waves-effect` +
`waves-light grey`
` waves-light grey`
// # add button to trigger more context to every match td
inspectBtn = document.createElement("a");
inspectBtn.setAttribute("style", css);
@ -756,7 +755,7 @@ class ResultsList extends List {
// # add btn to add matches to sub-results. hidden per default
addToSubResultsBtn = document.createElement("a");
addToSubResultsBtn.setAttribute("style", css);
addToSubResultsBtn.setAttribute("class", classes + ` hide add`
addToSubResultsBtn.setAttribute("class", classes + ` add`
);
addToSubResultsBtn.innerHTML = '<i class="material-icons add-btn">add</i>';
aCellElement.appendChild(inspectBtn);

58
web/app/static/js/modules/corpus_analysis/view/callbacks.js
View File

@ -1,7 +1,22 @@
/**
* This file contains all the callbacks triggered by the notificationListener.
* Also general callbacks are defined which are doing some hiding/disabling and
* showing/enabling of common elements when data is being transmitted or not.
*/
function disableElementsGeneralCallback(resultsList, detail) {
resultsList.fullResultsCreate.classList.toggle('disabled', true);
resultsList.subResultsCreate.classList.toggle('disabled', true);
resultsList.deactivateInspect();
}
function enableElementsGeneralCallback(resultsList, detail) {
resultsList.fullResultsCreate.classList.toggle('disabled');
resultsList.subResultsCreate.classList.toggle('disabled');
resultsList.activateInspect();
}
function connectingCallback(resultsList, detail) {
resultsList.getHTMLElements(['#analysis-init-modal']);
resultsList.analysisInitModal = M.Modal.init(resultsList.analysisInitModal,
@ -24,6 +39,7 @@ function connectingFaildeCallback(resultsList, detail) {
}
function queryDataPreparingCallback(resultsList, detail) {
resultsList.clientIsBusy = true;
// remove all items from resultsList, like from the query issued before
resultsList.clear()
// get needed HTML Elements
@ -39,18 +55,15 @@ function queryDataPreparingCallback(resultsList, detail) {
'#query-results-create',
'#add-to-sub-results'
]);
// show or enable some things for the user
resultsList.interactionsMenu.classList.toggle('hide', false)
resultsList.queryResultsUserFeedback.classList.toggle('hide', false);
resultsList.queryProgressBar.classList.toggle('hide', false);
// set some initial values for the user feedback
resultsList.recievedMatchCount.textContent = 0;
resultsList.totalMatchCount.textContent = results.data.match_count;
resultsList.textLookupTitles.textContent = '';
resultsList.textLookupCount.textContent = 0;
// show or enable some things for the user
resultsList.interactionsMenu.classList.toggle('hide', false)
resultsList.addToSubResults.setAttribute("disabled", "");
resultsList.queryResultsUserFeedback.classList.toggle('hide', false);
resultsList.queryProgressBar.classList.toggle('hide', false);
// hide ore disable some things for the user
resultsList.queryResultsCreate.classList.toggle('disabled', true);
}
function queryDataRecievingCallback(resultsList, detail) {
@ -95,17 +108,36 @@ function queryDataRecievedCallback(resultsList, detail) {
// hide or disable some things for the user
resultsList.queryResultsUserFeedback.classList.toggle('hide');
resultsList.queryProgressBar.classList.toggle('hide');
// show or enable some things for the user
resultsList.queryResultsCreate.classList.toggle('disabled');
resultsList.addToSubResults.removeAttribute("disabled");
// reset bar progress for next query
resultsList.queryProgressBar.firstElementChild.style.width = '0%';
resultsList.clientIsBusy = false;
}
function resultsDataRecievingCallback(resultsList, detail) {
// hide or disable elments taht would trigger another cqp data request
resultsList.clientIsBusy = true;
}
function resultsDataRecievedCallback(resultsList, detail) {
// hide or show the right stuff
resultsList.clientIsBusy = false;
const handleType = (keyPrefix, text) => {
// hides the create element after results have been recieved and reset it
resultsList[`${keyPrefix}Create`].classList.toggle('hide');
resultsList[`${keyPrefix}Create`].textContent = `Create ${text}`;
resultsList[`${keyPrefix}Create`].insertAdjacentHTML('beforeend',
`<i class="material-icons left">build</i>`);
// show and highlight export button
resultsList[`${keyPrefix}Export`].classList.toggle('hide', false);
resultsList[`${keyPrefix}Export`].classList.toggle('pulse', true);
setTimeout(() => {
resultsList[`${keyPrefix}Export`].classList.toggle('pulse', false);
clearTimeout();
}, 3000)
}
if (detail.type === 'full-results') {
handleType('fullResults', 'Results');
} else if (detail.type ==='sub-results') {
handleType('subResults', 'Sub-Results');
}
}
// export the callbacks
@ -118,4 +150,6 @@ export {
queryDataRecievedCallback,
resultsDataRecievingCallback,
resultsDataRecievedCallback,
disableElementsGeneralCallback,
enableElementsGeneralCallback,
};

20
web/app/static/js/modules/corpus_analysis/view/listeners.js
View File

@ -16,6 +16,8 @@ import {
queryDataRecievedCallback,
resultsDataRecievingCallback,
resultsDataRecievedCallback,
disableElementsGeneralCallback,
enableElementsGeneralCallback,
} from './callbacks.js';
function recieveClientNotification(eventType, resultsList) {
@ -25,7 +27,7 @@ function recieveClientNotification(eventType, resultsList) {
case 'connecting':
console.info('View recieved notification:', caseIdentifier);
connectingCallback(resultsList, event.detail);
// execute callback
// execute callbacks
break;
case 'connected':
console.info('View recieved notification:', caseIdentifier);
@ -33,33 +35,37 @@ function recieveClientNotification(eventType, resultsList) {
break;
case 'connecting-failed':
console.info('View recieved notification:', caseIdentifier);
// execute callback
// execute callbacks
connectingFaildeCallback(resultsList, event.detail);
break;
case 'query-data-prepareing':
console.info('View recieved notification:', caseIdentifier);
// execute callback
// execute callbacks
disableElementsGeneralCallback(resultsList, event.detail);
queryDataPreparingCallback(resultsList, event.detail);
break;
case 'query-data-recieving':
console.info('View recieved notification:', caseIdentifier);
// execute callback
// execute callbacks
queryDataRecievingCallback(resultsList, event.detail);
break;
case 'query-data-recieved':
console.info('View recieved notification:', caseIdentifier);
// execute callback
// execute callbacks
queryDataRecievedCallback(resultsList, event.detail);
enableElementsGeneralCallback(resultsList, event.detail);
break;
case 'results-data-recieving':
console.info('View recieved notification:', caseIdentifier);
// execute callback
// execute callbacks
disableElementsGeneralCallback(resultsList, event.detail);
resultsDataRecievedCallback(resultsList, event.detail);
break;
case 'results-data-recieved':
console.info('View recieved notification:', caseIdentifier);
// execute callback
// execute callbacks
resultsDataRecievedCallback(resultsList, event.detail);
enableElementsGeneralCallback(resultsList, event.detail);
break;
default:
console.error('Recieved unkown notification case identifier from Client');

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

@ -213,8 +213,11 @@ document.addEventListener("DOMContentLoaded", () => {
'#show-meta-data',
'#meta-data-modal',
'#meta-data-modal-content',
'#query-results-create'
'#full-results-create',
'#sub-results-create',
'#full-results-export',
'#sub-results-export',
'#download-results-json'
]);
/**
* Display events: Following event listeners are handleing the
@ -255,19 +258,57 @@ document.addEventListener("DOMContentLoaded", () => {
}
}
};
resultsList.addToSubResults.on
/**
* The following event listeners are handeling the data export.
* 1. Create full-results
* 2. Create sub-results
* 3. Download full-results
* 4. Download sub-results
*/
resultsList.queryResultsCreate.onclick = () => {
resultsList.queryResultsCreate.querySelector('i').classList.toggle('hide');
resultsList.queryResultsCreate.innerText = 'Creating...';
resultsList.queryResultsCreate.insertAdjacentHTML('afterbegin',
resultsList.fullResultsCreate.onclick = () => {
resultsList.fullResultsCreate.querySelector('i').classList.toggle('hide');
resultsList.fullResultsCreate.innerText = 'Creating...';
resultsList.fullResultsCreate.insertAdjacentHTML('afterbegin',
loadingSpinnerHTML);
let dataIndexes = [...Array(results.data.match_count).keys()];
resultsList.notifyClient('get-results', { resultsType: 'full-results',
dataIndexes: [...Array(results.data.match_count).keys()]});
dataIndexes: dataIndexes});
}
resultsList.subResultsCreate.onclick = () => {
let dataIndexes = [];
resultsList.addToSubResultsIdsToShow.forEach((id) => {
dataIndexes.push(id - 1);
});
resultsList.subResultsCreate.querySelector('i').classList.toggle('hide');
resultsList.subResultsCreate.innerText = 'Creating...';
resultsList.subResultsCreate.insertAdjacentHTML('afterbegin',
loadingSpinnerHTML);
resultsList.notifyClient('get-results', { resultsType: 'sub-results',
dataIndexes: dataIndexes});
}
// Open download modal when full results export button is pressed
resultsList.fullResultsExport.onclick = () => {
exportModal.open();
// add onclick to download JSON button and download the file
let downloadResultsJSONElement = document.querySelector('#download-results-json')
downloadResultsJSONElement.onclick = () => {
let filename = results.fullResultsData.createDownloadFilename('matches-results');
results.fullResultsData.addData(results.metaData);
results.fullResultsData.downloadJSONRessource(filename, results.resultsData,
downloadResultsJSONElement)};
}
// Open download modal when sub results export button is pressed
resultsList.fullResultsExport.onclick = () => {
exportModal.open();
// add onclick to download JSON button and download the file
let downloadResultsJSONElement = document.querySelector('#download-results-json')
downloadResultsJSONElement.onclick = () => {
let filename = results.subResultsData.createDownloadFilename('matches-results');
results.subResultsData.addData(results.metaData);
results.subResultsData.downloadJSONRessource(filename, results.resultsData,
downloadResultsJSONElement)};
}
// enable scroll to Top
scrollToTop('.headline', '#menu-scroll-to-top-div');

19
web/app/templates/interactions/create.html.j2
View File

@ -6,21 +6,14 @@ results.-->
<div class="divider" style="margin-bottom: 10px;"></div>
<div class="row">
<div class="col s12">
<div class="switch">
Sub-Results:
<label>
Off
<input type="checkbox"
id="add-to-sub-results">
<span class="lever"></span>
On
</label>
</div>
<p>Add matches to Sub-Results with the
<i class="material-icons tiny">add</i>
button in the list or inspect view.
</p>
</div>
<div class="col s12 hide" id="sub-results-match-ids-div">
<div class="col s12" id="sub-results-match-ids-div">
<div class="input-field">
<p><span id="nr-marked-matches"></span> matches marked
for Sub-Results:</p>
<p><span id="nr-marked-matches"></span> Added matches:</p>
<textarea id="sub-results-match-ids"
class="materialize-textarea"
disabled>

7
web/app/templates/interactions/export.html.j2
View File

@ -9,12 +9,13 @@ the selected sub results.-->
<button class="waves-effect
waves-light
btn-flat
disabled
flat-interaction"
type="submit"
id="query-results-create">Create Results
id="full-results-create">Create Results
<i class="material-icons left">build</i>
</button>
<button id="query-results-export"
<button id="full-results-export"
class="waves-effect
waves-light
btn-flat
@ -28,7 +29,7 @@ the selected sub results.-->
<button class="waves-effect
waves-light
btn-flat
hide
disabled
flat-interaction"
type="submit"
id="sub-results-create">Create Sub-Results