Skip to content
Snippets Groups Projects
Commit 0009a0ba authored by Inga Kirschnick's avatar Inga Kirschnick
Browse files

Query Builder implementation

parent 20b1a968
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/static/js/CorpusAnalysis/QueryBuilder.js
+ 70
− 50
View file @ 0009a0ba
...@@ -12,6 +12,7 @@ class ConcordanceQueryBuilder { ...@@ -12,6 +12,7 @@ class ConcordanceQueryBuilder {
concordanceQueryBuilderButton: document.querySelector('#concordance-query-builder-button'), concordanceQueryBuilderButton: document.querySelector('#concordance-query-builder-button'),
closeQueryBuilder: document.querySelector('#close-query-builder'), closeQueryBuilder: document.querySelector('#close-query-builder'),
queryBuilderTutorialModal: document.querySelector('#query-builder-tutorial-modal'), queryBuilderTutorialModal: document.querySelector('#query-builder-tutorial-modal'),
valueValidator: true,
//#region QueryBuilder Elements //#region QueryBuilder Elements
...@@ -206,7 +207,6 @@ class ConcordanceQueryBuilder { ...@@ -206,7 +207,6 @@ class ConcordanceQueryBuilder {
} }
buttonfactory(dataType, prettyText, queryText) { buttonfactory(dataType, prettyText, queryText) {
window.location.href = '#query-container'; window.location.href = '#query-container';
this.elements.counter += 1; this.elements.counter += 1;
queryText = encodeURI(queryText); queryText = encodeURI(queryText);
...@@ -226,7 +226,6 @@ class ConcordanceQueryBuilder { ...@@ -226,7 +226,6 @@ class ConcordanceQueryBuilder {
} else if (this.elements.yourQuery.lastChild.dataset.type === 'text-annotation') { } else if (this.elements.yourQuery.lastChild.dataset.type === 'text-annotation') {
this.elements.yourQuery.insertBefore(buttonElement, this.elements.yourQuery.lastChild); this.elements.yourQuery.insertBefore(buttonElement, this.elements.yourQuery.lastChild);
} }
this.elements.queryContainer.classList.remove('hide'); this.elements.queryContainer.classList.remove('hide');
this.queryPreviewBuilder(); this.queryPreviewBuilder();
...@@ -252,25 +251,30 @@ class ConcordanceQueryBuilder { ...@@ -252,25 +251,30 @@ class ConcordanceQueryBuilder {
//#region Drag&Drop Events //#region Drag&Drop Events
dragStartHandler(event) { 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; this.elements.dropButton = event.target;
let targetChip = ` let targetChip = `
<div class='chip target' ondragover='concordanceQueryBuilder.dragOverHandler(event)' ondragenter='concordanceQueryBuilder.dragEnterHandler(event)' ondragleave='concordanceQueryBuilder.dragLeaveHandler(event)' ondrop='concordanceQueryBuilder.dropHandler(event)'> <div class='chip target' ondragover='concordanceQueryBuilder.dragOverHandler(event)' ondragenter='concordanceQueryBuilder.dragEnterHandler(event)' ondragleave='concordanceQueryBuilder.dragLeaveHandler(event)' ondrop='concordanceQueryBuilder.dropHandler(event)'>
Drop here Drop here
</div> </div>
`.trim(); `.trim();
// selects all nodes without target class
let childNodes = this.elements.yourQuery.querySelectorAll('div:not(.target)'); let childNodes = this.elements.yourQuery.querySelectorAll('div:not(.target)');
// Adds a target chip in front of all draggable childnodes
setTimeout(() => { setTimeout(() => {
for (let element of childNodes) { for (let element of childNodes) {
if (element === event.target) { if (element === this.elements.dropButton) {
continue; // If the dragged element is not at the very end, a target chip is also inserted at the end
} else if (element === event.target.nextSibling) { if (childNodes[childNodes.length - 1] !== element) {
childNodes[childNodes.length - 1].insertAdjacentHTML('afterend', targetChip);
}
} else if (element === this.elements.dropButton.nextSibling) {
continue; continue;
} else { } else {
element.insertAdjacentHTML('beforebegin', targetChip) element.insertAdjacentHTML('beforebegin', targetChip)
} }
} }
childNodes[childNodes.length-1].insertAdjacentHTML('afterend', targetChip);
},0); },0);
} }
...@@ -297,18 +301,6 @@ class ConcordanceQueryBuilder { ...@@ -297,18 +301,6 @@ class ConcordanceQueryBuilder {
dropHandler(event) { dropHandler(event) {
let dropzone = event.target; 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); dropzone.parentElement.replaceChild(this.elements.dropButton, dropzone);
this.queryPreviewBuilder(); this.queryPreviewBuilder();
} }
...@@ -316,7 +308,6 @@ class ConcordanceQueryBuilder { ...@@ -316,7 +308,6 @@ class ConcordanceQueryBuilder {
queryPreviewBuilder() { queryPreviewBuilder() {
this.elements.yourQueryContent = []; this.elements.yourQueryContent = [];
for (let element of this.elements.yourQuery.childNodes) { for (let element of this.elements.yourQuery.childNodes) {
let queryElement = decodeURI(element.dataset.query); let queryElement = decodeURI(element.dataset.query);
if (queryElement.includes('<')) { if (queryElement.includes('<')) {
...@@ -349,19 +340,48 @@ class ConcordanceQueryBuilder { ...@@ -349,19 +340,48 @@ class ConcordanceQueryBuilder {
insertQuery() { insertQuery() {
this.elements.yourQueryContent = []; 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') {
this.elements.yourQueryContent.push(queryElement);
}
}
let queryString = this.elements.yourQueryContent.join(' ');
queryString += ';';
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) { for (let element of this.elements.yourQuery.childNodes) {
let queryElement = decodeURI(element.dataset.query); if (element.dataset.type === 'start-sentence') {
if (queryElement !== 'undefined') { sentenceCounter += 1;
this.elements.yourQueryContent.push(queryElement); }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) {
let queryString = this.elements.yourQueryContent.join(' '); app.flash('Please add a closing sentence tag', 'error');
queryString += ';'; this.elements.valueValidator = false;
}
this.elements.concordanceQueryBuilder.classList.add('modal-close'); if (entityCounter !== entityEndCounter) {
this.elements.extFormQuery.value = queryString; app.flash('Please add a closing entity tag', 'error');
this.elements.valueValidator = false;
}
} }
clearAll() { clearAll() {
...@@ -506,7 +526,7 @@ class ConcordanceQueryBuilder { ...@@ -506,7 +526,7 @@ class ConcordanceQueryBuilder {
this.disableTokenSubmit(); this.disableTokenSubmit();
} else { } else {
tokenQueryContent += `word=${this.elements.wordInput.value}${c}`; 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 = ''; this.elements.wordInput.value = '';
} }
break; break;
...@@ -515,7 +535,7 @@ class ConcordanceQueryBuilder { ...@@ -515,7 +535,7 @@ class ConcordanceQueryBuilder {
this.disableTokenSubmit(); this.disableTokenSubmit();
} else { } else {
tokenQueryContent += `lemma=${this.elements.lemmaInput.value}${c}`; 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 = ''; this.elements.lemmaInput.value = '';
} }
break; break;
...@@ -524,7 +544,7 @@ class ConcordanceQueryBuilder { ...@@ -524,7 +544,7 @@ class ConcordanceQueryBuilder {
this.disableTokenSubmit(); this.disableTokenSubmit();
} else { } else {
tokenQueryContent += `pos=${this.elements.englishPos.value}`; tokenQueryContent += `pos=${this.elements.englishPos.value}`;
tokenQueryText += `pos='${this.elements.englishPos.value}'`; tokenQueryText += `pos="${this.elements.englishPos.value}"`;
this.elements.englishPos.value = ''; this.elements.englishPos.value = '';
} }
break; break;
...@@ -533,7 +553,7 @@ class ConcordanceQueryBuilder { ...@@ -533,7 +553,7 @@ class ConcordanceQueryBuilder {
this.disableTokenSubmit(); this.disableTokenSubmit();
} else { } else {
tokenQueryContent += `pos=${this.elements.germanPos.value}`; tokenQueryContent += `pos=${this.elements.germanPos.value}`;
tokenQueryText += `pos='${this.elements.germanPos.value}'`; tokenQueryText += `pos="${this.elements.germanPos.value}"`;
this.elements.germanPos.value = ''; this.elements.germanPos.value = '';
} }
break; break;
...@@ -542,7 +562,7 @@ class ConcordanceQueryBuilder { ...@@ -542,7 +562,7 @@ class ConcordanceQueryBuilder {
this.disableTokenSubmit(); this.disableTokenSubmit();
} else { } else {
tokenQueryContent += `simple_pos=${this.elements.simplePos.value}`; 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 = ''; this.elements.simplePos.value = '';
} }
break; break;
...@@ -557,7 +577,7 @@ class ConcordanceQueryBuilder { ...@@ -557,7 +577,7 @@ class ConcordanceQueryBuilder {
// Square brackets are added only if it is not an empty token (where they are already present). // Square brackets are added only if it is not an empty token (where they are already present).
if (emptyTokenCheck === false) { if (emptyTokenCheck === false) {
tokenQueryText = '[' + tokenQueryText + ']'; tokenQueryText = '[' + tokenQueryText + ']';
} }
this.buttonfactory('token', tokenQueryContent, tokenQueryText); this.buttonfactory('token', tokenQueryContent, tokenQueryText);
this.hideEverything(); this.hideEverything();
this.elements.positionalAttrArea.classList.add('hide'); this.elements.positionalAttrArea.classList.add('hide');
...@@ -686,21 +706,21 @@ class ConcordanceQueryBuilder { ...@@ -686,21 +706,21 @@ class ConcordanceQueryBuilder {
break; break;
case 'english-pos': case 'english-pos':
this.elements.tokenQueryFilled = true; 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.tokenButtonfactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}');
this.elements.englishPosBuilder.classList.add('hide'); this.elements.englishPosBuilder.classList.add('hide');
this.elements.incidenceModifiersButton.classList.add('hide'); this.elements.incidenceModifiersButton.classList.add('hide');
break; break;
case 'german-pos': case 'german-pos':
this.elements.tokenQueryFilled = true; 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.tokenButtonfactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}');
this.elements.germanPosBuilder.classList.add('hide'); this.elements.germanPosBuilder.classList.add('hide');
this.elements.incidenceModifiersButton.classList.add('hide'); this.elements.incidenceModifiersButton.classList.add('hide');
break; break;
case 'simple-pos-button': case 'simple-pos-button':
this.elements.tokenQueryFilled = true; 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.tokenButtonfactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}');
this.elements.simplePosBuilder.classList.add('hide'); this.elements.simplePosBuilder.classList.add('hide');
this.elements.incidenceModifiersButton.classList.add('hide'); this.elements.incidenceModifiersButton.classList.add('hide');
...@@ -727,21 +747,21 @@ class ConcordanceQueryBuilder { ...@@ -727,21 +747,21 @@ class ConcordanceQueryBuilder {
break; break;
case 'english-pos': case 'english-pos':
this.elements.tokenQueryFilled = true; 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.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.englishPosBuilder.classList.add('hide');
this.elements.incidenceModifiersButton.classList.add('hide'); this.elements.incidenceModifiersButton.classList.add('hide');
break; break;
case 'german-pos': case 'german-pos':
this.elements.tokenQueryFilled = true; 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.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.germanPosBuilder.classList.add('hide');
this.elements.incidenceModifiersButton.classList.add('hide'); this.elements.incidenceModifiersButton.classList.add('hide');
break; break;
case 'simple-pos-button': case 'simple-pos-button':
this.elements.tokenQueryFilled = true; 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.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.simplePosBuilder.classList.add('hide');
this.elements.incidenceModifiersButton.classList.add('hide'); this.elements.incidenceModifiersButton.classList.add('hide');
...@@ -759,19 +779,19 @@ class ConcordanceQueryBuilder { ...@@ -759,19 +779,19 @@ class ConcordanceQueryBuilder {
if (this.elements.positionalAttr.value === 'empty-token') { if (this.elements.positionalAttr.value === 'empty-token') {
this.tokenButtonfactory(elem.innerText, elem.dataset.token); this.tokenButtonfactory(elem.innerText, elem.dataset.token);
} else if (this.elements.positionalAttr.value === 'english-pos') { } 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.tokenButtonfactory(elem.innerText, elem.dataset.token);
this.elements.englishPosBuilder.classList.add('hide'); this.elements.englishPosBuilder.classList.add('hide');
this.elements.incidenceModifiersButton.classList.add('hide'); this.elements.incidenceModifiersButton.classList.add('hide');
this.elements.tokenQueryFilled = true; this.elements.tokenQueryFilled = true;
} else if (this.elements.positionalAttr.value === 'german-pos') { } 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.tokenButtonfactory(elem.innerText, elem.dataset.token);
this.elements.germanPosBuilder.classList.add('hide'); this.elements.germanPosBuilder.classList.add('hide');
this.elements.incidenceModifiersButton.classList.add('hide'); this.elements.incidenceModifiersButton.classList.add('hide');
this.elements.tokenQueryFilled = true; this.elements.tokenQueryFilled = true;
} else if (this.elements.positionalAttr.value === 'simple-pos-button') { } 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.tokenButtonfactory(elem.innerText, elem.dataset.token);
this.elements.simplePosBuilder.classList.add('hide'); this.elements.simplePosBuilder.classList.add('hide');
this.elements.incidenceModifiersButton.classList.add('hide'); this.elements.incidenceModifiersButton.classList.add('hide');
...@@ -813,27 +833,27 @@ class ConcordanceQueryBuilder { ...@@ -813,27 +833,27 @@ class ConcordanceQueryBuilder {
switch (this.elements.positionalAttr.value) { switch (this.elements.positionalAttr.value) {
case 'word': case 'word':
tokenQueryContent = `word=${this.elements.wordInput.value}${c}`; 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 = ''; this.elements.wordInput.value = '';
break; break;
case 'lemma': case 'lemma':
tokenQueryContent = `lemma=${this.elements.lemmaInput.value}${c}`; 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 = ''; this.elements.lemmaInput.value = '';
break; break;
case 'english-pos': case 'english-pos':
tokenQueryContent = `pos=${this.elements.englishPos.value}`; tokenQueryContent = `pos=${this.elements.englishPos.value}`;
tokenQueryText = `pos='${this.elements.englishPos.value}'`; tokenQueryText = `pos="${this.elements.englishPos.value}"`;
this.elements.englishPos.value = ''; this.elements.englishPos.value = '';
break; break;
case 'german-pos': case 'german-pos':
tokenQueryContent = `pos=${this.elements.germanPos.value}`; tokenQueryContent = `pos=${this.elements.germanPos.value}`;
tokenQueryText = `pos='${this.elements.germanPos.value}'`; tokenQueryText = `pos="${this.elements.germanPos.value}"`;
this.elements.germanPos.value = ''; this.elements.germanPos.value = '';
break; break;
case 'simple-pos-button': case 'simple-pos-button':
tokenQueryContent = `simple_pos=${this.elements.simplePos.value}`; 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 = ''; this.elements.simplePos.value = '';
break; break;
default: default:
...@@ -888,7 +908,7 @@ class ConcordanceQueryBuilder { ...@@ -888,7 +908,7 @@ class ConcordanceQueryBuilder {
} }
englishEntTypeHandler() { 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.elements.entity.innerHTML = 'End Entity';
this.hideEverything(); this.hideEverything();
this.elements.entityAnyType = false; this.elements.entityAnyType = false;
...@@ -900,7 +920,7 @@ class ConcordanceQueryBuilder { ...@@ -900,7 +920,7 @@ class ConcordanceQueryBuilder {
} }
germanEntTypeHandler() { 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.elements.entity.innerHTML = 'End Entity';
this.hideEverything(); this.hideEverything();
this.elements.entityAnyType = false; this.elements.entityAnyType = false;
......
app/templates/corpora/analyse_corpus.concordance.html.j2
+ 1
− 1
View file @ 0009a0ba
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
</div> </div>
<div class="col s12 m3 l3 right-align"> <div class="col s12 m3 l3 right-align">
<p class="hide-on-small-only">&nbsp;</p> <p class="hide-on-small-only">&nbsp;</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> <i class="material-icons left">build</i>
Query builder Query builder
</a> </a>
......
app/templates/corpora/analyse_corpus.html.j2
+ 356
− 0
View file @ 0009a0ba
...@@ -248,6 +248,361 @@ ...@@ -248,6 +248,361 @@
</div> </div>
</div> </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 %} {% endblock modals %}
{% block scripts %} {% block scripts %}
...@@ -256,6 +611,7 @@ ...@@ -256,6 +611,7 @@
const corpusAnalysisApp = new CorpusAnalysisApp({{ corpus.hashid|tojson }}); const corpusAnalysisApp = new CorpusAnalysisApp({{ corpus.hashid|tojson }});
const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp); const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp);
const corpusAnalysisReader = new CorpusAnalysisReader(corpusAnalysisApp); const corpusAnalysisReader = new CorpusAnalysisReader(corpusAnalysisApp);
const concordanceQueryBuilder = new ConcordanceQueryBuilder();
corpusAnalysisApp.init(); corpusAnalysisApp.init();
</script> </script>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment