New condition section token builder

This commit is contained in:
Inga Kirschnick 2023-10-19 10:21:12 +02:00
parent d3cfd2cfaf
commit 8997d3ad67
6 changed files with 343 additions and 413 deletions

View File

@ -34,7 +34,6 @@ class ConcordanceQueryBuilder {
{
onOpenStart: () => {
this.tokenAttributeBuilderFunctions.preparePositionalAttrModal();
this.tokenAttributeBuilderFunctions.optionToggleHandler();
},
onCloseStart: () => {
this.tokenAttributeBuilderFunctions.resetPositionalAttrModal();

View File

@ -19,17 +19,13 @@ class ElementReferencesQueryBuilder {
// Token Attribute Builder Elements
this.positionalAttrModal = M.Modal.getInstance(document.querySelector('#corpus-analysis-concordance-positional-attr-modal'));
this.positionalAttrSelection = document.querySelector('#corpus-analysis-concordance-positional-attr-selection');
this.tokenBuilderContent = document.querySelector('#corpus-analysis-concordance-token-builder-content');
this.tokenQuery = document.querySelector('#corpus-analysis-concordance-token-query');
this.tokenQueryTemplate = document.querySelector('#corpus-analysis-concordance-token-query-template');
this.tokenSubmitButton = document.querySelector('#corpus-analysis-concordance-token-submit');
this.noValueMessage = document.querySelector('#corpus-analysis-concordance-no-value-message');
this.isTokenQueryInvalid = false;
this.wordInput = document.querySelector('#corpus-analysis-concordance-word-input');
this.lemmaInput = document.querySelector('#corpus-analysis-concordance-lemma-input');
this.englishPosSelection = document.querySelector('#corpus-analysis-concordance-english-pos-selection');
this.germanPosSelection = document.querySelector('#corpus-analysis-concordance-german-pos-selection');
this.simplePosSelection = document.querySelector('#corpus-analysis-concordance-simple-pos-selection');
this.ignoreCaseCheckbox = document.querySelector('#corpus-analysis-concordance-ignore-case-checkbox');
}
}

View File

@ -34,7 +34,9 @@ class GeneralFunctionsQueryBuilder {
resetMaterializeSelection(selectionElements, value = "default") {
selectionElements.forEach(selectionElement => {
selectionElement.querySelector(`option[value=${value}]`).selected = true;
if (selectionElement.querySelector(`option[value=${value}]`) !== null) {
selectionElement.querySelector(`option[value=${value}]`).selected = true;
}
let instance = M.FormSelect.getInstance(selectionElement);
instance.destroy();
M.FormSelect.init(selectionElement);

View File

@ -12,13 +12,7 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
button.addEventListener('click', () => {this.actionButtonInOptionSectionHandler(button.dataset.optionsAction);});
});
// Eventlistener for kind of token
this.elements.tokenSubmitButton.addEventListener('click', () => {this.addTokenToQuery();});
this.elements.wordInput.addEventListener('input', () => {this.optionToggleHandler();});
this.elements.lemmaInput.addEventListener('input', () => {this.optionToggleHandler();});
this.elements.englishPosSelection.addEventListener('change', () => {this.optionToggleHandler();});
this.elements.germanPosSelection.addEventListener('change', () => {this.optionToggleHandler();});
this.elements.simplePosSelection.addEventListener('change', () => {this.optionToggleHandler();});
}
resetPositionalAttrModal() {
@ -28,32 +22,38 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
<option value="lemma" >lemma</option>
<option value="english-pos">english pos</option>
<option value="german-pos">german pos</option>
<option value="simple-pos">simple_pos</option>
<option value="simple_pos">simple_pos</option>
<option value="empty-token">empty token</option>
`;
this.elements.positionalAttrSelection.innerHTML = originalSelectionList;
this.elements.tokenQuery.innerHTML = '';
this.toggleClass(['word', 'lemma', 'english-pos', 'german-pos', 'simple-pos'], 'hide', 'add');
this.toggleClass(['word', 'input-field-options'], 'hide', 'remove');
this.elements.tokenBuilderContent.innerHTML = '';
this.toggleClass(['input-field-options'], 'hide', 'remove');
this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
document.querySelector('#corpus-analysis-concordance-positional-attr-selection option[value="word"]').selected = true;
this.elements.wordInput.value = '';
this.elements.lemmaInput.value = '';
this.resetMaterializeSelection([this.elements.englishPosSelection, this.elements.germanPosSelection, this.elements.simplePosSelection]);
this.resetMaterializeSelection([this.elements.positionalAttrSelection], "word");
this.elements.ignoreCaseCheckbox.checked = false;
this.elements.editingModusOn = false;
this.elements.editedQueryChipElementIndex = undefined;
}
preparePositionalAttrModal() {
let selection = this.elements.positionalAttrSelection.value;
this.toggleClass(['word', 'lemma', 'english-pos', 'german-pos', 'simple-pos'], 'hide', 'add');
if (selection !== 'empty-token') {
this.toggleClass([selection], 'hide', 'remove');
this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
this.resetMaterializeSelection([this.elements.englishPosSelection, this.elements.germanPosSelection, this.elements.simplePosSelection]);
let selectionTemplate = document.querySelector(`.token-builder-section[data-token-builder-section="${selection}"]`);
let selectionTemplateClone = selectionTemplate.content.cloneNode(true);
this.elements.tokenBuilderContent.innerHTML = '';
this.elements.tokenBuilderContent.appendChild(selectionTemplateClone);
if (this.elements.tokenBuilderContent.querySelector('select') !== null) {
let selectElement = this.elements.tokenBuilderContent.querySelector('select');
M.FormSelect.init(selectElement);
selectElement.addEventListener('change', () => {this.optionToggleHandler();});
} else {
this.elements.tokenBuilderContent.querySelector('input').addEventListener('input', () => {this.optionToggleHandler();});
}
}
this.optionToggleHandler();
if (selection === 'word' || selection === 'lemma') {
this.toggleClass(['input-field-options'], 'hide', 'remove');
} else if (selection === 'empty-token'){
@ -63,35 +63,22 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
}
}
tokenInputCheck() {
let input;
if (!document.querySelector('[data-toggle-area="word"]').classList.contains('hide')) {
input = this.elements.wordInput;
} else if (!document.querySelector('[data-toggle-area="lemma"]').classList.contains('hide')){
input = this.elements.lemmaInput;
} else if (!document.querySelector('[data-toggle-area="english-pos"]').classList.contains('hide')){
input = this.elements.englishPosSelection;
} else if (!document.querySelector('[data-toggle-area="german-pos"]').classList.contains('hide')){
input = this.elements.germanPosSelection;
} else if (!document.querySelector('[data-toggle-area="simple-pos"]').classList.contains('hide')){
input = this.elements.simplePosSelection;
}
return input;
tokenInputCheck(elem) {
return elem.querySelector('select') !== null ? elem.querySelector('select') : elem.querySelector('input');
}
optionToggleHandler() {
let input = this.tokenInputCheck();
let input = this.tokenInputCheck(this.elements.tokenBuilderContent);
if ((input.value === '' || input.value === 'default') && this.elements.editingModusOn === false) {
this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
} else if (this.elements.positionalAttrSelection.querySelectorAll('option').length === 1) {
this.toggleClass(['and'], 'disabled', 'add');
} else {
this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'remove');
}
}
disableTokenSubmit() {
this.elements.isTokenQueryInvalid = true;
this.elements.tokenSubmitButton.classList.add('red');
this.elements.noValueMessage.classList.remove('hide');
setTimeout(() => {
@ -102,93 +89,52 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
}, 3000);
}
tokenChipFactory(prettyQueryText, tokenText) {
tokenText = encodeURI(tokenText);
let builderElement;
let queryChipElement;
builderElement = document.createElement('div');
builderElement.innerHTML = `
<div class='chip col s2 l2' style='margin-top:20px;' data-tokentext='${tokenText}'>
${prettyQueryText}
<i class='material-icons close'>close</i>
</div>`;
queryChipElement = builderElement.firstElementChild;
this.elements.tokenQuery.appendChild(queryChipElement);
}
addTokenToQuery() {
let c = this.elements.ignoreCaseCheckbox.checked ? ' %c' : '';
let tokenQueryPrettyText = '';
let tokenQueryCQLText = '';
this.elements.isTokenQueryInvalid = false;
this.elements.tokenQuery.childNodes.forEach(element => {
tokenQueryPrettyText += ' ' + element.firstChild.data + ' ';
tokenQueryCQLText += decodeURI(element.dataset.tokentext);
let input;
let kindOfToken = this.kindOfTokenCheck(this.elements.positionalAttrSelection.value);
// Takes all rows of the token query (if there is a query concatenation).
// Adds their contents to tokenQueryPrettyText and tokenQueryCQLText, which will later be expanded with the current input field.
let tokenQueryRows = this.elements.tokenQuery.querySelectorAll('.row');
tokenQueryRows.forEach(row => {
let ignoreCaseCheckbox = row.querySelector('input[type="checkbox"]');
let c = ignoreCaseCheckbox !== null && ignoreCaseCheckbox.checked ? ' %c' : '';
let tokenQueryRowInput = this.tokenInputCheck(row.querySelector('.token-query-template-content'));
let tokenQueryKindOfToken = this.kindOfTokenCheck(tokenQueryRowInput.closest('.input-field').dataset.kindOfToken);
let tokenConditionPrettyText = row.querySelector('[data-condition-pretty-text]').dataset.conditionPrettyText;
let tokenConditionCQLText = row.querySelector('[data-condition-cql-text]').dataset.conditionCqlText;
tokenQueryPrettyText += `${tokenQueryKindOfToken}=${tokenQueryRowInput.value}${c} ${tokenConditionPrettyText} `;
tokenQueryCQLText += `${tokenQueryKindOfToken}="${tokenQueryRowInput.value}"${c} ${tokenConditionCQLText}`;
});
switch (this.elements.positionalAttrSelection.value) {
case 'word':
if (this.elements.wordInput.value === '') {
this.disableTokenSubmit();
} else {
tokenQueryPrettyText += `word=${this.elements.wordInput.value}${c}`;
tokenQueryCQLText += `word="${this.elements.wordInput.value}"${c}`;
this.elements.wordInput.value = '';
}
break;
case 'lemma':
if (this.elements.lemmaInput.value === '') {
this.disableTokenSubmit();
} else {
tokenQueryPrettyText += `lemma=${this.elements.lemmaInput.value}${c}`;
tokenQueryCQLText += `lemma="${this.elements.lemmaInput.value}"${c}`;
this.elements.lemmaInput.value = '';
}
break;
case 'english-pos':
if (this.elements.englishPosSelection.value === 'default') {
this.disableTokenSubmit();
} else {
tokenQueryPrettyText += `pos=${this.elements.englishPosSelection.value}`;
tokenQueryCQLText += `pos="${this.elements.englishPosSelection.value}"`;
this.elements.englishPosSelection.value = '';
}
break;
case 'german-pos':
if (this.elements.germanPosSelection.value === 'default') {
this.disableTokenSubmit();
} else {
tokenQueryPrettyText += `pos=${this.elements.germanPosSelection.value}`;
tokenQueryCQLText += `pos="${this.elements.germanPosSelection.value}"`;
this.elements.germanPosSelection.value = '';
}
break;
case 'simple-pos':
if (this.elements.simplePosSelection.value === 'default') {
this.disableTokenSubmit();
} else {
tokenQueryPrettyText += `simple_pos=${this.elements.simplePosSelection.value}`;
tokenQueryCQLText += `simple_pos="${this.elements.simplePosSelection.value}"`;
this.elements.simplePosSelection.value = '';
}
break;
case 'empty-token':
tokenQueryPrettyText += 'empty token';
default:
break;
if (kindOfToken === 'empty-token') {
tokenQueryPrettyText += 'empty token';
} else {
let c = this.elements.ignoreCaseCheckbox.checked ? ' %c' : '';
input = this.tokenInputCheck(this.elements.tokenBuilderContent);
tokenQueryPrettyText += `${kindOfToken}=${input.value}${c}`;
tokenQueryCQLText += `${kindOfToken}="${input.value}"${c}`;
}
// isTokenQueryInvalid looks if a valid value is passed. If the input fields/dropdowns are empty (isTokenQueryInvalid === true), no token is added.
if (this.elements.isTokenQueryInvalid === false) {
tokenQueryCQLText = '[' + tokenQueryCQLText + ']';
if ((input.value === '' || input.value === 'default') && this.elements.positionalAttrSelection.value !== 'empty-token') {
this.disableTokenSubmit();
} else {
tokenQueryCQLText = `[${tokenQueryCQLText}]`;
this.submitQueryChipElement('token', tokenQueryPrettyText, tokenQueryCQLText, null, false, true);
this.elements.positionalAttrModal.close();
}
}
kindOfTokenCheck(kindOfToken) {
return kindOfToken === 'english-pos' || kindOfToken === 'german-pos' ? 'pos' : kindOfToken;
}
actionButtonInOptionSectionHandler(elem) {
let input = this.tokenInputCheck();
let input = this.tokenInputCheck(this.elements.tokenBuilderContent);
switch (elem) {
case 'option-group':
input.value += '(option1|option2)';
@ -201,10 +147,10 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
input.value += '.';
break;
case 'and':
this.conditionHandler('and', " & ");
this.conditionHandler('and');
break;
case 'or':
this.conditionHandler('or', " | ");
this.conditionHandler('or');
break;
default:
break;
@ -213,32 +159,8 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
}
characterIncidenceModifierHandler(elem) {
// For word and lemma, the incidence modifiers are inserted in the input field. For the others, one or two chips are created which contain the respective value of the token and the incidence modifier.
switch (this.elements.positionalAttrSelection.value) {
case 'empty-token':
this.tokenChipFactory(elem.innerText, elem.dataset.token);
break;
case 'english-pos':
this.tokenChipFactory(`pos=${this.elements.englishPosSelection.value}`, `pos="${this.elements.englishPosSelection.value}"`);
this.tokenChipFactory(elem.innerText, elem.dataset.token);
break;
case 'german-pos':
this.tokenChipFactory(`pos=${this.elements.germanPosSelection.value}`, `pos="${this.elements.germanPosSelection.value}"`);
this.tokenChipFactory(elem.innerText, elem.dataset.token);
break;
case 'simple-pos':
this.tokenChipFactory(`simple_pos=${this.elements.simplePosSelection.value}`, `simple_pos="${this.elements.simplePosSelection.value}"`);
this.tokenChipFactory(elem.innerText, elem.dataset.token);
break;
default:
let input = this.tokenInputCheck();
input.value += elem.dataset.token;
break;
}
if (this.elements.positionalAttrSelection.value !== "word" && this.elements.positionalAttrSelection.value !== "lemma") {
this.toggleClass([this.elements.positionalAttrSelection.value], "hide", "add");
}
let input = this.tokenInputCheck(this.elements.tokenBuilderContent);
input.value += elem.dataset.token;
}
characterNMSubmitHandler(modalId) {
@ -250,89 +172,96 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
let instance = M.Modal.getInstance(modal);
instance.close();
switch (this.elements.positionalAttrSelection.value) {
case 'word':
this.elements.wordInput.value += '{' + input + '}';
break;
case 'lemma':
this.elements.lemmaInput.value += '{' + input + '}';
break;
default:
break;
}
let tokenInput = this.tokenInputCheck(this.elements.tokenBuilderContent);
tokenInput.value += '{' + input + '}';
}
conditionHandler(conditionText, conditionQueryContent) {
let tokenQueryPrettyText;
let tokenQueryCQLText;
let c = this.elements.ignoreCaseCheckbox.checked ? ' %c' : '';
switch (this.elements.positionalAttrSelection.value) {
case 'word':
tokenQueryPrettyText = `word=${this.elements.wordInput.value}${c}`;
tokenQueryCQLText = `word="${this.elements.wordInput.value}"${c}`;
this.elements.wordInput.value = '';
break;
case 'lemma':
tokenQueryPrettyText = `lemma=${this.elements.lemmaInput.value}${c}`;
tokenQueryCQLText = `lemma="${this.elements.lemmaInput.value}"${c}`;
this.elements.lemmaInput.value = '';
break;
case 'english-pos':
tokenQueryPrettyText = `pos=${this.elements.englishPosSelection.value}`;
tokenQueryCQLText = `pos="${this.elements.englishPosSelection.value}"`;
this.elements.englishPosSelection.value = '';
break;
case 'german-pos':
tokenQueryPrettyText = `pos=${this.elements.germanPosSelection.value}`;
tokenQueryCQLText = `pos="${this.elements.germanPosSelection.value}"`;
this.elements.germanPosSelection.value = '';
break;
case 'simple-pos':
tokenQueryPrettyText = `simple_pos=${this.elements.simplePosSelection.value}`;
tokenQueryCQLText = `simple_pos="${this.elements.simplePosSelection.value}"`;
this.elements.simplePosSelection.value = '';
break;
default:
break;
}
conditionHandler(conditionText) {
let tokenQueryTemplateClone = this.elements.tokenQueryTemplate.content.cloneNode(true);
tokenQueryTemplateClone.querySelector('.token-query-template-content').appendChild(this.elements.tokenBuilderContent.firstElementChild);
let notSelectedButton = tokenQueryTemplateClone.querySelector(`[data-condition-pretty-text]:not([data-condition-pretty-text="${conditionText}"])`);
let deleteButton = tokenQueryTemplateClone.querySelector(`[data-token-query-content-action="delete"]`);
deleteButton.addEventListener('click', (event) => {
this.deleteTokenQueryRow(event.target);
});
notSelectedButton.parentNode.removeChild(notSelectedButton);
this.elements.tokenQuery.appendChild(tokenQueryTemplateClone);
// Deleting the options which do not make sense in the context of the condition like "word" AND "word". Also sets selection default.
let selectionDefault = "word";
let optionDeleteList = ['empty-token'];
if (conditionText === 'and') {
if (this.elements.positionalAttrSelection.value === 'word' || this.elements.positionalAttrSelection.value === 'lemma') {
selectionDefault = "english-pos";
optionDeleteList.push('word', 'lemma');
} else if (this.elements.positionalAttrSelection.value === 'english-pos' || this.elements.positionalAttrSelection.value === 'german-pos') {
optionDeleteList.push('english-pos', 'german-pos');
} else {
optionDeleteList.push('simple-pos');
switch (this.elements.positionalAttrSelection.value) {
case 'english-pos' || 'german-pos':
optionDeleteList.push('english-pos', 'german-pos');
break;
default:
optionDeleteList.push(this.elements.positionalAttrSelection.value);
break;
}
} else {
let originalSelectionList =
`
<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">simple_pos</option>
`;
this.elements.positionalAttrSelection.innerHTML = originalSelectionList;
M.FormSelect.init(this.elements.positionalAttrSelection);
}
this.resetMaterializeSelection([this.elements.englishPosSelection, this.elements.germanPosSelection, this.elements.simplePosSelection]);
this.tokenChipFactory(tokenQueryPrettyText, tokenQueryCQLText);
this.tokenChipFactory(conditionText, conditionQueryContent);
let lastTokenQueryRow = this.elements.tokenQuery.lastElementChild;
if(lastTokenQueryRow.querySelector('[data-kind-of-token="word"]') || lastTokenQueryRow.querySelector('[data-kind-of-token="lemma"]')) {
this.appendIgnoreCaseCheckbox(lastTokenQueryRow.querySelector('.token-query-template-content'), this.elements.ignoreCaseCheckbox.checked);
}
this.elements.ignoreCaseCheckbox.checked = false;
this.setTokenSelection(selectionDefault, optionDeleteList);
}
deleteTokenQueryRow(deleteButton) {
let deletedRow = deleteButton.closest('.row');
let condition = deletedRow.querySelector('[data-condition-pretty-text]').dataset.conditionPrettyText;
if (condition === 'and') {
let kindOfToken = deletedRow.querySelector('[data-kind-of-token]').dataset.kindOfToken;
switch (kindOfToken) {
case 'english-pos' || 'german-pos':
this.createOptionElementForPosAttrSelection('english-pos');
this.createOptionElementForPosAttrSelection('german-pos');
break;
default:
this.createOptionElementForPosAttrSelection(kindOfToken);
break;
}
M.FormSelect.init(this.elements.positionalAttrSelection);
}
deletedRow.remove();
}
createOptionElementForPosAttrSelection(kindOfToken) {
let option = document.createElement('option');
option.value = kindOfToken;
option.text = kindOfToken;
this.elements.positionalAttrSelection.appendChild(option);
}
appendIgnoreCaseCheckbox(parentElement, checked = false) {
let ignoreCaseCheckboxClone = document.querySelector('#ignore-case-checkbox-template').content.cloneNode(true);
parentElement.appendChild(ignoreCaseCheckboxClone);
M.Tooltip.init(parentElement.querySelectorAll('.tooltipped'));
if (checked) {
parentElement.querySelector('input[type="checkbox"]').checked = true;
}
}
setTokenSelection(selection, optionDeleteList) {
optionDeleteList.forEach(option => {
this.elements.positionalAttrSelection.querySelector(`option[value=${option}]`).remove();
if (this.elements.positionalAttrSelection.querySelector(`option[value=${option}]`) !== null) {
this.elements.positionalAttrSelection.querySelector(`option[value=${option}]`).remove();
}
});
this.resetMaterializeSelection([this.elements.positionalAttrSelection], selection);
this.toggleClass(['word', 'lemma', 'english-pos', 'german-pos', 'simple-pos'], 'hide', 'add');
this.toggleClass([selection], 'hide', 'remove');
this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
if (selection === "word" || selection === "lemma") {
this.toggleClass(['input-field-options'], 'hide', 'remove');
} else {
this.toggleClass(['input-field-options'], 'hide', 'add');
}
this.preparePositionalAttrModal();
}
}

View File

@ -17,10 +17,10 @@
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s1">
<div class="col s2">
<span class="card-title">Query <i class="material-icons left" style="font-size: inherit;">search</i></span>
</div>
<div class="col s2">
<div class="col s1">
<div class="switch" style="margin-top:8px; margin-left:0px;">
<label>
<input type="checkbox" id="corpus-analysis-concordance-expert-mode-switch">

View File

@ -162,223 +162,227 @@
<option value="lemma" >lemma</option>
<option value="english-pos">english pos</option>
<option value="german-pos">german pos</option>
<option value="simple-pos">simple_pos</option>
<option value="simple_pos">simple_pos</option>
<option value="empty-token">empty token</option>
</select>
</div>
</div>
<p></p>
<div id="corpus-analysis-concordance-token-builder-content">
<div class="row" >
<div id="corpus-analysis-concordance-token-query"></div>
<div id="corpus-analysis-concordance-word-builder" data-toggle-area="word">
<div class= "input-field col s3 l4">
<i class="material-icons prefix">mode_edit</i>
<input placeholder="Type in your word" type="text" id="corpus-analysis-concordance-word-input">
</div>
<div id="corpus-analysis-concordance-token-query"></div>
<template id="corpus-analysis-concordance-token-query-template">
<div class="row">
<div class="token-query-template-content"></div>
<div class="col s4" style="margin-top:15px;">
<a class="btn-small waves-effect waves-light disabled" data-condition-pretty-text="or" data-condition-cql-text=" | ">or</a>
<a class="btn-small waves-effect waves-light disabled" data-condition-pretty-text="and" data-condition-cql-text=" & ">and</a>
<a class="btn-floating waves-effect waves-light red" data-token-query-content-action="delete" style="margin-left:8px;"><i class="material-icons right">delete</i></a>
</div>
</div>
</template>
<div class="row">
<div id="corpus-analysis-concordance-token-builder-content"></div>
<div id="corpus-analysis-concordance-lemma-builder" class="hide" data-toggle-area="lemma">
<div class= "input-field col s3 l4">
<i class="material-icons prefix">mode_edit</i>
<input placeholder="Type in your lemma" type="text" id="corpus-analysis-concordance-lemma-input">
</div>
</div>
<template id="ignore-case-checkbox-template">
<span class="col s1 center-align tooltipped" style="margin-top: 22px;" data-position="bottom" data-tooltip="Ignore Case">
<label>
<input type="checkbox" class="filled-in"/>
<span>%c</span>
</label>
</span>
</template>
<div id="corpus-analysis-concordance-english-pos-builder" class="hide" data-toggle-area="english-pos">
<div class="col s6 m4 l4">
<div class="row">
<div class= "input-field col s12">
<select name="englishpos" id="corpus-analysis-concordance-english-pos-selection">
<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>
<option value="LS">list item marker</option>
<option value="MD">verb, modal auxillary</option>
<option value="NFP">superfluous punctuation</option>
<option value="NN">noun, singular or mass</option>
<option value="NNP">noun, proper singular</option>
<option value="NNPS">noun, proper plural</option>
<option value="NNS">noun, plural</option>
<option value="PDT">predeterminer</option>
<option value="POS">possessive ending</option>
<option value="PRP">pronoun, personal</option>
<option value="PRP$">pronoun, possessive</option>
<option value="RBR">adverb, comparative</option>
<option value="RBS">adverb, superlative</option>
<option value="RP">adverb, particle</option>
<option value="SYM">symbol</option>
<option value="TO">infinitival to</option>
<option value="UH">interjection</option>
<option value="VB">verb, base form</option>
<option value="VBD">verb, past tense</option>
<option value="VBG">verb, gerund or present participle</option>
<option value="VBN">verb, past participle</option>
<option value="VBP">verb, non-3rd person singular present</option>
<option value="VBZ">verb, 3rd person singular present</option>
<option value="WDT">wh-determiner</option>
<option value="WP">wh-pronoun, personal</option>
<option value="WP$">wh-pronoun, possessive</option>
<option value="WRB">wh-adverb</option>
<option value="XX">unknown</option>
<option value="``">opening quotation mark</option>
<option value="$">symbol, currency</option>
<option value='""'>closing quotation mark</option>
<option value="-LRB-">left round bracket</option>
<option value="-RRB-">right round bracket</option>
<option value=".">punctuation mark, sentence closer</option>
<option value=":">punctuation mark, colon or ellipsis</option>
</select>
<label>Part-of-speech tags</label>
</div>
</div>
</div>
</div>
<div id="corpus-analysis-concordance-german-pos-builder" class="hide" data-toggle-area="german-pos">
<div class="col s6 m4 l4">
<div class="row">
<div class= "input-field col s12">
<select name="germanpos" id="corpus-analysis-concordance-german-pos-selection">
<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>
<option value="CARD">cardinal number</option>
<option value="FM">foreign word</option>
<option value="ITJ">interjection</option>
<option value="KOKOM">comparative conjunction</option>
<option value="KON">coordinating conjunction</option>
<option value="KOUI">subordinating conjunction with "zu" and infinitive</option>
<option value="KOUS">subordinating conjunction with sentence</option>
<option value="NE">proper noun</option>
<option value="NN">noun, singular or mass</option>
<option value="NNE">proper noun</option>
<option value="PDAT">attributive demonstrative pronoun</option>
<option value="PDS">substituting demonstrative pronoun</option>
<option value="PIAT">attributive indefinite pronoun without determiner</option>
<option value="PIS">substituting indefinite pronoun</option>
<option value="PPER">non-reflexive personal pronoun</option>
<option value="PPOSAT">attributive possessive pronoun</option>
<option value="PPOSS">substituting possessive pronoun</option>
<option value="PRELAT">attributive relative pronoun</option>
<option value="PRELS">substituting relative pronoun</option>
<option value="PRF">reflexive personal pronoun</option>
<option value="PROAV">pronominal adverb</option>
<option value="PTKA">particle with adjective or adverb</option>
<option value="PTKANT">answer particle</option>
<option value="PTKNEG">negative particle</option>
<option value="PTKVZ">separable verbal particle</option>
<option value="PTKZU">"zu" before infinitive</option>
<option value="PWAT">attributive interrogative pronoun</option>
<option value="PWAV">adverbial interrogative or relative pronoun</option>
<option value="PWS">substituting interrogative pronoun</option>
<option value="TRUNC">word remnant</option>
<option value="VAFIN">finite verb, auxiliary</option>
<option value="VAIMP">imperative, auxiliary</option>
<option value="VAINF">infinitive, auxiliary</option>
<option value="VAPP">perfect participle, auxiliary</option>
<option value="VMFIN">finite verb, modal</option>
<option value="VMINF">infinitive, modal</option>
<option value="VMPP">perfect participle, modal</option>
<option value="VVFIN">finite verb, full</option>
<option value="VVIMP">imperative, full</option>
<option value="VVINF">infinitive, full</option>
<option value="VVIZU">infinitive with "zu", full</option>
<option value="VVPP">perfect participle, full</option>
<option value="XY">non-word containing non-letter</option>
<option value="$(">other sentence-internal punctuation mark</option>
<option value="$,">comma</option>
<option value="$.">sentence-final punctuation mark</option>
</select>
<label>Part-of-speech tags</label>
</div>
</div>
</div>
<template class="token-builder-section" data-token-builder-section="word">
<div class= "input-field col s4" data-kind-of-token="word">
<i class="material-icons prefix">mode_edit</i>
<input placeholder="Type in your word" type="text">
</div>
</template>
<div id="corpus-analysis-concordance-simple-pos-builder" class="hide" data-toggle-area="simple-pos">
<div class="col s6 m4 l4">
<div class="row">
<div class= "input-field col s12">
<select name="simplepos" id="corpus-analysis-concordance-simple-pos-selection">
<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>
<template class="token-builder-section" data-token-builder-section="lemma">
<div class= "input-field col s4" data-kind-of-token="lemma">
<i class="material-icons prefix">mode_edit</i>
<input placeholder="Type in your lemma" type="text">
</div>
</template>
<div class="col s1 l1 center-align">
<p class="btn-floating waves-effect waves-light" id="corpus-analysis-concordance-token-submit">
<i class="material-icons right">send</i>
</p>
<template class="token-builder-section" data-token-builder-section="english-pos">
<div class= "input-field col s4" data-kind-of-token="english-pos">
<select name="englishpos">
<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>
<option value="LS">list item marker</option>
<option value="MD">verb, modal auxillary</option>
<option value="NFP">superfluous punctuation</option>
<option value="NN">noun, singular or mass</option>
<option value="NNP">noun, proper singular</option>
<option value="NNPS">noun, proper plural</option>
<option value="NNS">noun, plural</option>
<option value="PDT">predeterminer</option>
<option value="POS">possessive ending</option>
<option value="PRP">pronoun, personal</option>
<option value="PRP$">pronoun, possessive</option>
<option value="RBR">adverb, comparative</option>
<option value="RBS">adverb, superlative</option>
<option value="RP">adverb, particle</option>
<option value="SYM">symbol</option>
<option value="TO">infinitival to</option>
<option value="UH">interjection</option>
<option value="VB">verb, base form</option>
<option value="VBD">verb, past tense</option>
<option value="VBG">verb, gerund or present participle</option>
<option value="VBN">verb, past participle</option>
<option value="VBP">verb, non-3rd person singular present</option>
<option value="VBZ">verb, 3rd person singular present</option>
<option value="WDT">wh-determiner</option>
<option value="WP">wh-pronoun, personal</option>
<option value="WP$">wh-pronoun, possessive</option>
<option value="WRB">wh-adverb</option>
<option value="XX">unknown</option>
<option value="``">opening quotation mark</option>
<option value="$">symbol, currency</option>
<option value='""'>closing quotation mark</option>
<option value="-LRB-">left round bracket</option>
<option value="-RRB-">right round bracket</option>
<option value=".">punctuation mark, sentence closer</option>
<option value=":">punctuation mark, colon or ellipsis</option>
</select>
<label>Part-of-speech tags</label>
</div>
</template>
<template class="token-builder-section" data-token-builder-section="german-pos">
<div class= "input-field col s4" data-kind-of-token="german-pos">
<select name="germanpos">
<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>
<option value="CARD">cardinal number</option>
<option value="FM">foreign word</option>
<option value="ITJ">interjection</option>
<option value="KOKOM">comparative conjunction</option>
<option value="KON">coordinating conjunction</option>
<option value="KOUI">subordinating conjunction with "zu" and infinitive</option>
<option value="KOUS">subordinating conjunction with sentence</option>
<option value="NE">proper noun</option>
<option value="NN">noun, singular or mass</option>
<option value="NNE">proper noun</option>
<option value="PDAT">attributive demonstrative pronoun</option>
<option value="PDS">substituting demonstrative pronoun</option>
<option value="PIAT">attributive indefinite pronoun without determiner</option>
<option value="PIS">substituting indefinite pronoun</option>
<option value="PPER">non-reflexive personal pronoun</option>
<option value="PPOSAT">attributive possessive pronoun</option>
<option value="PPOSS">substituting possessive pronoun</option>
<option value="PRELAT">attributive relative pronoun</option>
<option value="PRELS">substituting relative pronoun</option>
<option value="PRF">reflexive personal pronoun</option>
<option value="PROAV">pronominal adverb</option>
<option value="PTKA">particle with adjective or adverb</option>
<option value="PTKANT">answer particle</option>
<option value="PTKNEG">negative particle</option>
<option value="PTKVZ">separable verbal particle</option>
<option value="PTKZU">"zu" before infinitive</option>
<option value="PWAT">attributive interrogative pronoun</option>
<option value="PWAV">adverbial interrogative or relative pronoun</option>
<option value="PWS">substituting interrogative pronoun</option>
<option value="TRUNC">word remnant</option>
<option value="VAFIN">finite verb, auxiliary</option>
<option value="VAIMP">imperative, auxiliary</option>
<option value="VAINF">infinitive, auxiliary</option>
<option value="VAPP">perfect participle, auxiliary</option>
<option value="VMFIN">finite verb, modal</option>
<option value="VMINF">infinitive, modal</option>
<option value="VMPP">perfect participle, modal</option>
<option value="VVFIN">finite verb, full</option>
<option value="VVIMP">imperative, full</option>
<option value="VVINF">infinitive, full</option>
<option value="VVIZU">infinitive with "zu", full</option>
<option value="VVPP">perfect participle, full</option>
<option value="XY">non-word containing non-letter</option>
<option value="$(">other sentence-internal punctuation mark</option>
<option value="$,">comma</option>
<option value="$.">sentence-final punctuation mark</option>
</select>
<label>Part-of-speech tags</label>
</div>
</template>
<div class="hide" id="corpus-analysis-concordance-no-value-message"><i>No value entered!</i></div>
<template class="token-builder-section" data-token-builder-section="simple_pos">
<div class= "input-field col s4" data-kind-of-token="simple_pos">
<select name="simplepos">
<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>
</template>
<div class="col s4" data-toggle-area="condition-option-container">
<a class="btn-small tooltipped waves-effect waves-light disabled positional-attr-options-action-button" data-options-action="or" data-toggle-area="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 disabled positional-attr-options-action-button" data-options-action="and" data-toggle-area="and" data-position="bottom" data-tooltip="You can add another condition to your token. <br>Both must be fulfilled">and</a>
<p class="btn-floating waves-effect waves-light" id="corpus-analysis-concordance-token-submit" style="margin-left:10px;">
<i class="material-icons right">send</i>
</p>
</div>
<div id="corpus-analysis-concordance-token-edit-options">
<div class="row">
<h6>Options to edit your token: <a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal"><i class="material-icons left" id="corpus-analysis-concordance-edit-options-tutorial-info-icon">help_outline</i></a></h6>
</div>
<p></p>
<div class="row">
<div class="col s8" data-toggle-area="input-field-options">
<a class="btn-small waves-effect waves-light tooltipped positional-attr-options-action-button" data-options-action="wildcard-char" data-position="top" data-tooltip="Look for a variable character (also called wildcard character)">Wildcard character</a>
<a class="btn-small waves-effect waves-light tooltipped positional-attr-options-action-button" data-options-action="option-group" data-position="top" data-tooltip="Find character sequences from a list of options">Option Group</a>
<a class="dropdown-trigger btn-small waves-effect waves-light disabled" href="#" data-target="corpus-analysis-concordance-character-incidence-modifiers-dropdown" data-toggle-area="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>
<span data-toggle-area="ignore-case-checkbox">
<label>
<input type="checkbox" class="filled-in" id="corpus-analysis-concordance-ignore-case-checkbox"/>
<span>Ignore Case</span>
</label>
</span>
</div>
<div class="col s2" data-toggle-area="condition-option-container">
<a class="btn-small tooltipped waves-effect waves-light disabled positional-attr-options-action-button" data-options-action="or" data-toggle-area="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 disabled positional-attr-options-action-button" data-options-action="and" data-toggle-area="and" data-position="bottom" data-tooltip="You can add another condition to your token. <br>Both must be fulfilled">and</a>
</div>
<ul id="corpus-analysis-concordance-character-incidence-modifiers-dropdown" class="dropdown-content">
{{ incidence_modifiers_dropdown_content("character") }}
</ul>
<div class="hide" id="corpus-analysis-concordance-no-value-message"><i>No value entered!</i></div>
</div>
<div id="corpus-analysis-concordance-token-edit-options" data-toggle-area="input-field-options">
<div class="row">
<h6>Options to edit your token: <a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal"><i class="material-icons left" id="corpus-analysis-concordance-edit-options-tutorial-info-icon">help_outline</i></a></h6>
</div>
<p></p>
<div class="row">
<div class="col s8" >
<a class="btn-small waves-effect waves-light tooltipped positional-attr-options-action-button" data-options-action="wildcard-char" data-position="top" data-tooltip="Look for a variable character (also called wildcard character)">Wildcard character</a>
<a class="btn-small waves-effect waves-light tooltipped positional-attr-options-action-button" data-options-action="option-group" data-position="top" data-tooltip="Find character sequences from a list of options">Option Group</a>
<a class="dropdown-trigger btn-small waves-effect waves-light disabled" href="#" data-target="corpus-analysis-concordance-character-incidence-modifiers-dropdown" data-toggle-area="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>
<span>
<label>
<input type="checkbox" class="filled-in" id="corpus-analysis-concordance-ignore-case-checkbox"/>
<span>Ignore Case</span>
</label>
</span>
</div>
<ul id="corpus-analysis-concordance-character-incidence-modifiers-dropdown" class="dropdown-content">
{{ incidence_modifiers_dropdown_content("character") }}
</ul>
</div>
</div>