Playground: Side-by-Side Expert Evaluation (#345)

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",
@@ -31,6 +34,7 @@
     "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",

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}
                 />
               )
           )}