From fc79f614afcee184e0a68b72663cd1186502c41c Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Mon, 22 Sep 2025 10:32:28 +0200
Subject: [PATCH 01/23] Add Icon Button Component

---
 .../src/app/annotate/annotate.component.html  |  36 +++----
 .../src/app/annotate/annotate.component.ts    |   2 +
 .../annotation-input.component.html           |  53 ++++-----
 .../annotation-input.component.ts             |   2 +
 .../knowledge-base-form.component.html        |  26 +++--
 .../knowledge-base-form.component.ts          |   3 +-
 .../premises-form.component.html              |  29 +++--
 .../premises-form/premises-form.component.ts  |   3 +-
 .../navigator/navigator.component.html        | 101 +++++++-----------
 .../annotate/navigator/navigator.component.ts |   3 +-
 .../app/annotate/search/search.component.html |  16 +--
 .../app/annotate/search/search.component.ts   |   2 +
 .../icon-button/icon-button.component.html    |  29 +++++
 .../icon-button/icon-button.component.scss    |   0
 .../icon-button/icon-button.component.spec.ts |  23 ++++
 .../icon-button/icon-button.component.ts      |  52 +++++++++
 16 files changed, 224 insertions(+), 156 deletions(-)
 create mode 100644 frontend/src/app/shared/icon-button/icon-button.component.html
 create mode 100644 frontend/src/app/shared/icon-button/icon-button.component.scss
 create mode 100644 frontend/src/app/shared/icon-button/icon-button.component.spec.ts
 create mode 100644 frontend/src/app/shared/icon-button/icon-button.component.ts

diff --git a/frontend/src/app/annotate/annotate.component.html b/frontend/src/app/annotate/annotate.component.html
index 5c72471..ea0d9b0 100644
--- a/frontend/src/app/annotate/annotate.component.html
+++ b/frontend/src/app/annotate/annotate.component.html
@@ -62,31 +62,23 @@
         }
         <div class="d-flex flex-column gap-2 align-items-stretch">
             @if (browsing) {
-            <button
-                type="button"
-                class="btn btn-secondary d-flex align-items-center justify-content-center"
+            <la-icon-button
+                [icon]="faPlus"
+                label="Add new problem"
                 (click)="addProblem()"
-            >
-                <fa-icon
-                    [icon]="faPlus"
-                    aria-hidden="true"
-                    focusable="false"
-                ></fa-icon>
-                <span class="ms-3" i18n>Add new problem</span>
-            </button>
+                buttonStyle="secondary"
+                fullWidth
+                i18n-label
+            />
             } @else {
-            <button
-                type="button"
-                class="btn btn-secondary d-flex align-items-center justify-content-center"
+            <la-icon-button
+                [icon]="faBinoculars"
+                label="Browse existing problems"
                 (click)="firstProblemId && goToProblem(firstProblemId)"
-            >
-                <fa-icon
-                    [icon]="faBinoculars"
-                    aria-hidden="true"
-                    focusable="false"
-                ></fa-icon>
-                <span class="ms-3" i18n>Browse existing problems</span>
-            </button>
+                buttonStyle="secondary"
+                fullWidth
+                i18n-label
+            />
             }
         </div>
     </div>
diff --git a/frontend/src/app/annotate/annotate.component.ts b/frontend/src/app/annotate/annotate.component.ts
index 8d9b34b..2b4c677 100644
--- a/frontend/src/app/annotate/annotate.component.ts
+++ b/frontend/src/app/annotate/annotate.component.ts
@@ -12,6 +12,7 @@ import { CommonModule } from "@angular/common";
 import { Dataset } from "@/types";
 import { AppModeService } from "@/services/app-mode.service";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { IconButtonComponent } from "@/shared/icon-button/icon-button.component";
 
 @Component({
     selector: "la-annotate",
@@ -23,6 +24,7 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
         SearchComponent,
         FontAwesomeModule,
         CommonModule,
+        IconButtonComponent,
     ],
     templateUrl: "./annotate.component.html",
     styleUrl: "./annotate.component.scss",
diff --git a/frontend/src/app/annotate/annotation-input/annotation-input.component.html b/frontend/src/app/annotate/annotation-input/annotation-input.component.html
index fbb434e..31a969c 100644
--- a/frontend/src/app/annotate/annotation-input/annotation-input.component.html
+++ b/frontend/src/app/annotate/annotation-input/annotation-input.component.html
@@ -12,45 +12,28 @@
             <la-knowledge-base-form [form]="form" />
         </div>
         <div class="d-flex justify-content-between mt-3">
-            <button
-                type="button"
-                class="btn btn-success d-flex align-items-center justify-content-center"
+            <la-icon-button
+                [icon]="faTree"
+                buttonStyle="success"
+                label="Start parse"
                 (click)="startParse()"
-            >
-                <fa-icon
-                    [icon]="faTree"
-                    class="fa-md"
-                    aria-hidden="true"
-                    focusable="false"
-                />
-                <span class="ms-2" i18n>Start parse</span>
-            </button>
+                i18n-label
+            />
             @if ((viewMode === 'edit' || viewMode === 'add') && userProblem) {
-            <button
-                type="button"
-                class="btn btn-primary d-flex align-items-center justify-content-center"
+            <la-icon-button
+                [icon]="faFloppyDisk"
+                label="Save problem"
                 (click)="saveProblem()"
-            >
-                <fa-icon
-                    [icon]="faFloppyDisk"
-                    aria-hidden="true"
-                    focusable="false"
-                ></fa-icon>
-                <span class="ms-3" i18n>Save problem</span>
-            </button>
+                i18n-label
+            />
             } @else if (userProblem) {
-                <button
-                    type="button"
-                    class="btn btn-secondary d-flex align-items-center justify-content-center"
-                    (click)="editProblem()"
-                >
-                    <fa-icon
-                        [icon]="faWrench"
-                        aria-hidden="true"
-                        focusable="false"
-                    ></fa-icon>
-                    <span class="ms-3" i18n>Edit problem</span>
-                </button>
+            <la-icon-button
+                [icon]="faWrench"
+                buttonStyle="secondary"
+                label="Edit problem"
+                (click)="editProblem()"
+                i18n-label
+            />
             }
         </div>
         }
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 6b21cfd..7cabc3b 100644
--- a/frontend/src/app/annotate/annotation-input/annotation-input.component.ts
+++ b/frontend/src/app/annotate/annotation-input/annotation-input.component.ts
@@ -21,6 +21,7 @@ import { ParseService } from "@/services/parse.service";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { AppModeService } from "@/services/app-mode.service";
 import { ToastService } from "@/services/toast.service";
+import { IconButtonComponent } from "@/shared/icon-button/icon-button.component";
 
 export type ParseInputForm = FormGroup<{
     id: FormControl<number | null>;
@@ -49,6 +50,7 @@ export type ParseInput = ReturnType<ParseInputForm["getRawValue"]>;
         ReactiveFormsModule,
         ProblemDetailsComponent,
         FontAwesomeModule,
+        IconButtonComponent
     ],
     templateUrl: "./annotation-input.component.html",
     styleUrl: "./annotation-input.component.scss",
diff --git a/frontend/src/app/annotate/annotation-input/knowledge-base-form/knowledge-base-form.component.html b/frontend/src/app/annotate/annotation-input/knowledge-base-form/knowledge-base-form.component.html
index e3c9e90..43236c7 100644
--- a/frontend/src/app/annotate/annotation-input/knowledge-base-form/knowledge-base-form.component.html
+++ b/frontend/src/app/annotate/annotation-input/knowledge-base-form/knowledge-base-form.component.html
@@ -8,25 +8,23 @@
         >
             <span i18n>Knowledge base items</span>
             @if (viewMode === 'add' || viewMode === 'edit') {
-            <button
-                type="button"
-                class="btn btn-sm btn-outline-primary"
+            <la-icon-button
+                [icon]="faPlus"
+                iconPosition="right"
+                size="sm"
+                label="Add knowledge base item"
                 (click)="addKnowledgeBaseItem()"
-            >
-                <span class="me-1" i18n>Add knowledge base item</span>
-                <fa-icon
-                    [icon]="faPlus"
-                    class="fa-sm"
-                    aria-hidden="true"
-                    focusable="false"
-                ></fa-icon>
-            </button>
+                i18n-label
+                outline
+            />
             }
         </legend>
     </fieldset>
 
     <ul class="ps-0 list-unstyled" formArrayName="kbItems">
-        @for (kbItem of kbControls; let i = $index; track `${i}-${kbItem.value.entity1}-${kbItem.value.relationship}-${kbItem.value.entity2}`) {
+        @for (kbItem of kbControls; let i = $index; track
+        `${i}-${kbItem.value.entity1}-${kbItem.value.relationship}-${kbItem.value.entity2}`)
+        {
         <li class="mb-3">
             @if (viewMode === 'add' || viewMode === 'edit') {
             <div [formGroupName]="i" class="input-group">
@@ -60,7 +58,7 @@
                     (click)="removeKnowledgeBaseItem(i)"
                     aria-labelledby="remove-kb-item"
                     title="Remove knowledge base item"
-                    title-i18n
+                    i18n-title
                 >
                     <fa-icon
                         [icon]="faTrash"
diff --git a/frontend/src/app/annotate/annotation-input/knowledge-base-form/knowledge-base-form.component.ts b/frontend/src/app/annotate/annotation-input/knowledge-base-form/knowledge-base-form.component.ts
index 5d78085..35db0e9 100644
--- a/frontend/src/app/annotate/annotation-input/knowledge-base-form/knowledge-base-form.component.ts
+++ b/frontend/src/app/annotate/annotation-input/knowledge-base-form/knowledge-base-form.component.ts
@@ -7,6 +7,7 @@ import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { ParseInputForm } from "../annotation-input.component";
 import { AppModeService } from "@/services/app-mode.service";
 import { KnowledgeBaseRelationship } from "@/types";
+import { IconButtonComponent } from "@/shared/icon-button/icon-button.component";
 
 
 
@@ -20,7 +21,7 @@ const relationshipDisplayMapping: Record<KnowledgeBaseRelationship, string> = {
 @Component({
     selector: "la-knowledge-base-form",
     standalone: true,
-    imports: [CommonModule, ReactiveFormsModule, FontAwesomeModule],
+    imports: [CommonModule, ReactiveFormsModule, FontAwesomeModule, IconButtonComponent],
     templateUrl: "./knowledge-base-form.component.html",
     styleUrls: ["./knowledge-base-form.component.scss"],
 })
diff --git a/frontend/src/app/annotate/annotation-input/premises-form/premises-form.component.html b/frontend/src/app/annotate/annotation-input/premises-form/premises-form.component.html
index b3aa888..9c1c9f0 100644
--- a/frontend/src/app/annotate/annotation-input/premises-form/premises-form.component.html
+++ b/frontend/src/app/annotate/annotation-input/premises-form/premises-form.component.html
@@ -8,24 +8,21 @@
         >
             <span i18n>Premises</span>
             @if (viewMode === 'add' || viewMode === 'edit') {
-            <button
-                type="button"
-                class="btn btn-sm btn-outline-primary"
+            <la-icon-button
+                [icon]="faPlus"
+                label="Add premise"
                 (click)="addPremise()"
-            >
-                <span class="me-1" i18n>Add premise</span>
-                <fa-icon
-                    [icon]="faPlus"
-                    class="fa-sm"
-                    aria-hidden="true"
-                    focusable="false"
-                ></fa-icon>
-            </button>
+                size="sm"
+                iconPosition="right"
+                i18n-label
+                outline
+            />
             }
         </legend>
 
         <ul class="ps-0 list-unstyled" formArrayName="premises">
-            @for (control of premiseControls; let i = $index; track `${i}-${control.value}`) {
+            @for (control of premiseControls; let i = $index; track
+            `${i}-${control.value}`) {
             <li class="mb-3">
                 <div class="input-group">
                     <input
@@ -45,7 +42,7 @@
                         (click)="removePremise(i)"
                         aria-labelledby="remove-premise"
                         title="Remove premise"
-                        title-i18n
+                        i18n-title
                     >
                         <fa-icon
                             [icon]="faTrash"
@@ -86,6 +83,8 @@
             "
             [formControl]="form().controls.hypothesis"
         />
-        <p class="invalid-feedback" i18n>Each problem must have a hypothesis.</p>
+        <p class="invalid-feedback" i18n>
+            Each problem must have a hypothesis.
+        </p>
     </div>
 </form>
diff --git a/frontend/src/app/annotate/annotation-input/premises-form/premises-form.component.ts b/frontend/src/app/annotate/annotation-input/premises-form/premises-form.component.ts
index e5b1642..3ba9922 100644
--- a/frontend/src/app/annotate/annotation-input/premises-form/premises-form.component.ts
+++ b/frontend/src/app/annotate/annotation-input/premises-form/premises-form.component.ts
@@ -5,6 +5,7 @@ import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { ParseInputForm } from "../annotation-input.component";
 import { AppModeService } from "@/services/app-mode.service";
+import { IconButtonComponent } from "@/shared/icon-button/icon-button.component";
 
 export interface Premises {
     premises: string[];
@@ -14,7 +15,7 @@ export interface Premises {
 @Component({
     selector: "la-premises-form",
     standalone: true,
-    imports: [ReactiveFormsModule, CommonModule, FontAwesomeModule],
+    imports: [ReactiveFormsModule, CommonModule, FontAwesomeModule, IconButtonComponent],
     templateUrl: "./premises-form.component.html",
     styleUrl: "./premises-form.component.scss",
 })
diff --git a/frontend/src/app/annotate/navigator/navigator.component.html b/frontend/src/app/annotate/navigator/navigator.component.html
index 0b08cf1..d51b363 100644
--- a/frontend/src/app/annotate/navigator/navigator.component.html
+++ b/frontend/src/app/annotate/navigator/navigator.component.html
@@ -3,84 +3,63 @@
 <div class="navigator-container">
     <div class="d-flex justify-content-between align-items-center gap-2">
         <div class="responsive-button-grid">
-            <button
-                class="btn btn-outline-primary btn-sm"
-                type="button"
+            <la-icon-button
+                [icon]="faAnglesLeft"
                 (click)="navigateToProblem(problemResponse?.firstProblemId)"
-                [disabled]="problemResponse?.problem?.id === problemResponse?.firstProblemId"
-                aria-labelledby="label-first"
-                title="First problem"
-                title-i18n
-            >
-                <fa-icon
-                    [icon]="faAnglesLeft"
-                    aria-hidden="true"
-                    focusable="false"
-                />
-                <span id="label-first" class="visually-hidden" i18n>
-                    First</span
-                >
-            </button>
-            <button
-                class="btn btn-outline-primary btn-sm"
-                type="button"
+                [disabled]="
+                    problemResponse?.firstProblemId === null ||
+                    problemResponse?.problem?.id ===
+                        problemResponse?.firstProblemId
+                "
+                buttonTitle="First problem"
+                i18n-buttonTitle
+                outline
+                fullWidth
+            />
+            <la-icon-button
+                [icon]="faAngleLeft"
                 (click)="navigateToProblem(problemResponse?.previousProblemId)"
                 [disabled]="problemResponse?.previousProblemId === null"
-                aria-labelledby="label-previous"
-                title="Previous problem"
-                title-i18n
-            >
-                <fa-icon
-                    [icon]="faAngleLeft"
-                    aria-hidden="true"
-                    focusable="false"
-                />
-                <span id="label-previous" class="visually-hidden" i18n
-                    >Previous</span
-                >
-            </button>
+                buttonTitle="Previous problem"
+                i18n-buttonTitle
+                outline
+                fullWidth
+            />
         </div>
 
         <div class="px-2 text-center flex-grow-1">
             @if (problemResponse) {
             <span class="small" i18n>
-                {{ problemResponse?.index ?? '-' }}
+                {{ problemResponse?.index ?? "-" }}
             </span>
-            <hr class="my-1">
+            <hr class="my-1" />
             <span class="small" i18n>{{ problemResponse.totalProblems }}</span>
             }
         </div>
 
         <div class="responsive-button-grid">
-            <button
-                class="btn btn-outline-primary btn-sm"
-                type="button"
+            <la-icon-button
+                [icon]="faAngleRight"
                 (click)="navigateToProblem(problemResponse?.nextProblemId)"
                 [disabled]="problemResponse?.nextProblemId === null"
-                title="Next problem"
-                title-i18n
-            >
-                <span id="label-next" class="visually-hidden" i18n>Next</span>
-                <fa-icon
-                    [icon]="faAngleRight"
-                    aria-hidden="true"
-                    focusable="false"
-                />
-            </button>
-            <button
-                class="btn btn-outline-primary btn-sm"
+                buttonTitle="Next problem"
+                i18n-buttonTitle
+                outline
+                fullWidth
+            />
+            <la-icon-button
+                [icon]="faAnglesRight"
                 (click)="navigateToProblem(problemResponse?.lastProblemId)"
-                [disabled]="problemResponse?.problem?.id === problemResponse?.lastProblemId"
-                title="Last problem"
-                title-i18n
-            >
-                <span id="label-last" class="visually-hidden" i18n>Last</span>
-                <fa-icon
-                    [icon]="faAnglesRight"
-                    aria-hidden="true"
-                    focusable="false"
-                />
-            </button>
+                [disabled]="
+                    problemResponse?.lastProblemId === null ||
+                    problemResponse?.problem?.id ===
+                        problemResponse?.lastProblemId
+                "
+                buttonTitle="Last problem"
+                i18n-buttonTitle
+                outline
+                fullWidth
+            />
         </div>
     </div>
 </div>
diff --git a/frontend/src/app/annotate/navigator/navigator.component.ts b/frontend/src/app/annotate/navigator/navigator.component.ts
index 59fc445..a599e3a 100644
--- a/frontend/src/app/annotate/navigator/navigator.component.ts
+++ b/frontend/src/app/annotate/navigator/navigator.component.ts
@@ -10,11 +10,12 @@ import {
 import { CommonModule } from "@angular/common";
 import { Router } from "@angular/router";
 import { ProblemService } from "@/services/problem.service";
+import { IconButtonComponent } from "@/shared/icon-button/icon-button.component";
 
 @Component({
     selector: "la-navigator",
     standalone: true,
-    imports: [FontAwesomeModule, CommonModule],
+    imports: [FontAwesomeModule, CommonModule, IconButtonComponent],
     templateUrl: "./navigator.component.html",
     styleUrl: "./navigator.component.scss",
 })
diff --git a/frontend/src/app/annotate/search/search.component.html b/frontend/src/app/annotate/search/search.component.html
index 9cf6dd5..6435d4b 100644
--- a/frontend/src/app/annotate/search/search.component.html
+++ b/frontend/src/app/annotate/search/search.component.html
@@ -47,13 +47,17 @@
         </div>
 
         <div class="row col-12 mx-auto">
-            <button
-                class="btn btn-outline-danger btn-sm"
+            <la-icon-button
+                [icon]="faTimes"
+                label="Clear filters"
+                class="px-0"
+                size="sm"
+                buttonStyle="danger"
                 (click)="clearFilters()"
-            >
-                <fa-icon [icon]="faTimes" class="me-2" />
-                <span i18n>Clear filters</span>
-            </button>
+                i18n-label
+                outline
+                fullWidth
+            />
         </div>
     </form>
 </div>
diff --git a/frontend/src/app/annotate/search/search.component.ts b/frontend/src/app/annotate/search/search.component.ts
index cc030e6..96c8b59 100644
--- a/frontend/src/app/annotate/search/search.component.ts
+++ b/frontend/src/app/annotate/search/search.component.ts
@@ -18,6 +18,7 @@ import {
 import { datasetLabels, entailmentLabels } from "@/shared/displayTextMappings";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { ActivatedRoute, Params, Router } from "@angular/router";
+import { IconButtonComponent } from "@/shared/icon-button/icon-button.component";
 
 interface SearchParams {
     dataset: Dataset | null;
@@ -39,6 +40,7 @@ type SearchParamsForm = {
         FontAwesomeModule,
         ReactiveFormsModule,
         FilterSelectComponent,
+        IconButtonComponent
     ],
     templateUrl: "./search.component.html",
     styleUrl: "./search.component.scss",
diff --git a/frontend/src/app/shared/icon-button/icon-button.component.html b/frontend/src/app/shared/icon-button/icon-button.component.html
new file mode 100644
index 0000000..4c06ba2
--- /dev/null
+++ b/frontend/src/app/shared/icon-button/icon-button.component.html
@@ -0,0 +1,29 @@
+@let iconValue = icon(); @let position = iconPosition();
+<button
+    [type]="buttonType()"
+    [class]="buttonClasses()"
+    [disabled]="disabled()"
+    [attr.aria-labelledby]="titleId() ?? ''"
+    [attr.title]="buttonTitle()"
+>
+    @if (iconValue && position === 'left') {
+    <fa-icon
+        [icon]="iconValue"
+        [class]="`fa-${size()} ${label() ? 'me-2' : ''}`"
+        aria-hidden="true"
+        focusable="false"
+    />
+    }
+    <span i18n>{{ label() }}</span>
+    @if (iconValue && position === 'right') {
+    <fa-icon
+        [icon]="iconValue"
+        [class]="`fa-${size()} ${label() ? 'ms-2' : ''}`"
+        aria-hidden="true"
+        focusable="false"
+    />
+    }
+</button>
+@if (titleId()) {
+<span class="visually-hidden" id="{{ titleId() }}">{{ buttonTitle() }}</span>
+}
diff --git a/frontend/src/app/shared/icon-button/icon-button.component.scss b/frontend/src/app/shared/icon-button/icon-button.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/app/shared/icon-button/icon-button.component.spec.ts b/frontend/src/app/shared/icon-button/icon-button.component.spec.ts
new file mode 100644
index 0000000..d2a2c30
--- /dev/null
+++ b/frontend/src/app/shared/icon-button/icon-button.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IconButtonComponent } from './icon-button.component';
+
+describe('IconButtonComponent', () => {
+    let component: IconButtonComponent;
+    let fixture: ComponentFixture<IconButtonComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [IconButtonComponent]
+        })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(IconButtonComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/frontend/src/app/shared/icon-button/icon-button.component.ts b/frontend/src/app/shared/icon-button/icon-button.component.ts
new file mode 100644
index 0000000..2e898eb
--- /dev/null
+++ b/frontend/src/app/shared/icon-button/icon-button.component.ts
@@ -0,0 +1,52 @@
+import { booleanAttribute, Component, computed, input } from '@angular/core';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { IconProp } from '@fortawesome/angular-fontawesome/types';
+
+@Component({
+    selector: 'la-icon-button',
+    imports: [FontAwesomeModule],
+    templateUrl: './icon-button.component.html',
+    styleUrl: './icon-button.component.scss'
+})
+export class IconButtonComponent {
+    public icon = input<IconProp | null>(null);
+    public label = input<string | null>(null);
+    public buttonTitle = input<string | null>(null);
+    public iconPosition = input<'left' | 'right'>('left');
+    public size = input<'sm' | 'md' | 'lg'>('md');
+    public buttonType = input<'button' | 'submit' | 'reset'>('button');
+    public buttonStyle = input<"primary" | "secondary" | "success" | "danger">("primary");
+    public disabled = input(false, { transform: booleanAttribute });
+    public outline = input(false, { transform: booleanAttribute });
+    public fullWidth = input(false, { transform: booleanAttribute });
+
+    public buttonClasses = computed<string>(() => {
+        const classes = ["btn", "d-flex", "align-items-center", "justify-content-center"];
+        if (this.outline()) {
+            classes.push(`btn-outline-${this.buttonStyle()}`);
+        } else {
+            classes.push(`btn-${this.buttonStyle()}`);
+        }
+
+        if (this.size() === 'sm') {
+            classes.push('btn-sm');
+        } else if (this.size() === 'lg') {
+            classes.push('btn-lg');
+        }
+
+        if (this.fullWidth()) {
+            classes.push('w-100');
+        }
+
+        return classes.join(" ");
+    });
+
+    public titleId = computed<string | null>(() => {
+        const title = this.buttonTitle();
+        if (!title) {
+            return null;
+        }
+        return title.replace(/\s+/g, '-').toLowerCase();
+    });
+
+}

From c7d31347861736192c222ef15ad026dfabdd795b Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Mon, 22 Sep 2025 11:12:59 +0200
Subject: [PATCH 02/23] Add copy button

---
 .../annotation-input/annotation-input.component.html   |  9 +++++++++
 .../annotation-input/annotation-input.component.ts     | 10 +++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/annotate/annotation-input/annotation-input.component.html b/frontend/src/app/annotate/annotation-input/annotation-input.component.html
index 31a969c..703abc0 100644
--- a/frontend/src/app/annotate/annotation-input/annotation-input.component.html
+++ b/frontend/src/app/annotate/annotation-input/annotation-input.component.html
@@ -19,6 +19,15 @@
                 (click)="startParse()"
                 i18n-label
             />
+            @if (viewMode === 'browse') {
+                <la-icon-button
+                    [icon]="faCopy"
+                    buttonStyle="secondary"
+                    label="Copy problem"
+                    (click)="copyProblem()"
+                    i18n-label
+                />
+            }
             @if ((viewMode === 'edit' || viewMode === 'add') && userProblem) {
             <la-icon-button
                 [icon]="faFloppyDisk"
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 7cabc3b..9ff027d 100644
--- a/frontend/src/app/annotate/annotation-input/annotation-input.component.ts
+++ b/frontend/src/app/annotate/annotation-input/annotation-input.component.ts
@@ -12,7 +12,7 @@ import { PremisesFormComponent } from "./premises-form/premises-form.component";
 import { KnowledgeBaseFormComponent } from "./knowledge-base-form/knowledge-base-form.component";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { Dataset, KnowledgeBaseRelationship, Problem } from "../../types";
-import { faCheck, faExclamationCircle, faFloppyDisk, faTrash, faTree, faWrench } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faCopy, faExclamationCircle, faFloppyDisk, faTrash, faTree, faWrench } from "@fortawesome/free-solid-svg-icons";
 import { ProblemDetailsComponent } from "./problem-details/problem-details.component";
 import { map, Subject } from "rxjs";
 import { ActivatedRoute, Router } from "@angular/router";
@@ -70,6 +70,7 @@ export class AnnotationInputComponent implements OnInit {
 
     public submit$ = new Subject<void>();
 
+    public faCopy = faCopy;
     public faCheck = faCheck;
     public faTree = faTree;
     public faFloppyDisk = faFloppyDisk;
@@ -130,6 +131,13 @@ export class AnnotationInputComponent implements OnInit {
         this.parseService.submit$.next(input);
     }
 
+    public copyProblem(): void {
+        this.router.navigate(["/", "annotate", "new"], {
+            queryParams: { copyFrom: this.form?.getRawValue().id },
+            // queryParamsHandling: "preserve"
+        });
+    }
+
     public saveProblem(): void {
         this.form?.markAllAsTouched();
         if (!this.form || this.form.invalid) {

From c55719cb79b6e3cab0b440f493dc9fed7b7e5e64 Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Mon, 22 Sep 2025 11:17:14 +0200
Subject: [PATCH 03/23] Avoid unnecessary requests

---
 frontend/src/app/annotate/annotate.component.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/annotate/annotate.component.ts b/frontend/src/app/annotate/annotate.component.ts
index 2b4c677..2755a94 100644
--- a/frontend/src/app/annotate/annotate.component.ts
+++ b/frontend/src/app/annotate/annotate.component.ts
@@ -7,7 +7,7 @@ import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { faBinoculars, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { ActivatedRoute, Router } from "@angular/router";
 import { ProblemService } from "@/services/problem.service";
-import { combineLatest, map, tap } from "rxjs";
+import { combineLatest, distinctUntilChanged, map } from "rxjs";
 import { CommonModule } from "@angular/common";
 import { Dataset } from "@/types";
 import { AppModeService } from "@/services/app-mode.service";
@@ -48,7 +48,8 @@ export class AnnotateComponent implements OnInit {
 
     ngOnInit(): void {
         const editParam$ = this.route.url.pipe(
-            map(segments => segments.some(segment => segment.path === "edit"))
+            map(segments => segments.some(segment => segment.path === "edit")),
+            distinctUntilChanged(),
         );
 
         combineLatest([

From 5440a8a5cbec7fdd26ce3f5c8a3d7a0c7826e3bb Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Mon, 22 Sep 2025 13:29:41 +0200
Subject: [PATCH 04/23] Compare route params

---
 .../src/app/annotate/annotate.component.ts    | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/annotate/annotate.component.ts b/frontend/src/app/annotate/annotate.component.ts
index 2755a94..14d10ee 100644
--- a/frontend/src/app/annotate/annotate.component.ts
+++ b/frontend/src/app/annotate/annotate.component.ts
@@ -5,7 +5,7 @@ import { AnnotationInputComponent } from "./annotation-input/annotation-input.co
 import { SearchComponent } from "./search/search.component";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { faBinoculars, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { ActivatedRoute, Router } from "@angular/router";
+import { ActivatedRoute, Router, ParamMap } from "@angular/router";
 import { ProblemService } from "@/services/problem.service";
 import { combineLatest, distinctUntilChanged, map } from "rxjs";
 import { CommonModule } from "@angular/common";
@@ -58,6 +58,7 @@ export class AnnotateComponent implements OnInit {
             editParam$
         ])
             .pipe(
+                distinctUntilChanged((oldParams, newParams) => this.areParamsEqual(oldParams, newParams)),
                 takeUntilDestroyed(this.destroyRef)
             )
             .subscribe(([params, queryParams, edit]) => {
@@ -72,4 +73,22 @@ export class AnnotateComponent implements OnInit {
     public addProblem(): void {
         this.router.navigate(["/", "annotate", "new"]);
     }
+
+    private areParamsEqual(
+        [oldParams, oldQueryParams, oldEditParam]: [ParamMap, ParamMap, boolean],
+        [newParams, newQueryParams, newEditParam]: [ParamMap, ParamMap, boolean]
+    ): boolean {
+        const compareMaps = (map1: ParamMap, map2: ParamMap) => {
+            if (map1.keys.length !== map2.keys.length) {
+                return false;
+            }
+            return map1.keys.every((key: string) => map1.get(key) === map2.get(key));
+        };
+
+        return (
+            compareMaps(oldParams, newParams) &&
+            compareMaps(oldQueryParams, newQueryParams) &&
+            oldEditParam === newEditParam
+        );
+    }
 }

From d42d1e229ee6378d19dee053c7880364f0a7a511 Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Mon, 22 Sep 2025 13:42:59 +0200
Subject: [PATCH 05/23] Add base field to form

---
 .../annotation-input.component.spec.ts           |  5 +++++
 .../annotation-input.component.ts                | 16 ++++++++--------
 frontend/src/app/services/problem.service.ts     |  1 +
 frontend/src/app/types.ts                        |  1 +
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/annotate/annotation-input/annotation-input.component.spec.ts b/frontend/src/app/annotate/annotation-input/annotation-input.component.spec.ts
index 3e5bca1..38ffd2c 100644
--- a/frontend/src/app/annotate/annotation-input/annotation-input.component.spec.ts
+++ b/frontend/src/app/annotate/annotation-input/annotation-input.component.spec.ts
@@ -49,6 +49,7 @@ describe("AnnotationInputComponent", () => {
         it('should build form with correct structure and values from problem data', () => {
             const mockProblem: Problem = {
                 id: 123,
+                base: null,
                 premises: ["First premise", "Second premise"],
                 hypothesis: "Test hypothesis",
                 entailmentLabel: EntailmentLabel.ENTAILMENT,
@@ -104,6 +105,7 @@ describe("AnnotationInputComponent", () => {
         it('should handle empty premises and kbItems arrays', () => {
             const mockProblem: Problem = {
                 id: 123,
+                base: null,
                 premises: [],
                 hypothesis: "Empty test hypothesis",
                 entailmentLabel: EntailmentLabel.NEUTRAL,
@@ -127,6 +129,7 @@ describe("AnnotationInputComponent", () => {
         it('should create form controls with required validators', () => {
             const mockProblem: Problem = {
                 id: 1,
+                base: null,
                 premises: ["Test premise"],
                 hypothesis: "Test hypothesis",
                 entailmentLabel: EntailmentLabel.CONTRADICTION,
@@ -148,6 +151,7 @@ describe("AnnotationInputComponent", () => {
         it('should navigate when problem ID is different from current route', () => {
             const mockProblem: Problem = {
                 id: 12,
+                base: null,
                 premises: [],
                 hypothesis: "",
                 entailmentLabel: EntailmentLabel.UNKNOWN,
@@ -167,6 +171,7 @@ describe("AnnotationInputComponent", () => {
         it('should not navigate when problem ID matches current route', () => {
             const mockProblem: Problem = {
                 id: 17,
+                base: null,
                 premises: [],
                 hypothesis: "",
                 entailmentLabel: EntailmentLabel.UNKNOWN,
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 9ff027d..bbf5d5a 100644
--- a/frontend/src/app/annotate/annotation-input/annotation-input.component.ts
+++ b/frontend/src/app/annotate/annotation-input/annotation-input.component.ts
@@ -25,6 +25,7 @@ import { IconButtonComponent } from "@/shared/icon-button/icon-button.component"
 
 export type ParseInputForm = FormGroup<{
     id: FormControl<number | null>;
+    base: FormControl<number | null>;
     premises: FormArray<FormControl<string>>;
     hypothesis: FormControl<string>;
     kbItems: FormArray<KnowledgeBaseItemsForm>;
@@ -133,8 +134,7 @@ export class AnnotationInputComponent implements OnInit {
 
     public copyProblem(): void {
         this.router.navigate(["/", "annotate", "new"], {
-            queryParams: { copyFrom: this.form?.getRawValue().id },
-            // queryParamsHandling: "preserve"
+            queryParams: { base: this.form?.getRawValue().id }
         });
     }
 
@@ -166,17 +166,17 @@ export class AnnotationInputComponent implements OnInit {
     }
 
     private buildForm(problem: Problem): ParseInputForm {
-        const id = problem.id;
-        const premises = problem.premises || [];
-        const hypothesis = problem.hypothesis || "";
         const kbItems = this.buildKbForms(problem.kbItems);
 
         return new FormGroup({
-            id: new FormControl<number | null>(id, {
+            id: new FormControl<number | null>(problem.id, {
+                nonNullable: true
+            }),
+            base: new FormControl<number | null>(problem.base, {
                 nonNullable: true
             }),
             premises: new FormArray(
-                premises.map(
+                problem.premises.map(
                     (premise) =>
                         new FormControl<string>(premise, {
                             validators: [Validators.required],
@@ -184,7 +184,7 @@ export class AnnotationInputComponent implements OnInit {
                         })
                 )
             ),
-            hypothesis: new FormControl<string>(hypothesis, {
+            hypothesis: new FormControl<string>(problem.hypothesis ?? "", {
                 validators: [Validators.required],
                 nonNullable: true,
             }),
diff --git a/frontend/src/app/services/problem.service.ts b/frontend/src/app/services/problem.service.ts
index e769553..cd0d74f 100644
--- a/frontend/src/app/services/problem.service.ts
+++ b/frontend/src/app/services/problem.service.ts
@@ -62,6 +62,7 @@ export class ProblemService {
             error: null,
             problem: {
                 id: null,
+                base: null,
                 hypothesis: "",
                 dataset: Dataset.USER,
                 premises: [],
diff --git a/frontend/src/app/types.ts b/frontend/src/app/types.ts
index 0cd3c37..fb154fe 100644
--- a/frontend/src/app/types.ts
+++ b/frontend/src/app/types.ts
@@ -39,6 +39,7 @@ interface KnowledgeBaseItem {
 
 interface ProblemBase {
     id: number | null;
+    base: number | null;
     premises: string[];
     hypothesis: string | null;
     entailmentLabel: EntailmentLabel;

From 7b4796f360a8bd4a72dbb4ad64f61b6fe3a41bd3 Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Mon, 22 Sep 2025 15:17:25 +0200
Subject: [PATCH 06/23] Add base field to Problem

---
 .../problem/migrations/0005_problem_base.py   | 26 +++++++++++++++++++
 backend/problem/models.py                     | 10 +++++++
 2 files changed, 36 insertions(+)
 create mode 100644 backend/problem/migrations/0005_problem_base.py

diff --git a/backend/problem/migrations/0005_problem_base.py b/backend/problem/migrations/0005_problem_base.py
new file mode 100644
index 0000000..b232649
--- /dev/null
+++ b/backend/problem/migrations/0005_problem_base.py
@@ -0,0 +1,26 @@
+# Generated by Django 4.2.20 on 2025-09-22 11:47
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("problem", "0004_sentence_remove_problem_premises_knowledgebase_and_more"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="problem",
+            name="base",
+            field=models.ForeignKey(
+                blank=True,
+                help_text="The base problem from which this problem was derived, if any.",
+                null=True,
+                on_delete=django.db.models.deletion.SET_NULL,
+                related_name="derived_problems",
+                to="problem.problem",
+            ),
+        ),
+    ]
diff --git a/backend/problem/models.py b/backend/problem/models.py
index d7d66c6..016aaac 100644
--- a/backend/problem/models.py
+++ b/backend/problem/models.py
@@ -29,6 +29,15 @@ class EntailmentLabel(models.TextChoices):
         default=Dataset.USER,
     )
 
+    base = models.ForeignKey(
+        "self",
+        on_delete=models.SET_NULL,
+        null=True,
+        blank=True,
+        related_name="derived_problems",
+        help_text="The base problem from which this problem was derived, if any.",
+    )
+
     premises = models.ManyToManyField(
         Sentence,
         related_name="premise_problems",
@@ -77,6 +86,7 @@ def serialize(self) -> dict:
 
         return {
             "id": self.pk,
+            "base": self.base.pk if self.base else None,
             "dataset": self.dataset,
             "premises": [premise.text for premise in self.premises.all()],
             "hypothesis": self.hypothesis.text,

From e7da8fca572c720922bbc76cae59009b6a994952 Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Mon, 22 Sep 2025 15:17:59 +0200
Subject: [PATCH 07/23] Use Problem.field in problem views

---
 backend/problem/views/problem.py | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/backend/problem/views/problem.py b/backend/problem/views/problem.py
index db5704b..fbd3d7b 100644
--- a/backend/problem/views/problem.py
+++ b/backend/problem/views/problem.py
@@ -132,6 +132,7 @@ class KBItem(TypedDict):
 
 class ParseInput(TypedDict):
     id: int
+    base: int | None
     premises: list[str]
     hypothesis: str
     kbItems: list[KBItem]
@@ -148,10 +149,10 @@ def validate_input(parse_input: dict) -> ParseInput:
         parse_input["id"] is not None and not isinstance(parse_input["id"], int)
     ):
         raise ValueError("Invalid problem 'id' field")
-
     if "premises" not in parse_input or not isinstance(parse_input["premises"], list):
         raise ValueError("Missing or invalid 'premises' field")
-
+    if "base" not in parse_input or not isinstance(parse_input["base"], (int, type(None))):
+        raise ValueError("Invalid 'base' field")
     if "hypothesis" not in parse_input or not isinstance(
         parse_input["hypothesis"], str
     ):
@@ -178,6 +179,7 @@ def validate_input(parse_input: dict) -> ParseInput:
 
     return ParseInput(
         id=parse_input["id"],
+        base=parse_input["base"],
         premises=parse_input["premises"],
         hypothesis=parse_input["hypothesis"],
         kbItems=parse_input["kbItems"],
@@ -204,6 +206,7 @@ def create_problem_from_input(parse_input: ParseInput) -> Problem:
         raise ValueError(f"Error creating hypothesis sentence: {e}")
 
     problem = Problem.objects.create(
+        base_id=parse_input["base"],
         hypothesis=hypothesis_sentence,
         dataset=Problem.Dataset.USER,
         # TODO: Determine entailment label based on LangPro parser output.
@@ -262,6 +265,16 @@ def update_problem_from_input(parse_input: ParseInput) -> Problem:
     problem.hypothesis = Sentence.objects.get_or_create(text=parse_input["hypothesis"])[
         0
     ]
+    
+    if parse_input["base"] is None:
+        problem.base = None
+    else:
+        try:
+            base_problem = Problem.objects.get(id=parse_input["base"])
+        except Problem.DoesNotExist:
+            raise ValueError(f"Cannot find base Problem with ID: {parse_input['base']}")
+        problem.base = base_problem # type: ignore
+    
     problem.save()
 
     premises: list[Sentence] = []

From 07297b3bd284079d60bdc58290e856a784a82153 Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Mon, 22 Sep 2025 15:18:18 +0200
Subject: [PATCH 08/23] Use update_or_create for sentences

---
 .../problem/management/commands/import_fracas.py    |  9 ++++++---
 backend/problem/management/commands/import_sick.py  |  5 ++---
 backend/problem/management/commands/import_snli.py  | 13 ++++++++++---
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/backend/problem/management/commands/import_fracas.py b/backend/problem/management/commands/import_fracas.py
index 45ecdec..f5a8970 100644
--- a/backend/problem/management/commands/import_fracas.py
+++ b/backend/problem/management/commands/import_fracas.py
@@ -43,6 +43,9 @@ def _annotate_section_subsections(tree: ET.ElementTree) -> None:
 
         root = tree.getroot()
 
+        if root is None:
+            raise ValueError("The XML file is empty or malformed.")
+
         for element in root:
             if element.tag == "comment" and element.attrib.get("class") == "section":
                 current_section = element.text.strip() if element.text else None
@@ -107,15 +110,15 @@ def import_fracas_problems(self, fracas_path: str) -> None:
                 )
                 skipped += 1
                 continue
-            hypothesis = Sentence.objects.create(
+            hypothesis = Sentence.objects.update_or_create(
                 text=FracasData._text_from_element(hypothesis_node)
-            )
+            )[0]
 
             premises = []
             premise_nodes = problem.findall("p")
             for node in premise_nodes:
                 if node.text:
-                    premises.append(Sentence.objects.create(text=node.text.strip()))
+                    premises.append(Sentence.objects.update_or_create(text=node.text.strip())[0])
 
 
             entailment_label = self.ENTAILMENT_LABELS.get(
diff --git a/backend/problem/management/commands/import_sick.py b/backend/problem/management/commands/import_sick.py
index 0172d34..07cfade 100644
--- a/backend/problem/management/commands/import_sick.py
+++ b/backend/problem/management/commands/import_sick.py
@@ -57,9 +57,8 @@ def import_sick_problems(self, sick_path: str) -> None:
 
                 extra_data = SickData.import_data(problem)
 
-                premise = Sentence.objects.create(text=problem["sentence_A"])
-
-                hypothesis = Sentence.objects.create(text=problem["sentence_B"])
+                premise = Sentence.objects.update_or_create(text=problem["sentence_A"])[0]
+                hypothesis = Sentence.objects.update_or_create(text=problem["sentence_B"])[0]
 
                 problem = Problem.objects.create(
                     dataset=Problem.Dataset.SICK,
diff --git a/backend/problem/management/commands/import_snli.py b/backend/problem/management/commands/import_snli.py
index c06c864..ce95f3d 100644
--- a/backend/problem/management/commands/import_snli.py
+++ b/backend/problem/management/commands/import_snli.py
@@ -1,4 +1,5 @@
 import csv
+from typing import Literal
 
 from django.core.management.base import BaseCommand
 from tqdm import tqdm
@@ -53,7 +54,9 @@ def handle(self, *args, **options):
 
         self.import_snli_problems(snli_paths)
 
-    def import_snli_problems(self, snli_paths: list[tuple[str, str]]) -> None:
+    def import_snli_problems(
+        self, snli_paths: list[tuple[Literal["dev", "train", "test"], str]]
+    ) -> None:
         """
         Import SNLI 1.0 problems from a list of SNLI TSV files and enter them into the database.
         """
@@ -99,9 +102,13 @@ def import_snli_problems(self, snli_paths: list[tuple[str, str]]) -> None:
 
                         extra_data = SNLIData.import_data(problem, subset)
 
-                        premise = Sentence.objects.create(text=problem["sentence1"])
+                        premise = Sentence.objects.update_or_create(
+                            text=problem["sentence1"]
+                        )[0]
 
-                        hypothesis = Sentence.objects.create(text=problem["sentence2"])
+                        hypothesis = Sentence.objects.update_or_create(
+                            text=problem["sentence2"]
+                        )[0]
 
                         new_problem = Problem.objects.create(
                             dataset=Problem.Dataset.SNLI,

From aadfd324d66261adec41e68ae94d4b879cd6c4af Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Mon, 22 Sep 2025 15:19:51 +0200
Subject: [PATCH 09/23] Use base field in frontend

---
 .../problem-details.component.html            | 16 +++++++
 .../problem-details.component.ts              | 17 +++++--
 frontend/src/app/services/problem.service.ts  | 44 +++++++++++++++++--
 frontend/src/app/types.ts                     |  2 +-
 4 files changed, 71 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/annotate/annotation-input/problem-details/problem-details.component.html b/frontend/src/app/annotate/annotation-input/problem-details/problem-details.component.html
index e5bf8c5..e842b31 100644
--- a/frontend/src/app/annotate/annotation-input/problem-details/problem-details.component.html
+++ b/frontend/src/app/annotate/annotation-input/problem-details/problem-details.component.html
@@ -1,3 +1,4 @@
+@let viewMode = viewMode$ | async; 
 @if (problemDetails(); as details) {
 <div>
     <table class="table table-sm table-borderless">
@@ -18,6 +19,21 @@
                     ></la-entailment-label-badge>
                 </td>
             </tr>
+            <tr>
+                <td class="text-muted" i18n>Based on:</td>
+                @if (viewMode === 'browse' && details.baseProblemId !== null) {
+                <td>
+                    <a [routerLink]="['/annotate', details.baseProblemId]">
+                        <span>{{ details.baseProblemId }}</span>
+                        <fa-icon [icon]="faArrowUpRight"  class="ms-2"/>
+                    </a>
+                </td>
+                } @else if (details.baseProblemId === null) {
+                <td i18n>None</td>
+                } @else {
+                <td>{{ details.baseProblemId }}</td>
+                }
+            </tr>
             @if (sectionString()) {
             <tr>
                 <td class="text-muted" i18n>Section:</td>
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 2630d79..a7aad40 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
@@ -1,13 +1,17 @@
-import { Component, computed, input } from "@angular/core";
+import { Component, computed, inject, input } from "@angular/core";
 import { Dataset, EntailmentLabel, Problem } from "../../../types";
 import { EntailmentLabelBadgeComponent } from "./entailment-label-badge/entailment-label-badge.component";
-import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
+import { faArrowUpRightFromSquare, faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { NgbTooltipModule } from "@ng-bootstrap/ng-bootstrap";
 import { datasetLabels } from "@/shared/displayTextMappings";
+import { AppModeService } from "@/services/app-mode.service";
+import { CommonModule } from "@angular/common";
+import { RouterModule } from "@angular/router";
 
 export interface ProblemDetails {
     problemId: string;
+    baseProblemId: string | null;
     dataset: Dataset;
     entailmentLabel: EntailmentLabel;
     section: string | null;
@@ -22,12 +26,17 @@ export interface ProblemDetails {
         EntailmentLabelBadgeComponent,
         FontAwesomeModule,
         NgbTooltipModule,
+        CommonModule,
+        RouterModule,
     ],
     templateUrl: "./problem-details.component.html",
     styleUrl: "./problem-details.component.scss",
 })
 export class ProblemDetailsComponent {
     public readonly problem = input.required<Problem>();
+    private appModeService = inject(AppModeService);
+
+    public viewMode$ = this.appModeService.viewMode$;
 
     public problemDetails = computed(() => {
         const problem = this.problem();
@@ -38,6 +47,7 @@ export class ProblemDetailsComponent {
     });
 
     public faQuestionCircle = faQuestionCircle;
+    public faArrowUpRight = faArrowUpRightFromSquare;
     public datasetLabels = datasetLabels;
 
     public sectionString = computed<string | null>(() => {
@@ -60,9 +70,10 @@ export class ProblemDetailsComponent {
     private extractDetails(problem: Problem): ProblemDetails | null {
         const shared: Pick<
             ProblemDetails,
-            "problemId" | "dataset" | "entailmentLabel"
+            "problemId" | "dataset" | "entailmentLabel" | "baseProblemId"
         > = {
             problemId: problem.id?.toString() ?? $localize`new`,
+            baseProblemId: problem.base?.toString() ?? null,
             dataset: problem.dataset,
             entailmentLabel: problem.entailmentLabel,
         };
diff --git a/frontend/src/app/services/problem.service.ts b/frontend/src/app/services/problem.service.ts
index cd0d74f..0500cf9 100644
--- a/frontend/src/app/services/problem.service.ts
+++ b/frontend/src/app/services/problem.service.ts
@@ -29,11 +29,21 @@ export class ProblemService {
             if (!problemId) {
                 return of(null);
             }
-            return problemId === "new" ? this.newProblem$() : this.existingProblem$(problemId, queryParams);
+            const baseParam = this.extractBaseParam(queryParams);
+
+            return problemId === "new" ? this.newProblem$(baseParam) : this.existingProblem$(problemId, queryParams);
         }),
         shareReplay(1)
     );
 
+    private extractBaseParam(queryParams: ParamMap): number | null {
+        const baseStr = queryParams.get("base");
+        if (!baseStr) {
+            return null;
+        }
+        return parseInt(baseStr, 10);
+    }
+
     public problem$ = this.problemResponse$.pipe(
         map(response => response?.problem ?? null),
         shareReplay(1)
@@ -51,8 +61,8 @@ export class ProblemService {
         })
     );
 
-    private newProblem$(): Observable<ProblemResponse> {
-        return of<ProblemResponse>({
+    private newProblem$(baseParam: number | null): Observable<ProblemResponse> {
+        const sharedProblemResponse: Omit<ProblemResponse, "problem"> = {
             index: null,
             firstProblemId: null,
             lastProblemId: null,
@@ -60,9 +70,35 @@ export class ProblemService {
             previousProblemId: null,
             totalProblems: 0,
             error: null,
+        };
+
+        if (baseParam !== null) {
+            return this.existingProblem$(baseParam.toString()).pipe(map(response => {
+                const problem = response?.problem;
+                return {
+                    ...sharedProblemResponse,
+                    problem: {
+                        id: null,
+                        base: baseParam,
+                        hypothesis: problem?.hypothesis ?? "",
+                        dataset: Dataset.USER,
+                        premises: problem?.premises ?? [],
+                        entailmentLabel: EntailmentLabel.UNKNOWN,
+                        extraData: null,
+                        // KB items are not shared across problems.
+                        kbItems: problem?.kbItems.map(kbItem => ({
+                            ...kbItem,
+                            id: null,
+                        })) ?? []
+                    }
+                };
+            }));
+        }
+        return of<ProblemResponse>({
+            ...sharedProblemResponse,
             problem: {
                 id: null,
-                base: null,
+                base: baseParam,
                 hypothesis: "",
                 dataset: Dataset.USER,
                 premises: [],
diff --git a/frontend/src/app/types.ts b/frontend/src/app/types.ts
index fb154fe..ed76692 100644
--- a/frontend/src/app/types.ts
+++ b/frontend/src/app/types.ts
@@ -31,7 +31,7 @@ export enum KnowledgeBaseRelationship {
 }
 
 interface KnowledgeBaseItem {
-    id: number;
+    id: number | null;
     entity1: string;
     relationship: KnowledgeBaseRelationship;
     entity2: string;

From 60a2e5ae2e18aa4987324d507ca251f12de0f65c Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Mon, 22 Sep 2025 15:20:05 +0200
Subject: [PATCH 10/23] Simplify Annotate component template

---
 .../src/app/annotate/annotate.component.html  | 33 ++++++-------------
 1 file changed, 10 insertions(+), 23 deletions(-)

diff --git a/frontend/src/app/annotate/annotate.component.html b/frontend/src/app/annotate/annotate.component.html
index ea0d9b0..71eb50c 100644
--- a/frontend/src/app/annotate/annotate.component.html
+++ b/frontend/src/app/annotate/annotate.component.html
@@ -1,10 +1,9 @@
 @let firstProblemId = firstProblemId$ | async;
-@let viewMode = viewMode$ | async;
-@let browsing = viewMode === 'browse';
+@let viewMode = viewMode$ | async; 
+@let browsing = viewMode === 'browse'; 
 @let adding = viewMode === 'add';
 @let editing = viewMode === 'edit';
 
-
 <div class="row mb-4">
     <div class="d-flex flex-column col-4 gap-2">
         @if (browsing) {
@@ -12,44 +11,32 @@
             <la-navigator />
             <la-search />
         </div>
-        } @else if (adding) {
+        } @else if (adding || editing) {
         <section class="d-flex flex-column gap-2">
+            @if (adding) {
             <p class="text-muted" i18n>
                 You are currently adding a new problem.
             </p>
-            <p class="text-muted" i18n>
-                Hit 'Start Parse' to send your problem data to the parser and
-                inspect the results.
-            </p>
-            <p class="text-muted" i18n>
-                If you are happy with the changes, save the problem by clicking
-                the 'Save' button.
-            </p>
-            <p class="text-muted" i18n>
-                This will add the problem to the database.
-            </p>
-        </section>
-        } @else if (editing) {
-        <section>
+            } @else {
             <p class="text-muted" i18n>
                 You are currently editing an existing problem.
             </p>
+            }
             <p class="text-muted" i18n>
                 Hit 'Start Parse' to send your problem data to the parser and
                 inspect the results.
             </p>
             <p class="text-muted" i18n>
-                If you are happy with the changes, save the changes by clicking
+                If you are happy with the changes, save the problem by clicking
                 the 'Save problem' button.
             </p>
-            @if (isUserProblem$ | async) {
+            @if (adding) {
             <p class="text-muted" i18n>
-                This will update this problem in the database.
+                This will add the problem to the database.
             </p>
             } @else {
             <p class="text-muted" i18n>
-                This will create a new problem in the database, leaving the
-                original problem unchanged.
+                This will update this problem in the database.
             </p>
             }
         </section>

From bcb27e94c54a992c93374df583af1e7117043fe7 Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Mon, 22 Sep 2025 15:20:22 +0200
Subject: [PATCH 11/23] Keep queryParams after form update

---
 frontend/src/app/annotate/search/search.component.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/annotate/search/search.component.ts b/frontend/src/app/annotate/search/search.component.ts
index 96c8b59..82f8efe 100644
--- a/frontend/src/app/annotate/search/search.component.ts
+++ b/frontend/src/app/annotate/search/search.component.ts
@@ -124,10 +124,10 @@ export class SearchComponent {
 
     // Updates the route, which triggers a new query.
     private updateUrl(searchParams: SearchParams): void {
-        const url = this.router.createUrlTree([], {
+        this.router.navigate([], {
             relativeTo: this.route,
-            queryParams: searchParams
-        }).toString();
-        this.router.navigateByUrl(url);
+            queryParams: searchParams,
+            queryParamsHandling: 'merge',
+        });
     }
 }

From a68c25a633723f015aa078b747f7b835bb77e258 Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Mon, 22 Sep 2025 16:49:57 +0200
Subject: [PATCH 12/23] Fix failing tests

---
 .../problem-details/problem-details.component.spec.ts      | 7 ++++++-
 frontend/src/app/services/problem.service.spec.ts          | 3 +++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/annotate/annotation-input/problem-details/problem-details.component.spec.ts b/frontend/src/app/annotate/annotation-input/problem-details/problem-details.component.spec.ts
index f135997..380d352 100644
--- a/frontend/src/app/annotate/annotation-input/problem-details/problem-details.component.spec.ts
+++ b/frontend/src/app/annotate/annotation-input/problem-details/problem-details.component.spec.ts
@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from "@angular/core/testing";
 
 import { ProblemDetailsComponent } from "./problem-details.component";
 import { Dataset, EntailmentLabel, Problem } from "../../../types";
+import { provideHttpClient } from "@angular/common/http";
 
 const createMockProblem = (
     id: number,
@@ -10,6 +11,7 @@ const createMockProblem = (
     extraData: any = {},
 ): Problem => ({
     id,
+    base: null,
     dataset,
     entailmentLabel,
     premises: ["premise"],
@@ -25,6 +27,7 @@ describe("ProblemDetailsComponent", () => {
     beforeEach(async () => {
         await TestBed.configureTestingModule({
             imports: [ProblemDetailsComponent],
+            providers: [provideHttpClient()]
         }).compileComponents();
 
         fixture = TestBed.createComponent(ProblemDetailsComponent);
@@ -41,7 +44,7 @@ describe("ProblemDetailsComponent", () => {
         expect(component).toBeTruthy();
     });
 
-     describe("with SICK dataset problem", () => {
+    describe("with SICK dataset problem", () => {
         beforeEach(() => {
             const problem = createMockProblem(
                 1,
@@ -55,6 +58,7 @@ describe("ProblemDetailsComponent", () => {
         it("should extract correct problem details", () => {
             expect(component.problemDetails()).toEqual({
                 problemId: "1",
+                baseProblemId: null,
                 dataset: Dataset.SICK,
                 entailmentLabel: EntailmentLabel.ENTAILMENT,
                 section: null,
@@ -87,6 +91,7 @@ describe("ProblemDetailsComponent", () => {
         it("should extract correct problem details", () => {
             expect(component.problemDetails()).toEqual({
                 problemId: "2",
+                baseProblemId: null,
                 dataset: Dataset.FRACAS,
                 entailmentLabel: EntailmentLabel.CONTRADICTION,
                 section: "Quantifiers",
diff --git a/frontend/src/app/services/problem.service.spec.ts b/frontend/src/app/services/problem.service.spec.ts
index 5648bd4..06aa7da 100644
--- a/frontend/src/app/services/problem.service.spec.ts
+++ b/frontend/src/app/services/problem.service.spec.ts
@@ -49,6 +49,7 @@ describe("ProblemService", () => {
             const mockResponse: ProblemResponse = {
                 problem: {
                     id: mockProblemId,
+                    base: null,
                     dataset: Dataset.SICK,
                     premises: ["a"],
                     hypothesis: "b",
@@ -131,6 +132,7 @@ describe("ProblemService", () => {
         it("should POST the problem and return the response", (done) => {
             const problemToSave: ParseInput = {
                 id: 1,
+                base: null,
                 premises: ["a"],
                 hypothesis: "b",
                 kbItems: [],
@@ -153,6 +155,7 @@ describe("ProblemService", () => {
         it("should handle errors during save", (done) => {
             const problemToSave: ParseInput = {
                 id: 2,
+                base: null,
                 premises: ["c"],
                 hypothesis: "d",
                 kbItems: []

From 658a1fe2d121b8bc8f96acc479236287da0d3cd0 Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Sat, 25 Oct 2025 15:05:03 +0200
Subject: [PATCH 13/23] Add base field to serializer

---
 backend/problem/serializers.py | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/backend/problem/serializers.py b/backend/problem/serializers.py
index 5b719e7..e75795f 100644
--- a/backend/problem/serializers.py
+++ b/backend/problem/serializers.py
@@ -40,6 +40,8 @@ class ProblemInputSerializer(serializers.Serializer):
         many=True, allow_empty=True, help_text="List of knowledge base items"
     )
 
+    base = serializers.IntegerField(required=False, allow_null=True)
+
     def validate_id(self, value):
         """
         Validate that the problem ID exists and belongs to a user problem.
@@ -53,3 +55,12 @@ def validate_id(self, value):
                     f"Problem with ID {value} does not exist or is not a user problem."
                 )
         return value
+
+    def validate_base(self, value):
+        """Validate that the base problem ID exists if provided."""
+        if value is not None:
+            if not Problem.objects.filter(id=value).exists():
+                raise serializers.ValidationError(
+                    f"Base problem with ID {value} does not exist."
+                )
+        return value

From 8c233350ba1e0b5a73072a1c47aecb7b56586834 Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Sat, 25 Oct 2025 15:05:25 +0200
Subject: [PATCH 14/23] Add Replace ViewMode with AppMode in
 ProblemDetailsComponent

---
 .../problem-details/problem-details.component.html          | 4 ++--
 .../problem-details/problem-details.component.ts            | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/annotate/annotation-input/problem-details/problem-details.component.html b/frontend/src/app/annotate/annotation-input/problem-details/problem-details.component.html
index e842b31..8c46b72 100644
--- a/frontend/src/app/annotate/annotation-input/problem-details/problem-details.component.html
+++ b/frontend/src/app/annotate/annotation-input/problem-details/problem-details.component.html
@@ -1,4 +1,4 @@
-@let viewMode = viewMode$ | async; 
+@let appMode = appMode$ | async;
 @if (problemDetails(); as details) {
 <div>
     <table class="table table-sm table-borderless">
@@ -21,7 +21,7 @@
             </tr>
             <tr>
                 <td class="text-muted" i18n>Based on:</td>
-                @if (viewMode === 'browse' && details.baseProblemId !== null) {
+                @if (appMode === 'browse' && details.baseProblemId !== null) {
                 <td>
                     <a [routerLink]="['/annotate', details.baseProblemId]">
                         <span>{{ details.baseProblemId }}</span>
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 a7aad40..961d2ce 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
@@ -5,9 +5,9 @@ import { faArrowUpRightFromSquare, faQuestionCircle } from "@fortawesome/free-so
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { NgbTooltipModule } from "@ng-bootstrap/ng-bootstrap";
 import { datasetLabels } from "@/shared/displayTextMappings";
-import { AppModeService } from "@/services/app-mode.service";
 import { CommonModule } from "@angular/common";
 import { RouterModule } from "@angular/router";
+import { ProblemService } from "@/services/problem.service";
 
 export interface ProblemDetails {
     problemId: string;
@@ -34,9 +34,9 @@ export interface ProblemDetails {
 })
 export class ProblemDetailsComponent {
     public readonly problem = input.required<Problem>();
-    private appModeService = inject(AppModeService);
+    private problemService = inject(ProblemService);
 
-    public viewMode$ = this.appModeService.viewMode$;
+    public appMode$ = this.problemService.appMode$;
 
     public problemDetails = computed(() => {
         const problem = this.problem();

From d0e0d34354ec356ef24f2e23d63e91f5633a4432 Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Sat, 25 Oct 2025 15:09:14 +0200
Subject: [PATCH 15/23] Remove unused import

---
 backend/problem/problem_details.py | 1 -
 1 file changed, 1 deletion(-)

diff --git a/backend/problem/problem_details.py b/backend/problem/problem_details.py
index 3254e70..05e36f1 100644
--- a/backend/problem/problem_details.py
+++ b/backend/problem/problem_details.py
@@ -1,4 +1,3 @@
-from typing import Optional
 from dataclasses import dataclass
 
 from django.http import QueryDict

From 0428b12a5789258e121b6a90353532b2dff1c0b6 Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Sun, 7 Dec 2025 22:35:07 +0100
Subject: [PATCH 16/23] Outfactor util

---
 .../annotation-input.component.ts             |  6 ----
 frontend/src/app/shared/areParamsEqual.ts     | 30 +++++++++++++++++++
 2 files changed, 30 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/app/shared/areParamsEqual.ts

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 2a596fc..ad1855d 100644
--- a/frontend/src/app/annotate/annotation-input/annotation-input.component.ts
+++ b/frontend/src/app/annotate/annotation-input/annotation-input.component.ts
@@ -130,12 +130,6 @@ export class AnnotationInputComponent implements OnInit {
         this.parseService.submit$.next(input);
     }
 
-    public copyProblem(): void {
-        this.router.navigate(["/", "annotate", "new"], {
-            queryParams: { base: this.form?.getRawValue().id }
-        });
-    }
-
     public saveProblem(): void {
         this.form?.markAllAsTouched();
         if (!this.form || this.form.invalid) {
diff --git a/frontend/src/app/shared/areParamsEqual.ts b/frontend/src/app/shared/areParamsEqual.ts
new file mode 100644
index 0000000..39ce915
--- /dev/null
+++ b/frontend/src/app/shared/areParamsEqual.ts
@@ -0,0 +1,30 @@
+import { ParamMap } from "@angular/router";
+
+/**
+ * Compares two sets of route parameters and query parameters and an 'edit'
+ * flag to determine if they are equal.
+ *
+ * @param oldParams - A tuple containing the previous route parameters, query
+ * parameters, and edit flag.
+ * @param newParams - A tuple containing the new route parameters, query
+ * parameters, and edit flag.
+ * @returns `true` if all parameters and query parameters are equal and the
+ * edit flags match, otherwise `false`.
+ */
+export default function areParamsEqual(
+    [oldParams, oldQueryParams, oldEditParam]: [ParamMap, ParamMap, boolean],
+    [newParams, newQueryParams, newEditParam]: [ParamMap, ParamMap, boolean]
+): boolean {
+    const compareMaps = (map1: ParamMap, map2: ParamMap) => {
+        if (map1.keys.length !== map2.keys.length) {
+            return false;
+        }
+        return map1.keys.every((key: string) => map1.get(key) === map2.get(key));
+    };
+
+    return (
+        compareMaps(oldParams, newParams) &&
+        compareMaps(oldQueryParams, newQueryParams) &&
+        oldEditParam === newEditParam
+    );
+}

From 5006b4c206631d0b684ecd8b4ac45490bd718bbe Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Sun, 7 Dec 2025 22:35:20 +0100
Subject: [PATCH 17/23] Set base in serializer

---
 backend/problem/serializers.py | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/backend/problem/serializers.py b/backend/problem/serializers.py
index bdc6565..332b146 100644
--- a/backend/problem/serializers.py
+++ b/backend/problem/serializers.py
@@ -104,6 +104,7 @@ def create(self, validated_data: dict) -> Problem:
         )[0]
 
         problem = Problem.objects.create(
+            base_id=validated_data.get("base", None),
             hypothesis=hypothesis_sentence,
             dataset=Problem.Dataset.USER,
             # TODO: Determine entailment label based on LangPro parser output.
@@ -132,6 +133,19 @@ def update(self, instance: Problem, validated_data: dict) -> Problem:
         instance.hypothesis = Sentence.objects.get_or_create(
             text=validated_data["hypothesis"],
         )[0]
+
+        validated_base_id = validated_data.get("base", None)
+        if validated_base_id is None:
+            instance.base = None
+        else:
+            try:
+                base_problem = Problem.objects.get(id=validated_base_id)
+            except Problem.DoesNotExist:
+                raise serializers.ValidationError(
+                    f"Base problem with ID {validated_base_id} does not exist."
+                )
+            instance.base = base_problem # type: ignore
+
         instance.save()
 
         premise_sentences = [

From 873b040111fe5e84a69fb6f65bab59fe9d5e73ba Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Sun, 7 Dec 2025 23:14:34 +0100
Subject: [PATCH 18/23] Reinstate IconButton for non-navigational buttons

---
 .../annotation-input.component.html           | 33 +++++---------
 .../annotation-input.component.ts             | 19 ++++----
 .../knowledge-base-form.component.html        | 25 ++++-------
 .../premises-form.component.html              | 44 +++++++------------
 .../premises-form/premises-form.component.ts  |  2 +-
 .../icon-button/icon-button.component.html    | 10 +++--
 .../icon-button/icon-button.component.ts      |  1 +
 7 files changed, 51 insertions(+), 83 deletions(-)

diff --git a/frontend/src/app/annotate/annotation-input/annotation-input.component.html b/frontend/src/app/annotate/annotation-input/annotation-input.component.html
index cb6615a..80d4311 100644
--- a/frontend/src/app/annotate/annotation-input/annotation-input.component.html
+++ b/frontend/src/app/annotate/annotation-input/annotation-input.component.html
@@ -12,19 +12,12 @@
             <la-knowledge-base-form [form]="form" />
         </div>
         <div class="d-flex justify-content-between mt-3">
-            <button
-                type="button"
-                class="btn btn-success d-flex align-items-center justify-content-center"
+            <la-icon-button
+                buttonStyle="success"
+                [icon]="faTree"
+                label="Start parse"
                 (click)="startParse()"
-            >
-                <fa-icon
-                    [icon]="faTree"
-                    class="fa-md"
-                    aria-hidden="true"
-                    focusable="false"
-                />
-                <span class="ms-2" i18n>Start parse</span>
-            </button>
+            />
             @if (appMode === 'browse') {
             <a
                 class="btn btn-secondary d-flex align-items-center justify-content-center"
@@ -42,18 +35,12 @@
             </a>
             }
             @if ((appMode === 'edit' || appMode === 'add') && userProblem) {
-            <button
-                type="button"
-                class="btn btn-primary d-flex align-items-center justify-content-center"
+            <la-icon-button
+                buttonStyle="primary"
+                [icon]="faFloppyDisk"
+                label="Save problem"
                 (click)="saveProblem()"
-            >
-                <fa-icon
-                    [icon]="faFloppyDisk"
-                    aria-hidden="true"
-                    focusable="false"
-                ></fa-icon>
-                <span class="ms-3" i18n>Save problem</span>
-            </button>
+            />
             } @else if (userProblem) {
             <a
                 class="btn btn-secondary d-flex align-items-center justify-content-center"
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 ad1855d..84693e8 100644
--- a/frontend/src/app/annotate/annotation-input/annotation-input.component.ts
+++ b/frontend/src/app/annotate/annotation-input/annotation-input.component.ts
@@ -43,15 +43,16 @@ export type ParseInput = ReturnType<ParseInputForm["getRawValue"]>;
     selector: "la-annotation-input",
     standalone: true,
     imports: [
-        CommonModule,
-        PremisesFormComponent,
-        KnowledgeBaseFormComponent,
-        FormsModule,
-        ReactiveFormsModule,
-        ProblemDetailsComponent,
-        FontAwesomeModule,
-        RouterLinkWithHref
-    ],
+    CommonModule,
+    PremisesFormComponent,
+    KnowledgeBaseFormComponent,
+    FormsModule,
+    ReactiveFormsModule,
+    ProblemDetailsComponent,
+    FontAwesomeModule,
+    RouterLinkWithHref,
+    IconButtonComponent
+],
     templateUrl: "./annotation-input.component.html",
     styleUrl: "./annotation-input.component.scss",
 })
diff --git a/frontend/src/app/annotate/annotation-input/knowledge-base-form/knowledge-base-form.component.html b/frontend/src/app/annotate/annotation-input/knowledge-base-form/knowledge-base-form.component.html
index aa2edab..7f61af8 100644
--- a/frontend/src/app/annotate/annotation-input/knowledge-base-form/knowledge-base-form.component.html
+++ b/frontend/src/app/annotate/annotation-input/knowledge-base-form/knowledge-base-form.component.html
@@ -52,24 +52,15 @@
                     placeholder="Entity 2"
                     required
                 />
-                <button
-                    type="button"
-                    class="btn btn-danger"
+                <la-icon-button
+                    buttonStyle="danger"
+                    [icon]="faTrash"
+
+                    label="Remove"
                     (click)="removeKnowledgeBaseItem(i)"
-                    aria-labelledby="remove-kb-item"
-                    title="Remove knowledge base item"
-                    i18n-title
-                >
-                    <fa-icon
-                        [icon]="faTrash"
-                        class="fa-sm"
-                        aria-hidden="true"
-                        focusable="false"
-                    ></fa-icon>
-                    <span id="remove-kb-item" class="visually-hidden" i18n
-                        >Remove</span
-                    >
-                </button>
+                    visuallyHiddenLabel
+                    i18n-label
+                />
             </div>
             } @else {
             <p class="form-control-plaintext">
diff --git a/frontend/src/app/annotate/annotation-input/premises-form/premises-form.component.html b/frontend/src/app/annotate/annotation-input/premises-form/premises-form.component.html
index e4d5126..ecc1ea4 100644
--- a/frontend/src/app/annotate/annotation-input/premises-form/premises-form.component.html
+++ b/frontend/src/app/annotate/annotation-input/premises-form/premises-form.component.html
@@ -9,19 +9,15 @@
         >
             <span i18n>Premises</span>
             @if (editingOrAdding) {
-            <button
-                type="button"
-                class="btn btn-sm btn-outline-primary"
+            <la-icon-button
+                [icon]="faPlus"
+                iconPosition="right"
+                size="sm"
+                label="Add premise"
                 (click)="addPremise()"
-            >
-                <span class="me-1" i18n>Add premise</span>
-                <fa-icon
-                    [icon]="faPlus"
-                    class="fa-sm"
-                    aria-hidden="true"
-                    focusable="false"
-                ></fa-icon>
-            </button>
+                i18n-label
+                outline
+            />
             }
         </legend>
 
@@ -41,24 +37,14 @@
                         [formControlName]="i"
                     />
                     @if (editingOrAdding) {
-                    <button
-                        type="button"
-                        class="btn btn-danger"
+                    <la-icon-button
+                        buttonStyle="danger"
+                        [icon]="faTrash"
+                        label="Remove"
                         (click)="removePremise(i)"
-                        aria-labelledby="remove-premise"
-                        title="Remove premise"
-                        i18n-title
-                    >
-                        <fa-icon
-                            [icon]="faTrash"
-                            class="fa-sm"
-                            aria-hidden="true"
-                            focusable="false"
-                        ></fa-icon>
-                        <span id="remove-premise" class="visually-hidden" i18n
-                            >Remove</span
-                        >
-                    </button>
+                        visuallyHiddenLabel
+                        i18n-label
+                    />
                     }
                 </div>
             </li>
diff --git a/frontend/src/app/annotate/annotation-input/premises-form/premises-form.component.ts b/frontend/src/app/annotate/annotation-input/premises-form/premises-form.component.ts
index 39b6576..244fe35 100644
--- a/frontend/src/app/annotate/annotation-input/premises-form/premises-form.component.ts
+++ b/frontend/src/app/annotate/annotation-input/premises-form/premises-form.component.ts
@@ -4,8 +4,8 @@ import { CommonModule } from "@angular/common";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { ParseInputForm } from "../annotation-input.component";
-import { IconButtonComponent } from "@/shared/icon-button/icon-button.component";
 import { ProblemService } from "@/services/problem.service";
+import { IconButtonComponent } from "@/shared/icon-button/icon-button.component";
 
 export interface Premises {
     premises: string[];
diff --git a/frontend/src/app/shared/icon-button/icon-button.component.html b/frontend/src/app/shared/icon-button/icon-button.component.html
index 4c06ba2..0648430 100644
--- a/frontend/src/app/shared/icon-button/icon-button.component.html
+++ b/frontend/src/app/shared/icon-button/icon-button.component.html
@@ -1,4 +1,6 @@
-@let iconValue = icon(); @let position = iconPosition();
+@let iconValue = icon();
+@let position = iconPosition();
+@let visibleLabel = label() && !visuallyHiddenLabel();
 <button
     [type]="buttonType()"
     [class]="buttonClasses()"
@@ -9,16 +11,16 @@
     @if (iconValue && position === 'left') {
     <fa-icon
         [icon]="iconValue"
-        [class]="`fa-${size()} ${label() ? 'me-2' : ''}`"
+        [class]="`fa-${size()} ${visibleLabel ? 'me-2' : ''}`"
         aria-hidden="true"
         focusable="false"
     />
     }
-    <span i18n>{{ label() }}</span>
+    <span [class.visually-hidden]="!visibleLabel" i18n>{{ label() }}</span>
     @if (iconValue && position === 'right') {
     <fa-icon
         [icon]="iconValue"
-        [class]="`fa-${size()} ${label() ? 'ms-2' : ''}`"
+        [class]="`fa-${size()} ${visibleLabel ? 'ms-2' : ''}`"
         aria-hidden="true"
         focusable="false"
     />
diff --git a/frontend/src/app/shared/icon-button/icon-button.component.ts b/frontend/src/app/shared/icon-button/icon-button.component.ts
index 2e898eb..dd87301 100644
--- a/frontend/src/app/shared/icon-button/icon-button.component.ts
+++ b/frontend/src/app/shared/icon-button/icon-button.component.ts
@@ -19,6 +19,7 @@ export class IconButtonComponent {
     public disabled = input(false, { transform: booleanAttribute });
     public outline = input(false, { transform: booleanAttribute });
     public fullWidth = input(false, { transform: booleanAttribute });
+    public visuallyHiddenLabel = input(false, { transform: booleanAttribute });
 
     public buttonClasses = computed<string>(() => {
         const classes = ["btn", "d-flex", "align-items-center", "justify-content-center"];

From b4ec78dc0a03e3d1acb6ed666884ceb91be1a16e Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Sun, 7 Dec 2025 23:14:48 +0100
Subject: [PATCH 19/23] Remove unused imports

---
 frontend/src/app/annotate/search/search.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/annotate/search/search.component.ts b/frontend/src/app/annotate/search/search.component.ts
index 82f8efe..62f69ca 100644
--- a/frontend/src/app/annotate/search/search.component.ts
+++ b/frontend/src/app/annotate/search/search.component.ts
@@ -10,14 +10,14 @@ import {
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { faSearch, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { NgbDropdownModule } from "@ng-bootstrap/ng-bootstrap";
-import { BehaviorSubject, distinctUntilChanged, map } from "rxjs";
+import { BehaviorSubject, map } from "rxjs";
 import {
     FilterSelectComponent,
     SelectOption,
 } from "./filter-select/filter-select.component";
 import { datasetLabels, entailmentLabels } from "@/shared/displayTextMappings";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-import { ActivatedRoute, Params, Router } from "@angular/router";
+import { ActivatedRoute, Router } from "@angular/router";
 import { IconButtonComponent } from "@/shared/icon-button/icon-button.component";
 
 interface SearchParams {

From bea3b3e5ce302d16ed1ada0f13cc130b6647eb0c Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Sun, 7 Dec 2025 23:15:03 +0100
Subject: [PATCH 20/23] Silence Python type warning

---
 backend/problem/views/problem.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/problem/views/problem.py b/backend/problem/views/problem.py
index f4f185a..891ea1c 100644
--- a/backend/problem/views/problem.py
+++ b/backend/problem/views/problem.py
@@ -111,7 +111,7 @@ def _handle_update_create_problem(
         problem_serializer = ProblemSerializer()
 
         if problem_id is None:
-            problem = problem_serializer.create(validated_input)
+            problem = problem_serializer.create(validated_input) # type: ignore
             status = HTTP_201_CREATED
         else:
             problem_instance = get_object_or_404(

From 2ef99355557e55292a102105683b8872266844ba Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Mon, 8 Dec 2025 10:45:08 +0100
Subject: [PATCH 21/23] Return base correctly

---
 backend/problem/serializers.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/backend/problem/serializers.py b/backend/problem/serializers.py
index 332b146..4d89f59 100644
--- a/backend/problem/serializers.py
+++ b/backend/problem/serializers.py
@@ -62,6 +62,7 @@ class Meta:
             "entailmentLabel",
             "extraData",
             "kbItems",
+            "base",
         ]
 
     def get_premises(self, problem):

From f43bd3f7efb74a78049fb361eb5b516de993f25b Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Mon, 8 Dec 2025 10:45:22 +0100
Subject: [PATCH 22/23] Avoid duplicate results upon filtering

---
 backend/problem/views/problem.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/problem/views/problem.py b/backend/problem/views/problem.py
index 891ea1c..f1a10d2 100644
--- a/backend/problem/views/problem.py
+++ b/backend/problem/views/problem.py
@@ -55,7 +55,7 @@ def _get_problem_response(self, request: Request, pk: int | None) -> Response:
         qs = self.get_queryset()
 
         if filters is not None:
-            qs = qs.filter(filters)
+            qs = qs.filter(filters).distinct()
 
         problem = None
         if pk is not None:

From 7188e7f79f37645e877cb3a4bccc22a2ed897968 Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Mon, 8 Dec 2025 10:45:38 +0100
Subject: [PATCH 23/23] Outfactor general utility function

---
 frontend/src/app/services/problem.service.ts | 10 ++--------
 frontend/src/app/shared/extractBaseParam.ts  | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/app/shared/extractBaseParam.ts

diff --git a/frontend/src/app/services/problem.service.ts b/frontend/src/app/services/problem.service.ts
index bed44c3..242cc1d 100644
--- a/frontend/src/app/services/problem.service.ts
+++ b/frontend/src/app/services/problem.service.ts
@@ -1,4 +1,5 @@
 import { ParseInput } from "@/annotate/annotation-input/annotation-input.component";
+import extractBaseParam from "@/shared/extractBaseParam";
 import { ProblemResponse, SaveProblemResponse, Dataset, EntailmentLabel } from "@/types";
 import { HttpClient, HttpParams } from "@angular/common/http";
 import { Injectable, inject } from "@angular/core";
@@ -35,20 +36,13 @@ export class ProblemService {
             if (!problemId) {
                 return of(null);
             }
-            const baseParam = this.extractBaseParam(queryParams);
+            const baseParam = extractBaseParam(queryParams);
 
             return problemId === "new" ? this.newProblem$(baseParam) : this.existingProblem$(problemId, queryParams);
         }),
         shareReplay(1)
     );
 
-    private extractBaseParam(queryParams: ParamMap): number | null {
-        const baseStr = queryParams.get("base");
-        if (!baseStr) {
-            return null;
-        }
-        return parseInt(baseStr, 10);
-    }
 
     public problem$ = this.problemResponse$.pipe(
         map(response => response?.problem ?? null),
diff --git a/frontend/src/app/shared/extractBaseParam.ts b/frontend/src/app/shared/extractBaseParam.ts
new file mode 100644
index 0000000..64b0fb1
--- /dev/null
+++ b/frontend/src/app/shared/extractBaseParam.ts
@@ -0,0 +1,14 @@
+import { ParamMap } from "@angular/router";
+
+/**
+ * Extracts the base parameter from query parameters and returns it as a number.
+ * @param queryParams - The query parameters map to extract the base value from.
+ * @returns The base value as a number, or null if the base parameter is not present.
+ */
+export default function extractBaseParam(queryParams: ParamMap): number | null {
+    const baseStr = queryParams.get("base");
+    if (!baseStr) {
+        return null;
+    }
+    return parseInt(baseStr, 10);
+}