preliminary working integration with parser backend

Author: bbonf

backend/langpro_annotator/settings.py

@@ -91,3 +91,5 @@
 
 STATICFILES_DIRS = []
 PROXY_FRONTEND = None
+
+LANGPRO_URL = 'http://localhost:8080'

backend/problem/views/parse.py

@@ -1,3 +1,5 @@
+import requests
+from django.conf import settings
 from dataclasses import dataclass, field, asdict
 
 from django.http import JsonResponse
@@ -67,17 +69,14 @@ def send_to_parser(self, data: ParserInput) -> dict | None:
 
         logger.info("Sending to LangPro service:", asdict(data))
 
-        # try:
-        #     response = requests.post(
-        #         url=f"{LANGPRO_URL}/parse",
-        #         json=asdict(data),
-        #         headers={"Content-Type": "application/json"},
-        #     )
-        #     response.raise_for_status()
-        #     return response.json()
-        # except requests.RequestException as e:
-        #     logger.exception(f"Error sending request to LangPro: {e}")
-        #     return None
-
-
-        return {"ok": "true"}
+        try:
+            response = requests.post(
+                url=f"{settings.LANGPRO_URL}/api/prove/",
+                json=asdict(data),
+                headers={"Content-Type": "application/json"},
+            )
+            response.raise_for_status()
+            return response.json()
+        except requests.RequestException as e:
+            logger.exception(f"Error sending request to LangPro: {e}")
+            raise

frontend/src/app/annotate/annotate.component.html

@@ -8,6 +8,7 @@
             <button
                 type="submit"
                 class="btn btn-success btn-lg d-flex align-items-center"
+                (click)="startParse()"
             >
                 <fa-icon
                     [icon]="faTree"
@@ -21,4 +22,4 @@
     </div>
     <la-annotation-input class="col-8" />
 </div>
-<la-annotation-menu />
+<la-annotation-menu [ccgTrees]="ccgTrees" />

frontend/src/app/annotate/annotate.component.ts

@@ -1,10 +1,14 @@
-import { Component } from "@angular/core";
+import { Component, DestroyRef, inject, OnInit } from "@angular/core";
 import { AnnotationMenuComponent } from "./annotation-menu/annotation-menu.component";
 import { NavigatorComponent } from "./navigator/navigator.component";
-import { AnnotationInputComponent } from "./annotation-input/annotation-input.component";
+import { AnnotationInputComponent, ParseInput } from "./annotation-input/annotation-input.component";
 import { SearchComponent } from "./search/search.component";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { faTree } from "@fortawesome/free-solid-svg-icons";
+import { ParseResponse, ParseService } from "@/services/parse.service";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { ProblemResponse } from "@/types";
+import { ProblemService } from "@/services/problem.service";
 
 @Component({
     selector: "la-annotate",
@@ -19,6 +23,39 @@ import { faTree } from "@fortawesome/free-solid-svg-icons";
     templateUrl: "./annotate.component.html",
     styleUrl: "./annotate.component.scss",
 })
-export class AnnotateComponent {
+export class AnnotateComponent implements OnInit {
     public faTree = faTree;
+    private destroyRef = inject(DestroyRef);
+    private parseService = inject(ParseService);
+    private problemService = inject(ProblemService);
+
+    public ccgTrees: any[] = [];
+
+    private problem: ProblemResponse | null = null;
+
+    ngOnInit() {
+        // TODO: This is wrong. It seems silly to keep a local copy of the problem,
+        // and it's also not connected to the form, so any edits will not affect
+        // the requests
+        this.problemService.problem$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((problem) => {
+                this.problem = problem;
+            });
+    }
+
+    onParse(response: ParseResponse) {
+        console.log("Parse response:", response);
+        this.ccgTrees = response!.data.ccg_trees;
+    }
+
+    startParse() {
+        // hardcoded data for now
+        let input: ParseInput = {
+            premises: this.problem?.problem?.premises!,
+            hypothesis: this.problem?.problem?.hypothesis!,
+            kbItems: []
+        };
+        this.parseService.startParse(input, (r) => this.onParse(r));
+    }
 }

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

@@ -20,7 +20,6 @@ import { ProblemDetailsComponent } from "./problem-details/problem-details.compo
 import { combineLatest, Subject } from "rxjs";
 import { ActivatedRoute } from "@angular/router";
 import { ProblemService } from "@/services/problem.service";
-import { ParseService } from "@/services/parse.service";
 
 export type ParseInputForm = FormGroup<{
     premises: FormArray<FormControl<string>>;
@@ -54,7 +53,6 @@ export class AnnotationInputComponent implements OnInit {
     private route = inject(ActivatedRoute);
     private destroyRef = inject(DestroyRef);
     private problemService = inject(ProblemService);
-    private parseService = inject(ParseService);
 
     public form: ParseInputForm | null = null;
     public problem: ProblemResponse | null = null;
@@ -75,14 +73,6 @@ export class AnnotationInputComponent implements OnInit {
                 this.form = this.buildForm(problem);
             });
 
-        // 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);
-            });
-
         combineLatest([
             this.route.paramMap,
             this.route.queryParamMap])

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

@@ -9,7 +9,8 @@
             <span i18n>CCG / LLF</span>
         </button>
         <ng-template ngbNavContent>
-            <la-annotation-parse-results />
+            <!-- TODO: render multiple trees -->
+            <la-parse-svg [tree]="ccgTrees[0]"></la-parse-svg>
         </ng-template>
     </li>
     <li [ngbNavItem]="2">

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

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, Input } from "@angular/core";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { NgbNavModule } from "@ng-bootstrap/ng-bootstrap";
 import {
@@ -9,6 +9,7 @@ import {
 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",
@@ -19,6 +20,7 @@ import { AnnotationCommentsComponent } from "../annotation-comments/annotation-c
         AnnotationParseResultsComponent,
         AnnotationTableauComponent,
         AnnotationCommentsComponent,
+        ParseSVG
     ],
     templateUrl: "./annotation-menu.component.html",
     styleUrl: "./annotation-menu.component.scss",
@@ -29,4 +31,7 @@ export class AnnotationMenuComponent {
     public faSquarePollHorizontal = faSquarePollHorizontal;
     public faTree = faTree;
     public faPenNib = faPenNib;
+
+    @Input()
+    public ccgTrees: any[] = [];
 }

frontend/src/app/annotate/parse-tree/parse-svg.component.svg

@@ -0,0 +1,31 @@
+import { Component, ChangeDetectorRef, Input} from '@angular/core';
+import { CommonModule } from "@angular/common";
+import { Subject } from "rxjs";
+import { Dimensions } from '@/types';
+import { ParseTree } from './parse-tree.component';
+
+@Component({
+    selector: "la-parse-svg",
+    standalone: true,
+    imports: [CommonModule, ParseTree],
+    templateUrl: "./parse-svg.component.svg",
+})
+export class ParseSVG {
+
+    treeDimensions$ = new Subject<Dimensions>();
+    treeDimensions: Dimensions = {width:0, height: 0};
+
+    constructor(private cdref: ChangeDetectorRef) {}
+
+    onTreeSize(size: Dimensions) {
+        this.treeDimensions = size;
+    }
+
+    ngAfterViewChecked() {
+        this.treeDimensions$.next(this.treeDimensions);
+        this.cdref.detectChanges();
+    }
+
+    @Input()
+    tree: any = {};
+}