Use ParseService.proofs$ in AnnotationMenuComponent and TableauSVG

Author: jgonggrijp

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

@@ -1,3 +1,5 @@
+@let proofs = proofs$ | async;
+
 <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs flex-nowrap">
     <li [ngbNavItem]="1">
         <button ngbNavLink>
@@ -19,7 +21,9 @@
         </button>
         <ng-template ngbNavContent>
             <section>
-                <la-tableau-svg></la-tableau-svg>
+                @if (proofs) {
+                <la-tableau-svg [tree]="proofs.entailment"></la-tableau-svg>
+                }
             </section>
         </ng-template>
     </li>

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

@@ -1,11 +1,14 @@
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
+import { CommonModule } from "@angular/common";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { NgbNavModule } from "@ng-bootstrap/ng-bootstrap";
 import {
     faSquarePollHorizontal,
     faTree,
     faPenNib,
 } from "@fortawesome/free-solid-svg-icons";
+
+import { ParseService } from "@/services/parse.service";
 import { AnnotationParseResultsComponent } from "../annotation-parse-results/annotation-parse-results.component";
 import { TableauSVG } from '../tableau-svg/tableau-svg.component';
 import { AnnotationCommentsComponent } from "../annotation-comments/annotation-comments.component";
@@ -14,6 +17,7 @@ import { AnnotationCommentsComponent } from "../annotation-comments/annotation-c
     selector: "la-annotation-menu",
     standalone: true,
     imports: [
+        CommonModule,
         NgbNavModule,
         FontAwesomeModule,
         AnnotationParseResultsComponent,
@@ -24,6 +28,9 @@ import { AnnotationCommentsComponent } from "../annotation-comments/annotation-c
     styleUrl: "./annotation-menu.component.scss",
 })
 export class AnnotationMenuComponent {
+    private parseService = inject(ParseService);
+    public readonly proofs$ = this.parseService.proofs$;
+
     public active = 1;
 
     public faSquarePollHorizontal = faSquarePollHorizontal;

frontend/src/app/annotate/tableau-svg/tableau-svg.component.svg

@@ -1,9 +1,8 @@
-import { Component, ChangeDetectorRef} from '@angular/core';
+import { Component, ChangeDetectorRef, input } from '@angular/core';
 import { CommonModule } from "@angular/common";
 import { Subject } from "rxjs";
 import { Dimensions } from '@/types';
 import { TableauTree } from './tableau-tree.component';
-import mockTableau from '@/shared/mockTableauTree';
 
 @Component({
     selector: "la-tableau-svg",
@@ -28,5 +27,5 @@ export class TableauSVG {
         this.cdref.detectChanges();
     }
 
-    tree: any = mockTableau;
+    public readonly tree = input.required<any>();
 }