Feature/langpro parse results

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

@@ -1,35 +1,35 @@
-<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs flex-nowrap">
-    <li [ngbNavItem]="1">
-        <button ngbNavLink>
-            <fa-icon
-                [icon]="faSquarePollHorizontal"
-                class="me-2"
-                aria-hidden="true"
-            />
-            <span i18n>CCG / LLF</span>
-        </button>
-        <ng-template ngbNavContent>
-            <la-annotation-parse-results />
-        </ng-template>
-    </li>
-    <li [ngbNavItem]="2">
-        <button ngbNavLink>
-            <fa-icon [icon]="faTree" class="me-2" aria-hidden="true" />
-            <span i18n>Tableau / Proof</span>
-        </button>
-        <ng-template ngbNavContent>
-            <la-annotation-tableau />
-        </ng-template>
-    </li>
-    <li [ngbNavItem]="3">
-        <button ngbNavLink>
-            <fa-icon [icon]="faPenNib" class="me-2" aria-hidden="true" />
-            <span i18n>Comments / History</span>
-        </button>
-        <ng-template ngbNavContent>
-            <la-annotation-comments />
-        </ng-template>
-    </li>
-</ul>
-
-<div [ngbNavOutlet]="nav" class="mt-2"></div>
+<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs flex-nowrap">
+    <li [ngbNavItem]="1">
+        <button ngbNavLink>
+            <fa-icon
+                [icon]="faSquarePollHorizontal"
+                class="me-2"
+                aria-hidden="true"
+            />
+            <span i18n>Syntactic parses</span>
+        </button>
+        <ng-template ngbNavContent>
+            <la-annotation-parse-results />
+        </ng-template>
+    </li>
+    <li [ngbNavItem]="2">
+        <button ngbNavLink>
+            <fa-icon [icon]="faTree" class="me-2" aria-hidden="true" />
+            <span i18n>Tableau / Proof</span>
+        </button>
+        <ng-template ngbNavContent>
+            <la-annotation-tableau />
+        </ng-template>
+    </li>
+    <li [ngbNavItem]="3">
+        <button ngbNavLink>
+            <fa-icon [icon]="faPenNib" class="me-2" aria-hidden="true" />
+            <span i18n>Comments / History</span>
+        </button>
+        <ng-template ngbNavContent>
+            <la-annotation-comments />
+        </ng-template>
+    </li>
+</ul>
+
+<div [ngbNavOutlet]="nav" class="mt-2"></div>

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

@@ -1,25 +1,29 @@
+@let ccgParses = (parseResults$ | async);
 <div>
-    <h3>Parser: {{ parseResults.parser }}</h3>
     <div ngbAccordion>
-        @for (sentence of parseResults.sentences; track sentence.id) {
+        @for (parse of ccgParses; track $index) {
         <div ngbAccordionItem>
             <h2 ngbAccordionHeader>
                 <button ngbAccordionButton>
-                    {{ sentence.id }}: {{ sentence.text }}
+                    {{ parse.sentence }}
                 </button>
             </h2>
             <div ngbAccordionCollapse>
                 <div ngbAccordionBody>
                     <ng-template>
-                        <div class="d-flex flex-wrap gap-3 align-items-stretch">
-                            @for (parse of sentence.parses; track $index) {
-                            <la-parse-tree-table [tree]="parse" />
+                        <div class="d-flex flex-column gap-3 overflow-x-scroll">
+                            @for (tree of parse.ccgTrees; track $index) {
+                            <la-parse-tree-table [tree]="tree" />
                             }
                         </div>
                     </ng-template>
                 </div>
             </div>
         </div>
+        } @empty {
+        <div class="mt-3">
+            <i class="text-muted" i18n>No parse results to display yet. Press the 'Parse and Prove' button to see the parse results.</i>
+        </div>
         }
     </div>
 </div>

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

@@ -1,31 +1,51 @@
-import { Component, DestroyRef, inject, OnInit } from "@angular/core";
+import { Component, DestroyRef, inject } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-import { mockResult } from "./mockParseResult";
 import { ParseService } from "@/services/parse.service";
 import { ParseTreeTableComponent } from "./parse-tree-table/parse-tree-table.component";
 import { NgbAccordionModule } from "@ng-bootstrap/ng-bootstrap";
+import { map } from "rxjs";
+import { CommonModule } from "@angular/common";
+import { CCGNode, CCGParse } from "@/types";
+
+export interface TreeWithType {
+    type: string;
+    tree: CCGNode;
+}
+
+interface UnfoldedParseResult {
+    sentence: string;
+    ccgTrees: TreeWithType[];
+}
+
+function unfoldParseResult(parse: CCGParse): UnfoldedParseResult {
+    const { ccg_tree, ccg_term, corr_term, llf } = parse.ccg_trees;
+    // TODO: Reintroduce the other trees once they are serialized properly.
+    return {
+        ...parse,
+        ccgTrees: [
+            { type: "CCG Tree", tree: ccg_tree },
+            // { type: "CCG Term", tree: ccg_term },
+            // { type: "Corrected CCG Term", tree: corr_term },
+            // { type: "Lambda Logical Form", tree: llf }
+        ]
+    };
+}
 
 
 @Component({
     selector: "la-annotation-parse-results",
     standalone: true,
-    imports: [ParseTreeTableComponent, NgbAccordionModule],
+    imports: [ParseTreeTableComponent, NgbAccordionModule, CommonModule],
     templateUrl: "./annotation-parse-results.component.html",
     styleUrl: "./annotation-parse-results.component.scss",
 })
-export class AnnotationParseResultsComponent implements OnInit {
+export class AnnotationParseResultsComponent {
     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;
-            });
-    }
+    public parseResults$ = this.parseService.parse$
+        .pipe(
+            map(response => response?.data?.ccg_parses.map(parse => unfoldParseResult(parse)) ?? null),
+            takeUntilDestroyed(this.destroyRef)
+        );
 }

frontend/src/app/annotate/annotation-parse-results/parse-tree-table/parse-tree-table.component.html

@@ -1,10 +1,10 @@
-<div class="border border-secondary rounded overflow-hidden">
+<div class="border border-secondary rounded">
     <div class="card-header text-bg-secondary p-3">
         <h3 class="h5 fw-bold">{{ treeType() }}</h3>
     </div>
     <div class="p-4">
         <div class="d-flex border border-secondary">
-            <la-tree-node [node]="rootNode()" />
+            <la-tree-node [node]="displayTree()" />
         </div>
     </div>
 </div>

frontend/src/app/annotate/annotation-parse-results/parse-tree-table/parse-tree-table.component.scss

@@ -0,0 +1,3 @@
+:host {
+    width: fit-content;
+}

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

@@ -1,17 +1,12 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ParseTreeTableComponent } from './parse-tree-table.component';
-import { ParseTree, ParseTreeType } from '../types';
+import { TreeWithType } from '../annotation-parse-results.component';
 
-const mockTree: ParseTree = {
-    type: ParseTreeType.CCG_DERIVATION,
-    root: {
-        type: "leaf",
-        lem: "dog",
-        tok: "Dog",
-        pos: "NN",
-        ner: "O",
-        cat: "N"
+const mockTree: TreeWithType = {
+    type: "CCG Tree",
+    tree: {
+        node: ["NP", "The", "the", "DT", "O", "NP"],
     }
 }