Cleanup

Author: XanderVertegaal

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

@@ -19,13 +19,9 @@ const TreeTypeDisplay: Record<ParseTreeType, string> = {
 export class ParseTreeTableComponent {
     public readonly tree = input.required<ParseTree>();
 
-    public readonly rootNode = computed<TreeNodeDisplay>(() => {
-        return this.buildDisplayTree(this.tree().root);
-    });
+    public rootNode = computed(() => this.buildDisplayTree(this.tree().root));
 
-    public treeType = computed(() => {
-        return TreeTypeDisplay[this.tree().type] || "Unknown Type";
-    });
+    public treeType = computed(() => TreeTypeDisplay[this.tree().type] || "Unknown Type");
 
     private buildDisplayTree(node: ParseTreeNode): TreeNodeDisplay {
         switch (node.type) {

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

@@ -10,39 +10,41 @@
         }
     </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>
-        } }
+        }
+        @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

@@ -3,6 +3,8 @@
     min-height: 10em;
     text-align: center;
 
+    // Only highlight the current hovered node
+    // and its children, not its ancestors.
     &:hover:not(:has(.tree-node:hover)) {
         background-color: var(--bs-yellow);