SF-3670 Fix slowdown in the Biblical Terms tab (#3616)

Author: pmachapman

src/RealtimeServer/scriptureforge/models/biblical-term.ts

@@ -1,8 +1,16 @@
 import { PROJECT_DATA_INDEX_PATHS, ProjectData } from '../../common/models/project-data';
+import { obj } from '../../common/utils/obj-path';
 import { BiblicalTermDefinition } from './biblical-term-definition';
 
 export const BIBLICAL_TERM_COLLECTION = 'biblical_terms';
-export const BIBLICAL_TERM_INDEX_PATHS = PROJECT_DATA_INDEX_PATHS;
+export const BIBLICAL_TERM_INDEX_PATHS = [
+  ...PROJECT_DATA_INDEX_PATHS,
+  // Index for SFProjectService.queryBiblicalTerms()
+  {
+    [obj<BiblicalTerm>().pathStr(n => n.projectRef)]: 1,
+    [obj<BiblicalTerm>().pathStr(n => n.references)]: 1
+  }
+];
 
 export function getBiblicalTermDocId(projectId: string, dataId: string): string {
   return `${projectId}:${dataId}`;

src/SIL.XForge.Scripture/ClientApp/src/app/core/sf-project.service.ts

@@ -1,4 +1,5 @@
 import { DestroyRef, Injectable } from '@angular/core';
+import { VerseRef } from '@sillsdev/scripture';
 import { Operation } from 'realtime-server/lib/esm/common/models/project-rights';
 import { obj } from 'realtime-server/lib/esm/common/utils/obj-path';
 import { AudioTiming } from 'realtime-server/lib/esm/scriptureforge/models/audio-timing';
@@ -178,9 +179,21 @@ export class SFProjectService extends ProjectService<SFProject, SFProjectDoc> {
     return this.realtimeService.subscribeQuery(TextAudioDoc.COLLECTION, queryParams, destroyRef);
   }
 
-  queryBiblicalTerms(sfProjectId: string, destroyRef: DestroyRef): Promise<RealtimeQuery<BiblicalTermDoc>> {
+  queryBiblicalTerms(
+    sfProjectId: string,
+    bookNum: number,
+    destroyRef: DestroyRef
+  ): Promise<RealtimeQuery<BiblicalTermDoc>> {
+    const bookStart = VerseRef.getBBBCCCVVV(bookNum, 0, 0);
+    const bookEnd = VerseRef.getBBBCCCVVV(bookNum + 1, 0, 0);
     const queryParams: QueryParameters = {
-      [obj<BiblicalTerm>().pathStr(t => t.projectRef)]: sfProjectId
+      [obj<BiblicalTerm>().pathStr(t => t.projectRef)]: sfProjectId,
+      [obj<BiblicalTerm>().pathStr(q => q.references)]: {
+        $elemMatch: {
+          $gte: bookStart,
+          $lt: bookEnd
+        }
+      }
     };
     return this.realtimeService.subscribeQuery(BiblicalTermDoc.COLLECTION, queryParams, destroyRef);
   }

src/SIL.XForge.Scripture/ClientApp/src/app/translate/biblical-terms/biblical-terms.component.spec.ts

@@ -437,6 +437,8 @@ describe('BiblicalTermsComponent', () => {
     env.setupProjectData('en');
     env.onlineStatus = false;
     env.wait();
+    env.component.biblicalTermsLoaded = false;
+    env.wait();
     expect(env.offlineMessage.length).toBe(1);
   }));
 
@@ -483,7 +485,7 @@ class TestEnvironment {
 
   constructor(projectId: string | undefined, bookNum: number, chapter: number, verse: string = '0') {
     when(mockedI18nService.locale$).thenReturn(this.locale$);
-    when(mockedProjectService.queryBiblicalTerms(anything(), anything())).thenCall(sfProjectId => {
+    when(mockedProjectService.queryBiblicalTerms(anything(), anything(), anything())).thenCall(sfProjectId => {
       const parameters: QueryParameters = {
         [obj<BiblicalTerm>().pathStr(t => t.projectRef)]: sfProjectId
       };

src/SIL.XForge.Scripture/ClientApp/src/app/translate/biblical-terms/biblical-terms.component.ts

@@ -37,8 +37,8 @@ import {
 } from 'realtime-server/lib/esm/scriptureforge/models/note-thread';
 import { SF_PROJECT_RIGHTS, SFProjectDomain } from 'realtime-server/lib/esm/scriptureforge/models/sf-project-rights';
 import { fromVerseRef } from 'realtime-server/lib/esm/scriptureforge/models/verse-ref-data';
-import { BehaviorSubject, combineLatest, firstValueFrom, merge, Observable, Subscription } from 'rxjs';
-import { filter } from 'rxjs/operators';
+import { BehaviorSubject, combineLatest, defer, firstValueFrom, from, merge, Observable, Subscription } from 'rxjs';
+import { filter, switchMap } from 'rxjs/operators';
 import { DataLoadingComponent } from 'xforge-common/data-loading-component';
 import { DialogService } from 'xforge-common/dialog.service';
 import { I18nService } from 'xforge-common/i18n.service';
@@ -354,7 +354,11 @@ export class BiblicalTermsComponent extends DataLoadingComponent implements OnDe
         // Subscribe to any project, book, chapter, verse, locale, biblical term, or note changes
         this.loadingStarted();
         this.categoriesLoading = true;
-        const biblicalTermsAndNotesChanges$: Observable<any> = await this.getBiblicalTermsAndNotesChanges(projectId);
+        const biblicalTermsNotesChanges$: Observable<any> = await this.getBiblicalTermsNotesChanges(projectId);
+        const biblicalTermsChanges$: Observable<any> = this.bookNum$.pipe(
+          filter(bookNum => bookNum !== 0),
+          switchMap(bookNum => this.getBiblicalTermsChanges(projectId, bookNum))
+        );
 
         this.biblicalTermSub?.unsubscribe();
 
@@ -363,18 +367,21 @@ export class BiblicalTermsComponent extends DataLoadingComponent implements OnDe
           this.chapter$,
           this.verse$,
           this.i18n.locale$,
-          biblicalTermsAndNotesChanges$
+          biblicalTermsChanges$,
+          biblicalTermsNotesChanges$
         ])
           .pipe(
             filter(([bookNum, chapter, verse]) => bookNum !== 0 && chapter !== 0 && verse !== null),
             quietTakeUntilDestroyed(this.destroyRef)
           )
           .subscribe(([bookNum, chapter, verse]) => {
             this.filterBiblicalTerms(bookNum, chapter, verse);
+            this.biblicalTermsLoaded = true;
             this.categoriesLoading = false;
+            this.loadingFinished();
           });
 
-        if (!this.appOnline && biblicalTermsAndNotesChanges$.pipe(filter(val => val == null))) {
+        if (!this.appOnline && !this.biblicalTermsLoaded) {
           this.loadingFinished();
         } else {
           this.biblicalTermsLoaded = true;
@@ -533,23 +540,27 @@ export class BiblicalTermsComponent extends DataLoadingComponent implements OnDe
     this.loadingFinished();
   }
 
-  private async getBiblicalTermsAndNotesChanges(sfProjectId: string): Promise<Observable<any>> {
-    // Clean up existing queries
-    this.biblicalTermQuery?.dispose();
+  private getBiblicalTermsChanges(sfProjectId: string, bookNum: number): Observable<any> {
+    return defer(() => {
+      this.biblicalTermQuery?.dispose();
+      return from(this.projectService.queryBiblicalTerms(sfProjectId, bookNum, this.destroyRef)).pipe(
+        switchMap(query => {
+          this.biblicalTermQuery = query;
+          return merge(query.ready$.pipe(filter(isReady => isReady)), query.remoteChanges$, query.remoteDocChanges$);
+        })
+      );
+    });
+  }
+
+  private async getBiblicalTermsNotesChanges(sfProjectId: string): Promise<Observable<any>> {
+    // Clean up existing query
     this.noteThreadQuery?.dispose();
 
-    // Get the Biblical Terms and Notes
-    [this.biblicalTermQuery, this.noteThreadQuery] = await Promise.all([
-      this.projectService.queryBiblicalTerms(sfProjectId, this.destroyRef),
-      this.projectService.queryBiblicalTermNoteThreads(sfProjectId, this.destroyRef)
-    ]);
+    // Get the Biblical Terms Notes
+    this.noteThreadQuery = await this.projectService.queryBiblicalTermNoteThreads(sfProjectId, this.destroyRef);
 
     // Return a merged observable to monitor changes
-
     return merge(
-      this.biblicalTermQuery.ready$.pipe(filter(isReady => isReady)),
-      this.biblicalTermQuery.remoteChanges$,
-      this.biblicalTermQuery.remoteDocChanges$,
       this.noteThreadQuery.localChanges$,
       this.noteThreadQuery.ready$.pipe(filter(isReady => isReady)),
       this.noteThreadQuery.remoteChanges$,

src/SIL.XForge.Scripture/ClientApp/src/app/translate/editor/editor.component.spec.ts

@@ -4921,7 +4921,7 @@ class TestEnvironment {
         noopDestroyRef
       )
     );
-    when(mockedSFProjectService.queryBiblicalTerms(anything(), anything())).thenCall(id =>
+    when(mockedSFProjectService.queryBiblicalTerms(anything(), anything(), anything())).thenCall(id =>
       this.realtimeService.subscribeQuery(
         BiblicalTermDoc.COLLECTION,
         {