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

Query Builder New Design

Browse Source
This commit is contained in:
Inga Kirschnick
2022-08-03 16:21:11 +02:00
parent 4497567de0
commit 9781425602
2 changed files with 147 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 += '<a class="btn-small waves-effect waves-light" style="margin-left:3px" data-type="' + dataType + '" data-tokentext="' + tokenText + '">' + prettyText + '</a>';
this.elements.buttonPreparer.innerHTML += '<div class="chip"' + chipColor +'" data-type="' + dataType + '" data-tokentext="' + tokenText + '">' + prettyText + '<i class="material-icons close">close</i></div>';
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 += '<a class="btn-small waves-effect waves-light" style="margin-left:3px" data-type="' + dataType + '" data-query="' + queryText + '">' + prettyText + '</a>';
this.elements.buttonPreparer.innerHTML += '<div class="chip"' + chipColor +'" data-type="' + dataType + '" data-query="' + queryText + '">' + prettyText + '<i class="material-icons close">close</i></div>';
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("<", "&#60;");
}
if (queryElement.includes(">")){
queryElement = queryElement.replace(">", "&#62;");
}
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
}