sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-12-25 02:44:18 +00:00
Code Issues Projects Releases Wiki Activity

Update Positional Attribute Modal Query Builder

Browse Source
This commit is contained in:
Inga Kirschnick 2023-08-11 13:55:41 +02:00
parent 1387d80a26
commit 3d38e550a0
10 changed files with 269 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/static/css/queryBuilder.css
View File

@ -75,16 +75,20 @@
color: black; color: black;
} }
#corpus-analysis-concordance-incidence-modifiers-button a{ [data-toggle-area="input-field-options"] a {
background-color: #2FBBAB; margin-right: 10px;
}
#corpus-analysis-concordance-ignore-case-checkbox {
margin-left: 5px;
} }
#corpus-analysis-concordance-incidence-modifiers-dropdown a{ #corpus-analysis-concordance-incidence-modifiers-dropdown a{
background-color: white; background-color: white;
} }
#corpus-analysis-concordance-ignore-case-checkbox { [data-target="corpus-analysis-concordance-incidence-modifiers-dropdown"] {
margin-left: 5px; background-color: #2FBBAB;
} }
#corpus-analysis-concordance-or, #corpus-analysis-concordance-and { #corpus-analysis-concordance-or, #corpus-analysis-concordance-and {

1
app/static/js/CorpusAnalysis/CorpusAnalysisApp.js
View File

@ -93,7 +93,6 @@ class CorpusAnalysisApp {
actionElement.disabled = true; actionElement.disabled = true;
break; break;
case 'SELECT': case 'SELECT':
console.log(actionElement);
actionElement.parentNode.querySelector('input.select-dropdown').disabled = true; actionElement.parentNode.querySelector('input.select-dropdown').disabled = true;
break; break;
default: default:

3
app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js
View File

@ -78,10 +78,7 @@ class CorpusAnalysisConcordance {
}); });
this.elements.userInterfaceForm.addEventListener('change', (event) => { this.elements.userInterfaceForm.addEventListener('change', (event) => {
if (event.target === this.elements.userInterfaceForm['context']) { if (event.target === this.elements.userInterfaceForm['context']) {
console.log(this.settings.context);
console.log(parseInt(this.elements.userInterfaceForm['context'].value));
this.settings.context = parseInt(this.elements.userInterfaceForm['context'].value); this.settings.context = parseInt(this.elements.userInterfaceForm['context'].value);
console.log(this.settings.context);
this.submitForm(); this.submitForm();
} }
if (event.target === this.elements.userInterfaceForm['per-page']) { if (event.target === this.elements.userInterfaceForm['per-page']) {

28
app/static/js/CorpusAnalysis/QueryBuilder.js
View File

@ -4,32 +4,42 @@ class ConcordanceQueryBuilder {
this.elements = new ElementReferencesQueryBuilder(); this.elements = new ElementReferencesQueryBuilder();
this.generalFunctions = new GeneralFunctionsQueryBuilder(this.elements); this.generalFunctions = new GeneralFunctionsQueryBuilder(this.elements);
this.tokenAttributeBuilder = new TokenAttributeBuilderFunctionsQueryBuilder(this.elements); this.tokenAttributeBuilderFunctions = new TokenAttributeBuilderFunctionsQueryBuilder(this.elements);
this.structuralAttributeBuilder = new StructuralAttributeBuilderFunctionsQueryBuilder(this.elements); this.structuralAttributeBuilderFunctions = new StructuralAttributeBuilderFunctionsQueryBuilder(this.elements);
// Event listener for structural attribute modal // Event listener for structural attribute modal
document.querySelectorAll('[data-structural-attr-modal-action-button]').forEach(button => { document.querySelectorAll('[data-structural-attr-modal-action-button]').forEach(button => {
button.addEventListener('click', () => { button.addEventListener('click', () => {
this.structuralAttributeBuilder.actionButtonHandler(button.dataset.structuralAttrModalActionButton); this.structuralAttributeBuilderFunctions.actionButtonInStrucAttrModalHandler(button.dataset.structuralAttrModalActionButton);
}); });
}); });
// Event listener for token attribute modal // Event listener for token attribute modal
this.elements.positionalAttrSelection.addEventListener('change', (event) => { this.elements.positionalAttrSelection.addEventListener('change', (event) => {
this.generalFunctions.toggleClass(['word', 'lemma', 'english-pos', 'german-pos', 'simple-pos'], 'hide', 'add'); this.generalFunctions.toggleClass(['word', 'lemma', 'english-pos', 'german-pos', 'simple-pos'], 'hide', 'add');
this.generalFunctions.toggleClass([event.target.value], 'hide', 'remove'); if (event.target.value !== 'empty-token') {
this.generalFunctions.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add'); this.generalFunctions.toggleClass([event.target.value], 'hide', 'remove');
this.generalFunctions.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
this.tokenAttributeBuilderFunctions.resetMaterializeSelection([this.elements.englishPosSelection, this.elements.germanPosSelection, this.elements.simplePosSelection]);
}
if (event.target.value === 'word' || event.target.value === 'lemma') {
this.generalFunctions.toggleClass(['input-field-options'], 'hide', 'remove');
} else if (event.target.value === 'empty-token'){
this.tokenAttributeBuilderFunctions.addTokenToQuery();
} else {
this.generalFunctions.toggleClass(['input-field-options'], 'hide', 'add');
}
}); });
// Options for positional attribute selection // Options for positional attribute selection
document.querySelectorAll('.positional-attr-options-action-button[data-options-action]').forEach(button => { document.querySelectorAll('.positional-attr-options-action-button[data-options-action]').forEach(button => {
button.addEventListener('click', () => {this.tokenAttributeBuilder.actionButtonHandler(button.dataset.optionsAction);}); button.addEventListener('click', () => {this.tokenAttributeBuilderFunctions.actionButtonInOptionSectionHandler(button.dataset.optionsAction);});
}); });
document.querySelectorAll('.incidence-modifier-selection[data-incidence-modifier]').forEach(button => { document.querySelectorAll('.incidence-modifier-selection[data-incidence-modifier]').forEach(button => {
button.addEventListener('click', () => {this.tokenAttributeBuilder.incidenceModifierHandler(button);}); button.addEventListener('click', () => {this.tokenAttributeBuilderFunctions.incidenceModifierHandler(button);});
}); });
document.querySelectorAll('.n-m-submit-button').forEach(button => { document.querySelectorAll('.n-m-submit-button').forEach(button => {
button.addEventListener('click', () => { button.addEventListener('click', () => {
this.tokenAttributeBuilder.nmSubmitHandler(button.dataset.modalId); this.tokenAttributeBuilderFunctions.nmSubmitHandler(button.dataset.modalId);
}); });
}); });
@ -46,7 +56,7 @@ class ConcordanceQueryBuilder {
document.querySelector('#corpus-analysis-concordance-positional-attr-modal'), document.querySelector('#corpus-analysis-concordance-positional-attr-modal'),
{ {
onOpenStart: () => { onOpenStart: () => {
this.tokenAttributeBuilder.optionToggleHandler(); this.tokenAttributeBuilderFunctions.optionToggleHandler();
} }
} }
); );

108
app/static/js/CorpusAnalysis/QueryBuilder/GeneralFunctionsQueryBuilder.js
View File

@ -22,76 +22,60 @@ class GeneralFunctionsQueryBuilder {
queryChipElement.setAttribute('data-query', queryText); queryChipElement.setAttribute('data-query', queryText);
queryChipElement.setAttribute('draggable', 'true'); queryChipElement.setAttribute('draggable', 'true');
queryChipElement.addEventListener('click', () => {this.deleteAttr(queryChipElement);}); queryChipElement.addEventListener('click', () => this.deleteAttr(queryChipElement));
queryChipElement.addEventListener('dragstart', (event) => { queryChipElement.addEventListener('dragstart', this.handleDragStart.bind(this, queryChipElement));
// selects all nodes without target class queryChipElement.addEventListener('dragend', this.handleDragEnd);
let queryChips = this.elements.queryInputField.querySelectorAll('.query-component');
// Adds a target chip in front of all draggable childnodes
setTimeout(() => {
let targetChipElement = Utils.HTMLToElement('<span class="chip drop-target">Drop here</span>');
for (let element of queryChips) {
if (element === queryChipElement.nextSibling) {continue;}
let targetChipClone = targetChipElement.cloneNode(true);
if (element === queryChipElement) {
// If the dragged element is not at the very end, a target chip is also inserted at the end
if (queryChips[queryChips.length - 1] !== element) {
queryChips[queryChips.length - 1].insertAdjacentElement('afterend', targetChipClone);
}
} else {
element.insertAdjacentElement('beforebegin', targetChipClone);
}
targetChipClone.addEventListener('dragover', (event) => {
event.preventDefault();
});
targetChipClone.addEventListener('dragenter', (event) => {
event.preventDefault();
event.target.style.borderStyle = 'solid dotted';
});
targetChipClone.addEventListener('dragleave', (event) => {
event.preventDefault();
event.target.style.borderStyle = 'hidden';
});
targetChipClone.addEventListener('drop', (event) => {
let dropzone = event.target;
dropzone.parentElement.replaceChild(queryChipElement, dropzone);
this.queryPreviewBuilder();
});
}
}, 0);
});
queryChipElement.addEventListener('dragend', (event) => {
let targets = document.querySelectorAll('.drop-target');
for (let target of targets) {
target.remove();
}
});
// Ensures that metadata is always at the end of the query:
// const lastChild = this.elements.queryInputFieldInstance.lastChild;
// const isLastChildTextAnnotation = lastChild && lastChild.dataset.type === 'text-annotation';
// console.log(isLastChildTextAnnotation);
// console.log(lastChild);
// if (!isLastChildTextAnnotation) {
// this.elements.queryInputFieldInstance.appendChild(queryChipElement);
// } else {
// this.elements.queryInputFieldInstance.insertBefore(queryChipElement, lastChild);
// }
this.queryPreviewBuilder(); this.queryPreviewBuilder();
}
// Shows a hint about possible functions for editing the query at the first added element in the query handleDragStart(queryChipElement, event) {
// if (this.elements.queryInputFieldInstance.childNodes.length === 1) { let queryChips = this.elements.queryInputField.querySelectorAll('.query-component');
// app.flash('You can edit your query by deleting individual elements or moving them via drag and drop.'); setTimeout(() => {
// } let targetChipElement = Utils.HTMLToElement('<span class="chip drop-target">Drop here</span>');
for (let element of queryChips) {
if (element === queryChipElement.nextSibling) {continue;}
let targetChipClone = targetChipElement.cloneNode(true);
if (element === queryChipElement && queryChips[queryChips.length - 1] !== element) {
queryChips[queryChips.length - 1].insertAdjacentElement('afterend', targetChipClone);
} else {
element.insertAdjacentElement('beforebegin', targetChipClone);
}
this.addDragDropListeners(targetChipClone, queryChipElement);
}
}, 0);
}
handleDragEnd(event) {
document.querySelectorAll('.drop-target').forEach(target => target.remove());
}
addDragDropListeners(targetChipClone, queryChipElement) {
targetChipClone.addEventListener('dragover', (event) => {
event.preventDefault();
});
targetChipClone.addEventListener('dragenter', (event) => {
event.preventDefault();
event.target.style.borderStyle = 'solid dotted';
});
targetChipClone.addEventListener('dragleave', (event) => {
event.preventDefault();
event.target.style.borderStyle = 'hidden';
});
targetChipClone.addEventListener('drop', (event) => {
let dropzone = event.target;
dropzone.parentElement.replaceChild(queryChipElement, dropzone);
this.elements.queryInputFieldInstance.$chips = Array.from(this.elements.queryInputField.querySelectorAll('.chip'));
this.queryPreviewBuilder();
});
} }
queryPreviewBuilder() { queryPreviewBuilder() {
let queryPreview = document.querySelector('#corpus-analysis-concordance-query-preview'); let queryPreview = document.querySelector('#corpus-analysis-concordance-query-preview');
let queryChipElements = Array.from(Object.values(this.elements.queryInputFieldInstance.$chips)); let queryChipElements = Array.from(Object.values(this.elements.queryInputFieldInstance.$chips));
queryChipElements.pop(); if (!isNaN(queryChipElements[queryChipElements.length - 1])) {
queryChipElements.pop();
}
this.elements.queryInputFieldContent = []; this.elements.queryInputFieldContent = [];
queryChipElements.forEach(element => { queryChipElements.forEach(element => {

2
app/static/js/CorpusAnalysis/QueryBuilder/StructuralAttributeBuilderFunctionsQueryBuilder.js
View File

@ -4,7 +4,7 @@ class StructuralAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQu
this.elements = elements; this.elements = elements;
} }
actionButtonHandler(action) { actionButtonInStrucAttrModalHandler(action) {
switch (action) { switch (action) {
case 'sentence': case 'sentence':
break; break;

210
app/static/js/CorpusAnalysis/QueryBuilder/TokenAttributeBuilderFunctionsQueryBuilder.js
View File

@ -6,24 +6,34 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
this.elements.tokenSubmitButton.addEventListener('click', () => {this.addTokenToQuery();}); this.elements.tokenSubmitButton.addEventListener('click', () => {this.addTokenToQuery();});
this.elements.wordInput.addEventListener('input', () => {this.optionToggleHandler();}); this.elements.wordInput.addEventListener('input', () => {this.optionToggleHandler();});
this.elements.lemmaInput.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();});
} }
lemmaOrWordInputCheck() { tokenInputCheck() {
let input; let input;
if (document.querySelector('[data-toggle-area="word"]').classList.contains('hide') === false) { if (!document.querySelector('[data-toggle-area="word"]').classList.contains('hide')) {
input = this.elements.wordInput; input = this.elements.wordInput;
} else { } else if (!document.querySelector('[data-toggle-area="lemma"]').classList.contains('hide')){
input = this.elements.lemmaInput; 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; return input;
} }
optionToggleHandler() { optionToggleHandler() {
let input = this.lemmaOrWordInputCheck() let input;
input = this.tokenInputCheck();
if (input.value === '') { if (input.value === '' || input.value === 'default') {
this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add'); this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
} else { } else {
this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'remove'); this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'remove');
@ -58,17 +68,13 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
addTokenToQuery() { addTokenToQuery() {
let c = this.elements.ignoreCaseCheckbox.checked ? ' %c' : ''; let c = this.elements.ignoreCaseCheckbox.checked ? ' %c' : '';
let tokenQueryContent = ''; let tokenQueryPrettyText = '';
let tokenQueryText = ''; let tokenQueryCQLText = '';
this.elements.isTokenQueryInvalid = false; this.elements.isTokenQueryInvalid = false;
let tokenIsEmpty = false;
this.elements.tokenQuery.childNodes.forEach(element => { this.elements.tokenQuery.childNodes.forEach(element => {
tokenQueryContent += ' ' + element.firstChild.data + ' '; tokenQueryPrettyText += ' ' + element.firstChild.data + ' ';
tokenQueryText += decodeURI(element.dataset.tokentext); tokenQueryCQLText += decodeURI(element.dataset.tokentext);
if (element.innerText.indexOf('empty token') !== -1) {
tokenIsEmpty = true;
}
}); });
switch (this.elements.positionalAttrSelection.value) { switch (this.elements.positionalAttrSelection.value) {
@ -76,8 +82,8 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
if (this.elements.wordInput.value === '') { if (this.elements.wordInput.value === '') {
this.disableTokenSubmit(); this.disableTokenSubmit();
} else { } else {
tokenQueryContent += `word=${this.elements.wordInput.value}${c}`; tokenQueryPrettyText += `word=${this.elements.wordInput.value}${c}`;
tokenQueryText += `word="${this.elements.wordInput.value}"${c}`; tokenQueryCQLText += `word="${this.elements.wordInput.value}"${c}`;
this.elements.wordInput.value = ''; this.elements.wordInput.value = '';
} }
break; break;
@ -85,17 +91,17 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
if (this.elements.lemmaInput.value === '') { if (this.elements.lemmaInput.value === '') {
this.disableTokenSubmit(); this.disableTokenSubmit();
} else { } else {
tokenQueryContent += `lemma=${this.elements.lemmaInput.value}${c}`; tokenQueryPrettyText += `lemma=${this.elements.lemmaInput.value}${c}`;
tokenQueryText += `lemma="${this.elements.lemmaInput.value}"${c}`; tokenQueryCQLText += `lemma="${this.elements.lemmaInput.value}"${c}`;
this.elements.lemmaInput.value = ''; this.elements.lemmaInput.value = '';
} }
break; break;
case 'english-pos': case 'english-pos':
if (this.elements.englishPos.value === 'default') { if (this.elements.englishPosSelection.value === 'default') {
this.disableTokenSubmit(); this.disableTokenSubmit();
} else { } else {
tokenQueryContent += `pos=${this.elements.englishPosSelection.value}`; tokenQueryPrettyText += `pos=${this.elements.englishPosSelection.value}`;
tokenQueryText += `pos="${this.elements.englishPosSelection.value}"`; tokenQueryCQLText += `pos="${this.elements.englishPosSelection.value}"`;
this.elements.englishPosSelection.value = ''; this.elements.englishPosSelection.value = '';
} }
break; break;
@ -103,8 +109,8 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
if (this.elements.germanPosSelection.value === 'default') { if (this.elements.germanPosSelection.value === 'default') {
this.disableTokenSubmit(); this.disableTokenSubmit();
} else { } else {
tokenQueryContent += `pos=${this.elements.germanPosSelection.value}`; tokenQueryPrettyText += `pos=${this.elements.germanPosSelection.value}`;
tokenQueryText += `pos="${this.elements.germanPosSelection.value}"`; tokenQueryCQLText += `pos="${this.elements.germanPosSelection.value}"`;
this.elements.germanPosSelection.value = ''; this.elements.germanPosSelection.value = '';
} }
break; break;
@ -112,53 +118,28 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
if (this.elements.simplePosSelection.value === 'default') { if (this.elements.simplePosSelection.value === 'default') {
this.disableTokenSubmit(); this.disableTokenSubmit();
} else { } else {
tokenQueryContent += `simple_pos=${this.elements.simplePosSelection.value}`; tokenQueryPrettyText += `simple_pos=${this.elements.simplePosSelection.value}`;
tokenQueryText += `simple_pos="${this.elements.simplePosSelection.value}"`; tokenQueryCQLText += `simple_pos="${this.elements.simplePosSelection.value}"`;
this.elements.simplePosSelection.value = ''; this.elements.simplePosSelection.value = '';
} }
break; break;
case 'empty-token':
tokenQueryPrettyText += 'empty token';
default: default:
break; break;
} }
// isTokenQueryInvalid looks if a valid value is passed. If the input fields/dropdowns are empty (isTokenQueryInvalid === true), no token is added. // 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) { if (this.elements.isTokenQueryInvalid === false) {
// Square brackets are added only if it is not an empty token (where they are already present). tokenQueryCQLText = '[' + tokenQueryCQLText + ']';
if (tokenIsEmpty === false) { this.queryChipFactory('token', tokenQueryPrettyText, tokenQueryCQLText);
tokenQueryText = '[' + tokenQueryText + ']';
}
this.queryChipFactory('token', tokenQueryContent, tokenQueryText);
this.resetPositionalAttrModal(); this.resetPositionalAttrModal();
this.elements.positionalAttrModal.close(); this.elements.positionalAttrModal.close();
} }
} }
resetPositionalAttrModal() { actionButtonInOptionSectionHandler(elem) {
let originalSelectionList = let input = this.tokenInputCheck();
`
<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>
<option value="empty-token">empty token</option>
`;
document.querySelector('#corpus-analysis-concordance-positional-attr-selection').innerHTML = originalSelectionList;
this.elements.tokenQuery.innerHTML = '';
this.toggleClass(['word', 'lemma', 'english-pos', 'german-pos', 'simple-pos'], 'hide', 'add');
this.toggleClass(['word'], 'hide', 'remove');
this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
document.querySelector(`#corpus-analysis-concordance-positional-attr-selection option[value="word"]`).selected = true;
let instance = M.FormSelect.getInstance(document.getElementById('positional-attr-selection'));
instance.destroy();
M.FormSelect.init(document.getElementById('positional-attr-selection'));
}
actionButtonHandler(elem) {
let input = this.lemmaOrWordInputCheck();
switch (elem) { switch (elem) {
case 'option-group': case 'option-group':
input.value += '(option1|option2)'; input.value += '(option1|option2)';
@ -189,31 +170,32 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
this.tokenChipFactory(elem.innerText, elem.dataset.token); this.tokenChipFactory(elem.innerText, elem.dataset.token);
break; break;
case 'english-pos': case 'english-pos':
this.tokenChipFactory(`pos=${this.elements.englishPos.value}`, `pos="${this.elements.englishPos.value}"`); this.tokenChipFactory(`pos=${this.elements.englishPosSelection.value}`, `pos="${this.elements.englishPosSelection.value}"`);
this.tokenChipFactory(elem.innerText, elem.dataset.token); this.tokenChipFactory(elem.innerText, elem.dataset.token);
this.elements.tokenQueryFilled = true;
break; break;
case 'german-pos': case 'german-pos':
this.tokenChipFactory(`pos=${this.elements.germanPos.value}`, `pos="${this.elements.germanPos.value}"`); this.tokenChipFactory(`pos=${this.elements.germanPosSelection.value}`, `pos="${this.elements.germanPosSelection.value}"`);
this.tokenChipFactory(elem.innerText, elem.dataset.token); this.tokenChipFactory(elem.innerText, elem.dataset.token);
this.elements.tokenQueryFilled = true;
break; break;
case 'simple-pos': case 'simple-pos':
this.tokenChipFactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos="${this.elements.simplePos.value}"`); this.tokenChipFactory(`simple_pos=${this.elements.simplePosSelection.value}`, `simple_pos="${this.elements.simplePosSelection.value}"`);
this.tokenChipFactory(elem.innerText, elem.dataset.token); this.tokenChipFactory(elem.innerText, elem.dataset.token);
this.elements.tokenQueryFilled = true;
break; break;
default: default:
let input = this.lemmaOrWordInputCheck(); let input = this.tokenInputCheck();
input.value += elem.dataset.token; input.value += elem.dataset.token;
break; break;
} }
if (this.elements.positionalAttrSelection.value !== "word" && this.elements.positionalAttrSelection.value !== "lemma") {
this.toggleClass([this.elements.positionalAttrSelection.value], "hide", "add");
}
} }
nmSubmitHandler(modalId) { nmSubmitHandler(modalId) {
let modal = document.querySelector(`#${modalId}`); let modal = document.querySelector(`#${modalId}`);
let input_n = modal.querySelector('.n-m-input[data-value-type="n"]').value; let input_n = modal.querySelector('.n-m-input[data-value-type="n"]').value;
let input_m = modalId === 'between-nm-modal' ? ',' + modal.querySelector('.n-m-input[data-value-type="m"]').value : ''; let input_m = modalId === 'corpus-analysis-concordance-between-nm-modal' ? ',' + modal.querySelector('.n-m-input[data-value-type="m"]').value : '';
let input = `${input_n}${input_m}`; let input = `${input_n}${input_m}`;
let instance = M.Modal.getInstance(modal); let instance = M.Modal.getInstance(modal);
@ -232,69 +214,107 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
} }
conditionHandler(conditionText, conditionQueryContent) { conditionHandler(conditionText, conditionQueryContent) {
let tokenQueryContent; let tokenQueryPrettyText;
let tokenQueryText; let tokenQueryCQLText;
let c = this.elements.ignoreCaseCheckbox.checked ? ' %c' : ''; let c = this.elements.ignoreCaseCheckbox.checked ? ' %c' : '';
let selectionDefault = "word";
let optionDeleteList = [];
switch (this.elements.positionalAttrSelection.value) { switch (this.elements.positionalAttrSelection.value) {
case 'word': case 'word':
tokenQueryContent = `word=${this.elements.wordInput.value}${c}`; tokenQueryPrettyText = `word=${this.elements.wordInput.value}${c}`;
tokenQueryText = `word="${this.elements.wordInput.value}"${c}`; tokenQueryCQLText = `word="${this.elements.wordInput.value}"${c}`;
this.elements.wordInput.value = ''; this.elements.wordInput.value = '';
if (conditionText === 'and') {
selectionDefault = "english-pos";
optionDeleteList = ['word', 'lemma', 'empty-token'];
}
break; break;
case 'lemma': case 'lemma':
tokenQueryContent = `lemma=${this.elements.lemmaInput.value}${c}`; tokenQueryPrettyText = `lemma=${this.elements.lemmaInput.value}${c}`;
tokenQueryText = `lemma="${this.elements.lemmaInput.value}"${c}`; tokenQueryCQLText = `lemma="${this.elements.lemmaInput.value}"${c}`;
this.elements.lemmaInput.value = ''; this.elements.lemmaInput.value = '';
if (conditionText === 'and') {
selectionDefault = "english-pos";
optionDeleteList = ['word', 'lemma', 'empty-token'];
}
break; break;
case 'english-pos': case 'english-pos':
tokenQueryContent = `pos=${this.elements.englishPos.value}`; tokenQueryPrettyText = `pos=${this.elements.englishPosSelection.value}`;
tokenQueryText = `pos="${this.elements.englishPos.value}"`; tokenQueryCQLText = `pos="${this.elements.englishPosSelection.value}"`;
this.elements.englishPos.value = ''; this.elements.englishPosSelection.value = '';
break; break;
case 'german-pos': case 'german-pos':
tokenQueryContent = `pos=${this.elements.germanPos.value}`; tokenQueryPrettyText = `pos=${this.elements.germanPosSelection.value}`;
tokenQueryText = `pos="${this.elements.germanPos.value}"`; tokenQueryCQLText = `pos="${this.elements.germanPosSelection.value}"`;
this.elements.germanPos.value = ''; this.elements.germanPosSelection.value = '';
break; break;
case 'simple-pos': case 'simple-pos':
tokenQueryContent = `simple_pos=${this.elements.simplePos.value}`; tokenQueryPrettyText = `simple_pos=${this.elements.simplePosSelection.value}`;
tokenQueryText = `simple_pos="${this.elements.simplePos.value}"`; tokenQueryCQLText = `simple_pos="${this.elements.simplePosSelection.value}"`;
this.elements.simplePos.value = ''; this.elements.simplePosSelection.value = '';
break; break;
default: default:
break; break;
} }
this.tokenChipFactory(tokenQueryContent, tokenQueryText); // 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');
}
}
this.resetMaterializeSelection([this.elements.englishPosSelection, this.elements.germanPosSelection, this.elements.simplePosSelection]);
this.tokenChipFactory(tokenQueryPrettyText, tokenQueryCQLText);
this.tokenChipFactory(conditionText, conditionQueryContent); this.tokenChipFactory(conditionText, conditionQueryContent);
this.setTokenSelection(selectionDefault, optionDeleteList); this.setTokenSelection(selectionDefault, optionDeleteList);
} }
setTokenSelection(selection, optionDeleteList) { setTokenSelection(selection, optionDeleteList) {
optionDeleteList.forEach(option => { optionDeleteList.forEach(option => {
document.querySelector(`#corpus-analysis-concordance-positional-attr-selection option[value=${option}]`).remove(); this.elements.positionalAttrSelection.querySelector(`option[value=${option}]`).remove();
}); });
document.querySelector(`#corpus-analysis-concordance-positional-attr-selection option[value=${selection}]`).selected = true; this.resetMaterializeSelection([this.elements.positionalAttrSelection], selection);
let instance = M.FormSelect.getInstance(document.getElementById('positional-attr-selection'));
instance.destroy();
M.FormSelect.init(document.getElementById('positional-attr-selection'));
this.toggleClass(['word', 'lemma', 'english-pos', 'german-pos', 'simple-pos'], 'hide', 'add'); this.toggleClass(['word', 'lemma', 'english-pos', 'german-pos', 'simple-pos'], 'hide', 'add');
this.toggleClass([selection], 'hide', 'remove'); this.toggleClass([selection], 'hide', 'remove');
this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add'); 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');
}
} }
resetPositionalAttrModal() {
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>
<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.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
document.querySelector('#corpus-analysis-concordance-positional-attr-selection option[value="word"]').selected = true;
this.resetMaterializeSelection([this.elements.englishPosSelection, this.elements.germanPosSelection, this.elements.simplePosSelection]);
this.resetMaterializeSelection([this.elements.positionalAttrSelection], "word");
}
resetMaterializeSelection(selectionElements, value = "default") {
selectionElements.forEach(selectionElement => {
selectionElement.querySelector(`option[value=${value}]`).selected = true;
let instance = M.FormSelect.getInstance(selectionElement);
instance.destroy();
M.FormSelect.init(selectionElement);
})
}
} }

25
app/templates/corpora/_analysis/concordance.html.j2
View File

@ -17,7 +17,7 @@
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<div class="row"> <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> <span class="card-title">Query <i class="material-icons left" style="font-size: inherit;">search</i></span>
</div> </div>
<div class="col s2"> <div class="col s2">
@ -30,12 +30,23 @@
</div> </div>
</div> </div>
</div> </div>
<div id="corpus-analysis-concordance-expert-mode-display" class="hide"> <form id="corpus-analysis-concordance-form">
{{ expert_mode.card_content() }} <div id="corpus-analysis-concordance-expert-mode-display" class="hide">
</div> {{ expert_mode.card_content() }}
<div id="corpus-analysis-concordance-query-builder-display"> </div>
{{ query_builder.card_content() }} <div id="corpus-analysis-concordance-query-builder-display">
</div> {{ query_builder.card_content() }}
</div>
<div class="row">
<div class="col s12 right-align">
<p class="hide-on-small-only">&nbsp;</p>
<button class="btn waves-effect waves-light corpus-analysis-action" id="corpus-analysis-concordance-form-submit" type="submit" name="submit">
Send
<i class="material-icons right">send</i>
</button>
</div>
</div>
</form>
</div> </div>
</div> </div>

35
app/templates/corpora/_analysis/query_builder/_expert_mode.html.j2
View File

@ -1,26 +1,17 @@
{% macro card_content(id_prefix) %} {% macro card_content(id_prefix) %}
<div class="row"> <div class="row">
<form id="corpus-analysis-concordance-form"> <div class="input-field col s12 m9">
<div class="input-field col s12 m9"> <i class="material-icons prefix">search</i>
<i class="material-icons prefix">search</i> <input class="validate corpus-analysis-action" id="corpus-analysis-concordance-form-query" name="query" type="text" required pattern=".*\S+.*" placeholder="Type in your query or use the Query Builder on the right"></input>
<input class="validate corpus-analysis-action" id="corpus-analysis-concordance-form-query" name="query" type="text" required pattern=".*\S+.*" placeholder="Type in your query or use the Query Builder on the right"></input> <span class="error-color-text helper-text hide" id="corpus-analysis-concordance-error"></span>
<span class="error-color-text helper-text hide" id="corpus-analysis-concordance-error"></span> <a class="modal-trigger" data-manual-modal-chapter="manual-modal-cqp-query-language" href="#manual-modal" style="margin-left: 40px;"><i class="material-icons" style="font-size: inherit;">help</i> Corpus Query Language tutorial</a>
<a class="modal-trigger" data-manual-modal-chapter="manual-modal-cqp-query-language" href="#manual-modal" style="margin-left: 40px;"><i class="material-icons" style="font-size: inherit;">help</i> Corpus Query Language tutorial</a> <span> | </span>
<span> | </span> <a class="modal-trigger" data-manual-modal-chapter="manual-modal-tagsets" href="#manual-modal"><i class="material-icons" style="font-size: inherit;">info</i> Tagsets</a>
<a class="modal-trigger" data-manual-modal-chapter="manual-modal-tagsets" href="#manual-modal"><i class="material-icons" style="font-size: inherit;">info</i> Tagsets</a> </div>
</div> <div class="input-field col s12 m3">
<div class="input-field col s12 m3"> <i class="material-icons prefix">arrow_forward</i>
<i class="material-icons prefix">arrow_forward</i> <input class="validate corpus-analysis-action" id="corpus-analysis-concordance-form-subcorpus-name" name="subcorpus-name" type="text" required pattern="^[A-Z][a-z0-9\-]*" value="Last"></input>
<input class="validate corpus-analysis-action" id="corpus-analysis-concordance-form-subcorpus-name" name="subcorpus-name" type="text" required pattern="^[A-Z][a-z0-9\-]*" value="Last"></input> <label for="corpus-analysis-concordance-form-subcorpus-name">Subcorpus name</label>
<label for="corpus-analysis-concordance-form-subcorpus-name">Subcorpus name</label> </div>
</div>
<div class="col s12 m3 l3 right-align">
<p class="hide-on-small-only">&nbsp;</p>
<button class="btn waves-effect waves-light corpus-analysis-action" id="corpus-analysis-concordance-form-submit" type="submit" name="submit">
Send
<i class="material-icons right">send</i>
</button>
</div>
</form>
</div> </div>
{% endmacro %} {% endmacro %}

113
app/templates/corpora/_analysis/query_builder/_query_builder.html.j2
View File

@ -1,47 +1,36 @@
{% macro card_content(id_prefix) %} {% macro card_content(id_prefix) %}
<form id="corpus-analysis-concordance-form"> <div class="row">
<div class="row"> <div class="col s9">
<div class="col s9"> <div class="chips" id="corpus-analysis-concordance-form-query-builder"></div>
<div class="chips" id="corpus-analysis-concordance-form-query-builder"></div>
</div>
<div class="input-field col s3">
<i class="material-icons prefix">arrow_forward</i>
<input class="validate corpus-analysis-action" id="corpus-analysis-concordance-form-subcorpus-name" name="subcorpus-name" type="text" required pattern="^[A-Z][a-z0-9\-]*" value="Last"></input>
<label for="corpus-analysis-concordance-form-subcorpus-name">Subcorpus name</label>
</div>
</div> </div>
<div class="row"> <div class="input-field col s3">
<div class="col s12"> <i class="material-icons prefix">arrow_forward</i>
<span class="error-color-text helper-text hide" id="corpus-analysis-concordance-error"></span> <input class="validate corpus-analysis-action" id="corpus-analysis-concordance-form-subcorpus-name" name="subcorpus-name" type="text" required pattern="^[A-Z][a-z0-9\-]*" value="Last"></input>
<a class="modal-trigger" data-manual-modal-chapter="manual-modal-cqp-query-language" href="#manual-modal"><i class="material-icons" style="font-size: inherit;">help</i> Corpus Query Language tutorial</a> <label for="corpus-analysis-concordance-form-subcorpus-name">Subcorpus name</label>
<span> | </span>
<a class="modal-trigger" data-manual-modal-chapter="manual-modal-tagsets" href="#manual-modal"><i class="material-icons" style="font-size: inherit;">info</i> Tagsets</a>
</div>
</div> </div>
<div class="row"> </div>
<div class="col s12 hide"> <div class="row">
<p><i> Preview:</i></p> <div class="col s12">
<p id="corpus-analysis-concordance-query-preview"></p> <span class="error-color-text helper-text hide" id="corpus-analysis-concordance-error"></span>
<br> <a class="modal-trigger" data-manual-modal-chapter="manual-modal-cqp-query-language" href="#manual-modal"><i class="material-icons" style="font-size: inherit;">help</i> Corpus Query Language tutorial</a>
</div> <span> | </span>
<a class="modal-trigger" data-manual-modal-chapter="manual-modal-tagsets" href="#manual-modal"><i class="material-icons" style="font-size: inherit;">info</i> Tagsets</a>
</div> </div>
<div class="row"> </div>
<div class="col s12"> <div class="row">
<p></p> <div class="col s12 hide">
<a class="btn waves-effect waves-light tooltipped modal-trigger" href="#corpus-analysis-concordance-positional-attr-modal" 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> <p><i> Preview:</i></p>
<a class="btn waves-effect waves-light tooltipped modal-trigger" href="#corpus-analysis-concordance-structural-attr-modal" 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> <p id="corpus-analysis-concordance-query-preview"></p>
</div> <br>
</div> </div>
<div class="row"> </div>
<div class="col s12 right-align"> <div class="row">
<p class="hide-on-small-only">&nbsp;</p> <div class="col s12">
<button class="btn waves-effect waves-light corpus-analysis-action" id="corpus-analysis-concordance-form-submit" type="submit" name="submit"> <p></p>
Send <a class="btn waves-effect waves-light tooltipped modal-trigger" href="#corpus-analysis-concordance-positional-attr-modal" 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>
<i class="material-icons right">send</i> <a class="btn waves-effect waves-light tooltipped modal-trigger" href="#corpus-analysis-concordance-structural-attr-modal" 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>
</button>
</div>
</div> </div>
</form> </div>
{% endmacro %} {% endmacro %}
{% macro structural_attribute_modal(id_prefix) %} {% macro structural_attribute_modal(id_prefix) %}
@ -162,17 +151,17 @@
<div id="corpus-analysis-concordance-token-query"></div> <div id="corpus-analysis-concordance-token-query"></div>
<div id="corpus-analysis-concordance-word-builder" data-toggle-area="word"> <div id="corpus-analysis-concordance-word-builder" data-toggle-area="word">
<div class= "input-field col s3 l4"> <div class= "input-field col s3 l4">
<i class="material-icons prefix">mode_edit</i> <i class="material-icons prefix">mode_edit</i>
<input placeholder="Type in your word" type="text" id="corpus-analysis-concordance-word-input"> <input placeholder="Type in your word" type="text" id="corpus-analysis-concordance-word-input">
</div> </div>
</div> </div>
<div id="corpus-analysis-concordance-lemma-builder" class="hide" data-toggle-area="lemma"> <div id="corpus-analysis-concordance-lemma-builder" class="hide" data-toggle-area="lemma">
<div class= "input-field col s3 l4"> <div class= "input-field col s3 l4">
<i class="material-icons prefix">mode_edit</i> <i class="material-icons prefix">mode_edit</i>
<input placeholder="Type in your lemma" type="text" id="corpus-analysis-concordance-lemma-input"> <input placeholder="Type in your lemma" type="text" id="corpus-analysis-concordance-lemma-input">
</div> </div>
</div> </div>
<div id="corpus-analysis-concordance-english-pos-builder" class="hide" data-toggle-area="english-pos"> <div id="corpus-analysis-concordance-english-pos-builder" class="hide" data-toggle-area="english-pos">
@ -347,14 +336,22 @@
</div> </div>
<p></p> <p></p>
<div class="row"> <div class="row">
<div id="corpus-analysis-concordance-input-options" class="col s5 m5 l5 xl4"> <div class="col s6" data-toggle-area="input-field-options">
<a class="btn-small waves-effect waves-light tooltipped positional-attr-options-action-button" data-toggle-area="wildcard-char" 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="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-toggle-area="option-group" data-options-action="option-group" data-position="top" data-tooltip="Find character sequences from a list of options">Option Group</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>
</div>
<div class="col s3 m3 l3 xl3" id="corpus-analysis-concordance-incidence-modifiers-button">
<a class="dropdown-trigger btn-small waves-effect waves-light disabled" href="#" data-target="corpus-analysis-concordance-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> <a class="dropdown-trigger btn-small waves-effect waves-light disabled" href="#" data-target="corpus-analysis-concordance-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>
<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-incidence-modifiers-dropdown" class="dropdown-content"> <ul id="corpus-analysis-concordance-incidence-modifiers-dropdown" class="dropdown-content">
<li><a class="tooltipped incidence-modifier-selection" data-token="+" data-incidence-modifier="one-or-more" data-position ="top" data-tooltip="...occurrences of the character/token before">one or more (+)</a></li> <li><a class="tooltipped incidence-modifier-selection" data-token="+" data-incidence-modifier="one-or-more" data-position ="top" data-tooltip="...occurrences of the character/token before">one or more (+)</a></li>
<li><a class="tooltipped incidence-modifier-selection" data-token="*" data-incidence-modifier="zero-or-more" data-position ="top" data-tooltip="...occurrences of the character/token before">zero or more (*)</a></li> <li><a class="tooltipped incidence-modifier-selection" data-token="*" data-incidence-modifier="zero-or-more" data-position ="top" data-tooltip="...occurrences of the character/token before">zero or more (*)</a></li>
@ -363,18 +360,6 @@
<li><a class="modal-trigger tooltipped" href="#corpus-analysis-concordance-between-nm-modal" data-position ="top" data-tooltip="...occurrences of the character/token before">between n and m ({n,m})</a></li> <li><a class="modal-trigger tooltipped" href="#corpus-analysis-concordance-between-nm-modal" data-position ="top" data-tooltip="...occurrences of the character/token before">between n and m ({n,m})</a></li>
</ul> </ul>
<div class="col s2 m2 l2 xl2">
<p>
<label>
<input type="checkbox" class="filled-in" data-toggle-area="ignore-case-checkbox" id="corpus-analysis-concordance-ignore-case-checkbox"/>
<span>Ignore Case</span>
</label>
</p>
</div>
<div class="col s2 m2 l2 xl2" id="corpus-analysis-concordance-condition-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>
</div> </div>
</div> </div>
</div> </div>