Playground: UI Improvements to inline feedback (#330)

ls1intum · Aug 19, 2024 · ccf0330 · ccf0330
1 parent 6efa235
commit ccf0330
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/playground/src/components/details/editor/inline_feedback.tsx b/playground/src/components/details/editor/inline_feedback.tsx
@@ -190,7 +190,7 @@ export default function InlineFeedback({
         ) : (
           <div
             className={twMerge(
-              "font-medium rounded px-2.5 py-0.5 mt-2",
+              "font-medium rounded px-2.5 py-0.5",
               feedback.credits < 0
                 ? "bg-red-100 text-red-800"
                 : feedback.credits > 0
@@ -210,12 +210,19 @@ export default function InlineFeedback({
                 placeholder="Title..."
                 onChange={(e) => setTitle(e.target.value)}
               />
-            ) : (
+            ) : feedback.title && (
               <span className="font-semibold">
-                {feedback.title ? feedback.title : <i>Missing title</i>}
+                {feedback.title}
               </span>
             )}
           </div>
+          {feedback.structured_grading_instruction?.feedback && (
+            <div className="w-full text-orange-800 rounded px-2 py-0.5 bg-orange-100">
+              <span className="whitespace-pre-wrap">
+                {feedback.structured_grading_instruction.feedback}
+              </span>
+            </div>
+          )}
           <div>
             {isEditing && onFeedbackChange ? (
               <TextareaAutosize
@@ -224,12 +231,10 @@ export default function InlineFeedback({
                 placeholder="Description..."
                 onChange={(e) => setDescription(e.target.value)}
               />
-            ) : feedback.description ? (
+            ) : feedback.description && (
               <span className="whitespace-pre-wrap">
                 {feedback.description}
               </span>
-            ) : (
-              <i>Missing description</i>
             )}
           </div>
         </div>

diff --git a/playground/src/hooks/playground/feedbacks.ts b/playground/src/hooks/playground/feedbacks.ts
@@ -15,7 +15,14 @@ export async function fetchFeedbacks(
   const response = await fetch(
     `${baseUrl}/api/data/${dataMode}/${exercise ? `exercise/${exercise.id}/` : ""}feedbacks`
   );
-  const feedbacks = await response.json() as Feedback[];
+
+  let feedbacks = await response.json() as Feedback[];
+  for (const feedback of feedbacks) {
+    if (feedback.structured_grading_instruction_id) {
+      feedback.structured_grading_instruction = exercise?.grading_criteria?.flatMap((criteria) => criteria.structured_grading_instructions).find((instruction) => instruction.id === feedback.structured_grading_instruction_id);
+    }
+  }
+
   if (submission) {
     return feedbacks.filter((feedback) => feedback.submission_id === submission.id);
   }

diff --git a/playground/src/model/feedback.ts b/playground/src/model/feedback.ts
@@ -1,5 +1,5 @@
 import type { IRange, editor } from "monaco-editor";
-import type { ExerciseType } from "./exercise";
+import type { ExerciseType, StructuredGradingInstruction } from "./exercise";
 import type { Submission } from "./submission";
 
 type FeedbackBase = {
@@ -11,6 +11,7 @@ type FeedbackBase = {
   exercise_id: number;
   submission_id: number;
   structured_grading_instruction_id?: number;
+  structured_grading_instruction?: StructuredGradingInstruction; // Playground only
   isSuggestion?: boolean; // Playground only
   isNew?: boolean; // Playground only
   isChanged?: boolean; // Playground only