sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-11-15 01:05:42 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'development' of gitlab.ub.uni-bielefeld.de:sfb1288inf/opaque into development

Browse Source
This commit is contained in:
Patrick Jentsch 2020-04-23 12:40:04 +02:00
commit a4f122bdab
3 changed files with 85 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/static/js/nopaque.CorpusAnalysisClient.js
View File

@ -5,7 +5,7 @@ class CorpusAnalysisClient {
this.displays = {};
this.socket = socket;
// socket on event fpr corpous analysis initialization
// socket on event for corpous analysis initialization
socket.on("corpus_analysis_init", (response) => {
var errorText;
@ -20,7 +20,8 @@ class CorpusAnalysisClient {
} else {
errorText = `Error ${response.code} - ${response.msg}`;
if (this.displays.init.errorContainer != undefined) {
this.displays.init.errorContainer.innerHTML = `<p class="red-text"><i class="material-icons tiny">error</i> ${errorText}</p>`;
this.displays.init.errorContainer.innerHTML = `<p class="red-text">` +
`<i class="material-icons tiny">error</i> ${errorText}</p>`;
}
if (this.displays.init != undefined) {
this.displays.init.setVisibilityByStatus("error");
@ -45,7 +46,8 @@ class CorpusAnalysisClient {
errorText = `Error ${response.payload.code} - ${response.payload.msg}`;
nopaque.flash("error", errorText);
if (this.displays.query.errorContainer != undefined) {
this.displays.query.errorContainer.innerHTML = `<p class="red-text"><i class="material-icons tiny">error</i> ${errorText}</p>`;
this.displays.query.errorContainer.innerHTML = `<p class="red-text">`+
`<i class="material-icons tiny">error</i> ${errorText}</p>`;
}
if (this.displays.query != undefined) {
this.displays.query.setVisibilityByStatus("error");
@ -54,13 +56,18 @@ class CorpusAnalysisClient {
}
});
socket.on("corpus_analysis_query_results", (response) => {
if (this.callbacks.query_results != undefined) {this.callbacks.query_results(response.payload);}
if (this.callbacks.query_results != undefined) {
this.callbacks.query_results(response.payload);
}
});
// TODO: set callback for this
// get context of one match if inspected via socket.io
socket.on("corpus_analysis_inspect_match", (response) => { results.resultsList.showMatchContext(response)});
socket.on("corpus_analysis_inspect_match", (response) => {
if (this.callbacks.query_match_context != undefined) {
this.callbacks.query_match_context(response);
}
});
}
init() {

21
app/static/js/nopaque.lists.js
View File

@ -129,8 +129,11 @@ RessourceList.options = {
class ResultsList extends List {
constructor(idOrElement, options={}) {
super(idOrElement, options);
this.eventTokens = {}; // all span tokens which are holdeing events if expert mode is on
this.currentExpertTokenElements = {};
this.eventTokens = {}; // all span tokens which are holdeing events if expert
// mode is on. Collected here to delete later on
this.currentExpertTokenElements = {}; // all token elements which have added
// classes like chip and hoverable for expert view. Collected
//here to delete later on
}
@ -261,8 +264,8 @@ class ResultsList extends List {
tokenHTMlElement = this.HTMLTStrToElement(htmlTokenStr)
tokenHTMLArray.push(tokenHTMlElement);
}
console.log(tokenHTMLArray);
console.log(uniqueS);
// console.log(tokenHTMLArray);
// console.log(uniqueS);
for (let sId of uniqueS) {
let htmlSentence = `<span class="sentence" data-sid="${sId}"></span>`;
@ -297,7 +300,7 @@ class ResultsList extends List {
};
nrOfContextSentences.onchange = (event) => {
console.log(event.target.value);
// console.log(event.target.value);
this.changeSentenceContext(event.target.value);
}
@ -340,7 +343,7 @@ class ResultsList extends List {
let toHideArray;
let toShowArray;
sValue = maxSValue - sValue;
console.log(sValue);
// console.log(sValue);
sentences = document.getElementById("context-results").getElementsByClassName("sentence");
array = Array.from(sentences);
if (sValue != 0) {
@ -350,9 +353,9 @@ class ResultsList extends List {
toHideArray = [];
toShowArray = array;
}
console.log(array);
console.log("#######");
console.log(toHideArray);
// console.log(array);
// console.log("#######");
// console.log(toHideArray);
for (let s of toHideArray) {
s.classList.add("hide");
}

98
app/templates/corpora/analyse_corpus.html.j2
View File

@ -26,7 +26,8 @@
{{ 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>
<i class="material-icons" style="font-size: inherit;">help
</i>
CQP query language tutorial
</a>
</span>
@ -49,10 +50,12 @@
<form id="display-options-form">
<div class="row">
<div class="col s12 m6">
{{ M.render_field(display_options_form.results_per_page, material_icon='format_list_numbered') }}
{{ M.render_field(display_options_form.results_per_page,
material_icon='format_list_numbered') }}
</div>
<div class="col s12 m6">
{{ M.render_field(display_options_form.result_context, material_icon='short_text') }}
{{ M.render_field(display_options_form.result_context,
material_icon='short_text') }}
</div>
<div class="col s12">
{{ M.render_field(display_options_form.expert_mode) }}
@ -79,11 +82,15 @@
<span id="match-count"></span>
matches loaded.
<br>
Matches occured in <span id="text-lookup-count"></span> corpus files.
Matches occured in
<span id="text-lookup-count"></span>
corpus files.
</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.
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>
<div class="row">
@ -94,7 +101,14 @@
</div>
<div class="col s12 m6 l6">
<div class="row">
<button id="query-results-export" class="waves-effect waves-light btn-small right disabled" type="submit">Export Results<i class="material-icons right">file_download</i></button>
<button id="query-results-export"
class="waves-effect
waves-light
btn-small
right disabled"
type="submit">Export Results
<i class="material-icons right">file_download</i>
</button>
</div>
</div>
<!-- Table showing the query results -->
@ -139,12 +153,15 @@
class="modal modal-fixed-footer no-autoinit">
<div class="modal-content">
<h4>Download current query Results</h4>
<p>The results of the current query can be downlaoded as several files like csv or json. Those files can be used in other software like excel. Also it is easy to publish your results as raw data like this!</p>
<p>The results of the current query can be downloaded as several files like
csv or json. Those files can be used in other software like Excel.
Also it is easy to publish your results as raw data like this!</p>
<table>
<tr>
<td>JSON</td>
<td>
<a class="btn waves-effect waves-light" id="download-results-json">Download
<a class="btn waves-effect waves-light" id="download-results-json">
Download
<i class="material-icons right">file_download</i>
</a>
</td>
@ -152,7 +169,9 @@
<tr>
<td>CSV</td>
<td>
<a class="btn waves-effect waves-light disabled" id="download-results-csv">Download
<a class="btn waves-effect waves-light disabled"
id="download-results-csv">
Download
<i class="material-icons right">file_download</i>
</a>
</td>
@ -186,9 +205,10 @@
<h4>Match Inspect</h4>
<div id="inspect-display-options">
<form>
<div class="row">
<ul class="collection with-header">
<li class="collection-header"><h5>Display options</h5></li>
<li class="collection-header">
<h5>Display options</h5>
</li>
<li class="collection-item">
{{ inspect_display_options_form.expert_mode_inspect.label.text }}
<div class="secondary-content">
@ -231,14 +251,12 @@
</div>
</li>
</ul>
</div>
</form>
</div>
<div>
<div class="col s12" >
<h5>Context</h5>
<div class="row">
<div class="clo s12" id="context-results" style="overflow-wrap: break-word;">
</div>
<div id="context-results" style="hyphens: auto;
overflow: auto;">
</div>
</div>
</div>
@ -259,25 +277,12 @@
// ###### Defining global variables used in other functions ######
var client; // CorpusAnalysisClient first undefined on DOMContentLoaded defined
var collapsibleElements; // All collapsibleElements on this page
var collapsibleElements; // all collapsibles on site
var contextModal; // Modal to open on inspect for further match context
var contextPerItemElement;
var contextSentencesElement;
var displayOptionsData; // Getting form data from display options
var displayOptionsFormElement; // Form holding the display informations
var downloadResultsJSONElement; // button for downloading results as JSON
var expertModeSwitchElement; // Expert mode switch Element
var exportModal; // Download options modal
var firstPageElement; // first page element of resultsList pagination
var hitsPerPageInputElement;
var initDisplay; // CorpusAnalysisDisplay object first undfined on DOMContentLoaded defined
var initDisplayElement; // Element for initialization using initDisplay
var initModal;
var matchCountElement; // Total nr. of matches will be displayed in this element
var paginationElements;
var progress; // global progress value
var queryDisplay; // CorpusAnalysisDisplay object first undfined on DOMContentLoaded defined
var queryDisplayElement; // Element for initialization using queryDisplay
var queryFormElement; // the query form
var queryResultsDeterminateElement; // The progress bar for recieved results
var queryResultsExportElement; // Download button opens download modal
@ -289,7 +294,21 @@
var resultsList; // resultsList object
var resultsListOptions; // specifies ResultsList options
var textLookupCountElement // Nr of texts the matches occured in will be shown in this element
var xpath; // xpath to grab first resultsList page pagination element
// ###### Defining local scope variables ######
let contextPerItemElement; // Form Element for display option
let contextSentencesElement; // Form Element for display option in inspect
let displayOptionsData; // Getting form data from display options
let displayOptionsFormElement; // Form holding the display informations
let downloadResultsJSONElement; // button for downloading results as JSON
let exportModal; // Download options modal
let firstPageElement; // first page element of resultsList pagination
let hitsPerPageInputElement;
let initDisplayElement; // Element for initialization using initDisplay
let initModal;
let paginationElements;
let queryDisplayElement; // Element for initialization using queryDisplay
let xpath; // xpath to grab first resultsList page pagination element
// ###### Initialize variables ######
client = undefined;
@ -312,6 +331,8 @@
queryResultsUserFeedbackElement = document.getElementById("query-results-user-feedback");
receivedMatchCountElement = document.getElementById("received-match-count");
textLookupCountElement = document.getElementById("text-lookup-count");
hitsPerPageInputElement = document.getElementById("display-options-form-results_per_page");
contextPerItemElement = document.getElementById("display-options-form-result_context");
// ###### js list options and intialization ######
displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
@ -360,6 +381,9 @@
client.setCallback("query_results", (payload) => {
queryRenderResults(payload);
});
client.setCallback("query_match_context", (payload) => {
results.resultsList.showMatchContext(payload);
})
// Trigger corpus analysis initialization on server side
client.init();
@ -374,7 +398,11 @@
// valid result page element from the new pagination.
firstPageElement;
xpath = '//a[@class="page" and text()=1]';
firstPageElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
firstPageElement = document.evaluate(xpath,
document,
null,
XPathResult.FIRST_ORDERED_NODE_TYPE,
null).singleNodeValue;
firstPageElement.click();
} catch (e) {
}
@ -386,20 +414,12 @@
});
// live update of hits per page if hits per page value is changed
hitsPerPageInputElement = document.getElementById("display-options-form-results_per_page");
let changeHitsPerPageBind = results.resultsList.changeHitsPerPage.bind(results.resultsList);
hitsPerPageInputElement.onchange = changeHitsPerPageBind;
// live update of lr context per item if context value is changed
contextPerItemElement = document.getElementById("display-options-form-result_context");
contextPerItemElement.onchange = results.resultsList.changeContext;
// live update of context sentences in inspect modal
contextSentencesElement.onchange = (event) => {
let sValue = event.target.value;
console.log(sValue);
}
// eventListener if pagination is used to apply new context size to new page
// and also activate inspect match if progress is 100
for (let element of paginationElements) {