Merge branch 'develop' into feature/rag-lecture-text

.whitesource

@@ -0,0 +1,23 @@
+{
+  "scanSettings": {
+    "enableScan": true,
+    "baseBranches": ["develop"],
+    "scanDependabotPR": false
+  },
+  "checkRunSettings": {
+    "vulnerableCheckRunConclusionLevel": "failure",
+    "displayMode": "diff",
+    "useMendCheckNames": true
+  },
+  "issueSettings": {
+    "minSeverityLevel": "MEDIUM",
+    "issueType": "DEPENDENCY"
+  },
+  "remediateSettings": {
+    "workflowRules": {
+      "enabled": true,
+        "minVulnerabilityScore": 1.5,
+        "maxVulnerabilityScore": 10
+    }
+  }
+}

playground/package.json

@@ -14,6 +14,9 @@
   },
   "dependencies": {
     "@blueprintjs/core": "5.5.1",
+    "@fortawesome/fontawesome-svg-core": "6.6.0",
+    "@fortawesome/free-solid-svg-icons": "6.6.0",
+    "@fortawesome/react-fontawesome": "0.2.2",
     "@ls1intum/apollon": "3.3.5",
     "@monaco-editor/react": "4.6.0",
     "@radix-ui/react-collapsible": "1.0.3",
@@ -27,10 +30,11 @@
     "formidable": "^3.5.1",
     "jszip": "3.10.1",
     "monaco-editor": "0.44.0",
-    "next": "14.1.1",
+    "next": "14.2.10",
     "react": "18.2.0",
     "react-complex-tree": "2.2.2",
     "react-complex-tree-blueprintjs-renderers": "2.2.2",
+    "react-confetti": "6.1.0",
     "react-dom": "18.2.0",
     "react-full-screen": "1.1.1",
     "react-markdown": "9.0.0",
@@ -53,7 +57,7 @@
     "@types/react-modal": "3.16.2",
     "@types/unzipper": "^0.10.9",
     "@types/uuid": "9.0.6",
-    "axios": "1.6.0",
+    "axios": "1.7.4",
     "eslint": "8.52.0",
     "eslint-config-next": "13.5.6",
     "inquirer": "9.2.11",

playground/src/components/details/editor/file_editor.tsx

@@ -25,6 +25,7 @@ type FileEditorProps = {
   createNewFeedback?: () => Feedback;
   manualRatings?: ManualRating[];
   onManualRatingsChange?: (manualRatings: ManualRating[]) => void;
+  hideFeedbackDetails?: boolean;
 };
 
 export default function FileEditor({
@@ -38,6 +39,7 @@ export default function FileEditor({
   createNewFeedback,
   manualRatings,
   onManualRatingsChange,
+  hideFeedbackDetails
 }: FileEditorProps) {
   const monaco = useMonaco();
   const editorRef = useRef<editor.IStandaloneCodeEditor>();
@@ -358,6 +360,7 @@ export default function FileEditor({
                       }
                       model={model}
                       className="mr-4"
+                      hideDetails={hideFeedbackDetails}
                     />
                   </EditorWidget>
                 )

playground/src/components/details/editor/inline_feedback.tsx

@@ -19,6 +19,7 @@ type InlineFeedbackProps = {
   onManualRatingChange?: (manualRating: ManualRating) => void;
   model?: editor.ITextModel;
   className?: string;
+  hideDetails?: boolean;
 };
 
 export default function InlineFeedback({
@@ -28,6 +29,7 @@ export default function InlineFeedback({
   onManualRatingChange,
   model,
   className,
+  hideDetails,
 }: InlineFeedbackProps) {
   const [isEditing, setIsEditing] = useState(false);
   const [confirmDelete, setConfirmDelete] = useState(false);
@@ -145,29 +147,31 @@ export default function InlineFeedback({
       onMouseEnter={() => setIsHovering(true)}
       onMouseLeave={() => setIsHovering(false)}
     >
-      <div className="flex items-center justify-between px-4 py-2 border-b border-gray-300 text-xs text-gray-600">
-        <div className="break-all">
-          {referenceType === "unreferenced" && "Unreferenced"}
-          {"file_path" in feedback &&
-            referenceType === "unreferenced_file" &&
-            `References ${feedback.file_path}`}
-          {referenceType === "referenced" &&
-            `References ${formatReference(feedback)}`}
-        </div>
-        <div className="flex gap-1">
-          {feedback.structured_grading_instruction_id && (
-            <span className="text-xs text-orange-800 rounded-full px-2 py-0.5 bg-orange-100">
-              Grading&nbsp;Instruction&nbsp;
-              {feedback.structured_grading_instruction_id}
-            </span>
-          )}
-          {feedback.isSuggestion && (
-            <span className="text-xs text-violet-800 rounded-full px-2 py-0.5 bg-violet-100">
-              Suggestion
-            </span>
-          )}
+      {hideDetails ? null : (
+        <div className="flex items-center justify-between px-4 py-2 border-b border-gray-300 text-xs text-gray-600">
+          <div className="break-all">
+            {referenceType === "unreferenced" && "Unreferenced"}
+            {"file_path" in feedback &&
+              referenceType === "unreferenced_file" &&
+              `References ${feedback.file_path}`}
+            {referenceType === "referenced" &&
+              `References ${formatReference(feedback)}`}
+          </div>
+          <div className="flex gap-1">
+            {feedback.structured_grading_instruction_id && (
+              <span className="text-xs text-orange-800 rounded-full px-2 py-0.5 bg-orange-100">
+                Grading&nbsp;Instruction&nbsp;
+                {feedback.structured_grading_instruction_id}
+              </span>
+            )}
+            {feedback.isSuggestion && (
+              <span className="text-xs text-violet-800 rounded-full px-2 py-0.5 bg-violet-100">
+                Suggestion
+              </span>
+            )}
+          </div>
         </div>
-      </div>
+      )}
       <div className="flex justify-start items-start space-x-2 px-4 py-2">
         {isEditing && onFeedbackChange ? (
           <input

playground/src/components/details/exercise_detail/index.tsx

@@ -20,7 +20,7 @@ export default function ExerciseDetail({
   const specificExerciseDetail = (() => {
     switch (exercise.type) {
       case "text":
-        return <TextExerciseDetail exercise={exercise} openedInitially={openedInitially}/>;
+        return <TextExerciseDetail exercise={exercise} openedInitially={openedInitially} />;
       case "programming":
         return <ProgrammingExerciseDetail exercise={exercise} openedInitially={openedInitially} />;
       default:
@@ -29,7 +29,7 @@ export default function ExerciseDetail({
   })();
 
   return hideDisclosure ? (
-    <div className="mt-2 space-y-1">
+    <div className="mt-2 space-y-1 w-full lg:w-[60vw] max-h-[50vh] overflow-y-auto overflow-x-hidden flex flex-col">
       <CommonExerciseDetail exercise={exercise} openedInitially={openedInitially} />
       {specificExerciseDetail}
     </div>
@@ -40,7 +40,7 @@ export default function ExerciseDetail({
       openedInitially={openedInitially}
     >
       <>
-        <CommonExerciseDetail exercise={exercise}/>
+        <CommonExerciseDetail exercise={exercise} />
         {specificExerciseDetail}
       </>
     </Disclosure>

playground/src/components/details/submission_detail/text.tsx

@@ -14,6 +14,7 @@ type TextSubmissionDetailProps = {
   onFeedbacksChange?: (feedback: Feedback[]) => void;
   manualRatings?: ManualRating[];
   onManualRatingsChange?: (manualRatings: ManualRating[]) => void;
+  hideFeedbackDetails?: boolean;
 };
 
 export default function TextSubmissionDetail({
@@ -23,6 +24,7 @@ export default function TextSubmissionDetail({
   onFeedbacksChange,
   manualRatings,
   onManualRatingsChange,
+  hideFeedbackDetails,
 }: TextSubmissionDetailProps) {
   const unreferencedFeedbacks = feedbacks?.filter(
     (feedback) => getFeedbackReferenceType(feedback) === "unreferenced"
@@ -41,6 +43,7 @@ export default function TextSubmissionDetail({
           manualRatings={manualRatings}
           onManualRatingsChange={onManualRatingsChange}
           createNewFeedback={() => createNewFeedback(submission)}
+          hideFeedbackDetails={hideFeedbackDetails}
         />
       </div>
       {((unreferencedFeedbacks && unreferencedFeedbacks.length > 0) ||
@@ -64,6 +67,7 @@ export default function TextSubmissionDetail({
                     onManualRatingsChange &&
                     createManualRatingItemUpdater(feedback.id, manualRatings, onManualRatingsChange)
                   }
+                  hideDetails={hideFeedbackDetails}
                 />
               )
           )}

playground/src/components/expert_evaluation/expert_evaluation_buttons.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircleInfo } from '@fortawesome/free-solid-svg-icons';
+
+const buttonBase = "px-4 py-2 rounded focus:outline-none transition-all";
+const buttonPrimary = `${buttonBase} bg-blue-500 text-white hover:bg-blue-600`;
+const buttonSecondary = `${buttonBase} bg-gray-300 text-gray-700 hover:bg-gray-400`;
+const buttonFinish = `${buttonBase} bg-green-600 text-white hover:bg-green-700`;
+
+
+interface NextButtonProps {
+    onClick?: () => void;
+    isFinish?: boolean;
+    isInline?: boolean;
+    className?: string;
+}
+
+export function NextButton(nextButtonProps: NextButtonProps) {
+    const { onClick, isFinish, isInline, className } = nextButtonProps;
+    return <button
+        onClick={onClick}
+        className={`${isFinish ? buttonFinish : buttonPrimary}  ${isInline ? 'inline-block' : 'w-full'} ${className}`}
+    >
+        {isFinish ? 'Finish 🏁' : 'Next ➡️'}
+    </button>
+}
+
+
+interface SecondaryButtonProps {
+    onClick?: () => void;
+    isInline?: boolean;
+    className?: string;
+    text: string;
+    isDisabled?: boolean;
+}
+
+export function SecondaryButton(secondaryButtonProps: SecondaryButtonProps) {
+    const { onClick, isInline, className, text, isDisabled } = secondaryButtonProps;
+    return <button
+        onClick={onClick}
+        className={`${buttonSecondary} ${isInline ? 'inline-block' : ''} ${className}`}
+        disabled={isDisabled}
+    >
+        {text}
+    </button>
+}
+
+
+interface PrimaryButtonProps {
+    onClick?: () => void;
+    isInline?: boolean;
+    isDisabled?: boolean,
+    className?: string;
+    text: string;
+}
+
+export function PrimaryButton(primaryButtonProps: PrimaryButtonProps) {
+    const { onClick, isInline, isDisabled, className, text } = primaryButtonProps;
+    return <button
+        onClick={onClick}
+        className={`${buttonPrimary} ${isInline ? 'inline-block' : ''} ${className}`}
+        disabled={isDisabled}
+    >
+        {text}
+    </button>
+}
+
+
+interface InfoIconButtonProps {
+    onClick?: () => void;
+    className?: string;
+}
+
+export function InfoIconButton(infoIconButtonProps: InfoIconButtonProps) {
+    const { onClick, className } = infoIconButtonProps;
+    return <span
+        onClick={onClick}
+        className={`text-gray-400 cursor-pointer hover:text-gray-600 ${className}`}
+        role="img"
+        aria-label="info"
+    >
+        <FontAwesomeIcon icon={faCircleInfo} />
+    </span>
+}

playground/src/components/expert_evaluation/expert_view/congratulation_screen.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+import Confetti from 'react-confetti';
+import background_image from "@/assets/evaluation_backgrounds/congratulations.jpeg";
+
+export default function CongratulationScreen() {
+  const [windowSize, setWindowSize] = useState({ width: window.innerWidth, height: window.innerHeight });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return (
+    <div
+      className="fixed inset-0 bg-congratulation-bg bg-cover bg-center bg-black bg-opacity-75 flex items-center justify-center z-50"
+      style={{
+        backgroundImage: `url(${background_image.src})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}>
+      {/* Confetti effect */}
+      <Confetti
+        width={windowSize.width}
+        height={windowSize.height}
+        numberOfPieces={300}
+        gravity={0.2}
+      />
+
+      <div className="bg-white p-8 rounded-lg shadow-lg max-w-lg w-full text-center relative z-10">
+        <h1 className="text-4xl font-bold mb-4">Congratulations!</h1>
+        <p className="text-lg mb-6">
+          You have successfully completed the expert evaluation. Thank you for your hard work!
+        </p>
+      </div>
+    </div>
+  );
+};

playground/src/components/expert_evaluation/expert_view/continue_later_screen.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import background_image from "@/assets/evaluation_backgrounds/save-progress.jpeg";
+import { PrimaryButton } from "@/components/expert_evaluation/expert_evaluation_buttons";
+
+
+interface ContinueLaterScreenProps {
+  onClose: () => void;
+}
+
+export default function ContinueLaterScreen(continueLaterScreenProps: ContinueLaterScreenProps) {
+  const { onClose } = continueLaterScreenProps;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
+      style={{
+        backgroundImage: `url(${background_image.src})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}
+    >
+      <div className="bg-white p-8 rounded-lg shadow-lg max-w-lg w-full text-center">
+        <h1 className="text-4xl font-bold mb-4">Continue Later</h1>
+        <p className="text-lg mb-6">
+          Your progress has been saved. You can continue the evaluation later using the same link.
+        </p>
+        <PrimaryButton
+          onClick={onClose}
+          text="Continue Evaluation"
+          className="px-6 py-3 ml-4"
+        />
+      </div>
+    </div>
+  );
+};

playground/src/components/expert_evaluation/expert_view/exercise_detail_popup.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Popup from "@/components/expert_evaluation/expert_view/popup";
+import ExerciseDetail from "@/components/details/exercise_detail";
+import { Exercise } from "@/model/exercise";
+
+interface ExerciseDetailPopupProps {
+  isOpen: boolean;
+  onClose: () => void;
+  exercise: Exercise;
+}
+
+export default function ExerciseDetailPopup(exerciseDetailPopupProps: ExerciseDetailPopupProps) {
+  const { isOpen, onClose, exercise } = exerciseDetailPopupProps;
+
+  return (
+    <Popup isOpen={isOpen} onClose={onClose} title={`Exercise Details: ${exercise.title}`}>
+      <ExerciseDetail exercise={exercise} hideDisclosure={true} openedInitially={true} />
+    </Popup>
+  );
+};