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

Push before rework part 2

Browse Source
This commit is contained in:
Stephan Porada
2020-08-20 16:03:37 +02:00
parent b3e8976c1c
commit 21ce07f3ef
10 changed files with 309 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -69,22 +69,45 @@
<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 } from '../../static/js/modules/nopaque.CorpusAnalysisClient.js';
import { recieveSession, recieveQueryStatus,
recieveQueryData } from '../../static/js/modules/nopaque.listenerFunctions.js';
import { Results, Data, MetaData } from '../../static/js/nopaque.Results.js';
import { ResultsList } from '../../static/js/nopaque.lists.js';
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 {
InteractionElement,
InteractionElements,
} from '../../static/js/modules/nopaque.InteractionElement.js';
/**
* Second Phase:
* Asynchronus and event driven code
*/
document.addEventListener("DOMContentLoaded", () => {
// Initialize the CorpusAnalysisClient
// Initialize the CorpusAnalysisClient dynamic mode
let corpusId = {{ corpus_id}}
const client = new CorpusAnalysisClient({'corpusId': corpusId,
'socket': nopaque.socket,
@ -95,7 +118,7 @@ document.addEventListener("DOMContentLoaded", () => {
const initLoadingElement = document.getElementById("init-display");
const initLoadingModal = M.Modal.init(initLoadingElement,
{"dismissible": false});
// Set up display elements which hare show depending on the client status
// Set up display elements which are shown depending on the client status
const initLoadingDisplay = new CorpusAnalysisDisplay(initLoadingModal);
client.getHTMLElements(['#query-display']);
const queryDisplay = new CorpusAnalysisDisplay(client.queryDisplay);
@ -105,27 +128,79 @@ document.addEventListener("DOMContentLoaded", () => {
/**
* Initializing the results object holding all the data of a query.
* Also holds the metadata of one query.
* resultsListOptions is set to determine how many results per page are
* shown etc.
* Lastly it contains the object ResultsList which is a list.js
* subclass which handles the visual representation of the query data.
*/
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;
console.info('Initialized the Results object.')
// register listeners listening to socket.io events and load them
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;
console.info('Initialized the Results object.')
/**
* 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).
*/
let interactionElements = new InteractionElements();
const expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
expertModeInteraction.setCallback('on',
results.jsList.expertModeOn,
results.jsList,
['query-display', client]);
expertModeInteraction.setCallback('off',
results.jsList.expertModeOff,
results.jsList,
['query-display', client]);
const subResultsInteraction = new InteractionElement("add-to-sub-results");
subResultsInteraction.setCallback('on',
results.jsList.activateAddToSubResults,
results.jsList);
subResultsInteraction.setCallback('off',
results.jsList.deactivateAddToSubResults,
results.jsList);
const activateInspectInteraction = new InteractionElement('inspect',
false);
activateInspectInteraction.setCallback('noCheck',
results.jsList.activateInspect,
results.jsList);
const changeContextInteraction = new InteractionElement('display-options-form-results_per_page',
false);
changeContextInteraction.setCallback('noCheck',
results.jsList.changeContext,
results.jsList)
interactionElements.addInteractions([expertModeInteraction,
subResultsInteraction,
activateInspectInteraction,
changeContextInteraction]);
/**
* Checks if a change for every interactionElement happens and executes
* the callbacks accordingly.
*/
interactionElements.onChangeExecute();
/**
* Register listeners listening to socket.io events and their callbacks
* Afterwards load them.
*/
const listenForSession = new SocketEventListener('corpus_analysis_init',
recieveSession);
const listenForQueryStatus = new SocketEventListener('corpus_analysis_query',
recieveQueryStatus);
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]);
client.setSocketEventListeners([listenForSession, listenForQueryStatus,
listenForQueryData]);
client.loadSocketEventListeners();
@ -153,6 +228,9 @@ document.addEventListener("DOMContentLoaded", () => {
// Get query string and send query to server
results.data.getQueryStr(queryFormElement);
client.requestQueryData(results.data.query);
// Add scrollToTop functionality
scrollToTop();
});
});
</script>

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

@ -10,8 +10,7 @@ results.-->
Sub-Results creation:
<label>
Off
<input disabled
type="checkbox"
<input type="checkbox"
id="add-to-sub-results">
<span class="lever"></span>
On

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

@ -9,7 +9,6 @@ the selected sub results.-->
<button class="waves-effect
waves-light
btn-flat
disabled
flat-interaction"
type="submit"
id="query-results-create">Create Results
@ -30,7 +29,6 @@ the selected sub results.-->
waves-light
btn-flat
hide
disabled
flat-interaction"
type="submit"
id="sub-results-create">Create Sub-Results

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

@ -59,21 +59,39 @@
* First Phase:
* document content is loaded and scripts are being imported and executed
*/
import { CorpusAnalysisClient,
CorpusAnalysisDisplay,
SocketEventListener } from '../../static/js/modules/nopaque.CorpusAnalysisClient.js';
import { recieveSession, recieveQueryStatus,
recieveQueryData } from '../../static/js/modules/nopaque.listenerFunctions.js';
import { Results, Data, MetaData } from '../../static/js/nopaque.Results.js';
import { ResultsList } from '../../static/js/nopaque.lists.js';
import { queryRenderResults, querySetup } from '../../static/js/modules/nopaque.listenerCallbacks.js'
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';
/**
* Second Phase:
* Asynchronus and event driven code
*/
document.addEventListener("DOMContentLoaded", () => {
// Initialize the CorpusAnalysisClient
// Initialize the CorpusAnalysisClient with dynamicMode as false
const client = new CorpusAnalysisClient({'logging': true,
'dynamicMode': false});
console.info("CorpusAnalysisClient created as client:", client);
@ -85,8 +103,6 @@ document.addEventListener("DOMContentLoaded", () => {
/**
* Initializing the results object holding all the data of a query.
* Also holds the metadata of one query.
* resultsListOptions is set to determine how many results per page are
* shown etc.
* Lastly it contains the object ResultsList which is a list.js
* subclass which handles the visual representation of the query data.
*/
@ -114,7 +130,22 @@ document.addEventListener("DOMContentLoaded", () => {
'onOpenEnd': deleteOverlay});
// saving imported data into client object
const payload = {{ 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.
*/
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
@ -160,9 +191,8 @@ document.addEventListener("DOMContentLoaded", () => {
// }
//
// render results directly with callbacks because we are not in dynamic mode
querySetup(payload, client);
queryRenderResults(payload, client);
listenForQueryStatus.listenerCallbacks['corpus_analysis_query'].callbackFunction(payload, client);
listenForQueryData.listenerCallbacks['corpus_analysis_query_results'].callbackFunction(payload, client);
// // ### Show corpus Metadata
// showMetaDataButton.onclick = () => {
// metaDataModal.open();
@ -185,19 +215,8 @@ document.addEventListener("DOMContentLoaded", () => {
// }
// });
//
// // scroll to top button if user scrolled down the list
// let headline = document.querySelector(".headline");
// let scrollToTop = document.querySelector("#menu-scroll-to-top-div");
// window.addEventListener("scroll", (event) => {
// if (pageYOffset > 250) {
// scrollToTop.classList.toggle("hide", false);
// } else {
// scrollToTop.classList.toggle("hide", true);
// }
// });
// scrollToTop.onclick = () => {
// headline.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
// };
// Add scrollToTop functionality
scrollToTop();
});
</script>
{% endblock %}