update query builder code to fit the new style

This commit is contained in:
Patrick Jentsch 2023-11-13 14:20:19 +01:00
parent d298b200dc
commit ff1bcb40f3
7 changed files with 67 additions and 84 deletions

View File

@ -1,4 +1,4 @@
class ElementReferencesQueryBuilder { nopaque.corpus_analysis.query_builder.ElementReferences = class ElementReferences {
constructor() { constructor() {
// General Elements // General Elements
this.queryInputField = document.querySelector('#corpus-analysis-concordance-query-builder-input-field'); this.queryInputField = document.querySelector('#corpus-analysis-concordance-query-builder-input-field');
@ -25,4 +25,4 @@ class ElementReferencesQueryBuilder {
this.ignoreCaseCheckbox = document.querySelector('#corpus-analysis-concordance-ignore-case-checkbox'); this.ignoreCaseCheckbox = document.querySelector('#corpus-analysis-concordance-ignore-case-checkbox');
} }
} };

View File

@ -1,15 +1 @@
class ConcordanceQueryBuilder { nopaque.corpus_analysis.query_builder = {};
constructor() {
this.elements = new ElementReferencesQueryBuilder();
this.extensions = {
generalFunctions: new GeneralQueryBuilderFunctions(this, this.elements),
structuralAttributeBuilderFunctions: new StructuralAttributeBuilderFunctions(this, this.elements),
tokenAttributeBuilderFunctions: new TokenAttributeBuilderFunctions(this, this.elements),
};
}
}

View File

@ -1,9 +1,6 @@
class GeneralQueryBuilderFunctions { nopaque.corpus_analysis.query_builder.QueryBuilder = class QueryBuilder {
name = 'General Query Builder Functions'; constructor() {
this.elements = new nopaque.corpus_analysis.query_builder.ElementReferences();
constructor(app, elements) {
this.app = app;
this.elements = elements;
this.incidenceModifierEventListeners(); this.incidenceModifierEventListeners();
this.nAndMInputSubmitEventListeners(); this.nAndMInputSubmitEventListeners();
@ -24,6 +21,11 @@ class GeneralQueryBuilderFunctions {
this.switchToQueryBuilderParser(); this.switchToQueryBuilderParser();
} }
}); });
this.extensions = {
structuralAttributeBuilderFunctions: new nopaque.corpus_analysis.query_builder.StructuralAttributeBuilderFunctions(this),
tokenAttributeBuilderFunctions: new nopaque.corpus_analysis.query_builder.TokenAttributeBuilderFunctions(this),
};
} }
toggleClass(elements, className, action) { toggleClass(elements, className, action) {
@ -138,8 +140,8 @@ class GeneralQueryBuilderFunctions {
this.lockClosingChipElement(queryChipElement); this.lockClosingChipElement(queryChipElement);
} }
}); });
// });
} }
// });
} }
editChipElement(queryChipElement) { editChipElement(queryChipElement) {
@ -147,14 +149,14 @@ class GeneralQueryBuilderFunctions {
this.elements.editedQueryChipElementIndex = Array.from(this.elements.queryInputField.children).indexOf(queryChipElement); this.elements.editedQueryChipElementIndex = Array.from(this.elements.queryInputField.children).indexOf(queryChipElement);
switch (queryChipElement.dataset.type) { switch (queryChipElement.dataset.type) {
case 'start-entity': case 'start-entity':
this.app.extensions.structuralAttributeBuilderFunctions.editStartEntityChipElement(queryChipElement); this.extensions.structuralAttributeBuilderFunctions.editStartEntityChipElement(queryChipElement);
break; break;
case 'text-annotation': case 'text-annotation':
this.app.extensions.structuralAttributeBuilderFunctions.editTextAnnotationChipElement(queryChipElement); this.extensions.structuralAttributeBuilderFunctions.editTextAnnotationChipElement(queryChipElement);
break; break;
case 'token': case 'token':
let queryElementsContent = this.app.extensions.tokenAttributeBuilderFunctions.prepareTokenQueryElementsContent(queryChipElement); let queryElementsContent = this.extensions.tokenAttributeBuilderFunctions.prepareTokenQueryElementsContent(queryChipElement);
this.app.extensions.tokenAttributeBuilderFunctions.editTokenChipElement(queryElementsContent); this.extensions.tokenAttributeBuilderFunctions.editTokenChipElement(queryElementsContent);
break; break;
default: default:
break; break;
@ -341,7 +343,7 @@ class GeneralQueryBuilderFunctions {
if (modalId === 'corpus-analysis-concordance-exactly-n-token-modal' || modalId === 'corpus-analysis-concordance-between-nm-token-modal') { if (modalId === 'corpus-analysis-concordance-exactly-n-token-modal' || modalId === 'corpus-analysis-concordance-between-nm-token-modal') {
button.addEventListener('click', () => this.tokenNMSubmitHandler(modalId)); button.addEventListener('click', () => this.tokenNMSubmitHandler(modalId));
} else if (modalId === 'corpus-analysis-concordance-exactly-n-character-modal' || modalId === 'corpus-analysis-concordance-between-nm-character-modal') { } else if (modalId === 'corpus-analysis-concordance-exactly-n-character-modal' || modalId === 'corpus-analysis-concordance-between-nm-character-modal') {
button.addEventListener('click', () => this.app.extensions.tokenAttributeBuilderFunctions.characterNMSubmitHandler(modalId)); button.addEventListener('click', () => this.extensions.tokenAttributeBuilderFunctions.characterNMSubmitHandler(modalId));
} }
}); });
} }
@ -482,5 +484,4 @@ class GeneralQueryBuilderFunctions {
return chipElements; return chipElements;
} }
} };

View File

@ -1,9 +1,7 @@
class StructuralAttributeBuilderFunctions { nopaque.corpus_analysis.query_builder.StructuralAttributeBuilderFunctions = class StructuralAttributeBuilderFunctions {
name = 'Token Attribute Builder Functions'; constructor(app) {
constructor(app, elements) {
this.app = app; this.app = app;
this.elements = elements; this.elements = app.elements;
this.structuralAttrModalEventlisteners(); this.structuralAttrModalEventlisteners();
@ -26,32 +24,32 @@ class StructuralAttributeBuilderFunctions {
}); });
}); });
document.querySelector('.ent-type-selection-action[data-ent-type="any"]').addEventListener('click', () => { document.querySelector('.ent-type-selection-action[data-ent-type="any"]').addEventListener('click', () => {
this.app.extensions.generalFunctions.submitQueryChipElement('start-empty-entity', 'Entity Start', '<ent>'); this.app.submitQueryChipElement('start-empty-entity', 'Entity Start', '<ent>');
this.app.extensions.generalFunctions.submitQueryChipElement('end-entity', 'Entity End', '</ent>', null, true); this.app.submitQueryChipElement('end-entity', 'Entity End', '</ent>', null, true);
this.elements.structuralAttrModal.close(); this.elements.structuralAttrModal.close();
}); });
document.querySelector('.ent-type-selection-action[data-ent-type="english"]').addEventListener('change', (event) => { document.querySelector('.ent-type-selection-action[data-ent-type="english"]').addEventListener('change', (event) => {
this.app.extensions.generalFunctions.submitQueryChipElement('start-entity', `Entity Type=${event.target.value}`, `<ent_type="${event.target.value}">`, null, false, true); this.app.submitQueryChipElement('start-entity', `Entity Type=${event.target.value}`, `<ent_type="${event.target.value}">`, null, false, true);
if (!this.elements.editingModusOn) { if (!this.elements.editingModusOn) {
this.app.extensions.generalFunctions.submitQueryChipElement('end-entity', 'Entity End', '</ent_type>', null, true); this.app.submitQueryChipElement('end-entity', 'Entity End', '</ent_type>', null, true);
} }
this.elements.structuralAttrModal.close(); this.elements.structuralAttrModal.close();
}); });
document.querySelector('.ent-type-selection-action[data-ent-type="german"]').addEventListener('change', (event) => { document.querySelector('.ent-type-selection-action[data-ent-type="german"]').addEventListener('change', (event) => {
this.app.extensions.generalFunctions.submitQueryChipElement('start-entity', `Entity Type=${event.target.value}`, `<ent_type="${event.target.value}">`, null, false, true); this.app.submitQueryChipElement('start-entity', `Entity Type=${event.target.value}`, `<ent_type="${event.target.value}">`, null, false, true);
if (!this.elements.editingModusOn) { if (!this.elements.editingModusOn) {
this.app.extensions.generalFunctions.submitQueryChipElement('end-entity', 'Entity End', '</ent_type>', null, true); this.app.submitQueryChipElement('end-entity', 'Entity End', '</ent_type>', null, true);
} }
this.elements.structuralAttrModal.close(); this.elements.structuralAttrModal.close();
}); });
} }
resetStructuralAttrModal() { resetStructuralAttrModal() {
this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.englishEntTypeSelection, this.elements.germanEntTypeSelection]); this.app.resetMaterializeSelection([this.elements.englishEntTypeSelection, this.elements.germanEntTypeSelection]);
this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.textAnnotationSelection], 'address'); this.app.resetMaterializeSelection([this.elements.textAnnotationSelection], 'address');
this.elements.textAnnotationInput.value = ''; this.elements.textAnnotationInput.value = '';
this.app.extensions.generalFunctions.toggleClass(['entity-builder', 'text-annotation-builder'], 'hide', 'add'); this.app.toggleClass(['entity-builder', 'text-annotation-builder'], 'hide', 'add');
this.toggleEditingAreaStructuralAttrModal('remove'); this.toggleEditingAreaStructuralAttrModal('remove');
this.elements.editingModusOn = false; this.elements.editingModusOn = false;
this.elements.editedQueryChipElementIndex = undefined; this.elements.editedQueryChipElementIndex = undefined;
@ -60,17 +58,17 @@ class StructuralAttributeBuilderFunctions {
actionButtonInStrucAttrModalHandler(action) { actionButtonInStrucAttrModalHandler(action) {
switch (action) { switch (action) {
case 'sentence': case 'sentence':
this.app.extensions.generalFunctions.submitQueryChipElement('start-sentence', 'Sentence Start', '<s>'); this.app.submitQueryChipElement('start-sentence', 'Sentence Start', '<s>');
this.app.extensions.generalFunctions.submitQueryChipElement('end-sentence', 'Sentence End', '</s>', null, true); this.app.submitQueryChipElement('end-sentence', 'Sentence End', '</s>', null, true);
this.elements.structuralAttrModal.close(); this.elements.structuralAttrModal.close();
break; break;
case 'entity': case 'entity':
this.app.extensions.generalFunctions.toggleClass(['entity-builder'], 'hide', 'toggle'); this.app.toggleClass(['entity-builder'], 'hide', 'toggle');
this.app.extensions.generalFunctions.toggleClass(['text-annotation-builder'], 'hide', 'add'); this.app.toggleClass(['text-annotation-builder'], 'hide', 'add');
break; break;
case 'meta-data': case 'meta-data':
this.app.extensions.generalFunctions.toggleClass(['text-annotation-builder'], 'hide', 'toggle'); this.app.toggleClass(['text-annotation-builder'], 'hide', 'toggle');
this.app.extensions.generalFunctions.toggleClass(['entity-builder'], 'hide', 'add'); this.app.toggleClass(['entity-builder'], 'hide', 'add');
break; break;
default: default:
break; break;
@ -79,7 +77,7 @@ class StructuralAttributeBuilderFunctions {
toggleEditingAreaStructuralAttrModal(action) { toggleEditingAreaStructuralAttrModal(action) {
// If the user edits a query chip element, the corresponding editing area is displayed and the other areas are hidden or disabled. // If the user edits a query chip element, the corresponding editing area is displayed and the other areas are hidden or disabled.
this.app.extensions.generalFunctions.toggleClass(['sentence-button', 'entity-button', 'text-annotation-button', 'any-type-entity-button'], 'disabled', action); this.app.toggleClass(['sentence-button', 'entity-button', 'text-annotation-button', 'any-type-entity-button'], 'disabled', action);
} }
textAnnotationSubmitHandler() { textAnnotationSubmitHandler() {
@ -99,29 +97,29 @@ class StructuralAttributeBuilderFunctions {
}, 3000); }, 3000);
} else { } else {
let queryText = `:: match.text_${textAnnotationOptions.value}="${textAnnotationInput.value}"`; let queryText = `:: match.text_${textAnnotationOptions.value}="${textAnnotationInput.value}"`;
this.app.extensions.generalFunctions.submitQueryChipElement('text-annotation', `${textAnnotationOptions.value}=${textAnnotationInput.value}`, queryText, null, false, true); this.app.submitQueryChipElement('text-annotation', `${textAnnotationOptions.value}=${textAnnotationInput.value}`, queryText, null, false, true);
this.elements.structuralAttrModal.close(); this.elements.structuralAttrModal.close();
} }
} }
editStartEntityChipElement(queryChipElement) { editStartEntityChipElement(queryChipElement) {
this.elements.structuralAttrModal.open(); this.elements.structuralAttrModal.open();
this.app.extensions.generalFunctions.toggleClass(['entity-builder'], 'hide', 'remove'); this.app.toggleClass(['entity-builder'], 'hide', 'remove');
this.toggleEditingAreaStructuralAttrModal('add'); this.toggleEditingAreaStructuralAttrModal('add');
let entType = queryChipElement.dataset.query.replace(/<ent_type="|">/g, ''); let entType = queryChipElement.dataset.query.replace(/<ent_type="|">/g, '');
let isEnglishEntType = this.elements.englishEntTypeSelection.querySelector(`option[value=${entType}]`) !== null; let isEnglishEntType = this.elements.englishEntTypeSelection.querySelector(`option[value=${entType}]`) !== null;
let selection = isEnglishEntType ? this.elements.englishEntTypeSelection : this.elements.germanEntTypeSelection; let selection = isEnglishEntType ? this.elements.englishEntTypeSelection : this.elements.germanEntTypeSelection;
this.app.extensions.generalFunctions.resetMaterializeSelection([selection], entType); this.app.resetMaterializeSelection([selection], entType);
} }
editTextAnnotationChipElement(queryChipElement) { editTextAnnotationChipElement(queryChipElement) {
this.elements.structuralAttrModal.open(); this.elements.structuralAttrModal.open();
this.app.extensions.generalFunctions.toggleClass(['text-annotation-builder'], 'hide', 'remove'); this.app.toggleClass(['text-annotation-builder'], 'hide', 'remove');
this.toggleEditingAreaStructuralAttrModal('add'); this.toggleEditingAreaStructuralAttrModal('add');
let [textAnnotationSelection, textAnnotationContent] = queryChipElement.dataset.query let [textAnnotationSelection, textAnnotationContent] = queryChipElement.dataset.query
.replace(/:: ?match\.text_|"|"/g, '') .replace(/:: ?match\.text_|"|"/g, '')
.split('='); .split('=');
this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.textAnnotationSelection], textAnnotationSelection); this.app.resetMaterializeSelection([this.elements.textAnnotationSelection], textAnnotationSelection);
this.elements.textAnnotationInput.value = textAnnotationContent; this.elements.textAnnotationInput.value = textAnnotationContent;
} }
} }

View File

@ -1,9 +1,7 @@
class TokenAttributeBuilderFunctions { nopaque.corpus_analysis.query_builder.TokenAttributeBuilderFunctions = class TokenAttributeBuilderFunctions {
name = 'Token Attribute Builder Functions'; constructor(app) {
constructor(app, elements) {
this.app = app; this.app = app;
this.elements = elements; this.elements = app.elements;
this.elements.positionalAttrSelection.addEventListener('change', () => { this.elements.positionalAttrSelection.addEventListener('change', () => {
this.preparePositionalAttrModal(); this.preparePositionalAttrModal();
@ -42,9 +40,9 @@ class TokenAttributeBuilderFunctions {
this.elements.positionalAttrSelection.innerHTML = originalSelectionList; this.elements.positionalAttrSelection.innerHTML = originalSelectionList;
this.elements.tokenQuery.innerHTML = ''; this.elements.tokenQuery.innerHTML = '';
this.elements.tokenBuilderContent.innerHTML = ''; this.elements.tokenBuilderContent.innerHTML = '';
this.app.extensions.generalFunctions.toggleClass(['input-field-options'], 'hide', 'remove'); this.app.toggleClass(['input-field-options'], 'hide', 'remove');
this.app.extensions.generalFunctions.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add'); this.app.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.positionalAttrSelection], "word"); this.app.resetMaterializeSelection([this.elements.positionalAttrSelection], "word");
this.elements.ignoreCaseCheckbox.checked = false; this.elements.ignoreCaseCheckbox.checked = false;
this.elements.editingModusOn = false; this.elements.editingModusOn = false;
this.elements.editedQueryChipElementIndex = undefined; this.elements.editedQueryChipElementIndex = undefined;
@ -178,7 +176,7 @@ class TokenAttributeBuilderFunctions {
} }
}); });
this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.positionalAttrSelection], selection); this.app.resetMaterializeSelection([this.elements.positionalAttrSelection], selection);
this.preparePositionalAttrModal(); this.preparePositionalAttrModal();
} }
@ -201,11 +199,11 @@ class TokenAttributeBuilderFunctions {
this.optionToggleHandler(); this.optionToggleHandler();
if (selection === 'word' || selection === 'lemma') { if (selection === 'word' || selection === 'lemma') {
this.app.extensions.generalFunctions.toggleClass(['input-field-options'], 'hide', 'remove'); this.app.toggleClass(['input-field-options'], 'hide', 'remove');
} else if (selection === 'empty-token'){ } else if (selection === 'empty-token'){
this.addTokenToQuery(); this.addTokenToQuery();
} else { } else {
this.app.extensions.generalFunctions.toggleClass(['input-field-options'], 'hide', 'add'); this.app.toggleClass(['input-field-options'], 'hide', 'add');
} }
} }
@ -216,12 +214,12 @@ class TokenAttributeBuilderFunctions {
optionToggleHandler() { optionToggleHandler() {
let input = this.tokenInputCheck(this.elements.tokenBuilderContent); let input = this.tokenInputCheck(this.elements.tokenBuilderContent);
if (input.value === '' && this.elements.editingModusOn === false) { if (input.value === '' && this.elements.editingModusOn === false) {
this.app.extensions.generalFunctions.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add'); this.app.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
} else if (this.elements.positionalAttrSelection.querySelectorAll('option').length === 1) { } else if (this.elements.positionalAttrSelection.querySelectorAll('option').length === 1) {
this.app.extensions.generalFunctions.toggleClass(['and'], 'disabled', 'add'); this.app.toggleClass(['and'], 'disabled', 'add');
this.app.extensions.generalFunctions.toggleClass(['or'], 'disabled', 'remove'); this.app.toggleClass(['or'], 'disabled', 'remove');
} else { } else {
this.app.extensions.generalFunctions.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'remove'); this.app.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'remove');
} }
} }
@ -257,7 +255,7 @@ class TokenAttributeBuilderFunctions {
this.disableTokenSubmit(); this.disableTokenSubmit();
} else { } else {
tokenQueryCQLText = `[${tokenQueryCQLText}]`; tokenQueryCQLText = `[${tokenQueryCQLText}]`;
this.app.extensions.generalFunctions.submitQueryChipElement('token', tokenQueryPrettyText, tokenQueryCQLText, null, false, kindOfToken === 'empty-token' ? false : true); this.app.submitQueryChipElement('token', tokenQueryPrettyText, tokenQueryCQLText, null, false, kindOfToken === 'empty-token' ? false : true);
this.elements.positionalAttrModal.close(); this.elements.positionalAttrModal.close();
} }
} }
@ -280,7 +278,7 @@ class TokenAttributeBuilderFunctions {
editTokenChipElement(queryElementsContent) { editTokenChipElement(queryElementsContent) {
this.elements.positionalAttrModal.open(); this.elements.positionalAttrModal.open();
queryElementsContent.forEach((queryElement) => { queryElementsContent.forEach((queryElement) => {
this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.positionalAttrSelection], queryElement.tokenAttr); this.app.resetMaterializeSelection([this.elements.positionalAttrSelection], queryElement.tokenAttr);
this.preparePositionalAttrModal(); this.preparePositionalAttrModal();
switch (queryElement.tokenAttr) { switch (queryElement.tokenAttr) {
case 'word': case 'word':
@ -291,12 +289,12 @@ class TokenAttributeBuilderFunctions {
// English-pos is selected by default. Then it is checked whether the passed token value occurs in the english-pos selection. If not, the selection is reseted and changed to german-pos. // English-pos is selected by default. Then it is checked whether the passed token value occurs in the english-pos selection. If not, the selection is reseted and changed to german-pos.
let selection = this.elements.tokenBuilderContent.querySelector('select'); let selection = this.elements.tokenBuilderContent.querySelector('select');
queryElement.tokenAttr = selection.querySelector(`option[value=${queryElement.tokenValue}]`) ? 'english-pos' : 'german-pos'; queryElement.tokenAttr = selection.querySelector(`option[value=${queryElement.tokenValue}]`) ? 'english-pos' : 'german-pos';
this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.positionalAttrSelection], queryElement.tokenAttr); this.app.resetMaterializeSelection([this.elements.positionalAttrSelection], queryElement.tokenAttr);
this.preparePositionalAttrModal(); this.preparePositionalAttrModal();
this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.tokenBuilderContent.querySelector('select')], queryElement.tokenValue); this.app.resetMaterializeSelection([this.elements.tokenBuilderContent.querySelector('select')], queryElement.tokenValue);
break; break;
case 'simple_pos': case 'simple_pos':
this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.tokenBuilderContent.querySelector('select')], queryElement.tokenValue); this.app.resetMaterializeSelection([this.elements.tokenBuilderContent.querySelector('select')], queryElement.tokenValue);
default: default:
break; break;
} }

View File

@ -91,7 +91,7 @@
'js/corpus-analysis/cqi/client.js', 'js/corpus-analysis/cqi/client.js',
'js/corpus-analysis/query-builder/index.js', 'js/corpus-analysis/query-builder/index.js',
'js/corpus-analysis/query-builder/element-references.js', 'js/corpus-analysis/query-builder/element-references.js',
'js/corpus-analysis/query-builder/general-query-builder-functions.js', 'js/corpus-analysis/query-builder/query-builder.js',
'js/corpus-analysis/query-builder/structural-attribute-builder-functions.js', 'js/corpus-analysis/query-builder/structural-attribute-builder-functions.js',
'js/corpus-analysis/query-builder/token-attribute-builder-functions.js', 'js/corpus-analysis/query-builder/token-attribute-builder-functions.js',
'js/corpus-analysis/app.js', 'js/corpus-analysis/app.js',

View File

@ -129,6 +129,6 @@
{% macro scripts() %} {% macro scripts() %}
<script> <script>
const corpusAnalysisConcordance = new nopaque.corpus_analysis.ConcordanceExtension(corpusAnalysisApp); const corpusAnalysisConcordance = new nopaque.corpus_analysis.ConcordanceExtension(corpusAnalysisApp);
const concordanceQueryBuilder = new ConcordanceQueryBuilder(); const concordanceQueryBuilder = new nopaque.corpus_analysis.query_builder.QueryBuilder();
</script> </script>
{% endmacro %} {% endmacro %}