Skip to content

Commit 2fae276

Browse files
XanderVertegaalXanderVertegaal
committed
Signal-based problem passing; maintain form in top component
1 parent 8c94afa commit 2fae276

9 files changed

Lines changed: 177 additions & 155 deletions

File tree

‎frontend/src/app/annotate/annotation-input/annotation-input.component.html‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@let problemResponse = problemResponse$ | async;
2-
31
<h2 i18n>Parser input</h2>
42

53
<p i18n>
@@ -8,14 +6,12 @@ <h2 i18n>Parser input</h2>
86
</p>
97

108
<div class="d-flex flex-column gap-5">
11-
@if (problemResponse) {
12-
@if (problemResponse.type === 'sick' && problemResponse.problem) {
13-
<la-sick-problem-form [problem]="problemResponse.problem" />
14-
} @else if (problemResponse.type === 'fracas' && problemResponse.problem) {
15-
<la-fracas-problem-form [problem]="problemResponse.problem" />
16-
}
17-
} @else {
18-
<la-premises-form />
9+
@if (form(); as inputForm) {
10+
<la-premises-form
11+
[form]="inputForm"
12+
/>
13+
<la-knowledge-base-form
14+
[form]="inputForm"
15+
/>
1916
}
20-
<la-knowledge-base-form />
2117
</div>

‎frontend/src/app/annotate/annotation-input/annotation-input.component.ts‎

Lines changed: 109 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,35 @@
1-
import { Component } from "@angular/core";
1+
import { Component, computed } from "@angular/core";
22
import { CommonModule } from "@angular/common";
3-
import { PremisesFormComponent } from "./premises-form/premises-form.component";
4-
import { KnowledgeBaseFormComponent } from "./knowledge-base-form/knowledge-base-form.component";
3+
import {
4+
FormArray,
5+
FormControl,
6+
FormGroup,
7+
ReactiveFormsModule,
8+
Validators,
9+
} from "@angular/forms";
10+
import {
11+
Premises,
12+
PremisesFormComponent,
13+
} from "./premises-form/premises-form.component";
14+
import {
15+
KnowledgeBaseFormComponent,
16+
KnowledgeBaseRelationship,
17+
} from "./knowledge-base-form/knowledge-base-form.component";
518
import { AnnotateService } from "../../services/annotate.service";
6-
import { SickProblemFormComponent } from "./sick-problem-form/sick-problem-form.component";
7-
import { FracasProblemFormComponent } from "./fracas-problem-form/fracas-problem-form.component";
19+
import { toSignal } from "@angular/core/rxjs-interop";
20+
import { ProblemResponse } from "../../types";
21+
22+
export type AnnotationInputForm = FormGroup<{
23+
premises: FormArray<FormControl<string>>;
24+
conclusion: FormControl<string>;
25+
kbItems: FormArray<
26+
FormGroup<{
27+
entity1: FormControl<string>;
28+
relationship: FormControl<KnowledgeBaseRelationship>;
29+
entity2: FormControl<string>;
30+
}>
31+
>;
32+
}>;
833

934
@Component({
1035
selector: "la-annotation-input",
@@ -13,14 +38,90 @@ import { FracasProblemFormComponent } from "./fracas-problem-form/fracas-problem
1338
CommonModule,
1439
PremisesFormComponent,
1540
KnowledgeBaseFormComponent,
16-
SickProblemFormComponent,
17-
FracasProblemFormComponent,
41+
ReactiveFormsModule,
1842
],
1943
templateUrl: "./annotation-input.component.html",
2044
styleUrl: "./annotation-input.component.scss",
2145
})
2246
export class AnnotationInputComponent {
23-
public problemResponse$ = this.annotateService.problem$;
47+
private problemResponse = toSignal(this.annotateService.problem$);
48+
49+
public form = computed<AnnotationInputForm | null>(() => {
50+
const problem = this.problemResponse();
51+
if (!problem) {
52+
return null;
53+
}
54+
const { premises, conclusion } = this.getPremisesAndConclusion(problem);
55+
return new FormGroup({
56+
premises: new FormArray(
57+
premises.map(
58+
(premise) =>
59+
new FormControl<string>(premise, {
60+
validators: [Validators.required],
61+
nonNullable: true,
62+
})
63+
)
64+
),
65+
conclusion: new FormControl<string>(conclusion, {
66+
validators: [Validators.required],
67+
nonNullable: true,
68+
}),
69+
kbItems: new FormArray([
70+
new FormGroup({
71+
entity1: new FormControl<string>("", {
72+
validators: [Validators.required],
73+
nonNullable: true,
74+
}),
75+
relationship: new FormControl<KnowledgeBaseRelationship>(
76+
KnowledgeBaseRelationship.EQUAL,
77+
{
78+
validators: [Validators.required],
79+
nonNullable: true,
80+
}
81+
),
82+
entity2: new FormControl<string>("", {
83+
validators: [Validators.required],
84+
nonNullable: true,
85+
}),
86+
}),
87+
]),
88+
});
89+
});
2490

2591
constructor(private annotateService: AnnotateService) {}
92+
93+
public onSubmit(): void {
94+
const form = this.form();
95+
if (!form) {
96+
return;
97+
}
98+
if (form.valid) {
99+
console.log(
100+
"submitting from AnnotationInputComponent!",
101+
form.value
102+
);
103+
}
104+
}
105+
106+
private getPremisesAndConclusion(problem: ProblemResponse): Premises {
107+
if (!problem.problem || !problem.type) {
108+
return {
109+
premises: [],
110+
conclusion: "",
111+
};
112+
}
113+
114+
if (problem.type === "sick") {
115+
return {
116+
premises: [problem.problem.sentenceOne],
117+
conclusion: problem.problem.sentenceTwo,
118+
};
119+
}
120+
121+
// FraCaS
122+
return {
123+
premises: problem.problem.premises,
124+
conclusion: problem.problem.hypothesis,
125+
};
126+
}
26127
}

‎frontend/src/app/annotate/annotation-input/knowledge-base-form/knowledge-base-form.component.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
<h3 class="h5" i18n>Knowledge Base</h3>
44
</header>
55
<div class="card-body">
6-
<form [formGroup]="form" (ngSubmit)="onSubmit()">
6+
<form [formGroup]="form()" (ngSubmit)="onSubmit()">
77
<ul formArrayName="kbItems" class="ps-0 list-unstyled">
88
<li
99
*ngFor="
10-
let kbItem of form.controls.kbItems.controls;
10+
let kbItem of form().controls.kbItems.controls;
1111
let i = index
1212
"
1313
class="mb-3"
@@ -42,7 +42,7 @@ <h3 class="h5" i18n>Knowledge Base</h3>
4242
type="button"
4343
class="btn btn-danger"
4444
(click)="removeKnowledgeBaseItem(i)"
45-
[disabled]="form.controls.kbItems.length === 1"
45+
[disabled]="form().controls.kbItems.length === 1"
4646
>
4747
<fa-icon
4848
[icon]="faTrash"
@@ -70,7 +70,7 @@ <h3 class="h5" i18n>Knowledge Base</h3>
7070
<button
7171
type="submit"
7272
class="btn btn-success"
73-
[disabled]="form.invalid"
73+
[disabled]="form().invalid"
7474
>
7575
<fa-icon
7676
[icon]="faCheck"

‎frontend/src/app/annotate/annotation-input/knowledge-base-form/knowledge-base-form.component.ts‎

Lines changed: 14 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { Component } from "@angular/core";
1+
import { Component, input } from "@angular/core";
22
import { FormArray, FormGroup, Validators, FormControl } from "@angular/forms";
33
import { CommonModule } from "@angular/common";
44
import { ReactiveFormsModule } from "@angular/forms";
55
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
66
import { faCheck, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
7+
import { AnnotationInputForm } from "../annotation-input.component";
78

8-
enum KnowledgeBaseRelationship {
9+
export enum KnowledgeBaseRelationship {
910
EQUAL = "EQUAL",
1011
NOT_EQUAL = "NOT_EQUAL",
1112
SUBSET = "SUBSET",
@@ -19,12 +20,6 @@ const relationshipDisplayMapping: Record<KnowledgeBaseRelationship, string> = {
1920
SUPERSET: "is a superset of",
2021
};
2122

22-
interface KnowledgeBaseForm {
23-
entity1: FormControl<string>;
24-
relationship: FormControl<KnowledgeBaseRelationship>;
25-
entity2: FormControl<string>;
26-
}
27-
2823
@Component({
2924
selector: "la-knowledge-base-form",
3025
standalone: true,
@@ -33,27 +28,7 @@ interface KnowledgeBaseForm {
3328
styleUrls: ["./knowledge-base-form.component.scss"],
3429
})
3530
export class KnowledgeBaseFormComponent {
36-
public form = new FormGroup({
37-
kbItems: new FormArray([
38-
new FormGroup<KnowledgeBaseForm>({
39-
entity1: new FormControl<string>("", {
40-
validators: [Validators.required],
41-
nonNullable: true,
42-
}),
43-
relationship: new FormControl<KnowledgeBaseRelationship>(
44-
KnowledgeBaseRelationship.EQUAL,
45-
{
46-
validators: [Validators.required],
47-
nonNullable: true,
48-
}
49-
),
50-
entity2: new FormControl<string>("", {
51-
validators: [Validators.required],
52-
nonNullable: true,
53-
}),
54-
}),
55-
]),
56-
});
31+
public form = input.required<AnnotationInputForm>();
5732

5833
public relationshipTypes = Object.values(KnowledgeBaseRelationship);
5934

@@ -63,35 +38,25 @@ export class KnowledgeBaseFormComponent {
6338

6439
constructor() {}
6540

66-
public addKnowledgeBaseItem(
67-
form: {
68-
entity1: string;
69-
relationship: KnowledgeBaseRelationship;
70-
entity2: string;
71-
} = {
72-
entity1: "",
73-
relationship: KnowledgeBaseRelationship.EQUAL,
74-
entity2: "",
75-
}
76-
): void {
77-
const newItem = new FormGroup<KnowledgeBaseForm>({
78-
entity1: new FormControl<string>(form.entity1, {
41+
public addKnowledgeBaseItem(): void {
42+
const newItem = new FormGroup({
43+
entity1: new FormControl<string>("", {
7944
validators: [Validators.required],
8045
nonNullable: true,
8146
}),
8247
relationship: new FormControl<KnowledgeBaseRelationship>(
83-
form.relationship,
48+
KnowledgeBaseRelationship.EQUAL,
8449
{
8550
validators: [Validators.required],
8651
nonNullable: true,
8752
}
8853
),
89-
entity2: new FormControl<string>(form.entity2, {
54+
entity2: new FormControl<string>("", {
9055
validators: [Validators.required],
9156
nonNullable: true,
9257
}),
9358
});
94-
this.form.controls.kbItems.push(newItem);
59+
this.form().controls.kbItems.push(newItem);
9560
}
9661

9762
public getRelationshipTypeName(
@@ -101,14 +66,14 @@ export class KnowledgeBaseFormComponent {
10166
}
10267

10368
public removeKnowledgeBaseItem(index: number): void {
104-
if (this.form.controls.kbItems.length > 1) {
105-
this.form.controls.kbItems.removeAt(index);
69+
if (this.form().controls.kbItems.length > 1) {
70+
this.form().controls.kbItems.removeAt(index);
10671
}
10772
}
10873

10974
public onSubmit(): void {
110-
if (this.form.valid) {
111-
console.log("Submitting:", this.form.value);
75+
if (this.form().valid) {
76+
console.log("Submitting:", this.form().value);
11277
}
11378
}
11479
}

‎frontend/src/app/annotate/annotation-input/premises-form/premises-form.component.html‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1+
@let premiseControls = form().controls.premises.controls;
2+
13
<section class="card">
24
<header class="card-header">
35
<h3 class="h5" i18n>Premises and Conclusion</h3>
46
</header>
57
<div class="card-body">
6-
<form [formGroup]="form" (ngSubmit)="onSubmit()">
8+
<form [formGroup]="form()">
79
<ul formArrayName="premises" class="ps-0 list-unstyled">
8-
<li
9-
*ngFor="let premise of premises.controls; let i = index"
10-
class="mb-3"
11-
>
10+
@for (control of form().controls.premises.controls; let i = $index; track $index)
11+
{
12+
<li class="mb-3">
1213
<label
1314
[attr.for]="'premise-' + i"
1415
class="form-label fw-bold"
@@ -27,7 +28,7 @@ <h3 class="h5" i18n>Premises and Conclusion</h3>
2728
type="button"
2829
class="btn btn-danger"
2930
(click)="removePremise(i)"
30-
[disabled]="premises.length === 1"
31+
[disabled]="premiseControls.length === 1"
3132
>
3233
<fa-icon
3334
[icon]="faTrash"
@@ -38,6 +39,7 @@ <h3 class="h5" i18n>Premises and Conclusion</h3>
3839
</button>
3940
</div>
4041
</li>
42+
}
4143
</ul>
4244
<button
4345
type="button"
@@ -60,14 +62,14 @@ <h3 class="h5" i18n>Premises and Conclusion</h3>
6062
id="conclusion"
6163
type="text"
6264
class="form-control"
63-
formControlName="conclusion"
65+
[formControl]="form().controls.conclusion"
6466
/>
6567
</div>
6668

6769
<button
6870
type="submit"
6971
class="btn btn-success"
70-
[disabled]="form.invalid"
72+
[disabled]="form().invalid"
7173
>
7274
<fa-icon
7375
[icon]="faCheck"

0 commit comments

Comments
 (0)