diff --git a/web/app/static/js/modules/corpus_analysis/client/Client.js b/web/app/static/js/modules/corpus_analysis/client/Client.js
index 122add1eb90e32fabe941062d47a463af1d5d473..67c0104bbd19498f7842f620aab092a0e8716ab6 100644
--- a/web/app/static/js/modules/corpus_analysis/client/Client.js
+++ b/web/app/static/js/modules/corpus_analysis/client/Client.js
@@ -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,});
}
}
diff --git a/web/app/static/js/modules/corpus_analysis/client/callbacks.js b/web/app/static/js/modules/corpus_analysis/client/callbacks.js
index 145bdaa5a596fb39c66fa53b65368e6c1dbdcf6d..835bebf94b7e24b1ae551ece72cdceaef893eab0 100644
--- a/web/app/static/js/modules/corpus_analysis/client/callbacks.js
+++ b/web/app/static/js/modules/corpus_analysis/client/callbacks.js
@@ -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
diff --git a/web/app/static/js/modules/corpus_analysis/client/listeners.js b/web/app/static/js/modules/corpus_analysis/client/listeners.js
index 11bfc22bcdfcb9e49ec21b83cb34d69266ac1626..0edbdde23fd17968722772a6f30cb95e29ae677d 100644
--- a/web/app/static/js/modules/corpus_analysis/client/listeners.js
+++ b/web/app/static/js/modules/corpus_analysis/client/listeners.js
@@ -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.');
diff --git a/web/app/static/js/modules/corpus_analysis/view/ResultsView.js b/web/app/static/js/modules/corpus_analysis/view/ResultsView.js
index 6eb5e5c5a3f3db59843cf783ff5affb495f588d4..db5b0d7347634aedfa3db9cb0d4e52ac250bf3fe 100644
--- a/web/app/static/js/modules/corpus_analysis/view/ResultsView.js
+++ b/web/app/static/js/modules/corpus_analysis/view/ResultsView.js
@@ -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);
diff --git a/web/app/static/js/modules/corpus_analysis/view/callbacks.js b/web/app/static/js/modules/corpus_analysis/view/callbacks.js
index d313375498934eb83bf7a247310934d8bce3bc4e..15393a2f9cafc8fb8e3ba22bf0075a4303c49327 100644
--- a/web/app/static/js/modules/corpus_analysis/view/callbacks.js
+++ b/web/app/static/js/modules/corpus_analysis/view/callbacks.js
@@ -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,
};
\ No newline at end of file
diff --git a/web/app/static/js/modules/corpus_analysis/view/listeners.js b/web/app/static/js/modules/corpus_analysis/view/listeners.js
index ff84921937d95338736b21bf541bdbf5620c783c..af790ef8a19110163c507921d0248e2c7f1b4f3b 100644
--- a/web/app/static/js/modules/corpus_analysis/view/listeners.js
+++ b/web/app/static/js/modules/corpus_analysis/view/listeners.js
@@ -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');
diff --git a/web/app/templates/corpora/analyse_corpus.html.j2 b/web/app/templates/corpora/analyse_corpus.html.j2
index 09e7b6fbd21cf8b54bcf2eb21718d0b434371849..c0abaa99a86b6820abd1b63eb9db995f2f645f90 100644
--- a/web/app/templates/corpora/analyse_corpus.html.j2
+++ b/web/app/templates/corpora/analyse_corpus.html.j2
@@ -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');
diff --git a/web/app/templates/interactions/create.html.j2 b/web/app/templates/interactions/create.html.j2
index 7c76be7bbd50fa6ee774474682ecc50134e7233d..5f6069ceb578839817d7603aefc89e093c335328 100644
--- a/web/app/templates/interactions/create.html.j2
+++ b/web/app/templates/interactions/create.html.j2
@@ -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>
diff --git a/web/app/templates/interactions/export.html.j2 b/web/app/templates/interactions/export.html.j2
index 3ca6f26887bf659cc988eca49f625a096d5d0d15..7e2b3c04c66cadcc65c778e7aaefcbd06ed90428 100644
--- a/web/app/templates/interactions/export.html.j2
+++ b/web/app/templates/interactions/export.html.j2
@@ -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