Programming exercises: Improve integration of Monaco code editor and Athena Preliminary Feedback

src/main/java/de/tum/cit/aet/artemis/programming/service/ProgrammingExerciseCodeReviewFeedbackService.java

@@ -43,7 +43,8 @@ public class ProgrammingExerciseCodeReviewFeedbackService {
 
     private static final Logger log = LoggerFactory.getLogger(ProgrammingExerciseCodeReviewFeedbackService.class);
 
-    public static final String NON_GRADED_FEEDBACK_SUGGESTION = "NonGradedFeedbackSuggestion:";
+    // feedback.detailText prefix
+    public static final String PRELIMINARY_FEEDBACK_PREFIX = "NonGradedFeedbackSuggestion:";
 
     private final GroupNotificationService groupNotificationService;
 
@@ -124,7 +125,7 @@ public void generateAutomaticNonGradedFeedback(ProgrammingExerciseStudentPartici
         automaticResult.setScore(100.0);
         automaticResult.setSuccessful(null);
         automaticResult.setCompletionDate(ZonedDateTime.now().plusMinutes(5)); // we do not want to show dates without a completion date, but we want the students to know their
-                                                                               // feedback request is in work
+        // feedback request is in work
         automaticResult = this.resultRepository.save(automaticResult);
 
         try {
@@ -143,17 +144,17 @@ public void generateAutomaticNonGradedFeedback(ProgrammingExerciseStudentPartici
                         String feedbackText;
                         if (Objects.nonNull(individualFeedbackItem.lineStart())) {
                             if (Objects.nonNull(individualFeedbackItem.lineEnd()) && !individualFeedbackItem.lineStart().equals(individualFeedbackItem.lineEnd())) {
-                                feedbackText = String.format(NON_GRADED_FEEDBACK_SUGGESTION + "File %s at lines %d-%d", individualFeedbackItem.filePath(),
-                                        individualFeedbackItem.lineStart(), individualFeedbackItem.lineEnd());
+                                feedbackText = String.format(PRELIMINARY_FEEDBACK_PREFIX + "File %s at lines %d-%d", individualFeedbackItem.filePath(),
+                                        individualFeedbackItem.lineStart() + 1, individualFeedbackItem.lineEnd() + 1);
                             }
                             else {
-                                feedbackText = String.format(NON_GRADED_FEEDBACK_SUGGESTION + "File %s at line %d", individualFeedbackItem.filePath(),
-                                        individualFeedbackItem.lineStart());
+                                feedbackText = String.format(PRELIMINARY_FEEDBACK_PREFIX + "File %s at line %d", individualFeedbackItem.filePath(),
+                                        individualFeedbackItem.lineStart() + 1);
                             }
                             feedback.setReference(String.format("file:%s_line:%d", individualFeedbackItem.filePath(), individualFeedbackItem.lineStart()));
                         }
                         else {
-                            feedbackText = String.format(NON_GRADED_FEEDBACK_SUGGESTION + "File %s", individualFeedbackItem.filePath());
+                            feedbackText = String.format(PRELIMINARY_FEEDBACK_PREFIX + "File %s", individualFeedbackItem.filePath());
                         }
                         feedback.setText(feedbackText);
                         feedback.setDetailText(individualFeedbackItem.description());

src/main/webapp/app/entities/feedback.model.ts

@@ -33,7 +33,7 @@ export const SUBMISSION_POLICY_FEEDBACK_IDENTIFIER = 'SubPolFeedbackIdentifier:'
 export const FEEDBACK_SUGGESTION_IDENTIFIER = 'FeedbackSuggestion:';
 export const FEEDBACK_SUGGESTION_ACCEPTED_IDENTIFIER = 'FeedbackSuggestion:accepted:';
 export const FEEDBACK_SUGGESTION_ADAPTED_IDENTIFIER = 'FeedbackSuggestion:adapted:';
-export const NON_GRADED_FEEDBACK_SUGGESTION_IDENTIFIER = 'NonGradedFeedbackSuggestion:';
+export const PRELIMINARY_FEEDBACK_IDENTIFIER = 'NonGradedFeedbackSuggestion:';
 
 export interface DropInfo {
     instruction: GradingInstruction;
@@ -123,11 +123,11 @@ export class Feedback implements BaseEntity {
         return that.text.startsWith(FEEDBACK_SUGGESTION_IDENTIFIER);
     }
 
-    public static isNonGradedFeedbackSuggestion(that: Feedback): boolean {
+    public static isPreliminaryFeedback(that: Feedback): boolean {
         if (!that.text) {
             return false;
         }
-        return that.text.startsWith(NON_GRADED_FEEDBACK_SUGGESTION_IDENTIFIER);
+        return that.text.startsWith(PRELIMINARY_FEEDBACK_IDENTIFIER);
     }
 
     /**
@@ -297,6 +297,12 @@ export const buildFeedbackTextForReview = (feedback: Feedback, addFeedbackText =
         }
     } else if (feedback.detailText) {
         feedbackText = feedback.detailText;
+        if (feedback.text && feedback.text.includes('lines')) {
+            const linesInfo = feedback.text.match(/lines .*/);
+            if (linesInfo) {
+                feedbackText += ` (${linesInfo[0]})`;
+            }
+        }
     } else if (addFeedbackText && feedback.text) {
         feedbackText = feedback.text;
     }

src/main/webapp/app/exercises/programming/assess/code-editor-tutor-assessment-inline-feedback.component.html

@@ -69,7 +69,7 @@
                         [translateValues]="{ text: this.feedback | feedbackContent | quoted: ' ' }"
                         deleteQuestion="artemisApp.feedback.delete.question"
                         type="submit"
-                        (delete)="deleteFeedback()"
+                        (delete)="deleteFeedback(false)"
                         [dialogError]="dialogError$"
                         class="btn btn-danger btn-sm me-1"
                     >
@@ -88,24 +88,31 @@
             }
         </div>
     } @else {
-        <div class="p-1">
+        <div class="p-1 position-relative">
+            @if (Feedback.isPreliminaryFeedback(feedback)) {
+                <button
+                    type="button"
+                    class="btn-close cross position-absolute top-0 end-0 m-1 rounded-circle"
+                    aria-label="Close"
+                    (click)="deleteFeedback(true)"
+                    [ngbTooltip]="'entity.action.close' | artemisTranslate"
+                ></button>
+            }
             <div class="row flex-nowrap align-items-top m-1">
                 <div class="col flex-grow-0 ps-0">
                     <h5 class="d-inline">
-                        @if (!Feedback.isNonGradedFeedbackSuggestion(feedback)) {
-                            <span
-                                class="badge"
-                                [class.bg-success]="feedback.credits! > 0 && feedback.isSubsequent === undefined"
-                                [class.bg-danger]="feedback.credits! < 0 && feedback.isSubsequent === undefined"
-                                [class.bg-warning]="feedback.credits === 0 && feedback.isSubsequent === undefined"
-                                [class.bg-secondary]="readOnly && feedback.isSubsequent"
-                                >{{ roundScoreSpecifiedByCourseSettings(feedback.credits, course) + 'P' }}</span
-                            >
-                        }
+                        <span
+                            class="badge"
+                            [class.bg-success]="feedback.credits! > 0 && feedback.isSubsequent === undefined"
+                            [class.bg-danger]="feedback.credits! < 0 && feedback.isSubsequent === undefined"
+                            [class.bg-warning]="feedback.credits === 0 && feedback.isSubsequent === undefined"
+                            [class.bg-secondary]="readOnly && feedback.isSubsequent"
+                            >{{ roundScoreSpecifiedByCourseSettings(feedback.credits, course) + 'P' }}</span
+                        >
                     </h5>
                 </div>
                 <div class="col-10 ps-0 flex-grow-1 flex-shrink-1">
-                    @if (Feedback.isNonGradedFeedbackSuggestion(feedback)) {
+                    @if (Feedback.isPreliminaryFeedback(feedback)) {
                         <h6 class="d-inline mb-1" jhiTranslate="artemisApp.assessment.detail.feedback"></h6>
                         <p [innerHTML]="buildFeedbackTextForCodeEditor(feedback)" class="mt-1 mb-0"></p>
                     } @else {

src/main/webapp/app/exercises/programming/assess/code-editor-tutor-assessment-inline-feedback.component.scss

@@ -0,0 +1,14 @@
+.cross {
+    width: 20px;
+    height: 20px;
+    padding: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #000;
+
+    span {
+        font-size: 10px;
+        line-height: 1;
+    }
+}

src/main/webapp/app/exercises/programming/assess/code-editor-tutor-assessment-inline-feedback.component.ts

@@ -6,7 +6,7 @@ import { cloneDeep } from 'lodash-es';
 import { StructuredGradingCriterionService } from 'app/exercises/shared/structured-grading-criterion/structured-grading-criterion.service';
 import { roundValueSpecifiedByCourseSettings } from 'app/shared/util/utils';
 import { Course } from 'app/entities/course.model';
-import { faBan, faExclamationTriangle, faPencilAlt, faQuestionCircle, faSave, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { faBan, faExclamationTriangle, faPencilAlt, faQuestionCircle, faSave, faTimes, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { Subject } from 'rxjs';
 import { TranslateDirective } from 'app/shared/language/translate.directive';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
@@ -18,10 +18,12 @@ import { AssessmentCorrectionRoundBadgeComponent } from 'app/assessment/unrefere
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { FeedbackContentPipe } from 'app/shared/pipes/feedback-content.pipe';
 import { QuotePipe } from 'app/shared/pipes/quote.pipe';
+import { AlertService } from 'app/core/util/alert.service';
 
 @Component({
     selector: 'jhi-code-editor-tutor-assessment-inline-feedback',
     templateUrl: './code-editor-tutor-assessment-inline-feedback.component.html',
+    styleUrls: ['./code-editor-tutor-assessment-inline-feedback.component.scss'],
     imports: [
         FeedbackSuggestionBadgeComponent,
         TranslateDirective,
@@ -41,7 +43,10 @@ export class CodeEditorTutorAssessmentInlineFeedbackComponent {
     // Needed for the outer editor to access the DOM node of this component
     public elementRef = inject(ElementRef);
 
-    @Input() get feedback(): Feedback {
+    private alertService = inject(AlertService);
+
+    @Input()
+    get feedback(): Feedback {
         return this._feedback;
     }
     set feedback(feedback: Feedback | undefined) {
@@ -81,6 +86,7 @@ export class CodeEditorTutorAssessmentInlineFeedbackComponent {
     faPencilAlt = faPencilAlt;
     faTrashAlt = faTrashAlt;
     faExclamationTriangle = faExclamationTriangle;
+    faTimes = faTimes;
 
     /**
      * Updates the current feedback and sets props and emits the feedback to parent component
@@ -111,9 +117,18 @@ export class CodeEditorTutorAssessmentInlineFeedbackComponent {
     }
 
     /**
-     * Deletes feedback after confirmation and emits to parent component
+     * Deletes feedback with a notification and emits to parent component
      */
-    deleteFeedback() {
+    deleteFeedback(preliminary: boolean) {
+        if (preliminary) {
+            const storageKey = 'jhi-code-editor-tutor-assessment-inline-feedback.showReopenHint';
+
+            if (!localStorage.getItem(storageKey)) {
+                this.alertService.success('artemisApp.editor.showReopenFeedbackHint');
+                localStorage.setItem(storageKey, 'true');
+            }
+        }
+
         this.onDeleteFeedback.emit(this.feedback);
         this.dialogErrorSource.next('');
     }

src/main/webapp/app/exercises/programming/participate/code-editor-student-container.component.html

@@ -29,7 +29,9 @@
             [showEditorInstructions]="showEditorInstructions"
             [isTutorAssessment]="hasTutorAssessment"
             [readOnlyManualFeedback]="true"
+            [latestResult]="latestResult"
             [course]="course"
+            [disableReopenFeedbackButton]="false"
         >
             <div editorTitle>
                 <span>{{ exercise?.title }}</span>
@@ -63,17 +65,18 @@
                 <jhi-code-editor-repository-is-locked class="me-3" />
               }
               @if (participation) {
-                <jhi-updating-result
-                  [exercise]="exercise"
-                  [showUngradedResults]="true"
-                  [showBadge]="true"
-                  [participation]="participation"
-                  [personalParticipation]="true"
-                  (onParticipationChange)="receivedNewResult()"
-                  [showProgressBar]="true"
-                  [showProgressBarBorder]="true"
-                  class="me-2"
-                />
+                  <jhi-updating-result
+                      [exercise]="exercise"
+                      [showUngradedResults]="true"
+                      [showBadge]="true"
+                      [participation]="participation"
+                      [personalParticipation]="true"
+                      (onParticipationChange)="receivedParticipationChange()"
+                      (showResult)="receivedNewResult($event)"
+                      [showProgressBar]="true"
+                      [showProgressBarBorder]="true"
+                      class="me-2"
+                  />
               }
               <jhi-programming-exercise-student-trigger-build-button
                 class="me-2"

src/main/webapp/app/exercises/programming/participate/code-editor-student-container.component.ts

@@ -182,7 +182,11 @@ export class CodeEditorStudentContainerComponent implements OnInit, OnDestroy {
         return [];
     }
 
-    receivedNewResult() {
+    receivedParticipationChange() {
         this.getNumberOfSubmissionsForSubmissionPolicy();
     }
+
+    receivedNewResult(result: Result) {
+        this.latestResult = result;
+    }
 }

src/main/webapp/app/exercises/programming/shared/code-editor/container/code-editor-container.component.html

@@ -36,18 +36,20 @@ <h4 class="editor-title"><ng-content select="[editorTitle]" /></h4>
         [highlightFileChanges]="highlightFileChanges"
         [fileBadges]="fileBadges"
         [allowHiddenFiles]="allowHiddenFiles"
+        [disableReopenFeedbackButton]="disableReopenFeedbackButton"
         [(selectedFile)]="selectedFile"
         [(commitState)]="commitState"
         (onFileChange)="onFileChange($event)"
         (onError)="onError($event)"
         (onToggleCollapse)="onToggleCollapse($event, CollapsableCodeEditorElement.FileBrowser)"
+        (onReopenFeedback)="onReopenFeedback($event)"
     />
     <ng-container editorCenter>
         <jhi-code-editor-monaco
             [commitState]="commitState"
             [editorState]="editorState"
             [course]="course"
-            [feedbacks]="showInlineFeedback ? (participation?.results?.[0]?.feedbacks ?? []) : []"
+            [feedbacks]="showInlineFeedback ? (this.latestResult?.feedbacks ?? participation?.results?.[0]?.feedbacks ?? []) : []"
             [feedbackSuggestions]="feedbackSuggestions"
             [readOnlyManualFeedback]="readOnlyManualFeedback"
             [disableActions]="!editable"

src/main/webapp/app/exercises/programming/shared/code-editor/container/code-editor-container.component.ts

@@ -20,12 +20,13 @@ import { CodeEditorActionsComponent } from 'app/exercises/programming/shared/cod
 import { CodeEditorBuildOutputComponent } from 'app/exercises/programming/shared/code-editor/build-output/code-editor-build-output.component';
 import { Participation } from 'app/entities/participation/participation.model';
 import { CodeEditorInstructionsComponent } from 'app/exercises/programming/shared/code-editor/instructions/code-editor-instructions.component';
-import { Feedback } from 'app/entities/feedback.model';
+import { Feedback, PRELIMINARY_FEEDBACK_IDENTIFIER } from 'app/entities/feedback.model';
 import { Course } from 'app/entities/course.model';
 import { ConnectionError } from 'app/exercises/programming/shared/code-editor/service/code-editor-repository.service';
 import { Annotation, CodeEditorMonacoComponent } from 'app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component';
 import { KeysPipe } from 'app/shared/pipes/keys.pipe';
-import { ComponentCanDeactivate } from 'app/shared/guard/can-deactivate.model';
+import { Result } from 'app/entities/result.model';
+import { AssessmentType } from 'app/entities/assessment-type.model';
 
 export enum CollapsableCodeEditorElement {
     FileBrowser,
@@ -47,7 +48,7 @@ export enum CollapsableCodeEditorElement {
         KeysPipe,
     ],
 })
-export class CodeEditorContainerComponent implements OnChanges, ComponentCanDeactivate {
+export class CodeEditorContainerComponent implements OnChanges {
     private translateService = inject(TranslateService);
     private alertService = inject(AlertService);
     private fileService = inject(CodeEditorFileService);
@@ -87,6 +88,8 @@ export class CodeEditorContainerComponent implements OnChanges, ComponentCanDeac
     highlightDifferences: boolean;
     @Input()
     disableAutoSave = false;
+    @Input()
+    disableReopenFeedbackButton = true;
 
     @Output()
     onCommitStateChange = new EventEmitter<CommitState>();
@@ -102,6 +105,8 @@ export class CodeEditorContainerComponent implements OnChanges, ComponentCanDeac
     onDiscardSuggestion = new EventEmitter<Feedback>();
     @Input()
     course?: Course;
+    @Input()
+    latestResult?: Result;
 
     /** Work in Progress: temporary properties needed to get first prototype working */
 
@@ -127,9 +132,12 @@ export class CodeEditorContainerComponent implements OnChanges, ComponentCanDeac
     }
 
     ngOnChanges(changes: SimpleChanges) {
-        // Update file badges when feedback suggestions change
+        // Update file badges when feedback or feedback suggestions change
         if (changes.feedbackSuggestions) {
-            this.updateFileBadges();
+            this.updateFileBadgesForFeedbackSuggestions();
+        }
+        if (changes.latestResult) {
+            this.updateFileBadgesForPreliminaryFeedback();
         }
     }
 
@@ -160,9 +168,9 @@ export class CodeEditorContainerComponent implements OnChanges, ComponentCanDeac
     }
 
     /**
-     * Update the file badges for the code editor (currently only feedback suggestions)
+     * Update the file badges for the code editor for feedback suggestions
      */
-    updateFileBadges() {
+    updateFileBadgesForFeedbackSuggestions() {
         this.fileBadges = {};
         // Create badges for feedback suggestions
         // Get file paths from feedback suggestions:
@@ -176,6 +184,27 @@ export class CodeEditorContainerComponent implements OnChanges, ComponentCanDeac
         }
     }
 
+    /**
+     * Update the file badges for the code editor for preliminary feedback
+     */
+    updateFileBadgesForPreliminaryFeedback() {
+        this.fileBadges = {};
+        if (this.latestResult?.assessmentType !== AssessmentType.AUTOMATIC_ATHENA) {
+            return;
+        }
+        // Create badges for preliminary feedback
+        const feedbacks = this.latestResult?.feedbacks ?? [];
+        // Count only preliminary feedback
+        const filteredFeedbacks = feedbacks.filter((feedback) => feedback.text?.startsWith(PRELIMINARY_FEEDBACK_IDENTIFIER));
+        // Get file paths from feedback:
+        const filePaths = filteredFeedbacks.map((feedback) => Feedback.getReferenceFilePath(feedback)).filter((filePath) => filePath !== undefined) as string[];
+        for (const filePath of filePaths) {
+            // Count the number of feedback for this file
+            const feedbackCount = filteredFeedbacks.filter((feedback) => Feedback.getReferenceFilePath(feedback) === filePath).length;
+            this.fileBadges[filePath] = [new FileBadge(FileBadgeType.PRELIMINARY_FEEDBACK, feedbackCount)];
+        }
+    }
+
     /**
      * Resets all variables of this class.
      * When a new variable is added, it needs to be added to this method!
@@ -322,4 +351,12 @@ export class CodeEditorContainerComponent implements OnChanges, ComponentCanDeac
         }
         return true;
     }
+
+    /**
+     * Forces the code editor to refresh the feedback it shows.
+     * @param fileName The name of the file
+     */
+    onReopenFeedback(fileName: string) {
+        this.monacoEditor.refreshFeedback(fileName);
+    }
 }