refactored parse tree and data types

Author: bbonf

backend/problem/views/parse.py

@@ -70,6 +70,8 @@ def send_to_parser(self, data: ParserInput) -> dict | None:
         logger.info("Sending to LangPro service:", asdict(data))
 
         params = asdict(data)
+        # ask LangPro container to return results in a format suitable for
+        # this application
         params['format'] = 'annotator'
 
         try:

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

@@ -9,6 +9,7 @@ import { ParseResponse, ParseService } from "@/services/parse.service";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { ProblemResponse } from "@/types";
 import { ProblemService } from "@/services/problem.service";
+import { Tree } from "@/tree";
 
 @Component({
     selector: "la-annotate",
@@ -29,7 +30,7 @@ export class AnnotateComponent implements OnInit {
     private parseService = inject(ParseService);
     private problemService = inject(ProblemService);
 
-    public ccgTrees: any[] = [];
+    public ccgTrees: Tree<string>[] = [];
 
     private problem: ProblemResponse | null = null;
 
@@ -46,7 +47,7 @@ export class AnnotateComponent implements OnInit {
 
     onParse(response: ParseResponse) {
         console.log("Parse response:", response);
-        this.ccgTrees = response!.data.ccg_trees;
+        this.ccgTrees = response!.data.ccg_trees.map((tree: any) => new Tree(tree));
     }
 
     startParse() {

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

@@ -6,7 +6,6 @@ import {
     faTree,
     faPenNib,
 } from "@fortawesome/free-solid-svg-icons";
-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";
@@ -17,7 +16,6 @@ import { ParseSVG } from "../parse-tree/parse-svg.component";
     imports: [
         NgbNavModule,
         FontAwesomeModule,
-        AnnotationParseResultsComponent,
         AnnotationTableauComponent,
         AnnotationCommentsComponent,
         ParseSVG

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

@@ -1,8 +1,9 @@
 import { Component, ChangeDetectorRef, ElementRef, Input, ViewChild, afterNextRender} from '@angular/core';
 import { CommonModule } from "@angular/common";
 import { Subject } from "rxjs";
-import { Dimensions } from '@/types';
+import { CCGTerm, Dimensions } from '@/types';
 import { ParseTree } from './parse-tree.component';
+import { Tree } from "@/tree";
 import svgPanZoom from 'svg-pan-zoom';
 
 @Component({
@@ -34,5 +35,5 @@ export class ParseSVG {
     }
 
     @Input()
-    tree: any = {};
+    tree: Tree<CCGTerm> = Tree.empty();
 }

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

@@ -1,8 +1,8 @@
 import { Component, ElementRef, Input, Output, ViewChild, EventEmitter } from '@angular/core';
-import { Dimensions } from '@/types';
+import { CCGTerm, Dimensions } from '@/types';
 
 @Component({
-    selector: "[term]",
+    selector: "[parse-term]",
     standalone: true,
     imports: [],
     templateUrl: "./parse-term.component.svg",
@@ -19,7 +19,7 @@ export class ParseTerm {
     public bg?: string;
 
     @Input()
-    public term: string = '';
+    public term: CCGTerm = [];
 
     @Input()
     public end: boolean = false;

frontend/src/app/annotate/parse-tree/parse-term.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { ParseTerm } from './parse-term.component';
-import { Dimensions } from '@/types';
-import { sum } from "@/util";
+import { Dimensions, CCGTerm } from '@/types';
+import { TreeNode } from "@/tree";
 
 @Component({
     selector: "[parse-tree]",
@@ -11,38 +11,10 @@ import { sum } from "@/util";
     styleUrl: "./parse-tree.component.scss",
 })
 export class ParseTree {
-    expanded: boolean[] = [];
+    expanded: boolean = true;
 
-    _tree: any;
     @Input()
-    get tree(): any {
-        return this._tree;
-    }
-
-    set tree(value: any) {
-        if (value.children) {
-            // this is a temporary translation until the tree code can be refactored:
-            let translated =
-                (function translate(p: any) {
-                    if (!p) return;
-                    let out: any = {};
-                    if (Array.isArray(p.node)) {
-                        out.nodes = [{term: p.node}];
-                    }
-                    else {
-                        out.nodes = [{term: [p.node]}];
-                    }
-                    out.subtrees = p.children ? p.children.map(translate) : [];
-                    return out;
-                })(value);
-            this._tree = translated;
-        }
-        else {
-            this._tree = value;
-        }
-
-        this.expanded = [true];
-    }
+    treeNode: TreeNode<CCGTerm> = {value: [], children: []};
 
     levelHeight = 40;
 
@@ -73,62 +45,38 @@ export class ParseTree {
 
     emitSize() {
         this.onSize.emit({
-            width: Math.max(this.subWidth * (this.tree.subtrees?.length ?? 0), this.width),
-            height: this.subHeight + this.totalNodeHeight() + (this.tree.subtrees?.length ? this.levelHeight : 0)
+            width: Math.max(this.subWidth * (this.treeNode?.children?.length ?? 0), this.width),
+            height: this.subHeight + this.nodeHeight() + (this.treeNode?.children?.length ? this.levelHeight : 0)
         });
     }
 
     /* Determines the X coordinate of where subtree of index `idx` should be drawn */
     subtreePosition(idx: number) {
         let widthWithPadding = 1.15 * this.subWidth;
-        return widthWithPadding * idx - (widthWithPadding / 2) * (this.tree.subtrees.length - 1);
+        return widthWithPadding * idx - (widthWithPadding / 2) * (this.treeNode.children.length - 1);
     }
 
     /* Generates a path definition for linking the end of the current node to subtree index `idx` */
     subtreeLinkPath(idx: number) {
         return [
             // move to end of current node
-            `M 0 ${this.totalNodeHeight() - 15 }`,
+            `M 0 ${this.nodeHeight() - 15 }`,
             // curve to half-way to subtree
             `q 0 ${this.levelHeight/2} ${this.subtreePosition(idx)/2 } ${this.levelHeight/2}`,
             // curve from half-way to subtree, to subtree position
             `q ${this.subtreePosition(idx)/2} 0 ${this.subtreePosition(idx)/2} ${this.levelHeight/2}`
         ].join(' ');
     }
 
-    nodeHeight(node: any) {
-        // note that in this case height includes bottom padding for the node
-        return node.rule ? 60 : 40;
-    }
-
-    totalNodeHeight() {
-        return sum(this.tree.nodes.map(this.nodeHeight));
-    }
-
-    nodeY(idx: number) {
-        // y position of a given node is the sum of heights of all preceeding nodes
-        return sum(this.tree.nodes.slice(0, idx).map(this.nodeHeight));
-    }
-
-    termClick(idx: number) {
-        // the last node can't be collapsed
-        // unless there are subtrees
-        if (idx < this.expanded.length - 1 || this.tree.subtrees) {
-            this.expanded[idx] = !this.expanded[idx];
-        }
+    nodeHeight() {
+        return 40;
     }
 
-    visibleNodes() {
-        const firstCollpased = this.expanded.indexOf(false);
-        if (firstCollpased == -1) {
-            return this.tree.nodes;
-        }
-        return this.tree.nodes.slice(0, firstCollpased + 1);
+    termClick() {
+        this.expanded = !this.expanded;
     }
 
     showSubtrees() {
-        // if any of the current level nodes is collapsed, this also means
-        // we shouldn't render any subtrees
-        return this.expanded.indexOf(false) == -1;
+        return this.expanded;
     }
 }

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

@@ -83,3 +83,6 @@ export interface Dimensions {
     width: number;
     height: number;
 }
+
+
+export type CCGTerm = string[];