mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-14 16:55:42 +00:00
First rearrangement Query Builder
This commit is contained in:
Inga Kirschnick
parent
d0c6b2b9e5
commit
ae8e383085
@ -10,6 +10,7 @@ class CorpusAnalysisConcordance {
|
||||
// TODO: Prefix elements with "corpus-analysis-app-"
|
||||
container: document.querySelector('#concordance-extension-container'),
|
||||
error: document.querySelector('#concordance-extension-error'),
|
||||
UIForm: document.querySelector('#concordance-extension-ui-form'),
|
||||
form: document.querySelector('#concordance-extension-form'),
|
||||
progress: document.querySelector('#concordance-extension-progress'),
|
||||
subcorpusInfo: document.querySelector('#concordance-extension-subcorpus-info'),
|
||||
@ -20,12 +21,13 @@ class CorpusAnalysisConcordance {
|
||||
};
|
||||
|
||||
this.settings = {
|
||||
context: parseInt(this.elements.form['context'].value),
|
||||
perPage: parseInt(this.elements.form['per-page'].value),
|
||||
context: parseInt(this.elements.UIForm['context'].value),
|
||||
perPage: parseInt(this.elements.UIForm['per-page'].value),
|
||||
selectedSubcorpus: undefined,
|
||||
textStyle: parseInt(this.elements.form['text-style'].value),
|
||||
tokenRepresentation: this.elements.form['token-representation'].value
|
||||
textStyle: parseInt(this.elements.UIForm['text-style'].value),
|
||||
tokenRepresentation: this.elements.UIForm['token-representation'].value
|
||||
};
|
||||
console.log(this.settings);
|
||||
|
||||
this.app.registerExtension(this);
|
||||
}
|
||||
@ -76,21 +78,24 @@ class CorpusAnalysisConcordance {
|
||||
event.preventDefault();
|
||||
this.submitForm();
|
||||
});
|
||||
this.elements.form.addEventListener('change', (event) => {
|
||||
if (event.target === this.elements.form['context']) {
|
||||
this.settings.context = parseInt(this.elements.form['context'].value);
|
||||
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.form['per-page']) {
|
||||
this.settings.perPage = parseInt(this.elements.form['per-page'].value);
|
||||
if (event.target === this.elements.UIForm['per-page']) {
|
||||
this.settings.perPage = parseInt(this.elements.UIForm['per-page'].value);
|
||||
this.submitForm();
|
||||
}
|
||||
if (event.target === this.elements.form['text-style']) {
|
||||
this.settings.textStyle = parseInt(this.elements.form['text-style'].value);
|
||||
if (event.target === this.elements.UIForm['text-style']) {
|
||||
this.settings.textStyle = parseInt(this.elements.UIForm['text-style'].value);
|
||||
this.setTextStyle();
|
||||
}
|
||||
if (event.target === this.elements.form['token-representation']) {
|
||||
this.settings.tokenRepresentation = this.elements.form['token-representation'].value;
|
||||
if (event.target === this.elements.UIForm['token-representation']) {
|
||||
this.settings.tokenRepresentation = this.elements.UIForm['token-representation'].value;
|
||||
this.setTokenRepresentation();
|
||||
}
|
||||
});
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,90 @@
|
||||
class ElementReferencesQueryBuilder {
|
||||
constructor() {
|
||||
|
||||
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;
|
||||
|
||||
|
||||
//#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
|
||||
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
|
||||
|
||||
//#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.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
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,262 @@
|
||||
class GeneralFunctionsQueryBuilder {
|
||||
constructor(elements) {
|
||||
this.elements = elements;
|
||||
}
|
||||
|
||||
toggleClass(elements, className, action){
|
||||
elements.forEach(element => {
|
||||
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(
|
||||
`
|
||||
<span class="chip query-component" data-type="${dataType}" data-query="${queryText}" draggable="true">
|
||||
${prettyQueryText}
|
||||
<i class="material-icons close">close</i>
|
||||
</span>
|
||||
`
|
||||
);
|
||||
queryChipElement.addEventListener('click', () => {this.deleteAttr(queryChipElement);});
|
||||
queryChipElement.addEventListener('dragstart', (event) => {
|
||||
// selects all nodes without target class
|
||||
let queryChips = this.elements.yourQuery.querySelectorAll('.query-component');
|
||||
|
||||
// Adds a target chip in front of all draggable childnodes
|
||||
setTimeout(() => {
|
||||
let targetChipElement = Utils.HTMLToElement('<span class="chip drop-target">Drop here</span>');
|
||||
for (let element of queryChips) {
|
||||
if (element === queryChipElement.nextSibling) {continue;}
|
||||
let targetChipClone = targetChipElement.cloneNode(true);
|
||||
if (element === queryChipElement) {
|
||||
// If the dragged element is not at the very end, a target chip is also inserted at the end
|
||||
if (queryChips[queryChips.length - 1] !== element) {
|
||||
queryChips[queryChips.length - 1].insertAdjacentElement('afterend', targetChipClone);
|
||||
}
|
||||
} else {
|
||||
element.insertAdjacentElement('beforebegin', targetChipClone);
|
||||
}
|
||||
targetChipClone.addEventListener('dragover', (event) => {
|
||||
event.preventDefault();
|
||||
});
|
||||
targetChipClone.addEventListener('dragenter', (event) => {
|
||||
event.preventDefault();
|
||||
event.target.style.borderStyle = 'solid dotted';
|
||||
});
|
||||
targetChipClone.addEventListener('dragleave', (event) => {
|
||||
event.preventDefault();
|
||||
event.target.style.borderStyle = 'hidden';
|
||||
});
|
||||
targetChipClone.addEventListener('drop', (event) => {
|
||||
let dropzone = event.target;
|
||||
dropzone.parentElement.replaceChild(queryChipElement, dropzone);
|
||||
this.queryPreviewBuilder();
|
||||
});
|
||||
}
|
||||
}, 0);
|
||||
});
|
||||
|
||||
queryChipElement.addEventListener('dragend', (event) => {
|
||||
let targets = document.querySelectorAll('.drop-target');
|
||||
for (let target of targets) {
|
||||
target.remove();
|
||||
}
|
||||
});
|
||||
|
||||
// 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';
|
||||
|
||||
if (!isLastChildTextAnnotation) {
|
||||
this.elements.yourQuery.appendChild(queryChipElement);
|
||||
} else {
|
||||
this.elements.yourQuery.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.');
|
||||
}
|
||||
}
|
||||
|
||||
queryPreviewBuilder() {
|
||||
let queryPreview = document.querySelector('#query-preview');
|
||||
this.elements.yourQueryContent = [];
|
||||
for (let element of this.elements.yourQuery.childNodes) {
|
||||
let queryElement = element.dataset.query;
|
||||
if (queryElement !== undefined) {
|
||||
queryElement = Utils.escape(queryElement);
|
||||
this.elements.yourQueryContent.push(queryElement);
|
||||
}
|
||||
}
|
||||
|
||||
let queryString = this.elements.yourQueryContent.join(' ');
|
||||
queryString += ';';
|
||||
|
||||
queryPreview.innerHTML = queryString;
|
||||
}
|
||||
|
||||
|
||||
deleteAttr(attr) {
|
||||
this.elements.yourQuery.removeChild(attr);
|
||||
if (attr.dataset.type === "start-sentence") {
|
||||
this.elements.sentence.innerHTML = 'Sentence';
|
||||
} else if (attr.dataset.type === "start-entity" || attr.dataset.type === "start-empty-entity") {
|
||||
this.elements.entity.innerHTML = 'Entity';
|
||||
}
|
||||
this.elements.counter -= 1;
|
||||
if (this.elements.counter === 0) {
|
||||
this.elements.queryContainer.classList.add('hide');
|
||||
}
|
||||
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);
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,95 @@
|
||||
class StructuralAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBuilder {
|
||||
constructor(elements) {
|
||||
super(elements);
|
||||
this.elements = elements;
|
||||
}
|
||||
|
||||
addSentence() {
|
||||
this.hideEverything();
|
||||
if (this.elements.sentence.text === 'End Sentence') {
|
||||
this.queryChipFactory('end-sentence', 'Sentence End', '</s>');
|
||||
this.elements.sentence.innerHTML = 'Sentence';
|
||||
} else {
|
||||
this.queryChipFactory('start-sentence', 'Sentence Start', '<s>');
|
||||
this.elements.sentence.innerHTML = 'End Sentence';
|
||||
}
|
||||
}
|
||||
|
||||
addEntity() {
|
||||
if (this.elements.entity.text === 'End Entity') {
|
||||
let queryText;
|
||||
if (this.elements.entityAnyType === false) {
|
||||
queryText = '</ent_type>';
|
||||
} else {
|
||||
queryText = '</ent>';
|
||||
}
|
||||
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, '<ent_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, '<ent_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', '<ent>');
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,461 @@
|
||||
class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBuilder {
|
||||
constructor(elements) {
|
||||
super(elements);
|
||||
this.elements = elements;
|
||||
}
|
||||
|
||||
//#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;
|
||||
}
|
||||
}
|
||||
|
||||
tokenChipFactory(prettyQueryText, tokenText) {
|
||||
tokenText = encodeURI(tokenText);
|
||||
let builderElement;
|
||||
let queryChipElement;
|
||||
builderElement = document.createElement('div');
|
||||
builderElement.innerHTML = `
|
||||
<div class='chip col s2 l2' style='margin-top:20px;' data-tokentext='${tokenText}'>
|
||||
${prettyQueryText}
|
||||
<i class='material-icons close'>close</i>
|
||||
</div>`;
|
||||
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 tokenIsEmpty = false;
|
||||
|
||||
if (this.elements.ignoreCase.checked) {
|
||||
c = ' %c';
|
||||
} else {
|
||||
c = '';
|
||||
}
|
||||
|
||||
for (let element of this.elements.tokenQuery.childNodes) {
|
||||
tokenQueryContent += ' ' + element.firstChild.data + ' ';
|
||||
tokenQueryText += decodeURI(element.dataset.tokentext);
|
||||
if (element.innerText.indexOf('empty token') !== -1) {
|
||||
tokenIsEmpty = true;
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
// 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 = '';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
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
|
||||
|
||||
//#region Dropdown Select Handler
|
||||
|
||||
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');
|
||||
}
|
||||
|
||||
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 + '}';
|
||||
break;
|
||||
case 'lemma':
|
||||
this.elements.lemmaInput.value += ' {' + this.elements.nInput.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');
|
||||
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 + '}');
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
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) {
|
||||
// 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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
orHandler() {
|
||||
this.conditionHandler('or', ' | ');
|
||||
}
|
||||
|
||||
andHandler() {
|
||||
this.conditionHandler('and', ' & ');
|
||||
}
|
||||
|
||||
conditionHandler(conditionText, conditionQueryContent) {
|
||||
this.hideEverything();
|
||||
let tokenQueryContent;
|
||||
let tokenQueryText;
|
||||
let c;
|
||||
|
||||
if (this.elements.ignoreCase.checked) {
|
||||
c = ' %c';
|
||||
} else {
|
||||
c = '';
|
||||
}
|
||||
|
||||
switch (this.elements.positionalAttr.value) {
|
||||
case 'word':
|
||||
tokenQueryContent = `word=${this.elements.wordInput.value}${c}`;
|
||||
tokenQueryText = `word="${this.elements.wordInput.value}"${c}`;
|
||||
this.elements.wordInput.value = '';
|
||||
break;
|
||||
case 'lemma':
|
||||
tokenQueryContent = `lemma=${this.elements.lemmaInput.value}${c}`;
|
||||
tokenQueryText = `lemma="${this.elements.lemmaInput.value}"${c}`;
|
||||
this.elements.lemmaInput.value = '';
|
||||
break;
|
||||
case 'english-pos':
|
||||
tokenQueryContent = `pos=${this.elements.englishPos.value}`;
|
||||
tokenQueryText = `pos="${this.elements.englishPos.value}"`;
|
||||
this.elements.englishPos.value = '';
|
||||
break;
|
||||
case 'german-pos':
|
||||
tokenQueryContent = `pos=${this.elements.germanPos.value}`;
|
||||
tokenQueryText = `pos="${this.elements.germanPos.value}"`;
|
||||
this.elements.germanPos.value = '';
|
||||
break;
|
||||
case 'simple-pos-button':
|
||||
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();
|
||||
}
|
||||
|
||||
//#endregion Options to edit your token - Wildcard Charakter, Option Group, Incidence Modifiers, Ignore Case, 'and', 'or'
|
||||
}
|
||||
@ -31,6 +31,10 @@
|
||||
'js/CorpusAnalysis/CorpusAnalysisReader.js',
|
||||
'js/CorpusAnalysis/CorpusAnalysisStaticVisualization.js',
|
||||
'js/CorpusAnalysis/QueryBuilder.js',
|
||||
'js/CorpusAnalysis/QueryBuilder/ElementReferencesQueryBuilder.js',
|
||||
'js/CorpusAnalysis/QueryBuilder/GeneralFunctionsQueryBuilder.js',
|
||||
'js/CorpusAnalysis/QueryBuilder/StructuralAttributeBuilderFunctionsQueryBuilder.js',
|
||||
'js/CorpusAnalysis/QueryBuilder/TokenAttributeBuilderFunctionsQueryBuilder.js',
|
||||
'js/XMLtoObject.js'
|
||||
%}
|
||||
<script src="{{ ASSET_URL }}"></script>
|
||||
|
||||
403
app/templates/corpora/_analysis/_query_builderOLD.html.j2
Normal file
403
app/templates/corpora/_analysis/_query_builderOLD.html.j2
Normal file
@ -0,0 +1,403 @@
|
||||
|
||||
<div class="modal-content">
|
||||
<div>
|
||||
<nav>
|
||||
<div class="nav-wrapper" id="query-builder-nav">
|
||||
<a href="#!" class="brand-logo"><i class="material-icons">build</i>Query Builder (beta)</a>
|
||||
<i class="material-icons close right" id="close-query-builder">close</i>
|
||||
<a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal">
|
||||
<i class="material-icons right tooltipped" id="query-builder-tutorial-info-icon" data-position="bottom" data-tooltip="Click here if you are unsure how to use the Query Builder <br>and want to find out what other options it offers.">help</i>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<p></p>
|
||||
|
||||
<div id="query-container" class="hide">
|
||||
<div class="row">
|
||||
<h6 class="col s2">Your Query:
|
||||
<a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal">
|
||||
<i class="material-icons left" id="general-options-query-builder-tutorial-info-icon">help_outline</i></a>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s10" >
|
||||
<div class="input-field" id="your-query"></div>
|
||||
</div>
|
||||
<a class="btn-small waves-effect waves-teal col s1" id="insert-query-button">
|
||||
<i class="material-icons">send</i>
|
||||
</a>
|
||||
</div>
|
||||
<p><i> Preview:</i></p>
|
||||
<p id="query-preview"></p>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
<h6>Use the following options to build your query. If you need help, click on the question mark in the upper right corner!</h6>
|
||||
<p></p>
|
||||
<a class="btn-large waves-effect waves-light tooltipped" id="positional-attr-button" data-position="bottom" data-tooltip="Search for any token, for example a word, a lemma or a part-of-speech tag">Add new token to your query</a>
|
||||
<a class="btn-large waves-effect waves-light tooltipped" id="structural-attr-button" data-position="bottom" data-tooltip="Structure your query with structural attributes, for example sentences, entities or annotate the text">Add structural attributes to your query</a>
|
||||
|
||||
<div id="structural-attr" class="hide">
|
||||
<p></p>
|
||||
<h6>Which structural attribute do you want to add to your query?<a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal"><i class="material-icons left" id="add-structural-attribute-tutorial-info-icon">help_outline</i></a></h6>
|
||||
<p></p>
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<a class="btn-small waves-effect waves-light" id="sentence">sentence</a>
|
||||
<a class="btn-small waves-effect waves-light" id="entity">entity</a>
|
||||
<a class="btn-small waves-effect waves-light" id="text-annotation">Meta Data</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="entity-builder" class="hide">
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="row">
|
||||
<a class="btn waves-effect waves-light col s4" id="empty-entity">Add Entity of any type</a>
|
||||
<p class="col s1 l1"></p>
|
||||
<div class= "input-field col s3">
|
||||
<select name="englishenttype" id="english-ent-type">
|
||||
<option value="" disabled selected>English ent_type</option>
|
||||
<option value="CARDINAL">CARDINAL</option>
|
||||
<option value="DATE">DATE</option>
|
||||
<option value="EVENT">EVENT</option>
|
||||
<option value="FAC">FAC</option>
|
||||
<option value="GPE">GPE</option>
|
||||
<option value="LANGUAGE">LANGUAGE</option>
|
||||
<option value="LAW">LAW</option>
|
||||
<option value="LOC">LOC</option>
|
||||
<option value="MONEY">MONEY</option>
|
||||
<option value="NORP">NORP</option>
|
||||
<option value="ORDINAL">ORDINAL</option>
|
||||
<option value="ORG">ORG</option>
|
||||
<option value="PERCENT">PERCENT</option>
|
||||
<option value="PERSON">PERSON</option>
|
||||
<option value="PRODUCT">PRODUCT</option>
|
||||
<option value="QUANTITY">QUANTITY</option>
|
||||
<option value="TIME">TIME</option>
|
||||
<option value="WORK_OF_ART">WORK_OF_ART</option>
|
||||
</select>
|
||||
<label>Entity Type</label>
|
||||
</div>
|
||||
<div class= "input-field col s3">
|
||||
<select name="germanenttype" id="german-ent-type">
|
||||
<option value="" disabled selected>German ent_type</option>
|
||||
<option value="LOC">LOC</option>
|
||||
<option value="MISC">MISC</option>
|
||||
<option value="ORG">ORG</option>
|
||||
<option value="PER">PER</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="text-annotation-builder" class="hide">
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class= "input-field col s4 l3">
|
||||
<select name="text-annotation-options" id="text-annotation-options">
|
||||
<option class="btn-small waves-effect waves-light" value="address">address</option>
|
||||
<option class="btn-small waves-effect waves-light" value="author">author</option>
|
||||
<option class="btn-small waves-effect waves-light" value="booktitle">booktitle</option>
|
||||
<option class="btn-small waves-effect waves-light" value="chapter">chapter</option>
|
||||
<option class="btn-small waves-effect waves-light" value="editor">editor</option>
|
||||
<option class="btn-small waves-effect waves-light" value="institution">institution</option>
|
||||
<option class="btn-small waves-effect waves-light" value="journal">journal</option>
|
||||
<option class="btn-small waves-effect waves-light" value="pages">pages</option>
|
||||
<option class="btn-small waves-effect waves-light" value="publisher">publisher</option>
|
||||
<option class="btn-small waves-effect waves-light" value="publishing_year">publishing year</option>
|
||||
<option class="btn-small waves-effect waves-light" value="school">school</option>
|
||||
<option class="btn-small waves-effect waves-light" value="title">title</option>
|
||||
</select>
|
||||
<label>Meta data</label>
|
||||
</div>
|
||||
<div class= "input-field col s7 l5">
|
||||
<i class="material-icons prefix">mode_edit</i>
|
||||
<input placeholder="Type in your text annotation" type="text" id="text-annotation-input">
|
||||
</div>
|
||||
<div class="col s1 l1 center-align">
|
||||
<p class="btn-floating waves-effect waves-light" id="text-annotation-submit">
|
||||
<i class="material-icons right">send</i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="hide" id="no-value-metadata-message"><i>No value entered!</i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="positional-attr" class="hide">
|
||||
<p></p>
|
||||
<div class="row" id="token-kind-selector">
|
||||
<div class="col s5">
|
||||
<h6>Which kind of token are you looking for? <a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal"><i class="material-icons left" id="token-tutorial-info-icon">help_outline</i></a></h6>
|
||||
</div>
|
||||
<div class="input-field col s3">
|
||||
<select id="token-attr">
|
||||
<option value="word" selected>word</option>
|
||||
<option value="lemma">lemma</option>
|
||||
<option value="english-pos">english pos</option>
|
||||
<option value="german-pos">german pos</option>
|
||||
<option value="simple-pos-button">simple_pos</option>
|
||||
<option value="empty-token">empty token</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<p></p>
|
||||
<div id="token-builder-content">
|
||||
<div class="row" >
|
||||
<div id="token-query"></div>
|
||||
|
||||
<div id="word-builder">
|
||||
<div class= "input-field col s3 l4">
|
||||
<i class="material-icons prefix">mode_edit</i>
|
||||
<input placeholder="Type in your word" type="text" id="word-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="lemma-builder" class="hide" >
|
||||
<div class= "input-field col s3 l4">
|
||||
<i class="material-icons prefix">mode_edit</i>
|
||||
<input placeholder="Type in your lemma" type="text" id="lemma-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="english-pos-builder" class="hide">
|
||||
<div class="col s6 m4 l4">
|
||||
<div class="row">
|
||||
<div class= "input-field col s12">
|
||||
<select name="englishpos" id="english-pos">
|
||||
<option value="default" disabled selected>English pos tagset</option>
|
||||
<option value="ADD">email</option>
|
||||
<option value="AFX">affix</option>
|
||||
<option value="CC">conjunction, coordinating</option>
|
||||
<option value="CD">cardinal number</option>
|
||||
<option value="DT">determiner</option>
|
||||
<option value="EX">existential there</option>
|
||||
<option value="FW">foreign word</option>
|
||||
<option value="HYPH">punctuation mark, hyphen</option>
|
||||
<option value="IN">conjunction, subordinating or preposition</option>
|
||||
<option value="JJ">adjective</option>
|
||||
<option value="JJR">adjective, comparative</option>
|
||||
<option value="JJS">adjective, superlative</option>
|
||||
<option value="LS">list item marker</option>
|
||||
<option value="MD">verb, modal auxillary</option>
|
||||
<option value="NFP">superfluous punctuation</option>
|
||||
<option value="NN">noun, singular or mass</option>
|
||||
<option value="NNP">noun, proper singular</option>
|
||||
<option value="NNPS">noun, proper plural</option>
|
||||
<option value="NNS">noun, plural</option>
|
||||
<option value="PDT">predeterminer</option>
|
||||
<option value="POS">possessive ending</option>
|
||||
<option value="PRP">pronoun, personal</option>
|
||||
<option value="PRP$">pronoun, possessive</option>
|
||||
<option value="RBR">adverb, comparative</option>
|
||||
<option value="RBS">adverb, superlative</option>
|
||||
<option value="RP">adverb, particle</option>
|
||||
<option value="SYM">symbol</option>
|
||||
<option value="TO">infinitival to</option>
|
||||
<option value="UH">interjection</option>
|
||||
<option value="VB">verb, base form</option>
|
||||
<option value="VBD">verb, past tense</option>
|
||||
<option value="VBG">verb, gerund or present participle</option>
|
||||
<option value="VBN">verb, past participle</option>
|
||||
<option value="VBP">verb, non-3rd person singular present</option>
|
||||
<option value="VBZ">verb, 3rd person singular present</option>
|
||||
<option value="WDT">wh-determiner</option>
|
||||
<option value="WP">wh-pronoun, personal</option>
|
||||
<option value="WP$">wh-pronoun, possessive</option>
|
||||
<option value="WRB">wh-adverb</option>
|
||||
<option value="XX">unknown</option>
|
||||
<option value="``">opening quotation mark</option>
|
||||
<option value="$">symbol, currency</option>
|
||||
<option value='""'>closing quotation mark</option>
|
||||
<option value="-LRB-">left round bracket</option>
|
||||
<option value="-RRB-">right round bracket</option>
|
||||
<option value=".">punctuation mark, sentence closer</option>
|
||||
<option value=":">punctuation mark, colon or ellipsis</option>
|
||||
</select>
|
||||
<label>Part-of-speech tags</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="german-pos-builder" class="hide">
|
||||
<div class="col s6 m4 l4">
|
||||
<div class="row">
|
||||
<div class= "input-field col s12">
|
||||
<select name="germanpos" id="german-pos">
|
||||
<option value="default" disabled selected>German pos tagset</option>
|
||||
<option value="ADJA">adjective, attributive</option>
|
||||
<option value="ADJD">adjective, adverbial or predicative</option>
|
||||
<option value="ADV">adverb</option>
|
||||
<option value="APPO">postposition</option>
|
||||
<option value="APPR">preposition; circumposition left</option>
|
||||
<option value="APPRART">preposition with article</option>
|
||||
<option value="APZR">circumposition right</option>
|
||||
<option value="ART">definite or indefinite article</option>
|
||||
<option value="CARD">cardinal number</option>
|
||||
<option value="FM">foreign word</option>
|
||||
<option value="ITJ">interjection</option>
|
||||
<option value="KOKOM">comparative conjunction</option>
|
||||
<option value="KON">coordinating conjunction</option>
|
||||
<option value="KOUI">subordinating conjunction with "zu" and infinitive</option>
|
||||
<option value="KOUS">subordinating conjunction with sentence</option>
|
||||
<option value="NE">proper noun</option>
|
||||
<option value="NN">noun, singular or mass</option>
|
||||
<option value="NNE">proper noun</option>
|
||||
<option value="PDAT">attributive demonstrative pronoun</option>
|
||||
<option value="PDS">substituting demonstrative pronoun</option>
|
||||
<option value="PIAT">attributive indefinite pronoun without determiner</option>
|
||||
<option value="PIS">substituting indefinite pronoun</option>
|
||||
<option value="PPER">non-reflexive personal pronoun</option>
|
||||
<option value="PPOSAT">attributive possessive pronoun</option>
|
||||
<option value="PPOSS">substituting possessive pronoun</option>
|
||||
<option value="PRELAT">attributive relative pronoun</option>
|
||||
<option value="PRELS">substituting relative pronoun</option>
|
||||
<option value="PRF">reflexive personal pronoun</option>
|
||||
<option value="PROAV">pronominal adverb</option>
|
||||
<option value="PTKA">particle with adjective or adverb</option>
|
||||
<option value="PTKANT">answer particle</option>
|
||||
<option value="PTKNEG">negative particle</option>
|
||||
<option value="PTKVZ">separable verbal particle</option>
|
||||
<option value="PTKZU">"zu" before infinitive</option>
|
||||
<option value="PWAT">attributive interrogative pronoun</option>
|
||||
<option value="PWAV">adverbial interrogative or relative pronoun</option>
|
||||
<option value="PWS">substituting interrogative pronoun</option>
|
||||
<option value="TRUNC">word remnant</option>
|
||||
<option value="VAFIN">finite verb, auxiliary</option>
|
||||
<option value="VAIMP">imperative, auxiliary</option>
|
||||
<option value="VAINF">infinitive, auxiliary</option>
|
||||
<option value="VAPP">perfect participle, auxiliary</option>
|
||||
<option value="VMFIN">finite verb, modal</option>
|
||||
<option value="VMINF">infinitive, modal</option>
|
||||
<option value="VMPP">perfect participle, modal</option>
|
||||
<option value="VVFIN">finite verb, full</option>
|
||||
<option value="VVIMP">imperative, full</option>
|
||||
<option value="VVINF">infinitive, full</option>
|
||||
<option value="VVIZU">infinitive with "zu", full</option>
|
||||
<option value="VVPP">perfect participle, full</option>
|
||||
<option value="XY">non-word containing non-letter</option>
|
||||
<option value="$(">other sentence-internal punctuation mark</option>
|
||||
<option value="$,">comma</option>
|
||||
<option value="$.">sentence-final punctuation mark</option>
|
||||
</select>
|
||||
<label>Part-of-speech tags</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="simplepos-builder" class="hide">
|
||||
<div class="col s6 m4 l4">
|
||||
<div class="row">
|
||||
<div class= "input-field col s12">
|
||||
<select name="simplepos" id="simple-pos">
|
||||
<option value="default" disabled selected>simple_pos tagset</option>
|
||||
<option value="ADJ">adjective</option>
|
||||
<option value="ADP">adposition</option>
|
||||
<option value="ADV">adverb</option>
|
||||
<option value="AUX">auxiliary verb</option>
|
||||
<option value="CONJ">coordinating conjunction</option>
|
||||
<option value="DET">determiner</option>
|
||||
<option value="INTJ">interjection</option>
|
||||
<option value="NOUN">noun</option>
|
||||
<option value="NUM">numeral</option>
|
||||
<option value="PART">particle</option>
|
||||
<option value="PRON">pronoun</option>
|
||||
<option value="PROPN">proper noun</option>
|
||||
<option value="PUNCT">punctuation</option>
|
||||
<option value="SCONJ">subordinating conjunction</option>
|
||||
<option value="SYM">symbol</option>
|
||||
<option value="VERB">verb</option>
|
||||
<option value="X">other</option>
|
||||
</select>
|
||||
<label>Simple part-of-speech tags</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s1 l1 center-align">
|
||||
<p class="btn-floating waves-effect waves-light" id="token-submit">
|
||||
<i class="material-icons right">send</i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="hide" id="no-value-message"><i>No value entered!</i></div>
|
||||
</div>
|
||||
<div id="token-edit-options">
|
||||
<div class="row">
|
||||
<h6>Options to edit your token: <a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal"><i class="material-icons left" id="edit-options-tutorial-info-icon">help_outline</i></a></h6>
|
||||
</div>
|
||||
<p></p>
|
||||
<div class="row">
|
||||
<div id="input-options" class="col s5 m5 l5 xl4">
|
||||
<a id="wildcard-char" class="btn-small waves-effect waves-light tooltipped" data-position="top" data-tooltip="Look for a variable character (also called wildcard character)">Wildcard character</a>
|
||||
<a id="option-group" class="btn-small waves-effect waves-light tooltipped" data-position="top" data-tooltip="Find character sequences from a list of options">Option Group</a>
|
||||
</div>
|
||||
<div class="col s3 m3 l3 xl3" id="incidence-modifiers-button">
|
||||
<a class="dropdown-trigger btn-small waves-effect waves-light" href="#" data-target="incidence-modifiers" data-position="top" data-tooltip="Incidence Modifiers are special characters or patterns, <br>which determine how often a character represented previously should occur.">incidence modifiers</a>
|
||||
</div>
|
||||
|
||||
<ul id="incidence-modifiers" class="dropdown-content">
|
||||
<li><a id="one-or-more" data-token="+" class="tooltipped" data-position ="top" data-tooltip="...occurrences of the character/token before">one or more (+)</a></li>
|
||||
<li><a id="zero-or-more" data-token="*" class="tooltipped" data-position ="top" data-tooltip="...occurrences of the character/token before">zero or more (*)</a></li>
|
||||
<li><a id="zero-or-one" data-token="?" class="tooltipped" data-position ="top" data-tooltip="...occurrences of the character/token before">zero or one (?)</a></li>
|
||||
<li><a id="exactly-n" class="modal-trigger tooltipped" href="#exactlyN" data-token="{n}" class="" data-position ="top" data-tooltip="...occurrences of the character/token before">exactly n ({n})</a></li>
|
||||
<li><a id="between-n-m" class="modal-trigger tooltipped" href="#betweenNM" data-token="{n,m}" class="" data-position ="top" data-tooltip="...occurrences of the character/token before">between n and m ({n,m})</a></li>
|
||||
</ul>
|
||||
|
||||
<div id="ignore-case-checkbox" class="col s2 m2 l2 xl2">
|
||||
<p id="ignore-case">
|
||||
<label>
|
||||
<input type="checkbox" class="filled-in" />
|
||||
<span>Ignore Case</span>
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col s2 m2 l2 xl2" id="condition-container">
|
||||
<a class="btn-small tooltipped waves-effect waves-light" id="or" data-position="bottom" data-tooltip="You can add another condition to your token. <br>At least one must be fulfilled">or</a>
|
||||
<a class="btn-small tooltipped waves-effect waves-light" id="and" data-position="bottom" data-tooltip="You can add another condition to your token. <br>Both must be fulfilled">and</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="exactlyN" class="modal">
|
||||
<div class="row modal-content">
|
||||
<div class="input-field col s10">
|
||||
<i class="material-icons prefix">mode_edit</i>
|
||||
<input placeholder="type in a number for 'n'" type="text" id="n-input">
|
||||
</div>
|
||||
<div class="col s2">
|
||||
<p class="btn-floating waves-effect waves-light" id="n-submit">
|
||||
<i class="material-icons right">send</i>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="betweenNM" class="modal">
|
||||
<div class="row modal-content">
|
||||
<div class= "input-field col s5">
|
||||
<i class="material-icons prefix">mode_edit</i>
|
||||
<input placeholder="number for 'n'" type="text" id="n-m-input">
|
||||
</div>
|
||||
<div class= "input-field col s5">
|
||||
<i class="material-icons prefix">mode_edit</i>
|
||||
<input placeholder="number for 'm'" type="text" id="m-input">
|
||||
</div>
|
||||
<div class="col s2">
|
||||
<p class="btn-floating waves-effect waves-light" id="n-m-submit">
|
||||
<i class="material-icons right">send</i>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -1,3 +1,7 @@
|
||||
{% import 'corpora/_analysis/query_builder/_expert_mode.html.j2' as expert_mode with context %}
|
||||
{% import 'corpora/_analysis/query_builder/_query_builder.html.j2' as query_builder with context %}
|
||||
|
||||
|
||||
{% set name = 'Concordance' %}
|
||||
|
||||
{% set description %}
|
||||
@ -15,24 +19,80 @@ Query your corpus with the CQP query language utilizing a KWIC view.
|
||||
<div class="col s12">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<form id="{{ id_prefix }}-form">
|
||||
<div class="row">
|
||||
<div class="col s1">
|
||||
<span class="card-title">Query</span>
|
||||
</div>
|
||||
<div class="col s2">
|
||||
<div class="switch" style="margin-top:8px; margin-left:0px;">
|
||||
<label>
|
||||
<input type="checkbox" id="{{ id_prefix }}-expert-mode-switch">
|
||||
<span class="lever"></span>
|
||||
expert mode
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="{{ id_prefix }}-expert-mode-display" class="hide">
|
||||
{{ expert_mode.card_content(id_prefix) }}
|
||||
</div>
|
||||
<div id="{{ id_prefix }}-query-builder-display">
|
||||
{# {{ query_builder.card_content(id_prefix) }} #}
|
||||
<div class="row">
|
||||
<form id="{{ id_prefix }}-form">
|
||||
<div class="input-field col s12 m9">
|
||||
<i class="material-icons prefix">search</i>
|
||||
{# <input class="validate corpus-analysis-action" id="{{ id_prefix }}-form-query" name="query" type="text" required pattern=".*\S+.*" placeholder="Type in your query and or use the Query Builder functions below"></input> #}
|
||||
<div class="chips input-field" style="margin-top:0px;"></div>
|
||||
{# <label for="{{ id_prefix }}-form-query">Query</label> #}
|
||||
<span class="error-color-text helper-text hide" id="{{ id_prefix }}-error"></span>
|
||||
<a class="modal-trigger" data-manual-modal-chapter="manual-modal-cqp-query-language" href="#manual-modal" style="margin-left: 40px;"><i class="material-icons" style="font-size: inherit;">help</i> Corpus Query Language tutorial</a>
|
||||
<span> | </span>
|
||||
<a class="modal-trigger" data-manual-modal-chapter="manual-modal-tagsets" href="#manual-modal"><i class="material-icons" style="font-size: inherit;">info</i> Tagsets</a>
|
||||
</div>
|
||||
<div class="input-field col s12 m3">
|
||||
<i class="material-icons prefix">arrow_forward</i>
|
||||
<input class="validate corpus-analysis-action" id="{{ id_prefix }}-form-subcorpus-name" name="subcorpus-name" type="text" required pattern="^[A-Z][a-z0-9\-]*" value="Last"></input>
|
||||
<label for="{{ id_prefix }}-form-subcorpus-name">Subcorpus name</label>
|
||||
</div>
|
||||
<div class="col s12 hide" style="margin-left: 44px;">
|
||||
<p><i> Preview:</i></p>
|
||||
<p id="query-preview"></p>
|
||||
<br>
|
||||
</div>
|
||||
<div class="col s12" style="margin-left: 44px;">
|
||||
<h6>Use the following options to build your query.</h6>
|
||||
<p></p>
|
||||
<a class="btn waves-effect waves-light tooltipped modal-trigger" href="#positional-attr-modal" data-position="bottom" data-tooltip="Search for any token, for example a word, a lemma or a part-of-speech tag">Add new token to your query</a>
|
||||
<a class="btn waves-effect waves-light tooltipped modal-trigger" href="#structural-attr-modal" data-position="bottom" data-tooltip="Structure your query with structural attributes, for example sentences, entities or annotate the text">Add structural attributes to your query</a>
|
||||
</div>
|
||||
<div class="col s12 right-align">
|
||||
<p class="hide-on-small-only"> </p>
|
||||
<button class="btn waves-effect waves-light corpus-analysis-action" id="{{ id_prefix }}-form-submit" type="submit" name="submit">
|
||||
Send
|
||||
<i class="material-icons right">send</i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12">
|
||||
<div id="{{ id_prefix }}-subcorpus-list"></div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Results</span>
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="progress hide" id="{{ id_prefix }}-progress">
|
||||
<div class="indeterminate"></div>
|
||||
</div>
|
||||
<form id="{{ id_prefix }}-ui-form">
|
||||
<div class="row">
|
||||
<div class="input-field col s12 m9">
|
||||
<i class="material-icons prefix">search</i>
|
||||
<input class="validate corpus-analysis-action" id="{{ id_prefix }}-form-query" name="query" type="text" required pattern=".*\S+.*" placeholder="Type in your query or use the Query Builder on the right"</input>
|
||||
<label for="{{ id_prefix }}-form-query">Query</label>
|
||||
<span class="error-color-text helper-text hide" id="{{ id_prefix }}-error"></span>
|
||||
<a class="modal-trigger" data-manual-modal-chapter="manual-modal-cqp-query-language" href="#manual-modal" style="margin-left: 40px;"><i class="material-icons" style="font-size: inherit;">help</i> Corpus Query Language tutorial</a>
|
||||
<span> | </span>
|
||||
<a class="modal-trigger" data-manual-modal-chapter="manual-modal-tagsets" href="#manual-modal"><i class="material-icons" style="font-size: inherit;">info</i> Tagsets</a>
|
||||
<span> | </span>
|
||||
<a class="modal-trigger" href="#{{ id_prefix }}-example-modal"><i class="material-icons" style="font-size: inherit;">info</i> Examples</a>
|
||||
</div>
|
||||
<div class="input-field col s12 m3">
|
||||
<i class="material-icons prefix">arrow_forward</i>
|
||||
<input class="validate corpus-analysis-action" id="{{ id_prefix }}-form-subcorpus-name" name="subcorpus-name" type="text" required pattern="^[A-Z][a-z0-9\-]*" value="Last"></input>
|
||||
<label for="{{ id_prefix }}-form-subcorpus-name">Subcorpus name</label>
|
||||
</div>
|
||||
<div class="col s12 m9 l9">
|
||||
<div class="row">
|
||||
<div class="input-field col s4 l3">
|
||||
@ -77,31 +137,8 @@ Query your corpus with the CQP query language utilizing a KWIC view.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s12 m3 l3 right-align">
|
||||
<p class="hide-on-small-only"> </p>
|
||||
<a class="btn waves-effect waves-light modal-trigger" href="#concordance-query-builder" id="concordance-query-builder-button">
|
||||
<i class="material-icons left">build</i>
|
||||
Query builder (beta)
|
||||
</a>
|
||||
<button class="btn waves-effect waves-light corpus-analysis-action" id="{{ id_prefix }}-form-submit" type="submit" name="submit">
|
||||
Send
|
||||
<i class="material-icons right">send</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12">
|
||||
<div id="{{ id_prefix }}-subcorpus-list"></div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="progress hide" id="{{ id_prefix }}-progress">
|
||||
<div class="indeterminate"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s9"><p class="hide" id="{{ id_prefix }}-subcorpus-info"></p></div>
|
||||
<div class="col s3 right-align" id="{{ id_prefix }}-subcorpus-actions"></div>
|
||||
@ -127,442 +164,38 @@ Query your corpus with the CQP query language utilizing a KWIC view.
|
||||
{% endset %}
|
||||
|
||||
{% set modals %}
|
||||
<div class="modal" id="{{ id_prefix }}-example-modal">
|
||||
<div id="structural-attr-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<h6>Which structural attribute do you want to add to your query?<a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal"><i class="material-icons left" id="add-structural-attribute-tutorial-info-icon">help_outline</i></a></h6>
|
||||
<p></p>
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<h4>Examples</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
||||
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
|
||||
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
|
||||
takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
</div>
|
||||
<div class="col s8">
|
||||
<table>
|
||||
<tr>
|
||||
<th>You are looking for...</th>
|
||||
<th>Type in:</th>
|
||||
<th>Result:</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>The word "begin" </td>
|
||||
<td>[word="begin"];</td>
|
||||
<td><a class="tooltipped" data-position="bottom" data-tooltip="List all examples of the word within a corpus that you searched for.">Concordance</a> of the word begin</td>
|
||||
</tr>
|
||||
</table>
|
||||
<a class="btn-small waves-effect waves-light" id="sentence">sentence</a>
|
||||
<a class="btn-small waves-effect waves-light" id="entity">entity</a>
|
||||
<a class="btn-small waves-effect waves-light" id="text-annotation">Meta Data</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" id="concordance-query-builder">
|
||||
<div class="modal-content">
|
||||
<div>
|
||||
<nav>
|
||||
<div class="nav-wrapper" id="query-builder-nav">
|
||||
<a href="#!" class="brand-logo"><i class="material-icons">build</i>Query Builder (beta)</a>
|
||||
<i class="material-icons close right" id="close-query-builder">close</i>
|
||||
<a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal">
|
||||
<i class="material-icons right tooltipped" id="query-builder-tutorial-info-icon" data-position="bottom" data-tooltip="Click here if you are unsure how to use the Query Builder <br>and want to find out what other options it offers.">help</i>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<p></p>
|
||||
|
||||
<div id="query-container" class="hide">
|
||||
|
||||
<div class="row">
|
||||
<h6 class="col s2">Your Query:
|
||||
<a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal">
|
||||
<i class="material-icons left" id="general-options-query-builder-tutorial-info-icon">help_outline</i></a>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s10" id="your-query"></div>
|
||||
<a class="btn-small waves-effect waves-teal col s1" id="insert-query-button">
|
||||
<i class="material-icons">send</i>
|
||||
</a>
|
||||
</div>
|
||||
<p><i> Preview:</i></p>
|
||||
<p id="query-preview"></p>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
<h6>Use the following options to build your query. If you need help, click on the question mark in the upper right corner!</h6>
|
||||
<p></p>
|
||||
<a class="btn-large waves-effect waves-light tooltipped" id="positional-attr-button" data-position="bottom" data-tooltip="Search for any token, for example a word, a lemma or a part-of-speech tag">Add new token to your query</a>
|
||||
<a class="btn-large waves-effect waves-light tooltipped" id="structural-attr-button" data-position="bottom" data-tooltip="Structure your query with structural attributes, for example sentences, entities or annotate the text">Add structural attributes to your query</a>
|
||||
|
||||
<div id="structural-attr" class="hide">
|
||||
<p></p>
|
||||
<h6>Which structural attribute do you want to add to your query?<a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal"><i class="material-icons left" id="add-structural-attribute-tutorial-info-icon">help_outline</i></a></h6>
|
||||
<p></p>
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<a class="btn-small waves-effect waves-light" id="sentence">sentence</a>
|
||||
<a class="btn-small waves-effect waves-light" id="entity">entity</a>
|
||||
<a class="btn-small waves-effect waves-light" id="text-annotation">Meta Data</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="entity-builder" class="hide">
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="row">
|
||||
<a class="btn waves-effect waves-light col s4" id="empty-entity">Add Entity of any type</a>
|
||||
<p class="col s1 l1"></p>
|
||||
<div class= "input-field col s3">
|
||||
<select name="englishenttype" id="english-ent-type">
|
||||
<option value="" disabled selected>English ent_type</option>
|
||||
<option value="CARDINAL">CARDINAL</option>
|
||||
<option value="DATE">DATE</option>
|
||||
<option value="EVENT">EVENT</option>
|
||||
<option value="FAC">FAC</option>
|
||||
<option value="GPE">GPE</option>
|
||||
<option value="LANGUAGE">LANGUAGE</option>
|
||||
<option value="LAW">LAW</option>
|
||||
<option value="LOC">LOC</option>
|
||||
<option value="MONEY">MONEY</option>
|
||||
<option value="NORP">NORP</option>
|
||||
<option value="ORDINAL">ORDINAL</option>
|
||||
<option value="ORG">ORG</option>
|
||||
<option value="PERCENT">PERCENT</option>
|
||||
<option value="PERSON">PERSON</option>
|
||||
<option value="PRODUCT">PRODUCT</option>
|
||||
<option value="QUANTITY">QUANTITY</option>
|
||||
<option value="TIME">TIME</option>
|
||||
<option value="WORK_OF_ART">WORK_OF_ART</option>
|
||||
</select>
|
||||
<label>Entity Type</label>
|
||||
</div>
|
||||
<div class= "input-field col s3">
|
||||
<select name="germanenttype" id="german-ent-type">
|
||||
<option value="" disabled selected>German ent_type</option>
|
||||
<option value="LOC">LOC</option>
|
||||
<option value="MISC">MISC</option>
|
||||
<option value="ORG">ORG</option>
|
||||
<option value="PER">PER</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="text-annotation-builder" class="hide">
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class= "input-field col s4 l3">
|
||||
<select name="text-annotation-options" id="text-annotation-options">
|
||||
<option class="btn-small waves-effect waves-light" value="address">address</option>
|
||||
<option class="btn-small waves-effect waves-light" value="author">author</option>
|
||||
<option class="btn-small waves-effect waves-light" value="booktitle">booktitle</option>
|
||||
<option class="btn-small waves-effect waves-light" value="chapter">chapter</option>
|
||||
<option class="btn-small waves-effect waves-light" value="editor">editor</option>
|
||||
<option class="btn-small waves-effect waves-light" value="institution">institution</option>
|
||||
<option class="btn-small waves-effect waves-light" value="journal">journal</option>
|
||||
<option class="btn-small waves-effect waves-light" value="pages">pages</option>
|
||||
<option class="btn-small waves-effect waves-light" value="publisher">publisher</option>
|
||||
<option class="btn-small waves-effect waves-light" value="publishing_year">publishing year</option>
|
||||
<option class="btn-small waves-effect waves-light" value="school">school</option>
|
||||
<option class="btn-small waves-effect waves-light" value="title">title</option>
|
||||
</select>
|
||||
<label>Meta data</label>
|
||||
</div>
|
||||
<div class= "input-field col s7 l5">
|
||||
<i class="material-icons prefix">mode_edit</i>
|
||||
<input placeholder="Type in your text annotation" type="text" id="text-annotation-input">
|
||||
</div>
|
||||
<div class="col s1 l1 center-align">
|
||||
<p class="btn-floating waves-effect waves-light" id="text-annotation-submit">
|
||||
<i class="material-icons right">send</i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="hide" id="no-value-metadata-message"><i>No value entered!</i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="positional-attr" class="hide">
|
||||
<p></p>
|
||||
<div class="row" id="token-kind-selector">
|
||||
<div class="col s5">
|
||||
<h6>Which kind of token are you looking for? <a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal"><i class="material-icons left" id="token-tutorial-info-icon">help_outline</i></a></h6>
|
||||
</div>
|
||||
<div class="input-field col s3">
|
||||
<select id="token-attr">
|
||||
<option value="word" selected>word</option>
|
||||
<option value="lemma">lemma</option>
|
||||
<option value="english-pos">english pos</option>
|
||||
<option value="german-pos">german pos</option>
|
||||
<option value="simple-pos-button">simple_pos</option>
|
||||
<option value="empty-token">empty token</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<p></p>
|
||||
<div id="token-builder-content">
|
||||
<div class="row" >
|
||||
<div id="token-query"></div>
|
||||
|
||||
<div id="word-builder">
|
||||
<div class= "input-field col s3 l4">
|
||||
<i class="material-icons prefix">mode_edit</i>
|
||||
<input placeholder="Type in your word" type="text" id="word-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="lemma-builder" class="hide" >
|
||||
<div class= "input-field col s3 l4">
|
||||
<i class="material-icons prefix">mode_edit</i>
|
||||
<input placeholder="Type in your lemma" type="text" id="lemma-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="english-pos-builder" class="hide">
|
||||
<div class="col s6 m4 l4">
|
||||
<div class="row">
|
||||
<div class= "input-field col s12">
|
||||
<select name="englishpos" id="english-pos">
|
||||
<option value="default" disabled selected>English pos tagset</option>
|
||||
<option value="ADD">email</option>
|
||||
<option value="AFX">affix</option>
|
||||
<option value="CC">conjunction, coordinating</option>
|
||||
<option value="CD">cardinal number</option>
|
||||
<option value="DT">determiner</option>
|
||||
<option value="EX">existential there</option>
|
||||
<option value="FW">foreign word</option>
|
||||
<option value="HYPH">punctuation mark, hyphen</option>
|
||||
<option value="IN">conjunction, subordinating or preposition</option>
|
||||
<option value="JJ">adjective</option>
|
||||
<option value="JJR">adjective, comparative</option>
|
||||
<option value="JJS">adjective, superlative</option>
|
||||
<option value="LS">list item marker</option>
|
||||
<option value="MD">verb, modal auxillary</option>
|
||||
<option value="NFP">superfluous punctuation</option>
|
||||
<option value="NN">noun, singular or mass</option>
|
||||
<option value="NNP">noun, proper singular</option>
|
||||
<option value="NNPS">noun, proper plural</option>
|
||||
<option value="NNS">noun, plural</option>
|
||||
<option value="PDT">predeterminer</option>
|
||||
<option value="POS">possessive ending</option>
|
||||
<option value="PRP">pronoun, personal</option>
|
||||
<option value="PRP$">pronoun, possessive</option>
|
||||
<option value="RBR">adverb, comparative</option>
|
||||
<option value="RBS">adverb, superlative</option>
|
||||
<option value="RP">adverb, particle</option>
|
||||
<option value="SYM">symbol</option>
|
||||
<option value="TO">infinitival to</option>
|
||||
<option value="UH">interjection</option>
|
||||
<option value="VB">verb, base form</option>
|
||||
<option value="VBD">verb, past tense</option>
|
||||
<option value="VBG">verb, gerund or present participle</option>
|
||||
<option value="VBN">verb, past participle</option>
|
||||
<option value="VBP">verb, non-3rd person singular present</option>
|
||||
<option value="VBZ">verb, 3rd person singular present</option>
|
||||
<option value="WDT">wh-determiner</option>
|
||||
<option value="WP">wh-pronoun, personal</option>
|
||||
<option value="WP$">wh-pronoun, possessive</option>
|
||||
<option value="WRB">wh-adverb</option>
|
||||
<option value="XX">unknown</option>
|
||||
<option value="``">opening quotation mark</option>
|
||||
<option value="$">symbol, currency</option>
|
||||
<option value='""'>closing quotation mark</option>
|
||||
<option value="-LRB-">left round bracket</option>
|
||||
<option value="-RRB-">right round bracket</option>
|
||||
<option value=".">punctuation mark, sentence closer</option>
|
||||
<option value=":">punctuation mark, colon or ellipsis</option>
|
||||
</select>
|
||||
<label>Part-of-speech tags</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="german-pos-builder" class="hide">
|
||||
<div class="col s6 m4 l4">
|
||||
<div class="row">
|
||||
<div class= "input-field col s12">
|
||||
<select name="germanpos" id="german-pos">
|
||||
<option value="default" disabled selected>German pos tagset</option>
|
||||
<option value="ADJA">adjective, attributive</option>
|
||||
<option value="ADJD">adjective, adverbial or predicative</option>
|
||||
<option value="ADV">adverb</option>
|
||||
<option value="APPO">postposition</option>
|
||||
<option value="APPR">preposition; circumposition left</option>
|
||||
<option value="APPRART">preposition with article</option>
|
||||
<option value="APZR">circumposition right</option>
|
||||
<option value="ART">definite or indefinite article</option>
|
||||
<option value="CARD">cardinal number</option>
|
||||
<option value="FM">foreign word</option>
|
||||
<option value="ITJ">interjection</option>
|
||||
<option value="KOKOM">comparative conjunction</option>
|
||||
<option value="KON">coordinating conjunction</option>
|
||||
<option value="KOUI">subordinating conjunction with "zu" and infinitive</option>
|
||||
<option value="KOUS">subordinating conjunction with sentence</option>
|
||||
<option value="NE">proper noun</option>
|
||||
<option value="NN">noun, singular or mass</option>
|
||||
<option value="NNE">proper noun</option>
|
||||
<option value="PDAT">attributive demonstrative pronoun</option>
|
||||
<option value="PDS">substituting demonstrative pronoun</option>
|
||||
<option value="PIAT">attributive indefinite pronoun without determiner</option>
|
||||
<option value="PIS">substituting indefinite pronoun</option>
|
||||
<option value="PPER">non-reflexive personal pronoun</option>
|
||||
<option value="PPOSAT">attributive possessive pronoun</option>
|
||||
<option value="PPOSS">substituting possessive pronoun</option>
|
||||
<option value="PRELAT">attributive relative pronoun</option>
|
||||
<option value="PRELS">substituting relative pronoun</option>
|
||||
<option value="PRF">reflexive personal pronoun</option>
|
||||
<option value="PROAV">pronominal adverb</option>
|
||||
<option value="PTKA">particle with adjective or adverb</option>
|
||||
<option value="PTKANT">answer particle</option>
|
||||
<option value="PTKNEG">negative particle</option>
|
||||
<option value="PTKVZ">separable verbal particle</option>
|
||||
<option value="PTKZU">"zu" before infinitive</option>
|
||||
<option value="PWAT">attributive interrogative pronoun</option>
|
||||
<option value="PWAV">adverbial interrogative or relative pronoun</option>
|
||||
<option value="PWS">substituting interrogative pronoun</option>
|
||||
<option value="TRUNC">word remnant</option>
|
||||
<option value="VAFIN">finite verb, auxiliary</option>
|
||||
<option value="VAIMP">imperative, auxiliary</option>
|
||||
<option value="VAINF">infinitive, auxiliary</option>
|
||||
<option value="VAPP">perfect participle, auxiliary</option>
|
||||
<option value="VMFIN">finite verb, modal</option>
|
||||
<option value="VMINF">infinitive, modal</option>
|
||||
<option value="VMPP">perfect participle, modal</option>
|
||||
<option value="VVFIN">finite verb, full</option>
|
||||
<option value="VVIMP">imperative, full</option>
|
||||
<option value="VVINF">infinitive, full</option>
|
||||
<option value="VVIZU">infinitive with "zu", full</option>
|
||||
<option value="VVPP">perfect participle, full</option>
|
||||
<option value="XY">non-word containing non-letter</option>
|
||||
<option value="$(">other sentence-internal punctuation mark</option>
|
||||
<option value="$,">comma</option>
|
||||
<option value="$.">sentence-final punctuation mark</option>
|
||||
</select>
|
||||
<label>Part-of-speech tags</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="simplepos-builder" class="hide">
|
||||
<div class="col s6 m4 l4">
|
||||
<div class="row">
|
||||
<div class= "input-field col s12">
|
||||
<select name="simplepos" id="simple-pos">
|
||||
<option value="default" disabled selected>simple_pos tagset</option>
|
||||
<option value="ADJ">adjective</option>
|
||||
<option value="ADP">adposition</option>
|
||||
<option value="ADV">adverb</option>
|
||||
<option value="AUX">auxiliary verb</option>
|
||||
<option value="CONJ">coordinating conjunction</option>
|
||||
<option value="DET">determiner</option>
|
||||
<option value="INTJ">interjection</option>
|
||||
<option value="NOUN">noun</option>
|
||||
<option value="NUM">numeral</option>
|
||||
<option value="PART">particle</option>
|
||||
<option value="PRON">pronoun</option>
|
||||
<option value="PROPN">proper noun</option>
|
||||
<option value="PUNCT">punctuation</option>
|
||||
<option value="SCONJ">subordinating conjunction</option>
|
||||
<option value="SYM">symbol</option>
|
||||
<option value="VERB">verb</option>
|
||||
<option value="X">other</option>
|
||||
</select>
|
||||
<label>Simple part-of-speech tags</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s1 l1 center-align">
|
||||
<p class="btn-floating waves-effect waves-light" id="token-submit">
|
||||
<i class="material-icons right">send</i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="hide" id="no-value-message"><i>No value entered!</i></div>
|
||||
</div>
|
||||
<div id="token-edit-options">
|
||||
<div class="row">
|
||||
<h6>Options to edit your token: <a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal"><i class="material-icons left" id="edit-options-tutorial-info-icon">help_outline</i></a></h6>
|
||||
</div>
|
||||
<p></p>
|
||||
<div class="row">
|
||||
<div id="input-options" class="col s5 m5 l5 xl4">
|
||||
<a id="wildcard-char" class="btn-small waves-effect waves-light tooltipped" data-position="top" data-tooltip="Look for a variable character (also called wildcard character)">Wildcard character</a>
|
||||
<a id="option-group" class="btn-small waves-effect waves-light tooltipped" data-position="top" data-tooltip="Find character sequences from a list of options">Option Group</a>
|
||||
</div>
|
||||
<div class="col s3 m3 l3 xl3" id="incidence-modifiers-button">
|
||||
<a class="dropdown-trigger btn-small waves-effect waves-light" href="#" data-target="incidence-modifiers" data-position="top" data-tooltip="Incidence Modifiers are special characters or patterns, <br>which determine how often a character represented previously should occur.">incidence modifiers</a>
|
||||
</div>
|
||||
|
||||
<ul id="incidence-modifiers" class="dropdown-content">
|
||||
<li><a id="one-or-more" data-token="+" class="tooltipped" data-position ="top" data-tooltip="...occurrences of the character/token before">one or more (+)</a></li>
|
||||
<li><a id="zero-or-more" data-token="*" class="tooltipped" data-position ="top" data-tooltip="...occurrences of the character/token before">zero or more (*)</a></li>
|
||||
<li><a id="zero-or-one" data-token="?" class="tooltipped" data-position ="top" data-tooltip="...occurrences of the character/token before">zero or one (?)</a></li>
|
||||
<li><a id="exactly-n" class="modal-trigger tooltipped" href="#exactlyN" data-token="{n}" class="" data-position ="top" data-tooltip="...occurrences of the character/token before">exactly n ({n})</a></li>
|
||||
<li><a id="between-n-m" class="modal-trigger tooltipped" href="#betweenNM" data-token="{n,m}" class="" data-position ="top" data-tooltip="...occurrences of the character/token before">between n and m ({n,m})</a></li>
|
||||
</ul>
|
||||
|
||||
<div id="ignore-case-checkbox" class="col s2 m2 l2 xl2">
|
||||
<p id="ignore-case">
|
||||
<label>
|
||||
<input type="checkbox" class="filled-in" />
|
||||
<span>Ignore Case</span>
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col s2 m2 l2 xl2" id="condition-container">
|
||||
<a class="btn-small tooltipped waves-effect waves-light" id="or" data-position="bottom" data-tooltip="You can add another condition to your token. <br>At least one must be fulfilled">or</a>
|
||||
<a class="btn-small tooltipped waves-effect waves-light" id="and" data-position="bottom" data-tooltip="You can add another condition to your token. <br>Both must be fulfilled">and</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="exactlyN" class="modal">
|
||||
<div class="row modal-content">
|
||||
<div class="input-field col s10">
|
||||
<i class="material-icons prefix">mode_edit</i>
|
||||
<input placeholder="type in a number for 'n'" type="text" id="n-input">
|
||||
</div>
|
||||
<div class="col s2">
|
||||
<p class="btn-floating waves-effect waves-light" id="n-submit">
|
||||
<i class="material-icons right">send</i>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="betweenNM" class="modal">
|
||||
<div class="row modal-content">
|
||||
<div class= "input-field col s5">
|
||||
<i class="material-icons prefix">mode_edit</i>
|
||||
<input placeholder="number for 'n'" type="text" id="n-m-input">
|
||||
</div>
|
||||
<div class= "input-field col s5">
|
||||
<i class="material-icons prefix">mode_edit</i>
|
||||
<input placeholder="number for 'm'" type="text" id="m-input">
|
||||
</div>
|
||||
<div class="col s2">
|
||||
<p class="btn-floating waves-effect waves-light" id="n-m-submit">
|
||||
<i class="material-icons right">send</i>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endset %}
|
||||
|
||||
{% set scripts %}
|
||||
<script>
|
||||
const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp);
|
||||
const concordanceQueryBuilder = new ConcordanceQueryBuilder();
|
||||
{# const concordanceQueryBuilder = new ConcordanceQueryBuilder(); #}
|
||||
|
||||
let queryBuilderDisplay = document.getElementById("{{ id_prefix }}-query-builder-display");
|
||||
let expertModeDisplay = document.getElementById("{{ id_prefix }}-expert-mode-display");
|
||||
let expertModeSwitch = document.getElementById("{{ id_prefix }}-expert-mode-switch");
|
||||
|
||||
expertModeSwitch.addEventListener("change", function() {
|
||||
if (this.checked) {
|
||||
queryBuilderDisplay.classList.add("hide");
|
||||
expertModeDisplay.classList.remove("hide");
|
||||
} else {
|
||||
queryBuilderDisplay.classList.remove("hide");
|
||||
expertModeDisplay.classList.add("hide");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endset %}
|
||||
|
||||
@ -0,0 +1,26 @@
|
||||
{% macro card_content(id_prefix) %}
|
||||
<div class="row">
|
||||
<form id="{{ id_prefix }}-form">
|
||||
<div class="input-field col s12 m9">
|
||||
<i class="material-icons prefix">search</i>
|
||||
<input class="validate corpus-analysis-action" id="{{ id_prefix }}-form-query" name="query" type="text" required pattern=".*\S+.*" placeholder="Type in your query or use the Query Builder on the right"></input>
|
||||
<span class="error-color-text helper-text hide" id="{{ id_prefix }}-error"></span>
|
||||
<a class="modal-trigger" data-manual-modal-chapter="manual-modal-cqp-query-language" href="#manual-modal" style="margin-left: 40px;"><i class="material-icons" style="font-size: inherit;">help</i> Corpus Query Language tutorial</a>
|
||||
<span> | </span>
|
||||
<a class="modal-trigger" data-manual-modal-chapter="manual-modal-tagsets" href="#manual-modal"><i class="material-icons" style="font-size: inherit;">info</i> Tagsets</a>
|
||||
</div>
|
||||
<div class="input-field col s12 m3">
|
||||
<i class="material-icons prefix">arrow_forward</i>
|
||||
<input class="validate corpus-analysis-action" id="{{ id_prefix }}-form-subcorpus-name" name="subcorpus-name" type="text" required pattern="^[A-Z][a-z0-9\-]*" value="Last"></input>
|
||||
<label for="{{ id_prefix }}-form-subcorpus-name">Subcorpus name</label>
|
||||
</div>
|
||||
<div class="col s12 m3 l3 right-align">
|
||||
<p class="hide-on-small-only"> </p>
|
||||
<button class="btn waves-effect waves-light corpus-analysis-action" id="{{ id_prefix }}-form-submit" type="submit" name="submit">
|
||||
Send
|
||||
<i class="material-icons right">send</i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
@ -0,0 +1,39 @@
|
||||
{% macro card_content(id_prefix) %}
|
||||
<div class="row">
|
||||
<form id="{{ id_prefix }}-form">
|
||||
<div class="input-field col s12 m9">
|
||||
<i class="material-icons prefix">search</i>
|
||||
{# <input class="validate corpus-analysis-action" id="{{ id_prefix }}-form-query" name="query" type="text" required pattern=".*\S+.*" placeholder="Type in your query and or use the Query Builder functions below"></input> #}
|
||||
<div class="chips input-field" style="margin-top:0px;"></div>
|
||||
{# <label for="{{ id_prefix }}-form-query">Query</label> #}
|
||||
<span class="error-color-text helper-text hide" id="{{ id_prefix }}-error"></span>
|
||||
<a class="modal-trigger" data-manual-modal-chapter="manual-modal-cqp-query-language" href="#manual-modal" style="margin-left: 40px;"><i class="material-icons" style="font-size: inherit;">help</i> Corpus Query Language tutorial</a>
|
||||
<span> | </span>
|
||||
<a class="modal-trigger" data-manual-modal-chapter="manual-modal-tagsets" href="#manual-modal"><i class="material-icons" style="font-size: inherit;">info</i> Tagsets</a>
|
||||
</div>
|
||||
<div class="input-field col s12 m3">
|
||||
<i class="material-icons prefix">arrow_forward</i>
|
||||
<input class="validate corpus-analysis-action" id="{{ id_prefix }}-form-subcorpus-name" name="subcorpus-name" type="text" required pattern="^[A-Z][a-z0-9\-]*" value="Last"></input>
|
||||
<label for="{{ id_prefix }}-form-subcorpus-name">Subcorpus name</label>
|
||||
</div>
|
||||
<div class="col s12" style="margin-left: 30px;">
|
||||
<p><i> Preview:</i></p>
|
||||
<p id="query-preview"></p>
|
||||
<br>
|
||||
</div>
|
||||
<div class="col s12" style="margin-left: 30px;">
|
||||
<h6>Use the following options to build your query.</h6>
|
||||
<p></p>
|
||||
<a class="btn waves-effect waves-light tooltipped" id="positional-attr-button" data-position="bottom" data-tooltip="Search for any token, for example a word, a lemma or a part-of-speech tag">Add new token to your query</a>
|
||||
<a class="btn waves-effect waves-light tooltipped" id="structural-attr-button" data-position="bottom" data-tooltip="Structure your query with structural attributes, for example sentences, entities or annotate the text">Add structural attributes to your query</a>
|
||||
</div>
|
||||
<div class="col s12 right-align">
|
||||
<p class="hide-on-small-only"> </p>
|
||||
<button class="btn waves-effect waves-light corpus-analysis-action" id="{{ id_prefix }}-form-submit" type="submit" name="submit">
|
||||
Send
|
||||
<i class="material-icons right">send</i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
Loading…
Reference in New Issue
Block a user