Add NoData component

Author: XanderVertegaal

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

@@ -23,6 +23,8 @@
             <section class="overflow-x-scroll">
                 @if (proofs) {
                 <la-tableau-svg [tree]="proofs.entailment"></la-tableau-svg>
+                } @else {
+                <la-no-data dataType="proof" />
                 }
             </section>
         </ng-template>
@@ -36,6 +38,8 @@
             <section class="overflow-x-scroll">
                 @if (proofs) {
                 <la-tableau-svg [tree]="proofs.contradiction"></la-tableau-svg>
+                } @else {
+                <la-no-data dataType="proof" />
                 }
             </section>
         </ng-template>

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

@@ -11,6 +11,7 @@ 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";
+import { NoDataComponent } from "@/shared/no-data/no-data.component";
 
 @Component({
     selector: "la-annotation-menu",
@@ -22,6 +23,7 @@ import { AnnotationCommentsComponent } from "../annotation-comments/annotation-c
         AnnotationParseResultsComponent,
         TableauSVG,
         AnnotationCommentsComponent,
+        NoDataComponent,
     ],
     templateUrl: "./annotation-menu.component.html",
     styleUrl: "./annotation-menu.component.scss",

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

@@ -21,9 +21,7 @@ <h2 ngbAccordionHeader>
             </div>
         </div>
         } @empty {
-        <div class="mt-3">
-            <i class="text-muted" i18n>No parse results to display yet. Press the 'Parse and Prove' button to see the parse results.</i>
-        </div>
+        <la-no-data dataType="parse" />
         }
     </div>
 </div>

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

@@ -6,6 +6,7 @@ import { NgbAccordionModule } from "@ng-bootstrap/ng-bootstrap";
 import { map } from "rxjs";
 import { CommonModule } from "@angular/common";
 import { CCGNode, CCGParse } from "@/types";
+import { NoDataComponent } from "@/shared/no-data/no-data.component";
 
 export interface TreeWithType {
     type: string;
@@ -35,7 +36,12 @@ function unfoldParseResult(parse: CCGParse): UnfoldedParseResult {
 @Component({
     selector: "la-annotation-parse-results",
     standalone: true,
-    imports: [ParseTreeTableComponent, NgbAccordionModule, CommonModule],
+    imports: [
+        ParseTreeTableComponent,
+        NgbAccordionModule,
+        CommonModule,
+        NoDataComponent,
+    ],
     templateUrl: "./annotation-parse-results.component.html",
     styleUrl: "./annotation-parse-results.component.scss",
 })

frontend/src/app/shared/no-data/no-data.component.html

@@ -0,0 +1,6 @@
+@let noDataType = dataType();
+
+<i class="text-muted" i18n>
+    No {{ noDataType }} results to display yet. Press the 'Parse and Prove'
+    button to see the {{ noDataType }} results.
+</i>

frontend/src/app/shared/no-data/no-data.component.scss

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NoDataComponent } from './no-data.component';
+
+describe('NoDataComponent', () => {
+    let component: NoDataComponent;
+    let fixture: ComponentFixture<NoDataComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [NoDataComponent]
+        })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(NoDataComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

frontend/src/app/shared/no-data/no-data.component.spec.ts

@@ -0,0 +1,12 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+    selector: 'la-no-data',
+    imports: [],
+    templateUrl: './no-data.component.html',
+    styleUrl: './no-data.component.scss',
+    standalone: true,
+})
+export class NoDataComponent {
+    public readonly dataType = input.required<'parse'|'proof'>();
+}