Fix/search filters

src/app/shared/components/filter-chips/filter-chips.component.ts

@@ -29,51 +29,16 @@ export class FilterChipsComponent {
   });
 
   filterOptions = computed(() => {
-    // [RNi]: TODO check this with paging 5 for filter options and remove comment
-
-    // return this.filters()
-    //   .filter((filter) => filter.key && filter.options)
-    //   .map((filter) => ({
-    //     key: filter.key,
-    //     options: filter.options!.map((opt) => ({
-    //       id: String(opt.value || ''),
-    //       value: String(opt.value || ''),
-    //       label: opt.label,
-    //     })),
-    //   }));
-
-    const filtersData = this.filters();
-    const cachedOptions = this.filterOptionsCache();
-    const options: Record<string, { id: string; value: string; label: string }[]> = {};
-
-    filtersData.forEach((filter) => {
-      if (filter.key && filter.options) {
-        options[filter.key] = filter.options.map((opt) => ({
+    return this.filters()
+      .filter((filter) => filter.key && filter.options)
+      .map((filter) => ({
+        key: filter.key,
+        options: filter.options!.map((opt) => ({
           id: String(opt.value || ''),
           value: String(opt.value || ''),
           label: opt.label,
-        }));
-      }
-    });
-
-    Object.entries(cachedOptions).forEach(([filterKey, cachedOpts]) => {
-      if (cachedOpts && cachedOpts.length > 0) {
-        const existingOptions = options[filterKey] || [];
-        const existingValues = new Set(existingOptions.map((opt) => opt.value));
-
-        const newCachedOptions = cachedOpts
-          .filter((opt) => !existingValues.has(String(opt.value || '')))
-          .map((opt) => ({
-            id: String(opt.value || ''),
-            value: String(opt.value || ''),
-            label: opt.label,
-          }));
-
-        options[filterKey] = [...newCachedOptions, ...existingOptions];
-      }
-    });
-
-    return options;
+        })),
+      }));
   });
 
   chips = computed(() => {
@@ -85,8 +50,7 @@ export class FilterChipsComponent {
       .filter(([, value]) => value !== null && value !== '')
       .map(([key, value]) => {
         const filterLabel = labels.find((l) => l.key === key)?.label || key;
-        //const filterOptionsList = options.find((o) => o.key === key)?.options || [];
-        const filterOptionsList = options[key] || [];
+        const filterOptionsList = options.find((o) => o.key === key)?.options || [];
         const option = filterOptionsList.find((opt) => opt.value === value || opt.id === value);
         const displayValue = option?.label || value || '';
 

src/app/shared/components/generic-filter/generic-filter.component.html

@@ -1,15 +1,14 @@
 <div class="content-body filter dropdown-filter pb-4 z-5">
   @if (isLoading()) {
     <div class="flex justify-content-center align-items-center p-4">
-      <osf-loading-spinner></osf-loading-spinner>
+      <osf-loading-spinner />
     </div>
   } @else {
     <div class="relative">
       <p-select
         [id]="filterType()"
         [options]="filterOptions()"
         optionLabel="label"
-        optionValue="value"
         [ngModel]="selectedValue()"
         [placeholder]="currentSelectedOption() ? currentSelectedOption()?.label : placeholder()"
         styleClass="w-full"
@@ -22,24 +21,16 @@
         [lazy]="true"
         scrollHeight="200px"
         [autoOptionFocus]="false"
-        [loading]="isLoading()"
+        [loading]="isPaginationLoading() || isSearchLoading()"
         (onLazyLoad)="loadMoreItems($event)"
         (onChange)="onValueChange($event)"
         (onFilter)="onFilterChange($event)"
         [showClear]="!!selectedValue()"
-      ></p-select>
-
-      @if (isPaginationLoading()) {
-        <div class="absolute top-1 right-8 pointer-events-none">
-          <osf-loading-spinner />
-        </div>
-      }
-
-      @if (isSearchLoading()) {
-        <div class="absolute top-1 right-14 pointer-events-none">
-          <osf-loading-spinner />
-        </div>
-      }
+      >
+        <ng-template #item let-item>
+          <p class="text-base">{{ item.label }} ({{ item.cardSearchResultCount }})</p>
+        </ng-template>
+      </p-select>
     </div>
   }
 </div>

src/app/shared/components/generic-filter/generic-filter.component.ts

@@ -16,7 +16,7 @@ import {
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 
-import { SelectOption } from '@shared/models';
+import { FilterOption } from '@shared/models';
 
 import { LoadingSpinnerComponent } from '../loading-spinner/loading-spinner.component';
 
@@ -29,8 +29,8 @@ import { LoadingSpinnerComponent } from '../loading-spinner/loading-spinner.comp
 })
 export class GenericFilterComponent {
   private destroyRef = inject(DestroyRef);
-  options = input<SelectOption[]>([]);
-  searchResults = input<SelectOption[]>([]);
+  options = input<FilterOption[]>([]);
+  searchResults = input<FilterOption[]>([]);
   isLoading = input<boolean>(false);
   isPaginationLoading = input<boolean>(false);
   isSearchLoading = input<boolean>(false);
@@ -42,12 +42,12 @@ export class GenericFilterComponent {
   searchTextChanged = output<string>();
   loadMoreOptions = output<void>();
 
-  currentSelectedOption = signal<SelectOption | null>(null);
+  currentSelectedOption = signal<FilterOption | null>(null);
   private searchSubject = new Subject<string>();
   private currentSearchText = signal<string>('');
-  private searchResultOptions = signal<SelectOption[]>([]);
+  private searchResultOptions = signal<FilterOption[]>([]);
   private isActivelySearching = signal<boolean>(false);
-  private stableOptionsArray: SelectOption[] = [];
+  private stableOptionsArray: FilterOption[] = [];
 
   filterOptions = computed(() => {
     const searchResults = this.searchResultOptions();
@@ -59,7 +59,7 @@ export class GenericFilterComponent {
     }
 
     const baseOptions = this.formatOptions(parentOptions);
-    let newOptions: SelectOption[];
+    let newOptions: FilterOption[];
 
     if (searchResults.length > 0) {
       const searchFormatted = this.formatOptions(searchResults);
@@ -74,13 +74,13 @@ export class GenericFilterComponent {
     return this.stableOptionsArray;
   });
 
-  private formatOptions(options: SelectOption[]): SelectOption[] {
+  private formatOptions(options: FilterOption[]): FilterOption[] {
     if (options.length > 0) {
       if (this.filterType() === 'dateCreated') {
         return options
           .filter((option) => option?.label)
-          .sort((a, b) => b.label.localeCompare(a.label))
           .map((option) => ({
+            ...option,
             label: option.label || '',
             value: option.label || '',
           }));
@@ -89,6 +89,7 @@ export class GenericFilterComponent {
           .filter((option) => option?.label)
           .sort((a, b) => a.label.localeCompare(b.label))
           .map((option) => ({
+            ...option,
             label: option.label || '',
             value: option.value || '',
           }));
@@ -97,7 +98,7 @@ export class GenericFilterComponent {
     return [];
   }
 
-  private arraysEqual(a: SelectOption[], b: SelectOption[]): boolean {
+  private arraysEqual(a: FilterOption[], b: FilterOption[]): boolean {
     if (a.length !== b.length) return false;
     for (let i = 0; i < a.length; i++) {
       if (a[i].value !== b[i].value || a[i].label !== b[i].label) {
@@ -107,7 +108,7 @@ export class GenericFilterComponent {
     return true;
   }
 
-  private updateStableArray(newOptions: SelectOption[]): void {
+  private updateStableArray(newOptions: FilterOption[]): void {
     if (this.arraysEqual(this.stableOptionsArray, newOptions)) {
       return;
     }
@@ -163,10 +164,6 @@ export class GenericFilterComponent {
     }
   }
 
-  trackByOption(index: number, option: SelectOption): string {
-    return option.value?.toString() || index.toString();
-  }
-
   onValueChange(event: SelectChangeEvent): void {
     const options = this.filterOptions();
     const selectedOption = event.value ? options.find((opt) => opt.value === event.value) : null;

src/app/shared/components/global-search/global-search.component.html

@@ -11,6 +11,7 @@
 
 <osf-search-results-container
   [provider]="provider()"
+  [filters]="filters()"
   [tabOptions]="resourceTabOptions()"
   [resources]="resources()"
   [areResourcesLoading]="areResourcesLoading()"

src/app/shared/components/resource-card/components/file-secondary-metadata/file-secondary-metadata.component.html

@@ -10,7 +10,9 @@
     <p>
       {{ 'resourceCard.labels.funder' | translate }}
       @for (funder of nodeFunders.slice(0, limit); track $index) {
-        <a class="font-bold" [href]="funder.absoluteUrl" target="_blank">{{ funder.name }}{{ $last ? '' : ', ' }}</a>
+        <a class="font-bold" [href]="funder.absoluteUrl" target="_blank" rel="noopener noreferrer"
+          >{{ funder.name }}{{ $last ? '' : ', ' }}</a
+        >
       }
       @if (nodeFunders.length > limit) {
         <span>{{ 'resourceCard.andCountMore' | translate: { count: nodeFunders.length - limit } }} </span>
@@ -26,22 +28,26 @@
   @if (nodeLicense) {
     <p>
       {{ 'resourceCard.labels.license' | translate }}
-      <a class="font-bold" [attr.href]="nodeLicense!.absoluteUrl || null">{{ nodeLicense!.name }}</a>
+      <a class="font-bold" [attr.href]="nodeLicense!.absoluteUrl || null" target="_blank" rel="noopener noreferrer">{{
+        nodeLicense!.name
+      }}</a>
     </p>
   }
 
   @if (resourceValue.absoluteUrl) {
     <p>
       {{ 'resourceCard.labels.url' | translate }}
-      <a class="font-bold" [href]="resourceValue.absoluteUrl">{{ resourceValue.absoluteUrl }}</a>
+      <a class="font-bold" [href]="resourceValue.absoluteUrl" target="_blank" rel="noopener noreferrer">{{
+        resourceValue.absoluteUrl
+      }}</a>
     </p>
   }
 
   @if (resourceValue.doi.length > 0) {
     <p>
       {{ 'resourceCard.labels.doi' | translate }}
       @for (doi of resourceValue.doi.slice(0, limit); track $index) {
-        <a class="font-bold" [href]="doi" target="_blank">{{ doi }}{{ $last ? '' : ', ' }}</a>
+        <a class="font-bold" [href]="doi" target="_blank" rel="noopener noreferrer">{{ doi }}{{ $last ? '' : ', ' }}</a>
       }
       @if (resourceValue.doi.length > limit) {
         <span>{{ 'resourceCard.andCountMore' | translate: { count: resourceValue.doi.length - limit } }} </span>

src/app/shared/components/resource-card/components/preprint-secondary-metadata/preprint-secondary-metadata.component.html

@@ -7,14 +7,16 @@
   @if (resourceValue.provider) {
     <p>
       {{ 'resourceCard.labels.provider' | translate }}
-      <a class="font-bold" [href]="resourceValue.provider!.absoluteUrl">{{ resourceValue.provider!.name }}</a>
+      <a class="font-bold" [href]="resourceValue.provider!.absoluteUrl" target="_blank" rel="noopener noreferrer">{{
+        resourceValue.provider!.name
+      }}</a>
     </p>
   }
 
   @if (resourceValue.hasDataResource) {
     <p>
       {{ 'resourceCard.labels.associatedData' | translate }}
-      <a class="font-bold" [href]="resourceValue.hasDataResource">
+      <a class="font-bold" [href]="resourceValue.hasDataResource" target="_blank" rel="noopener noreferrer">
         {{ resourceValue.hasDataResource }}
       </a>
     </p>
@@ -23,7 +25,12 @@
   @if (resourceValue.hasPreregisteredAnalysisPlan) {
     <p>
       {{ 'resourceCard.labels.associatedAnalysisPlan' | translate }}
-      <a class="font-bold" [href]="resourceValue.hasPreregisteredAnalysisPlan">
+      <a
+        class="font-bold"
+        [href]="resourceValue.hasPreregisteredAnalysisPlan"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
         {{ resourceValue.hasPreregisteredAnalysisPlan }}
       </a>
     </p>
@@ -32,7 +39,7 @@
   @if (resourceValue.hasPreregisteredStudyDesign) {
     <p>
       {{ 'resourceCard.labels.associatedStudyDesign' | translate }}
-      <a class="font-bold" [href]="resourceValue.hasPreregisteredStudyDesign">
+      <a class="font-bold" [href]="resourceValue.hasPreregisteredStudyDesign" target="_blank" rel="noopener noreferrer">
         {{ resourceValue.hasPreregisteredStudyDesign }}
       </a>
     </p>
@@ -53,16 +60,22 @@
   @if (resourceValue.license?.absoluteUrl) {
     <p>
       {{ 'resourceCard.labels.license' | translate }}
-      <a class="font-bold" [attr.href]="resourceValue.license!.absoluteUrl || null">{{
-        resourceValue.license!.name
-      }}</a>
+      <a
+        class="font-bold"
+        [attr.href]="resourceValue.license!.absoluteUrl || null"
+        target="_blank"
+        rel="noopener noreferrer"
+        >{{ resourceValue.license!.name }}</a
+      >
     </p>
   }
 
   @if (resourceValue.absoluteUrl) {
     <p>
       {{ 'resourceCard.labels.url' | translate }}
-      <a class="font-bold" [href]="resourceValue.absoluteUrl">{{ resourceValue.absoluteUrl }}</a>
+      <a class="font-bold" [href]="resourceValue.absoluteUrl" target="_blank" rel="noopener noreferrer">{{
+        resourceValue.absoluteUrl
+      }}</a>
     </p>
   }
 
@@ -71,7 +84,7 @@
     <p>
       {{ 'resourceCard.labels.doi' | translate }}
       @for (doi of resourceValue.doi.slice(0, limit); track $index) {
-        <a class="font-bold" [href]="doi" target="_blank">{{ doi }}{{ $last ? '' : ', ' }}</a>
+        <a class="font-bold" [href]="doi" target="_blank" rel="noopener noreferrer">{{ doi }}{{ $last ? '' : ', ' }}</a>
       }
       @if (resourceValue.doi.length > limit) {
         <span>{{ 'resourceCard.andCountMore' | translate: { count: resourceValue.doi.length - limit } }} </span>