sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-11-04 04:12:45 +00:00
Code Issues Projects Releases Wiki Activity

update query builder code to fit the new style

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
app/static/js/corpus-analysis/query-builder/element-references.js
View File

@@ -1,4 +1,4 @@
class ElementReferencesQueryBuilder {
nopaque.corpus_analysis.query_builder.ElementReferences = class ElementReferences {
constructor() {
// General Elements
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');
}
}
};

16
app/static/js/corpus-analysis/query-builder/index.js
View File

@@ -1,15 +1 @@
class ConcordanceQueryBuilder {
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),
};
}
}
nopaque.corpus_analysis.query_builder = {};

37
app/static/js/corpus-analysis/query-builder/general-query-builder-functions.js → app/static/js/corpus-analysis/query-builder/query-builder.js
View File

@@ -1,10 +1,7 @@
class GeneralQueryBuilderFunctions {
name = 'General Query Builder Functions';
nopaque.corpus_analysis.query_builder.QueryBuilder = class QueryBuilder {
constructor() {
this.elements = new nopaque.corpus_analysis.query_builder.ElementReferences();
constructor(app, elements) {
this.app = app;
this.elements = elements;
this.incidenceModifierEventListeners();
this.nAndMInputSubmitEventListeners();
@@ -24,9 +21,14 @@ class GeneralQueryBuilderFunctions {
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) {
elements.forEach(element => {
document.querySelector(`[data-toggle-area="${element}"]`).classList[action](className);
});
@@ -44,7 +46,7 @@ class GeneralQueryBuilderFunctions {
}
removePlaceholder() {
let placeholder = this.elements.queryInputField.querySelector('#corpus-analysis-concordance-query-builder-input-field-placeholder');
let placeholder = this.elements.queryInputField.querySelector('#corpus-analysis-concordance-query-builder-input-field-placeholder');
if (placeholder && this.elements.queryInputField !== undefined) {
this.elements.queryInputField.innerHTML = '';
}
@@ -138,8 +140,8 @@ class GeneralQueryBuilderFunctions {
this.lockClosingChipElement(queryChipElement);
}
});
// });
}
// });
}
editChipElement(queryChipElement) {
@@ -147,14 +149,14 @@ class GeneralQueryBuilderFunctions {
this.elements.editedQueryChipElementIndex = Array.from(this.elements.queryInputField.children).indexOf(queryChipElement);
switch (queryChipElement.dataset.type) {
case 'start-entity':
this.app.extensions.structuralAttributeBuilderFunctions.editStartEntityChipElement(queryChipElement);
this.extensions.structuralAttributeBuilderFunctions.editStartEntityChipElement(queryChipElement);
break;
case 'text-annotation':
this.app.extensions.structuralAttributeBuilderFunctions.editTextAnnotationChipElement(queryChipElement);
this.extensions.structuralAttributeBuilderFunctions.editTextAnnotationChipElement(queryChipElement);
break;
case 'token':
let queryElementsContent = this.app.extensions.tokenAttributeBuilderFunctions.prepareTokenQueryElementsContent(queryChipElement);
this.app.extensions.tokenAttributeBuilderFunctions.editTokenChipElement(queryElementsContent);
let queryElementsContent = this.extensions.tokenAttributeBuilderFunctions.prepareTokenQueryElementsContent(queryChipElement);
this.extensions.tokenAttributeBuilderFunctions.editTokenChipElement(queryElementsContent);
break;
default:
break;
@@ -165,10 +167,10 @@ class GeneralQueryBuilderFunctions {
queryChipElement.dataset.closingTag = 'false';
let lockIcon = queryChipElement.querySelector('[data-chip-action="lock"]');
lockIcon.textContent = 'lock';
//TODO: Write unlock-Function?
// TODO: Write unlock-Function?
lockIcon.dataset.chipAction = 'unlock';
}
deleteChipElement(attr) {
let elementIndex = Array.from(this.elements.queryInputField.children).indexOf(attr);
switch (attr.dataset.type) {
@@ -341,7 +343,7 @@ class GeneralQueryBuilderFunctions {
if (modalId === 'corpus-analysis-concordance-exactly-n-token-modal' || modalId === 'corpus-analysis-concordance-between-nm-token-modal') {
button.addEventListener('click', () => this.tokenNMSubmitHandler(modalId));
} 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;
}
}
};

52
app/static/js/corpus-analysis/query-builder/structural-attribute-builder-functions.js
View File

@@ -1,10 +1,8 @@
class StructuralAttributeBuilderFunctions {
name = 'Token Attribute Builder Functions';
constructor(app, elements) {
nopaque.corpus_analysis.query_builder.StructuralAttributeBuilderFunctions = class StructuralAttributeBuilderFunctions {
constructor(app) {
this.app = app;
this.elements = elements;
this.elements = app.elements;
this.structuralAttrModalEventlisteners();
document.querySelector('#corpus-analysis-concordance-text-annotation-submit').addEventListener('click', () => this.textAnnotationSubmitHandler());
@@ -26,32 +24,32 @@ class StructuralAttributeBuilderFunctions {
});
});
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.extensions.generalFunctions.submitQueryChipElement('end-entity', 'Entity End', '</ent>', null, true);
this.app.submitQueryChipElement('start-empty-entity', 'Entity Start', '<ent>');
this.app.submitQueryChipElement('end-entity', 'Entity End', '</ent>', null, true);
this.elements.structuralAttrModal.close();
});
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) {
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();
});
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) {
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();
});
}
resetStructuralAttrModal() {
this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.englishEntTypeSelection, this.elements.germanEntTypeSelection]);
this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.textAnnotationSelection], 'address');
this.app.resetMaterializeSelection([this.elements.englishEntTypeSelection, this.elements.germanEntTypeSelection]);
this.app.resetMaterializeSelection([this.elements.textAnnotationSelection], 'address');
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.elements.editingModusOn = false;
this.elements.editedQueryChipElementIndex = undefined;
@@ -60,17 +58,17 @@ class StructuralAttributeBuilderFunctions {
actionButtonInStrucAttrModalHandler(action) {
switch (action) {
case 'sentence':
this.app.extensions.generalFunctions.submitQueryChipElement('start-sentence', 'Sentence Start', '<s>');
this.app.extensions.generalFunctions.submitQueryChipElement('end-sentence', 'Sentence End', '</s>', null, true);
this.app.submitQueryChipElement('start-sentence', 'Sentence Start', '<s>');
this.app.submitQueryChipElement('end-sentence', 'Sentence End', '</s>', null, true);
this.elements.structuralAttrModal.close();
break;
case 'entity':
this.app.extensions.generalFunctions.toggleClass(['entity-builder'], 'hide', 'toggle');
this.app.extensions.generalFunctions.toggleClass(['text-annotation-builder'], 'hide', 'add');
this.app.toggleClass(['entity-builder'], 'hide', 'toggle');
this.app.toggleClass(['text-annotation-builder'], 'hide', 'add');
break;
case 'meta-data':
this.app.extensions.generalFunctions.toggleClass(['text-annotation-builder'], 'hide', 'toggle');
this.app.extensions.generalFunctions.toggleClass(['entity-builder'], 'hide', 'add');
this.app.toggleClass(['text-annotation-builder'], 'hide', 'toggle');
this.app.toggleClass(['entity-builder'], 'hide', 'add');
break;
default:
break;
@@ -79,7 +77,7 @@ class StructuralAttributeBuilderFunctions {
toggleEditingAreaStructuralAttrModal(action) {
// 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() {
@@ -99,29 +97,29 @@ class StructuralAttributeBuilderFunctions {
}, 3000);
} else {
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();
}
}
editStartEntityChipElement(queryChipElement) {
this.elements.structuralAttrModal.open();
this.app.extensions.generalFunctions.toggleClass(['entity-builder'], 'hide', 'remove');
this.app.toggleClass(['entity-builder'], 'hide', 'remove');
this.toggleEditingAreaStructuralAttrModal('add');
let entType = queryChipElement.dataset.query.replace(/<ent_type="|">/g, '');
let isEnglishEntType = this.elements.englishEntTypeSelection.querySelector(`option[value=${entType}]`) !== null;
let selection = isEnglishEntType ? this.elements.englishEntTypeSelection : this.elements.germanEntTypeSelection;
this.app.extensions.generalFunctions.resetMaterializeSelection([selection], entType);
this.app.resetMaterializeSelection([selection], entType);
}
editTextAnnotationChipElement(queryChipElement) {
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');
let [textAnnotationSelection, textAnnotationContent] = queryChipElement.dataset.query
.replace(/:: ?match\.text_|"|"/g, '')
.split('=');
this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.textAnnotationSelection], textAnnotationSelection);
this.app.resetMaterializeSelection([this.elements.textAnnotationSelection], textAnnotationSelection);
this.elements.textAnnotationInput.value = textAnnotationContent;
}
}

38
app/static/js/corpus-analysis/query-builder/token-attribute-builder-functions.js
View File

@@ -1,9 +1,7 @@
class TokenAttributeBuilderFunctions {
name = 'Token Attribute Builder Functions';
constructor(app, elements) {
nopaque.corpus_analysis.query_builder.TokenAttributeBuilderFunctions = class TokenAttributeBuilderFunctions {
constructor(app) {
this.app = app;
this.elements = elements;
this.elements = app.elements;
this.elements.positionalAttrSelection.addEventListener('change', () => {
this.preparePositionalAttrModal();
@@ -42,9 +40,9 @@ class TokenAttributeBuilderFunctions {
this.elements.positionalAttrSelection.innerHTML = originalSelectionList;
this.elements.tokenQuery.innerHTML = '';
this.elements.tokenBuilderContent.innerHTML = '';
this.app.extensions.generalFunctions.toggleClass(['input-field-options'], 'hide', 'remove');
this.app.extensions.generalFunctions.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.positionalAttrSelection], "word");
this.app.toggleClass(['input-field-options'], 'hide', 'remove');
this.app.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
this.app.resetMaterializeSelection([this.elements.positionalAttrSelection], "word");
this.elements.ignoreCaseCheckbox.checked = false;
this.elements.editingModusOn = false;
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();
}
@@ -201,11 +199,11 @@ class TokenAttributeBuilderFunctions {
this.optionToggleHandler();
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'){
this.addTokenToQuery();
} 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() {
let input = this.tokenInputCheck(this.elements.tokenBuilderContent);
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) {
this.app.extensions.generalFunctions.toggleClass(['and'], 'disabled', 'add');
this.app.extensions.generalFunctions.toggleClass(['or'], 'disabled', 'remove');
this.app.toggleClass(['and'], 'disabled', 'add');
this.app.toggleClass(['or'], 'disabled', 'remove');
} 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();
} else {
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();
}
}
@@ -280,7 +278,7 @@ class TokenAttributeBuilderFunctions {
editTokenChipElement(queryElementsContent) {
this.elements.positionalAttrModal.open();
queryElementsContent.forEach((queryElement) => {
this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.positionalAttrSelection], queryElement.tokenAttr);
this.app.resetMaterializeSelection([this.elements.positionalAttrSelection], queryElement.tokenAttr);
this.preparePositionalAttrModal();
switch (queryElement.tokenAttr) {
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.
let selection = this.elements.tokenBuilderContent.querySelector('select');
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.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.tokenBuilderContent.querySelector('select')], queryElement.tokenValue);
this.app.resetMaterializeSelection([this.elements.tokenBuilderContent.querySelector('select')], queryElement.tokenValue);
break;
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:
break;
}