mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 01:05:42 +00:00
Query Builder implementation
This commit is contained in:
Inga Kirschnick
parent
20b1a96862
commit
0009a0bacf
@ -12,6 +12,7 @@ class ConcordanceQueryBuilder {
|
||||
concordanceQueryBuilderButton: document.querySelector('#concordance-query-builder-button'),
|
||||
closeQueryBuilder: document.querySelector('#close-query-builder'),
|
||||
queryBuilderTutorialModal: document.querySelector('#query-builder-tutorial-modal'),
|
||||
valueValidator: true,
|
||||
|
||||
//#region QueryBuilder Elements
|
||||
|
||||
@ -206,7 +207,6 @@ class ConcordanceQueryBuilder {
|
||||
}
|
||||
|
||||
buttonfactory(dataType, prettyText, queryText) {
|
||||
|
||||
window.location.href = '#query-container';
|
||||
this.elements.counter += 1;
|
||||
queryText = encodeURI(queryText);
|
||||
@ -226,7 +226,6 @@ class ConcordanceQueryBuilder {
|
||||
} else if (this.elements.yourQuery.lastChild.dataset.type === 'text-annotation') {
|
||||
this.elements.yourQuery.insertBefore(buttonElement, this.elements.yourQuery.lastChild);
|
||||
}
|
||||
|
||||
this.elements.queryContainer.classList.remove('hide');
|
||||
this.queryPreviewBuilder();
|
||||
|
||||
@ -252,25 +251,30 @@ class ConcordanceQueryBuilder {
|
||||
|
||||
//#region Drag&Drop Events
|
||||
dragStartHandler(event) {
|
||||
// Creates element with the class 'target' and all necessary drop functions, in which drop content can be released
|
||||
this.elements.dropButton = event.target;
|
||||
let targetChip = `
|
||||
<div class='chip target' ondragover='concordanceQueryBuilder.dragOverHandler(event)' ondragenter='concordanceQueryBuilder.dragEnterHandler(event)' ondragleave='concordanceQueryBuilder.dragLeaveHandler(event)' ondrop='concordanceQueryBuilder.dropHandler(event)'>
|
||||
Drop here
|
||||
</div>
|
||||
`.trim();
|
||||
// selects all nodes without target class
|
||||
let childNodes = this.elements.yourQuery.querySelectorAll('div:not(.target)');
|
||||
|
||||
// Adds a target chip in front of all draggable childnodes
|
||||
setTimeout(() => {
|
||||
for (let element of childNodes) {
|
||||
if (element === event.target) {
|
||||
continue;
|
||||
} else if (element === event.target.nextSibling) {
|
||||
if (element === this.elements.dropButton) {
|
||||
// If the dragged element is not at the very end, a target chip is also inserted at the end
|
||||
if (childNodes[childNodes.length - 1] !== element) {
|
||||
childNodes[childNodes.length - 1].insertAdjacentHTML('afterend', targetChip);
|
||||
}
|
||||
} else if (element === this.elements.dropButton.nextSibling) {
|
||||
continue;
|
||||
} else {
|
||||
element.insertAdjacentHTML('beforebegin', targetChip)
|
||||
}
|
||||
}
|
||||
childNodes[childNodes.length-1].insertAdjacentHTML('afterend', targetChip);
|
||||
},0);
|
||||
}
|
||||
|
||||
@ -297,18 +301,6 @@ class ConcordanceQueryBuilder {
|
||||
|
||||
dropHandler(event) {
|
||||
let dropzone = event.target;
|
||||
|
||||
for (let i = 0; i < dropzone.parentElement.childNodes.length; i++) {
|
||||
if (dropzone === dropzone.parentElement.childNodes[i]) {
|
||||
nodeIndex = i;
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < dropzone.parentElement.childNodes.length; i++) {
|
||||
if (this.elements.dropButton === dropzone.parentElement.childNodes[i]) {
|
||||
draggedElementIndex = i;
|
||||
}
|
||||
}
|
||||
|
||||
dropzone.parentElement.replaceChild(this.elements.dropButton, dropzone);
|
||||
this.queryPreviewBuilder();
|
||||
}
|
||||
@ -316,7 +308,6 @@ class ConcordanceQueryBuilder {
|
||||
|
||||
queryPreviewBuilder() {
|
||||
this.elements.yourQueryContent = [];
|
||||
|
||||
for (let element of this.elements.yourQuery.childNodes) {
|
||||
let queryElement = decodeURI(element.dataset.query);
|
||||
if (queryElement.includes('<')) {
|
||||
@ -349,7 +340,8 @@ class ConcordanceQueryBuilder {
|
||||
|
||||
insertQuery() {
|
||||
this.elements.yourQueryContent = [];
|
||||
|
||||
this.validateValue();
|
||||
if (this.elements.valueValidator === true) {
|
||||
for (let element of this.elements.yourQuery.childNodes) {
|
||||
let queryElement = decodeURI(element.dataset.query);
|
||||
if (queryElement !== 'undefined') {
|
||||
@ -363,6 +355,34 @@ class ConcordanceQueryBuilder {
|
||||
this.elements.concordanceQueryBuilder.classList.add('modal-close');
|
||||
this.elements.extFormQuery.value = queryString;
|
||||
}
|
||||
}
|
||||
|
||||
validateValue() {
|
||||
this.elements.valueValidator = true;
|
||||
let sentenceCounter = 0;
|
||||
let sentenceEndCounter = 0;
|
||||
let entityCounter = 0;
|
||||
let entityEndCounter = 0;
|
||||
for (let element of this.elements.yourQuery.childNodes) {
|
||||
if (element.dataset.type === 'start-sentence') {
|
||||
sentenceCounter += 1;
|
||||
}else if (element.dataset.type === 'end-sentence') {
|
||||
sentenceEndCounter += 1;
|
||||
}else if (element.dataset.type === 'start-entity' || element.dataset.type === 'start-empty-entity') {
|
||||
entityCounter += 1;
|
||||
}else if (element.dataset.type === 'end-entity') {
|
||||
entityEndCounter += 1;
|
||||
}
|
||||
}
|
||||
if (sentenceCounter !== sentenceEndCounter) {
|
||||
app.flash('Please add a closing sentence tag', 'error');
|
||||
this.elements.valueValidator = false;
|
||||
}
|
||||
if (entityCounter !== entityEndCounter) {
|
||||
app.flash('Please add a closing entity tag', 'error');
|
||||
this.elements.valueValidator = false;
|
||||
}
|
||||
}
|
||||
|
||||
clearAll() {
|
||||
// Everything is reset. After 5 seconds for 5 seconds (with 'instance'), a message is displayed indicating that further information can be obtained via the question mark icon
|
||||
@ -506,7 +526,7 @@ class ConcordanceQueryBuilder {
|
||||
this.disableTokenSubmit();
|
||||
} else {
|
||||
tokenQueryContent += `word=${this.elements.wordInput.value}${c}`;
|
||||
tokenQueryText += `word='${this.elements.wordInput.value}'${c}`;
|
||||
tokenQueryText += `word="${this.elements.wordInput.value}"${c}`;
|
||||
this.elements.wordInput.value = '';
|
||||
}
|
||||
break;
|
||||
@ -515,7 +535,7 @@ class ConcordanceQueryBuilder {
|
||||
this.disableTokenSubmit();
|
||||
} else {
|
||||
tokenQueryContent += `lemma=${this.elements.lemmaInput.value}${c}`;
|
||||
tokenQueryText += `lemma='${this.elements.lemmaInput.value}'${c}`;
|
||||
tokenQueryText += `lemma="${this.elements.lemmaInput.value}"${c}`;
|
||||
this.elements.lemmaInput.value = '';
|
||||
}
|
||||
break;
|
||||
@ -524,7 +544,7 @@ class ConcordanceQueryBuilder {
|
||||
this.disableTokenSubmit();
|
||||
} else {
|
||||
tokenQueryContent += `pos=${this.elements.englishPos.value}`;
|
||||
tokenQueryText += `pos='${this.elements.englishPos.value}'`;
|
||||
tokenQueryText += `pos="${this.elements.englishPos.value}"`;
|
||||
this.elements.englishPos.value = '';
|
||||
}
|
||||
break;
|
||||
@ -533,7 +553,7 @@ class ConcordanceQueryBuilder {
|
||||
this.disableTokenSubmit();
|
||||
} else {
|
||||
tokenQueryContent += `pos=${this.elements.germanPos.value}`;
|
||||
tokenQueryText += `pos='${this.elements.germanPos.value}'`;
|
||||
tokenQueryText += `pos="${this.elements.germanPos.value}"`;
|
||||
this.elements.germanPos.value = '';
|
||||
}
|
||||
break;
|
||||
@ -542,7 +562,7 @@ class ConcordanceQueryBuilder {
|
||||
this.disableTokenSubmit();
|
||||
} else {
|
||||
tokenQueryContent += `simple_pos=${this.elements.simplePos.value}`;
|
||||
tokenQueryText += `simple_pos='${this.elements.simplePos.value}'`;
|
||||
tokenQueryText += `simple_pos="${this.elements.simplePos.value}"`;
|
||||
this.elements.simplePos.value = '';
|
||||
}
|
||||
break;
|
||||
@ -686,21 +706,21 @@ class ConcordanceQueryBuilder {
|
||||
break;
|
||||
case 'english-pos':
|
||||
this.elements.tokenQueryFilled = true;
|
||||
this.tokenButtonfactory(`pos=${this.elements.englishPos.value}`, `pos='${this.elements.englishPos.value}'`);
|
||||
this.tokenButtonfactory(`pos=${this.elements.englishPos.value}`, `pos="${this.elements.englishPos.value}"`);
|
||||
this.tokenButtonfactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}');
|
||||
this.elements.englishPosBuilder.classList.add('hide');
|
||||
this.elements.incidenceModifiersButton.classList.add('hide');
|
||||
break;
|
||||
case 'german-pos':
|
||||
this.elements.tokenQueryFilled = true;
|
||||
this.tokenButtonfactory(`pos=${this.elements.germanPos.value}`, `pos='${this.elements.germanPos.value}'`);
|
||||
this.tokenButtonfactory(`pos=${this.elements.germanPos.value}`, `pos="${this.elements.germanPos.value}"`);
|
||||
this.tokenButtonfactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}');
|
||||
this.elements.germanPosBuilder.classList.add('hide');
|
||||
this.elements.incidenceModifiersButton.classList.add('hide');
|
||||
break;
|
||||
case 'simple-pos-button':
|
||||
this.elements.tokenQueryFilled = true;
|
||||
this.tokenButtonfactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos='${this.elements.simplePos.value}'`);
|
||||
this.tokenButtonfactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos="${this.elements.simplePos.value}"`);
|
||||
this.tokenButtonfactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}');
|
||||
this.elements.simplePosBuilder.classList.add('hide');
|
||||
this.elements.incidenceModifiersButton.classList.add('hide');
|
||||
@ -727,21 +747,21 @@ class ConcordanceQueryBuilder {
|
||||
break;
|
||||
case 'english-pos':
|
||||
this.elements.tokenQueryFilled = true;
|
||||
this.tokenButtonfactory(`pos=${this.elements.englishPos.value}`, `pos='${this.elements.englishPos.value}'`);
|
||||
this.tokenButtonfactory(`pos=${this.elements.englishPos.value}`, `pos="${this.elements.englishPos.value}"`);
|
||||
this.tokenButtonfactory(`{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`, `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`);
|
||||
this.elements.englishPosBuilder.classList.add('hide');
|
||||
this.elements.incidenceModifiersButton.classList.add('hide');
|
||||
break;
|
||||
case 'german-pos':
|
||||
this.elements.tokenQueryFilled = true;
|
||||
this.tokenButtonfactory(`pos=${this.elements.germanPos.value}`, `pos='${this.elements.germanPos.value}'`);
|
||||
this.tokenButtonfactory(`pos=${this.elements.germanPos.value}`, `pos="${this.elements.germanPos.value}"`);
|
||||
this.tokenButtonfactory(`{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`, `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`);
|
||||
this.elements.germanPosBuilder.classList.add('hide');
|
||||
this.elements.incidenceModifiersButton.classList.add('hide');
|
||||
break;
|
||||
case 'simple-pos-button':
|
||||
this.elements.tokenQueryFilled = true;
|
||||
this.tokenButtonfactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos='${this.elements.simplePos.value}'`);
|
||||
this.tokenButtonfactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos="${this.elements.simplePos.value}"`);
|
||||
this.tokenButtonfactory(`{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`, `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`);
|
||||
this.elements.simplePosBuilder.classList.add('hide');
|
||||
this.elements.incidenceModifiersButton.classList.add('hide');
|
||||
@ -759,19 +779,19 @@ class ConcordanceQueryBuilder {
|
||||
if (this.elements.positionalAttr.value === 'empty-token') {
|
||||
this.tokenButtonfactory(elem.innerText, elem.dataset.token);
|
||||
} else if (this.elements.positionalAttr.value === 'english-pos') {
|
||||
this.tokenButtonfactory(`pos=${this.elements.englishPos.value}`, `pos='${this.elements.englishPos.value}'`);
|
||||
this.tokenButtonfactory(`pos=${this.elements.englishPos.value}`, `pos="${this.elements.englishPos.value}"`);
|
||||
this.tokenButtonfactory(elem.innerText, elem.dataset.token);
|
||||
this.elements.englishPosBuilder.classList.add('hide');
|
||||
this.elements.incidenceModifiersButton.classList.add('hide');
|
||||
this.elements.tokenQueryFilled = true;
|
||||
} else if (this.elements.positionalAttr.value === 'german-pos') {
|
||||
this.tokenButtonfactory(`pos=${this.elements.germanPos.value}`, `pos='${this.elements.germanPos.value}'`);
|
||||
this.tokenButtonfactory(`pos=${this.elements.germanPos.value}`, `pos="${this.elements.germanPos.value}"`);
|
||||
this.tokenButtonfactory(elem.innerText, elem.dataset.token);
|
||||
this.elements.germanPosBuilder.classList.add('hide');
|
||||
this.elements.incidenceModifiersButton.classList.add('hide');
|
||||
this.elements.tokenQueryFilled = true;
|
||||
} else if (this.elements.positionalAttr.value === 'simple-pos-button') {
|
||||
this.tokenButtonfactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos='${this.elements.simplePos.value}'`);
|
||||
this.tokenButtonfactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos="${this.elements.simplePos.value}"`);
|
||||
this.tokenButtonfactory(elem.innerText, elem.dataset.token);
|
||||
this.elements.simplePosBuilder.classList.add('hide');
|
||||
this.elements.incidenceModifiersButton.classList.add('hide');
|
||||
@ -813,27 +833,27 @@ class ConcordanceQueryBuilder {
|
||||
switch (this.elements.positionalAttr.value) {
|
||||
case 'word':
|
||||
tokenQueryContent = `word=${this.elements.wordInput.value}${c}`;
|
||||
tokenQueryText = `word='${this.elements.wordInput.value}'${c}`;
|
||||
tokenQueryText = `word="${this.elements.wordInput.value}"${c}`;
|
||||
this.elements.wordInput.value = '';
|
||||
break;
|
||||
case 'lemma':
|
||||
tokenQueryContent = `lemma=${this.elements.lemmaInput.value}${c}`;
|
||||
tokenQueryText = `word='${this.elements.lemmaInput.value}'${c}`;
|
||||
tokenQueryText = `lemma="${this.elements.lemmaInput.value}"${c}`;
|
||||
this.elements.lemmaInput.value = '';
|
||||
break;
|
||||
case 'english-pos':
|
||||
tokenQueryContent = `pos=${this.elements.englishPos.value}`;
|
||||
tokenQueryText = `pos='${this.elements.englishPos.value}'`;
|
||||
tokenQueryText = `pos="${this.elements.englishPos.value}"`;
|
||||
this.elements.englishPos.value = '';
|
||||
break;
|
||||
case 'german-pos':
|
||||
tokenQueryContent = `pos=${this.elements.germanPos.value}`;
|
||||
tokenQueryText = `pos='${this.elements.germanPos.value}'`;
|
||||
tokenQueryText = `pos="${this.elements.germanPos.value}"`;
|
||||
this.elements.germanPos.value = '';
|
||||
break;
|
||||
case 'simple-pos-button':
|
||||
tokenQueryContent = `simple_pos=${this.elements.simplePos.value}`;
|
||||
tokenQueryText = `simple_pos='${this.elements.simplePos.value}'`;
|
||||
tokenQueryText = `simple_pos="${this.elements.simplePos.value}"`;
|
||||
this.elements.simplePos.value = '';
|
||||
break;
|
||||
default:
|
||||
@ -888,7 +908,7 @@ class ConcordanceQueryBuilder {
|
||||
}
|
||||
|
||||
englishEntTypeHandler() {
|
||||
this.buttonfactory('start-entity', 'Entity Type=' + this.elements.englishEntType.value, '<ent_type="" + this.elements.englishEntType.value + "">');
|
||||
this.buttonfactory('start-entity', 'Entity Type=' + this.elements.englishEntType.value, '<ent_type="' + this.elements.englishEntType.value + '">');
|
||||
this.elements.entity.innerHTML = 'End Entity';
|
||||
this.hideEverything();
|
||||
this.elements.entityAnyType = false;
|
||||
@ -900,7 +920,7 @@ class ConcordanceQueryBuilder {
|
||||
}
|
||||
|
||||
germanEntTypeHandler() {
|
||||
this.buttonfactory('start-entity', 'Entity Type=' + this.elements.germanEntType.value, '<ent_type="" + this.elements.germanEntType.value + "">');
|
||||
this.buttonfactory('start-entity', 'Entity Type=' + this.elements.germanEntType.value, '<ent_type="' + this.elements.germanEntType.value + '">');
|
||||
this.elements.entity.innerHTML = 'End Entity';
|
||||
this.hideEverything();
|
||||
this.elements.entityAnyType = false;
|
||||
|
||||
@ -64,7 +64,7 @@
|
||||
</div>
|
||||
<div class="col s12 m3 l3 right-align">
|
||||
<p class="hide-on-small-only"> </p>
|
||||
<a class="btn disabled waves-effect waves-light">
|
||||
<a class="btn waves-effect waves-light modal-trigger" href="#concordance-query-builder" id="concordance-query-builder-button">
|
||||
<i class="material-icons left">build</i>
|
||||
Query builder
|
||||
</a>
|
||||
|
||||
@ -248,6 +248,361 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" id="concordance-query-builder">
|
||||
<div class="modal-content">
|
||||
<div>
|
||||
<nav>
|
||||
<div class="nav-wrapper" id="query-builder-nav">
|
||||
<a href="#!" class="brand-logo"><i class="material-icons">build</i>Query Builder</a>
|
||||
<i class="material-icons close right" id="close-query-builder">close</i>
|
||||
<a class="modal-trigger" href="#query-builder-tutorial-modal" >
|
||||
<i class="material-icons right tooltipped" id="query-builder-tutorial-info-icon" data-position="bottom" data-tooltip="Click here if you are unsure how to use the Query Builder <br>and want to find out what other options it offers.">help</i>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<p></p>
|
||||
|
||||
<div id="query-container" class="hide">
|
||||
|
||||
<div class="row">
|
||||
<h6 class="col s2">Your Query:
|
||||
<a class="modal-trigger" href="#query-builder-tutorial-modal">
|
||||
<i class="material-icons left" id="general-options-query-builder-tutorial-info-icon">help_outline</i></a>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s10 tooltipped" id="your-query" data-position="bottom" data-tooltip="You can edit your query by deleting individual elements or moving them via drag and drop."></div>
|
||||
<a class="btn-small waves-effect waves-teal col s1" id="insert-query-button">
|
||||
<i class="material-icons">send</i>
|
||||
</a>
|
||||
</div>
|
||||
<p><i> Preview:</i></p>
|
||||
<p id="query-preview"></p>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
<h6>Use the following options to build your query. If you need help, click on the question mark in the upper right corner!</h6>
|
||||
<p></p>
|
||||
<a class="btn-large waves-effect waves-light tooltipped" id="positional-attr-button" data-position="bottom" data-tooltip="Search for any token, for example a word, a lemma or a part-of-speech tag">Add new token to your query</a>
|
||||
<a class="btn-large waves-effect waves-light tooltipped" id="structural-attr-button" data-position="bottom" data-tooltip="Structure your query with structural attributes, for example sentences, entities or annotate the text">Add structural attributes to your query</a>
|
||||
|
||||
<div id="structural-attr" class="hide">
|
||||
<p></p>
|
||||
<h6>Which structural attribute do you want to add to your query?<a class="modal-trigger" href="#query-builder-tutorial-modal"><i class="material-icons left" id="add-structural-attribute-tutorial-info-icon">help_outline</i></a></h6>
|
||||
<p></p>
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<a class="btn-small waves-effect waves-light" id="sentence">sentence</a>
|
||||
<a class="btn-small waves-effect waves-light" id="entity">entity</a>
|
||||
<a class="btn-small waves-effect waves-light" id="text-annotation">Meta Data</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="entity-builder" class="hide">
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="row">
|
||||
<a class="btn waves-effect waves-light col s4" id="empty-entity">Add Entity of any type</a>
|
||||
<p class="col s1 l1"></p>
|
||||
<div class= "input-field col s3">
|
||||
<select name="englishenttype" id="english-ent-type">
|
||||
<option value="" disabled selected>English ent_type</option>
|
||||
<option value="CARDINAL">CARDINAL</option>
|
||||
<option value="DATE">DATE</option>
|
||||
<option value="EVENT">EVENT</option>
|
||||
<option value="FAC">FAC</option>
|
||||
<option value="GPE">GPE</option>
|
||||
<option value="LANGUAGE">LANGUAGE</option>
|
||||
<option value="LAW">LAW</option>
|
||||
<option value="LOC">LOC</option>
|
||||
<option value="MONEY">MONEY</option>
|
||||
<option value="NORP">NORP</option>
|
||||
<option value="ORDINAL">ORDINAL</option>
|
||||
<option value="ORG">ORG</option>
|
||||
<option value="PERCENT">PERCENT</option>
|
||||
<option value="PERSON">PERSON</option>
|
||||
<option value="PRODUCT">PRODUCT</option>
|
||||
<option value="QUANTITY">QUANTITY</option>
|
||||
<option value="TIME">TIME</option>
|
||||
<option value="WORK_OF_ART">WORK_OF_ART</option>
|
||||
</select>
|
||||
<label>Entity Type</label>
|
||||
</div>
|
||||
<div class= "input-field col s3">
|
||||
<select name="germanenttype" id="german-ent-type">
|
||||
<option value="" disabled selected>German ent_type</option>
|
||||
<option value="LOC">LOC</option>
|
||||
<option value="MISC">MISC</option>
|
||||
<option value="ORG">ORG</option>
|
||||
<option value="PER">PER</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="text-annotation-builder" class="hide">
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class= "input-field col s4 l3">
|
||||
<select name="text-annotation-options" id="text-annotation-options">
|
||||
<option class="btn-small waves-effect waves-light" value="address">address</option>
|
||||
<option class="btn-small waves-effect waves-light" value="author">author</option>
|
||||
<option class="btn-small waves-effect waves-light" value="booktitle">booktitle</option>
|
||||
<option class="btn-small waves-effect waves-light" value="chapter">chapter</option>
|
||||
<option class="btn-small waves-effect waves-light" value="editor">editor</option>
|
||||
<option class="btn-small waves-effect waves-light" value="institution">institution</option>
|
||||
<option class="btn-small waves-effect waves-light" value="journal">journal</option>
|
||||
<option class="btn-small waves-effect waves-light" value="pages">pages</option>
|
||||
<option class="btn-small waves-effect waves-light" value="publisher">publisher</option>
|
||||
<option class="btn-small waves-effect waves-light" value="publishing_year">publishing year</option>
|
||||
<option class="btn-small waves-effect waves-light" value="school">school</option>
|
||||
<option class="btn-small waves-effect waves-light" value="title">title</option>
|
||||
</select>
|
||||
<label>Meta data</label>
|
||||
</div>
|
||||
<div class= "input-field col s7 l5">
|
||||
<i class="material-icons prefix">mode_edit</i>
|
||||
<input placeholder="Type in your text annotation" type="text" id="text-annotation-input">
|
||||
</div>
|
||||
<div class="col s1 l1 center-align">
|
||||
<p class="btn-floating waves-effect waves-light" id="text-annotation-submit">
|
||||
<i class="material-icons right">send</i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="hide" id="no-value-metadata-message"><i>No value entered!</i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="positional-attr" class="hide">
|
||||
<p></p>
|
||||
<div class="row" id="token-kind-selector">
|
||||
<div class="col s5">
|
||||
<h6>Which kind of token are you looking for? <a class="modal-trigger" href="#query-builder-tutorial-modal"><i class="material-icons left" id="token-tutorial-info-icon">help_outline</i></a></h6>
|
||||
</div>
|
||||
<div class="input-field col s3">
|
||||
<select id="token-attr">
|
||||
<option value="word" selected>word</option>
|
||||
<option value="lemma">lemma</option>
|
||||
<option value="english-pos">english pos</option>
|
||||
<option value="german-pos">german pos</option>
|
||||
<option value="simple-pos-button">simple_pos</option>
|
||||
<option value="empty-token">empty token</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<p></p>
|
||||
<div id="token-builder-content">
|
||||
<div class="row" >
|
||||
<div id="token-query"></div>
|
||||
|
||||
<div id="word-builder">
|
||||
<div class= "input-field col s3 l4">
|
||||
<i class="material-icons prefix">mode_edit</i>
|
||||
<input placeholder="Type in your word" type="text" id="word-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="lemma-builder" class="hide" >
|
||||
<div class= "input-field col s3 l4">
|
||||
<i class="material-icons prefix">mode_edit</i>
|
||||
<input placeholder="Type in your lemma" type="text" id="lemma-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="english-pos-builder" class="hide">
|
||||
<div class="col s6 m4 l4">
|
||||
<div class="row">
|
||||
<div class= "input-field col s12">
|
||||
<select name="englishpos" id="english-pos">
|
||||
<option value="default" disabled selected>English pos tagset</option>
|
||||
<option value="ADD">email</option>
|
||||
<option value="AFX">affix</option>
|
||||
<option value="CC">conjunction, coordinating</option>
|
||||
<option value="CD">cardinal number</option>
|
||||
<option value="DT">determiner</option>
|
||||
<option value="EX">existential there</option>
|
||||
<option value="FW">foreign word</option>
|
||||
<option value="HYPH">punctuation mark, hyphen</option>
|
||||
<option value="IN">conjunction, subordinating or preposition</option>
|
||||
<option value="JJ">adjective</option>
|
||||
<option value="JJR">adjective, comparative</option>
|
||||
<option value="JJS">adjective, superlative</option>
|
||||
</select>
|
||||
<label>Part-of-speech tags</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="german-pos-builder" class="hide">
|
||||
<div class="col s6 m4 l4">
|
||||
<div class="row">
|
||||
<div class= "input-field col s12">
|
||||
<select name="germanpos" id="german-pos">
|
||||
<option value="default" disabled selected>German pos tagset</option>
|
||||
<option value="ADJA">adjective, attributive</option>
|
||||
<option value="ADJD">adjective, adverbial or predicative</option>
|
||||
<option value="ADV">adverb</option>
|
||||
<option value="APPO">postposition</option>
|
||||
<option value="APPR">preposition; circumposition left</option>
|
||||
<option value="APPRART">preposition with article</option>
|
||||
<option value="APZR">circumposition right</option>
|
||||
<option value="ART">definite or indefinite article</option>
|
||||
</select>
|
||||
<label>Part-of-speech tags</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="simplepos-builder" class="hide">
|
||||
<div class="col s6 m4 l4">
|
||||
<div class="row">
|
||||
<div class= "input-field col s12">
|
||||
<select name="simplepos" id="simple-pos">
|
||||
<option value="default" disabled selected>simple_pos tagset</option>
|
||||
<option value="ADJ">adjective</option>
|
||||
<option value="ADP">adposition</option>
|
||||
<option value="ADV">adverb</option>
|
||||
<option value="AUX">auxiliary verb</option>
|
||||
<option value="CONJ">coordinating conjunction</option>
|
||||
<option value="DET">determiner</option>
|
||||
<option value="INTJ">interjection</option>
|
||||
<option value="NOUN">noun</option>
|
||||
<option value="NUM">numeral</option>
|
||||
<option value="PART">particle</option>
|
||||
<option value="PRON">pronoun</option>
|
||||
<option value="PROPN">proper noun</option>
|
||||
<option value="PUNCT">punctuation</option>
|
||||
<option value="SCONJ">subordinating conjunction</option>
|
||||
<option value="SYM">symbol</option>
|
||||
<option value="VERB">verb</option>
|
||||
<option value="X">other</option>
|
||||
</select>
|
||||
<label>Simple part-of-speech tags</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s1 l1 center-align">
|
||||
<p class="btn-floating waves-effect waves-light" id="token-submit">
|
||||
<i class="material-icons right">send</i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="hide" id="no-value-message"><i>No value entered!</i></div>
|
||||
</div>
|
||||
<div id="token-edit-options">
|
||||
<div class="row">
|
||||
<h6>Options to edit your token: <a class="modal-trigger" href="#query-builder-tutorial-modal"><i class="material-icons left" id="edit-options-tutorial-info-icon">help_outline</i></a></h6>
|
||||
</div>
|
||||
<p></p>
|
||||
<div class="row">
|
||||
<div id="input-options" class="col s5 m5 l5 xl4">
|
||||
<a id="wildcard-char" class="btn-small waves-effect waves-light tooltipped" data-position="top" data-tooltip="Look for a variable character (also called wildcard character)">Wildcard character</a>
|
||||
<a id="option-group" class="btn-small waves-effect waves-light tooltipped" data-position="top" data-tooltip="Find character sequences from a list of options">Option Group</a>
|
||||
</div>
|
||||
<div class="col s3 m3 l3 xl3" id="incidence-modifiers-button">
|
||||
<a class="dropdown-trigger btn-small waves-effect waves-light" href="#" data-target="incidence-modifiers" data-position="top" data-tooltip="Incidence Modifiers are special characters or patterns, <br>which determine how often a character represented previously should occur.">incidence modifiers</a>
|
||||
</div>
|
||||
|
||||
<ul id="incidence-modifiers" class="dropdown-content">
|
||||
<li><a id="one-or-more" data-token="+" class="tooltipped" data-position ="top" data-tooltip="...occurrences of the character/token before">one or more (+)</a></li>
|
||||
<li><a id="zero-or-more" data-token="*" class="tooltipped" data-position ="top" data-tooltip="...occurrences of the character/token before">zero or more (*)</a></li>
|
||||
<li><a id="zero-or-one" data-token="?" class="tooltipped" data-position ="top" data-tooltip="...occurrences of the character/token before">zero or one (?)</a></li>
|
||||
<li><a id="exactly-n" class="modal-trigger tooltipped" href="#exactlyN" data-token="{n}" class="" data-position ="top" data-tooltip="...occurrences of the character/token before">exactly n ({n})</a></li>
|
||||
<li><a id="between-n-m" class="modal-trigger tooltipped" href="#betweenNM" data-token="{n,m}" class="" data-position ="top" data-tooltip="...occurrences of the character/token before">between n and m ({n,m})</a></li>
|
||||
</ul>
|
||||
|
||||
<div id="ignore-case-checkbox" class="col s2 m2 l2 xl2">
|
||||
<p id="ignore-case">
|
||||
<label>
|
||||
<input type="checkbox" class="filled-in" />
|
||||
<span>Ignore Case</span>
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col s2 m2 l2 xl2" id="condition-container">
|
||||
<a class="btn-small tooltipped waves-effect waves-light" id="or" data-position="bottom" data-tooltip="You can add another condition to your token. <br>At least one must be fulfilled">or</a>
|
||||
<a class="btn-small tooltipped waves-effect waves-light" id="and" data-position="bottom" data-tooltip="You can add another condition to your token. <br>Both must be fulfilled">and</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="exactlyN" class="modal">
|
||||
<div class="row modal-content">
|
||||
<div class="input-field col s10">
|
||||
<i class="material-icons prefix">mode_edit</i>
|
||||
<input placeholder="type in a number for 'n'" type="text" id="n-input">
|
||||
</div>
|
||||
<div class="col s2">
|
||||
<p class="btn-floating waves-effect waves-light" id="n-submit">
|
||||
<i class="material-icons right">send</i>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="betweenNM" class="modal">
|
||||
<div class="row modal-content">
|
||||
<div class= "input-field col s5">
|
||||
<i class="material-icons prefix">mode_edit</i>
|
||||
<input placeholder="number for 'n'" type="text" id="n-m-input">
|
||||
</div>
|
||||
<div class= "input-field col s5">
|
||||
<i class="material-icons prefix">mode_edit</i>
|
||||
<input placeholder="number for 'm'" type="text" id="m-input">
|
||||
</div>
|
||||
<div class="col s2">
|
||||
<p class="btn-floating waves-effect waves-light" id="n-m-submit">
|
||||
<i class="material-icons right">send</i>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal modal-fixed-footer" id="query-builder-tutorial-modal">
|
||||
<div class="modal-content" >
|
||||
<div id="query-builder-tutorial-start"></div>
|
||||
<ul class="tabs">
|
||||
<li class="tab"><a class="active" href="#query-builder-tutorial">Query Builder Tutorial</a></li>
|
||||
{# <li class="tab"><a href="#qb-examples">Examples</a></li> #}
|
||||
<li class="tab"><a href="#cql-cb-tutorial">Corpus Query Language Tutorial</a></li>
|
||||
<li class="tab"><a href="#tagsets-cb-tutorial">Tagsets</a></li>
|
||||
</ul>
|
||||
|
||||
<div id="query-builder-tutorial">
|
||||
{% include "main/manual/_09_query_builder.html.j2" %}
|
||||
</div>
|
||||
{# <div id="qb-examples"></div> #}
|
||||
<div id ="cql-cb-tutorial">
|
||||
{% with headline_num=4 %}
|
||||
{% include "main/manual/_08_cqp_query_language.html.j2" %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
<div id="tagsets-cb-tutorial">
|
||||
<h4>Tagsets</h4>
|
||||
{% include "main/manual/_10_tagsets.html.j2" %}
|
||||
</div>
|
||||
<div class="fixed-action-btn">
|
||||
<a class="btn-floating btn-large teal" id="scroll-up-button-query-builder-tutorial" href='#query-builder-tutorial-start'>
|
||||
<i class="large material-icons">arrow_upward</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock modals %}
|
||||
|
||||
{% block scripts %}
|
||||
@ -256,6 +611,7 @@
|
||||
const corpusAnalysisApp = new CorpusAnalysisApp({{ corpus.hashid|tojson }});
|
||||
const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp);
|
||||
const corpusAnalysisReader = new CorpusAnalysisReader(corpusAnalysisApp);
|
||||
const concordanceQueryBuilder = new ConcordanceQueryBuilder();
|
||||
|
||||
corpusAnalysisApp.init();
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user