small fixes: prereq tree edges, now you have to click the tree to interact with it

Author: LSKpr

my-app/src/presenters/PrerequisitePresenter.jsx

@@ -97,7 +97,7 @@ export const PrerequisitePresenter = observer((props) => {
         );
 
         return (
-            <div style={{ width: "100%", height: "500px" }}>
+            <div className="w-full h-[500px] rounded-lg">
                 <ReactFlow
                     nodes={nodes}
                     edges={edges}
@@ -106,7 +106,7 @@ export const PrerequisitePresenter = observer((props) => {
                     onConnect={onConnect}
                     connectionLineType={ConnectionLineType.SmoothStep}
                     fitView
-                    style={{ backgroundColor: '#F7F9FB' }}
+                    style={{ backgroundColor: 'white', borderRadius: '10px'}}
                     nodesDraggable={false}
                     nodesConnectable={false}
                     elementsSelectable={true}

my-app/src/views/Components/CoursePagePopup.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 function CoursePagePopup({
 	favouriteCourses,
@@ -10,6 +10,7 @@ function CoursePagePopup({
 	reviewPresenter,
 }) {
 	const treeRef = useRef(null);
+	const [showOverlay, setShowOverlay] = useState(true);
 
 	useEffect(() => {
 		const handleKeyDown = (event) => {
@@ -40,7 +41,10 @@ function CoursePagePopup({
 		>
 			<div
 				className="bg-indigo-300/75 backdrop-blur-lg h-full w-3/4 flex flex-col overflow-auto"
-				onClick={(e) => e.stopPropagation()}
+				onClick={(e) => {
+					e.stopPropagation();
+					setShowOverlay(true);
+				}}
 			>
 				<div className="flex-1">
 					<div className="px-10 py-10 md:px-20 md:py-16 text-slate-900 space-y-12 font-sans">
@@ -97,15 +101,27 @@ function CoursePagePopup({
 						{/* Prerequisite Graph Tree Section */}
 						<div>
 							<h3 className="text-2xl font-semibold text-[#2e2e4f] mb-0.5">Prerequisite Graph Tree</h3>
-							<div className="mb-4 h-0.5 w-full bg-violet-500"></div>
-							<div
-								className="bg-indigo-300/50 outline-none focus:outline-none focus:ring-2 focus:ring-violet-600 rounded-lg transition-shadow"
-								ref={treeRef}
-								onClick={handleTreeClick}
-								tabIndex={0}
-							>
-								{prerequisiteTree}
-							</div>
+							<div className="mb-4 h-0.5 w-full bg-violet-500 rounded-lg"></div>
+								<div className="relative rounded-lg">
+									{showOverlay && (
+										<div 
+											className="absolute inset-0 z-10 bg-indigo-200/10  rounded-lg cursor-pointer flex items-center justify-center z-51"
+											onClick={(e) => {
+												e.stopPropagation();
+												setShowOverlay(false);
+											}}
+										>
+										</div>
+									)}
+									<div
+										className="bg-indigo-300/50 outline-none focus:outline-none focus:ring-2 focus:ring-violet-600 rounded-lg transition-shadow"
+										ref={treeRef}
+										onClick={handleTreeClick}
+										tabIndex={0}
+									>
+										{prerequisiteTree}
+									</div>
+								</div>
 						</div>
 						{/* Reviews Section (optional) */}
 						{reviewPresenter && (

my-app/src/views/PrerequisiteTreeView.jsx

@@ -2,9 +2,9 @@ import React from "react";
 import ReactFlow, { MiniMap, Controls, Background } from "reactflow";
 import "reactflow/dist/style.css";
 
-function PrerequisiteTreeView(props){
+function PrerequisiteTreeView(props) {
     return (
-        <div style={{ width: "100%", height: "500px" }}>
+        <div className="w-full h-[500px] rounded-lg">
             <ReactFlow nodes={props.initialNodes} edges={props.initialEdges} fitView>
                 <MiniMap />
                 <Controls />