Skip to content

Commit 9315493

Browse files
el-rabiesel-rabies
committed
Moved Advance search bar to search-bar-component
1 parent 1f003e4 commit 9315493

6 files changed

Lines changed: 466 additions & 275 deletions

File tree

‎projects/website-angular/src/app/search/search-bar/search-bar.component.html‎

Lines changed: 180 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@if (!advancedMode) {
12
<form class="search-bar-container" (submit)="onSubmit($event)">
23
<input
34
type="text"
@@ -10,16 +11,33 @@
1011
autocomplete="off"
1112
(submit)="onSubmit($event)"
1213
/>
13-
<button type="submit" class="search-button">
14-
Go!
15-
</button>
14+
<button type="submit" class="search-button">Go!</button>
1615
</form>
16+
} @else {
17+
<form class="search-bar-container" (submit)="onSubmit($event)">
18+
<textarea
19+
type="text"
20+
placeholder='e.g. "apoptotic process" AND TP53'
21+
class="advanced-input"
22+
[value]="query"
23+
(input)="onInput($event)"
24+
(focus)="showDropdown()"
25+
(blur)="hideDropdownDelayed()"
26+
autocomplete="off"
27+
(submit)="onSubmit($event)"
28+
></textarea>
29+
<button type="submit" class="search-button">Go!</button>
30+
</form>
31+
}
1732

1833
@if (query && suggestions.length > 0 && showSuggestions) {
1934
<div class="suggestions-container">
2035
<ul class="suggestions-list">
2136
@for (s of suggestions; track s; let i = $index) {
22-
<li (mousedown)="selectSuggestion(s)" [class]="i === highlightedIndex ? 'highlighted' : ''">
37+
<li
38+
(mousedown)="selectSuggestion(s)"
39+
[class]="i === highlightedIndex ? 'highlighted' : ''"
40+
>
2341
<a
2442
[routerLink]="['/content/query']"
2543
[queryParams]="{ q: s }"
@@ -32,3 +50,161 @@
3250
</ul>
3351
</div>
3452
}
53+
54+
@if (advancedMode) {
55+
<button class="syntax-help-toggle" (click)="syntaxHelpOpen = !syntaxHelpOpen">
56+
<span class="material-symbols-rounded">help_outline</span>
57+
Syntax Help
58+
<span class="material-symbols-rounded">{{
59+
syntaxHelpOpen ? "expand_less" : "expand_more"
60+
}}</span>
61+
</button>
62+
}
63+
64+
@if (syntaxHelpOpen) {
65+
<div class="syntax-help">
66+
<table class="syntax-table">
67+
<thead>
68+
<tr>
69+
<th>Syntax</th>
70+
<th>Description</th>
71+
<th>Example</th>
72+
</tr>
73+
</thead>
74+
<tbody>
75+
<tr>
76+
<td><code>"..."</code></td>
77+
<td>Exact phrase match</td>
78+
<td><code>"apoptotic process"</code></td>
79+
</tr>
80+
<tr>
81+
<td><code>AND</code></td>
82+
<td>Both terms must be present</td>
83+
<td><code>apoptosis AND TP53</code></td>
84+
</tr>
85+
<tr>
86+
<td><code>OR</code></td>
87+
<td>Either term can be present</td>
88+
<td><code>apoptosis OR autophagy</code></td>
89+
</tr>
90+
<tr>
91+
<td><code>NOT</code></td>
92+
<td>Exclude a term</td>
93+
<td><code>apoptosis NOT cancer</code></td>
94+
</tr>
95+
<tr>
96+
<td><code>?</code></td>
97+
<td>Single character wildcard</td>
98+
<td><code>te?t</code></td>
99+
</tr>
100+
<tr>
101+
<td><code>*</code></td>
102+
<td>Multi-character wildcard</td>
103+
<td><code>apopt*</code></td>
104+
</tr>
105+
<tr>
106+
<td><code>"..."~N</code></td>
107+
<td>Proximity search (within N words)</td>
108+
<td><code>"cell death"~3</code></td>
109+
</tr>
110+
<tr>
111+
<td><code>( )</code></td>
112+
<td>Grouping for complex queries</td>
113+
<td><code>(apoptosis OR autophagy) AND TP53</code></td>
114+
</tr>
115+
</tbody>
116+
</table>
117+
<p class="syntax-help-footer">
118+
For the full query syntax, see the
119+
<a
120+
href="https://solr.apache.org/guide/solr/latest/query-guide/standard-query-parser.html"
121+
target="_blank"
122+
rel="noopener"
123+
>Solr Standard Query Parser documentation</a
124+
>.
125+
</p>
126+
</div>
127+
}
128+
129+
@if (filters && allFacets) {
130+
<div class="advanced-facets">
131+
<h3 class="advanced-facets-title">Filter by</h3>
132+
<div class="advanced-facet-grid">
133+
@if (getFacetItems(allFacets.speciesFacet); as items) { @if (items.length) {
134+
<div class="advanced-facet-column">
135+
<h4>Species</h4>
136+
<div class="advanced-facet-list">
137+
@for (item of items; track item.name) {
138+
<label class="facet-option">
139+
<input
140+
type="checkbox"
141+
[checked]="isAdvancedFacetSelected('species', item.name)"
142+
(change)="toggleAdvancedFacet('species', item.name)"
143+
/>
144+
<span class="facet-name">{{ item.name }}</span>
145+
<span class="facet-count">({{ item.count }})</span>
146+
</label>
147+
}
148+
</div>
149+
</div>
150+
} } @if (getFacetItems(allFacets.typeFacet); as items) { @if (items.length)
151+
{
152+
<div class="advanced-facet-column">
153+
<h4>Types</h4>
154+
<div class="advanced-facet-list">
155+
@for (item of items; track item.name) {
156+
<label class="facet-option">
157+
<input
158+
type="checkbox"
159+
[checked]="isAdvancedFacetSelected('types', item.name)"
160+
(change)="toggleAdvancedFacet('types', item.name)"
161+
/>
162+
<span class="facet-name">{{ item.name }}</span>
163+
<span class="facet-count">({{ item.count }})</span>
164+
</label>
165+
}
166+
</div>
167+
</div>
168+
} } @if (getFacetItems(allFacets.compartmentFacet); as items) { @if
169+
(items.length) {
170+
<div class="advanced-facet-column">
171+
<h4>Compartments</h4>
172+
<div class="advanced-facet-list">
173+
@for (item of items; track item.name) {
174+
<label class="facet-option">
175+
<input
176+
type="checkbox"
177+
[checked]="isAdvancedFacetSelected('compartments', item.name)"
178+
(change)="toggleAdvancedFacet('compartments', item.name)"
179+
/>
180+
<span class="facet-name">{{ item.name }}</span>
181+
<span class="facet-count">({{ item.count }})</span>
182+
</label>
183+
}
184+
</div>
185+
</div>
186+
} } @if (getFacetItems(allFacets.keywordFacet); as items) { @if
187+
(items.length) {
188+
<div class="advanced-facet-column">
189+
<h4>Keywords</h4>
190+
<div class="advanced-facet-list">
191+
@for (item of items; track item.name) {
192+
<label class="facet-option">
193+
<input
194+
type="checkbox"
195+
[checked]="isAdvancedFacetSelected('keywords', item.name)"
196+
(change)="toggleAdvancedFacet('keywords', item.name)"
197+
/>
198+
<span class="facet-name">{{ item.name }}</span>
199+
<span class="facet-count">({{ item.count }})</span>
200+
</label>
201+
}
202+
</div>
203+
</div>
204+
} }
205+
</div>
206+
</div>
207+
208+
}
209+
210+

0 commit comments

Comments
 (0)