Plagiarism checks: Improve file selection in comparison

src/main/webapp/app/exercises/shared/plagiarism/plagiarism-details/plagiarism-details.component.html

@@ -1,6 +1,9 @@
 @if (comparison) {
     <div class="plagiarism-details">
-        <jhi-plagiarism-header [splitControlSubject]="splitControlSubject" [exercise]="exercise" [comparison]="comparison" />
-        <jhi-plagiarism-split-view [comparison]="comparison" [exercise]="exercise" [splitControlSubject]="splitControlSubject" />
+        <jhi-plagiarism-header [splitControlSubject]="splitControlSubject" [exercise]="exercise" [comparison]="comparison" (isLockFilesEnabledChange)="isLockFilesEnabled = $event">
+        </jhi-plagiarism-header>
+
+        <jhi-plagiarism-split-view [comparison]="comparison" [exercise]="exercise" [splitControlSubject]="splitControlSubject" [isLockFilesEnabled]="isLockFilesEnabled">
+        </jhi-plagiarism-split-view>
     </div>
 }

src/main/webapp/app/exercises/shared/plagiarism/plagiarism-details/plagiarism-details.component.ts

@@ -18,4 +18,9 @@ export class PlagiarismDetailsComponent {
      * Subject to be passed into PlagiarismSplitViewComponent to control the split view.
      */
     splitControlSubject: Subject<string> = new Subject<string>();
+
+    /**
+     * Boolean to determine whether file locking is enabled.
+     */
+    isLockFilesEnabled: boolean = false;
 }

src/main/webapp/app/exercises/shared/plagiarism/plagiarism-header/plagiarism-header.component.html

@@ -23,6 +23,11 @@ <h5 class="fw-medium">
             jhiTranslate="artemisApp.plagiarism.deny"
         ></button>
 
+        <button class="btn btn-outline-secondary btn-sm" (click)="toggleLockFiles()" [class.active]="isLockFilesEnabled" data-qa="lock-files-toggle-button">
+            <fa-icon [icon]="isLockFilesEnabled ? faLock : faUnlock" class="fa-solid m-2" aria-label="Synchronize files while navigating on both sides"> </fa-icon>
+            <span [jhiTranslate]="isLockFilesEnabled ? 'artemisApp.plagiarism.unlockSync' : 'artemisApp.plagiarism.lockSync'"></span>
+        </button>
+
         <div class="vertical-divider"></div>
 
         <div class="split-controls">

src/main/webapp/app/exercises/shared/plagiarism/plagiarism-header/plagiarism-header.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { Subject } from 'rxjs';
 import { PlagiarismStatus } from 'app/exercises/shared/plagiarism/types/PlagiarismStatus';
 import { PlagiarismComparison } from 'app/exercises/shared/plagiarism/types/PlagiarismComparison';
@@ -8,6 +8,7 @@ import { PlagiarismCasesService } from 'app/course/plagiarism-cases/shared/plagi
 import { ConfirmAutofocusModalComponent } from 'app/shared/components/confirm-autofocus-modal.component';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { Exercise, getCourseId } from 'app/entities/exercise.model';
+import { IconDefinition, faLock, faUnlock } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
     selector: 'jhi-plagiarism-header',
@@ -19,8 +20,13 @@ export class PlagiarismHeaderComponent {
     @Input() exercise: Exercise;
     @Input() splitControlSubject: Subject<string>;
 
+    @Output() isLockFilesEnabledChange = new EventEmitter<boolean>();
+
+    protected readonly faLock: IconDefinition = faLock;
+    protected readonly faUnlock: IconDefinition = faUnlock;
     readonly plagiarismStatus = PlagiarismStatus;
     isLoading = false;
+    isLockFilesEnabled = false;
 
     constructor(
         private plagiarismCasesService: PlagiarismCasesService,
@@ -76,4 +82,12 @@ export class PlagiarismHeaderComponent {
     resetSplitPanes() {
         this.splitControlSubject.next('even');
     }
+
+    /**
+     * Toggles the state of file locking and emits the new state to the parent component.
+     */
+    toggleLockFiles() {
+        this.isLockFilesEnabled = !this.isLockFilesEnabled;
+        this.isLockFilesEnabledChange.emit(this.isLockFilesEnabled);
+    }
 }

src/main/webapp/app/exercises/shared/plagiarism/plagiarism-split-view/plagiarism-split-view.component.html

@@ -5,7 +5,14 @@
                 <jhi-modeling-submission-viewer [exercise]="exercise" [plagiarismSubmission]="getModelingSubmissionA()" [hideContent]="false" />
             }
             @if (isProgrammingOrTextExercise) {
-                <jhi-text-submission-viewer [exercise]="exercise" [matches]="matchesA" [plagiarismSubmission]="getTextSubmissionA()" [hideContent]="false" />
+                <jhi-text-submission-viewer
+                    [fileSelectedSubject]="fileSelectedSubject"
+                    [exercise]="exercise"
+                    [matches]="matchesA"
+                    [plagiarismSubmission]="getTextSubmissionA()"
+                    [isLockFilesEnabled]="isLockFilesEnabled"
+                    [hideContent]="false"
+                />
             }
         }
     </div>
@@ -20,9 +27,11 @@
             }
             @if (isProgrammingOrTextExercise) {
                 <jhi-text-submission-viewer
+                    [fileSelectedSubject]="fileSelectedSubject"
                     [exercise]="exercise"
                     [matches]="matchesB"
                     [plagiarismSubmission]="getTextSubmissionB()"
+                    [isLockFilesEnabled]="isLockFilesEnabled"
                     [hideContent]="forStudent && dayjs(exercise.dueDate).isAfter(dayjs())"
                 />
             }

src/main/webapp/app/exercises/shared/plagiarism/plagiarism-split-view/plagiarism-split-view.component.ts

@@ -10,6 +10,7 @@ import { PlagiarismCasesService } from 'app/course/plagiarism-cases/shared/plagi
 import { HttpResponse } from '@angular/common/http';
 import { SimpleMatch } from 'app/exercises/shared/plagiarism/types/PlagiarismMatch';
 import dayjs from 'dayjs/esm';
+import { TextPlagiarismFileElement } from 'app/exercises/shared/plagiarism/types/text/TextPlagiarismFileElement';
 
 @Directive({ selector: '[jhiPane]' })
 export class SplitPaneDirective {
@@ -27,10 +28,12 @@ export class PlagiarismSplitViewComponent implements AfterViewInit, OnChanges, O
     @Input() splitControlSubject: Subject<string>;
     @Input() sortByStudentLogin: string;
     @Input() forStudent: boolean;
+    @Input() isLockFilesEnabled = false;
 
     @ViewChildren(SplitPaneDirective) panes!: QueryList<SplitPaneDirective>;
 
     plagiarismComparison: PlagiarismComparison<TextSubmissionElement | ModelingSubmissionElement>;
+    fileSelectedSubject = new Subject<TextPlagiarismFileElement>();
 
     public split: Split.Instance;
 
@@ -45,7 +48,7 @@ export class PlagiarismSplitViewComponent implements AfterViewInit, OnChanges, O
     constructor(private plagiarismCasesService: PlagiarismCasesService) {}
 
     /**
-     * Initialize third party libs inside this lifecycle hook.
+     * Initialize third-party libraries inside this lifecycle hook.
      */
     ngAfterViewInit(): void {
         const paneElements = this.panes.map((pane: SplitPaneDirective) => pane.elementRef.nativeElement);
@@ -122,7 +125,7 @@ export class PlagiarismSplitViewComponent implements AfterViewInit, OnChanges, O
      * @param matches list of objects containing the index and length of matched elements
      * @param submission the submission to map the elements of
      */
-    mapMatchesToElements(matches: SimpleMatch[], submission: PlagiarismSubmission<TextSubmissionElement>) {
+    public mapMatchesToElements(matches: SimpleMatch[], submission: PlagiarismSubmission<TextSubmissionElement>) {
         // sort submission elements so that from and to indexes from matches reference correct elements
         const elements = submission.elements?.sort((a, b) => a.id - b.id);
         const filesToMatchedElements = new Map<string, FromToElement[]>();

src/main/webapp/app/exercises/shared/plagiarism/plagiarism-split-view/split-pane-header/split-pane-header.component.ts

@@ -1,5 +1,7 @@
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import { Subject, Subscription } from 'rxjs';
+import { TextPlagiarismFileElement } from 'app/exercises/shared/plagiarism/types/text/TextPlagiarismFileElement';
 
 /**
  * A file name that additionally stores if a plagiarism match has been found for it.
@@ -14,17 +16,30 @@ export type FileWithHasMatch = {
     templateUrl: './split-pane-header.component.html',
     styleUrls: ['./split-pane-header.component.scss'],
 })
-export class SplitPaneHeaderComponent implements OnChanges {
+export class SplitPaneHeaderComponent implements OnChanges, OnInit, OnDestroy {
     @Input() files: FileWithHasMatch[];
     @Input() studentLogin: string;
+    @Input() fileSelectedSubject!: Subject<TextPlagiarismFileElement>;
+    @Input() isLockFilesEnabled!: boolean;
+
     @Output() selectFile = new EventEmitter<string>();
 
     public showFiles = false;
     public activeFileIndex = 0;
 
+    fileSelectSubscription: Subscription;
+
     // Icons
     faChevronDown = faChevronDown;
 
+    ngOnInit(): void {
+        this.fileSelectSubscription = this.fileSelectedSubject.subscribe((val) => {
+            if (val.file && this.isLockFilesEnabled) {
+                this.handleFileSelectWithoutPropagation(val.file, val.idx);
+            }
+        });
+    }
+
     ngOnChanges(changes: SimpleChanges) {
         if (changes.files) {
             const fileWithHasMatch: FileWithHasMatch[] = changes.files.currentValue;
@@ -37,6 +52,12 @@ export class SplitPaneHeaderComponent implements OnChanges {
         }
     }
 
+    ngOnDestroy(): void {
+        if (this.fileSelectSubscription) {
+            this.fileSelectSubscription.unsubscribe();
+        }
+    }
+
     hasActiveFile(): boolean {
         return this.hasFiles() && this.activeFileIndex < this.files.length;
     }
@@ -45,7 +66,24 @@ export class SplitPaneHeaderComponent implements OnChanges {
         return this.files[this.activeFileIndex].file;
     }
 
+    /**
+     * handles selection of file from dropdown, propagates change to fileslectionsubject component for lock sync
+     * @param file to be selected
+     * @param idx index of the file from the dropdown
+     */
     handleFileSelect(file: FileWithHasMatch, idx: number): void {
+        this.fileSelectedSubject.next({ idx: idx, file: file });
+        this.activeFileIndex = idx;
+        this.showFiles = false;
+        this.selectFile.emit(file.file);
+    }
+
+    /**
+     * handles selection of file from dropdown, do NOT propagates change to fileslectionsubject component for lock sync
+     * @param file to be selected
+     * @param idx index of the file from the dropdown
+     */
+    handleFileSelectWithoutPropagation(file: FileWithHasMatch, idx: number) {
         this.activeFileIndex = idx;
         this.showFiles = false;
         this.selectFile.emit(file.file);

src/main/webapp/app/exercises/shared/plagiarism/plagiarism-split-view/text-submission-viewer/text-submission-viewer.component.html

@@ -1,4 +1,10 @@
-<jhi-split-pane-header [files]="files" (selectFile)="handleFileSelect($event)" studentLogin="{{ plagiarismSubmission?.studentLogin }}" />
+<jhi-split-pane-header
+    [files]="files"
+    [isLockFilesEnabled]="this.isLockFilesEnabled"
+    [fileSelectedSubject]="fileSelectedSubject"
+    (selectFile)="handleFileSelect($event)"
+    studentLogin="{{ plagiarismSubmission?.studentLogin }}"
+/>
 @if (cannotLoadFiles) {
     <div class="text-submission-viewer text-warning">
         <div class="text-submission-viewer-warning">

src/main/webapp/app/exercises/shared/plagiarism/plagiarism-split-view/text-submission-viewer/text-submission-viewer.component.ts

@@ -12,6 +12,8 @@ import { FileWithHasMatch } from 'app/exercises/shared/plagiarism/plagiarism-spl
 import { escape } from 'lodash-es';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import { TEXT_FILE_EXTENSIONS } from 'app/shared/constants/file-extensions.constants';
+import { Subject } from 'rxjs';
+import { TextPlagiarismFileElement } from 'app/exercises/shared/plagiarism/types/text/TextPlagiarismFileElement';
 
 type FilesWithType = { [p: string]: FileType };
 
@@ -26,6 +28,8 @@ export class TextSubmissionViewerComponent implements OnChanges {
     @Input() matches: Map<string, FromToElement[]>;
     @Input() plagiarismSubmission: PlagiarismSubmission<TextSubmissionElement>;
     @Input() hideContent: boolean;
+    @Input() fileSelectedSubject!: Subject<TextPlagiarismFileElement>;
+    @Input() isLockFilesEnabled = false;
 
     /**
      * Name of the currently selected file.

src/main/webapp/app/exercises/shared/plagiarism/types/text/TextPlagiarismFileElement.ts

@@ -0,0 +1,6 @@
+import { FileWithHasMatch } from 'app/exercises/shared/plagiarism/plagiarism-split-view/split-pane-header/split-pane-header.component';
+
+export class TextPlagiarismFileElement {
+    idx: number;
+    file: FileWithHasMatch;
+}

src/main/webapp/i18n/de/plagiarism.json

@@ -4,6 +4,8 @@
             "plagiarismDetection": "Plagiatskontrolle",
             "confirm": "Bestätigen",
             "deny": "Ablehnen",
+            "lockSync": "Sync sperren",
+            "unlockSync": "Sync entsperren",
             "denyAfterConfirmModalTitle": "Wechsel von Bestätigen zu Ablehnen",
             "denyAfterConfirmModalText": "Bist du dir sicher, dass du die Entscheidung von \"Bestätigung des Plagiats\" in \"Ablehnung\" ändern möchtest? Dadurch wird der entsprechende Plagiatsfall einschließlich der Kommunikation mit dem/der Studierenden und des Urteils gelöscht und kann nicht rückgängig gemacht werden.",
             "warning": "Die Bestätigung/Ablehnung eines Plagiats geht beim Neuladen der Seite verloren.",

src/main/webapp/i18n/en/plagiarism.json

@@ -4,6 +4,8 @@
             "plagiarismDetection": "Plagiarism Detection",
             "confirm": "Confirm",
             "deny": "Deny",
+            "lockSync": "Lock Sync",
+            "unlockSync": "Unlock Sync",
             "denyAfterConfirmModalTitle": "Change from confirm to deny",
             "denyAfterConfirmModalText": "Are you sure that you want to change the decision from confirming the plagiarism to denying it? This will delete the corresponding plagiarism case incl. the communication with the student and the verdict and cannot be undone.",
             "warning": "Confirmation/Denial of plagiarism will be lost when refreshing the page.",

src/test/javascript/spec/component/plagiarism/plagiarism-header.component.spec.ts

@@ -13,6 +13,7 @@ import { HttpResponse } from '@angular/common/http';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { MockNgbModalService } from '../../helpers/mocks/service/mock-ngb-modal.service';
 import { ButtonComponent } from 'app/shared/components/button.component';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 describe('Plagiarism Header Component', () => {
     let comp: PlagiarismHeaderComponent;
@@ -27,6 +28,7 @@ describe('Plagiarism Header Component', () => {
                 { provide: TranslateService, useClass: MockTranslateService },
                 { provide: NgbModal, useClass: MockNgbModalService },
             ],
+            schemas: [NO_ERRORS_SCHEMA],
         }).compileComponents();
 
         fixture = TestBed.createComponent(PlagiarismHeaderComponent);

src/test/javascript/spec/component/plagiarism/plagiarism-split-view.component.spec.ts

@@ -170,7 +170,7 @@ describe('Plagiarism Split View Component', () => {
     });
 
     it('should parse text matches', () => {
-        jest.spyOn(comp, 'mapMatchesToElements').mockReturnValue(new Map());
+        jest.spyOn(comp, 'mapMatchesToElements').mockReturnValue(new Map<string, FromToElement[]>());
 
         const matches: PlagiarismMatch[] = [
             { startA: 0, startB: 0, length: 5 },

src/test/javascript/spec/component/plagiarism/split-pane-header.component.spec.ts

@@ -10,6 +10,8 @@ import { PlagiarismDetailsComponent } from 'app/exercises/shared/plagiarism/plag
 import { PlagiarismRunDetailsComponent } from 'app/exercises/shared/plagiarism/plagiarism-run-details/plagiarism-run-details.component';
 import { PlagiarismSidebarComponent } from 'app/exercises/shared/plagiarism/plagiarism-sidebar/plagiarism-sidebar.component';
 import { MockComponent, MockDirective, MockPipe } from 'ng-mocks';
+import { TextPlagiarismFileElement } from 'app/exercises/shared/plagiarism/types/text/TextPlagiarismFileElement';
+import { Subject } from 'rxjs';
 
 describe('SplitPaneHeaderComponent', () => {
     let comp: SplitPaneHeaderComponent;
@@ -42,6 +44,7 @@ describe('SplitPaneHeaderComponent', () => {
                 comp.files = [];
                 comp.studentLogin = 'ts10abc';
                 comp.selectFile = new EventEmitter<string>();
+                comp.fileSelectedSubject = new Subject<TextPlagiarismFileElement>();
             });
     });