Merge branch 'develop' into chore/update-log-viewer-dependencies

Author: maximiliansoelch

playground/public/continue_later.mp4

@@ -43,7 +43,7 @@ export default function ExerciseScreen(exerciseScreenProps: ExerciseScreenProps)
           continue later. Your progress has been saved.
         </p>
         <p className="text-lg mb-6">
-          When you are ready, continue with the next exercise: {exercise.title}.
+          When you are ready, continue with the next exercise:  <strong>{exercise.title}</strong>.
         </p>
         <div className="flex justify-center mt-4">
           <SecondaryButton

playground/public/evaluation_metrics.mp4

@@ -1,11 +1,5 @@
-import React, { useState } from 'react';
+import React, {useState} from 'react';
 import Popup from "@/components/expert_evaluation/expert_view/popup";
-import exerciseDetails from "@/assets/evaluation_tutorial/exercise_details.gif";
-import readSubmission from "@/assets/evaluation_tutorial/read_submission.gif";
-import evaluateMetrics from "@/assets/evaluation_tutorial/evaluate_metrics.gif";
-import metricsExplanation from "@/assets/evaluation_tutorial/metrics-explanation.gif";
-import viewNext from "@/assets/evaluation_tutorial/view-next.gif";
-import continueLater from "@/assets/evaluation_tutorial/continue_later.gif";
 import {
     InfoIconButton,
     NextButton,
@@ -17,24 +11,24 @@ import ExerciseDetail from "@/components/details/exercise_detail";
 
 const baseTutorialSteps = [
     {
-        image: exerciseDetails.src,
+        src: "/playground/exercise_details.mp4",
         description: (
             <>
                 1. Read the
-                <SecondaryButton text={'📄 Exercise Details'} isInline={true} className="mx-1" />
+                <SecondaryButton text={'📄 Exercise Details'} isInline={true} className="mx-1"/>
             </>
         ),
     },
     {
-        image: readSubmission.src,
+        src: "/playground/read_submission.mp4",
         description: "2. Read the Submission and the corresponding feedback"
     },
     {
-        image: evaluateMetrics.src,
+        src: "/playground/evaluation_metrics.mp4",
         description: "3. Evaluate the feedback based on the metrics"
     },
     {
-        image: metricsExplanation.src,
+        src: "/playground/metrics_explanation.mp4",
         description: (
             <>
                 4. If unsure what a metric means, press the
@@ -45,15 +39,15 @@ const baseTutorialSteps = [
         ),
     },
     {
-        image: viewNext.src,
+        src: "/playground/view_next.mp4",
         description: (
             <>
                 5. After evaluating all metrics for all feedbacks, click on the
                 <NextButton isInline={true} className="mx-1" /> button to view the next submission.
             </>),
     },
     {
-        image: continueLater.src,
+        src: "/playground/continue_later.mp4",
         description: (
             <>
                 6. When you are ready to take a break, click on the
@@ -79,7 +73,7 @@ export default function TutorialPopup(tutorialPopupProps: TutorialPopupProps) {
         ? [
             ...baseTutorialSteps,
             {
-                image: "",
+                src: "",
                 description: (
                     <>
                         <div className="text-left">
@@ -104,15 +98,19 @@ export default function TutorialPopup(tutorialPopupProps: TutorialPopupProps) {
         }
     };
 
-    const { image, description } = tutorialSteps[currentStep];
+    const {src, description} = tutorialSteps[currentStep];
 
     const isLastStep = currentStep === tutorialSteps.length - 1;
     return (
         <Popup isOpen={isOpen} onClose={onClose} title="Evaluation Tutorial"
-            disableCloseOnOutsideClick={disableCloseOnOutsideClick}>
+               disableCloseOnOutsideClick={disableCloseOnOutsideClick}>
             <div className="text-center">
-                {/* Display the current GIF */}
-                {image && <img src={image} alt={`Tutorial Step ${currentStep + 1}`} className="w-full h-auto mb-4" />}
+                {/* Display the current video */}
+                {src &&
+                    <video key={src} controls autoPlay className="mb-4">
+                        <source src={src} type="video/mp4"/>
+                        Your browser does not support the video tag.
+                    </video>}
 
                 {/* Render the description directly, which may include text and button */}
                 <div className={"text-lg mb-4"}>

playground/public/exercise_details.mp4

@@ -66,7 +66,7 @@ export default function EvaluationManagement() {
     return newConfig;
   };
 
-  const saveExpertEvaluationConfig = (configToSave = selectedConfig) => {
+  const saveExpertEvaluationConfig = (configToSave = selectedConfig, isAnonymize = false) => {
     const isNewConfig = configToSave.id === "new";
     const newConfig = isNewConfig ? { ...configToSave, id: uuidv4() } : configToSave;
     setExpertEvaluationConfigs((prevConfigs) => {
@@ -81,7 +81,7 @@ export default function EvaluationManagement() {
     });
 
     setSelectedConfig(newConfig);
-    externalSaveExpertEvaluationConfig(dataMode, newConfig, isNewConfig);
+    externalSaveExpertEvaluationConfig(dataMode, newConfig, isAnonymize);
     setHasUnsavedChanges(false);
   };
 
@@ -122,7 +122,7 @@ export default function EvaluationManagement() {
   const startEvaluation = () => {
     if (confirm("Are you sure you want to start the evaluation? Once started, you can add new expert links but no other changes can be made to the configuration!")) {
       const updatedConfig = updateSelectedConfig({ started: true });
-      saveExpertEvaluationConfig(updatedConfig);
+      saveExpertEvaluationConfig(updatedConfig, true);
     }
   };
 

playground/public/metrics_explanation.mp4

@@ -364,8 +364,18 @@ export function anonymizeFeedbackCategoriesAndShuffle(
 export function saveConfigToFileSync(
   dataMode: DataMode,
   expertEvaluation: ExpertEvaluationConfig,
-) {
-  const configData = JSON.stringify(expertEvaluation, null, 2);
+  isAddExpertLinksAfterStart = false
+){
+
+  if (isAddExpertLinksAfterStart) {
+    let config = getConfigFromFileSync(dataMode, expertEvaluation.id);
+    if (config && config.expertIds) {
+      config.expertIds = expertEvaluation.expertIds;
+      expertEvaluation = config;
+    }
+  }
+
+  let configData = JSON.stringify(expertEvaluation, null, 2);
 
   const configPath = path.join(
     process.cwd(),
@@ -410,7 +420,8 @@ export function saveConfigToFileSync(
   }
 
   // Create or update config file with exercises and data
-  return fs.writeFileSync(configPath, configData, 'utf8');
+  fs.writeFileSync(configPath, configData, 'utf8');
+  return configData;
 }
 
 export function getProgressStatsFromFileSync(

playground/public/read_submission.mp4

@@ -6,10 +6,10 @@ import { DataMode } from "@/model/data_mode";
 export async function saveExpertEvaluationConfig(
     dataMode: DataMode,
     config: ExpertEvaluationConfig,
-    isCreate: boolean) {
+    isAnonymize: boolean) {
 
-    const response = await fetch(`${baseUrl}/api/data/${dataMode}/expert_evaluation/${config.id}/config`, {
-        method: isCreate ? 'POST' : 'PUT',
+    const response = await fetch(`${baseUrl}/api/data/${dataMode}/expert_evaluation/${config.id}/config?isAnonymize=${isAnonymize}`, {
+        method: 'POST',
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(config),
     });

playground/public/view_next.mp4

@@ -11,19 +11,19 @@ import { ExpertEvaluationConfig } from "@/model/expert_evaluation_config";
 
 function handler(req: NextApiRequest, res: NextApiResponse) {
     if (req.method == 'POST') {
-        const { dataMode } = req.query as { dataMode: DataMode };
+        const { dataMode, isAnonymize } = req.query as { dataMode: DataMode, isAnonymize: string };
         const expertEvaluationConfig: ExpertEvaluationConfig = req.body;
 
-        anonymizeFeedbackCategoriesAndShuffle(expertEvaluationConfig);
-        saveConfigToFileSync(dataMode, expertEvaluationConfig);
-        return res.status(200).json({ message: 'Config created successfully' });
+        if (isAnonymize == "true") {
+            anonymizeFeedbackCategoriesAndShuffle(expertEvaluationConfig);
+            saveConfigToFileSync(dataMode, expertEvaluationConfig);
 
-    } else if (req.method == 'PUT') {
-        const { dataMode } = req.query as { dataMode: DataMode };
-        const expertEvaluationConfig: ExpertEvaluationConfig = req.body;
+          // Add expert links after the evaluation has already started
+        } else {
+            saveConfigToFileSync(dataMode, expertEvaluationConfig, expertEvaluationConfig.started);
+        }
 
-        saveConfigToFileSync(dataMode, expertEvaluationConfig);
-        return res.status(200).json({ message: 'Config saved successfully' });
+        return res.status(200).json({expertEvaluationConfig});
 
     } else if (req.method == 'GET') {
         const { dataMode, expertEvaluationId } = req.query as { dataMode: DataMode; expertEvaluationId: string };
@@ -33,7 +33,7 @@ function handler(req: NextApiRequest, res: NextApiResponse) {
         return res.status(200).json(config);
     } else {
         res.setHeader('Allow', ['POST']);
-        return res.status(405).json({ message: 'Only GET, POST and PUT requests allowed' });
+        return res.status(405).json({ message: 'Only GET and POST requests allowed' });
     }
 }