Skip to content

Commit 04fc5db

Browse files
XanderVertegaalXanderVertegaal
authored
Merge pull request #78 from CentreForDigitalHumanities/feature/langpro-parse-results
Feature/langpro parse results
2 parents 1f01702 + 178f5bb commit 04fc5db

13 files changed

Lines changed: 247 additions & 208 deletions

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

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
1-
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs flex-nowrap">
2-
<li [ngbNavItem]="1">
3-
<button ngbNavLink>
4-
<fa-icon
5-
[icon]="faSquarePollHorizontal"
6-
class="me-2"
7-
aria-hidden="true"
8-
/>
9-
<span i18n>CCG / LLF</span>
10-
</button>
11-
<ng-template ngbNavContent>
12-
<la-annotation-parse-results />
13-
</ng-template>
14-
</li>
15-
<li [ngbNavItem]="2">
16-
<button ngbNavLink>
17-
<fa-icon [icon]="faTree" class="me-2" aria-hidden="true" />
18-
<span i18n>Tableau / Proof</span>
19-
</button>
20-
<ng-template ngbNavContent>
21-
<la-annotation-tableau />
22-
</ng-template>
23-
</li>
24-
<li [ngbNavItem]="3">
25-
<button ngbNavLink>
26-
<fa-icon [icon]="faPenNib" class="me-2" aria-hidden="true" />
27-
<span i18n>Comments / History</span>
28-
</button>
29-
<ng-template ngbNavContent>
30-
<la-annotation-comments />
31-
</ng-template>
32-
</li>
33-
</ul>
34-
35-
<div [ngbNavOutlet]="nav" class="mt-2"></div>
1+
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs flex-nowrap">
2+
<li [ngbNavItem]="1">
3+
<button ngbNavLink>
4+
<fa-icon
5+
[icon]="faSquarePollHorizontal"
6+
class="me-2"
7+
aria-hidden="true"
8+
/>
9+
<span i18n>Syntactic parses</span>
10+
</button>
11+
<ng-template ngbNavContent>
12+
<la-annotation-parse-results />
13+
</ng-template>
14+
</li>
15+
<li [ngbNavItem]="2">
16+
<button ngbNavLink>
17+
<fa-icon [icon]="faTree" class="me-2" aria-hidden="true" />
18+
<span i18n>Tableau / Proof</span>
19+
</button>
20+
<ng-template ngbNavContent>
21+
<la-annotation-tableau />
22+
</ng-template>
23+
</li>
24+
<li [ngbNavItem]="3">
25+
<button ngbNavLink>
26+
<fa-icon [icon]="faPenNib" class="me-2" aria-hidden="true" />
27+
<span i18n>Comments / History</span>
28+
</button>
29+
<ng-template ngbNavContent>
30+
<la-annotation-comments />
31+
</ng-template>
32+
</li>
33+
</ul>
34+
35+
<div [ngbNavOutlet]="nav" class="mt-2"></div>

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

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,29 @@
1+
@let ccgParses = (parseResults$ | async);
12
<div>
2-
<h3>Parser: {{ parseResults.parser }}</h3>
33
<div ngbAccordion>
4-
@for (sentence of parseResults.sentences; track sentence.id) {
4+
@for (parse of ccgParses; track $index) {
55
<div ngbAccordionItem>
66
<h2 ngbAccordionHeader>
77
<button ngbAccordionButton>
8-
{{ sentence.id }}: {{ sentence.text }}
8+
{{ parse.sentence }}
99
</button>
1010
</h2>
1111
<div ngbAccordionCollapse>
1212
<div ngbAccordionBody>
1313
<ng-template>
14-
<div class="d-flex flex-wrap gap-3 align-items-stretch">
15-
@for (parse of sentence.parses; track $index) {
16-
<la-parse-tree-table [tree]="parse" />
14+
<div class="d-flex flex-column gap-3 overflow-x-scroll">
15+
@for (tree of parse.ccgTrees; track $index) {
16+
<la-parse-tree-table [tree]="tree" />
1717
}
1818
</div>
1919
</ng-template>
2020
</div>
2121
</div>
2222
</div>
23+
} @empty {
24+
<div class="mt-3">
25+
<i class="text-muted" i18n>No parse results to display yet. Press the 'Parse and Prove' button to see the parse results.</i>
26+
</div>
2327
}
2428
</div>
2529
</div>

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

Lines changed: 35 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,51 @@
1-
import { Component, DestroyRef, inject, OnInit } from "@angular/core";
1+
import { Component, DestroyRef, inject } from "@angular/core";
22
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
3-
import { mockResult } from "./mockParseResult";
43
import { ParseService } from "@/services/parse.service";
54
import { ParseTreeTableComponent } from "./parse-tree-table/parse-tree-table.component";
65
import { NgbAccordionModule } from "@ng-bootstrap/ng-bootstrap";
6+
import { map } from "rxjs";
7+
import { CommonModule } from "@angular/common";
8+
import { CCGNode, CCGParse } from "@/types";
9+
10+
export interface TreeWithType {
11+
type: string;
12+
tree: CCGNode;
13+
}
14+
15+
interface UnfoldedParseResult {
16+
sentence: string;
17+
ccgTrees: TreeWithType[];
18+
}
19+
20+
function unfoldParseResult(parse: CCGParse): UnfoldedParseResult {
21+
const { ccg_tree, ccg_term, corr_term, llf } = parse.ccg_trees;
22+
// TODO: Reintroduce the other trees once they are serialized properly.
23+
return {
24+
...parse,
25+
ccgTrees: [
26+
{ type: "CCG Tree", tree: ccg_tree },
27+
// { type: "CCG Term", tree: ccg_term },
28+
// { type: "Corrected CCG Term", tree: corr_term },
29+
// { type: "Lambda Logical Form", tree: llf }
30+
]
31+
};
32+
}
733

834

935
@Component({
1036
selector: "la-annotation-parse-results",
1137
standalone: true,
12-
imports: [ParseTreeTableComponent, NgbAccordionModule],
38+
imports: [ParseTreeTableComponent, NgbAccordionModule, CommonModule],
1339
templateUrl: "./annotation-parse-results.component.html",
1440
styleUrl: "./annotation-parse-results.component.scss",
1541
})
16-
export class AnnotationParseResultsComponent implements OnInit {
42+
export class AnnotationParseResultsComponent {
1743
private destroyRef = inject(DestroyRef);
1844
private parseService = inject(ParseService);
1945

20-
public parseResults = mockResult;
21-
22-
ngOnInit(): void {
23-
// Subscription needed to ensure a request is actually made.
24-
this.parseService.parse$
25-
.pipe(takeUntilDestroyed(this.destroyRef))
26-
.subscribe((response) => {
27-
console.log("Parse response:", response);
28-
this.parseResults = response.data.ccg_trees;
29-
});
30-
}
46+
public parseResults$ = this.parseService.parse$
47+
.pipe(
48+
map(response => response?.data?.ccg_parses.map(parse => unfoldParseResult(parse)) ?? null),
49+
takeUntilDestroyed(this.destroyRef)
50+
);
3151
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
<div class="border border-secondary rounded overflow-hidden">
1+
<div class="border border-secondary rounded">
22
<div class="card-header text-bg-secondary p-3">
33
<h3 class="h5 fw-bold">{{ treeType() }}</h3>
44
</div>
55
<div class="p-4">
66
<div class="d-flex border border-secondary">
7-
<la-tree-node [node]="rootNode()" />
7+
<la-tree-node [node]="displayTree()" />
88
</div>
99
</div>
1010
</div>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:host {
2+
width: fit-content;
3+
}

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

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,12 @@
11
import { ComponentFixture, TestBed } from '@angular/core/testing';
22

33
import { ParseTreeTableComponent } from './parse-tree-table.component';
4-
import { ParseTree, ParseTreeType } from '../types';
4+
import { TreeWithType } from '../annotation-parse-results.component';
55

6-
const mockTree: ParseTree = {
7-
type: ParseTreeType.CCG_DERIVATION,
8-
root: {
9-
type: "leaf",
10-
lem: "dog",
11-
tok: "Dog",
12-
pos: "NN",
13-
ner: "O",
14-
cat: "N"
6+
const mockTree: TreeWithType = {
7+
type: "CCG Tree",
8+
tree: {
9+
node: ["NP", "The", "the", "DT", "O", "NP"],
1510
}
1611
}
1712

0 commit comments

Comments
 (0)