Add ProblemDetails component

Author: XanderVertegaal

frontend/src/app/annotate/annotation-input/problem-details/judgement-badge/judgement-badge.component.html

@@ -0,0 +1 @@
+<span [class]="judgementClass()">{{ judgementText() }}</span>

frontend/src/app/annotate/annotation-input/problem-details/judgement-badge/judgement-badge.component.scss

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

frontend/src/app/annotate/annotation-input/problem-details/judgement-badge/judgement-badge.component.spec.ts

@@ -0,0 +1,44 @@
+import { Component, computed, input } from "@angular/core";
+import { Judgement } from "../../../../types";
+
+@Component({
+    selector: "la-judgement-badge",
+    standalone: true,
+    imports: [],
+    templateUrl: "./judgement-badge.component.html",
+    styleUrl: "./judgement-badge.component.scss",
+})
+export class JudgementBadgeComponent {
+    public judgement = input.required<Judgement>();
+
+    public judgementText = computed<string>(() => {
+        const judgement = this.judgement();
+        switch (judgement) {
+            case Judgement.ENTAILMENT:
+                return "Entailment";
+            case Judgement.CONTRADICTION:
+                return "Contradiction";
+            case Judgement.NEUTRAL:
+                return "Neutral";
+            case Judgement.UNKNOWN:
+            default:
+                return "Unknown";
+        }
+    });
+
+    public judgementClass = computed<string>(() => {
+        const judgement = this.judgement();
+        switch (judgement) {
+            case Judgement.ENTAILMENT:
+                return "badge text-bg-success";
+            case Judgement.CONTRADICTION:
+                return "badge text-bg-danger";
+            case Judgement.NEUTRAL:
+                return "badge text-bg-secondary";
+            case Judgement.UNKNOWN:
+                return "badge text-bg-warning";
+            default:
+                return "badge text-bg-secondary";
+        }
+    });
+}

frontend/src/app/annotate/annotation-input/problem-details/judgement-badge/judgement-badge.component.ts

@@ -0,0 +1,40 @@
+<div class="problem-details-container">
+    <div class="judgement-badge-container">
+        <span>Judgement:</span>
+        <la-judgement-badge
+            [judgement]="problemDetails().judgement"
+        ></la-judgement-badge>
+    </div>
+
+    <table class="table table-sm table-borderless">
+        <tbody>
+            <tr>
+                <td class="text-muted" i18n>ID:</td>
+                <td>{{ problemDetails().problemId }}</td>
+            </tr>
+            <tr>
+                <td class="text-muted" i18n>Dataset:</td>
+                <td>{{ problemDetails().dataset }}</td>
+            </tr>
+            <tr>
+                <td class="text-muted" i18n>Section:</td>
+                <td>{{ sectionString() }}</td>
+            </tr>
+            @if (problemDetails().comment) {
+            <tr>
+                <td class="text-muted">
+                    <span i18n>Comment:</span>
+                    <fa-icon
+                        class="ms-1"
+                        [icon]="faQuestionCircle"
+                        aria-hidden="true"
+                        ngbTooltip="Comments provided by Bill McCartney."
+                        i18n-ngbTooltip
+                    />
+                </td>
+                <td><i>{{ problemDetails().comment }}</i></td>
+            </tr>
+            }
+        </tbody>
+    </table>
+</div>

frontend/src/app/annotate/annotation-input/problem-details/problem-details.component.html

@@ -0,0 +1,17 @@
+.problem-detail-container {
+    position: relative;
+}
+
+.judgement-badge-container {
+    position: absolute;
+    top: 1em;
+    right: 1em;
+    display: flex;
+    gap: 0.5em;
+}
+
+.table {
+    td:first-child {
+        width: 8em;
+    }
+}

frontend/src/app/annotate/annotation-input/problem-details/problem-details.component.scss

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

frontend/src/app/annotate/annotation-input/problem-details/problem-details.component.spec.ts

@@ -0,0 +1,42 @@
+import { Component, computed, input } from "@angular/core";
+import { Dataset, Judgement } from "../../../types";
+import { JudgementBadgeComponent } from "./judgement-badge/judgement-badge.component";
+import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
+import { NgbTooltipModule } from "@ng-bootstrap/ng-bootstrap";
+
+export interface ProblemDetails {
+    problemId: string;
+    dataset: Dataset;
+    judgement: Judgement;
+    section: string | null;
+    subsection: string | null;
+    comment: string | null;
+}
+
+@Component({
+    selector: "la-problem-details",
+    standalone: true,
+    imports: [JudgementBadgeComponent, FontAwesomeModule, NgbTooltipModule],
+    templateUrl: "./problem-details.component.html",
+    styleUrl: "./problem-details.component.scss",
+})
+export class ProblemDetailsComponent {
+    public problemDetails = input.required<ProblemDetails>();
+
+    public faQuestionCircle = faQuestionCircle;
+
+    public sectionString = computed<string | null>(() => {
+        const problemDetails = this.problemDetails();
+        const section = problemDetails.section;
+        const subsection = problemDetails.subsection;
+        if (section && subsection) {
+            return `${section} | ${subsection}`;
+        } else if (section) {
+            return section;
+        } else if (subsection) {
+            return subsection;
+        }
+        return null;
+    });
+}