Add scaffolding for future parses

Author: XanderVertegaal

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

@@ -1,17 +1,21 @@
-@let ccgTrees = (parseResults$ | async)?.ccg_trees;
+@let ccgParses = (parseResults$ | async);
 <div>
     <div ngbAccordion>
-        @for (tree of ccgTrees; track $index) {
+        @for (parse of ccgParses; track $index) {
         <div ngbAccordionItem>
             <h2 ngbAccordionHeader>
                 <button ngbAccordionButton>
-                     --sentence-text--
+                    {{ parse.sentence }}
                 </button>
             </h2>
             <div ngbAccordionCollapse>
                 <div ngbAccordionBody>
                     <ng-template>
-                        <la-parse-tree-table [tree]="tree" />
+                        <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>

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

@@ -5,6 +5,31 @@ import { ParseTreeTableComponent } from "./parse-tree-table/parse-tree-table.com
 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 FlattenedParseResult {
+    sentence: string;
+    ccgTrees: TreeWithType[];
+}
+
+function flattenResult(parse: CCGParse): FlattenedParseResult {
+    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({
@@ -20,7 +45,7 @@ export class AnnotationParseResultsComponent {
 
     public parseResults$ = this.parseService.parse$
         .pipe(
-            map(response => response?.data || null),
+            map(response => response?.data?.ccg_parses.map(parse => flattenResult(parse)) ?? null),
             takeUntilDestroyed(this.destroyRef)
         );
 }

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

@@ -1,6 +1,6 @@
-<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">--tree type--</h3>
+        <h3 class="h5 fw-bold">{{ treeType() }}</h3>
     </div>
     <div class="p-4">
         <div class="d-flex border border-secondary">

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.ts

@@ -2,6 +2,7 @@ import { Component, computed, input } from '@angular/core';
 import { TreeNodeComponent } from './tree-node.component';
 import { CCGNode, LeafNode, BinaryNode, UnaryNode } from "../types";
 import { TreeNodeDisplay } from "./tree-node.component";
+import { TreeWithType } from '../annotation-parse-results.component';
 
 export function buildDisplayTree(node: CCGNode): TreeNodeDisplay {
     if (nodeIsLeaf(node)) {
@@ -20,7 +21,7 @@ export function buildDisplayTree(node: CCGNode): TreeNodeDisplay {
 }
 
 function nodeIsLeaf(node: CCGNode): node is LeafNode {
-    return Array.isArray(node.node);
+    return !('children' in node);
 }
 
 function nodeIsBinary(node: CCGNode): node is BinaryNode {
@@ -70,16 +71,16 @@ function buildUnaryNode(node: UnaryNode): TreeNodeDisplay {
 
 /**
  * Parses a node string to extract the rule and the content.
- * 
- * A node string is usually of the form "A(B)", where a is the rule applied 
+ *
+ * A node string is usually of the form "A(B)", where a is the rule applied
  * and B is the resulting category. The rule is anything everything before
- * the first parenthesis. Everything within it is the content. For example, 
+ * the first parenthesis. Everything within it is the content. For example,
  * in "fa(s:ng-np)", "fa" is the rule and "s:ng-np" is the content.
- * 
- * Due to a bug in the CCG parser, sometimes the node string can have 
- * multiple layers of parentheses, e.g. fa(((s:ng-np)-(s:ng-np))). 
+ *
+ * Due to a bug in the CCG parser, sometimes the node string can have
+ * multiple layers of parentheses, e.g. fa(((s:ng-np)-(s:ng-np))).
  * function only strips off the first.
- * 
+ *
  */
 function extractRule(nodeString: string): { rule: string, content: string; } {
     const firstParen = nodeString.indexOf('(');
@@ -107,7 +108,8 @@ function extractRule(nodeString: string): { rule: string, content: string; } {
     styleUrl: './parse-tree-table.component.scss'
 })
 export class ParseTreeTableComponent {
-    public readonly tree = input.required<CCGNode>();
+    public readonly tree = input.required<TreeWithType>();
 
-    public displayTree = computed(() => buildDisplayTree(this.tree()));
+    public displayTree = computed(() => buildDisplayTree(this.tree().tree));
+    public treeType = computed(() => this.tree().type);
 }

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

@@ -15,8 +15,14 @@ export type BinaryNode = {
 
 export type CCGNode = LeafNode | UnaryNode | BinaryNode;
 
+export type ParseTreeType = 'ccg_tree' | 'ccg_term' | 'corr_term' | 'llf';
+
+export interface CCGParse {
+    sentence: string;
+    ccg_trees: Record<ParseTreeType, CCGNode>;
+};
 
 export type ParseResponseData = {
-    ccg_trees: CCGNode[];
+    ccg_parses: CCGParse[];
     proofs: unknown[];
 };