mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 01:05:42 +00:00
New context options
This commit is contained in:
Stephan Porada
parent
34e8d952b6
commit
9031ca5845
@ -93,7 +93,7 @@ def corpus_analysis_inspect_match(payload):
|
||||
try:
|
||||
corpus = client.corpora.get('CORPUS')
|
||||
s = corpus.structural_attributes.get('s')
|
||||
payload = s.export(payload['first_cpos'], payload['last_cpos'], context=3)
|
||||
payload = s.export(payload['first_cpos'], payload['last_cpos'], context=10)
|
||||
payload['cpos_ranges'] = True
|
||||
except cqi.errors.CQiException as e:
|
||||
payload = {'code': e.code, 'desc': e.description, 'msg': e.name}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
from flask_wtf import FlaskForm
|
||||
from wtforms import (BooleanField, FileField, StringField, SubmitField,
|
||||
ValidationError, IntegerField, SelectField)
|
||||
from wtforms.validators import DataRequired, Length
|
||||
from wtforms.validators import DataRequired, Length, NumberRange
|
||||
|
||||
|
||||
class AddCorpusFileForm(FlaskForm):
|
||||
@ -88,18 +88,8 @@ class DisplayOptionsForm(FlaskForm):
|
||||
class InspectDisplayOptionsForm(FlaskForm):
|
||||
expert_mode_inspect = BooleanField('Expert mode')
|
||||
highlight_sentences = BooleanField('Highlight sentences')
|
||||
context_sentences = SelectField('Context sentences',
|
||||
choices=[('', 'Choose your option'),
|
||||
('1', '1'),
|
||||
('2', '2'),
|
||||
('3', '3'),
|
||||
('4', '4'),
|
||||
('5', '5'),
|
||||
('6', '6'),
|
||||
('7', '7'),
|
||||
('8', '8'),
|
||||
('9', '9'),
|
||||
('10', '10')],
|
||||
context_sentences = IntegerField('Context sentences',
|
||||
validators=[NumberRange(min=0, max=10)],
|
||||
default=3)
|
||||
|
||||
|
||||
|
||||
@ -177,62 +177,111 @@ class ResultsList extends List {
|
||||
);
|
||||
}
|
||||
|
||||
HTMLTStroElement(htmlStr) {
|
||||
// https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro/35385518#35385518
|
||||
let template = document.createElement("template");
|
||||
htmlStr = htmlStr.trim();
|
||||
template.innerHTML = htmlStr;
|
||||
return template.content.firstChild;
|
||||
}
|
||||
|
||||
showMatchContext(response) {
|
||||
this.contextData;
|
||||
let c;
|
||||
let contextData;
|
||||
let contextModalLoading;
|
||||
let contextModalReady;
|
||||
let contextResultsElement;
|
||||
let expertModeSwitchElement;
|
||||
let lc;
|
||||
let modalTokenElements;
|
||||
let partElement;
|
||||
let rc;
|
||||
let token;
|
||||
let tokenElement;
|
||||
let tokenElements;
|
||||
contextData = response.payload;
|
||||
let tokenHTMLArray;
|
||||
let uniqueS;
|
||||
let htmlTokenStr;
|
||||
let tokenHTMlElement;
|
||||
|
||||
this.contextData = response.payload;
|
||||
contextResultsElement = document.getElementById("context-results");
|
||||
expertModeSwitchElement = document.getElementById("display-options-form-expert_mode");
|
||||
uniqueS = new Set();
|
||||
// check if cpos ranges are used or not
|
||||
if (contextData.cpos_ranges == true) {
|
||||
if (this.contextData.cpos_ranges == true) {
|
||||
// python range like function from MDN
|
||||
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Sequence_generator_(range)
|
||||
const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));
|
||||
lc = range(contextData.match.lc[0], contextData.match.lc[1], 1)
|
||||
c = range(contextData.match.c[0], contextData.match.c[1], 1)
|
||||
rc = range(contextData.match.rc[0], contextData.match.rc[1], 1)
|
||||
lc = range(this.contextData.match.lc[0], this.contextData.match.lc[1], 1)
|
||||
c = range(this.contextData.match.c[0], this.contextData.match.c[1], 1)
|
||||
rc = range(this.contextData.match.rc[0], this.contextData.match.rc[1], 1)
|
||||
} else {
|
||||
lc = contextData.match.lc;
|
||||
c = contextData.match.c;
|
||||
rc = contextData.match.rc;
|
||||
lc = this.contextData.match.lc;
|
||||
c = this.contextData.match.c;
|
||||
rc = this.contextData.match.rc;
|
||||
}
|
||||
// create sentence strings as tokens
|
||||
partElement = document.createElement("p");
|
||||
tokenHTMLArray = [];
|
||||
for (let cpos of lc) {
|
||||
token = contextData.cpos_lookup[cpos];
|
||||
partElement.insertAdjacentHTML("beforeend",
|
||||
`<span class="token" data-cpos="${cpos}">${token.word} </span>`);
|
||||
contextResultsElement.append(partElement);
|
||||
token = this.contextData.cpos_lookup[cpos];
|
||||
uniqueS.add(token.s)
|
||||
htmlTokenStr = `<span class="token"` +
|
||||
`data-sid="${token.s}"` +
|
||||
`data-cpos="${cpos}">` +
|
||||
`${token.word}` +
|
||||
`</span>`;
|
||||
tokenHTMlElement = this.HTMLTStroElement(htmlTokenStr)
|
||||
tokenHTMLArray.push(tokenHTMlElement);
|
||||
}
|
||||
for (let cpos of c) {
|
||||
token = contextData.cpos_lookup[cpos];
|
||||
partElement.insertAdjacentHTML("beforeend",
|
||||
`<span class="token bold light-green" data-cpos="${cpos}"` +
|
||||
`style="text-decoration-line: underline;">${token.word} </span>`);
|
||||
contextResultsElement.append(partElement);
|
||||
token = this.contextData.cpos_lookup[cpos];
|
||||
uniqueS.add(token.s)
|
||||
htmlTokenStr = `<span class="token bold light-green"` +
|
||||
`data-sid="${token.s}"` +
|
||||
`data-cpos="${cpos}"` +
|
||||
`style="text-decoration-line: underline;">` +
|
||||
`${token.word}` +
|
||||
`</span>`;
|
||||
tokenHTMlElement = this.HTMLTStroElement(htmlTokenStr)
|
||||
tokenHTMLArray.push(tokenHTMlElement);
|
||||
}
|
||||
for (let cpos of rc) {
|
||||
token = contextData.cpos_lookup[cpos];
|
||||
partElement.insertAdjacentHTML("beforeend",
|
||||
`<span class="token" data-cpos="${cpos}">${token.word} </span>`);
|
||||
contextResultsElement.append(partElement);
|
||||
token = this.contextData.cpos_lookup[cpos];
|
||||
uniqueS.add(token.s)
|
||||
htmlTokenStr = `<span class="token"` +
|
||||
`data-sid="${token.s}"` +
|
||||
`data-cpos="${cpos}">` +
|
||||
`${token.word}` +
|
||||
`</span>`;
|
||||
tokenHTMlElement = this.HTMLTStroElement(htmlTokenStr)
|
||||
tokenHTMLArray.push(tokenHTMlElement);
|
||||
}
|
||||
console.log(tokenHTMLArray);
|
||||
console.log(uniqueS);
|
||||
|
||||
partElement = document.createElement("p");
|
||||
for (let sId of uniqueS) {
|
||||
let htmlSentence = `<div class="sentence s12" data-sid="${sId}">`;
|
||||
let sentenceElement = this.HTMLTStroElement(htmlSentence);
|
||||
for (let tokenElement of tokenHTMLArray) {
|
||||
if (tokenElement.dataset.sid == sId) {
|
||||
sentenceElement.appendChild(tokenElement);
|
||||
sentenceElement.insertAdjacentHTML("beforeend", `<span> </span>`);
|
||||
} else {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
partElement.appendChild(sentenceElement);
|
||||
}
|
||||
contextResultsElement.appendChild(partElement);
|
||||
|
||||
if (expertModeSwitchElement.checked) {
|
||||
tokenElements = partElement.getElementsByClassName("token");
|
||||
this.expertModeOn();
|
||||
}
|
||||
}
|
||||
|
||||
changeSentenceContext(sValue) {
|
||||
}
|
||||
|
||||
// ###### Display options changing live how the matches are being displayed ######
|
||||
|
||||
// Event function that changes the shown hits per page.
|
||||
@ -309,6 +358,9 @@ class ResultsList extends List {
|
||||
// console.log("Create Tooltip on mouseover.");
|
||||
let token;
|
||||
token = results.resultsJSON.cpos_lookup[event.target.dataset.cpos];
|
||||
if (!token) {
|
||||
token = this.contextData.cpos_lookup[event.target.dataset.cpos];
|
||||
}
|
||||
this.addToolTipToTokenElement(event.target, token);
|
||||
}
|
||||
|
||||
@ -321,7 +373,6 @@ class ResultsList extends List {
|
||||
|
||||
expertModeOn() {
|
||||
// console.log("Expert mode is on.");
|
||||
let token;
|
||||
this.currentExpertTokenElements = document.getElementsByClassName("token");
|
||||
this.tooltipEventCreateBind = this.tooltipEventCreate.bind(this);
|
||||
this.tooltipEventDestroyBind = this.tooltipEventDestroy.bind(this);
|
||||
|
||||
@ -201,10 +201,11 @@
|
||||
<h4>Match context</h4>
|
||||
<div class="divider"></div>
|
||||
<div class="section" id="inspect-display-options">
|
||||
<form>
|
||||
<h5>Display options</h5>
|
||||
<div class="row">
|
||||
<div class="col s9">
|
||||
<p>Expert Mode</p>
|
||||
<p>{{ inspect_display_options_form.expert_mode_inspect.label.text }}</p>
|
||||
</div>
|
||||
<div class="col s3 right-align">
|
||||
<div class="switch">
|
||||
@ -215,7 +216,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s9">
|
||||
<p>Highlight sentences</p>
|
||||
<p>{{ inspect_display_options_form.highlight_sentences.label.text }}</p>
|
||||
</div>
|
||||
<div class="col s3 right-align">
|
||||
<div class="switch">
|
||||
@ -225,14 +226,21 @@
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s12 m6">
|
||||
<div class="col s6">
|
||||
<p>Nr. of sentences around the match</p>
|
||||
</div>
|
||||
<div class="col s6 right-align">
|
||||
<div class="input-field">
|
||||
<i class="material-icons prefix">format_list_numbered</i>
|
||||
{{ inspect_display_options_form.context_sentences() }}
|
||||
{{ inspect_display_options_form.context_sentences.label }}
|
||||
<p class="range-field">
|
||||
<input type="range" id="context-sentences"
|
||||
min="1"
|
||||
max="10"
|
||||
value="3" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="section" id="context-results">
|
||||
@ -257,16 +265,20 @@
|
||||
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
|
||||
@ -282,20 +294,19 @@
|
||||
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
|
||||
var hitsPerPageInputElement;
|
||||
var paginationElements;
|
||||
var contextPerItemElement;
|
||||
|
||||
// ###### Initialize variables ######
|
||||
client = undefined;
|
||||
collapsibleElements = document.querySelector('.collapsible.expandable');
|
||||
contextModal = document.getElementById("context-modal");
|
||||
contextSentencesElement = document.getElementById("context-sentences");
|
||||
displayOptionsFormElement = document.getElementById("display-options-form");
|
||||
expertModeSwitchElement = document.getElementById("display-options-form-expert_mode");
|
||||
exportModal = document.getElementById("query-results-download-modal");
|
||||
initDisplay = undefined;
|
||||
initDisplayElement = document.getElementById("init-display");
|
||||
matchCountElement = document.getElementById("match-count");
|
||||
paginationElements = document.getElementsByClassName("pagination");
|
||||
queryDisplay = undefined;
|
||||
queryDisplayElement = document.getElementById("query-display");
|
||||
queryFormElement = document.getElementById("query-form");
|
||||
@ -305,7 +316,6 @@
|
||||
queryResultsUserFeedbackElement = document.getElementById("query-results-user-feedback");
|
||||
receivedMatchCountElement = document.getElementById("received-match-count");
|
||||
textLookupCountElement = document.getElementById("text-lookup-count");
|
||||
paginationElements = document.getElementsByClassName("pagination");
|
||||
|
||||
// ###### js list options and intialization ######
|
||||
displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
|
||||
@ -388,6 +398,12 @@
|
||||
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) {
|
||||
@ -395,10 +411,6 @@
|
||||
element.addEventListener("click", results.resultsList.activateInspect);
|
||||
}
|
||||
|
||||
// epxert mode table view
|
||||
// TODO: Redo this
|
||||
// - This replicates itself on expertModeSwitchElement use
|
||||
// - Replication should be fixed
|
||||
expertModeSwitchElement.addEventListener("change", (event) => {
|
||||
if (event.target.checked) {
|
||||
results.resultsList.expertModeOn();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user