Merge branch 'query-builder' of gitlab.ub.uni-bielefeld.de:sfb1288inf/nopaque into query-builder

app/static/js/app.js

@@ -168,6 +168,14 @@ nopaque.App = class App {
             let manualModalTocElement = document.querySelector('#manual-modal-toc');
             let manualModalToc = M.Tabs.getInstance(manualModalTocElement);
             manualModalToc.select(modalTriggerElement.dataset.manualModalChapter);
+            // TODO: Make this work.
+            // if ('manualModalChapterAnchor' in modalTriggerElement.dataset) {
+            //   let manualModalChapterAnchor = document.querySelector(`#${modalTriggerElement.dataset.manualModalChapterAnchor}`);
+            //   let xCoord = manualModalChapterAnchor.getBoundingClientRect().left;
+            //   let yCoord = manualModalChapterAnchor.getBoundingClientRect().top;
+            //   let modalContentElement = modalElement.querySelector('.modal-content');
+            //   modalContentElement.scroll(xCoord, yCoord);
+            // }
           }
         }
       }

app/templates/_base/_modals/_manual/09_query_builder.html.j2

@@ -11,9 +11,9 @@ adjective, etc.). In addition, you can also search for structural attributes,
 or specify your query for a token (word, lemma, pos) via entity typing. And of 
 course, the different text parameters can be combined.</p>
 <p>Tokens and structural attributes can be added by clicking on the "+" button
-(the "input marker") in the input field. Elements added are shown as chips. These can 
-be reorganized using drag and drop. The input marker can also be moved in this way. 
-Its position shows where new elements will be added. <br>
+(the "input marker") in the input field or the labeled buttons below it. Elements 
+added are shown as chips. These can be reorganized using drag and drop. The input 
+marker can also be moved in this way. Its position shows where new elements will be added. <br>
 A "translation" of your query into Corpus Query Language (CQL) is shown below.</p>
 <p>Advanced users can make direct use of the Corpus Query Language (CQL) by switching to "expert mode" via the toggle button.</p>
 <p>The entire input field can be cleared using the red trash icon on the right.</p>
@@ -22,9 +22,9 @@ A "translation" of your query into Corpus Query Language (CQL) is shown below.</
 <div style="border: 1px solid; padding-left: 20px; margin-right: 400px; margin-bottom: 40px;">
   <h5>Content</h5>
   <ol style="list-style-type:disc">
-    <li><a href="#add-new-token-tutorial">Add new token to your query</a></li>
-    <li><a href="#edit-options-tutorial">Options to edit your query</a></li>
-    <li><a href="#add-structural-attribute-tutorial">Add structural Attributes to your query</a></li>
+    <li><a href="#add-new-token-tutorial">Add a new token to your query</a></li>
+    <li><a href="#edit-options-tutorial">Options for editing your query</a></li>
+    <li><a href="#add-structural-attribute-tutorial">Add structural attributes to your query</a></li>
     <li><a href="#general-options-query-builder">General options</a></li>
   </ol>
 </div>
@@ -38,7 +38,7 @@ A "translation" of your query into Corpus Query Language (CQL) is shown below.</
   <p>If you are only looking for a specific token, you can click on the left 
   button and select the type of token you are looking for from the drop-down menu. 
   By default "Word" is selected. </p>
-
+  <br>
   <h5>Word and Lemma</h5>
   <p>If you want to search for a specific word or lemma and the respective 
   category is selected in the drop-down menu, you can type in the word or lemma 
@@ -54,13 +54,13 @@ A "translation" of your query into Corpus Query Language (CQL) is shown below.</
   "simple_pos" to search for different parts-of-speech. You can find an overview 
   of all tags under the "Tagsets" tab.</p>
   <img src="{{ url_for('static', filename='images/manual/query_builder/pos.gif') }}" alt="part-of-speech-tag explanation" width="100%;" style="margin-bottom:20px;">
+  <br>
 
   <h5>Empty Token</h5>
-  <p>Here you can search for an empty token. This selection should never stand 
-  alone and should always be extended with an incidence modifier or stand in a 
+  <p>Here you can search for a token with unspecified attributes (also called wildcard token). This 
+  selection should never stand alone and should always be extended with an incidence modifier or stand in a 
   larger query, because otherwise all possible tokens would be searched for and 
   the program would crash.</p>
-  <p></p>
   <br>
 </div>
 
@@ -69,8 +69,8 @@ A "translation" of your query into Corpus Query Language (CQL) is shown below.</
   <hr>
   <p></p>
   <br>
-  <h4 id="edit-options-tutorial">Options to edit your token</h4> 
-  <p>You have the possibility to extend or specify your searched token with 
+  <h4 id="edit-options-tutorial">Options for editing your query</h4> 
+  <p>You have the possibility to extend or specify the token you are searching for with 
   certain factors. For this the query builder offers some fixed options. You can 
   find more information about the options in the Corpus Query Language Tutorial.</p>
   <br>
@@ -84,7 +84,6 @@ A "translation" of your query into Corpus Query Language (CQL) is shown below.</
   variants are not limited, so you can manually enter more options in the same 
   format. "Option1" and "option2" must be replaced accordingly. </p>
   <img src="{{ url_for('static', filename='images/manual/query_builder/option_group.gif') }}" alt="option group explanation" width="100%;" style="margin-bottom:20px;">
-  <p></p>
   <br>
 
   <h5>Incidence Modifiers</h5>
@@ -93,7 +92,7 @@ A "translation" of your query into Corpus Query Language (CQL) is shown below.</
   not at all or once: <br> 
   [word = "is"] [word="it"] [word="your"] [word="litte"]? [word = "dog"] <br>
   Here the word "little" should occur either once or not at all. With 
-  [word="dogs?"] the search is for "dog "or "dogs". </p>
+  [word="dogs?"] the search is for "dog "or "dogs".</p>
   <br>
 
   <h5>Ignore Case</h5>
@@ -111,7 +110,8 @@ A "translation" of your query into Corpus Query Language (CQL) is shown below.</
   <img src="{{ url_for('static', filename='images/manual/query_builder/or_and.gif') }}" alt="OR/AND explanation" width="100%;" style="margin-bottom:20px;">
   <p>Tokens that have already been added can also be modified by clicking on the corresponding 
   pen icon. Click on the "ignore case" box, for example, and the query builder will 
-  not differentiate between upper- and lower- case letters for that respective token.</p>
+  not differentiate between upper- and lower- case letters for that respective token. 
+  New conditions added apply to the most recent token information.</p>
   <br>
 </div>
 
@@ -130,26 +130,33 @@ A "translation" of your query into Corpus Query Language (CQL) is shown below.</
   This search can of course be specified if you search for particular tokens or 
   entities between the sentence tags (<s></s>). For example, you can search for
   sentences that contain only a noun, verb, and adjective. <br> 
-  After clicking on Sentence you will see a <div class="chip" style="background-color:#FD9720;">Sentence Start</div>.
-  When you are done with your query or the content 
-  between the Sentence tags, you have to click the Sentence button one more time 
-  to close it. The corresponding button is called 
-  <div class="chip" style="background-color:#FD9720;">Sentence End</div>.<br>
+  Click on Sentence to add the sentence chips: <div class="chip" style="background-color:#FD9720;">Sentence Start</div> 
+  and <div class="chip" style="background-color:#FD9720;">Sentence End</div>. 
+  These mark where the sentence starts and ends. Use drag-and-drop to place them accordingly. When 
+  the Sentence attribute is added, the input marker will automatically be 
+  moved between the sentence chips. Use drag-and-drop as needed to continue your query 
+  at a different position.
   <br>
 
   <h5>Entities</h5>
-  <p>With entities, i.e. units of meaning, you search for text sections that 
-  follow a certain code. For example, persons, dates, certain events. You can 
-  select the codes using the drop-down menus. You can find an explanation of 
-  the respective abbreviations under the tab "Tagsets". <br>
+  <p>With entities, i.e. units of meaning, you can search for text sections that 
+  contain more specific information, for example, persons, dates, or events. The 
+  codes for these categories can be selected using the drop-down menus. You can find an explanation of 
+  these abbreviations under the tab "Tagsets". <br>
   You can also search for unspecified entities by selecting "Add entity of any type".</p>
-  To close the entity query you started, you have to click the entity button one more time. This will make the <div class="chip" style="background-color:#A6E22D;">Entity End</div> element appear in your query.
+  Click on the Entity button to add the entity chips <div class="chip" style="background-color:#A6E22D;">Entity Type=</div> and <div class="chip" style="background-color:#A6E22D;">Entity End</div>.
+  <p>The entity type can be changed by clicking on the pen symbol on the chip. When 
+  the Entity attribute is added, the input marker will automatically be 
+  moved between the entity chips. Use drag-and-drop as needed to continue your query 
+  at a different position.</p>
   <img src="{{ url_for('static', filename='images/manual/query_builder/entity.gif') }}" alt="entity explanation" width="100%;" style="margin-bottom:20px;">
   <p></p>
   <br>
 
-  <h5>Meta Data</h5>
-  <p>With the meta data you can annotate your text and add specific conditions. 
+  <h5>Meta Data (currently unavailable)</h5>
+  <p>The meta data function is being worked on and cannot currently be used!
+  <br>
+  With the meta data you can annotate your text and add specific conditions. 
   You can select a category on the left and enter your desired value on the right. 
   The selected metadata will apply to your entire request and will be added at the end.</p>
   <img src="{{ url_for('static', filename='images/manual/query_builder/meta_data.gif') }}" alt="meta data explanation" width="100%;" style="margin-bottom:20px;">
@@ -165,14 +172,39 @@ A "translation" of your query into Corpus Query Language (CQL) is shown below.</
   <br>
   <h4 id="general-options-query-builder">General Options of the query builder</h4>
   <p>You have several options to edit your query after adding it to the preview.</p>
+  <br>
+
+  <h5>Editing the elements</h5>
+  <p>You can edit your query chips by clicking on the pen icon.</p>
+  <img src="{{ url_for('static', filename='images/manual/query_builder/editing_chips.gif') }}" alt="editing explanation" width="100%;" style="margin-bottom:20px;">
+  <br>
 
   <h5>Deleting the elements</h5>
   <p>You can delete the added elements from the query by clicking the X behind the respective content.</p>
   <img src="{{ url_for('static', filename='images/manual/query_builder/delete.gif') }}" alt="delete explanation" width="100%;" style="margin-bottom:20px;">
+  <br>
 
   <h5>Move the elements of your query</h5>
   <p>You can drag and drop elements to customize your query.</p>
   <img src="{{ url_for('static', filename='images/manual/query_builder/drag_and_drop.gif') }}" alt="Drag&Drop explanation" width="100%;" style="margin-bottom:20px;">
+  <br>
+
+  <h5>Setting an incidence modifier</h5>
+  <p>With the incidence modifier option, you can specify the amount of 
+  times a token should appear in your query. This is particularly relevant for empty
+  tokens (tokens with unspecified attributes). Click on a token (blue chip) and 
+  select the desired option from the list to add an incidence modifier. To 
+  close the list without adding anything, click on the token again.</p>
+  <img src="{{ url_for('static', filename='images/manual/query_builder/incidence_modifier.gif') }}" alt="incidence modifier explanation" width="100%;" style="margin-bottom:20px;">
+  <br>
+  
+  <h5>Switching between Query Builder and Expert mode</h5>
+  <p>To work with the plain Corpus Query Language instead of using the Query Builder, click on the "expert mode" 
+  switch. Your query can be entered into the input field. All elements previously added will be carried over 
+  into expert mode. Click on the switch again to switch back to the Query Builder if desired. All recognized elements 
+  will be parsed into chips; those not recognized will be deleted from the query.</p>
+  <img src="{{ url_for('static', filename='images/manual/query_builder/expert_mode.gif') }}" alt="expert mode explanation" width="100%;" style="margin-bottom:20px;">
+
 
 </div>
 

app/templates/corpora/_analysis/query_builder/_query_builder.html.j2

@@ -40,6 +40,7 @@
       <a class="btn-small waves-effect waves-light tooltipped modal-trigger" href="#corpus-analysis-concordance-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-small waves-effect waves-light tooltipped modal-trigger" href="#corpus-analysis-concordance-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>
       <a class="btn-small waves-effect waves-light tooltipped dropdown-trigger disabled" data-target="corpus-analysis-concordance-token-incidence-modifiers-dropdown" data-toggle-area="token-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>
+      <a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal"><i class="material-icons left" style="color:black">help_outline</i></a>
     </div>
   </div>
   <div class="row">
@@ -66,7 +67,7 @@
 <div id="corpus-analysis-concordance-structural-attr-modal" class="modal">
   <div class="modal-content">
     <div class="attr-modal-header">
-      <h5>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="corpus-analysis-concordance-add-structural-attribute-tutorial-info-icon">help_outline</i></a></h5>
+      <h5>Which structural attribute do you want to add to your query?<a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" data-manual-modal-chapter-anchor="add-structural-attribute-tutorial" href="#manual-modal"><i class="material-icons left" id="corpus-analysis-concordance-add-structural-attribute-tutorial-info-icon">help_outline</i></a></h5>
     </div>
     <p></p>
     <br>
@@ -127,7 +128,7 @@
     <div class="row attr-modal-header">
       <p></p>
       <div class="col s12">
-        <h5>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="corpus-analysis-concordance-token-tutorial-info-icon">help_outline</i></a></h5>
+        <h5>Which kind of token are you looking for? <a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" data-manual-modal-chapter-anchor="add-new-token-tutorial" href="#manual-modal"><i class="material-icons left" id="corpus-analysis-concordance-token-tutorial-info-icon">help_outline</i></a></h5>
       </div>
       <div class="input-field col s3" style="margin-left:42px;">
         <select id="corpus-analysis-concordance-positional-attr-selection">
@@ -336,7 +337,7 @@
     </div>
     <div id="corpus-analysis-concordance-token-edit-options" data-toggle-area="input-field-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="corpus-analysis-concordance-edit-options-tutorial-info-icon">help_outline</i></a></h6>
+        <h6>Options to edit your token: <a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal" data-manual-modal-chapter-anchor="edit-options-tutorial"><i class="material-icons left" id="corpus-analysis-concordance-edit-options-tutorial-info-icon">help_outline</i></a></h6>
       </div>
       <p></p>
       <div class="row">
@@ -409,9 +410,3 @@
   </div>
 </div>
 {% endmacro %}
-
-{# {% macro scripts(id_prefix) %}
-<script>
-  const concordanceQueryBuilder = new ConcordanceQueryBuilder();
-</script>
-{% endmacro %} #}