Recursive TreeNode component

Author: XanderVertegaal

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

@@ -1,68 +1,10 @@
 <div class="border border-secondary rounded overflow-hidden">
     <div class="card-header text-bg-secondary p-3">
-        <h3 class="h5 fw-bold">{{ getTreeTypeDisplay(tree().type) }}</h3>
+        <h3 class="h5 fw-bold">{{ treeType() }}</h3>
     </div>
     <div class="p-4">
-        <table class="parse-tree-table" laParseTreeHighlight>
-            <tbody>
-                @for (row of tableRows(); track $index) {
-                <tr>
-                    @for (cell of row; track $index) {
-                    <td
-                        [attr.colspan]="cell.colspan"
-                        class="p-2 align-top text-center border"
-                        [class]="cell.type + '-cell'"
-                    >
-                        @if (cell.rule) {
-                            <span class="badge rounded pill text-bg-secondary">
-                                {{ cell.rule }}
-                            </span>
-                        }
-
-                        @switch (cell.type) {
-                            @case ('leaf') {
-                            <div class="d-flex flex-column align-items-center gap-2">
-                                <div class="h5 mb-0">
-                                    <strong>{{ cell.lem }}</strong>
-                                </div>
-                                <div class="text-secondary">
-                                    <small>{{ cell.tok }}</small>
-                                    <br />
-                                    <small>{{ cell.pos }}</small>
-                                    <br />
-                                    <small>{{ cell.ner }}</small>
-                                </div>
-                                <div
-                                    class="category"
-                                    [innerHTML]="
-                                        cell.content | subscriptAngleBrackets
-                                    "
-                                ></div>
-                            </div>
-                            }
-
-                            @case ('var') {
-                            <div class="d-flex flex-column gap-1">
-                                <strong class="h5 fw-bold mb-0">
-                                    {{ cell.content }}
-                                </strong>
-                                <br />
-                                <span>{{ cell.typeInfo }}</span>
-                            </div>
-                            }
-
-                            @case ('node') {
-                                <p
-                                    class="mb-0"
-                                    [innerHTML]="cell.content | subscriptAngleBrackets"
-                                ></p>
-                            }
-                        }
-                    </td>
-                    }
-                </tr>
-                }
-            </tbody>
-        </table>
+        <div class="d-flex border border-secondary">
+            <la-tree-node [node]="rootNode()" />
+        </div>
     </div>
 </div>

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

@@ -1,13 +0,0 @@
-td {
-    transition: background-color 0.2s ease;
-
-    &.highlight {
-        background-color: var(--bs-yellow);
-    }
-}
-
-.leaf-cell,
-.var-cell {
-    background-color: var(--bs-light);
-    min-width: 5rem;
-}

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

@@ -1,32 +1,6 @@
 import { Component, computed, input } from '@angular/core';
 import { BinaryNode, LeafNode, ParseTree, ParseTreeNode, ParseTreeType, UnaryNode, VariableNode } from '../types';
-import { SubscriptAngleBracketsPipe } from './subscript-angle-brackets.pipe';
-import { ParseTreeHighlightDirective } from './parse-tree-highlight.directive';
-
-interface BaseCell {
-    content: string;
-    rule?: string;
-    colspan: number;
-}
-
-interface NodeCell extends BaseCell {
-    type: "node";
-}
-
-interface LeafCell extends BaseCell {
-    type: "leaf";
-    tok: string;
-    lem: string;
-    pos: string;
-    ner: string;
-}
-
-interface VarCell extends BaseCell {
-    type: "var";
-    typeInfo: string;
-}
-
-type TableCell = NodeCell | LeafCell | VarCell;
+import { TreeNodeComponent, TreeNodeDisplay } from './tree-node.component';
 
 const TreeTypeDisplay: Record<ParseTreeType, string> = {
     [ParseTreeType.CCG_DERIVATION]: 'CCG Derivation',
@@ -38,23 +12,22 @@ const TreeTypeDisplay: Record<ParseTreeType, string> = {
 
 @Component({
     selector: 'la-parse-tree-table',
-    imports: [SubscriptAngleBracketsPipe, ParseTreeHighlightDirective],
+    imports: [TreeNodeComponent],
     templateUrl: './parse-tree-table.component.html',
     styleUrl: './parse-tree-table.component.scss'
 })
 export class ParseTreeTableComponent {
     public readonly tree = input.required<ParseTree>();
 
-    public readonly tableRows = computed<TableCell[][]>(() => {
-        const root = this.tree().root;
-        return this.createTableRows(root);
+    public readonly rootNode = computed<TreeNodeDisplay>(() => {
+        return this.buildDisplayTree(this.tree().root);
     });
 
-    public getTreeTypeDisplay(type: ParseTreeType): string {
-        return TreeTypeDisplay[type] || "Unknown Type";
-    }
+    public treeType = computed(() => {
+        return TreeTypeDisplay[this.tree().type] || "Unknown Type";
+    });
 
-    private createTableRows(node: ParseTreeNode): TableCell[][] {
+    private buildDisplayTree(node: ParseTreeNode): TreeNodeDisplay {
         switch (node.type) {
             case 'leaf':
                 return this.buildLeafNode(node);
@@ -67,73 +40,52 @@ export class ParseTreeTableComponent {
         }
     }
 
-    private getRowWidth(row: TableCell[]): number {
-        return row.reduce((sum, cell) => sum + cell.colspan, 0);
-    }
-
-    private buildLeafNode(node: LeafNode): TableCell[][] {
-        return [[{
-            ...node,
+    private buildLeafNode(node: LeafNode): TreeNodeDisplay {
+        return {
+            type: 'leaf',
             content: node.cat,
-            colspan: 1,
-        }]];
+            children: [],
+            leaf: {
+                tok: node.tok,
+                lem: node.lem,
+                pos: node.pos,
+                ner: node.ner
+            }
+        };
     }
 
-    private buildVariableNode(node: VariableNode): TableCell[][] {
-        return [[{
-            type: "var",
-            colspan: 1,
+    private buildVariableNode(node: VariableNode): TreeNodeDisplay {
+        return {
+            type: 'var',
             content: node.name,
-            typeInfo: node.typeInfo
-        }]];
+            children: [],
+            var: {
+                typeInfo: node.typeInfo
+            }
+        };
     }
 
-    private buildBinaryNode(node: BinaryNode): TableCell[][] {
-        const leftRows = this.createTableRows(node.left);
-        const rightRows = this.createTableRows(node.right);
-
-        // Pad shorter side with empty rows
-        const maxRows = Math.max(leftRows.length, rightRows.length);
-
-        while (leftRows.length < maxRows) {
-            const previousRow = leftRows[leftRows.length - 1];
-            const leftWidth = previousRow ? this.getRowWidth(previousRow) : 1;
-            leftRows.push([{ content: '', colspan: leftWidth, type: "node" }]);
-        }
-        while (rightRows.length < maxRows) {
-            const previousRow = rightRows[rightRows.length - 1];
-            const rightWidth = previousRow ? this.getRowWidth(previousRow) : 1;
-            rightRows.push([{ content: '', colspan: rightWidth, type: "node" }]);
-        }
-
-        // Combine rows horizontally
-        const combinedRows: TableCell[][] = [];
-        for (let i = 0; i < maxRows; i++) {
-            combinedRows.push([...leftRows[i], ...rightRows[i]]);
-        }
+    private buildBinaryNode(node: BinaryNode): TreeNodeDisplay {
+        const left = this.buildDisplayTree(node.left);
+        const right = this.buildDisplayTree(node.right);
 
-        // Add parent node row
-        const binaryTotalWidth = this.getRowWidth(combinedRows[0]);
-        combinedRows.push([{
+        return {
+            type: 'node',
             content: node.cat,
             rule: node.rule,
-            colspan: binaryTotalWidth,
-            type: "node"
-        }]);
-
-        return combinedRows;
+            children: [left, right]
+        };
     }
 
-    private buildUnaryNode(node: UnaryNode): TableCell[][] {
-        const childRows = this.createTableRows(node.child);
-        const unaryTotalWidth = this.getRowWidth(childRows[0]);
-        childRows.push([{
+    private buildUnaryNode(node: UnaryNode): TreeNodeDisplay {
+        const child = this.buildDisplayTree(node.child);
+
+        return {
+            type: 'node',
             content: node.cat,
             rule: node.rule,
-            colspan: unaryTotalWidth,
-            type: "node"
-        }]);
-        return childRows;
+            children: [child]
+        };
     }
 
 }

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

@@ -0,0 +1,48 @@
+@let hasChildren = node().children.length > 0;
+<div
+    class="tree-node d-flex flex-column"
+    [class.terminal-node]="!hasChildren"
+>
+    @if (hasChildren) {
+    <div class="d-flex">
+        @for (childRow of node().children; track $index) {
+        <la-tree-node [node]="childRow" />
+        }
+    </div>
+    }
+
+    <div class="node-content d-flex flex-column align-items-center p-2 gap-1">
+        @if (node().rule) {
+        <span class="badge rounded-pill text-bg-secondary mt-2">
+            {{ node().rule }}
+        </span>
+        } @switch (node().type) { @case ('leaf') {
+        <div class="d-flex flex-column align-items-center gap-2">
+            <div class="h5 mb-0">
+                <strong>{{ node().leaf?.lem }}</strong>
+            </div>
+            <div class="text-secondary">
+                <small>{{ node().leaf?.tok }}</small>
+                <br />
+                <small>{{ node().leaf?.pos }}</small>
+                <br />
+                <small>{{ node().leaf?.ner }}</small>
+            </div>
+            <div [innerHTML]="node().content | subscriptAngleBrackets"></div>
+        </div>
+        } @case ('var') {
+        <div class="d-flex flex-column gap-1">
+            <strong class="h5 fw-bold mb-0">
+                {{ node().content }}
+            </strong>
+            <br />
+            <span>{{ node().var?.typeInfo }}</span>
+        </div>
+        } @case ('node') {
+        <p
+            class="mb-0"
+            [innerHTML]="node().content | subscriptAngleBrackets"
+        ></p>
+        } }
+    </div>
+</div>

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

@@ -0,0 +1,22 @@
+.tree-node {
+    transition: background-color 0.2s ease;
+    min-height: 10em;
+    text-align: center;
+
+    &:hover:not(:has(.tree-node:hover)) {
+        background-color: var(--bs-yellow);
+
+        .tree-node {
+            background-color: var(--bs-yellow);
+        }
+    }
+}
+
+:not(.terminal-node) > .node-content {
+    border-top: 1px solid var(--bs-gray-500);
+}
+
+.terminal-node {
+    background-color: var(--bs-light);
+    min-width: 5rem;
+}

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

@@ -0,0 +1,31 @@
+import { Component, input } from '@angular/core';
+import { SubscriptAngleBracketsPipe } from './subscript-angle-brackets.pipe';
+
+export interface TreeNodeDisplay {
+    type: 'node' | 'leaf' | 'var';
+    content: string;
+    rule?: string;
+    children: TreeNodeDisplay[];
+    // For leaf nodes
+    leaf?: {
+        tok: string;
+        lem: string;
+        pos: string;
+        ner: string;
+    };
+    // For variable nodes
+    var?: {
+        typeInfo: string;
+    };
+}
+
+@Component({
+    selector: 'la-tree-node',
+    standalone: true,
+    imports: [SubscriptAngleBracketsPipe],
+    templateUrl: './tree-node.component.html',
+    styleUrl: './tree-node.component.scss'
+})
+export class TreeNodeComponent {
+    public readonly node = input.required<TreeNodeDisplay>();
+}