From 5e8008399d39dbe4c829903b187c33b0ba4ac5a0 Mon Sep 17 00:00:00 2001 From: Inga Kirschnick Date: Tue, 8 Aug 2023 14:12:07 +0200 Subject: [PATCH] First Query Builder/Expert Mode implementation --- app/static/css/queryBuilder.css | 68 +-- .../CorpusAnalysisConcordance.js | 4 - app/static/js/CorpusAnalysis/QueryBuilder.js | 93 ++- .../ElementReferencesQueryBuilder.js | 95 +-- .../GeneralFunctionsQueryBuilder.js | 221 ++----- ...alAttributeBuilderFunctionsQueryBuilder.js | 100 +--- ...enAttributeBuilderFunctionsQueryBuilder.js | 563 +++++++----------- .../_analysis/_query_builderOLD.html.j2 | 403 ------------- .../corpora/_analysis/concordance.html.j2 | 59 +- .../query_builder/_query_builder.html.j2 | 417 ++++++++++++- 10 files changed, 744 insertions(+), 1279 deletions(-) delete mode 100644 app/templates/corpora/_analysis/_query_builderOLD.html.j2 diff --git a/app/static/css/queryBuilder.css b/app/static/css/queryBuilder.css index 4ff7eb9d..48081b74 100644 --- a/app/static/css/queryBuilder.css +++ b/app/static/css/queryBuilder.css @@ -1,42 +1,31 @@ -.modal-conent { +.modal-content { overflow-x: hidden; } -#concordance-query-builder { +#positional-attr-modal, #structural-attr-modal { width: 70%; } -#concordance-query-builder nav { - background-color: #6B3F89; - margin-top: -25px; - margin-left: -25px; - width: 105%; -} - -#query-builder-nav{ - padding-left: 15px; -} - -#close-query-builder { - margin-right: 50px; - cursor: pointer; -} - #general-options-query-builder-tutorial-info-icon { color: black; } -#your-query { - border-bottom-style: solid; - border-bottom-width: 1px; -} - #insert-query-button { background-color: #00426f; text-align: center; } -#structural-attr h6 { +.attr-modal-header { + background-color: #f2eff7; + padding: 15px; + padding-left: 25px; + border-top: 10px solid #6B3F89; + margin-left: -24px; + margin-top: -24px; + margin-right: -24px; +} + +.attr-modal-header h6 { margin-left: 15px; } @@ -44,16 +33,16 @@ color: black; } -#sentence { - background-color:#FD9720; +[data-structural-attr-modal-action-button="sentence"]{ + background-color:#FD9720 !important; } -#entity { - background-color: #A6E22D; +[data-structural-attr-modal-action-button="entity"]{ + background-color: #A6E22D !important; } -#text-annotation { - background-color: #2FBBAB; +[data-structural-attr-modal-action-button="meta-data"]{ + background-color: #2FBBAB !important; } #no-value-metadata-message { @@ -61,19 +50,12 @@ margin-left: -20px; } -#token-kind-selector { - background-color: #f2eff7; - padding: 15px; - border-top-style: solid; - border-color: #6B3F89; +.attr-modal-header.input-field { + margin-left: 41px; } -#token-kind-selector.s5 { - margin-top: 15px; -} - -#token-kind-selector h6 { - margin-left: 15px; +#token-attr { + margin-left: 41px; } #token-tutorial-info-icon { @@ -97,11 +79,11 @@ background-color: #2FBBAB; } -#incidence-modifiers a{ +#incidence-modifiers-dropdown a{ background-color: white; } -#ignore-case { +#ignore-case-checkbox { margin-left: 5px; } diff --git a/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js b/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js index 485daeb9..80a021d6 100644 --- a/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js +++ b/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js @@ -27,7 +27,6 @@ class CorpusAnalysisConcordance { textStyle: parseInt(this.elements.UIForm['text-style'].value), tokenRepresentation: this.elements.UIForm['token-representation'].value }; - console.log(this.settings); this.app.registerExtension(this); } @@ -80,10 +79,7 @@ class CorpusAnalysisConcordance { }); this.elements.UIForm.addEventListener('change', (event) => { if (event.target === this.elements.UIForm['context']) { - console.log(this.settings.context); - console.log(parseInt(this.elements.UIForm['context'].value)); this.settings.context = parseInt(this.elements.UIForm['context'].value); - console.log(this.settings.context); this.submitForm(); } if (event.target === this.elements.UIForm['per-page']) { diff --git a/app/static/js/CorpusAnalysis/QueryBuilder.js b/app/static/js/CorpusAnalysis/QueryBuilder.js index b8567b35..f5fa63cb 100644 --- a/app/static/js/CorpusAnalysis/QueryBuilder.js +++ b/app/static/js/CorpusAnalysis/QueryBuilder.js @@ -1,69 +1,54 @@ class ConcordanceQueryBuilder { constructor() { + this.elements = new ElementReferencesQueryBuilder(); this.generalFunctions = new GeneralFunctionsQueryBuilder(this.elements); this.tokenAttributeBuilder = new TokenAttributeBuilderFunctionsQueryBuilder(this.elements); this.structuralAttributeBuilder = new StructuralAttributeBuilderFunctionsQueryBuilder(this.elements); - - this.elements.closeQueryBuilder.addEventListener('click', () => {this.generalFunctions.closeQueryBuilderModal(this.elements.concordanceQueryBuilder);}); - this.elements.concordanceQueryBuilderButton.addEventListener('click', () => {this.generalFunctions.clearAll();}); - this.elements.insertQueryButton.addEventListener('click', () => {this.generalFunctions.insertQuery();}); - this.elements.positionalAttrButton.addEventListener('click', () => {this.generalFunctions.showPositionalAttrArea();}); - this.elements.structuralAttrButton.addEventListener('click', () => {this.generalFunctions.showStructuralAttrArea();}); - //#region Structural Attribute Event Listeners - this.elements.sentence.addEventListener('click', () => {this.structuralAttributeBuilder.addSentence();}); - this.elements.entity.addEventListener('click', () => {this.structuralAttributeBuilder.addEntity();}); - this.elements.textAnnotation.addEventListener('click', () => {this.structuralAttributeBuilder.addTextAnnotation();}); + // Event listener for structural attribute modal + document.querySelectorAll('[data-structural-attr-modal-action-button]').forEach(button => { + button.addEventListener('click', () => { + this.structuralAttributeBuilder.actionButtonHandler(button.dataset.structuralAttrModalActionButton); + }); + }); - this.elements.englishEntType.addEventListener('change', () => {this.structuralAttributeBuilder.englishEntTypeHandler();}); - this.elements.germanEntType.addEventListener('change', () => {this.structuralAttributeBuilder.germanEntTypeHandler();}); - this.elements.emptyEntity.addEventListener('click', () => {this.structuralAttributeBuilder.emptyEntityButton();}); - - this.elements.textAnnotationSubmit.addEventListener('click', () => {this.structuralAttributeBuilder.textAnnotationSubmitHandler();}); + // Event listener for token attribute modal + this.elements.positionalAttrSelection.addEventListener('change', (event) => { + this.generalFunctions.toggleClass(['word', 'lemma', 'english-pos', 'german-pos', 'simple-pos'], 'hide', 'add'); + this.generalFunctions.toggleClass([event.target.value], 'hide', 'remove'); + this.generalFunctions.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add'); + }); + // Options for positional attribute selection + document.querySelectorAll('.positional-attr-options-action-button[data-options-action]').forEach(button => { + button.addEventListener('click', () => {this.tokenAttributeBuilder.actionButtonHandler(button.dataset.optionsAction);}); + }); + document.querySelectorAll('.incidence-modifier-selection[data-incidence-modifier]').forEach(button => { + button.addEventListener('click', () => {this.tokenAttributeBuilder.incidenceModifierHandler(button);}); + }); + document.querySelectorAll('.n-m-submit-button').forEach(button => { + button.addEventListener('click', () => { + this.tokenAttributeBuilder.nmSubmitHandler(button.dataset.modalId); + }); + }); - //#endregion - - //#region Token Attribute Event Listeners - this.elements.queryBuilderTutorialInfoIcon.addEventListener('click', () => {this.tokenAttributeBuilder.tutorialIconHandler('#query-builder-tutorial-start');}); - this.elements.tokenTutorialInfoIcon.addEventListener('click', () => {this.tokenAttributeBuilder.tutorialIconHandler('#add-new-token-tutorial');}); - this.elements.editTokenTutorialInfoIcon.addEventListener('click', () => {this.tokenAttributeBuilder.tutorialIconHandler('#edit-options-tutorial');}); - this.elements.structuralAttributeTutorialInfoIcon.addEventListener('click', () => {this.tokenAttributeBuilder.tutorialIconHandler('#add-structural-attribute-tutorial');}); - this.elements.generalOptionsQueryBuilderTutorialInfoIcon.addEventListener('click', () => {this.tokenAttributeBuilder.tutorialIconHandler('#general-options-query-builder');}); - - this.elements.positionalAttr.addEventListener('change', () => {this.tokenAttributeBuilder.tokenTypeSelector();}); - this.elements.tokenSubmitButton.addEventListener('click', () => {this.tokenAttributeBuilder.addTokenToQuery();}); - - this.elements.wordInput.addEventListener('input', () => {this.tokenAttributeBuilder.inputFieldHandler();}); - this.elements.lemmaInput.addEventListener('input', () => {this.tokenAttributeBuilder.inputFieldHandler();}); - this.elements.ignoreCase.addEventListener('change', () => {this.tokenAttributeBuilder.inputOptionHandler(this.elements.ignoreCase);}); - this.elements.wildcardChar.addEventListener('click', () => {this.tokenAttributeBuilder.inputOptionHandler(this.elements.wildcardChar);}); - this.elements.optionGroup.addEventListener('click', () => {this.tokenAttributeBuilder.inputOptionHandler(this.elements.optionGroup);}); - - this.elements.oneOrMore.addEventListener('click', () => {this.tokenAttributeBuilder.incidenceModifiersHandler(this.elements.oneOrMore);}); - this.elements.zeroOrMore.addEventListener('click', () => {this.tokenAttributeBuilder.incidenceModifiersHandler(this.elements.zeroOrMore);}); - this.elements.zeroOrOne.addEventListener('click', () => {this.tokenAttributeBuilder.incidenceModifiersHandler(this.elements.zeroOrOne);}); - this.elements.nSubmit.addEventListener('click', () => {this.tokenAttributeBuilder.nSubmitHandler();}); - this.elements.nmSubmit.addEventListener('click', () => {this.tokenAttributeBuilder.nmSubmitHandler();}); - - this.elements.or.addEventListener('click', () => {this.tokenAttributeBuilder.orHandler();}); - this.elements.and.addEventListener('click', () => {this.tokenAttributeBuilder.andHandler();}); - - //#endregion Token Attribute Event Listeners - let selectInstances = this.elements.concordanceQueryBuilder.querySelectorAll('select'); - M.FormSelect.init( - selectInstances, + // Initializing and styling the Materialize Chip components + M.Chips.init( + this.elements.queryInputField, { - dropdownOptions: { - alignment: 'bottom', - coverTrigger: false + placeholder: 'Add your query here' + } + ); + document.querySelector('#concordance-extension-form-query-builder input').style.setProperty('width', '150px', 'important'); + + this.elements.positionalAttrModal = M.Modal.init( + document.querySelector('#positional-attr-modal'), + { + onOpenStart: () => { + this.tokenAttributeBuilder.optionToggleHandler(); } } - ) - let dropdownContents = this.elements.concordanceQueryBuilder.querySelectorAll('.dropdown-content'); - dropdownContents.forEach((dropdownContent) => { - dropdownContent.style.paddingBottom = '15px'; - }); + ); } } diff --git a/app/static/js/CorpusAnalysis/QueryBuilder/ElementReferencesQueryBuilder.js b/app/static/js/CorpusAnalysis/QueryBuilder/ElementReferencesQueryBuilder.js index 2446585b..96cdbaac 100644 --- a/app/static/js/CorpusAnalysis/QueryBuilder/ElementReferencesQueryBuilder.js +++ b/app/static/js/CorpusAnalysis/QueryBuilder/ElementReferencesQueryBuilder.js @@ -1,90 +1,31 @@ class ElementReferencesQueryBuilder { constructor() { - + // General Elements this.counter = 0; - this.yourQueryContent = []; - this.concordanceQueryBuilder = document.querySelector('#concordance-query-builder'); - this.concordanceQueryBuilderButton = document.querySelector('#concordance-query-builder-button'); //nur Eventlistener - this.closeQueryBuilder = document.querySelector('#close-query-builder'); //nur Eventlistener - this.valueValidator = true; + this.queryInputField = document.querySelector('#concordance-extension-form-query-builder'); + this.queryInputFieldInstance = M.Chips.getInstance(this.queryInputField); + this.queryInputFieldContent = []; + // Structural Attribute Builder Elements + this.structuralAttrModalInstance = document.querySelector('#structural-attr-modal'); + this.sentenceElement = document.querySelector('[data-structural-attr-modal-action-button="sentence"]'); + this.entityElement = document.querySelector('[data-structural-attr-modal-action-button="entity"]'); + this.textAnnotationElement = document.querySelector('[data-structural-attr-modal-action-button="text-annotation"]'); - //#region QueryBuilder Elements - this.positionalAttrButton = document.querySelector('#positional-attr-button'); //nur Eventlistener - this.positionalAttrArea = document.querySelector('#positional-attr'); - this.positionalAttr = document.querySelector('#token-attr'); - this.structuralAttrButton = document.querySelector('#structural-attr-button'); //nur Eventlistener - this.structuralAttrArea = document.querySelector('#structural-attr'); - this.queryContainer = document.querySelector('#query-container'); - this.yourQuery = document.querySelector('#your-query'); - this.insertQueryButton = document.querySelector('#insert-query-button'); //nur Eventlistener + // Token Attribute Builder Elements + this.positionalAttrModal = M.Modal.getInstance(document.querySelector('#positional-attr-modal')); + this.positionalAttrSelection = document.querySelector('#positional-attr-selection'); this.tokenQuery = document.querySelector('#token-query'); - this.tokenBuilderContent = document.querySelector('#token-builder-content'); this.tokenSubmitButton = document.querySelector('#token-submit'); - // this.dropButton = ''; - - this.queryBuilderTutorialInfoIcon = document.querySelector('#query-builder-tutorial-info-icon'); - this.tokenTutorialInfoIcon = document.querySelector('#token-tutorial-info-icon'); // nur Eventlistener - this.editTokenTutorialInfoIcon = document.querySelector('#edit-options-tutorial-info-icon'); // nur Eventlistener - this.structuralAttributeTutorialInfoIcon = document.querySelector('#add-structural-attribute-tutorial-info-icon'); // nur Eventlistener - this.generalOptionsQueryBuilderTutorialInfoIcon = document.querySelector('#general-options-query-builder-tutorial-info-icon'); // nur Eventlistener - //#endregion QueryBuilder Elements + this.noValueMessage = document.querySelector('#no-value-message'); + this.isTokenQueryInvalid = false; - //#region Strucutral Attributes - this.sentence = document.querySelector('#sentence'); - this.entity = document.querySelector('#entity'); - this.textAnnotation = document.querySelector('#text-annotation'); - - this.entityBuilder = document.querySelector('#entity-builder'); - this.englishEntType = document.querySelector('#english-ent-type'); - this.germanEntType = document.querySelector('#german-ent-type'); - this.emptyEntity = document.querySelector('#empty-entity'); //nur Eventlistener - this.entityAnyType = false; - - this.textAnnotationBuilder = document.querySelector('#text-annotation-builder'); - this.textAnnotationOptions = document.querySelector('#text-annotation-options'); - this.textAnnotationInput = document.querySelector('#text-annotation-input'); - this.textAnnotationSubmit = document.querySelector('#text-annotation-submit'); - //#endregion Structural Attributes - - //#region Token Attributes - this.tokenQueryFilled = false; - this.or = document.querySelector('#or'); - this.and = document.querySelector('#and'); - - this.wordBuilder = document.querySelector('#word-builder'); //nur hide/show - this.lemmaBuilder = document.querySelector('#lemma-builder'); //nur hide/show - this.inputOptions = document.querySelector('#input-options'); //nur hide/show - this.incidenceModifiersButton = document.querySelector('#incidence-modifiers-button'); //nur hide/show - this.conditionContainer = document.querySelector('#condition-container'); //nur hide/show this.wordInput = document.querySelector('#word-input'); this.lemmaInput = document.querySelector('#lemma-input'); - this.ignoreCaseCheckbox = document.querySelector('#ignore-case-checkbox'); // nur hide/show - this.ignoreCase = document.querySelector('input[type="checkbox"]'); - this.wildcardChar = document.querySelector('#wildcard-char'); - this.optionGroup = document.querySelector('#option-group'); + this.englishPosSelection = document.querySelector('#english-pos-selection'); + this.germanPosSelection = document.querySelector('#german-pos-selection'); + this.simplePosSelection = document.querySelector('#simple-pos-selection'); - this.englishPosBuilder = document.querySelector('#english-pos-builder'); //nur hide/show - this.englishPos = document.querySelector('#english-pos'); - this.germanPosBuilder = document.querySelector('#german-pos-builder'); //nur hide/show - this.germanPos = document.querySelector('#german-pos'); - - this.simplePosBuilder = document.querySelector('#simplepos-builder'); //nur hide/show - this.simplePos = document.querySelector('#simple-pos'); - - this.oneOrMore = document.querySelector('#one-or-more'); - this.zeroOrMore = document.querySelector('#zero-or-more'); - this.zeroOrOne = document.querySelector('#zero-or-one'); // die Incidence-Modifier evtl mit data-attributes abfragen? - this.exactlyN = document.querySelector('#exactlyN'); - this.betweenNM = document.querySelector('#betweenNM'); - this.nInput = document.querySelector('#n-input'); - this.nSubmit = document.querySelector('#n-submit'); //nur Eventlistener - this.nmInput = document.querySelector('#n-m-input'); - this.mInput = document.querySelector('#m-input'); - this.nmSubmit = document.querySelector('#n-m-submit'); //nur Eventlistener - - this.cancelBool = false; //nur true/false - this.noValueMessage = document.querySelector('#no-value-message'); //nur hide/show - //#endregion Token Attributes + this.ignoreCaseCheckbox = document.querySelector('#ignore-case-checkbox'); } } diff --git a/app/static/js/CorpusAnalysis/QueryBuilder/GeneralFunctionsQueryBuilder.js b/app/static/js/CorpusAnalysis/QueryBuilder/GeneralFunctionsQueryBuilder.js index 8c045086..83ed5a76 100644 --- a/app/static/js/CorpusAnalysis/QueryBuilder/GeneralFunctionsQueryBuilder.js +++ b/app/static/js/CorpusAnalysis/QueryBuilder/GeneralFunctionsQueryBuilder.js @@ -5,69 +5,27 @@ class GeneralFunctionsQueryBuilder { toggleClass(elements, className, action){ elements.forEach(element => { - element.classList[action](className); + document.querySelector('[data-toggle-area="' + element + '"]').classList[action](className); }); } - closeQueryBuilderModal(closeInstance) { - let instance = M.Modal.getInstance(closeInstance); - instance.close(); - } - - showPositionalAttrArea() { - // this.elements.positionalAttrArea.classList.remove('hide'); - // this.elements.structuralAttrArea.classList.add('hide'); - this.toggleClass([this.elements.positionalAttrArea], 'hide', 'remove'); - this.toggleClass([this.elements.structuralAttrArea], 'hide', 'add'); - this.wordBuilder(); - - this.elements.tokenQueryFilled = false; - - window.location.href = '#token-builder-content'; - } - - showStructuralAttrArea() { - this.elements.positionalAttrArea.classList.add('hide'); - this.elements.structuralAttrArea.classList.remove('hide'); - } - - wordBuilder() { - this.hideEverything(); - this.elements.wordInput.value = ''; - this.elements.wordBuilder.classList.remove('hide'); - this.elements.inputOptions.classList.remove('hide'); - this.elements.incidenceModifiersButton.classList.remove('hide'); - this.elements.conditionContainer.classList.remove('hide'); - this.elements.ignoreCaseCheckbox.classList.remove('hide'); - - this.elements.incidenceModifiersButton.firstElementChild.classList.add('disabled'); - this.elements.or.classList.add('disabled'); - this.elements.and.classList.add('disabled'); - - // Resets materialize select field to default value - let SelectInstance = M.FormSelect.getInstance(this.elements.positionalAttr); - SelectInstance.input.value = 'word'; - this.elements.positionalAttr.value = 'word'; - - } - queryChipFactory(dataType, prettyQueryText, queryText) { this.elements.counter++; - window.location.href = '#query-container'; - queryText = Utils.escape(queryText); - prettyQueryText = Utils.escape(prettyQueryText); - let queryChipElement = Utils.HTMLToElement( - ` - - ${prettyQueryText} - close - - ` - ); + this.elements.queryInputFieldInstance.addChip({ + tag: prettyQueryText + }); + + let queryChipElementIndex = this.elements.queryInputFieldInstance.$chips.length - 1; + let queryChipElement = this.elements.queryInputFieldInstance.$chips[queryChipElementIndex]; + queryChipElement.classList.add('query-component'); + queryChipElement.setAttribute('data-type', dataType); + queryChipElement.setAttribute('data-query', queryText); + queryChipElement.setAttribute('draggable', 'true'); + queryChipElement.addEventListener('click', () => {this.deleteAttr(queryChipElement);}); queryChipElement.addEventListener('dragstart', (event) => { // selects all nodes without target class - let queryChips = this.elements.yourQuery.querySelectorAll('.query-component'); + let queryChips = this.elements.queryInputField.querySelectorAll('.query-component'); // Adds a target chip in front of all draggable childnodes setTimeout(() => { @@ -111,152 +69,57 @@ class GeneralFunctionsQueryBuilder { }); // Ensures that metadata is always at the end of the query: - const lastChild = this.elements.yourQuery.lastChild; - const isLastChildTextAnnotation = lastChild && lastChild.dataset.type === 'text-annotation'; + // const lastChild = this.elements.queryInputFieldInstance.lastChild; + // const isLastChildTextAnnotation = lastChild && lastChild.dataset.type === 'text-annotation'; + // console.log(isLastChildTextAnnotation); + // console.log(lastChild); - if (!isLastChildTextAnnotation) { - this.elements.yourQuery.appendChild(queryChipElement); - } else { - this.elements.yourQuery.insertBefore(queryChipElement, lastChild); - } + // if (!isLastChildTextAnnotation) { + // this.elements.queryInputFieldInstance.appendChild(queryChipElement); + // } else { + // this.elements.queryInputFieldInstance.insertBefore(queryChipElement, lastChild); + // } - this.elements.queryContainer.classList.remove('hide'); this.queryPreviewBuilder(); // Shows a hint about possible functions for editing the query at the first added element in the query - if (this.elements.yourQuery.childNodes.length === 1) { - app.flash('You can edit your query by deleting individual elements or moving them via drag and drop.'); - } + // if (this.elements.queryInputFieldInstance.childNodes.length === 1) { + // app.flash('You can edit your query by deleting individual elements or moving them via drag and drop.'); + // } } queryPreviewBuilder() { let queryPreview = document.querySelector('#query-preview'); - this.elements.yourQueryContent = []; - for (let element of this.elements.yourQuery.childNodes) { + let queryChipElements = Array.from(Object.values(this.elements.queryInputFieldInstance.$chips)); + queryChipElements.pop(); + this.elements.queryInputFieldContent = []; + queryChipElements.forEach(element => { + let queryElement = element.dataset.query; if (queryElement !== undefined) { queryElement = Utils.escape(queryElement); - this.elements.yourQueryContent.push(queryElement); + this.elements.queryInputFieldContent.push(queryElement); } - } - - let queryString = this.elements.yourQueryContent.join(' '); + }); + + let queryString = this.elements.queryInputFieldContent.join(' '); queryString += ';'; - + queryPreview.innerHTML = queryString; + queryPreview.parentNode.classList.toggle('hide', queryString === ';'); } - deleteAttr(attr) { - this.elements.yourQuery.removeChild(attr); if (attr.dataset.type === "start-sentence") { - this.elements.sentence.innerHTML = 'Sentence'; + this.elements.sentenceElement.innerHTML = 'Sentence'; } else if (attr.dataset.type === "start-entity" || attr.dataset.type === "start-empty-entity") { - this.elements.entity.innerHTML = 'Entity'; + this.elements.entityElement.innerHTML = 'Entity'; } + let queryChipElements = Array.from(Object.values(this.elements.queryInputFieldInstance.$chips)); + queryChipElements.pop(); this.elements.counter -= 1; - if (this.elements.counter === 0) { - this.elements.queryContainer.classList.add('hide'); - } + this.elements.queryInputFieldInstance.deleteChip(queryChipElements.indexOf(attr)); this.queryPreviewBuilder(); } - - insertQuery() { - let extFormQuery= document.querySelector('#concordance-extension-form-query'); - this.elements.yourQueryContent = []; - this.validateValue(); - if (this.elements.valueValidator) { - for (let element of this.elements.yourQuery.childNodes) { - let queryElement = element.dataset.query; - if (queryElement !== 'undefined') { - this.elements.yourQueryContent.push(queryElement); - } - } - - let queryString = this.elements.yourQueryContent.join(' '); - queryString += ';'; - - this.elements.concordanceQueryBuilder.classList.add('modal-close'); - extFormQuery.value = queryString; - } - } - - validateValue() { - this.elements.valueValidator = true; - let sentenceCounter = 0; - let sentenceEndCounter = 0; - let entityCounter = 0; - let entityEndCounter = 0; - for (let element of this.elements.yourQuery.childNodes) { - if (element.dataset.type === 'start-sentence') { - sentenceCounter += 1; - }else if (element.dataset.type === 'end-sentence') { - sentenceEndCounter += 1; - }else if (element.dataset.type === 'start-entity' || element.dataset.type === 'start-empty-entity') { - entityCounter += 1; - }else if (element.dataset.type === 'end-entity') { - entityEndCounter += 1; - } - } - // Checks if the same number of opening and closing tags (entity and sentence) are present. Depending on what is missing, the corresponding error message is ejected - if (sentenceCounter > sentenceEndCounter) { - app.flash('Please add the closing sentence tag', 'error'); - this.elements.valueValidator = false; - } else if (sentenceCounter < sentenceEndCounter) { - app.flash('Please remove the closing sentence tag', 'error'); - this.elements.valueValidator = false; - } - if (entityCounter > entityEndCounter) { - app.flash('Please add the closing entity tag', 'error'); - this.elements.valueValidator = false; - } else if (entityCounter < entityEndCounter) { - app.flash('Please remove the closing entity tag', 'error'); - this.elements.valueValidator = false; - } - } - - clearAll() { - // Everything is reset. - let instance = M.Tooltip.getInstance(this.elements.queryBuilderTutorialInfoIcon); - - this.hideEverything(); - this.elements.counter = 0; - this.elements.concordanceQueryBuilder.classList.remove('modal-close'); - this.elements.positionalAttrArea.classList.add('hide'); - this.elements.structuralAttrArea.classList.add('hide'); - this.elements.yourQuery.innerHTML = ''; - this.elements.queryContainer.classList.add('hide'); - this.elements.entity.innerHTML = 'Entity'; - this.elements.sentence.innerHTML = 'Sentence'; - - // If the Modal is open after 5 seconds for 5 seconds (with 'instance'), a message is displayed indicating that further information can be obtained via the question mark icon - instance.tooltipEl.style.background = '#98ACD2'; - instance.tooltipEl.style.borderTop = 'solid 4px #0064A3'; - instance.tooltipEl.style.padding = '10px'; - instance.tooltipEl.style.color = 'black'; - - setTimeout(() => { - let modalInstance = M.Modal.getInstance(this.elements.concordanceQueryBuilder); - if (modalInstance.isOpen) { - instance.open(); - setTimeout(() => { - instance.close(); - }, 5000); - } - }, 5000); - } - - - hideEverything() { - let elementsToHide = ['wordBuilder', 'lemmaBuilder', 'ignoreCaseCheckbox', 'inputOptions', 'incidenceModifiersButton', 'conditionContainer', 'englishPosBuilder', 'germanPosBuilder', 'simplePosBuilder', 'entityBuilder', 'textAnnotationBuilder']; - elementsToHide = elementsToHide.map(element => this.elements[element]); - this.toggleClass(elementsToHide, 'hide', 'add'); - } - - tutorialIconHandler(id) { - setTimeout(() => { - window.location.href= id; - }, 0); - - } } + diff --git a/app/static/js/CorpusAnalysis/QueryBuilder/StructuralAttributeBuilderFunctionsQueryBuilder.js b/app/static/js/CorpusAnalysis/QueryBuilder/StructuralAttributeBuilderFunctionsQueryBuilder.js index c53494d4..2242340b 100644 --- a/app/static/js/CorpusAnalysis/QueryBuilder/StructuralAttributeBuilderFunctionsQueryBuilder.js +++ b/app/static/js/CorpusAnalysis/QueryBuilder/StructuralAttributeBuilderFunctionsQueryBuilder.js @@ -4,92 +4,20 @@ class StructuralAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQu this.elements = elements; } - addSentence() { - this.hideEverything(); - if (this.elements.sentence.text === 'End Sentence') { - this.queryChipFactory('end-sentence', 'Sentence End', ''); - this.elements.sentence.innerHTML = 'Sentence'; - } else { - this.queryChipFactory('start-sentence', 'Sentence Start', ''); - this.elements.sentence.innerHTML = 'End Sentence'; - } - } - - addEntity() { - if (this.elements.entity.text === 'End Entity') { - let queryText; - if (this.elements.entityAnyType === false) { - queryText = ''; - } else { - queryText = ''; - } - this.queryChipFactory('end-entity', 'Entity End', queryText); - this.elements.entity.innerHTML = 'Entity'; - } else { - this.hideEverything(); - this.elements.entityBuilder.classList.remove('hide'); - window.location.href = '#entity-builder'; - } - } - - englishEntTypeHandler() { - this.queryChipFactory('start-entity', 'Entity Type=' + this.elements.englishEntType.value, ''); - this.elements.entity.innerHTML = 'End Entity'; - this.hideEverything(); - this.elements.entityAnyType = false; - - // Resets materialize select dropdown - let SelectInstance = M.FormSelect.getInstance(this.elements.englishEntType); - SelectInstance.input.value = 'English ent_type'; - this.elements.englishEntType.value = 'default'; - } - - germanEntTypeHandler() { - this.queryChipFactory('start-entity', 'Entity Type=' + this.elements.germanEntType.value, ''); - this.elements.entity.innerHTML = 'End Entity'; - this.hideEverything(); - this.elements.entityAnyType = false; - - // Resets materialize select dropdown - let SelectInstance = M.FormSelect.getInstance(this.elements.germanEntType); - SelectInstance.input.value = 'German ent_type'; - this.elements.germanEntType.value = 'default'; - } - - emptyEntityButton() { - this.queryChipFactory('start-empty-entity', 'Entity Start', ''); - this.elements.entity.innerHTML = 'End Entity'; - this.hideEverything(); - this.elements.entityAnyType = true; - } - - addTextAnnotation() { - this.hideEverything(); - this.elements.textAnnotationBuilder.classList.remove('hide'); - window.location.href = '#text-annotation-builder'; - - // Resets materialize select dropdown - let SelectInstance = M.FormSelect.getInstance(this.elements.textAnnotationOptions); - SelectInstance.input.value = 'address'; - this.elements.textAnnotationOptions.value = 'address'; - this.elements.textAnnotationInput.value= ''; - } - - textAnnotationSubmitHandler() { - let noValueMetadataMessage = document.querySelector('#no-value-metadata-message'); - if (this.elements.textAnnotationInput.value === '') { - this.elements.textAnnotationSubmit.classList.add('red'); - noValueMetadataMessage.classList.remove('hide'); - setTimeout(() => { - this.elements.textAnnotationSubmit.classList.remove('red'); - }, 500); - setTimeout(() => { - noValueMetadataMessage.classList.add('hide'); - }, 3000); - } else { - let queryText = `:: match.text_${this.elements.textAnnotationOptions.value}="${this.elements.textAnnotationInput.value}"`; - this.queryChipFactory('text-annotation', `${this.elements.textAnnotationOptions.value}=${this.elements.textAnnotationInput.value}`, queryText); - this.hideEverything(); + actionButtonHandler(action) { + switch (action) { + case 'sentence': + break; + case 'entity': + this.toggleClass(['entity-builder'], 'hide', 'toggle'); + this.toggleClass(['text-annotation-builder'], 'hide', 'add'); + break; + case 'meta-data': + this.toggleClass(['text-annotation-builder'], 'hide', 'toggle'); + this.toggleClass(['entity-builder'], 'hide', 'add'); + break; + default: + break; } } } diff --git a/app/static/js/CorpusAnalysis/QueryBuilder/TokenAttributeBuilderFunctionsQueryBuilder.js b/app/static/js/CorpusAnalysis/QueryBuilder/TokenAttributeBuilderFunctionsQueryBuilder.js index 6ebc5e3c..6b9b9a54 100644 --- a/app/static/js/CorpusAnalysis/QueryBuilder/TokenAttributeBuilderFunctionsQueryBuilder.js +++ b/app/static/js/CorpusAnalysis/QueryBuilder/TokenAttributeBuilderFunctionsQueryBuilder.js @@ -2,34 +2,44 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu constructor(elements) { super(elements); this.elements = elements; + + this.elements.tokenSubmitButton.addEventListener('click', () => {this.addTokenToQuery();}); + this.elements.wordInput.addEventListener('input', () => {this.optionToggleHandler();}); + this.elements.lemmaInput.addEventListener('input', () => {this.optionToggleHandler();}); } - //#region General functions of the Token Builder - tokenTypeSelector() { - this.hideEverything(); - switch (this.elements.positionalAttr.value) { - case 'word': - this.wordBuilder(); - break; - case 'lemma': - this.lemmaBuilder(); - break; - case 'english-pos': - this.englishPosHandler(); - break; - case 'german-pos': - this.germanPosHandler(); - break; - case 'simple-pos-button': - this.simplePosBuilder(); - break; - case 'empty-token': - this.emptyTokenHandler(); - break; - default: - this.wordBuilder(); - break; + lemmaOrWordInputCheck() { + let input; + + if (document.querySelector('[data-toggle-area="word"]').classList.contains('hide') === false) { + input = this.elements.wordInput; + } else { + input = this.elements.lemmaInput; } + + return input; + } + + optionToggleHandler() { + let input = this.lemmaOrWordInputCheck() + + if (input.value === '') { + this.toggleClass(['incidence-modifiers', 'or', '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(() => { + this.elements.tokenSubmitButton.classList.remove('red'); + }, 500); + setTimeout(() => { + this.elements.noValueMessage.classList.add('hide'); + }, 3000); } tokenChipFactory(prettyQueryText, tokenText) { @@ -43,394 +53,209 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu close `; queryChipElement = builderElement.firstElementChild; - queryChipElement.addEventListener('click', () => {this.deleteTokenAttr(queryChipElement);}); this.elements.tokenQuery.appendChild(queryChipElement); } - deleteTokenAttr(attr) { - if (this.elements.tokenQuery.childNodes.length < 2) { - this.elements.tokenQuery.removeChild(attr); - this.wordBuilder(); - } else { - this.elements.tokenQuery.removeChild(attr); - } - - } - addTokenToQuery() { - let c; - let tokenQueryContent = ''; //for ButtonFactory(prettyQueryText) - let tokenQueryText = ''; //for ButtonFactory(queryText) - this.elements.cancelBool = false; + let c = this.elements.ignoreCaseCheckbox.checked ? ' %c' : ''; + let tokenQueryContent = ''; + let tokenQueryText = ''; + this.elements.isTokenQueryInvalid = false; let tokenIsEmpty = false; - if (this.elements.ignoreCase.checked) { - c = ' %c'; - } else { - c = ''; - } - - for (let element of this.elements.tokenQuery.childNodes) { + this.elements.tokenQuery.childNodes.forEach(element => { tokenQueryContent += ' ' + element.firstChild.data + ' '; tokenQueryText += decodeURI(element.dataset.tokentext); if (element.innerText.indexOf('empty token') !== -1) { tokenIsEmpty = true; } + }); + + switch (this.elements.positionalAttrSelection.value) { + case 'word': + if (this.elements.wordInput.value === '') { + this.disableTokenSubmit(); + } else { + tokenQueryContent += `word=${this.elements.wordInput.value}${c}`; + tokenQueryText += `word="${this.elements.wordInput.value}"${c}`; + this.elements.wordInput.value = ''; + } + break; + case 'lemma': + if (this.elements.lemmaInput.value === '') { + this.disableTokenSubmit(); + } else { + tokenQueryContent += `lemma=${this.elements.lemmaInput.value}${c}`; + tokenQueryText += `lemma="${this.elements.lemmaInput.value}"${c}`; + this.elements.lemmaInput.value = ''; + } + break; + case 'english-pos': + if (this.elements.englishPos.value === 'default') { + this.disableTokenSubmit(); + } else { + tokenQueryContent += `pos=${this.elements.englishPosSelection.value}`; + tokenQueryText += `pos="${this.elements.englishPosSelection.value}"`; + this.elements.englishPosSelection.value = ''; + } + break; + case 'german-pos': + if (this.elements.germanPosSelection.value === 'default') { + this.disableTokenSubmit(); + } else { + tokenQueryContent += `pos=${this.elements.germanPosSelection.value}`; + tokenQueryText += `pos="${this.elements.germanPosSelection.value}"`; + this.elements.germanPosSelection.value = ''; + } + break; + case 'simple-pos': + if (this.elements.simplePosSelection.value === 'default') { + this.disableTokenSubmit(); + } else { + tokenQueryContent += `simple_pos=${this.elements.simplePosSelection.value}`; + tokenQueryText += `simple_pos="${this.elements.simplePosSelection.value}"`; + this.elements.simplePosSelection.value = ''; + } + break; + default: + break; } - if (this.elements.tokenQueryFilled === false) { - switch (this.elements.positionalAttr.value) { - case 'word': - if (this.elements.wordInput.value === '') { - this.disableTokenSubmit(); - } else { - tokenQueryContent += `word=${this.elements.wordInput.value}${c}`; - tokenQueryText += `word="${this.elements.wordInput.value}"${c}`; - this.elements.wordInput.value = ''; - } - break; - case 'lemma': - if (this.elements.lemmaInput.value === '') { - this.disableTokenSubmit(); - } else { - tokenQueryContent += `lemma=${this.elements.lemmaInput.value}${c}`; - tokenQueryText += `lemma="${this.elements.lemmaInput.value}"${c}`; - this.elements.lemmaInput.value = ''; - } - break; - case 'english-pos': - if (this.elements.englishPos.value === 'default') { - this.disableTokenSubmit(); - } else { - tokenQueryContent += `pos=${this.elements.englishPos.value}`; - tokenQueryText += `pos="${this.elements.englishPos.value}"`; - this.elements.englishPos.value = ''; - } - break; - case 'german-pos': - if (this.elements.germanPos.value === 'default') { - this.disableTokenSubmit(); - } else { - tokenQueryContent += `pos=${this.elements.germanPos.value}`; - tokenQueryText += `pos="${this.elements.germanPos.value}"`; - this.elements.germanPos.value = ''; - } - break; - case 'simple-pos-button': - if (this.elements.simplePos.value === 'default') { - this.disableTokenSubmit(); - } else { - tokenQueryContent += `simple_pos=${this.elements.simplePos.value}`; - tokenQueryText += `simple_pos="${this.elements.simplePos.value}"`; - this.elements.simplePos.value = ''; - } - break; - default: - this.wordBuilder(); - break; - } - } - - // cancelBool looks in disableTokenSubmit() whether a value is passed. If the input fields/dropdowns are empty (cancelBool === true), no token is added. - if (this.elements.cancelBool === false) { + // 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) { // Square brackets are added only if it is not an empty token (where they are already present). if (tokenIsEmpty === false) { tokenQueryText = '[' + tokenQueryText + ']'; } this.queryChipFactory('token', tokenQueryContent, tokenQueryText); - this.hideEverything(); - this.elements.positionalAttrArea.classList.add('hide'); - this.elements.tokenQuery.innerHTML = ''; - } + this.resetPositionalAttrModal(); + this.elements.positionalAttrModal.close(); - } - - disableTokenSubmit() { - this.elements.cancelBool = true; - this.elements.tokenSubmitButton.classList.add('red'); - this.elements.noValueMessage.classList.remove('hide'); - setTimeout(() => { - this.elements.tokenSubmitButton.classList.remove('red'); - }, 500); - setTimeout(() => { - this.elements.noValueMessage.classList.add('hide'); - }, 3000); - } - - inputFieldHandler() { - let input; - - if (this.elements.wordBuilder.classList.contains('hide') === false) { - input = this.elements.wordInput; - } else { - input = this.elements.lemmaInput; - } - - if (input.value === '') { - this.elements.incidenceModifiersButton.firstElementChild.classList.add('disabled'); - this.elements.or.classList.add('disabled'); - this.elements.and.classList.add('disabled'); - } else { - this.elements.incidenceModifiersButton.firstElementChild.classList.remove('disabled'); - this.elements.or.classList.remove('disabled'); - this.elements.and.classList.remove('disabled'); } } - //#endregion General functions of the Token Builder + resetPositionalAttrModal() { + let originalSelectionList = + ` + + + + + + + `; + document.querySelector('#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'); - //#region Dropdown Select Handler + document.querySelector(`#positional-attr-selection option[value="word"]`).selected = true; - lemmaBuilder() { - this.hideEverything(); - this.elements.lemmaInput.value = ''; - this.elements.lemmaBuilder.classList.remove('hide'); - this.elements.inputOptions.classList.remove('hide'); - this.elements.incidenceModifiersButton.classList.remove('hide'); - this.elements.incidenceModifiersButton.firstElementChild.classList.add('disabled'); - this.elements.conditionContainer.classList.remove('hide'); - this.elements.ignoreCaseCheckbox.classList.remove('hide'); - - this.elements.incidenceModifiersButton.firstElementChild.classList.add('disabled'); - this.elements.or.classList.add('disabled'); - this.elements.and.classList.add('disabled'); + let instance = M.FormSelect.getInstance(document.getElementById('positional-attr-selection')); + instance.destroy(); + M.FormSelect.init(document.getElementById('positional-attr-selection')); } - englishPosHandler() { - this.hideEverything(); - this.elements.englishPosBuilder.classList.remove('hide'); - this.elements.incidenceModifiersButton.classList.remove('hide'); - this.elements.conditionContainer.classList.remove('hide'); - this.elements.incidenceModifiersButton.firstElementChild.classList.remove('disabled'); - this.elements.or.classList.remove('disabled'); - this.elements.and.classList.remove('disabled'); - - // Resets materialize select dropdown - let selectInstance = M.FormSelect.getInstance(this.elements.englishPos); - selectInstance.input.value = 'English pos tagset'; - this.elements.englishPos.value = 'default'; - } - - germanPosHandler() { - this.hideEverything(); - this.elements.germanPosBuilder.classList.remove('hide'); - this.elements.incidenceModifiersButton.classList.remove('hide'); - this.elements.conditionContainer.classList.remove('hide'); - this.elements.incidenceModifiersButton.firstElementChild.classList.remove('disabled'); - this.elements.or.classList.remove('disabled'); - this.elements.and.classList.remove('disabled'); - - // Resets materialize select dropdown - let selectInstance = M.FormSelect.getInstance(this.elements.germanPos); - selectInstance.input.value = 'German pos tagset'; - this.elements.germanPos.value = 'default'; - } - - simplePosBuilder() { - this.hideEverything(); - this.elements.simplePosBuilder.classList.remove('hide'); - this.elements.incidenceModifiersButton.classList.remove('hide'); - this.elements.conditionContainer.classList.remove('hide'); - this.elements.simplePos.selectedIndex = 0; - this.elements.incidenceModifiersButton.firstElementChild.classList.remove('disabled'); - this.elements.or.classList.remove('disabled'); - this.elements.and.classList.remove('disabled'); - - // Resets materialize select dropdown - let selectInstance = M.FormSelect.getInstance(this.elements.simplePos); - selectInstance.input.value = 'simple_pos tagset'; - this.elements.simplePos.value = 'default'; - M.FormSelect.init( - selectInstance, - { - dropdownOptions: { - direction: 'bottom', - coverTrigger: false - } - } - ) - - } - - emptyTokenHandler() { - this.tokenChipFactory('empty token', '[]'); - this.elements.tokenQueryFilled = true; - this.hideEverything(); - this.elements.incidenceModifiersButton.classList.remove('hide'); - this.elements.incidenceModifiersButton.firstElementChild.classList.remove('disabled'); - - } - //#endregion Dropdown Select Handler - - //#region Options to edit your token - Wildcard Charakter, Option Group, Incidence Modifiers, Ignore Case, 'and', 'or' - - inputOptionHandler(elem) { - let input; - - if (this.elements.wordBuilder.classList.contains('hide') === false) { - input = this.elements.wordInput; - } else { - input = this.elements.lemmaInput; - } - - if (elem === this.elements.optionGroup) { - input.value += '(option1|option2)'; - let firstIndex = input.value.indexOf('option1'); - let lastIndex = firstIndex + 'option1'.length; - input.focus(); - input.setSelectionRange(firstIndex, lastIndex); - } else if (elem === this.elements.wildcardChar) { - input.value += '.'; - } - this.inputFieldHandler(); - } - - nSubmitHandler() { - let instance = M.Modal.getInstance(this.elements.exactlyN); - instance.close(); - - switch (this.elements.positionalAttr.value) { - case 'word': - this.elements.wordInput.value += ' {' + this.elements.nInput.value + '}'; + actionButtonHandler(elem) { + let input = this.lemmaOrWordInputCheck(); + switch (elem) { + case 'option-group': + input.value += '(option1|option2)'; + let firstIndex = input.value.indexOf('option1'); + let lastIndex = firstIndex + 'option1'.length; + input.focus(); + input.setSelectionRange(firstIndex, lastIndex); break; - case 'lemma': - this.elements.lemmaInput.value += ' {' + this.elements.nInput.value + '}'; + case 'wildcard-char': + input.value += '.'; break; - case 'english-pos': - this.elements.tokenQueryFilled = true; - this.tokenChipFactory(`pos=${this.elements.englishPos.value}`, `pos="${this.elements.englishPos.value}"`); - this.tokenChipFactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}'); - this.elements.englishPosBuilder.classList.add('hide'); - this.elements.incidenceModifiersButton.classList.add('hide'); + case 'and': + this.conditionHandler('and', " & "); break; - case 'german-pos': - this.elements.tokenQueryFilled = true; - this.tokenChipFactory(`pos=${this.elements.germanPos.value}`, `pos="${this.elements.germanPos.value}"`); - this.tokenChipFactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}'); - this.elements.germanPosBuilder.classList.add('hide'); - this.elements.incidenceModifiersButton.classList.add('hide'); - break; - case 'simple-pos-button': - this.elements.tokenQueryFilled = true; - this.tokenChipFactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos="${this.elements.simplePos.value}"`); - this.tokenChipFactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}'); - this.elements.simplePosBuilder.classList.add('hide'); - this.elements.incidenceModifiersButton.classList.add('hide'); - break; - case 'empty-token': - this.tokenChipFactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}'); + case 'or': + this.conditionHandler('or', " | "); break; default: break; } - + this.optionToggleHandler(); } - nmSubmitHandler() { - let instance = M.Modal.getInstance(this.elements.betweenNM); - instance.close(); - - switch (this.elements.positionalAttr.value) { - case 'word': - this.elements.wordInput.value += `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`; - break; - case 'lemma': - this.elements.lemmaInput.value += `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`; - break; - case 'english-pos': - this.elements.tokenQueryFilled = true; - this.tokenChipFactory(`pos=${this.elements.englishPos.value}`, `pos="${this.elements.englishPos.value}"`); - this.tokenChipFactory(`{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`, `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`); - this.elements.englishPosBuilder.classList.add('hide'); - this.elements.incidenceModifiersButton.classList.add('hide'); - break; - case 'german-pos': - this.elements.tokenQueryFilled = true; - this.tokenChipFactory(`pos=${this.elements.germanPos.value}`, `pos="${this.elements.germanPos.value}"`); - this.tokenChipFactory(`{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`, `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`); - this.elements.germanPosBuilder.classList.add('hide'); - this.elements.incidenceModifiersButton.classList.add('hide'); - break; - case 'simple-pos-button': - this.elements.tokenQueryFilled = true; - this.tokenChipFactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos="${this.elements.simplePos.value}"`); - this.tokenChipFactory(`{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`, `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`); - this.elements.simplePosBuilder.classList.add('hide'); - this.elements.incidenceModifiersButton.classList.add('hide'); - break; - case 'empty-token': - this.tokenChipFactory(`{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`, `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`); - break; - default: - break; - } - } - - incidenceModifiersHandler(elem) { + incidenceModifierHandler(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. - if (this.elements.positionalAttr.value === 'empty-token') { - this.tokenChipFactory(elem.innerText, elem.dataset.token); - } else if (this.elements.positionalAttr.value === 'english-pos') { - this.tokenChipFactory(`pos=${this.elements.englishPos.value}`, `pos="${this.elements.englishPos.value}"`); - this.tokenChipFactory(elem.innerText, elem.dataset.token); - this.elements.englishPosBuilder.classList.add('hide'); - this.elements.incidenceModifiersButton.classList.add('hide'); - this.elements.tokenQueryFilled = true; - } else if (this.elements.positionalAttr.value === 'german-pos') { - this.tokenChipFactory(`pos=${this.elements.germanPos.value}`, `pos="${this.elements.germanPos.value}"`); - this.tokenChipFactory(elem.innerText, elem.dataset.token); - this.elements.germanPosBuilder.classList.add('hide'); - this.elements.incidenceModifiersButton.classList.add('hide'); - this.elements.tokenQueryFilled = true; - } else if (this.elements.positionalAttr.value === 'simple-pos-button') { - this.tokenChipFactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos="${this.elements.simplePos.value}"`); - this.tokenChipFactory(elem.innerText, elem.dataset.token); - this.elements.simplePosBuilder.classList.add('hide'); - this.elements.incidenceModifiersButton.classList.add('hide'); - this.elements.tokenQueryFilled = true; - } else { - let input; - - if (this.elements.wordBuilder.classList.contains('hide') === false) { - input = this.elements.wordInput; - } else { - input = this.elements.lemmaInput; - } - input.value += elem.dataset.token; + switch (this.elements.positionalAttrSelection.value) { + case 'empty-token': + this.tokenChipFactory(elem.innerText, elem.dataset.token); + break; + case 'english-pos': + this.tokenChipFactory(`pos=${this.elements.englishPos.value}`, `pos="${this.elements.englishPos.value}"`); + this.tokenChipFactory(elem.innerText, elem.dataset.token); + this.elements.tokenQueryFilled = true; + break; + case 'german-pos': + this.tokenChipFactory(`pos=${this.elements.germanPos.value}`, `pos="${this.elements.germanPos.value}"`); + this.tokenChipFactory(elem.innerText, elem.dataset.token); + this.elements.tokenQueryFilled = true; + break; + case 'simple-pos': + this.tokenChipFactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos="${this.elements.simplePos.value}"`); + this.tokenChipFactory(elem.innerText, elem.dataset.token); + this.elements.tokenQueryFilled = true; + break; + default: + let input = this.lemmaOrWordInputCheck(); + input.value += elem.dataset.token; + break; } - } - orHandler() { - this.conditionHandler('or', ' | '); - } + nmSubmitHandler(modalId) { + let modal = document.querySelector(`#${modalId}`); + 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 = `${input_n}${input_m}`; - andHandler() { - this.conditionHandler('and', ' & '); + 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; + } } conditionHandler(conditionText, conditionQueryContent) { - this.hideEverything(); let tokenQueryContent; let tokenQueryText; - let c; + let c = this.elements.ignoreCaseCheckbox.checked ? ' %c' : ''; + let selectionDefault = "word"; + let optionDeleteList = []; - if (this.elements.ignoreCase.checked) { - c = ' %c'; - } else { - c = ''; - } - - switch (this.elements.positionalAttr.value) { + switch (this.elements.positionalAttrSelection.value) { case 'word': tokenQueryContent = `word=${this.elements.wordInput.value}${c}`; tokenQueryText = `word="${this.elements.wordInput.value}"${c}`; this.elements.wordInput.value = ''; + if (conditionText === 'and') { + selectionDefault = "english-pos"; + optionDeleteList = ['word', 'lemma', 'empty-token']; + } break; case 'lemma': tokenQueryContent = `lemma=${this.elements.lemmaInput.value}${c}`; tokenQueryText = `lemma="${this.elements.lemmaInput.value}"${c}`; this.elements.lemmaInput.value = ''; + if (conditionText === 'and') { + selectionDefault = "english-pos"; + optionDeleteList = ['word', 'lemma', 'empty-token']; + } break; case 'english-pos': tokenQueryContent = `pos=${this.elements.englishPos.value}`; @@ -442,20 +267,34 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu tokenQueryText = `pos="${this.elements.germanPos.value}"`; this.elements.germanPos.value = ''; break; - case 'simple-pos-button': + case 'simple-pos': tokenQueryContent = `simple_pos=${this.elements.simplePos.value}`; tokenQueryText = `simple_pos="${this.elements.simplePos.value}"`; this.elements.simplePos.value = ''; break; default: - this.wordBuilder(); break; } this.tokenChipFactory(tokenQueryContent, tokenQueryText); this.tokenChipFactory(conditionText, conditionQueryContent); - this.wordBuilder(); + this.setTokenSelection(selectionDefault, optionDeleteList); + } + + setTokenSelection(selection, optionDeleteList) { + optionDeleteList.forEach(option => { + document.querySelector(`#positional-attr-selection option[value=${option}]`).remove(); + }); + + document.querySelector(`#positional-attr-selection option[value=${selection}]`).selected = true; + + 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([selection], 'hide', 'remove'); + this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add'); } - //#endregion Options to edit your token - Wildcard Charakter, Option Group, Incidence Modifiers, Ignore Case, 'and', 'or' } diff --git a/app/templates/corpora/_analysis/_query_builderOLD.html.j2 b/app/templates/corpora/_analysis/_query_builderOLD.html.j2 deleted file mode 100644 index e0283353..00000000 --- a/app/templates/corpora/_analysis/_query_builderOLD.html.j2 +++ /dev/null @@ -1,403 +0,0 @@ - -
- - -

- -
-
-
Your Query: - - help_outline -
-
-
-
-
-
- - send - -
-

Preview:

-

-
-
- - -
Use the following options to build your query. If you need help, click on the question mark in the upper right corner!
-

- Add new token to your query - Add structural attributes to your query - -
-

-
Which structural attribute do you want to add to your query?help_outline
-

-
-
- sentence - entity - Meta Data -
-
- - -
-

-
-
- Add Entity of any type -

-
- - -
-
- -
-
-
- - -
-

-
-
-
- - -
-
- mode_edit - -
-
-

- send -

-
-
No value entered!
-
-
-
- -
-

-
-
-
Which kind of token are you looking for? help_outline
-
-
- -
-
-

-
-
-
- -
-
- mode_edit - -
-
- -
-
- mode_edit - -
-
- -
-
-
-
- - -
-
-
-
- -
-
-
-
- - -
-
-
-
- -
-
-
-
- - -
-
-
-
-
-

- send -

-
-
No value entered!
-
-
-
-
Options to edit your token: help_outline
-
-

-
- - - - - -
-

- -

-
-
- or - and -
-
-
-
- - - -
- -
diff --git a/app/templates/corpora/_analysis/concordance.html.j2 b/app/templates/corpora/_analysis/concordance.html.j2 index 7fe1c6a6..c3189b75 100644 --- a/app/templates/corpora/_analysis/concordance.html.j2 +++ b/app/templates/corpora/_analysis/concordance.html.j2 @@ -21,7 +21,7 @@ Query your corpus with the CQP query language utilizing a KWIC view.
- Query + Query search
@@ -37,44 +37,7 @@ Query your corpus with the CQP query language utilizing a KWIC view. {{ expert_mode.card_content(id_prefix) }}
- {# {{ query_builder.card_content(id_prefix) }} #} -
-
-
- search - {# #} -
- {# #} - - help Corpus Query Language tutorial - | - info Tagsets -
-
- arrow_forward - - -
-
-

Preview:

-

-
-
-
-
Use the following options to build your query.
-

- Add new token to your query - Add structural attributes to your query -
-
-

 

- -
-
-
+ {{ query_builder.card_content(id_prefix) }}
@@ -164,25 +127,13 @@ Query your corpus with the CQP query language utilizing a KWIC view. {% endset %} {% set modals %} - +{{ query_builder.structural_attribute_modal() }} +{{ query_builder.positional_attribute_modal() }} {% endset %} {% set scripts %} +{# {{ query_builder.scripts() }} #} {% endset %} 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 5ddedac9..a73c1295 100644 --- a/app/templates/corpora/_analysis/query_builder/_query_builder.html.j2 +++ b/app/templates/corpora/_analysis/query_builder/_query_builder.html.j2 @@ -1,32 +1,38 @@ {% macro card_content(id_prefix) %} -
-
-
- search - {# #} -
- {# #} - - help Corpus Query Language tutorial - | - info Tagsets + +
+
+
-
+
arrow_forward
-
+
+
+
+ + help Corpus Query Language tutorial + | + info Tagsets +
+
+
+

Preview:


-
-
Use the following options to build your query.
+
+
+

- Add new token to your query - Add structural attributes to your query + Add new token to your query + Add structural attributes to your query
+
+

 

- +
+ +{% endmacro %} + +{% macro structural_attribute_modal() %} + {% endmacro %} + +{% macro positional_attribute_modal() %} + +{% endmacro %} + +{% macro scripts() %} + +{% endmacro %}