Added ability to collapse similar books into ranges

Also displaying the display name of the language codes for the training table header (assuming it's retrievable).
sillsdev · Oct 14, 2024 · a4ad7d2 · a4ad7d2
1 parent 981256b
commit a4ad7d2
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 9 deletions.
diff --git a/...p/translate/draft-generation/draft-generation-steps/draft-generation-steps.component.html b/...p/translate/draft-generation/draft-generation-steps/draft-generation-steps.component.html
@@ -139,17 +139,23 @@ <h1 class="mat-headline-4">{{ t("confirm") }}</h1>
         <h2>Training the language model</h2>
         <mat-card class="confirm-section mat-elevation-z2">
           <span class="explanation">{{ t("confirm_training") }}</span>
-          <table mat-table class="confirm-training" [dataSource]="userSelectedTrainingBooks">
+          <table mat-table class="confirm-training" [dataSource]="selectedTrainingBooksCollapsed()">
             <ng-container matColumnDef="book">
               <th mat-header-cell *matHeaderCellDef></th>
-              <td mat-cell *matCellDef="let element" class="bookName">{{ element.name }}</td>
+              <td mat-cell *matCellDef="let element" class="bookName">
+                <span class="confirm-book">{{ element.ranges.join(", ") }}</span>
+              </td>
             </ng-container>
             <ng-container matColumnDef="source">
-              <th mat-header-cell *matHeaderCellDef>{{ trainingSources[0].writingSystem.tag }}</th>
+              <th mat-header-cell *matHeaderCellDef>
+                {{ this.i18n.getLanguageDisplayName(trainingSources[0].writingSystem.tag) }}
+              </th>
               <td mat-cell *matCellDef="let element">{{ element.source }}</td>
             </ng-container>
             <ng-container matColumnDef="target">
-              <th mat-header-cell *matHeaderCellDef>{{ trainingTargets[0].writingSystem.tag }}</th>
+              <th mat-header-cell *matHeaderCellDef>
+                {{ this.i18n.getLanguageDisplayName(trainingTargets[0].writingSystem.tag) }}
+              </th>
               <td mat-cell *matCellDef="let element">{{ element.target }}</td>
             </ng-container>
             <tr mat-header-row *matHeaderRowDef="['book', 'source', 'target']"></tr>
@@ -165,7 +171,7 @@ <h2>
           <div class="confirm-translate">
             <div class="confirm-translate-books">
               @for (book of userSelectedTranslateBooks; track book) {
-                <span class="readonly-book">{{ book.name }}</span>
+                <span class="confirm-book">{{ book.name }}</span>
               }
             </div>
           </div>

diff --git a/...p/translate/draft-generation/draft-generation-steps/draft-generation-steps.component.scss b/...p/translate/draft-generation/draft-generation-steps/draft-generation-steps.component.scss
@@ -104,7 +104,7 @@ app-notice {
   padding-inline-start: 16px;
 }
 
-.readonly-book {
+.confirm-book {
   padding-block: 4px;
   font-weight: 500;
 }
diff --git a/...app/translate/draft-generation/draft-generation-steps/draft-generation-steps.component.ts b/...app/translate/draft-generation/draft-generation-steps/draft-generation-steps.component.ts
@@ -10,6 +10,7 @@ import { Subscription, merge } from 'rxjs';
 import { filter, tap } from 'rxjs/operators';
 import { ActivatedProjectService } from 'xforge-common/activated-project.service';
 import { FeatureFlagService } from 'xforge-common/feature-flags/feature-flag.service';
+import { I18nService } from 'xforge-common/i18n.service';
 import { RealtimeQuery } from 'xforge-common/models/realtime-query';
 import { SubscriptionDisposable } from 'xforge-common/subscription-disposable';
 import { UICommonModule } from 'xforge-common/ui-common.module';
@@ -38,7 +39,13 @@ export interface Book {
   number: number;
 }
 
-export interface TrainingBook extends Book {
+export interface TrainingBook extends Book, TrainingPair {}
+
+export interface TrainingGroup extends TrainingPair {
+  ranges: string[];
+}
+
+interface TrainingPair {
   source: string;
   target: string;
 }
@@ -102,10 +109,11 @@ export class DraftGenerationStepsComponent extends SubscriptionDisposable implem
   constructor(
     private readonly activatedProject: ActivatedProjectService,
     private readonly draftSourcesService: DraftSourcesService,
-    readonly featureFlags: FeatureFlagService,
+    protected readonly featureFlags: FeatureFlagService,
     private readonly nllbLanguageService: NllbLanguageService,
     private readonly trainingDataService: TrainingDataService,
-    private readonly progressService: ProgressService
+    private readonly progressService: ProgressService,
+    protected readonly i18n: I18nService
   ) {
     super();
     const project = activatedProject.projectDoc!.data!;
@@ -249,6 +257,53 @@ export class DraftGenerationStepsComponent extends SubscriptionDisposable implem
     );
   }
 
+  selectedTrainingBooksCollapsed(): TrainingGroup[] {
+    const continguousGroups: TrainingGroup[] = [];
+    let currentGroup: TrainingBook[] = [];
+    for (const book of this.userSelectedTrainingBooks) {
+      const isBookConsecutiveAndMatching =
+        book.source === currentGroup[0]?.source &&
+        book.target === currentGroup[0]?.target &&
+        book.number === currentGroup[currentGroup.length - 1]?.number + 1;
+      if (currentGroup.length > 0 && !isBookConsecutiveAndMatching) {
+        //process and reset current group
+        addGroup(currentGroup);
+        currentGroup.length = 0;
+      }
+      //add book to current group
+      currentGroup.push(book);
+    }
+
+    //add last group
+    if (currentGroup.length > 0) {
+      addGroup(currentGroup);
+    }
+
+    const groupsCollapsed: TrainingGroup[] = [];
+    for (const group of continguousGroups) {
+      const matchIndex = groupsCollapsed.findIndex(g => g.source === group.source && g.target === group.target);
+      if (matchIndex === -1) {
+        //make a new group for this source/target
+        groupsCollapsed.push(group);
+      } else {
+        //append the current group onto the matching group
+        groupsCollapsed[matchIndex].ranges.push(group.ranges[0]);
+      }
+    }
+
+    return groupsCollapsed;
+
+    function addGroup(group: TrainingBook[]): void {
+      let range;
+      if (group.length === 1) {
+        range = Canon.bookNumberToId(group[0].number);
+      } else {
+        range = Canon.bookNumberToId(group[0].number) + '-' + Canon.bookNumberToId(group[group.length - 1].number);
+      }
+      continguousGroups.push({ ranges: [range], source: group[0].source, target: group[0].target });
+    }
+  }
+
   onTrainingBookSelect(selectedBooks: number[]): void {
     this.userSelectedTrainingBooks = selectedBooks.map((bookNum: number) => ({
       number: bookNum,