Updating HPO single column dialog

Author: pnrobinson

package.json

@@ -1,6 +1,6 @@
 {
   "name": "phenoboard",
-  "version": "0.5.105",
+  "version": "0.5.106",
   "scripts": {
     "ng": "ng",
     "start": "nx serve phenoboard --port 1420",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "phenoboard"
-version = "0.5.105"
+version = "0.5.106"
 description = "Curate cohorts of GA4GH Phenopackets"
 authors = ["Peter N Robinson"]
 edition = "2021"
@@ -25,7 +25,7 @@ ontolius = "0.7.2"
 reqwest = { version = "0.13.2", features = ["json", "blocking"] }
 rfd = { version = "0.16.0", default-features = false}
 fenominal = { git = 'https://github.com/P2GX/fenominal.git',  tag = '0.1.18' }
-ga4ghphetools = { git = 'https://github.com/P2GX/ga4ghphetools.git', tag = '0.5.24' }
+ga4ghphetools = { git = 'https://github.com/P2GX/ga4ghphetools.git', tag = '0.5.27' }
 #ga4ghphetools = { path = "../../ga4ghphetools" }
 serde = { version = "1.0.219", features = ["derive"] }
 serde_json = "1.0.148"

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "phenoboard",
-  "version": "0.5.105",
+  "version": "0.5.106",
   "identifier": "org.p2gx.phenoboard",
   "build": {
     "beforeDevCommand": "npx nx serve phenoboard --configuration=development  --no-cloud",

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

@@ -1,27 +1,69 @@
 import { Component, inject } from '@angular/core';
-import { MatDialogRef, MatDialogContent, MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDialogRef, MatDialogContent, MatDialogModule, MAT_DIALOG_DATA, MatDialogActions } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 import { HpoAutocompleteComponent } from './hpoautocomplete.component';
 import { HpoTermDuplet } from '../models/hpo_term_dto';
 import { HpoMatch } from '../models/hpo_mapping_result';
 
-/** A wrapper that allows the autocomplete to be used as a modal dialog */
+/** A wrapper that allows the autocomplete to be used as a modal dialog with a modern UI */
 @Component({
   selector: 'app-hpo-dialog-wrapper',
   standalone: true,
-  imports: [HpoAutocompleteComponent, MatDialogContent, MatDialogModule],
+  imports: [
+    HpoAutocompleteComponent, 
+    MatDialogContent, 
+    MatDialogModule, 
+    MatDialogActions, 
+    MatButtonModule,
+    MatIconModule
+  ],
   template: `
-    <h2 mat-dialog-title>{{data.title}}</h2>
-    <p  class="text-sm text-gray-500 italic">Select HPO term</p>
-    <mat-dialog-content>
-      <app-hpoautocomplete
-        [inputString]="data.bestMatch.label"
-        (selected)="onSelected($event)">
-      </app-hpoautocomplete>
-    </mat-dialog-content>
-    <mat-dialog-actions>
-      <button mat-button (click)="dialogRef.close()" class="btn-outline-cancel">Cancel</button>
-    </mat-dialog-actions>
-  `
+    <div class="flex flex-col max-w-[500px]">
+      <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
+        <h2 class="text-xl font-semibold text-slate-800 m-0 flex items-center gap-2">
+          <mat-icon class="text-blue-600">manage_search</mat-icon>
+          {{data.title}}
+        </h2>
+        <p class="text-xs text-slate-500 mt-1 uppercase tracking-tight font-medium">
+          Confirm or refine the Phenotype Term
+        </p>
+      </div>
+
+      <mat-dialog-content class="!m-0 !p-6 overflow-visible">
+        <div class="space-y-4">
+          <div class="p-4 bg-white border border-slate-200 rounded-xl shadow-sm transition-all focus-within:ring-2 focus-within:ring-blue-100">
+            <app-hpoautocomplete
+              [inputString]="data.bestMatch.label"
+              (selected)="onSelected($event)">
+            </app-hpoautocomplete>
+          </div>
+          
+          <div class="flex items-center gap-2 px-1">
+            <mat-icon class="text-slate-400 !w-4 !h-4 !text-[16px]">help_outline</mat-icon>
+            <span class="text-[11px] text-slate-400 italic">
+              Results are pulled directly from the Human Phenotype Ontology.
+            </span>
+          </div>
+        </div>
+      </mat-dialog-content>
+
+      <mat-dialog-actions align="end" class="!px-6 !pb-6 !pt-2">
+        <button 
+          mat-button 
+          (click)="dialogRef.close()" 
+          class="!text-slate-500 hover:!bg-slate-100 !px-4 !rounded-lg">
+          Cancel
+        </button>
+      </mat-dialog-actions>
+    </div>
+  `,
+  styles: [`
+    /* Crucial: prevents the autocomplete dropdown from being hidden by the dialog's scroll container */
+    :host ::ng-deep .mat-mdc-dialog-content {
+      overflow: visible !important;
+    }
+  `]
 })
 export class HpoDialogWrapperComponent {
   public dialogRef = inject(MatDialogRef<HpoDialogWrapperComponent>);
@@ -34,4 +76,4 @@ export class HpoDialogWrapperComponent {
     };
     this.dialogRef.close(duplet);
   }
-}
+}

src/app/hpoautocomplete/hpoautocomplete.component.ts

@@ -75,7 +75,8 @@ export class HpoAutocompleteComponent {
     effect(() => {
       const val = this.inputString();
       if (val) {
-        this.control.setValue(val, {emitEvent: false});
+        this.control.setValue(val, {emitEvent: true});
+        setTimeout(() => this.inputElement()?.focus(), 0);
         this.inputElement()?.select();
       }
     });