From 8997d3ad6705405939bf2ac9daefb153ad306b18 Mon Sep 17 00:00:00 2001
From: Inga Kirschnick <inga.kirschnick@uni-bielefeld.de>
Date: Thu, 19 Oct 2023 10:21:12 +0200
Subject: [PATCH] New condition section token builder
---
app/static/js/CorpusAnalysis/QueryBuilder.js | 1 -
.../ElementReferencesQueryBuilder.js | 8 +-
.../GeneralFunctionsQueryBuilder.js | 4 +-
...enAttributeBuilderFunctionsQueryBuilder.js | 335 ++++++---------
.../corpora/_analysis/concordance.html.j2 | 4 +-
.../query_builder/_query_builder.html.j2 | 398 +++++++++---------
6 files changed, 340 insertions(+), 410 deletions(-)
diff --git a/app/static/js/CorpusAnalysis/QueryBuilder.js b/app/static/js/CorpusAnalysis/QueryBuilder.js
index 379a39ea..b37cdf14 100644
--- a/app/static/js/CorpusAnalysis/QueryBuilder.js
+++ b/app/static/js/CorpusAnalysis/QueryBuilder.js
@@ -34,7 +34,6 @@ class ConcordanceQueryBuilder {
{
onOpenStart: () => {
this.tokenAttributeBuilderFunctions.preparePositionalAttrModal();
- this.tokenAttributeBuilderFunctions.optionToggleHandler();
},
onCloseStart: () => {
this.tokenAttributeBuilderFunctions.resetPositionalAttrModal();
diff --git a/app/static/js/CorpusAnalysis/QueryBuilder/ElementReferencesQueryBuilder.js b/app/static/js/CorpusAnalysis/QueryBuilder/ElementReferencesQueryBuilder.js
index bfd6fd86..157ca2a7 100644
--- a/app/static/js/CorpusAnalysis/QueryBuilder/ElementReferencesQueryBuilder.js
+++ b/app/static/js/CorpusAnalysis/QueryBuilder/ElementReferencesQueryBuilder.js
@@ -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');
}
}
diff --git a/app/static/js/CorpusAnalysis/QueryBuilder/GeneralFunctionsQueryBuilder.js b/app/static/js/CorpusAnalysis/QueryBuilder/GeneralFunctionsQueryBuilder.js
index 769a7b6a..f6c0004e 100644
--- a/app/static/js/CorpusAnalysis/QueryBuilder/GeneralFunctionsQueryBuilder.js
+++ b/app/static/js/CorpusAnalysis/QueryBuilder/GeneralFunctionsQueryBuilder.js
@@ -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);
diff --git a/app/static/js/CorpusAnalysis/QueryBuilder/TokenAttributeBuilderFunctionsQueryBuilder.js b/app/static/js/CorpusAnalysis/QueryBuilder/TokenAttributeBuilderFunctionsQueryBuilder.js
index e11d4731..74d604eb 100644
--- a/app/static/js/CorpusAnalysis/QueryBuilder/TokenAttributeBuilderFunctionsQueryBuilder.js
+++ b/app/static/js/CorpusAnalysis/QueryBuilder/TokenAttributeBuilderFunctionsQueryBuilder.js
@@ -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);
+ }
+ 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();
+ }
- this.resetMaterializeSelection([this.elements.englishPosSelection, this.elements.germanPosSelection, this.elements.simplePosSelection]);
+ createOptionElementForPosAttrSelection(kindOfToken) {
+ let option = document.createElement('option');
+ option.value = kindOfToken;
+ option.text = kindOfToken;
+ this.elements.positionalAttrSelection.appendChild(option);
+ }
- this.tokenChipFactory(tokenQueryPrettyText, tokenQueryCQLText);
- this.tokenChipFactory(conditionText, conditionQueryContent);
- this.setTokenSelection(selectionDefault, optionDeleteList);
+ 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();
}
}
diff --git a/app/templates/corpora/_analysis/concordance.html.j2 b/app/templates/corpora/_analysis/concordance.html.j2
index 23e1c5b6..b160c2fb 100644
--- a/app/templates/corpora/_analysis/concordance.html.j2
+++ b/app/templates/corpora/_analysis/concordance.html.j2
@@ -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">
diff --git a/app/templates/corpora/_analysis/query_builder/_query_builder.html.j2 b/app/templates/corpora/_analysis/query_builder/_query_builder.html.j2
index 836bdf83..ff8e9151 100644
--- a/app/templates/corpora/_analysis/query_builder/_query_builder.html.j2
+++ b/app/templates/corpora/_analysis/query_builder/_query_builder.html.j2
@@ -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>
+ <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>
-
- <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>
+
+ <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 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="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="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="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="hide" id="corpus-analysis-concordance-no-value-message"><i>No value entered!</i></div>
+ <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 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>
- <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>
+ <ul id="corpus-analysis-concordance-character-incidence-modifiers-dropdown" class="dropdown-content">
+ {{ incidence_modifiers_dropdown_content("character") }}
+ </ul>
- </div>
</div>
</div>
--
GitLab