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

Intermediate push

Browse Source
This commit is contained in:
Stephan Porada 2020-09-09 16:01:12 +02:00
parent 9ae74cc9de
commit 1e316d6852
4 changed files with 77 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/query_results/views.py
View File

@ -90,7 +90,7 @@ def query_result(query_result_id):
@login_required
def inspect_query_result(query_result_id):
'''
View to inspect one importe result file in a corpus analysis like interface
View to inspect imported result file in a corpus analysis like interface
'''
query_result = QueryResult.query.get_or_404(query_result_id)
query_metadata = query_result.query_metadata

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

@ -28,7 +28,7 @@ function prepareQueryData() {
/**
* This callbacks saves the incoming query data chunks into the model results.
*/
function saveQueryData(args) {
function saveQueryData() {
let [payload, client, results, rest] = arguments;
// get data matches length before new chun kdata is being inserted
let dataLength = results.data.matches.length;
@ -51,14 +51,14 @@ function saveQueryData(args) {
}
}
function getResultsData(args) {
function getResultsData() {
let [resultsType, dataIndexes, client, results, rest] = arguments;
client.isBusy = true;
client.notifyView('results-data-recieving');
client.getResultsData(resultsType, dataIndexes, results);
}
function saveResultsData(args) {
function saveResultsData() {
let [payload, type, client, results, rest] = arguments;
let objectKey = '';
if (type === 'full-results') {

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

@ -75,11 +75,11 @@ function recieveMetaData(type, client) {
* Also prepares the result.jsList for the incoming data.
*/
function recieveQueryStatus(type, client) {
/**
* Check if request for session was OK.
* If OK execute registered callbacks and notify View.
*/
client.socket.on(type, (response) => {
/**
* Check if request for session was OK.
* If OK execute registered callbacks and notify View.
*/
if (response.code === 200) {
console.group('corpus_analysis_query: Client recieving query process',
'status via socket.on');
@ -90,7 +90,7 @@ function recieveQueryStatus(type, client) {
console.groupEnd();
} else {
console.group('corpus_analysis_query: Client failed recieving',
'query process status via socket.on');
'query process status via socket.on');
let errorText = `Error ${response.payload.code} - ${response.payload.msg}`;
if (response.payload.code == 1281) {
errorText += ' - Invalid Query';
@ -109,8 +109,7 @@ function recieveQueryData(type, client) {
* Check if request for session was OK.
* If OK execute registered callbacks and notify View.
*/
if (client.dynamicMode) {
client.socket.on(type, (response) => {
client.socket.on(type, (response) => {
if (response.code === 200) {
console.group('corpus_analysis_query_results: Recieveing query data')
console.info('Client recieving query data via socket.on');
@ -128,14 +127,7 @@ function recieveQueryData(type, client) {
console.error(`corpus_analysis_query: ${errorText}`);
console.groupEnd();
}
});
} else {
console.group('corpus_analysis_query_results: Loading query data.');
console.info('Client loading imported query data from database.');
// executing the registered callbacks
client.eventListeners[type].executeCallbacks();
console.groupEnd();
}
});
}
/**

216
web/app/templates/query_results/inspect.html.j2
View File

@ -57,166 +57,82 @@
<script type="module">
/**
* First Phase:
* document content is loaded and scripts are being imported and executed
* Document content is loaded and scripts are being imported and executed.
*/
import {
CorpusAnalysisClient,
CorpusAnalysisDisplay,
SocketEventListener,
ListenerCallback,
} from '../../static/js/modules/nopaque.CorpusAnalysisClient.js';
import {
recieveSession,
recieveQueryStatus,
recieveQueryData,
} from '../../static/js/modules/nopaque.listenerFunctions.js';
import {
querySetup,
queryRenderResults,
} from '../../static/js/modules/nopaque.listenerCallbacks.js'
import {
Results,
Data,
MetaData,
} from '../../static/js/nopaque.Results.js';
import {
ResultsList,
} from '../../static/js/nopaque.lists.js';
import {
scrollToTop,
} from '../../static/js/modules/nopaque.scrollToTop.js';
// 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 which will listen for defined socket or
* javascript events.
*/
import {
recieveQueryStatus,
recieveQueryData,
} from '../../static/js/modules/corpus_analysis/client/listeners.js';
// Import client listener callbacks so they can be registered to the listeners.
import {
prepareQueryData,
saveQueryData,
} 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 {
ResultsList,
ViewEventListener,
} from '../../static/js/modules/corpus_analysis/view/ResultsView.js';
import {
scrollToTop,
} from '../../static/js/modules/corpus_analysis/view/scrollToTop.js'
/**
* Second Phase:
* Asynchronus and event driven code
* Asynchronus and event driven code.
*/
document.addEventListener("DOMContentLoaded", () => {
// Initialize the CorpusAnalysisClient with dynamicMode as false
const client = new CorpusAnalysisClient({'logging': true,
'dynamicMode': false});
console.info("CorpusAnalysisClient created as client:", client);
// Set up display elements which hare show depending on the client status
client.getHTMLElements(['#query-display']);
const queryDisplay = new CorpusAnalysisDisplay(client.queryDisplay);
// Register those display elements to client
client.setDisplay("query", queryDisplay);
// Initialize the client with dynamicMode set to false.
const client = new Client({'logging': true,
'dynamicMode': false});
/**
* Initializing the results object holding all the data of a query.
* Also holds the metadata of one query.
* Lastly it contains the object ResultsList which is a list.js
* subclass which handles the visual representation of the query data.
* 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
* representation of the data for the user.
*/
let displayOptionsData = ResultsList.getDisplayOptions('display-options-form');
ResultsList.options.page = displayOptionsData["resultsPerPage"];
let data = new Data();
let resultsList = new ResultsList("result-list", ResultsList.options);
let resultsMetaData = new MetaData();
let results = new Results(data, resultsList, resultsMetaData);
// make results part of the client
client.results = results;
// inits some object keys and values
client.results.clearAll();
console.info('Initialized the Results object.')
// init some modals
let deleteOverlay = () => {
let overlay = document.getElementsByClassName("modal-overlay")[0];
overlay.remove();
};
client.getHTMLElements(['#meta-data-modal'])
client.metaDataModal = M.Modal.init(client.metaDataModal,
{'preventScrolling': false,
'opacity': 0.0,
'dismissible': false,
'onOpenEnd': deleteOverlay});
// saving imported data into client object
const payload = {{ query_result_file_content|tojson|safe }};
let results = new Results();
let resultsList = new ResultsList('result-list', ResultsList.options);
// Import results data from json file.
const resultsJson = {{ query_result_file_content|tojson|safe }};
/**
* Register listeners and their callbacks. Because we are using the client
* not in dynamic mode we will not load the listeners. We just call the
* callbacks of the listeners manually. This is done to keep the setup of
* the client in dynamic or not dynamic mode similarish.
* Register needed listeners and their callbacks. But we will
* just call the attached callbacks manually. Because dynamicMode is false.
*/
const listenForQueryStatus = new SocketEventListener('corpus_analysis_query',
recieveQueryStatus);
const queryStatusCallback = new ListenerCallback('corpus_analysis_query',
querySetup);
listenForQueryStatus.setCallbacks([queryStatusCallback]);
const listenForQueryData = new SocketEventListener('corpus_analysis_query_results',
recieveQueryData);
const queryDataCallback = new ListenerCallback('corpus_analysis_query_results',
queryRenderResults);
listenForQueryData.setCallbacks([queryDataCallback]);
//
// // Initialization of interactionElemnts
// // An interactionElement is an object identifing a switch or button via
// // htmlID. Callbacks are set for these elements which will be triggered on
// // a pagination interaction by the user or if the status of the element has
// // been altered. (Like the switche has ben turned on or off).
// interactionElements = new InteractionElements();
// let expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
// expertModeInteraction.setCallback("on",
// results.jsList.expertModeOn,
// results.jsList,
// ["query-display"])
// expertModeInteraction.setCallback("off",
// results.jsList.expertModeOff,
// results.jsList,
// ["query-display"])
//
// let activateInspectInteraction = new InteractionElement("inspect",
// false);
// activateInspectInteraction.setCallback("noCheck",
// results.jsList.activateInspect,
// results.jsList);
//
// let changeContextInteraction = new InteractionElement("display-options-form-results_per_page",
// false);
// changeContextInteraction.setCallback("noCheck",
// results.jsList.changeContext,
// results.jsList)
// interactionElements.addInteractions([expertModeInteraction, activateInspectInteraction, changeContextInteraction]);
//
// // checks if a change for every interactionElement happens and executes
// // the callbacks accordingly
// interactionElements.onChangeExecute();
//
// // eventListener if pagination is used to apply new context size to new page
// // and also activate inspect match if progress is 100
// // also adds more interaction buttons like add to sub results
// for (let element of paginationElements) {
// element.addEventListener("click", (event) => {
// results.jsList.pageChangeEventInteractionHandler(interactionElements);
// });
// }
//
// render results directly with callbacks because we are not in dynamic mode
listenForQueryStatus.listenerCallbacks['corpus_analysis_query'].callbackFunction(payload, client);
listenForQueryData.listenerCallbacks['corpus_analysis_query_results'].callbackFunction(payload, client);
// // ### Show corpus Metadata
// showMetaDataButton.onclick = () => {
// metaDataModal.open();
// };
//
// // live update of hits per page if hits per page value is changed
// let changeHitsPerPageBind = results.jsList.changeHitsPerPage.bind(results.jsList);
// hitsPerPageInputElement.onchange = changeHitsPerPageBind;
//
// // live update of lr context per item if context value is changed
// contextPerItemElement.onchange = results.jsList.changeContext;
//
// // new insepct event listener makeing use of javascript bubbleing
// let resultsTable = document.getElementById("query-results");
// resultsTable.addEventListener("click", (event) => {
// if (event.target.classList.contains("inspect-btn")) {
// const dataIndex = event.target.closest("tr").dataset.index;
// const fakeResponse = results.jsList.createFakeResponse();
// results.jsList.showMatchContext(fakeResponse);
// }
// });
//
// Add scrollToTop functionality
scrollToTop();
const listenForQueryStatus = new ClientEventListener('corpus_analysis_query',
recieveQueryStatus);
const queryStatusCallback = new ListenerCallback('corpus_analysis_query',
prepareQueryData,
[client, results]);
listenForQueryStatus.setCallbacks([queryStatusCallback]);
const listenForQueryData = new ClientEventListener('corpus_analysis_query_results',
recieveQueryData);
const queryDataCallback = new ListenerCallback('corpus_analysis_query_results',
saveQueryData,
[client, results]);
listenForQueryData.setCallbacks([queryDataCallback]);
// TODO: execute callbacks manually with right input
// Enable scroll to Top functionality.
scrollToTop('#headline', '#menu-scroll-to-top-div');
});
</script>
{% endblock %}