ux: user can now toggle product types for search beneath search bar

Author: shiftmed

angular/src/app/home/home.component.css

@@ -17,7 +17,7 @@
 }
 
 .section:first-of-type {
-  margin-top: 2rem;
+  margin-top: -0.5rem;
 }
 
 .section-header {

angular/src/app/search-panel/search-panel.component.html

@@ -8,7 +8,7 @@
 </p-toast>
 
 <div>
-  <div class="content-wrapper p-d-flex p-jc-center" style="margin-top: 1em">
+  <div class="content-wrapper p-d-flex p-jc-center" style="margin-top: 1em;">
     <div>
       <h3 *ngIf="title" class="heading title has-text-black">{{ title }}</h3>
       <!-- <p-button
@@ -147,7 +147,37 @@ <h3 *ngIf="title" class="heading title has-text-black">{{ title }}</h3>
         *ngIf="queryStringError"
         [innerHTML]="queryStringErrorMessage"
       ></div>
-    
+
+      <div
+        class="product-type-row"
+        *ngIf="visibleProductTypes.length"
+        aria-label="Toggle product categories"
+      >
+        <div class="product-type-label">Products</div>
+        <div class="product-type-buttons">
+          <button
+            type="button"
+            class="product-type-chip"
+            *ngFor="let product of visibleProductTypes"
+            [class.product-type-chip--active]="isProductTypeActive(product.key)"
+            [class.product-type-chip--disabled]="product.comingSoon"
+            (click)="onProductTypeToggle(product)"
+            [attr.aria-pressed]="isProductTypeActive(product.key)"
+            [disabled]="product.comingSoon"
+            [attr.title]="product.comingSoon ? 'Coming soon' : null"
+          >
+            <i [ngClass]="product.icon" aria-hidden="true"></i>
+            <span class="product-type-chip__label">{{ product.label }}</span>
+            <span
+              *ngIf="product.comingSoon"
+              class="product-type-chip__tag"
+              aria-hidden="true"
+              >soon</span
+            >
+          </button>
+        </div>
+      </div>
+
       <!-- 
       <div class="p-d-flex p-jc-between" style="margin-top: 1em">
         <span

angular/src/app/search-panel/search-panel.component.scss

@@ -224,6 +224,7 @@ body .p-highlight {
   color: white;
   width: 100%;
   display: inline-block;
+  margin-bottom: 1rem;
   // /* margin: 0em auto 1em; */
 }
 
@@ -262,6 +263,98 @@ body .p-highlight {
     0 0 0 1px rgba(139, 229, 255, 0.65);
 }
 
+.product-type-row {
+  width: min(1320px, 96vw);
+  margin: 0.9rem auto 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.product-type-label {
+  font-size: 0.9rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.product-type-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.product-type-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  border: 1.5px solid rgba(255, 255, 255, 0.45);
+  background: rgba(255, 255, 255, 0.06);
+  color: #ffffff;
+  border-radius: 999px;
+  padding: 0.35rem 0.9rem;
+  font-weight: 700;
+  font-size: 0.9rem;
+  letter-spacing: 0.01em;
+  backdrop-filter: blur(4px);
+  transition: all 0.18s ease;
+}
+
+.product-type-chip i {
+  font-size: 0.95rem;
+  opacity: 0.85;
+}
+
+.product-type-chip:hover,
+.product-type-chip:focus {
+  border-color: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
+  transform: translateY(-1px);
+  outline: none;
+}
+
+.product-type-chip--active {
+  background: #ffffff;
+  color: #0f172a;
+  border-color: #ffffff;
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
+}
+
+.product-type-chip--active:hover,
+.product-type-chip--active:focus {
+  color: #0f172a;
+  background: #ffffff;
+  border-color: #ffffff;
+}
+
+.product-type-chip--active i {
+  color: #0f172a;
+  opacity: 1;
+}
+
+.product-type-chip--disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  border-style: dashed;
+}
+
+.product-type-chip__label {
+  white-space: nowrap;
+}
+
+.product-type-chip__tag {
+  background: rgba(15, 23, 42, 0.9);
+  color: #ffffff;
+  font-size: 0.68rem;
+  letter-spacing: 0.05em;
+  padding: 0.1rem 0.45rem;
+  border-radius: 999px;
+  text-transform: uppercase;
+}
+
 
 .search-input-group .p-inputtext,
 .search-input-group .p-autocomplete-input {

angular/src/app/search-panel/search-panel.component.ts

@@ -2,21 +2,27 @@ import {
   Component,
   Inject,
   OnInit,
+  OnDestroy,
   Input,
   NgZone,
   ViewChild,
   ElementRef,
-  Query,
 } from "@angular/core";
 import { SelectItem } from "primeng/api";
 import { DropdownModule } from "primeng/dropdown";
 import { TaxonomyListService } from "../shared/taxonomy-list/index";
 import { SearchfieldsListService } from "../shared/searchfields-list/index";
-import { SearchService, SEARCH_SERVICE } from "../shared/search-service";
+import {
+  SearchService,
+  SEARCH_SERVICE,
+  ProductTypeState,
+  ProductTypeKey,
+  DEFAULT_PRODUCT_TYPES,
+} from "../shared/search-service";
 import { Router, NavigationExtras } from "@angular/router";
 import * as _ from "lodash-es";
 import { AppConfig, Config } from "../shared/config-service/config.service";
-import { timer } from "rxjs";
+import { Observable, Subscription, timer } from "rxjs";
 import {
   trigger,
   state,
@@ -28,17 +34,24 @@ import { OverlayPanel } from "primeng/overlaypanel";
 // MARK: 08/21/2024: Disabled for now until rework
 // import { AdvSearchComponent } from "../adv-search/adv-search.component";
 import { SearchQueryService } from "../shared/search-query/search-query.service";
-import { Observable } from "rxjs";
 import {
   SDPQuery,
   QueryRow,
   CurrentQueryInfo,
 } from "../shared/search-query/query";
-import { ReadVarExpr } from "@angular/compiler";
 import { find } from "./autocomplete";
 // import fetch from "cross-fetch";
 import { MessageService } from "primeng/api";
 
+type ProductTypeOption = {
+  key: ProductTypeKey;
+  label: string;
+  icon: string;
+  external?: boolean;
+  comingSoon?: boolean;
+  description?: string;
+};
+
 @Component({
   selector: "app-search-panel",
   templateUrl: "./search-panel.component.html",
@@ -67,7 +80,7 @@ import { MessageService } from "primeng/api";
     ]),
   ],
 })
-export class SearchPanelComponent implements OnInit {
+export class SearchPanelComponent implements OnInit, OnDestroy {
   @Input() title: string;
   @Input() subtitle: boolean;
   @Input() helpicon: boolean = false;
@@ -107,6 +120,27 @@ export class SearchPanelComponent implements OnInit {
   searchBottonWith: string = "10%";
   breadcrumb_top: string = "6em";
   includeExternalProducts: boolean = false;
+  productTypes: ProductTypeState = { ...DEFAULT_PRODUCT_TYPES };
+  productTypeOptions: ProductTypeOption[] = [
+    { key: "data", label: "Data", icon: "pi pi-database" },
+    { key: "code", label: "Code", icon: "pi pi-code", external: true },
+    {
+      key: "papers",
+      label: "Papers",
+      icon: "pi pi-book",
+      external: true,
+      comingSoon: true,
+    },
+    {
+      key: "patents",
+      label: "Patents",
+      icon: "pi pi-briefcase",
+      external: true,
+      comingSoon: true,
+    },
+  ];
+  private productTypesSub?: Subscription;
+  private externalToggleSub?: Subscription;
   externalHelperText: string =
     "Toggle to include external products like open-source code (patents & papers coming soon). Results and filters will blend with NIST data.";
   externalInfoVisible: boolean = false;
@@ -263,9 +297,17 @@ export class SearchPanelComponent implements OnInit {
       this.imageURL = this.SDPAPI + "assets/images/ngi-background.png";
     });
 
-    this.searchService.watchExternalProducts().subscribe((enabled) => {
-      this.includeExternalProducts = enabled;
-    });
+    this.productTypesSub = this.searchService
+      .watchProductTypes()
+      .subscribe((state) => {
+        this.productTypes = state;
+      });
+
+    this.externalToggleSub = this.searchService
+      .watchExternalProducts()
+      .subscribe((enabled) => {
+        this.includeExternalProducts = enabled;
+      });
 
     this.getTaxonomySuggestions();
   }
@@ -313,6 +355,23 @@ export class SearchPanelComponent implements OnInit {
     this.externalInfoVisible = false;
   }
 
+  get visibleProductTypes(): ProductTypeOption[] {
+    return this.productTypeOptions.filter(
+      (option) => this.includeExternalProducts || !option.external
+    );
+  }
+
+  isProductTypeActive(key: ProductTypeKey): boolean {
+    return !!this.productTypes && !!this.productTypes[key];
+  }
+
+  onProductTypeToggle(option: ProductTypeOption) {
+    if (option.comingSoon) return;
+    if (option.external && !this.includeExternalProducts) return;
+    const nextState = !this.isProductTypeActive(option.key);
+    this.searchService.setProductTypeEnabled(option.key, nextState);
+  }
+
   /**
    * Hide syntax rules and field lookup help
    */
@@ -710,4 +769,9 @@ export class SearchPanelComponent implements OnInit {
   showDialog() {
     this.visible = true;
   }
+
+  ngOnDestroy(): void {
+    this.productTypesSub?.unsubscribe();
+    this.externalToggleSub?.unsubscribe();
+  }
 }

angular/src/app/search/filters/filters.component.ts

@@ -14,7 +14,11 @@ import { TreeNode } from "primeng/api";
 // import { Message } from 'primeng/components/common/api';
 import { Message } from "primeng/api";
 import { SDPQuery } from "../../shared/search-query/query";
-import { SearchService, SEARCH_SERVICE } from "../../shared/search-service";
+import {
+  SearchService,
+  SEARCH_SERVICE,
+  ProductTypeState,
+} from "../../shared/search-service";
 import { SearchQueryService } from "../../shared/search-query/search-query.service";
 import {
   TaxonomyListService,
@@ -131,6 +135,8 @@ export class FiltersComponent implements OnInit, AfterViewInit, OnDestroy {
   private fullFacetCountsSubscription: any = null;
   private searchResponseSub: any = null;
   private externalToggleSubscription: any = null;
+  private productTypeSubscription: any = null;
+  private lastProductTypes: ProductTypeState | null = null;
 
   filterStyle = {
     width: "100%",
@@ -242,13 +248,29 @@ export class FiltersComponent implements OnInit, AfterViewInit, OnDestroy {
       .subscribe(() => {
         this.resetFacetAggregationState();
       });
+
+    this.productTypeSubscription = this.searchService
+      .watchProductTypes()
+      .subscribe((state) => {
+        if (!state) return;
+        if (this.lastProductTypes && _.isEqual(this.lastProductTypes, state)) {
+          return;
+        }
+        this.lastProductTypes = state;
+        this.resetFacetAggregationState();
+        // Rebuild facet UI from latest results (if available) so filters don't stall when all products were off.
+        if (this.searchResults) {
+          this.onSuccess(this.searchResults);
+        }
+      });
   }
 
   ngOnDestroy(): void {
     if(this.searchResponseSub) { try { this.searchResponseSub.unsubscribe(); } catch {} }
     if(this.fullFacetCountsSubscription) { try { this.fullFacetCountsSubscription.unsubscribe(); } catch {} }
     if(this.filterWatcherSub) { try { this.filterWatcherSub.unsubscribe(); } catch {} }
     if(this.externalToggleSubscription) { try { this.externalToggleSubscription.unsubscribe(); } catch {} }
+    if(this.productTypeSubscription) { try { this.productTypeSubscription.unsubscribe(); } catch {} }
   }
 
   toggleMoreOptions() {