Search refactor

projects/website-angular/src/app/app.routes.ts

@@ -27,6 +27,7 @@ export const routes: Routes = [
     { path: 'content/reactome-research-spotlight/:slug', loadComponent: () => import('./article/article/article.component').then(m => m.ArticleComponent), pathMatch: 'full' },
 
     //Search Page
+    { path: 'content/advanced', redirectTo: '/content/query?advanced=true' },
     { path: 'content/query', loadComponent: () => import('./search/search.component').then(m => m.SearchComponent) },
 
     //404 Page

projects/website-angular/src/app/community/resources/resources.component.ts

@@ -28,7 +28,6 @@ export class ResourcesComponent {
       next: (html) => {
         this.entries = this.parseHtml(html);
         this.loading = false;
-        console.log(this.entries);
       },
       error: () => {
         this.error = true;

projects/website-angular/src/app/reactome-components/dropdown-toggle/dropdown-toggle.component.html

@@ -0,0 +1,13 @@
+<div class="facet-section">
+  <button class="facet-title" (click)="toggle()">
+    <span>{{ name }}</span>
+    <span class="facet-toggle">{{
+      open ? "-" : "+"
+    }}</span>
+  </button>
+  @if (open) {
+  <div class="facet-options">
+    <ng-content></ng-content>
+  </div>
+  }
+</div>

projects/website-angular/src/app/reactome-components/dropdown-toggle/dropdown-toggle.component.scss

@@ -0,0 +1,77 @@
+$spacing: 24px;
+$border-radius: 8px;
+
+.facet-section {
+  background: white;
+  border-radius: $border-radius;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  margin-bottom: 16px;
+  overflow: hidden;
+
+  :host-context(.dark) & {
+    background-color: var(--surface);
+    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.08);
+  }
+}
+
+.facet-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 12px 16px;
+  border: none;
+  background: var(--primary);
+  color: var(--on-primary);
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: left;
+}
+
+.facet-toggle {
+  font-size: 1.2rem;
+  line-height: 1;
+}
+
+.facet-options {
+  padding: 8px 0;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.facet-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 16px;
+  cursor: pointer;
+  font-size: 0.85rem;
+  line-height: 1.4;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+
+    :host-context(.dark) & {
+      background: rgba(255, 255, 255, 0.04);
+    }
+  }
+
+  input[type='checkbox'] {
+    flex-shrink: 0;
+    accent-color: var(--primary);
+  }
+}
+
+.facet-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.facet-count {
+  color: var(--on-surface-variant);
+  flex-shrink: 0;
+}

projects/website-angular/src/app/reactome-components/dropdown-toggle/dropdown-toggle.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DropdownToggleComponent } from './dropdown-toggle.component';
+
+describe('DropdownToggleComponent', () => {
+  let component: DropdownToggleComponent;
+  let fixture: ComponentFixture<DropdownToggleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropdownToggleComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DropdownToggleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/website-angular/src/app/reactome-components/dropdown-toggle/dropdown-toggle.component.ts

@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-dropdown-toggle',
+  imports: [],
+  templateUrl: './dropdown-toggle.component.html',
+  styleUrl: './dropdown-toggle.component.scss'
+})
+export class DropdownToggleComponent {
+  @Input() name: string = '';
+  @Output() toggleEvent = new EventEmitter<boolean>();
+
+  open = true;
+
+  toggle() {
+    this.open = !this.open;
+    this.toggleEvent.emit(this.open);
+  }
+}

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

@@ -1,3 +1,4 @@
+@if (!advancedMode) {
 <form class="search-bar-container" (submit)="onSubmit($event)">
   <input
     type="text"
@@ -10,16 +11,31 @@
     autocomplete="off"
     (submit)="onSubmit($event)"
   />
-  <button type="submit" class="search-button">
-    Go!
-  </button>
+  <button type="submit" class="search-button">Go!</button>
 </form>
-
-@if (query && suggestions.length > 0 && showSuggestions) {
+} @else {
+<form class="search-bar-container" (submit)="onSubmit($event)">
+  <textarea
+    type="text"
+    placeholder='e.g. "apoptotic process" AND TP53'
+    class="advanced-input"
+    [value]="query"
+    (input)="onInput($event)"
+    (focus)="showDropdown()"
+    (blur)="hideDropdownDelayed()"
+    autocomplete="off"
+    (submit)="onSubmit($event)"
+  ></textarea>
+  <button type="submit" class="search-button">Go!</button>
+</form>
+} @if (query && suggestions.length > 0 && showSuggestions) {
 <div class="suggestions-container">
   <ul class="suggestions-list">
     @for (s of suggestions; track s; let i = $index) {
-    <li (mousedown)="selectSuggestion(s)" [class]="i === highlightedIndex ? 'highlighted' : ''">
+    <li
+      (mousedown)="selectSuggestion(s)"
+      [class]="i === highlightedIndex ? 'highlighted' : ''"
+    >
       <a
         [routerLink]="['/content/query']"
         [queryParams]="{ q: s }"
@@ -31,4 +47,146 @@
     }
   </ul>
 </div>
+} @if (advancedMode) {
+<button class="syntax-help-toggle" (click)="syntaxHelpOpen = !syntaxHelpOpen">
+  <span class="material-symbols-rounded">help_outline</span>
+  Syntax Help
+  <span class="material-symbols-rounded">{{
+    syntaxHelpOpen ? "expand_less" : "expand_more"
+  }}</span>
+</button>
+} @if (syntaxHelpOpen) {
+<div class="syntax-help">
+  <table class="syntax-table">
+    <thead>
+      <tr>
+        <th>Syntax</th>
+        <th>Description</th>
+        <th>Example</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>"..."</code></td>
+        <td>Exact phrase match</td>
+        <td><code>"apoptotic process"</code></td>
+      </tr>
+      <tr>
+        <td><code>AND</code></td>
+        <td>Both terms must be present</td>
+        <td><code>apoptosis AND TP53</code></td>
+      </tr>
+      <tr>
+        <td><code>OR</code></td>
+        <td>Either term can be present</td>
+        <td><code>apoptosis OR autophagy</code></td>
+      </tr>
+      <tr>
+        <td><code>NOT</code></td>
+        <td>Exclude a term</td>
+        <td><code>apoptosis NOT cancer</code></td>
+      </tr>
+      <tr>
+        <td><code>?</code></td>
+        <td>Single character wildcard</td>
+        <td><code>te?t</code></td>
+      </tr>
+      <tr>
+        <td><code>*</code></td>
+        <td>Multi-character wildcard</td>
+        <td><code>apopt*</code></td>
+      </tr>
+      <tr>
+        <td><code>"..."~N</code></td>
+        <td>Proximity search (within N words)</td>
+        <td><code>"cell death"~3</code></td>
+      </tr>
+      <tr>
+        <td><code>( )</code></td>
+        <td>Grouping for complex queries</td>
+        <td><code>(apoptosis OR autophagy) AND TP53</code></td>
+      </tr>
+    </tbody>
+  </table>
+  <p class="syntax-help-footer">
+    For the full query syntax, see the
+    <a
+      href="https://solr.apache.org/guide/solr/latest/query-guide/standard-query-parser.html"
+      target="_blank"
+      rel="noopener"
+      >Solr Standard Query Parser documentation</a
+    >.
+  </p>
+</div>
+} @if (filters && allFacets) {
+<div class="advanced-facets">
+  <h3 class="advanced-facets-title">Filter by</h3>
+  <div class="">
+    @if (getFacetItems(allFacets.speciesFacet); as items) { @if (items.length) {
+    <app-dropdown-toggle
+      name="Species"
+      (toggleEvent)="toggleAdvancedFacet('species')"
+    >
+      @for (item of items; track item.name) {
+      <label class="facet-option">
+        <input
+          type="checkbox"
+          [checked]="isAdvancedFacetSelected('species', item.name)"
+          (change)="toggleAdvancedFacet('species', item.name)"
+        />
+        <span class="facet-name">{{ item.name }}</span>
+        <span class="facet-count">({{ item.count }})</span>
+      </label>
+      }
+    </app-dropdown-toggle>
+    } } @if (getFacetItems(allFacets.typeFacet); as items) { @if (items.length)
+    {
+
+      <app-dropdown-toggle name="Types" class="advanced-facet-list">
+        @for (item of items; track item.name) {
+        <label class="facet-option">
+          <input
+            type="checkbox"
+            [checked]="isAdvancedFacetSelected('types', item.name)"
+            (change)="toggleAdvancedFacet('types', item.name)"
+          />
+          <span class="facet-name">{{ item.name }}</span>
+          <span class="facet-count">({{ item.count }})</span>
+        </label>
+        }
+      </app-dropdown-toggle>
+    } } @if (getFacetItems(allFacets.compartmentFacet); as items) { @if
+    (items.length) {
+      <app-dropdown-toggle name="Compartments" class="advanced-facet-list">
+        @for (item of items; track item.name) {
+        <label class="facet-option">
+          <input
+            type="checkbox"
+            [checked]="isAdvancedFacetSelected('compartments', item.name)"
+            (change)="toggleAdvancedFacet('compartments', item.name)"
+          />
+          <span class="facet-name">{{ item.name }}</span>
+          <span class="facet-count">({{ item.count }})</span>
+        </label>
+        }
+      </app-dropdown-toggle>
+    } } @if (getFacetItems(allFacets.keywordFacet); as items) { @if
+    (items.length) {
+      <app-dropdown-toggle name="Keywords" class="advanced-facet-list">
+        @for (item of items; track item.name) {
+        <label class="facet-option">
+          <input
+            type="checkbox"
+            [checked]="isAdvancedFacetSelected('keywords', item.name)"
+            (change)="toggleAdvancedFacet('keywords', item.name)"
+          />
+          <span class="facet-name">{{ item.name }}</span>
+          <span class="facet-count">({{ item.count }})</span>
+        </label>
+        }
+      </app-dropdown-toggle>
+    } }
+  </div>
+</div>
+
 }