From 9781425602a80f17a11c61bf19a72a6de351cf3e Mon Sep 17 00:00:00 2001 From: Inga Kirschnick Date: Wed, 3 Aug 2022 16:21:11 +0200 Subject: [PATCH] Query Builder New Design --- app/static/js/CorpusAnalysis/QueryBuilder.js | 103 ++++++++++++++++--- app/templates/test/analyse_corpus.html.j2 | 97 ++++++++++------- 2 files changed, 147 insertions(+), 53 deletions(-) diff --git a/app/static/js/CorpusAnalysis/QueryBuilder.js b/app/static/js/CorpusAnalysis/QueryBuilder.js index c8916c38..fb4f6b2e 100644 --- a/app/static/js/CorpusAnalysis/QueryBuilder.js +++ b/app/static/js/CorpusAnalysis/QueryBuilder.js @@ -2,29 +2,27 @@ class ConcordanceQueryBuilder { constructor() { - - this.positionalAttrList = { - "emptyToken": {prettyText: "empty token", cqlOpening: "[", tokenValue:"", cqlClosing: "]"}, - "word": {prettyText: "word", cqlOpening: "[word=", tokenValue: "", cqlClosing: "]"}, - "lemma": {prettyText: "lemma", cqlOpening: "[lemma=", tokenValue:"", cqlClosing: "]"}, - "pos": {prettyText: "pos", cqlOpening: "[pos=", tokenValue:"", cqlClosing: "]"}, - "simplePos": {prettyText: "simple_pos", cqlOpening: "[simple_pos=", tokenValue:"", cqlClosing: "]"} - } this.elements = { counter: 0, yourQueryContent: [], queryContent:[], + closeQueryBuilder: document.querySelector("#close-query-builder"), //#region QueryBuilder Elements concordanceQueryBuilder: document.querySelector("#concordance-query-builder"), concordanceQueryBuilderButton: document.querySelector("#concordance-query-builder-button"), + positionalAttrButton: document.querySelector('#positional-attr-button'), + positionalAttrArea: document.querySelector('#positional-attr'), positionalAttr: document.querySelector("#token-attr"), - structuralAttr: document.querySelector("#structural-attr"), + structuralAttrButton: document.querySelector('#structural-attr-button'), + structuralAttrArea: document.querySelector("#structural-attr"), + queryContainer: document.querySelector('#query-container'), buttonPreparer: document.querySelector("#button-preparer"), yourQuery: document.querySelector("#your-query"), insertQueryButton: document.querySelector("#insert-query-button"), + queryPreview: document.querySelector('#query-preview'), tokenQuery: document.querySelector("#token-query"), tokenBuilderContent: document.querySelector("#token-builder-content"), buildTokenButton: document.querySelector("#build-token-button"), @@ -113,9 +111,14 @@ class ConcordanceQueryBuilder { //#endregion Token Attributes } + this.elements.closeQueryBuilder.addEventListener("click", () => {this.closeQueryBuilderModal();}); + this.elements.concordanceQueryBuilderButton.addEventListener("click", () => {this.clearAll();}); this.elements.insertQueryButton.addEventListener("click", () => {this.insertQuery();}); + this.elements.positionalAttrButton.addEventListener("click", () => {this.showPositionalAttrArea();}); + this.elements.structuralAttrButton.addEventListener("click", () => {this.showStructuralAttrArea();}); + //#region Structural Attribute Event Listeners this.elements.sentence.addEventListener("click", () => {this.addSentence();}); this.elements.entity.addEventListener("click", () => {this.addEntity();}); @@ -492,8 +495,21 @@ class ConcordanceQueryBuilder { } tokenButtonfactory(dataType, prettyText, tokenText) { + let chipColor = 'style="background-color:#'; + if (dataType === 'pos' || dataType === 'word' || dataType === 'lemma' || dataType === 'simplePos'){ + chipColor += 'EF60B4'; + }else if (dataType === "emptyToken"){ + chipColor += '43C6FC'; + }else if (dataType === "and" || dataType === "or"){ + chipColor += 'FFCC00'; + }else if (dataType === "incidenceModifier" || dataType === "betweenNM" || dataType === "exactlyN"){ + chipColor += '2FBBAB'; + }else { + chipColor = ''; + } + tokenText = encodeURI(tokenText); - this.elements.buttonPreparer.innerHTML += '' + prettyText + ''; + this.elements.buttonPreparer.innerHTML += '
' + prettyText + 'close
'; let tokenDummyButton = this.elements.buttonPreparer.querySelector(':first-child'); tokenDummyButton.addEventListener("click", () => {this.deleteTokenAttr(tokenDummyButton);}); this.elements.tokenQuery.appendChild(tokenDummyButton); @@ -538,7 +554,7 @@ class ConcordanceQueryBuilder { let emptyTokenCheck = false; for (let element of this.elements.tokenQuery.childNodes) { - tokenQueryContent += ' ' + element.text + ' '; + tokenQueryContent += ' ' + element.firstChild.data + ' '; tokenQueryText += ' ' + decodeURI(element.dataset.tokentext); if (element.dataset.type === "emptyToken"){ emptyTokenCheck = true; @@ -547,7 +563,7 @@ class ConcordanceQueryBuilder { if (emptyTokenCheck === false){ tokenQueryText = '[' + tokenQueryText + ']'; - } + } this.buttonfactory('token', tokenQueryContent, tokenQueryText); tokenQueryContent = ''; @@ -564,12 +580,66 @@ class ConcordanceQueryBuilder { //#region General Functions + closeQueryBuilderModal(){ + let instance = M.Modal.getInstance(this.elements.concordanceQueryBuilder); + instance.close(); + } + + showPositionalAttrArea(){ + this.elements.positionalAttrArea.classList.remove('hide'); + this.elements.structuralAttrArea.classList.add('hide'); + } + + showStructuralAttrArea(){ + this.elements.positionalAttrArea.classList.add('hide'); + this.elements.structuralAttrArea.classList.remove('hide'); + } + buttonfactory(dataType, prettyText, queryText) { + let chipColor = 'style="background-color:#'; + if (dataType === 'start-sentence' || dataType === 'end-sentence'){ + chipColor += 'FD9720'; + }else if (dataType === "start-empty-entity" || dataType === "start-entity" || dataType === "end-entity"){ + chipColor += 'A6E22D'; + }else if (dataType === "text-annotation"){ + chipColor += '2FBBAB'; + }else if (dataType === "token"){ + chipColor += '28B3D1'; + }else { + chipColor = ''; + } + queryText = encodeURI(queryText); - this.elements.buttonPreparer.innerHTML += '' + prettyText + ''; + this.elements.buttonPreparer.innerHTML += '
' + prettyText + 'close
'; let dummyButton = this.elements.buttonPreparer.querySelector(':first-child'); dummyButton.addEventListener("click", () => {this.deleteAttr(dummyButton);}); this.elements.yourQuery.appendChild(dummyButton); + this.elements.queryContainer.classList.remove("hide"); + + this.queryPreviewBuilder(); + + } + + queryPreviewBuilder(){ + + this.elements.yourQueryContent = []; + + for (let element of this.elements.yourQuery.childNodes) { + + let queryElement = decodeURI(element.dataset.query); + if (queryElement.includes("<")){ + queryElement = queryElement.replace("<", "<"); + } + if (queryElement.includes(">")){ + queryElement = queryElement.replace(">", ">"); + } + this.elements.yourQueryContent.push(queryElement); + } + + + let queryString = this.elements.yourQueryContent.join(' '); + queryString += ";"; + this.elements.queryPreview.innerHTML = queryString; } deleteAttr(attr) { @@ -639,8 +709,10 @@ class ConcordanceQueryBuilder { this.elements.counter -= 1; if(this.elements.counter === 0){ this.elements.insertQueryButton.classList.add("disabled"); - + this.elements.queryContainer.classList.add("hide"); } + + this.queryPreviewBuilder(); } insertQuery() { @@ -666,9 +738,12 @@ class ConcordanceQueryBuilder { this.elements.buildTokenButton.classList.add("disabled"); this.elements.insertQueryButton.classList.add("disabled"); this.elements.concordanceQueryBuilder.classList.remove('modal-close'); + this.elements.positionalAttrArea.classList.add('hide'); + this.elements.structuralAttrArea.classList.add('hide'); this.hideEverything(); this.buttonDisabler('start'); this.elements.yourQuery.innerHTML = ''; + this.elements.queryContainer.classList.add("hide"); } //#endregion General Functions } diff --git a/app/templates/test/analyse_corpus.html.j2 b/app/templates/test/analyse_corpus.html.j2 index 5b95003d..d698cc5c 100644 --- a/app/templates/test/analyse_corpus.html.j2 +++ b/app/templates/test/analyse_corpus.html.j2 @@ -1,6 +1,8 @@ {% extends "base.html.j2" %} {% import "materialize/wtf.html.j2" as wtf %} - + {% block main_attribs %} class="service-scheme" data-service="corpus-analysis" id="corpus-analysis-app-container"{% endblock main_attribs %} @@ -252,17 +254,49 @@ -
+
+

+
Which kind of token are you looking for?

@@ -525,27 +560,11 @@

- Add token + Add token to your query check
- -
-
-
Your Query
-

Examples:

-

- <ent_type="PERSON"> []* </ent_type> []* - [simple_pos="VERB"] :: match.text_publishing_year="1991"; -

-
-
-

- - Insert - send - -
+