sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-11-15 01:05:42 +00:00
Code Issues Projects Releases Wiki Activity

Add some doc strings.

Browse Source
This commit is contained in:
Stephan Porada 2020-09-08 16:19:30 +02:00
parent 7186f5a777
commit 17e9b7d4ed
1 changed files with 59 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -70,13 +70,17 @@
* First Phase:
* Document content is loaded and scripts are being imported and executed.
*/
// import Client classes
// Import Client classes. Client handles the server client communication.
import {
Client,
ClientEventListener,
ListenerCallback,
} from '../../static/js/modules/corpus_analysis/client/Client.js';
// import client listener functions
/**
* Import Client listener functions which will listen for defined socket or
* javascript events.
*/
import {
recieveConnected,
recieveMetaData,
@ -85,7 +89,7 @@ import {
recieveViewNotification,
recieveResultsData,
} from '../../static/js/modules/corpus_analysis/client/listeners.js';
// import client listener callbacks
// Import client listener callbacks so they can be registered to the listeners.
import {
prepareQueryData,
saveQueryData,
@ -93,26 +97,36 @@ import {
getResultsData,
saveResultsData,
} from '../../static/js/modules/corpus_analysis/client/callbacks.js';
// Import Results class which will be used to save results data of a query etc.
import {
Results,
} from '../../static/js/modules/corpus_analysis/model/Results.js';
/**
* Import the ResultsList which can be understood as a View class that handles
* how the data from Results is represented to the user. The ViewEventListener
* is used to register listener functions which listen for events emitred by
* the Client.
*/
import {
ViewEventListener,
ResultsList,
ViewEventListener,
} from '../../static/js/modules/corpus_analysis/view/ResultsView.js';
// Import listener which will be registered to the ViewEventListener class.
import {
recieveClientNotification,
} from '../../static/js/modules/corpus_analysis/view/listeners.js';
// Import script that implements the scroll to top button.
import {
scrollToTop,
} from '../../static/js/modules/corpus_analysis/view/scrollToTop.js'
// Import the script that implements a spinner animation for buttons.
import {
loadingSpinnerHTML,
} from '../../static/js/modules/corpus_analysis/view/spinner.js'
/**
* Second Phase:
* Asynchronus and event driven code
* Asynchronus and event driven code.
*/
document.addEventListener("DOMContentLoaded", () => {
// Initialize the client for server client communication in dynamic mode
@ -122,17 +136,17 @@ document.addEventListener("DOMContentLoaded", () => {
'logging': true,
'dynamicMode': true});
/**
* Initializing the results object as a model holding all the data of a query.
* Also holds the metadata of one query.
* Initializing the results object as a model holding all the data of a
* query. Also holds the metadata of one query and results data.
* After that initialize the ResultsList object as the View handeling the
* represnetation of the data for the user.
* representation of the data for the user.
*/
let results = new Results();
let resultsList = new ResultsList('result-list', ResultsList.options);
/**
* Register listeners listening to socket.io events and their callbacks
* Afterwards load them. Also registers listeners listening for custom
* javascript events.
* javascript events emitted by the View.
*/
const listenForConnected = new ClientEventListener('corpus_analysis_init',
recieveConnected);
@ -160,7 +174,7 @@ document.addEventListener("DOMContentLoaded", () => {
saveResultsData,
[client, results]);
listenForResults.setCallbacks([resultsDataCallback]);
// listen for javascript custom notifications
// Listen for javascript custom notifications emitted by the View.
const listenForViewNotification = new ClientEventListener('notify-client',
recieveViewNotification);
const getResultsCallback = new ListenerCallback('get-results',
@ -173,18 +187,20 @@ document.addEventListener("DOMContentLoaded", () => {
listenForMetaData,
listenForViewNotification,
listenForResults]);
// Load the listeners so that they will be executed if triggered
client.loadSocketEventListeners();
/**
* Register resultsList listeners listening to notification events.
* Register resultsList listeners listening to notification events emitted by
* the Client class.
*/
const listenForClientNotification = new ViewEventListener('notify-view',
recieveClientNotification);
resultsList.setNotificationListeners([listenForClientNotification]);
resultsList.loadNotificationListeners();
// Connect client to server
// Connect client to server.
client.notifyView('connecting');
client.connect();
// Send a query and recieve its answer data
// Send a query and recieve its answer data.
let queryFormElement = document.querySelector('#query-form');
queryFormElement.addEventListener('submit', (event) => {
try {
@ -201,13 +217,13 @@ document.addEventListener("DOMContentLoaded", () => {
} catch (e) {
// No page element is present if first query is submitted.
}
// Prevent page from reloading on submit
// Prevent page from reloading on submit.
event.preventDefault();
// Get query string and send query to server
// Get query string and send query to server.
results.data.getQueryStr(queryFormElement);
client.query(results.data.query);
});
// Get all needed HTMLElements for the following event listeners
// Get all needed HTMLElements for the following event listeners.
resultsList.getHTMLElements([
'#display-options-form-results_per_page',
'#display-options-form-result_context',
@ -232,21 +248,21 @@ document.addEventListener("DOMContentLoaded", () => {
*/
for (let element of resultsList.pagination) {
element.addEventListener("click", (event) => {
// shows match context according to the user picked value
// Shows match context according to the user picked value on a new page.
resultsList.changeContext();
// activates or deactivates expertMode on new page depending switch value
// De- or activates expertMode on new page depending on switch value.
if (resultsList.displayOptionsFormExpertMode.checked) {
resultsList.expertModeOn('query-display', results);
} else {
resultsList.expertModeOff('query-display');
}
// activates inspect buttons on new page if client is not busy
// Activates inspect buttons on new page if client is not busy.
resultsList.activateInspect();
});
}
/**
* The following event Listener handles the expert mode switch for the list
* The following event Listener handles the expert mode switch for the list.
*/
resultsList.displayOptionsFormExpertMode.onchange = (event) => {
if (event.target.checked) {
@ -272,9 +288,8 @@ document.addEventListener("DOMContentLoaded", () => {
})
/**
* Display events: Following event listeners are handling the
* live update of hits per page if hits per page value is changed and the
* context size of every match.
* Following event listeners handle the change of Context size per match and
* the number of matches shown per page.
*/
resultsList.displayOptionsFormResultsPerPage.onchange = () => {
resultsList.changeHitsPerPage();
@ -284,7 +299,7 @@ document.addEventListener("DOMContentLoaded", () => {
};
/**
* The following event listener handel the Show metadata button and its
* The following event listener handles the show metadata button and its
* functionality. Before the needed modal is initialized.
*/
resultsList.metaDataModal= M.Modal.init(resultsList.metaDataModal, {
@ -316,6 +331,7 @@ document.addEventListener("DOMContentLoaded", () => {
* 4. Download sub-results
* 5. Download single inspect-results
*/
// 1. Add events for full-results create
resultsList.fullResultsCreate.onclick = () => {
resultsList.fullResultsCreate.querySelector('i').classList.toggle('hide');
resultsList.fullResultsCreate.innerText = 'Creating...';
@ -325,6 +341,7 @@ document.addEventListener("DOMContentLoaded", () => {
resultsList.notifyClient('get-results', { resultsType: 'full-results',
dataIndexes: dataIndexes});
}
// 2. Add events for sub-results create
resultsList.subResultsCreate.onclick = () => {
let dataIndexes = [];
resultsList.addToSubResultsIdsToShow.forEach((id) => {
@ -337,11 +354,9 @@ document.addEventListener("DOMContentLoaded", () => {
resultsList.notifyClient('get-results', { resultsType: 'sub-results',
dataIndexes: dataIndexes});
}
/**
* Before the download events are added the needed modal is initialized.
*/
// Before the download events are added the needed modal is initialized.
resultsList.queryResultsDownloadModal = M.Modal.init(resultsList.queryResultsDownloadModal);
// Open download modal when full results export button is pressed
// 3. Open download modal when full results export button is pressed
resultsList.fullResultsExport.onclick = () => {
resultsList.queryResultsDownloadModal.open();
// add onclick to download JSON button and download the file
@ -352,7 +367,7 @@ document.addEventListener("DOMContentLoaded", () => {
results.fullResultsData,
resultsList.downloadResultsJson)};
}
// Open download modal when sub results export button is pressed
// 4. Open download modal when sub results export button is pressed
resultsList.subResultsExport.onclick = () => {
resultsList.queryResultsDownloadModal.open();
// add onclick to download JSON button and download the file
@ -363,7 +378,7 @@ document.addEventListener("DOMContentLoaded", () => {
results.subResultsData,
resultsList.downloadResultsJson)};
}
// Open download modal when inspect-results-export button is pressed
// 5. Open download modal when inspect-results-export button is pressed
resultsList.inspectResultsExport.onclick = () => {
resultsList.queryResultsDownloadModal.open();
// add onclick to download JSON button and download the file
@ -375,7 +390,7 @@ document.addEventListener("DOMContentLoaded", () => {
resultsList.downloadResultsJson)};
}
// enable scroll to Top
// Enable scroll to Top functionality.
scrollToTop('#headline', '#menu-scroll-to-top-div');
});
</script>