Feed backend parse response into new frontend parse-results component

Instead of handling it in the input component.

Author: jgonggrijp

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

@@ -17,12 +17,11 @@ import { ProblemDetailsComponent } from "./problem-details/problem-details.compo
 import { map, Subject } from "rxjs";
 import { ActivatedRoute, Router, RouterLinkWithHref } from "@angular/router";
 import { ProblemService } from "@/services/problem.service";
-import { ParseResponse, ParseService } from "@/services/parse.service";
+import { ParseService } from "@/services/parse.service";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { ToastService } from "@/services/toast.service";
 import { AuthService } from "@/services/auth.service";
 import { IconButtonComponent } from "@/shared/icon-button/icon-button.component";
-import { Tree } from "@/tree";
 
 export type ParseInputForm = FormGroup<{
     id: FormControl<number | null>;
@@ -74,8 +73,6 @@ export class AnnotationInputComponent implements OnInit {
 
     public submit$ = new Subject<void>();
 
-    public ccgTrees: Tree<string>[] = [];
-
     public faCopy = faCopy;
     public faCheck = faCheck;
     public faTree = faTree;
@@ -123,27 +120,14 @@ export class AnnotationInputComponent implements OnInit {
             });
             this.router.navigate(["/", "annotate", response.id]);
         });
-
-        // Subscription needed to ensure a request is actually made.
-        // TODO: replace this with actual parse results.
-        this.parseService.parse$
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((response) => {
-                console.log("Parse response:", response);
-            });
-    }
-
-    onParse(response: ParseResponse) {
-        console.log("Parse response:", response);
-        this.ccgTrees = response!.data.ccg_trees.map((tree: any) => new Tree(tree));
     }
 
     public startParse(): void {
         if (!this.form || this.form.invalid) {
             return;
         }
         const input = this.form.getRawValue();
-        this.parseService.startParse(input, (r) => this.onParse(r));
+        this.parseService.submit$.next(input);
     }
 
     public saveProblem(): void {

frontend/src/app/annotate/annotation-menu/annotation-menu.component.html

@@ -9,9 +9,7 @@
             <span i18n>CCG / LLF</span>
         </button>
         <ng-template ngbNavContent>
-            @for(tree of ccgTrees; track $index) {
-                <la-parse-svg [tree]="tree"></la-parse-svg>
-            }
+            <la-annotation-parse-results />
         </ng-template>
     </li>
     <li [ngbNavItem]="2">

frontend/src/app/annotate/annotation-menu/annotation-menu.component.ts

@@ -1,24 +1,24 @@
-import { Component, Input } from "@angular/core";
+import { Component } from "@angular/core";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { NgbNavModule } from "@ng-bootstrap/ng-bootstrap";
 import {
     faSquarePollHorizontal,
     faTree,
     faPenNib,
 } from "@fortawesome/free-solid-svg-icons";
+import { AnnotationParseResultsComponent } from "../annotation-parse-results/annotation-parse-results.component";
 import { AnnotationTableauComponent } from "../annotation-tableau/annotation-tableau.component";
 import { AnnotationCommentsComponent } from "../annotation-comments/annotation-comments.component";
-import { ParseSVG } from "../parse-tree/parse-svg.component";
 
 @Component({
     selector: "la-annotation-menu",
     standalone: true,
     imports: [
         NgbNavModule,
         FontAwesomeModule,
+        AnnotationParseResultsComponent,
         AnnotationTableauComponent,
         AnnotationCommentsComponent,
-        ParseSVG
     ],
     templateUrl: "./annotation-menu.component.html",
     styleUrl: "./annotation-menu.component.scss",
@@ -29,7 +29,4 @@ export class AnnotationMenuComponent {
     public faSquarePollHorizontal = faSquarePollHorizontal;
     public faTree = faTree;
     public faPenNib = faPenNib;
-
-    @Input()
-    public ccgTrees: any[] = [];
 }

frontend/src/app/annotate/annotation-parse-results/annotation-parse-results.component.ts

@@ -1,5 +1,7 @@
-import { Component } from "@angular/core";
+import { Component, DestroyRef, inject, OnInit } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { mockResult } from "./mockParseResult";
+import { ParseResponse, ParseService } from "@/services/parse.service";
 import { ParseTreeTableComponent } from "./parse-tree-table/parse-tree-table.component";
 import { NgbAccordionModule } from "@ng-bootstrap/ng-bootstrap";
 
@@ -11,6 +13,19 @@ import { NgbAccordionModule } from "@ng-bootstrap/ng-bootstrap";
     templateUrl: "./annotation-parse-results.component.html",
     styleUrl: "./annotation-parse-results.component.scss",
 })
-export class AnnotationParseResultsComponent {
-    public readonly parseResults = mockResult;
+export class AnnotationParseResultsComponent implements OnInit {
+    private destroyRef = inject(DestroyRef);
+    private parseService = inject(ParseService);
+
+    public parseResults = mockResult;
+
+    ngOnInit(): void {
+        // Subscription needed to ensure a request is actually made.
+        this.parseService.parse$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((response) => {
+                console.log("Parse response:", response);
+                this.parseResults = response.data.ccg_trees;
+            });
+    }
 }

frontend/src/app/services/parse.service.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
-import { Subject, switchMap, catchError, of, first } from 'rxjs';
+import { Subject, switchMap, catchError, of } from 'rxjs';
 import { ParseInput } from '@/annotate/annotation-input/annotation-input.component';
 
 export type ParseResponse = any;
@@ -23,9 +23,4 @@ export class ParseService {
             )
         )
     );
-
-    public startParse(input: ParseInput, handler: (response: ParseResponse) => void) {
-        this.parse$.pipe(first()).subscribe(handler);
-        this.submit$.next(input);
-    }
 }