Skip to content
Snippets Groups Projects
Commit dabeb818 authored by Stephan Porada's avatar Stephan Porada :speech_balloon:
Browse files

New project structure

parent 21ce07f3
Branches
Tags
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 1064 additions and 975 deletions
web/app/static/js/modules/nopaque.CorpusAnalysisClient.js → web/app/static/js/modules/corpus_analysis/client/Client.js
+ 26
− 19
View file @ dabeb818
/** /**
* This class is used to create a CorpusAnalysisClient object. * This class is used to create a Client object.
* The client handels the client server communication. * The client handels the client server communication.
* It requests data (e.g. the analysis session or query results) from the * It requests data (e.g. the analysis session or query results) from the
* the server and recieves them, if it dynamicMode is true. * the server and recieves them, if it dynamicMode is true.
* If dynamicMode is false, the client can also handle data that is already * If dynamicMode is false, the client can also handle data that is already
* loaded and not coming in in chunks. * loaded and not coming in in chunks.
*/ */
class CorpusAnalysisClient { class Client {
constructor({corpusId = null, constructor({corpusId = null,
socket = null, socket = null,
logging = true, logging = true,
...@@ -39,7 +39,7 @@ class CorpusAnalysisClient { ...@@ -39,7 +39,7 @@ class CorpusAnalysisClient {
} }
} }
// Registers one or more SocketEventListeners to the CorpusAnalysisClient. // Registers one or more SocketEventListeners to the Client.
setSocketEventListeners(socketEventListeners) { setSocketEventListeners(socketEventListeners) {
for (let socketEventListener of socketEventListeners) { for (let socketEventListener of socketEventListeners) {
this.socketEventListeners[socketEventListener.type] = socketEventListener; this.socketEventListeners[socketEventListener.type] = socketEventListener;
...@@ -56,7 +56,15 @@ class CorpusAnalysisClient { ...@@ -56,7 +56,15 @@ class CorpusAnalysisClient {
} }
} }
// Registers a CorpusAnalysisDisplay object to the CorpusAnalysisClient.
// TODO: get rid of this disply stuff and send commands to the viewer
// on what to do/show/hide etc
notifyView(SendWhatToDo) {
}
// Registers a CorpusAnalysisDisplay object to the Client.
setDisplay(type, corpusAnalysisDisplay) { setDisplay(type, corpusAnalysisDisplay) {
this.displays[type] = corpusAnalysisDisplay; this.displays[type] = corpusAnalysisDisplay;
} }
...@@ -87,27 +95,26 @@ class CorpusAnalysisClient { ...@@ -87,27 +95,26 @@ class CorpusAnalysisClient {
} }
/** /**
* Requests a corpus analysis session via socket.io. * Connects to the corpus analysis session for the specified corpus via
* Opens a loading modal at the start of the request. * socket.io.
* Will be closed if session has been successfully recieved.
*/ */
requestSession() { connect() {
console.info('corpus_analysis_init: Client requesting session via', console.info('corpus_analysis_init: Client connecting to session via',
'socket.emit'); 'socket.emit');
if (this.displays.init != undefined) { // if (this.displays.init != undefined) {
this.displays.init.element.M_Modal.open(); // this.displays.init.element.M_Modal.open();
this.displays.init.setVisibilityByStatus('waiting'); // this.displays.init.setVisibilityByStatus('waiting');
} // }
this.socket.emit('corpus_analysis_init', this.corpusId); this.socket.emit('corpus_analysis_init', this.corpusId);
} }
/** /**
* Request query data for the query string that has been sent to the server. * Emits query to the server via socket.io. Server will send the results
* back.
*/ */
requestQueryData(queryStr) { query(queryStr) {
console.info('corpus_analysis_query: Client requesting query data via', console.info('corpus_analysis_query: Client sending query via',
'socket.emit for the query', queryStr); 'socket.emit for the query', queryStr);
// TODO: Display stuff ?
this.socket.emit('corpus_analysis_query', queryStr); this.socket.emit('corpus_analysis_query', queryStr);
} }
} }
...@@ -236,8 +243,8 @@ class ListenerCallback { ...@@ -236,8 +243,8 @@ class ListenerCallback {
// export Classes from this module // export Classes from this module
export { export {
CorpusAnalysisClient, Client,
CorpusAnalysisDisplay,
SocketEventListener, SocketEventListener,
CorpusAnalysisDisplay,
ListenerCallback, ListenerCallback,
}; };
\ No newline at end of file
web/app/static/js/modules/corpus_analysis/main.js 0 → 100644
+ 0
− 0
View file @ dabeb818
web/app/static/js/nopaque.Results.js → web/app/static/js/modules/corpus_analysis/model/Results.js
+ 6
− 0
View file @ dabeb818
/**
* These classes are implementing the data store of the corpus_analysis
* package. If we follow the idea of the Model View Controller Pattern these
* classes combined in the Results class define the Model.
*/
class Results { class Results {
constructor(data, jsList , metaData) { constructor(data, jsList , metaData) {
this.data = data; this.data = data;
......
web/app/static/js/modules/corpus_analysis/view/ResultsView.js 0 → 100644
+ 790
− 0
View file @ dabeb818
This diff is collapsed.
web/app/static/js/modules/corpus_analysis/view/displays.js 0 → 100644
+ 0
− 0
View file @ dabeb818
web/app/static/js/modules/nopaque.scrollToTop.js → web/app/static/js/modules/corpus_analysis/view/scrollToTop.js
+ 2
− 2
View file @ dabeb818
/** /**
* Function to show a scrol lto top button if the user has scrolled down * Function to show a scroll to top button if the user has scrolled down
* 250 pixels from teh headline element. * 250 pixels from the headline element.
*/ */
function scrollToTop() { function scrollToTop() {
let headline = document.querySelector(".headline"); let headline = document.querySelector(".headline");
......
web/app/static/js/nopaque.lists.js
+ 1
− 786
View file @ dabeb818
This diff is collapsed.
web/app/templates/corpora/analyse_corpus.html.j2
+ 2
− 168
View file @ dabeb818
...@@ -65,173 +65,7 @@ ...@@ -65,173 +65,7 @@
{% include 'modals/export_query_results.html.j2' %} {% include 'modals/export_query_results.html.j2' %}
{% include 'modals/context_modal.html.j2' %} {% include 'modals/context_modal.html.j2' %}
<!-- import modules --> <script type="text/javascript"
<script type="module"> src="web/app/static/js/modules/corpus_analysis/main.js">
/**
* First Phase:
* 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 {
InteractionElement,
InteractionElements,
} from '../../static/js/modules/nopaque.InteractionElement.js';
/**
* Second Phase:
* Asynchronus and event driven code
*/
document.addEventListener("DOMContentLoaded", () => {
// Initialize the CorpusAnalysisClient dynamic mode
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 are shown 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);
/**
* 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.
*/
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);
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();
// 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);
// Add scrollToTop functionality
scrollToTop();
});
});
</script> </script>
{% endblock %} {% endblock %}
web/app/templates/corpora/analyse_corpus.html.j2.new.bak 0 → 100644
+ 237
− 0
View file @ dabeb818
{% extends "nopaque.html.j2" %}
{% set headline = ' ' %}
{% set full_width = True %}
{% set imported = False %}
{% block page_content %}
<div class="col s12">
<div class="card">
<div class="card-content" style="padding-top: 5px;
padding-bottom: 0px;">
<!-- Query form -->
<div class="row">
<form id="query-form">
<div class="col s12 m10">
<div class="input-field">
<i class="material-icons prefix">search</i>
{{ query_form.query() }}
{{ query_form.query.label }}
<span class="helper-text">
<a href="http://cwb.sourceforge.net/files/CQP_Tutorial/">
<i class="material-icons" style="font-size: inherit;">help
</i>
CQP query language tutorial
</a>
</span>
</div>
</div>
<div class="col s12 m2 right-align">
<br class="hide-on-small-only">
{{ M.render_field(query_form.submit, material_icon='send') }}
</div>
</form>
</div>
</div>
</div>
</div>
<!-- entire results div/card -->
<div class="col s12" id="query-display">
<div class="card">
<div class="card-content" id="result-list" style="overflow: hidden;">
<div class="error-container hide show-on-error"></div>
<div class=" row hide show-on-success">
{% include 'interactions/infos.html.j2' %}
{% include 'interactions/export.html.j2' %}
{% include 'interactions/create.html.j2' %}
{% include 'interactions/display.html.j2' %}
{% include 'interactions/analysis.html.j2' %}
{% include 'interactions/cite.html.j2' %}
</div>
{% include 'tables/query_results.html.j2' %}
</div>
</div>
</div>
<!-- Scroll to top element -->
{% include 'interactions/scroll_to_top.html.j2' %}
<!-- Modals -->
{% include 'modals/show_metadata.html.j2' %}
{% include 'modals/show_text_details.html.j2' %}
{% include 'modals/analysis_init.html.j2' %}
{% include 'modals/export_query_results.html.j2' %}
{% include 'modals/context_modal.html.j2' %}
<!-- import modules -->
<script type="module">
/**
* First Phase:
* 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 {
InteractionElement,
InteractionElements,
} from '../../static/js/modules/nopaque.InteractionElement.js';
/**
* Second Phase:
* Asynchronus and event driven code
*/
document.addEventListener("DOMContentLoaded", () => {
// Initialize the CorpusAnalysisClient dynamic mode
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 are shown 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);
/**
* 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.
*/
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);
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();
// 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);
// Add scrollToTop functionality
scrollToTop();
});
});
</script>
{% endblock %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment