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

Further rework

Browse Source
This commit is contained in:
Stephan Porada
2020-08-17 16:15:34 +02:00
parent f94d21fa96
commit b3e8976c1c
13 changed files with 755 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -67,89 +67,93 @@
<!-- import modules -->
<script type="module">
/**
* 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';
/**
* 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';
/**
* Second Phase:
* Asynchronus and event driven code
*/
document.addEventListener("DOMContentLoaded", () => {
// Initialize the CorpusAnalysisClient
let corpusId = {{ corpus_id}}
const client = new CorpusAnalysisClient({'corpusId': corpusId,
'socket': nopaque.socket,
'logging': true,
'dynamicMode': true});
console.info("CorpusAnalysisClient created as client:", client);
// Initialize modals which are shown depending on events or client status
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
const initLoadingDisplay = new CorpusAnalysisDisplay(initLoadingModal);
client.getHTMLElements(['#query-display']);
const queryDisplay = new CorpusAnalysisDisplay(client.queryDisplay);
// Register those display elements to client
client.setDisplay("init", initLoadingDisplay);
client.setDisplay("query", queryDisplay);
/**
* Second Phase:
* Asynchronus and event driven code
* 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.
*/
document.addEventListener("DOMContentLoaded", () => {
// Initialize the CorpusAnalysisClient
const client = new CorpusAnalysisClient({{ corpus_id }}, nopaque.socket);
console.info("CorpusAnalysisClient created as client:", client);
// Initialize modals which are shown depending on events or client status
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
const initLoadingDisplay = new CorpusAnalysisDisplay(initLoadingModal);
// Register those display elements to client
client.setDisplay("init", initLoadingDisplay);
/**
* 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 apge are
* shown etc.
* Lastly it also contains the object ResultsList which is a list.js
* subclass which handles the visual reprensetnation of the query data.
*/
let displayOptionsData = ResultsList.getDisplayOptions('display-options-form');
ResultsList.options.page = displayOptionsData["resultsPerPage"];
let resultsList = new ResultsList("result-list", ResultsList.options);
let resultsMetaData = new MetaData();
let results = new Results(new 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
const listenForSession = new SocketEventListener('corpus_analysis_init',
recieveSession);
const listenForQueryStatus = new SocketEventListener('corpus_analysis_query',
recieveQueryStatus);
const listenForQueryData = new SocketEventListener('corpus_analysis_query_results',
recieveQueryData);
client.setSocketEventListeners([listenForSession, listenForQueryStatus,
listenForQueryData]);
client.loadSocketEventListeners();
// Session initialization
client.requestSession();
// Send a query and recieve its answer data
let queryFormElement = document.getElementById("query-form");
queryFormElement.addEventListener("submit", (event) => {
try {
/**
* Selects first page of result list if pagination is already available
* from an query submitted before.
* This avoids confusion for the user e.g.: The user was on page 24
* reviewing the results and issues a new query. He would not see any
* results until the new results reach page 24 or he clicks on another
* valid result page element from the new pagination.
*/
let xpath = '//a[@class="page" and text()=1]';
let firstPageElement = document.evaluate(xpath,
document,
null,
XPathResult.FIRST_ORDERED_NODE_TYPE,
null).singleNodeValue;
firstPageElement.click();
} catch (e) {
}
// Prevent page from reloading on submit
event.preventDefault();
// Get query string and send query to server
results.data.getQueryStr(queryFormElement);
client.requestQueryData(results.data.query);
});
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
const listenForSession = new SocketEventListener('corpus_analysis_init',
recieveSession);
const listenForQueryStatus = new SocketEventListener('corpus_analysis_query',
recieveQueryStatus);
const listenForQueryData = new SocketEventListener('corpus_analysis_query_results',
recieveQueryData);
client.setSocketEventListeners([listenForSession, listenForQueryStatus,
listenForQueryData]);
client.loadSocketEventListeners();
// Session initialization
client.requestSession();
// Send a query and recieve its answer data
let queryFormElement = document.getElementById("query-form");
queryFormElement.addEventListener("submit", (event) => {
try {
/**
* Selects first page of result list if pagination is already available
* from an query submitted before.
* This avoids confusion for the user e.g.: The user was on page 24
* reviewing the results and issues a new query. He would not see any
* results until the new results reach page 24 or he clicks on another
* valid result page element from the new pagination.
*/
let firstPageElement = document.querySelector('a.page');
firstPageElement.click();
} catch (e) {
// No page element is present if first query is submitted.
}
// Prevent page from reloading on submit
event.preventDefault();
// Get query string and send query to server
results.data.getQueryStr(queryFormElement);
client.requestQueryData(results.data.query);
});
});
</script>
{% endblock %}

7
web/app/templates/corpora/corpus.html.j2
View File

@ -107,8 +107,8 @@
</div>
</div>
<script>
<script type="module">
import {RessourceList} from '../../static/js/nopaque.lists.js';
class InformationUpdater {
constructor(corpusId, foreignCorpusFlag) {
this.corpusId = corpusId;
@ -196,7 +196,8 @@
nopaque.socket.emit("foreign_user_data_stream_init", {{ corpus.user_id }});
});
{% endif %}
var corpusFilesList = new RessourceList("corpus-files", null, "CorpusFile");
let corpusFilesList = new RessourceList("corpus-files", null, "CorpusFile");
document.addEventListener("DOMContentLoaded", () => {
corpusFilesList._add({{ corpus_files|tojson|safe }});
});