feat: Refactor advanced search components and implement dropdown toggle for facets

Author: el-rabies

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

@@ -28,9 +28,7 @@
   ></textarea>
   <button type="submit" class="search-button">Go!</button>
 </form>
-}
-
-@if (query && suggestions.length > 0 && showSuggestions) {
+} @if (query && suggestions.length > 0 && showSuggestions) {
 <div class="suggestions-container">
   <ul class="suggestions-list">
     @for (s of suggestions; track s; let i = $index) {
@@ -49,19 +47,15 @@
     }
   </ul>
 </div>
-}
-
-@if (advancedMode) {
-  <button class="syntax-help-toggle" (click)="syntaxHelpOpen = !syntaxHelpOpen">
+} @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) {
+} @if (syntaxHelpOpen) {
 <div class="syntax-help">
   <table class="syntax-table">
     <thead>
@@ -124,34 +118,31 @@
     >.
   </p>
 </div>
-} 
-
-@if (filters && allFacets) {
+} @if (filters && allFacets) {
 <div class="advanced-facets">
   <h3 class="advanced-facets-title">Filter by</h3>
-  <div class="advanced-facet-grid">
+  <div class="">
     @if (getFacetItems(allFacets.speciesFacet); as items) { @if (items.length) {
-    <div class="advanced-facet-column">
-      <h4>Species</h4>
-      <div class="advanced-facet-list">
-        @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>
-        }
-      </div>
-    </div>
+    <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)
     {
-    <div class="advanced-facet-column">
-      <h4>Types</h4>
-      <div class="advanced-facet-list">
+
+      <app-dropdown-toggle name="Types" class="advanced-facet-list">
         @for (item of items; track item.name) {
         <label class="facet-option">
           <input
@@ -163,13 +154,10 @@ <h4>Types</h4>
           <span class="facet-count">({{ item.count }})</span>
         </label>
         }
-      </div>
-    </div>
+      </app-dropdown-toggle>
     } } @if (getFacetItems(allFacets.compartmentFacet); as items) { @if
     (items.length) {
-    <div class="advanced-facet-column">
-      <h4>Compartments</h4>
-      <div class="advanced-facet-list">
+      <app-dropdown-toggle name="Compartments" class="advanced-facet-list">
         @for (item of items; track item.name) {
         <label class="facet-option">
           <input
@@ -181,13 +169,10 @@ <h4>Compartments</h4>
           <span class="facet-count">({{ item.count }})</span>
         </label>
         }
-      </div>
-    </div>
+      </app-dropdown-toggle>
     } } @if (getFacetItems(allFacets.keywordFacet); as items) { @if
     (items.length) {
-    <div class="advanced-facet-column">
-      <h4>Keywords</h4>
-      <div class="advanced-facet-list">
+      <app-dropdown-toggle name="Keywords" class="advanced-facet-list">
         @for (item of items; track item.name) {
         <label class="facet-option">
           <input
@@ -199,12 +184,9 @@ <h4>Keywords</h4>
           <span class="facet-count">({{ item.count }})</span>
         </label>
         }
-      </div>
-    </div>
+      </app-dropdown-toggle>
     } }
   </div>
 </div>
 
 }
-
-

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

@@ -192,3 +192,43 @@ $border-radius: 8px;
     font-size: 0.85em;
   }
 }
+
+.advanced-facets-title {
+    text-align: left;
+}
+
+.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/search/search-bar/search-bar.component.ts

@@ -15,11 +15,12 @@ import {
   SearchFilters,
   SearchService,
 } from 'projects/website-angular/src/services/search.service';
+import { DropdownToggleComponent } from "../../reactome-components/dropdown-toggle/dropdown-toggle.component";
 
 @Component({
   selector: 'app-search-bar',
   standalone: true,
-  imports: [],
+  imports: [DropdownToggleComponent],
   templateUrl: './search-bar.component.html',
   styleUrl: './search-bar.component.scss',
 })