sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-06-13 09:30:40 +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

55
web/app/static/js/modules/nopaque.CorpusAnalysisClient.js
View File

@ -5,12 +5,38 @@
* the server and recieves them.
*/
class CorpusAnalysisClient {
constructor(corpusId, socket, logging=false) {
constructor({corpusId = null,
socket = null,
logging = true,
dynamicMode = true} = {}) {
this.corpusId = corpusId;
this.displays = {};
this.dynamicMode = dynamicMode;
this.logging = logging;
this.requestQueryProgress = 0;
this.results = undefined; // holds the results object later on
this.socket = socket;
this.socketEventListeners = {};
/**
* Set client into imported mode if SOME THIGN IS INDICATING it
*
*/
// Disable all console logging. Credits to https://gist.github.com/kmonsoor/0244fdb4ad79a4826371e58a1a5fa984
if (!logging) {
(() => {
let console = (window.console = window.console || {});
[
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml',
'error', 'exception', 'group', 'groupCollapsed', 'groupEnd',
'info', 'log', 'markTimeline', 'profile', 'profileEnd', 'table',
'time', 'timeEnd', 'timeStamp', 'trace', 'warn'
].forEach(method => {
console[method] = () => {};
});
})();
}
}
// Registers one or more SocketEventListeners to the CorpusAnalysisClient.
@ -31,10 +57,32 @@ class CorpusAnalysisClient {
this.displays[type] = corpusAnalysisDisplay;
}
/**
* Function that takes one or more query selector
* strings in an array as an input. The function then creates a
* class field in the client object with the query selector
* string as the key. The selector will be converted to a valid JavaScript
* Field name i. e. #html-id-string -> this.htmlIdString
* The value will be the identifed element fetched with the querySelector
* method. MutlipleResults and atattchSomeCallback not yet implemented.
*/
getHTMLElements(arrayOfSelectors, multipleResults=false, atattchSomeCallback=false) {
for (let selector of arrayOfSelectors) {
let element = document.querySelector(selector);
let cleanKey = [];
selector.match(/\w+/g).forEach((word) => {
let tmp = word[0].toUpperCase() + word.slice(1);
cleanKey.push(tmp);
});
cleanKey[0] = cleanKey[0].toLowerCase();
cleanKey = cleanKey.join('');
this[cleanKey] = element;
}
}
/**
* Requests a corpus analysis session via socket.io.
* Opens a loading modal at the start of the request
* Should be a private method if ES2020 is finalized (Maybe?)
*/
requestSession() {
console.info('corpus_analysis_init: Client requesting session via',
@ -48,12 +96,11 @@ class CorpusAnalysisClient {
/**
* Sends the query string to the server.
* Should be a private method if ES2020 is finalized (Maybe?)
*/
requestQueryData(queryStr) {
console.info('corpus_analysis_query: Client requesting query data via',
'socket.emit for the query', queryStr);
// TODO: Display stuff
// TODO: Display stuff ?
this.socket.emit('corpus_analysis_query', queryStr);
}
}

130
web/app/static/js/modules/nopaque.listenerCallbacks.js
View File

@ -1,37 +1,68 @@
// This callback is called on socket.on "query".
// Does some hiding, showing disabling etc.
/**
* This call back is called when the SocketEventListener 'recieveQueryStatus'
* has been triggered. It just gets the incoming status data of the issued
* and does some preperation work like hiding or showing elements and deleting
* the date from the last query.
*/
function querySetup(payload, client) {
// deletes old data from query issued before this new query
client.results.clearAll();
// load necessary HTMLElements with selectory syntax and save them as fields
client.getHTMLElements(['#query-progress-bar', '#query-results-user-feedback',
'#recieved-match-count', '#total-match-count',
'#text-lookup-count', '#text-lookup-titles']);
client.requestQueryProgress = 0;
client.recievedMatchCount.textContent = 0;
client.totalMatchCount.textContent = `${payload.match_count}`;
client.queryResultsUserFeedback.classList.toggle('hide');
client.queryProgressBar.classList.toggle('hide');
client.queryProgressBar.lastElementChild.style.width = '0%'
}
/**
* This callback is called when the SocketEventListener 'recieveQueryData'
* has been triggered. It takes the incoming chunk and renders the results in a
* the results.jsList. It can eiterh hande llive incoming data or imported
* the results.jsList. It can either handle live incoming data or imported
* results data.
*/
function queryRenderResults(payload, client, imported=false) {
console.info("Current recieved chunk:", payload.chunk);
if (payload.chunk.cpos_ranges == true) {
client.results.data["cpos_ranges"] = true;
} else {
client.results.data["cpos_ranges"] = false;
function queryRenderResults(payload, client) {
client.getHTMLElements(['#recieved-match-count', '#match-count'])
const renderResults = (data) => {
/**
* resultItem saves the incoming chunk matches as objects to add those later
* to the client.results.jsList
*/
let resultItems = [];
// get infos for full match row
for (let [index, match] of data.matches.entries()) {
resultItems.push({...match, ...{'index': index + client.results.data.matches.length}});
}
client.results.jsList.add(resultItems, (items) => {
for (let item of items) {
item.elm = client.results.jsList.createResultRowElement(item, data);
}
});
}
/**
* resultItem is a list where
*/
let resultItems = [];
// get infos for full match row
for (let [index, match] of payload.chunk.matches.entries()) {
resultItems.push({...match, ...{"index": index + client.results.data.matches.length}});
}
if (!imported) {
// update progress bar
// queryResultsDeterminateElement.style.width = `${payload.progress}%`;
client.results.jsList.add(resultItems, (items) => {
for (let item of items) {
item.elm = client.results.jsList.createResultRowElement(item, payload.chunk);
}
});
if (client.dynamicMode) {
if (payload.chunk.cpos_ranges == true) {
client.results.data['cpos_ranges'] = true;
} else {
client.results.data['cpos_ranges'] = false;
}
renderResults(payload.chunk);
helperQueryRenderResults(payload, client);
// if (progress === 100) {
// resultsCreateElement.classList.remove("disabled");
// queryResultsProgressElement.classList.add("hide");
// queryResultsUserFeedbackElement.classList.add("hide");
console.info('Result progress is:', client.requestQueryProgress);
if (client.requestQueryProgress === 100) {
/**
* activate, hide or show elements if all reults have been recieved
* also load some new elements taht have not ben loaded before
*/
client.getHTMLElements(['#query-results-create']);
client.queryProgressBar.classList.toggle('hide');
client.queryResultsUserFeedback.classList.toggle('hide');
client.queryResultsCreate.classList.toggle('disabled');
// resultsExportElement.classList.remove("disabled");
// addToSubResultsElement.removeAttribute("disabled");
// // inital expert mode check and sub results activation
@ -42,20 +73,18 @@ function queryRenderResults(payload, client, imported=false) {
// if (expertModeSwitchElement.checked) {
// client.results.jsList.expertModeOn("query-display");
// }
// }
} else if (imported) {
client.results.jsList.add(resultItems, (items) => {
for (let item of items) {
item.elm = client.results.jsList.createResultRowElement(item, payload.chunk,
true);
}
helperQueryRenderResults(payload, client);
progress = 100;
client.results.jsList.activateInspect();
if (expertModeSwitchElement.checked) {
client.results.jsList.expertModeOn("query-display");
}
});
}
} else if (!client.dynamicMode) {
client.requestQueryProgress === 100;
client.queryResultsUserFeedback.classList.toggle('hide');
renderResults(payload);
helperQueryRenderResults({'chunk': payload}, client);
client.queryProgressBar.classList.toggle('hide');
client.queryResultsUserFeedback.classList.toggle('hide');
client.results.jsList.activateInspect();
if (expertModeSwitchElement.checked) {
client.results.jsList.expertModeOn("query-display");
}
}
}
@ -65,20 +94,23 @@ function helperQueryRenderResults (payload, client) {
client.results.jsList.changeContext(); // sets lr context on first result load
// incorporating new chunk results into full results
client.results.data.matches.push(...payload.chunk.matches);
client.results.data.addData(payload.chunk.cpos_lookup, "cpos_lookup");
client.results.data.addData(payload.chunk.text_lookup, "text_lookup");
client.results.data.addData(payload.chunk.cpos_lookup, 'cpos_lookup');
client.results.data.addData(payload.chunk.text_lookup, 'text_lookup');
// complete metaData
// client.results.metaData.add();
// show user current and total match count
// receivedMatchCountElement.innerText = `${client.results.data.matches.length}`;
// textLookupCountElement.innerText = `${Object.keys(client.results.data.text_lookup).length}`;
client.recievedMatchCount.textContent = `${client.results.data.matches.length}`;
client.textLookupCount.textContent = `${Object.keys(client.results.data.text_lookup).length}`;
let titles = new Array();
for (let [key, value] of Object.entries(client.results.data.text_lookup)) {
titles.push(`${value.title} (${value.publishing_year})`);
};
// textTitlesElement.innerText = `${titles.join(", ")}`;
// upate progress status
// progress = payload.progress; // global declaration
client.textLookupTitles.textContent = `${titles.join(", ")}`;
// update progress bar and requestQueryProgress
client.queryProgressBar.lastElementChild.style.width = `${payload.progress}%`;
client.requestQueryProgress = payload.progress;
}
export { queryRenderResults }
// TODO: Add data to data objekt using its own socket on event?
export { querySetup, queryRenderResults }

64
web/app/static/js/modules/nopaque.listenerFunctions.js
View File

@ -1,4 +1,4 @@
import {queryRenderResults} from './nopaque.listenerCallbacks.js'
import { querySetup, queryRenderResults } from './nopaque.listenerCallbacks.js'
/**
* Recieves a corpus analysis session via socket.io.
@ -7,13 +7,18 @@ import {queryRenderResults} from './nopaque.listenerCallbacks.js'
*/
function recieveSession(client) {
client.socket.on('corpus_analysis_init', (response) => {
/**
* Check if request for session was ok.
* If OK execute callbacks and hide/show displays.
*/
console.group('recieve session')
console.info('corpus_analysis_init: Client recieving session/or error',
'codes via socket.on');
if (response.code === 200) {
console.info('corpus_analysis_init: Client recieving session/or error',
'codes via socket.on');
console.info(`corpus_analysis_init: ${response.code} - ${response.msg}`);
console.info('corpus_analysis_init: Initialization succeeded');
console.info(response);
console.groupEnd();
// Handling hide/show of displays
if (client.displays.init != undefined) {
client.displays.init.element.M_Modal.close();
client.displays.init.setVisibilityByStatus('success');
@ -29,6 +34,7 @@ function recieveSession(client) {
}
console.error(`corpus_analysis_init: ${errorText}`);
}
console.groupEnd();
});
}
@ -40,10 +46,36 @@ function recieveSession(client) {
*/
function recieveQueryStatus(client) {
client.socket.on('corpus_analysis_query', (response) => {
/**
* Check if issued query was ok.
* If OK execute callbacks and hide/show displays.
*/
console.group('corpus_analysis_query: Client recieving query process',
'status via socket.on');
client.results.clearAll();
console.info(response);
'status via socket.on');
if (response.code === 200) {
console.info(`corpus_analysis_query: ${response.code} - ${response.msg}`);
console.info(response);
// Handling hide/show of displays
if (client.displays.query != undefined) {
client.displays.query.setVisibilityByStatus("success");
}
// executing the callbacks
querySetup(response.payload, client);
} else {
let errorText = `Error ${response.payload.code} - ${response.payload.msg}`;
if (response.payload.code == 1281) {
errorText += ' - Invalid Query';
}
nopaque.flash(errorText, "error");
if (client.displays.query.errorContainer != undefined) {
client.displays.query.errorContainer.innerHTML = `<p class="red-text">`+
`<i class="material-icons tiny">error</i> ${errorText}</p>`;
}
if (client.displays.query != undefined) {
client.displays.query.setVisibilityByStatus("error");
}
console.error(`corpus_analysis_query: ${errorText}`);
}
console.groupEnd();
});
}
@ -52,15 +84,21 @@ function recieveQueryStatus(client) {
* Recieves the query data from the request and handles it.
*/
function recieveQueryData(client) {
client.socket.on('corpus_analysis_query_results', (response) => {
console.group('corpus_analysis_query_results: Client recieving query',
'data via socket.on');
console.group('corpus_analysis_query_results: Client recieving or loading',
'query data.');
if (client.dynamicMode) {
console.info('Client recieving query data via socket.on');
client.socket.on('corpus_analysis_query_results', (response) => {
console.info('Recieved chunk', response);
queryRenderResults(response.payload, client);
console.info('Added chunk data to results.data and rendered it with',
'results.jsList')
console.groupEnd();
});
'results.jsList');
});
} else {
console.info('Client loading imported query data from database.');
queryRenderResults(client.results.data, client);
}
console.groupEnd();
}
// export listeners from this module

16
web/app/static/js/nopaque.Results.js
View File

@ -23,12 +23,12 @@ class Data {
// Sets empty object structure. Also usefull to delete old results.
// matchCount default is 0
init(matchCount = 0, type = "results") {
this["matches"] = []; // list of all c with lc and rc
this["cpos_lookup"] = {}; // object contains all this key value pair
this["text_lookup"] = {}; // same as above for all text ids
this["match_count"] = matchCount;
this["corpus_type"] = "results";
this["query"] = "";
this.matches = []; // list of all c with lc and rc
this.cpos_lookup = {}; // object contains all this key value pair
this.text_lookup = {}; // same as above for all text ids
this.match_count = matchCount;
this.corpus_type = 'results';
this.query = '';
}
addData(jsonData, key=null) {
@ -45,7 +45,7 @@ class Data {
let queryFormData;
let queryStr;
queryFormData = new FormData(queryFormElement);
queryStr = queryFormData.get("query-form-query");
queryStr = queryFormData.get('query-form-query');
this["query"] = queryStr;
}
@ -72,7 +72,7 @@ class Data {
// Function to download data as Blob created from string
// should be private but that is not yet a feature of javascript 08.04.2020
download(downloadElement, dataStr, filename, type, filenameSlug) {
console.log("Start Download!");
console.log('Start Download!');
let file;
filename += filenameSlug;
file = new Blob([dataStr], {type: type});

83
web/app/static/js/web-components/InfoMenu.js Normal file
View File

@ -0,0 +1,83 @@
/**
* HTML for showing infos about the current query or result. Also gives
* the user the abiltiy to access the meta data for the current query or
* result.
*/
const template = document.createElement('template');
template.innerHTML = `
<link rel="stylesheet" href="../../static/fonts/Material_design_icons/material-icons.css">
<link rel="stylesheet" href="../../static/css/Materialize/materialize.min.css">
<link rel="stylesheet" href="../../static/css/nopaque.css">
<div class="col">
<h6 style="margin-top: 0px;">Infos</h6>
<div class="divider" style="margin-bottom: 10px;"></div>
<div class="row">
<div class="col s12">
<button id="show-metadata"
class="waves-effect
waves-light
btn-flat
flat-interaction"
type="submit">Corpus Metadata
<i class="material-icons left">info_outline</i>
</button>
</div>
<div class="col s12">
<p>
<slot name="received-match-count">
0
</slot> of
<slot name="match-count">(to be determined)</slot>
matches loaded.
<br>
Matches occured in
<slot name="text-lookup-count">(to be determined)</slot>
corpus files:
<br>
<slot name=text-titles>(to be determined)</slot>
</p>
<p id="query-results-user-feedback">
<i class="material-icons">help</i>
The Server is still sending your results.
Functions like "Export Results" and "Match Inspect" will be
available after all matches have been loaded.
</p>
<div class="progress" id="query-progress-bar">
<div class="determinate"></div>
</div>
</div>
</div>
</div>
`;
class InfoMenu extends HTMLElement {
constructor() {
super();
this.appendChild(template.content.cloneNode(true));
this.attachShadow({ mode: 'open' });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
// methods that will be used in connectedCallback on eventListeners
showMetadata() {
console.log('Show metadata somehow');
}
connectedCallback() {
const showMetadataBtn = this.querySelector('#show-metadata');
showMetadataBtn.addEventListener('click', () => this.showMetadata());
}
disconnectedCallback() {
const showMetadataBtn = this.querySelector('#show-metadata');
showMetadataBtn.removeEventListener();
}
}
window.customElements.define('info-menu', InfoMenu);
export { InfoMenu };