From c1dfcc5d1736aa591564ef02f459dea10d7a354b Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Fri, 22 May 2026 12:13:19 +0200
Subject: [PATCH 1/6] Add AnnotationComments component

---
 .../annotation-comments.component.html        |  54 ++++++-
 .../annotation-comments.component.scss        |  20 +++
 .../annotation-comments.component.spec.ts     | 138 ++++++++++++++++--
 .../annotation-comments.component.ts          | 100 ++++++++++++-
 4 files changed, 294 insertions(+), 18 deletions(-)

diff --git a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.html b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.html
index 47cddac6..89896ad2 100644
--- a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.html
+++ b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.html
@@ -1,4 +1,52 @@
-<ul>
-    <li>Annotation history: who did what when?</li>
-    <li>Ability to 'gold'/'ungold' sentences</li>
+@let events = events$ | async; @if (events === null) {
+<p class="text-muted small fst-italic" i18n>Loading…</p>
+} @else if (events.length === 0) {
+<p class="text-muted small fst-italic" i18n>No annotations yet.</p>
+} @else {
+<ul class="list-unstyled d-flex flex-column gap-2 mb-0">
+    @for (event of events; track $index) {
+    <li>
+        <div
+            class="card annotation-event border-0 shadow-sm"
+            [class.annotation-event--added]="event.kind === 'added'"
+            [class.annotation-event--removed]="event.kind === 'removed'"
+        >
+            <div class="card-body py-2 px-3 d-flex align-items-center gap-3">
+                <span
+                    class="badge rounded-pill flex-shrink-0"
+                    [class.text-bg-success]="event.kind === 'added'"
+                    [class.text-bg-danger]="event.kind === 'removed'"
+                >
+                    <fa-icon
+                        [icon]="event.kind === 'added' ? faPlus : faMinus"
+                    />
+                </span>
+                <span
+                    class="flex-shrink-0 text-secondary annotation-kind-icon"
+                    [title]="
+                        event.annotationKind === 'label'
+                            ? 'Label annotation'
+                            : 'Knowledge base annotation'
+                    "
+                >
+                    <fa-icon
+                        [icon]="
+                            event.annotationKind === 'label' ? faTag : faLink
+                        "
+                    />
+                </span>
+                <span class="flex-grow-1 fw-medium annotation-description">{{
+                    event.description
+                }}</span>
+                <span class="text-secondary small text-end flex-shrink-0">
+                    {{ event.actor }}<br />
+                    <span class="text-muted">{{
+                        event.timestamp | date : "medium"
+                    }}</span>
+                </span>
+            </div>
+        </div>
+    </li>
+    }
 </ul>
+}
diff --git a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.scss b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.scss
index e69de29b..74bf5cec 100644
--- a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.scss
+++ b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.scss
@@ -0,0 +1,20 @@
+.annotation-event {
+    border-left: 3px solid transparent;
+
+    &--added {
+        border-left-color: var(--bs-success);
+    }
+
+    &--removed {
+        border-left-color: var(--bs-danger);
+    }
+}
+
+.annotation-kind-icon {
+    width: 1rem;
+    text-align: center;
+}
+
+.annotation-description {
+    font-family: monospace;
+}
diff --git a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.spec.ts b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.spec.ts
index 600e4afc..bb6eabf7 100644
--- a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.spec.ts
+++ b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.spec.ts
@@ -1,22 +1,136 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { TestBed } from "@angular/core/testing";
+import { of } from "rxjs";
 
-import { AnnotationCommentsComponent } from "./annotation-comments.component";
+import { ProblemService } from "@/services/problem.service";
+import { Dataset, EntailmentLabel, KnowledgeBaseRelationship } from "@/types";
+import { AnnotationCommentsComponent, AnnotationEvent } from "./annotation-comments.component";
 
-describe("AnnotationCommentsComponent", () => {
-    let component: AnnotationCommentsComponent;
-    let fixture: ComponentFixture<AnnotationCommentsComponent>;
+const baseAnnotationFields = {
+    id: 1,
+    session: 1,
+    notes: "",
+    removable: false,
+    removedAt: null,
+    removedBy: null,
+};
 
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            imports: [AnnotationCommentsComponent],
-        }).compileComponents();
+function setupComponent(kbAnnotations: unknown[] = [], labelAnnotations: unknown[] = []) {
+    const mockProblem = {
+        id: 1,
+        base: null,
+        premises: [],
+        hypothesis: null,
+        entailmentLabel: EntailmentLabel.UNKNOWN,
+        dataset: Dataset.USER,
+        extraData: null,
+        kbAnnotations,
+        labelAnnotations,
+    };
 
-        fixture = TestBed.createComponent(AnnotationCommentsComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
+    TestBed.configureTestingModule({
+        imports: [AnnotationCommentsComponent],
+        providers: [
+            { provide: ProblemService, useValue: { problem$: of(mockProblem) } },
+        ],
     });
 
+    const fixture = TestBed.createComponent(AnnotationCommentsComponent);
+    fixture.detectChanges();
+    return fixture.componentInstance;
+}
+
+describe("AnnotationCommentsComponent", () => {
     it("should create", () => {
+        const component = setupComponent();
         expect(component).toBeTruthy();
     });
+
+    it("emits an 'added' event for each annotation", (done) => {
+        const component = setupComponent(
+            [],
+            [
+                {
+                    ...baseAnnotationFields,
+                    createdAt: "2024-01-01T10:00:00Z",
+                    createdBy: "Alice",
+                    label: { id: 1, text: "negation", description: "" },
+                    attachedByCurrentUser: false,
+                },
+            ]
+        );
+
+        component.events$.subscribe((events: AnnotationEvent[]) => {
+            expect(events.length).toBe(1);
+            expect(events[0]).toEqual(
+                jasmine.objectContaining({
+                    kind: "added",
+                    annotationKind: "label",
+                    actor: "Alice",
+                    description: "negation",
+                })
+            );
+            done();
+        });
+    });
+
+    it("emits a 'removed' event when removedAt is set", (done) => {
+        const component = setupComponent(
+            [
+                {
+                    ...baseAnnotationFields,
+                    createdAt: "2024-01-01T10:00:00Z",
+                    createdBy: "Bob",
+                    removedAt: "2024-01-02T10:00:00Z",
+                    removedBy: "3",
+                    entity1: "cat",
+                    relationship: KnowledgeBaseRelationship.EQUAL,
+                    entity2: "feline",
+                },
+            ],
+            []
+        );
+
+        component.events$.subscribe((events: AnnotationEvent[]) => {
+            expect(events.length).toBe(2);
+            const removed = events.find((e) => e.kind === "removed");
+            expect(removed).toEqual(
+                jasmine.objectContaining({
+                    kind: "removed",
+                    annotationKind: "knowledgeBase",
+                    description: "cat = feline",
+                })
+            );
+            done();
+        });
+    });
+
+    it("sorts events by timestamp descending", (done) => {
+        const component = setupComponent(
+            [],
+            [
+                {
+                    ...baseAnnotationFields,
+                    id: 1,
+                    createdAt: "2024-01-01T10:00:00Z",
+                    createdBy: "Alice",
+                    label: { id: 1, text: "first", description: "" },
+                    attachedByCurrentUser: false,
+                },
+                {
+                    ...baseAnnotationFields,
+                    id: 2,
+                    createdAt: "2024-01-03T10:00:00Z",
+                    createdBy: "Bob",
+                    label: { id: 2, text: "latest", description: "" },
+                    attachedByCurrentUser: false,
+                },
+            ]
+        );
+
+        component.events$.subscribe((events: AnnotationEvent[]) => {
+            expect(events[0].description).toBe("latest");
+            expect(events[1].description).toBe("first");
+            done();
+        });
+    });
 });
diff --git a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.ts b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.ts
index 1a6625cb..77b0eb9e 100644
--- a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.ts
+++ b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.ts
@@ -1,10 +1,104 @@
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
+import { faTag, faLink, faPlus, faMinus } from "@fortawesome/free-solid-svg-icons";
+import { map } from "rxjs";
+
+import { ProblemService } from "@/services/problem.service";
+import {
+    KnowledgeBaseAnnotation,
+    KnowledgeBaseRelationship,
+    LabelAnnotation,
+} from "@/types";
+
+type AnnotationEventKind = "added" | "removed";
+type AnnotationKind = "label" | "knowledgeBase";
+
+export interface AnnotationEvent {
+    kind: AnnotationEventKind;
+    annotationKind: AnnotationKind;
+    timestamp: string;
+    actor: string;
+    description: string;
+}
+
+const relationshipSymbols: Record<KnowledgeBaseRelationship, string> = {
+    [KnowledgeBaseRelationship.EQUAL]: "=",
+    [KnowledgeBaseRelationship.NOT_EQUAL]: "≠",
+    [KnowledgeBaseRelationship.SUBSET]: "⊂",
+    [KnowledgeBaseRelationship.SUPERSET]: "⊃",
+};
+
+function kbAnnotationToEvents(annotation: KnowledgeBaseAnnotation): AnnotationEvent[] {
+    const description = `${annotation.entity1} ${relationshipSymbols[annotation.relationship]} ${annotation.entity2}`;
+    const events: AnnotationEvent[] = [
+        {
+            kind: "added",
+            annotationKind: "knowledgeBase",
+            timestamp: annotation.createdAt,
+            actor: annotation.createdBy,
+            description,
+        },
+    ];
+    if (annotation.removedAt && annotation.removedBy) {
+        events.push({
+            kind: "removed",
+            annotationKind: "knowledgeBase",
+            timestamp: annotation.removedAt,
+            actor: annotation.removedBy,
+            description,
+        });
+    }
+    return events;
+}
+
+function labelAnnotationToEvents(annotation: LabelAnnotation): AnnotationEvent[] {
+    const description = annotation.label.text;
+    const events: AnnotationEvent[] = [
+        {
+            kind: "added",
+            annotationKind: "label",
+            timestamp: annotation.createdAt,
+            actor: annotation.createdBy,
+            description,
+        },
+    ];
+    if (annotation.removedAt && annotation.removedBy) {
+        events.push({
+            kind: "removed",
+            annotationKind: "label",
+            timestamp: annotation.removedAt,
+            actor: annotation.removedBy,
+            description,
+        });
+    }
+    return events;
+}
 
 @Component({
     selector: "la-annotation-comments",
     standalone: true,
-    imports: [],
+    imports: [CommonModule, FontAwesomeModule],
     templateUrl: "./annotation-comments.component.html",
     styleUrl: "./annotation-comments.component.scss",
 })
-export class AnnotationCommentsComponent {}
+export class AnnotationCommentsComponent {
+    private readonly problemService = inject(ProblemService);
+
+    public readonly events$ = this.problemService.problem$.pipe(
+        map((problem) => {
+            if (!problem) {
+                return [];
+            }
+            return [
+                ...problem.kbAnnotations.flatMap(kbAnnotationToEvents),
+                ...problem.labelAnnotations.flatMap(labelAnnotationToEvents),
+            ].sort((a, b) => b.timestamp.localeCompare(a.timestamp));
+        })
+    );
+
+    public readonly faPlus = faPlus;
+    public readonly faMinus = faMinus;
+    public readonly faTag = faTag;
+    public readonly faLink = faLink;
+}

From c6281f104f39c5b2c2765d1a02a26b7eb96a894b Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Sat, 23 May 2026 15:46:10 +0200
Subject: [PATCH 2/6] Do not filter out removed annotations in requested
 problem

---
 backend/annotation/serializers.py             | 17 +++++++---
 backend/annotation/serializers_test.py        |  2 --
 backend/problem/views/problem.py              |  8 ++---
 .../annotation-comments.component.html        |  7 +++--
 .../annotation-input.component.ts             | 31 ++++++++++---------
 .../problem-details.component.ts              |  2 +-
 6 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/backend/annotation/serializers.py b/backend/annotation/serializers.py
index 3f253165..0974abbd 100644
--- a/backend/annotation/serializers.py
+++ b/backend/annotation/serializers.py
@@ -17,12 +17,14 @@ class AnnotationBaseSerializer(serializers.ModelSerializer):
     """
 
     createdAt = serializers.DateTimeField(source="created_at", read_only=True)
-    createdBy = serializers.SerializerMethodField(method_name="get_createdBy", read_only=True)
+    createdBy = serializers.SerializerMethodField(
+        method_name="get_created_by", read_only=True
+    )
     removedAt = serializers.DateTimeField(
         source="removed_at", allow_null=True, read_only=True
     )
-    removedBy = serializers.PrimaryKeyRelatedField(
-        source="removed_by", allow_null=True, read_only=True
+    removedBy = serializers.SerializerMethodField(
+        method_name="get_removed_by", allow_null=True, read_only=True
     )
     removable = serializers.SerializerMethodField(read_only=True)
 
@@ -45,10 +47,15 @@ def get_removable(self, annotation) -> bool:
         """This should be overridden in subclasses."""
         raise NotImplementedError("Subclasses must implement get_removable method.")
 
-    def get_createdBy(self, annotation) -> str | None:
+    def get_created_by(self, annotation) -> str | None:
         """Returns the full name of the user who created the annotation."""
         return annotation.created_by.get_full_name()
 
+    def get_removed_by(self, annotation) -> str | None:
+        """Returns the full name of the user who removed the annotation, or None if not removed."""
+        if annotation.removed_by:
+            return annotation.removed_by.get_full_name()
+        return None
 
 
 class KnowledgeBaseAnnotationSerializer(AnnotationBaseSerializer):
@@ -95,6 +102,7 @@ def validate_id(self, value):
             f"KnowledgeBaseAnnotation item with ID {value} does not exist."
         )
 
+
 class LabelSerializer(serializers.ModelSerializer):
     """
     Serializer for Label model.
@@ -156,6 +164,7 @@ def get_removable(self, annotation: LabelAnnotation) -> bool:
 
         return False
 
+
 class SelectedLabelSerializer(serializers.Serializer):
     """Serializer for a selected label in the save labels input."""
 
diff --git a/backend/annotation/serializers_test.py b/backend/annotation/serializers_test.py
index de578b5e..30cdd8be 100644
--- a/backend/annotation/serializers_test.py
+++ b/backend/annotation/serializers_test.py
@@ -1,7 +1,6 @@
 import pytest
 from typing import Any
 
-from django.utils import timezone
 from django.contrib.auth.models import Permission
 from rest_framework.test import APIRequestFactory
 
@@ -11,7 +10,6 @@
     LabelAnnotationSerializer,
     SaveLabelsInputSerializer,
 )
-from problem.serializers import ProblemSerializer
 
 
 @pytest.mark.django_db
diff --git a/backend/problem/views/problem.py b/backend/problem/views/problem.py
index e27b871e..d26b3813 100644
--- a/backend/problem/views/problem.py
+++ b/backend/problem/views/problem.py
@@ -96,12 +96,8 @@ def _get_problem_response(self, request: Request, pk: int | None) -> Response:
 
         serializer = self.get_serializer(problem)
 
-        kb_annotations = KnowledgeBaseAnnotation.objects.filter(
-            problem=problem, removed_at__isnull=True
-        )
-        label_annotations = LabelAnnotation.objects.filter(
-            problem=problem, removed_at__isnull=True
-        )
+        kb_annotations = KnowledgeBaseAnnotation.objects.filter(problem=problem)
+        label_annotations = LabelAnnotation.objects.filter(problem=problem)
 
         # kbAnnotations and labelAnnotations are not included in the
         # ProblemSerializer because they require additional context for
diff --git a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.html b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.html
index 89896ad2..334c15c2 100644
--- a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.html
+++ b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.html
@@ -1,6 +1,9 @@
-@let events = events$ | async; @if (events === null) {
+@let events = events$ | async;
+
+@if (events === null) {
 <p class="text-muted small fst-italic" i18n>Loading…</p>
-} @else if (events.length === 0) {
+}
+@else if (events.length === 0) {
 <p class="text-muted small fst-italic" i18n>No annotations yet.</p>
 } @else {
 <ul class="list-unstyled d-flex flex-column gap-2 mb-0">
diff --git a/frontend/src/app/annotate/annotation-input/annotation-input.component.ts b/frontend/src/app/annotate/annotation-input/annotation-input.component.ts
index 28f89975..8d6f4556 100644
--- a/frontend/src/app/annotate/annotation-input/annotation-input.component.ts
+++ b/frontend/src/app/annotate/annotation-input/annotation-input.component.ts
@@ -187,20 +187,23 @@ export class AnnotationInputComponent implements OnInit {
             kbItems: new FormArray<KBItemForm>(kbItems),
         });
     }
+
     private buildKbForms(inputKbItems: KnowledgeBaseAnnotation[]): KBItemForm[] {
-        return inputKbItems.map(item => new FormGroup({
-            id: new FormControl<number | null>(item.id, {
-                nonNullable: true
-            }),
-            entity1: new FormControl<string>(item.entity1, {
-                nonNullable: true
-            }),
-            entity2: new FormControl<string>(item.entity2, {
-                nonNullable: true
-            }),
-            relationship: new FormControl<KnowledgeBaseRelationship>(item.relationship, {
-                nonNullable: true
-            })
-        }));
+        return inputKbItems
+            .filter(item => item.removedAt === null)
+            .map(item => new FormGroup({
+                id: new FormControl<number | null>(item.id, {
+                    nonNullable: true
+                }),
+                entity1: new FormControl<string>(item.entity1, {
+                    nonNullable: true
+                }),
+                entity2: new FormControl<string>(item.entity2, {
+                    nonNullable: true
+                }),
+                relationship: new FormControl<KnowledgeBaseRelationship>(item.relationship, {
+                    nonNullable: true
+                })
+            }));
     }
 }
diff --git a/frontend/src/app/annotate/annotation-input/problem-details/problem-details.component.ts b/frontend/src/app/annotate/annotation-input/problem-details/problem-details.component.ts
index 78c47856..28ea6aab 100644
--- a/frontend/src/app/annotate/annotation-input/problem-details/problem-details.component.ts
+++ b/frontend/src/app/annotate/annotation-input/problem-details/problem-details.component.ts
@@ -79,7 +79,7 @@ export class ProblemDetailsComponent {
             baseProblemId: problem.base?.toString() ?? null,
             dataset: problem.dataset,
             entailmentLabel: problem.entailmentLabel,
-            labelAnnotations: problem.labelAnnotations ?? [],
+            labelAnnotations: problem.labelAnnotations.filter(a => a.removedAt === null) ?? [],
         };
 
         switch (problem.dataset) {

From 3a0ac2f31085c06d144cec11fc290a2f85e82392 Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Sat, 23 May 2026 16:05:56 +0200
Subject: [PATCH 3/6] Update annotation list styling

---
 .../annotation-comments.component.html        | 59 +++++++------------
 .../annotation-comments.component.scss        | 19 ------
 .../annotation-comments.component.ts          |  4 +-
 3 files changed, 24 insertions(+), 58 deletions(-)

diff --git a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.html b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.html
index 334c15c2..0ccb6c70 100644
--- a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.html
+++ b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.html
@@ -5,47 +5,32 @@
 }
 @else if (events.length === 0) {
 <p class="text-muted small fst-italic" i18n>No annotations yet.</p>
-} @else {
+}
+@else {
 <ul class="list-unstyled d-flex flex-column gap-2 mb-0">
     @for (event of events; track $index) {
+    @let added = event.kind === "added";
+    @let isLabel = event.annotationKind === "label";
     <li>
-        <div
-            class="card annotation-event border-0 shadow-sm"
-            [class.annotation-event--added]="event.kind === 'added'"
-            [class.annotation-event--removed]="event.kind === 'removed'"
-        >
-            <div class="card-body py-2 px-3 d-flex align-items-center gap-3">
-                <span
-                    class="badge rounded-pill flex-shrink-0"
-                    [class.text-bg-success]="event.kind === 'added'"
-                    [class.text-bg-danger]="event.kind === 'removed'"
-                >
-                    <fa-icon
-                        [icon]="event.kind === 'added' ? faPlus : faMinus"
-                    />
-                </span>
-                <span
-                    class="flex-shrink-0 text-secondary annotation-kind-icon"
-                    [title]="
-                        event.annotationKind === 'label'
-                            ? 'Label annotation'
-                            : 'Knowledge base annotation'
-                    "
-                >
-                    <fa-icon
-                        [icon]="
-                            event.annotationKind === 'label' ? faTag : faLink
-                        "
-                    />
+        <div class="card border-0 shadow-sm overflow-hidden d-flex flex-row">
+            <div
+                class="text-white d-flex align-items-center justify-content-center px-2 flex-shrink-0"
+                [class]="added ? 'bg-success' : 'bg-danger'"
+            >
+                <fa-icon [icon]="added ? faPlus : faMinus" />
+            </div>
+            <div
+                class="card-body py-2 px-3 d-flex align-items-center justify-content-start gap-3"
+            >
+                <fa-icon [icon]="isLabel ? faTag : faBook"/>
+                <span class="flex-grow-1">
+                    <strong>{{ event.actor }}</strong>
+                    {{ event.kind }}
+                    {{ isLabel ? "a label" : "a knowledge base" }}:
+                    <span [class]="isLabel ? 'label-pill ms-1' : 'font-monospace'">{{ event.description }}</span>
                 </span>
-                <span class="flex-grow-1 fw-medium annotation-description">{{
-                    event.description
-                }}</span>
-                <span class="text-secondary small text-end flex-shrink-0">
-                    {{ event.actor }}<br />
-                    <span class="text-muted">{{
-                        event.timestamp | date : "medium"
-                    }}</span>
+                <span class="text-muted small text-end flex-shrink-0">
+                    {{ event.timestamp | date : "medium" }}
                 </span>
             </div>
         </div>
diff --git a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.scss b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.scss
index 74bf5cec..8b137891 100644
--- a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.scss
+++ b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.scss
@@ -1,20 +1 @@
-.annotation-event {
-    border-left: 3px solid transparent;
 
-    &--added {
-        border-left-color: var(--bs-success);
-    }
-
-    &--removed {
-        border-left-color: var(--bs-danger);
-    }
-}
-
-.annotation-kind-icon {
-    width: 1rem;
-    text-align: center;
-}
-
-.annotation-description {
-    font-family: monospace;
-}
diff --git a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.ts b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.ts
index 77b0eb9e..574a9b8b 100644
--- a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.ts
+++ b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.ts
@@ -1,7 +1,7 @@
 import { Component, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
-import { faTag, faLink, faPlus, faMinus } from "@fortawesome/free-solid-svg-icons";
+import { faPlus, faMinus, faBook, faTag } from "@fortawesome/free-solid-svg-icons";
 import { map } from "rxjs";
 
 import { ProblemService } from "@/services/problem.service";
@@ -99,6 +99,6 @@ export class AnnotationCommentsComponent {
 
     public readonly faPlus = faPlus;
     public readonly faMinus = faMinus;
+    public readonly faBook = faBook;
     public readonly faTag = faTag;
-    public readonly faLink = faLink;
 }

From 2bf06312b0aa95d7aa69290393718356343f8f94 Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Sat, 23 May 2026 16:33:40 +0200
Subject: [PATCH 4/6] Add frontend filter to annotation log

---
 .../annotation-comments.component.html        | 92 +++++++++++++++++--
 .../annotation-comments.component.ts          | 51 +++++++---
 .../annotation-menu.component.html            |  2 +-
 3 files changed, 119 insertions(+), 26 deletions(-)

diff --git a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.html b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.html
index 0ccb6c70..a8e2ca1e 100644
--- a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.html
+++ b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.html
@@ -1,12 +1,80 @@
-@let events = events$ | async;
+@let events = filteredEvents();
 
 @if (events === null) {
 <p class="text-muted small fst-italic" i18n>Loading…</p>
-}
-@else if (events.length === 0) {
-<p class="text-muted small fst-italic" i18n>No annotations yet.</p>
-}
-@else {
+} @else {
+<div
+    class="d-flex align-items-center justify-content-between mb-2 gap-2 flex-wrap"
+>
+    <div class="d-flex gap-2 flex-wrap">
+        <div
+            class="btn-group btn-group-sm"
+            role="group"
+            aria-label="Filter by event kind"
+            i18n-aria-label
+        >
+            <input
+                type="checkbox"
+                class="btn-check"
+                id="filter-added"
+                [checked]="showAdded()"
+                (change)="showAdded.set(!showAdded())"
+            />
+            <label class="btn btn-outline-success" for="filter-added">
+                <fa-icon [icon]="faPlus" class="me-2" />
+                <ng-container i18n>Added</ng-container>
+            </label>
+            <input
+                type="checkbox"
+                class="btn-check"
+                id="filter-removed"
+                [checked]="showRemoved()"
+                (change)="showRemoved.set(!showRemoved())"
+            />
+            <label class="btn btn-outline-danger" for="filter-removed">
+                <fa-icon [icon]="faMinus" class="me-2" />
+                <ng-container i18n>Removed</ng-container>
+            </label>
+        </div>
+        <div
+            class="btn-group btn-group-sm"
+            role="group"
+            aria-label="Filter by annotation type"
+            i18n-aria-label
+        >
+            <input
+                type="checkbox"
+                class="btn-check"
+                id="filter-labels"
+                [checked]="showLabels()"
+                (change)="showLabels.set(!showLabels())"
+            />
+            <label class="btn btn-outline-secondary" for="filter-labels">
+                <fa-icon [icon]="faTag" class="me-2" />
+                <ng-container i18n>Labels</ng-container>
+            </label>
+            <input
+                type="checkbox"
+                class="btn-check"
+                id="filter-kb"
+                [checked]="showKB()"
+                (change)="showKB.set(!showKB())"
+            />
+            <label class="btn btn-outline-secondary" for="filter-kb">
+                <fa-icon [icon]="faBook" class="me-2" />
+                <ng-container i18n>KB items</ng-container>
+            </label>
+        </div>
+    </div>
+    <span class="text-muted small" i18n>
+        Showing {{ events.length }}/{{ totalCount() }} annotations
+    </span>
+</div>
+@if (events.length === 0) {
+<p class="text-muted small fst-italic" i18n>
+    No annotations match the current filters.
+</p>
+} @else {
 <ul class="list-unstyled d-flex flex-column gap-2 mb-0">
     @for (event of events; track $index) {
     @let added = event.kind === "added";
@@ -22,12 +90,16 @@
             <div
                 class="card-body py-2 px-3 d-flex align-items-center justify-content-start gap-3"
             >
-                <fa-icon [icon]="isLabel ? faTag : faBook"/>
+                <fa-icon [icon]="isLabel ? faTag : faBook" />
                 <span class="flex-grow-1">
                     <strong>{{ event.actor }}</strong>
                     {{ event.kind }}
-                    {{ isLabel ? "a label" : "a knowledge base" }}:
-                    <span [class]="isLabel ? 'label-pill ms-1' : 'font-monospace'">{{ event.description }}</span>
+                    {{ isLabel ? "a label" : "a knowledge base item" }}:
+                    <span
+                        [class]="isLabel ? 'label-pill ms-1' : 'font-monospace'"
+                    >
+                        {{ event.description }}
+                    </span>
                 </span>
                 <span class="text-muted small text-end flex-shrink-0">
                     {{ event.timestamp | date : "medium" }}
@@ -37,4 +109,4 @@
     </li>
     }
 </ul>
-}
+} }
diff --git a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.ts b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.ts
index 574a9b8b..c04b634e 100644
--- a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.ts
+++ b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.ts
@@ -1,8 +1,9 @@
-import { Component, inject } from "@angular/core";
+import { Component, computed, inject, signal } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { faPlus, faMinus, faBook, faTag } from "@fortawesome/free-solid-svg-icons";
 import { map } from "rxjs";
+import { toSignal } from "@angular/core/rxjs-interop";
 
 import { ProblemService } from "@/services/problem.service";
 import {
@@ -85,20 +86,40 @@ function labelAnnotationToEvents(annotation: LabelAnnotation): AnnotationEvent[]
 export class AnnotationCommentsComponent {
     private readonly problemService = inject(ProblemService);
 
-    public readonly events$ = this.problemService.problem$.pipe(
-        map((problem) => {
-            if (!problem) {
-                return [];
-            }
-            return [
-                ...problem.kbAnnotations.flatMap(kbAnnotationToEvents),
-                ...problem.labelAnnotations.flatMap(labelAnnotationToEvents),
-            ].sort((a, b) => b.timestamp.localeCompare(a.timestamp));
-        })
+    private allEvents = toSignal(
+        this.problemService.problem$.pipe(
+            map((problem) => {
+                if (!problem) return [];
+                return [
+                    ...problem.kbAnnotations.flatMap(kbAnnotationToEvents),
+                    ...problem.labelAnnotations.flatMap(labelAnnotationToEvents),
+                ].sort((a, b) => b.timestamp.localeCompare(a.timestamp));
+            })
+        ),
+        { initialValue: null }
     );
 
-    public readonly faPlus = faPlus;
-    public readonly faMinus = faMinus;
-    public readonly faBook = faBook;
-    public readonly faTag = faTag;
+    public showAdded = signal(true);
+    public showRemoved = signal(true);
+    public showLabels = signal(true);
+    public showKB = signal(true);
+
+    public filteredEvents = computed(() => {
+        const events = this.allEvents();
+        if (events === null) {
+            return null;
+        }
+        return events.filter(
+            (e) =>
+                (e.kind === "added" ? this.showAdded() : this.showRemoved()) &&
+                (e.annotationKind === "label" ? this.showLabels() : this.showKB())
+        );
+    });
+
+    public totalCount = computed(() => this.allEvents()?.length ?? 0);
+
+    public faPlus = faPlus;
+    public faMinus = faMinus;
+    public faBook = faBook;
+    public faTag = faTag;
 }
diff --git a/frontend/src/app/annotate/annotation-menu/annotation-menu.component.html b/frontend/src/app/annotate/annotation-menu/annotation-menu.component.html
index 6383f4aa..7f30c091 100644
--- a/frontend/src/app/annotate/annotation-menu/annotation-menu.component.html
+++ b/frontend/src/app/annotate/annotation-menu/annotation-menu.component.html
@@ -47,7 +47,7 @@
     <li [ngbNavItem]="4">
         <button ngbNavLink>
             <fa-icon [icon]="faPenNib" class="me-2" aria-hidden="true" />
-            <span i18n>Comments / History</span>
+            <span i18n>Annotation log</span>
         </button>
         <ng-template ngbNavContent>
             <la-annotation-comments />

From 1788516f76856c07c483dccdd81ab0a37bbdfa8e Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Sat, 23 May 2026 16:41:46 +0200
Subject: [PATCH 5/6] Fix frontend tests

---
 .../annotation-comments.component.spec.ts     | 66 +++++++++----------
 1 file changed, 30 insertions(+), 36 deletions(-)

diff --git a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.spec.ts b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.spec.ts
index bb6eabf7..f7d23797 100644
--- a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.spec.ts
+++ b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.spec.ts
@@ -2,8 +2,8 @@ import { TestBed } from "@angular/core/testing";
 import { of } from "rxjs";
 
 import { ProblemService } from "@/services/problem.service";
-import { Dataset, EntailmentLabel, KnowledgeBaseRelationship } from "@/types";
-import { AnnotationCommentsComponent, AnnotationEvent } from "./annotation-comments.component";
+import { Dataset, EntailmentLabel, KnowledgeBaseAnnotation, KnowledgeBaseRelationship, LabelAnnotation, Problem } from "@/types";
+import { AnnotationCommentsComponent } from "./annotation-comments.component";
 
 const baseAnnotationFields = {
     id: 1,
@@ -14,8 +14,8 @@ const baseAnnotationFields = {
     removedBy: null,
 };
 
-function setupComponent(kbAnnotations: unknown[] = [], labelAnnotations: unknown[] = []) {
-    const mockProblem = {
+function setupComponent(kbAnnotations: KnowledgeBaseAnnotation[] = [], labelAnnotations: LabelAnnotation[] = []) {
+    const mockProblem: Problem = {
         id: 1,
         base: null,
         premises: [],
@@ -45,7 +45,7 @@ describe("AnnotationCommentsComponent", () => {
         expect(component).toBeTruthy();
     });
 
-    it("emits an 'added' event for each annotation", (done) => {
+    it("emits an 'added' event for each annotation", () => {
         const component = setupComponent(
             [],
             [
@@ -59,21 +59,19 @@ describe("AnnotationCommentsComponent", () => {
             ]
         );
 
-        component.events$.subscribe((events: AnnotationEvent[]) => {
-            expect(events.length).toBe(1);
-            expect(events[0]).toEqual(
-                jasmine.objectContaining({
-                    kind: "added",
-                    annotationKind: "label",
-                    actor: "Alice",
-                    description: "negation",
-                })
-            );
-            done();
-        });
+        const events = component.filteredEvents()!;
+        expect(events.length).toBe(1);
+        expect(events[0]).toEqual(
+            jasmine.objectContaining({
+                kind: "added",
+                annotationKind: "label",
+                actor: "Alice",
+                description: "negation",
+            })
+        );
     });
 
-    it("emits a 'removed' event when removedAt is set", (done) => {
+    it("emits a 'removed' event when removedAt is set", () => {
         const component = setupComponent(
             [
                 {
@@ -90,21 +88,19 @@ describe("AnnotationCommentsComponent", () => {
             []
         );
 
-        component.events$.subscribe((events: AnnotationEvent[]) => {
-            expect(events.length).toBe(2);
-            const removed = events.find((e) => e.kind === "removed");
-            expect(removed).toEqual(
-                jasmine.objectContaining({
-                    kind: "removed",
-                    annotationKind: "knowledgeBase",
-                    description: "cat = feline",
-                })
-            );
-            done();
-        });
+        const events = component.filteredEvents()!;
+        expect(events.length).toBe(2);
+        const removed = events.find((e) => e.kind === "removed");
+        expect(removed).toEqual(
+            jasmine.objectContaining({
+                kind: "removed",
+                annotationKind: "knowledgeBase",
+                description: "cat = feline",
+            })
+        );
     });
 
-    it("sorts events by timestamp descending", (done) => {
+    it("sorts events by timestamp descending", () => {
         const component = setupComponent(
             [],
             [
@@ -127,10 +123,8 @@ describe("AnnotationCommentsComponent", () => {
             ]
         );
 
-        component.events$.subscribe((events: AnnotationEvent[]) => {
-            expect(events[0].description).toBe("latest");
-            expect(events[1].description).toBe("first");
-            done();
-        });
+        const events = component.filteredEvents()!;
+        expect(events[0].description).toBe("latest");
+        expect(events[1].description).toBe("first");
     });
 });

From 1705e314f95f7b7e1e0281a2f0227af9a02ff040 Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Mon, 25 May 2026 14:47:10 +0200
Subject: [PATCH 6/6] Logic simplifications

---
 .../annotation-comments.component.html        |  4 +-
 .../annotation-comments.component.spec.ts     | 69 +++++++++++--------
 .../annotation-comments.component.ts          | 63 ++++++-----------
 3 files changed, 62 insertions(+), 74 deletions(-)

diff --git a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.html b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.html
index a8e2ca1e..c8d4c473 100644
--- a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.html
+++ b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.html
@@ -77,7 +77,7 @@
 } @else {
 <ul class="list-unstyled d-flex flex-column gap-2 mb-0">
     @for (event of events; track $index) {
-    @let added = event.kind === "added";
+    @let added = event.eventKind === "added";
     @let isLabel = event.annotationKind === "label";
     <li>
         <div class="card border-0 shadow-sm overflow-hidden d-flex flex-row">
@@ -93,7 +93,7 @@
                 <fa-icon [icon]="isLabel ? faTag : faBook" />
                 <span class="flex-grow-1">
                     <strong>{{ event.actor }}</strong>
-                    {{ event.kind }}
+                    {{ event.eventKind }}
                     {{ isLabel ? "a label" : "a knowledge base item" }}:
                     <span
                         [class]="isLabel ? 'label-pill ms-1' : 'font-monospace'"
diff --git a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.spec.ts b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.spec.ts
index f7d23797..f5ab6eb5 100644
--- a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.spec.ts
+++ b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.spec.ts
@@ -1,4 +1,4 @@
-import { TestBed } from "@angular/core/testing";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { of } from "rxjs";
 
 import { ProblemService } from "@/services/problem.service";
@@ -14,39 +14,48 @@ const baseAnnotationFields = {
     removedBy: null,
 };
 
-function setupComponent(kbAnnotations: KnowledgeBaseAnnotation[] = [], labelAnnotations: LabelAnnotation[] = []) {
-    const mockProblem: Problem = {
-        id: 1,
-        base: null,
-        premises: [],
-        hypothesis: null,
-        entailmentLabel: EntailmentLabel.UNKNOWN,
-        dataset: Dataset.USER,
-        extraData: null,
-        kbAnnotations,
-        labelAnnotations,
-    };
+describe("AnnotationCommentsComponent", () => {
+    let component: AnnotationCommentsComponent;
+    let fixture: ComponentFixture<AnnotationCommentsComponent>;
 
-    TestBed.configureTestingModule({
-        imports: [AnnotationCommentsComponent],
-        providers: [
-            { provide: ProblemService, useValue: { problem$: of(mockProblem) } },
-        ],
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [AnnotationCommentsComponent],
+            providers: [
+                { provide: ProblemService, useValue: {} },
+            ],
+        }).compileComponents();
     });
 
-    const fixture = TestBed.createComponent(AnnotationCommentsComponent);
-    fixture.detectChanges();
-    return fixture.componentInstance;
-}
+    // Needed to override the problem$ observable in the providers.
+    function recreateComponent(kbAnnotations: KnowledgeBaseAnnotation[] = [], labelAnnotations: LabelAnnotation[] = []) {
+        const mockProblem: Problem = {
+            id: 1,
+            base: null,
+            premises: [],
+            hypothesis: null,
+            entailmentLabel: EntailmentLabel.UNKNOWN,
+            dataset: Dataset.USER,
+            extraData: null,
+            kbAnnotations,
+            labelAnnotations,
+        };
+
+        TestBed.overrideProvider(ProblemService, { useValue: { problem$: of(mockProblem) } });
+        fixture = TestBed.createComponent(AnnotationCommentsComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    }
+
+
 
-describe("AnnotationCommentsComponent", () => {
     it("should create", () => {
-        const component = setupComponent();
+        recreateComponent();
         expect(component).toBeTruthy();
     });
 
     it("emits an 'added' event for each annotation", () => {
-        const component = setupComponent(
+        recreateComponent(
             [],
             [
                 {
@@ -63,7 +72,7 @@ describe("AnnotationCommentsComponent", () => {
         expect(events.length).toBe(1);
         expect(events[0]).toEqual(
             jasmine.objectContaining({
-                kind: "added",
+                eventKind: "added",
                 annotationKind: "label",
                 actor: "Alice",
                 description: "negation",
@@ -72,7 +81,7 @@ describe("AnnotationCommentsComponent", () => {
     });
 
     it("emits a 'removed' event when removedAt is set", () => {
-        const component = setupComponent(
+        recreateComponent(
             [
                 {
                     ...baseAnnotationFields,
@@ -90,10 +99,10 @@ describe("AnnotationCommentsComponent", () => {
 
         const events = component.filteredEvents()!;
         expect(events.length).toBe(2);
-        const removed = events.find((e) => e.kind === "removed");
+        const removed = events.find((e) => e.eventKind === "removed");
         expect(removed).toEqual(
             jasmine.objectContaining({
-                kind: "removed",
+                eventKind: "removed",
                 annotationKind: "knowledgeBase",
                 description: "cat = feline",
             })
@@ -101,7 +110,7 @@ describe("AnnotationCommentsComponent", () => {
     });
 
     it("sorts events by timestamp descending", () => {
-        const component = setupComponent(
+        recreateComponent(
             [],
             [
                 {
diff --git a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.ts b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.ts
index c04b634e..61669390 100644
--- a/frontend/src/app/annotate/annotation-comments/annotation-comments.component.ts
+++ b/frontend/src/app/annotate/annotation-comments/annotation-comments.component.ts
@@ -16,7 +16,7 @@ type AnnotationEventKind = "added" | "removed";
 type AnnotationKind = "label" | "knowledgeBase";
 
 export interface AnnotationEvent {
-    kind: AnnotationEventKind;
+    eventKind: AnnotationEventKind;
     annotationKind: AnnotationKind;
     timestamp: string;
     actor: string;
@@ -30,44 +30,21 @@ const relationshipSymbols: Record<KnowledgeBaseRelationship, string> = {
     [KnowledgeBaseRelationship.SUPERSET]: "⊃",
 };
 
-function kbAnnotationToEvents(annotation: KnowledgeBaseAnnotation): AnnotationEvent[] {
-    const description = `${annotation.entity1} ${relationshipSymbols[annotation.relationship]} ${annotation.entity2}`;
-    const events: AnnotationEvent[] = [
-        {
-            kind: "added",
-            annotationKind: "knowledgeBase",
-            timestamp: annotation.createdAt,
-            actor: annotation.createdBy,
-            description,
-        },
-    ];
-    if (annotation.removedAt && annotation.removedBy) {
-        events.push({
-            kind: "removed",
-            annotationKind: "knowledgeBase",
-            timestamp: annotation.removedAt,
-            actor: annotation.removedBy,
-            description,
-        });
-    }
-    return events;
-}
-
-function labelAnnotationToEvents(annotation: LabelAnnotation): AnnotationEvent[] {
-    const description = annotation.label.text;
-    const events: AnnotationEvent[] = [
-        {
-            kind: "added",
-            annotationKind: "label",
-            timestamp: annotation.createdAt,
-            actor: annotation.createdBy,
-            description,
-        },
-    ];
+function annotationToEvent(annotation: LabelAnnotation | KnowledgeBaseAnnotation): AnnotationEvent[] {
+    const isLabelAnnotation = "label" in annotation;
+    const description = isLabelAnnotation ? annotation.label.text : `${annotation.entity1} ${relationshipSymbols[annotation.relationship]} ${annotation.entity2}`;
+    const annotationKind: AnnotationKind = isLabelAnnotation ? "label" : "knowledgeBase";
+    const events: AnnotationEvent[] = [{
+        eventKind: "added",
+        annotationKind,
+        timestamp: annotation.createdAt,
+        actor: annotation.createdBy,
+        description,
+    }];
     if (annotation.removedAt && annotation.removedBy) {
         events.push({
-            kind: "removed",
-            annotationKind: "label",
+            eventKind: "removed",
+            annotationKind,
             timestamp: annotation.removedAt,
             actor: annotation.removedBy,
             description,
@@ -84,15 +61,17 @@ function labelAnnotationToEvents(annotation: LabelAnnotation): AnnotationEvent[]
     styleUrl: "./annotation-comments.component.scss",
 })
 export class AnnotationCommentsComponent {
-    private readonly problemService = inject(ProblemService);
+    private problemService = inject(ProblemService);
 
     private allEvents = toSignal(
         this.problemService.problem$.pipe(
             map((problem) => {
-                if (!problem) return [];
+                if (!problem) {
+                    return [];
+                }
                 return [
-                    ...problem.kbAnnotations.flatMap(kbAnnotationToEvents),
-                    ...problem.labelAnnotations.flatMap(labelAnnotationToEvents),
+                    ...problem.kbAnnotations.flatMap(annotationToEvent),
+                    ...problem.labelAnnotations.flatMap(annotationToEvent),
                 ].sort((a, b) => b.timestamp.localeCompare(a.timestamp));
             })
         ),
@@ -111,7 +90,7 @@ export class AnnotationCommentsComponent {
         }
         return events.filter(
             (e) =>
-                (e.kind === "added" ? this.showAdded() : this.showRemoved()) &&
+                (e.eventKind === "added" ? this.showAdded() : this.showRemoved()) &&
                 (e.annotationKind === "label" ? this.showLabels() : this.showKB())
         );
     });