sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-06-21 05:20:36 +00:00
Code Issues Projects Releases Wiki Activity

Add logic for data export etc.

Browse Source
This commit is contained in:
Stephan Porada
2020-08-26 16:55:24 +02:00
parent 763183435d
commit 64f8f82fe8
10 changed files with 286 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -70,35 +70,45 @@
* First Phase:
* Document content is loaded and scripts are being imported and executed.
*/
// import Client classes
import {
Client,
SocketEventListener,
ClientEventListener,
ListenerCallback,
} from '../../static/js/modules/corpus_analysis/client/Client.js';
// import client listener functions
import {
recieveConnected,
recieveMetaData,
recieveQueryStatus,
recieveQueryData,
recieveViewNotification,
recieveResultsData,
} from '../../static/js/modules/corpus_analysis/client/listeners.js';
import {
Results,
} from '../../static/js/modules/corpus_analysis/model/Results.js';
// import client listener callbacks
import {
prepareQueryData,
saveQueryData,
saveMetaData,
getResultsData,
saveResultsData,
} from '../../static/js/modules/corpus_analysis/client/callbacks.js';
import {
NotificationListener,
Results,
} from '../../static/js/modules/corpus_analysis/model/Results.js';
import {
ViewEventListener,
ResultsList,
} from '../../static/js/modules/corpus_analysis/view/ResultsView.js';
import {
recieveNotification,
recieveClientNotification,
} from '../../static/js/modules/corpus_analysis/view/listeners.js';
import {
scrollToTop,
} from '../../static/js/modules/corpus_analysis/view/scrollToTop.js'
import {
loadingSpinnerHTML,
} from '../../static/js/modules/corpus_analysis/view/spinner.js'
/**
* Second Phase:
@ -120,44 +130,59 @@ document.addEventListener("DOMContentLoaded", () => {
let resultsList = new ResultsList('result-list', ResultsList.options);
/**
* Register listeners listening to socket.io events and their callbacks
* Afterwards load them.
* Afterwards load them. Also registers listeners listening for custom
* javascript events.
*/
const listenForConnected = new SocketEventListener('corpus_analysis_init',
const listenForConnected = new ClientEventListener('corpus_analysis_init',
recieveConnected);
const listenForMetaData = new SocketEventListener('corpus_analysis_meta_data',
const listenForMetaData = new ClientEventListener('corpus_analysis_meta_data',
recieveMetaData);
const metaDataCallback = new ListenerCallback('corpus_analysis_meta_data',
saveMetaData,
[client, results]);
listenForMetaData.setCallbacks([metaDataCallback]);
const listenForQueryStatus = new SocketEventListener('corpus_analysis_query',
const listenForQueryStatus = new ClientEventListener('corpus_analysis_query',
recieveQueryStatus);
const queryStatusCallback = new ListenerCallback('corpus_analysis_query',
prepareQueryData,
[client, results]);
listenForQueryStatus.setCallbacks([queryStatusCallback]);
const listenForQueryData = new SocketEventListener('corpus_analysis_query_results',
const listenForQueryData = new ClientEventListener('corpus_analysis_query_results',
recieveQueryData);
const queryDataCallback = new ListenerCallback('corpus_analysis_query_results',
saveQueryData,
[client, results]);
listenForQueryData.setCallbacks([queryDataCallback]);
const listenForResults = new ClientEventListener('corpus_analysis_inspect_match',
recieveResultsData);
const resultsDataCallback = new ListenerCallback('corpus_analysis_inspect_match',
saveResultsData,
[client, results]);
listenForResults.setCallbacks([resultsDataCallback]);
// listen for javascript custom notifications
const listenForViewNotification = new ClientEventListener('notify-client',
recieveViewNotification);
const getResultsCallback = new ListenerCallback('get-results',
getResultsData,
[client, results]);
listenForViewNotification.setCallbacks([getResultsCallback]);
client.setSocketEventListeners([listenForConnected,
listenForQueryStatus,
listenForQueryData,
listenForMetaData]);
listenForMetaData,
listenForViewNotification,
listenForResults]);
client.loadSocketEventListeners();
/**
* Register resultsList listeners listening to nitification events.
*/
const listenForNotification = new NotificationListener('notify',
recieveNotification);
resultsList.setNotificationListeners([listenForNotification]);
const listenForClientNotification = new ViewEventListener('notify-view',
recieveClientNotification);
resultsList.setNotificationListeners([listenForClientNotification]);
resultsList.loadNotificationListeners();
// Connect client to server
client.notifyView('connecting');
client.connect();
// Send a query and recieve its answer data
let queryFormElement = document.querySelector('#query-form');
queryFormElement.addEventListener('submit', (event) => {
@ -181,20 +206,66 @@ document.addEventListener("DOMContentLoaded", () => {
results.data.getQueryStr(queryFormElement);
client.query(results.data.query);
});
/**
* Display events
* 1. live update of hits per page if hits per page value is changed
*/
// Get all needed HTMLElements for the following event listeners
resultsList.getHTMLElements([
'#display-options-form-results_per_page',
'#display-options-form-result_context'
'#display-options-form-result_context',
'#show-meta-data',
'#meta-data-modal',
'#meta-data-modal-content',
'#query-results-create'
]);
/**
* Display events: Following event listeners are handleing the
* live update of hits per page if hits per page value is changed and the
* context size of every match.
*/
resultsList.displayOptionsFormResultsPerPage.onchange = () => {
resultsList.changeHitsPerPage();
};
resultsList.displayOptionsFormResultContext.onchange = () => {
resultsList.changeContext();
};
/**
* The following event listener handel the Show metadata button and its
* functionality. Before the needed modal is initialized.
*/
let deleteOverlay = () => {
let overlay = document.querySelector(".modal-overlay");
overlay.remove();
};
resultsList.metaDataModal= M.Modal.init(resultsList.metaDataModal, {
'preventScrolling': false,
'opacity': 0.0,
'dismissible': false,
'onOpenEnd': deleteOverlay
});
resultsList.showMetaData.onclick = () => {
resultsList.metaDataModalContent.textContent = '';
let table = resultsList.createMetaDataForModal(results.metaData);
resultsList.metaDataModalContent.insertAdjacentHTML('afterbegin', table);
resultsList.metaDataModal.open();
let collapsibles = resultsList.metaDataModalContent.querySelectorAll(".text-metadata");
for (let collapsible of collapsibles) {
collapsible.onclick = () => {
let elems = resultsList.metaDataModalContent.querySelectorAll('.collapsible');
let instances = M.Collapsible.init(elems, {accordion: false});
resultsList.createTextDetails(results.metaData);
}
}
};
/**
* The following event listeners are handeling the data export.
*/
resultsList.queryResultsCreate.onclick = () => {
resultsList.queryResultsCreate.querySelector('i').classList.toggle('hide');
resultsList.queryResultsCreate.innerText = 'Creating...';
resultsList.queryResultsCreate.insertAdjacentHTML('afterbegin',
loadingSpinnerHTML);
resultsList.notifyClient('get-results', { resultsType: 'full-results',
dataIndexes: [...Array(results.data.match_count).keys()]});
}