diff --git a/app/static/js/CorpusAnalysis/QueryBuilder.js b/app/static/js/CorpusAnalysis/QueryBuilder.js index 6b6aa4c50b4a19659971a135f63f8c3d043e3c41..ee52fb4577eac67e2969c33151c6721f29437ee6 100644 --- a/app/static/js/CorpusAnalysis/QueryBuilder.js +++ b/app/static/js/CorpusAnalysis/QueryBuilder.js @@ -195,6 +195,7 @@ class ConcordanceQueryBuilder { } queryChipFactory(dataType, prettyQueryText, queryText) { + this.elements.counter++; window.location.href = '#query-container'; queryText = Utils.escape(queryText); prettyQueryText = Utils.escape(prettyQueryText); @@ -295,7 +296,7 @@ class ConcordanceQueryBuilder { this.elements.entity.innerHTML = 'Entity'; } this.elements.counter -= 1; - if (this.elements.counter === 0) { + if (this.elements.counter <= 0) { this.elements.queryContainer.classList.add('hide'); } this.queryPreviewBuilder(); diff --git a/app/templates/corpora/_analysis/concordance.html.j2 b/app/templates/corpora/_analysis/concordance.html.j2 index 5886a4b1cb559c908ba6b01d5970d9c2547ee895..eb3de1b7d3ac10cd96653b3b5c81d9b639b57e17 100644 --- a/app/templates/corpora/_analysis/concordance.html.j2 +++ b/app/templates/corpora/_analysis/concordance.html.j2 @@ -154,6 +154,406 @@ Query your corpus with the CQP query language utilizing a KWIC view. </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> + </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 %}