Adding button back to mining component

Author: pnrobinson

src/app/hpoautocomplete/hpo-dialog-wrapper.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatDialogRef, MatDialogContent, MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { HpoAutocompleteComponent } from './hpoautocomplete.component';
 import { HpoTermDuplet } from '../models/hpo_term_dto';

src/app/hpoautocomplete/hpoautocomplete.component.ts

@@ -51,7 +51,7 @@ export class HpoAutocompleteComponent {
   selected = output<HpoMatch>();
 
   inputElement = viewChild<HTMLInputElement>('hpoInput');
-  control = new FormControl<string | HpoMatch>('', [hpoMatchValidator()]);
+  control = new FormControl<string | HpoMatch>('', [hpoMatchValidator()]);
 
   // A helper signal for the parent to check validity
   isValid = toSignal(this.control.statusChanges.pipe(map(status => status === 'VALID')), { initialValue: false });

src/app/hpomining/hpomining.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, inject, Output } from '@angular/core';
 import { ConfigService } from '../services/config.service';
 import { NotificationService } from '../services/notification.service';
 import { TextAnnotationDto } from '../models/text_annotation_dto';
@@ -12,16 +12,16 @@ import { CommonModule } from '@angular/common';
   imports: [CommonModule, FormsModule],
 })
 export class HpoMiningComponent {
+  private configService = inject(ConfigService);
+  private notificationService = inject(NotificationService);
+  
   pastedText = '';
 
   @Output() success = new EventEmitter<TextAnnotationDto[]>();
   @Output() error = new EventEmitter<string>();
   @Output() cancel = new EventEmitter<void>();
 
-  constructor(
-    private configService: ConfigService,
-    private notificationService: NotificationService
-  ) {}
+  
 
   async runTextMining(): Promise<void> {
     try {

src/app/hpominingverifier/hpominingverifier.component.ts

@@ -53,17 +53,12 @@ export class HpoMiningVerifierComponent implements OnInit {
     return ((this.currentIndex() + 1) / this.concepts().length) * 100;
   }
 
-  handleUpdate(newTerm: HpoTermDuplet): void {
+  handleUpdate(match: HpoMatch): void {
     const updated = [...this.concepts()];
     const index = this.currentIndex();
-    const newMatch: HpoMatch = {
-      id: newTerm.hpoId,
-      label: newTerm.hpoLabel,
-      matchedText: newTerm.hpoLabel
-    };
     updated[index] = {
       ...updated[index],
-      suggestedTerms: [...updated[index].suggestedTerms, newMatch]
+      suggestedTerms: [...updated[index].suggestedTerms, match]
     };
     this.concepts.set(updated);
   }

src/app/hpopolishing/hpopolishing.component.html

@@ -153,10 +153,21 @@
 </div>
 
 <div class="space-y-1">
-  <app-hpoautocomplete
-    [inputString]="hpoInputString"
-    (selected)="handleSelection($event)"
-  ></app-hpoautocomplete>
+  <div class="flex items-center gap-2 bg-gray-50 p-3 rounded-lg border border-gray-200 shadow-sm">
+  <div class="flex-grow">
+    <app-hpoautocomplete
+      [inputString]="hpoInputString"
+      (selected)="handleSelection($event)"
+    ></app-hpoautocomplete>
+  </div>
+
+  <button 
+    color="primary" 
+    (click)="submitSelectedHpo()"
+    [disabled]="!selectedHpoTerm"
+    class="btn-outline-primary h-[40px] px-6"
+  >Submit</button>
+</div>
 
   @if (selectedHpoTerm) {
      <p class="text-xs text-blue-600 italic">Last added: {{ selectedHpoTerm.label }}</p>

src/app/hpopolishing/hpopolishing.component.ts

@@ -11,14 +11,15 @@ import { AddageComponent } from '../addages/addage.component';
 import { MatDialog } from '@angular/material/dialog';
 import { NotificationService } from '../services/notification.service';
 import { HpoMatch } from '../models/hpo_mapping_result';
+import { MatIcon } from "@angular/material/icon";
 
 /** This component takes the results of the raw text mining (fenominal) and allows the user to revise them and add new terms */
 @Component({
   selector: 'app-hpopolishing',
   templateUrl: './hpopolishing.component.html',
   styleUrls: ['./hpopolishing.component.scss'],
   standalone: true,
-  imports: [CommonModule, FormsModule, HpoAutocompleteComponent]
+  imports: [CommonModule, FormsModule, HpoAutocompleteComponent, MatIcon]
 })
 export class HpoPolishingComponent implements OnInit {
 
@@ -27,6 +28,8 @@ export class HpoPolishingComponent implements OnInit {
   @Output() done = new EventEmitter<HpoTermData[]>();
   @Output() cancel = new EventEmitter<void>();
 
+  @ViewChild(HpoAutocompleteComponent) hpoAutocomplete!: HpoAutocompleteComponent;
+
   private ageService = inject(AgeInputService);
   private configService = inject(ConfigService);
   private dialog = inject(MatDialog);
@@ -159,14 +162,6 @@ export class HpoPolishingComponent implements OnInit {
 
   async handleSelection(match: HpoMatch) {
     this.selectedHpoTerm = match;
-    
-    // If you need to immediately convert it for an existing function:
-    const duplet: HpoTermDuplet = {
-      hpoId: match.id,
-      hpoLabel: match.label
-    };
-    
-    await this.submitHpoAutocompleteTerm(duplet);
   }
 
   submitSelectedHpo = async () => {
@@ -189,6 +184,9 @@ export class HpoPolishingComponent implements OnInit {
         return exists ? current : [...current, annot];
         });
     }
+    if (this.hpoAutocomplete) {
+      this.hpoAutocomplete.clear(); 
+    }
   }
 
   /** We get a list of TextAnnotationDto objects from the HPO Textmining app.