fix(Unit Library): Thumbnail flicker and filter issues (#2163)

hirokiterashima · Aaron-Detre · web-flow · commit 34d7a1c94c53 · 2025-04-30T18:34:17.000-07:00
Co-authored-by: Aaron Detre &lt;aarondetre@gmail.com&gt;
diff --git a/src/app/domain/project.ts b/src/app/domain/project.ts
@@ -18,7 +18,7 @@ export class Project {
   run: Run;
   sharedOwners: User[] = [];
   selected: boolean;
-  tags: Tag[];
+  tags: Tag[] = [];
   thumbStyle: any;
   uri: String;
   wiseVersion: number;
@@ -95,11 +95,11 @@ export class Project {
   }
 
   hasTagWithText(tagText: string): boolean {
-    return this.tags?.some((tag: Tag) => tag.text === tagText);
+    return this.tags.some((tag: Tag) => tag.text === tagText);
   }
 
   hasTag(tag: Tag): boolean {
-    return this.tags?.some((projectTag: Tag) => projectTag.id === tag.id);
+    return this.tags.some((projectTag: Tag) => projectTag.id === tag.id);
   }
 
   updateArchivedStatus(archived: boolean, tag: Tag): void {
diff --git a/src/app/modules/library/community-library/community-library.component.spec.ts b/src/app/modules/library/community-library/community-library.component.spec.ts
@@ -13,9 +13,7 @@ export class MockLibraryService {
   communityLibraryProjectsSource$ = fakeAsyncResponse([]);
   filterValuesUpdated$ = of();
   numberOfPublicProjectsVisible = new BehaviorSubject<number>(0);
-  getFilterValues() {
-    return new ProjectFilterValues();
-  }
+  filterValues = new ProjectFilterValues();
 }
 
 describe('CommunityLibraryComponent', () => {
diff --git a/src/app/modules/library/library-filters/library-filters.component.html b/src/app/modules/library/library-filters/library-filters.component.html
@@ -1,7 +1,7 @@
 <div class="library-filter">
   <div class="flex flex-row gap-1">
     <div class="flex-auto max-w-full">
-      <app-search-bar [value]="filterValues.searchValue" (update)="searchUpdated($event)" />
+      <app-search-bar [value]="getFilterValues().searchValue" (update)="searchUpdated($event)" />
     </div>
     <button
       mat-icon-button
@@ -15,7 +15,7 @@
         matBadgeDescription="Filters applied"
         matBadgeOverlap="true"
         matBadgeSize="small"
-        [matBadgeHidden]="!filterValues.hasFilters()"
+        [matBadgeHidden]="!getFilterValues().hasFilters()"
         aria-hidden="false"
         >filter_list</mat-icon
       >
@@ -25,7 +25,7 @@
 <div class="library-filters" [class.expand]="showFilters" [class.isSplitScreen]="isSplitScreen">
   <div class="notice flex justify-between">
     <h3 class="mat-subtitle-2" i18n>Filters</h3>
-    @if (filterValues.hasFilters()) {
+    @if (getFilterValues().hasFilters()) {
       <a href="#" (click)="!!clearFilterValues()" i18n>Clear all</a>
     }
   </div>
@@ -43,7 +43,7 @@ <h3 class="mat-subtitle-2" i18n>Filters</h3>
           [options]="unitTypeOptions"
           i18n-placeholderText
           placeholderText="Type"
-          [value]="filterValues.unitTypeValue"
+          [value]="getFilterValues().unitTypeValue"
           (update)="filterUpdated($event, 'unitType')"
           [valueProp]="'name'"
           [viewValueProp]="'name'"
@@ -61,7 +61,7 @@ <h3 class="mat-subtitle-2" i18n>Filters</h3>
           [options]="disciplineOptions"
           i18n-placeholderText
           placeholderText="Discipline"
-          [value]="filterValues.disciplineValue"
+          [value]="getFilterValues().disciplineValue"
           (update)="filterUpdated($event, 'discipline')"
           [valueProp]="'id'"
           [viewValueProp]="'name'"
@@ -79,7 +79,7 @@ <h3 class="mat-subtitle-2" i18n>Filters</h3>
           [options]="gradeLevelOptions"
           i18n-placeholderText
           placeholderText="Grade Level"
-          [value]="filterValues.gradeLevelValue"
+          [value]="getFilterValues().gradeLevelValue"
           (update)="filterUpdated($event, 'gradeLevel')"
           valueProp="grade"
           viewValueProp="grade"
@@ -98,7 +98,7 @@ <h3 class="mat-subtitle-2" i18n>Filters</h3>
           [possibleLabels]="possibleStandardLabels"
           i18n-placeholderText
           placeholderText="Standards Addressed"
-          [value]="filterValues.standardValue"
+          [value]="getFilterValues().standardValue"
           (update)="filterUpdated($event, 'standard')"
           [valueProp]="'id'"
           [viewValueProp]="'name'"
@@ -115,7 +115,7 @@ <h3 class="mat-subtitle-2" i18n>Filters</h3>
           [options]="featureOptions"
           i18n-placeholderText
           placeholderText="Features"
-          [value]="filterValues.featureValue"
+          [value]="getFilterValues().featureValue"
           (update)="filterUpdated($event, 'feature')"
           valueProp="name"
           viewValueProp="name"
diff --git a/src/app/modules/library/library-filters/library-filters.component.spec.ts b/src/app/modules/library/library-filters/library-filters.component.spec.ts
@@ -23,7 +23,7 @@ describe('LibraryFiltersComponent', () => {
           sharedLibraryProjectsSource$: of([] as LibraryProject[]),
           personalLibraryProjectsSource$: of([] as LibraryProject[]),
           filterValuesUpdated$: of(),
-          getFilterValues: () => new ProjectFilterValues()
+          filterValues: new ProjectFilterValues()
         })
       ]
     });
diff --git a/src/app/modules/library/library-filters/library-filters.component.ts b/src/app/modules/library/library-filters/library-filters.component.ts
@@ -33,7 +33,6 @@ export class LibraryFiltersComponent {
   private communityProjects: LibraryProject[] = [];
   protected disciplineOptions: Discipline[] = [];
   protected featureOptions: Feature[] = [];
-  protected filterValues: ProjectFilterValues;
   protected gradeLevelOptions: GradeLevel[] = [];
   @Input() showAdvancedFilteringOptions: boolean = true;
   @Input() isSplitScreen: boolean = false;
@@ -52,7 +51,6 @@ export class LibraryFiltersComponent {
     private libraryService: LibraryService,
     private utilService: UtilService
   ) {
-    this.filterValues = this.libraryService.getFilterValues();
     libraryService.officialLibraryProjectsSource$.subscribe((projects: LibraryProject[]) => {
       this.libraryProjects = projects;
       this.populateFilterOptions();
@@ -145,37 +143,41 @@ export class LibraryFiltersComponent {
   }
 
   protected searchUpdated(value: string): void {
-    this.filterValues.searchValue = value.toLocaleLowerCase();
+    this.getFilterValues().searchValue = value.toLocaleLowerCase();
     this.emitFilterValues();
   }
 
   protected filterUpdated(value: any[], context: string = ''): void {
     switch (context) {
       case 'discipline':
-        this.filterValues.disciplineValue = value;
+        this.getFilterValues().disciplineValue = value;
         break;
       case 'gradeLevel':
-        this.filterValues.gradeLevelValue = value;
+        this.getFilterValues().gradeLevelValue = value;
         break;
       case 'standard':
-        this.filterValues.standardValue = value;
+        this.getFilterValues().standardValue = value;
         break;
       case 'feature':
-        this.filterValues.featureValue = value;
+        this.getFilterValues().featureValue = value;
         break;
       case 'unitType':
-        this.filterValues.unitTypeValue = value;
+        this.getFilterValues().unitTypeValue = value;
         break;
     }
     this.emitFilterValues();
   }
 
+  protected getFilterValues(): ProjectFilterValues {
+    return this.libraryService.filterValues;
+  }
+
   private emitFilterValues(): void {
     this.libraryService.filterValuesUpdated();
   }
 
   protected clearFilterValues(): void {
-    this.filterValues.clear();
+    this.getFilterValues().clear();
     this.emitFilterValues();
   }
 }
diff --git a/src/app/modules/library/library/library.component.ts b/src/app/modules/library/library/library.component.ts
@@ -1,15 +1,14 @@
 import { OnInit, QueryList, ViewChildren, Directive, Input } from '@angular/core';
-import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 import { LibraryService } from '../../../services/library.service';
 import { LibraryProject } from '../libraryProject';
 import { PageEvent, MatPaginator } from '@angular/material/paginator';
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { MatDialog } from '@angular/material/dialog';
+import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 
 @Directive()
 export abstract class LibraryComponent implements OnInit {
   protected filteredProjects: LibraryProject[] = [];
-  protected filterValues: ProjectFilterValues;
   protected highIndex: number = 0;
   protected lowIndex: number = 0;
   protected pageSizeOptions: number[] = [12, 24, 48, 96];
@@ -26,14 +25,13 @@ export abstract class LibraryComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.filterValues = this.libraryService.getFilterValues();
     this.subscriptions.add(
       this.libraryService.filterValuesUpdated$.subscribe(() => this.filterUpdated())
     );
   }
 
   ngOnDestroy(): void {
-    this.filterValues.clear();
+    this.getFilterValues().clear();
     this.subscriptions.unsubscribe();
   }
 
@@ -65,7 +63,7 @@ export abstract class LibraryComponent implements OnInit {
   protected filterUpdated(): void {
     this.filteredProjects = this.projects
       .map((project) => {
-        project.visible = this.filterValues.matches(project);
+        project.visible = this.getFilterValues().matches(project);
         return project;
       })
       .filter((project) => project.visible)
@@ -97,4 +95,8 @@ export abstract class LibraryComponent implements OnInit {
   }
 
   protected abstract getDetailsComponent(): any;
+
+  private getFilterValues(): ProjectFilterValues {
+    return this.libraryService.filterValues;
+  }
 }
diff --git a/src/app/modules/library/official-library/official-library.component.spec.ts b/src/app/modules/library/official-library/official-library.component.spec.ts
@@ -16,9 +16,7 @@ export class MockLibraryService {
   implementationModelOptions: LibraryGroup[] = [];
   numberOfPublicProjectsVisible = new BehaviorSubject<number>(0);
   getOfficialLibraryProjects() {}
-  getFilterValues() {
-    return new ProjectFilterValues();
-  }
+  filterValues = new ProjectFilterValues();
 }
 
 describe('OfficialLibraryComponent', () => {
diff --git a/src/app/modules/library/personal-library/personal-library.component.spec.ts b/src/app/modules/library/personal-library/personal-library.component.spec.ts
@@ -12,7 +12,6 @@ import { PersonalLibraryHarness } from './personal-library.harness';
 import { ProjectTagService } from '../../../../assets/wise5/services/projectTagService';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 
 const archivedTag = { id: 1, text: 'archived', color: null };
 let archiveProjectService: ArchiveProjectService;
@@ -43,9 +42,6 @@ describe('PersonalLibraryComponent', () => {
   beforeEach(async () => {
     fixture = TestBed.createComponent(PersonalLibraryComponent);
     component = fixture.componentInstance;
-    spyOn(TestBed.inject(LibraryService), 'getFilterValues').and.returnValue(
-      new ProjectFilterValues()
-    );
     setUpFiveProjects();
     archiveProjectService = TestBed.inject(ArchiveProjectService);
     http = TestBed.inject(HttpClient);
diff --git a/src/app/modules/library/public-library/public-library.component.spec.ts b/src/app/modules/library/public-library/public-library.component.spec.ts
@@ -24,7 +24,7 @@ describe('PublicLibraryComponent', () => {
             { id: 1, name: 'P1' },
             { id: 3, name: 'P3' }
           ] as LibraryProject[]),
-          getFilterValues: () => new ProjectFilterValues()
+          filterValues: new ProjectFilterValues()
         })
       ]
     }).compileComponents();
diff --git a/src/app/modules/library/public-unit-type-selector/public-unit-type-selector.component.spec.ts b/src/app/modules/library/public-unit-type-selector/public-unit-type-selector.component.spec.ts
@@ -17,15 +17,16 @@ describe('PublicUnitTypeSelectorComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [PublicUnitTypeSelectorComponent],
-      providers: [MockProvider(LibraryService)]
+      providers: [
+        MockProvider(LibraryService, {
+          filterValues: new ProjectFilterValues()
+        })
+      ]
     }).compileComponents();
 
     fixture = TestBed.createComponent(PublicUnitTypeSelectorComponent);
     loader = TestbedHarnessEnvironment.loader(fixture);
     component = fixture.componentInstance;
-    spyOn(TestBed.inject(LibraryService), 'getFilterValues').and.returnValue({
-      publicUnitTypeValue: []
-    } as ProjectFilterValues);
     fixture.detectChanges();
     [checkbox1, checkbox2] = await loader.getAllHarnesses(MatCheckboxHarness);
   });
@@ -39,9 +40,7 @@ describe('PublicUnitTypeSelectorComponent', () => {
   it('should update filterValues and emit event when checkbox is clicked', async () => {
     const spy = spyOn(component.publicUnitTypeUpdatedEvent, 'emit');
     await checkbox1.check();
-    expect(TestBed.inject(LibraryService).getFilterValues().publicUnitTypeValue).toEqual([
-      'wiseTested'
-    ]);
+    expect(TestBed.inject(LibraryService).filterValues.publicUnitTypeValue).toEqual(['wiseTested']);
     expect(spy).toHaveBeenCalled();
   });
 
diff --git a/src/app/modules/library/public-unit-type-selector/public-unit-type-selector.component.ts b/src/app/modules/library/public-unit-type-selector/public-unit-type-selector.component.ts
@@ -39,7 +39,7 @@ export class PublicUnitTypeSelectorComponent {
   ) {}
 
   ngOnInit(): void {
-    this.filterValues = this.libraryService.getFilterValues();
+    this.filterValues = this.libraryService.filterValues;
   }
 
   protected updatePublicUnitType(): void {
diff --git a/src/app/modules/library/teacher-project-library/teacher-project-library.component.spec.ts b/src/app/modules/library/teacher-project-library/teacher-project-library.component.spec.ts
@@ -19,9 +19,7 @@ export class MockLibraryService {
   getCommunityLibraryProjects() {}
   getPersonalLibraryProjects() {}
   getSharedLibraryProjects() {}
-  getFilterValues() {
-    return new ProjectFilterValues();
-  }
+  filterValues = new ProjectFilterValues();
   initFilterValues() {}
 }
 
diff --git a/src/app/services/library.service.ts b/src/app/services/library.service.ts
@@ -11,7 +11,7 @@ import { Router } from '@angular/router';
 export class LibraryService {
   private libraryGroupsUrl = '/api/project/library';
   private communityProjectsUrl = '/api/project/community';
-  private filterValues: ProjectFilterValues = new ProjectFilterValues();
+  public filterValues: ProjectFilterValues = new ProjectFilterValues();
   private filterValuesUpdatedSource = new Subject<void>();
   public filterValuesUpdated$ = this.filterValuesUpdatedSource.asObservable();
   private personalProjectsUrl = '/api/project/personal';
@@ -25,9 +25,9 @@ export class LibraryService {
   public officialLibraryProjectsSource$ = this.officialLibraryProjectsSource.asObservable();
   private communityLibraryProjectsSource = new BehaviorSubject<LibraryProject[]>([]);
   public communityLibraryProjectsSource$ = this.communityLibraryProjectsSource.asObservable();
-  private personalLibraryProjectsSource = new BehaviorSubject<LibraryProject[]>([]);
+  private personalLibraryProjectsSource = new Subject<LibraryProject[]>();
   public personalLibraryProjectsSource$ = this.personalLibraryProjectsSource.asObservable();
-  private sharedLibraryProjectsSource = new BehaviorSubject<LibraryProject[]>([]);
+  private sharedLibraryProjectsSource = new Subject<LibraryProject[]>();
   public sharedLibraryProjectsSource$ = this.sharedLibraryProjectsSource.asObservable();
   private newProjectSource = new BehaviorSubject<LibraryProject>(null);
   public newProjectSource$ = this.newProjectSource.asObservable();
@@ -39,9 +39,7 @@ export class LibraryService {
   constructor(
     private http: HttpClient,
     private router: Router
-  ) {
-    this.router = router;
-  }
+  ) {}
 
   getOfficialLibraryProjects(): void {
     this.http.get<LibraryGroup[]>(this.libraryGroupsUrl).subscribe((libraryGroups) => {
@@ -161,10 +159,6 @@ export class LibraryService {
     this.filterValuesUpdatedSource.next();
   }
 
-  getFilterValues(): ProjectFilterValues {
-    return this.filterValues;
-  }
-
   initFilterValues(): void {
     this.filterValues = new ProjectFilterValues();
   }
diff --git a/src/messages.xlf b/src/messages.xlf

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ export class Project {`
`18`	`18`	`run: Run;`
`19`	`19`	`sharedOwners: User[] = [];`
`20`	`20`	`selected: boolean;`
`21`		`- tags: Tag[];`
	`21`	`+ tags: Tag[] = [];`
`22`	`22`	`thumbStyle: any;`
`23`	`23`	`uri: String;`
`24`	`24`	`wiseVersion: number;`
`@@ -95,11 +95,11 @@ export class Project {`
`95`	`95`	`}`
`96`	`96`
`97`	`97`	`hasTagWithText(tagText: string): boolean {`
`98`		`- return this.tags?.some((tag: Tag) => tag.text === tagText);`
	`98`	`+ return this.tags.some((tag: Tag) => tag.text === tagText);`
`99`	`99`	`}`
`100`	`100`
`101`	`101`	`hasTag(tag: Tag): boolean {`
`102`		`- return this.tags?.some((projectTag: Tag) => projectTag.id === tag.id);`
	`102`	`+ return this.tags.some((projectTag: Tag) => projectTag.id === tag.id);`
`103`	`103`	`}`
`104`	`104`
`105`	`105`	`updateArchivedStatus(archived: boolean, tag: Tag): void {`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ describe('LibraryFiltersComponent', () => {`
`23`	`23`	`sharedLibraryProjectsSource$: of([] as LibraryProject[]),`
`24`	`24`	`personalLibraryProjectsSource$: of([] as LibraryProject[]),`
`25`	`25`	`filterValuesUpdated$: of(),`
`26`		`- getFilterValues: () => new ProjectFilterValues()`
	`26`	`+ filterValues: new ProjectFilterValues()`
`27`	`27`	`})`
`28`	`28`	`]`
`29`	`29`	`});`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ describe('PublicLibraryComponent', () => {`
`24`	`24`	`{ id: 1, name: 'P1' },`
`25`	`25`	`{ id: 3, name: 'P3' }`
`26`	`26`	`] as LibraryProject[]),`
`27`		`- getFilterValues: () => new ProjectFilterValues()`
	`27`	`+ filterValues: new ProjectFilterValues()`
`28`	`28`	`})`
`29`	`29`	`]`
`30`	`30`	`}).compileComponents();`