Merge pull request #72 from CentreForDigitalHumanities/feature/display-syntactic-parses

Feature/display syntactic parses

Author: XanderVertegaal

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

@@ -1,6 +1,25 @@
-<ul>
-    <li>
-        Combinatory Categorial Grammar (CCG) derivations, either C&C or EasyCCG
-    </li>
-    <li>Lambda Logical Forms (LLF)</li>
-</ul>
+<div>
+    <h3>Parser: {{ parseResults.parser }}</h3>
+    <div ngbAccordion>
+        @for (sentence of parseResults.sentences; track sentence.id) {
+        <div ngbAccordionItem>
+            <h2 ngbAccordionHeader>
+                <button ngbAccordionButton>
+                    {{ sentence.id }}: {{ sentence.text }}
+                </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>
+                    </ng-template>
+                </div>
+            </div>
+        </div>
+        }
+    </div>
+</div>

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

@@ -1,10 +1,16 @@
-import { Component } from "@angular/core";
-
-@Component({
-    selector: "la-annotation-parse-results",
-    standalone: true,
-    imports: [],
-    templateUrl: "./annotation-parse-results.component.html",
-    styleUrl: "./annotation-parse-results.component.scss",
-})
-export class AnnotationParseResultsComponent {}
+import { Component } from "@angular/core";
+import { mockResult } from "./mockParseResult";
+import { ParseTreeTableComponent } from "./parse-tree-table/parse-tree-table.component";
+import { NgbAccordionModule } from "@ng-bootstrap/ng-bootstrap";
+
+
+@Component({
+    selector: "la-annotation-parse-results",
+    standalone: true,
+    imports: [ParseTreeTableComponent, NgbAccordionModule],
+    templateUrl: "./annotation-parse-results.component.html",
+    styleUrl: "./annotation-parse-results.component.scss",
+})
+export class AnnotationParseResultsComponent {
+    public readonly parseResults = mockResult;
+}