sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-06-14 10:00:40 +00:00
Code Issues Projects Releases Wiki Activity

Query Builder New Design

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

97
app/templates/test/analyse_corpus.html.j2
View File

@ -1,6 +1,8 @@
{% extends "base.html.j2" %}
{% import "materialize/wtf.html.j2" as wtf %}
<style>
a {color: #FFFFFF;}
</style>
{% block main_attribs %} class="service-scheme" data-service="corpus-analysis" id="corpus-analysis-app-container"{% endblock main_attribs %}
@ -252,17 +254,49 @@
<div class="modal" id="concordance-query-builder" style="width:70%;">
<div class="modal-content">
<h4>Query-Builder</h4>
<ul class="tabs">
<li class="tab"><a class="active" href="#structural-attr">Add structural attributes</a></li>
<li class="tab"><a href="#positional-attr">Add new token</a></li>
</ul>
<div id="structural-attr">
<nav style="background-color:#AA9CC9; margin-top:-25px; margin-left:-25px; width:105%;">
<div class="nav-wrapper" style="padding-left:15px">
<a href="#!" class="brand-logo"><i class="material-icons">build</i>Query Builder</a>
<i class="material-icons close right" style="margin-right: 25px; cursor:pointer;" id="close-query-builder">close</i>
</div>
</nav>
<p></p>
<div id="query-container" class="hide">
<div class="row">
<h6 class="col s7">Your Query:</h6>
</div>
<div id="button-preparer"></div>
<div class="row">
<div class="col s10" id="your-query" style="border-bottom-style: solid; border-bottom-width:1px;"></div>
<a class="btn-small disabled waves-effect waves-teal col s1" id="insert-query-button" style="background-color:#00426f; text-align:center">
<i class="material-icons">send</i>
</a>
</div>
<p>Preview:</p>
<p id="query-preview"></p>
<p></p>
<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">text annotation</a>
<br>
</div>
<h6>Use the following options to build your query:</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 style="margin-left:15px;">Which structural attribute do you want to add to your query?</h6>
<p></p>
<div class="row">
<div class="col s12">
<a class="btn-small waves-effect waves-light" id="sentence" style="background-color:#FD9720">sentence</a>
<a class="btn-small waves-effect waves-light" id="entity" style="background-color:#A6E22D">entity</a>
<a class="btn-small waves-effect waves-light" id="text-annotation" style="background-color:#2FBBAB">text annotation</a>
</div>
</div>
<div id="entity-builder" class="hide">
<p></p>
@ -304,7 +338,6 @@
</select>
</div>
</div>
<div data-inga=""></div>
</div>
@ -343,18 +376,20 @@
</div>
</div>
<div id="positional-attr">
<div id="positional-attr" class="hide">
<p></p>
<h6 style="margin-left:15px;">Which kind of token are you looking for?</h6>
<p></p>
<div class="row">
<div id="token-attr" class="col s12">
<a class="btn-small waves-effect waves-light" id="empty-token" style="background-color:#43c6fc">empty token</a>
<a class="btn-small waves-effect waves-light" id="word" style="background-color:#ef60b4">word</a>
<a class="btn-small waves-effect waves-light" id="lemma" style="background-color:#ef60b4">lemma</a>
<a class="btn-small waves-effect waves-light" id="pos" style="background-color:#ef60b4">pos</a>
<a class="btn-small waves-effect waves-light" id="simple-pos-button" style="background-color:#ef60b4">simple_pos</a>
<a class="btn-small waves-effect waves-light disabled" id="or" style="background-color:#fc0">or</a>
<a class="btn-small waves-effect waves-light disabled" id="and" style="background-color:#fc0">and</a>
<a class="dropdown-trigger btn-small disabled waves-effect waves-light" href="#" data-target="incidence-modifiers" style="background-color:#2fbbab">incidence modifiers</a>
<a class="btn-small tooltipped waves-effect waves-light" data-position="bottom" data-tooltip="You can look for an empty token. It is NOT recommended to search for an empty token <br> without an incidence modifier, because each token would matches this pattern." id="empty-token" style="background-color:#43c6fc">empty token</a>
<a class="btn-small tooltipped waves-effect waves-light" id="word" style="background-color:#ef60b4" data-position="bottom" data-tooltip="You can search for a word and modify the corresponding search">word</a>
<a class="btn-small tooltipped waves-effect waves-light" id="lemma" style="background-color:#ef60b4" data-position="bottom" data-tooltip="You can search for a lemma and modify the corresponding search">lemma</a>
<a class="btn-small tooltipped waves-effect waves-light" id="pos" style="background-color:#ef60b4" data-position="bottom" data-tooltip="You can search for a part of speech tag">pos</a>
<a class="btn-small tooltipped waves-effect waves-light" id="simple-pos-button" style="background-color:#ef60b4" data-position="bottom" data-tooltip="You can search for a simple part of speech tag">simple_pos</a>
<a class="btn-small tooltipped waves-effect waves-light disabled" id="or" style="background-color:#fc0" 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 disabled" id="and" style="background-color:#fc0" data-position="bottom" data-tooltip="You can add another condition to your token. <br>Both must be fulfilled">and</a>
<a class="dropdown-trigger tooltipped btn-small disabled waves-effect waves-light" href="#" data-target="incidence-modifiers" data-position="bottom" data-tooltip="Incidence Modifiers are special characters or patterns, <br>which determine how often a character represented previously should occur." style="background-color:#2fbbab">incidence modifiers</a>
</div>
</div>
<div id="token-builder-content">
@ -525,27 +560,11 @@
<div id="token-query"></div>
<p></p>
<a class="btn waves-effect disabled waves-light" style="background-color:#00426f" id="build-token-button">
Add token
Add token to your query
<i class="material-icons right">check</i>
</a>
</div>
<br><hr>
<div>
<h5>Your Query</h5>
<p><i>Examples: </i></p>
<p>
&lt;ent_type=&quot;PERSON&quot;&gt; []* &lt;/ent_type&gt; []*
[simple_pos=&quot;VERB&quot;] :: match.text_publishing_year=&quot;1991&quot;;
</p>
<div id="button-preparer"></div>
<div id="your-query"></div>
<p></p>
<a class="btn disabled waves-effect waves-light" id="insert-query-button" style="background-color:#00426f">
Insert
<i class="material-icons right">send</i>
</a>
</div>
</div>
</div>