Skip to content

Commit 5c1fed5

Browse files
pnrobinsonpnrobinson
committed
Updating HPO Autocomplete to be dumb component
1 parent 351100e commit 5c1fed5

File tree

12 files changed

+170
-212
lines changed

12 files changed

+170
-212
lines changed

‎book/src/SUMMARY.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,5 @@
1919
- [Developers](developers/overview.md)
2020
- [Angular tips](developers/angular.md)
2121
- [Practical tips](developers/practical.md)
22+
- [Linux](developers/linux.md)
2223
- [Release](developers/release.md)

‎book/src/developers/linux.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Development on a linux system
2+
3+
## Prerequisites:
4+
5+
- pkg-config
6+
- libgtk-3-dev
7+
- libjavascriptcoregtk-4.1-dev
8+
- libwebkit2gtk-4.1-dev
9+
10+
On debian-like systems, these libraries can be installed with `sudo apt install`. After this, follow the instructions in [overview](overview.md).
11+

‎mkdocs.yml‎

Lines changed: 0 additions & 62 deletions
This file was deleted.

‎src-tauri/src/lib.rs‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ use ga4ghphetools::{dto::{cohort_dto::{CohortData, CohortType, DiseaseData, Indi
99
use ga4ghphetools::dto::intergenic_variant::IntergenicHgvsVariant;
1010
use ontolius::ontology::MetadataAware;
1111
use phenoboard::PhenoboardSingleton;
12-
use tauri::{AppHandle, Emitter, Manager, Window, WindowEvent};
12+
use tauri::{AppHandle, Emitter, Manager, Runtime, WindowEvent};
1313
use tauri_plugin_dialog::{DialogExt};
14-
use std::{collections::{HashMap, HashSet}, fs, sync::{Arc, Mutex}};
14+
use std::{collections::HashMap, fs, sync::{Arc, Mutex}};
1515
use tauri_plugin_fs::{init};
1616

1717

@@ -746,12 +746,12 @@ struct ProgressPayload {
746746

747747
/// Check all alleles in an ETL column and emit signals to show progress.
748748
#[tauri::command]
749-
async fn process_allele_column(
749+
async fn process_allele_column<R>(
750750
state: tauri::State<'_, Arc<AppState>>,
751-
window: Window,
751+
app: AppHandle<R>,
752752
etl: EtlDto,
753753
col: usize
754-
) -> Result<EtlDto, String> {
754+
) -> Result<EtlDto, String> where R: Runtime {
755755
let app_handle = state.inner().clone();
756756
if col >= etl.table.columns.len() {
757757
return Err(format!("Attempt to access invalid column {} for table with {} columns", col, etl.table.columns.len()));
@@ -762,7 +762,7 @@ async fn process_allele_column(
762762
.map_err(|_| "Failed to acquire lock".to_string())?;
763763
let total_alleles = etl.table.columns[col].values.len() as u32;
764764
let pb = |current: u32, q: u32| {
765-
let _ = window.emit("progress-update", ProgressPayload {
765+
let _ = app.emit("progress-update", ProgressPayload {
766766
current,
767767
total: total_alleles
768768
});
@@ -1012,10 +1012,6 @@ async fn expand_dictionary_to_rows(
10121012
}
10131013

10141014

1015-
1016-
1017-
1018-
10191015
/// get list of Mining concepts for each cell
10201016
#[tauri::command]
10211017
async fn get_cohort_age_strings(

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

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, Inject, OnInit } from '@angular/core';
1+
import { Component, inject, Inject } from '@angular/core';
22
import { MatDialogRef, MatDialogContent, MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
33
import { HpoAutocompleteComponent } from './hpoautocomplete.component';
44
import { HpoTermDuplet } from '../models/hpo_term_dto';
@@ -14,7 +14,7 @@ import { HpoMatch } from '../models/hpo_mapping_result';
1414
<p class="text-sm text-gray-500 italic">Select HPO term</p>
1515
<mat-dialog-content>
1616
<app-hpoautocomplete
17-
[initialValue]="data.bestMatch.label"
17+
[inputString]="data.bestMatch.label"
1818
(selected)="onSelected($event)">
1919
</app-hpoautocomplete>
2020
</mat-dialog-content>
@@ -24,13 +24,14 @@ import { HpoMatch } from '../models/hpo_mapping_result';
2424
`
2525
})
2626
export class HpoDialogWrapperComponent {
27-
constructor(
28-
public dialogRef: MatDialogRef<HpoDialogWrapperComponent>,
29-
@Inject(MAT_DIALOG_DATA) public data: { bestMatch: HpoMatch, title: string }
30-
) {}
27+
public dialogRef = inject(MatDialogRef<HpoDialogWrapperComponent>);
28+
public data = inject(MAT_DIALOG_DATA) as { bestMatch: HpoMatch, title: string };
3129

32-
33-
onSelected(term: HpoTermDuplet) {
34-
this.dialogRef.close(term);
30+
onSelected(term: HpoMatch) {
31+
const duplet: HpoTermDuplet = {
32+
hpoLabel: term.label,
33+
hpoId: term.id
34+
};
35+
this.dialogRef.close(duplet);
3536
}
3637
}

‎src/app/hpoautocomplete/hpoautocomplete.component.html‎

Lines changed: 31 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,33 @@
1-
<mat-card class="primary-box flex flex-col justify-between">
2-
<ng-content select="[card-title]"></ng-content>
1+
<mat-form-field class="w-full" appearance="outline">
2+
<input type="text"
3+
#hpoInput
4+
[placeholder]="placeholder()"
5+
matInput
6+
[formControl]="control"
7+
[matAutocomplete]="auto"
8+
spellcheck="false"
9+
autocomplete="off">
310

4-
<div class="flex items-center gap-4">
5-
<mat-form-field class="flex-1 min-w-[300px]" appearance="outline">
6-
<input type="text"
7-
placeholder="HPO term label"
8-
matInput
9-
[formControl]="control"
10-
[matAutocomplete]="auto"
11-
spellcheck="false"
12-
autocorrect="off"
13-
autocapitalize="none"
14-
autocomplete="off">
15-
16-
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
17-
@for (option of options; track $index) {
18-
<mat-option [value]="option">
19-
<div class="flex flex-col leading-tight">
20-
<span class="text-sm font-medium">{{ option.matchedText }}</span>
21-
22-
@if (option.matchedText !== option.label) {
23-
<small class="text-gray-500 italic">Primary: {{ option.label }}</small>
24-
}
25-
<small class="text-blue-600 text-xs">{{ option.id }}</small>
26-
</div>
27-
</mat-option>
28-
}
29-
</mat-autocomplete>
30-
</mat-form-field>
31-
32-
<button class="btn-outline-primary"
33-
color="primary"
34-
(click)="submitTerm()"
35-
[disabled]="!control.value || typeof control.value === 'string'">
36-
Submit
11+
@if (control.value) {
12+
<button matSuffix mat-icon-button aria-label="Clear" (click)="clear()">
13+
<mat-icon>close</mat-icon>
3714
</button>
38-
</div>
39-
</mat-card>
15+
}
16+
17+
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="onOptionSelected($event)">
18+
@for (option of options(); track $index) {
19+
<mat-option [value]="option">
20+
<div class="flex flex-col leading-tight">
21+
<span class="text-sm font-medium">{{ option.matchedText }}</span>
22+
@if (option.matchedText !== option.label) {
23+
<small class="opacity-70 italic">Primary: {{ option.label }}</small>
24+
}
25+
<small class="text-blue-600 text-xs">{{ option.id }}</small>
26+
</div>
27+
</mat-option>
28+
}
29+
</mat-autocomplete>
30+
@if (control.hasError('invalidSelection') && control.touched) {
31+
<mat-error>Please select a term from the list</mat-error>
32+
}
33+
</mat-form-field>

0 commit comments

Comments
 (0)