Adjusted popoutpanel filter UI, fixed comparison rendering with extra brackets

src/components/PopoutPanel.css

@@ -11,6 +11,7 @@
   transform: translateX(0); /* Ensure visibility by default */
   transition: transform 0.3s ease-in-out;
   z-index: 1000; /* Ensures it is above other elements */
+  box-sizing: border-box; /* Ensures padding is included in width calculation */
 }
 
 .popout-panel.hidden {
@@ -100,69 +101,39 @@
   color: #666;
 }
 
-/* Filter controls syling*/
+/* Specific styles for Popout Panel */
-.filter-controls {
+.popout-panel .filter-container {
-  display: flex;
+  display: block;
-  align-items: center;
+  gap: 15px;
-  gap: 20px;
+  justify-content: center;
+  margin-bottom: 20px;
 }
 
-.filter-controls input[type="radio"] {
+.popout-panel .filter-group {
-  margin-right: 5px;  /* Make radio buttons closer to the label */
+  display: block;
-  vertical-align: middle;
+  gap: 5px;
+  padding-right: 20px; 
+  padding-left: 20px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  box-sizing: border-box;
 }
 
-.filter-controls label {
+.popout-panel .filter-group label {
   font-size: 1rem;
   font-weight: 600;
-  margin-right: 10px;
+  margin-bottom: 2px;
-  display: inline-block;
+  white-space: nowrap;
-  vertical-align: middle;
 }
 
-/* Adjust radio button alignment */
+.popout-panel .filter-group input[type="range"] {
-.filter-controls label {
-  font-size: 1rem;
-  font-weight: 600;
-  margin-right: 10px;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.filter-controls input[type="radio"] {
-  margin-right: 5px;  /* Make radio buttons closer to the label */
-  vertical-align: middle;
-}
-
-/* Space between Tuition and Distance sliders */
-.slider-container {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 20px;
-  gap: 30px; /* Add space between the sliders */
-}
-
-.slider-container input[type="range"] {
-  width: 45%; /* Allow equal width for both sliders */
-  margin: 0;
-}
-
-.range-labels {
-  display: flex;
-  justify-content: space-between;
-  font-size: 0.9rem;
-}
-
-/* Style for the range slider to show min/max values */
-.range-slider-wrapper {
-  display: flex;
-  justify-content: space-between;
   width: 100%;
+  box-sizing: border-box;
 }
 
-/* Space between Tuition and Distance sliders */
+.popout-panel .range-labels {
-.range-slider-wrapper input {
+  display: flex;
-  width: 48%;  /* Make both sliders occupy 48% space to leave space between them */
+  font-size: 0.9rem;
 }
 
 /* Schools section: Grid layout with clear separation */

src/components/PopoutPanel.js

@@ -17,8 +17,8 @@ function PopoutPanel({
   const [loadingCalculation, setLoadingCalculation] = useState(false);
   const [persistedROI, setPersistedROI] = useState({});
   const [sortBy, setSortBy] = useState('tuition'); // Default sorting
-  const [tuitionRange, setTuitionRange] = useState([0, 50000]);
+  const [maxTuition, setMaxTuition] = useState(50000); // Set default max tuition value
-  const [distanceRange, setDistanceRange] = useState([0, 200]);
+  const [maxDistance, setMaxDistance] = useState(200); // Set default max distance value
 
   const {
     jobDescription = null,
@@ -32,7 +32,7 @@ function PopoutPanel({
   useEffect(() => {
     setResults([]);
     setIsCalculated(false);
-  }, [sortBy, tuitionRange, distanceRange]);
+  }, [sortBy, maxTuition, maxDistance]);
 
   if (!isVisible) return null;
 
@@ -65,20 +65,13 @@ function PopoutPanel({
   
    /** 🔹 Apply Sorting & Filtering Directly at Render Time **/
    const filteredAndSortedSchools = [...schools]
-  .filter(school => {
+   .filter(school => {
-    // Convert tuition to a number
     const inStateCost = parseFloat(school['In_state cost']);
-    
-    // Remove " mi" from distance and convert it to a number
     const distance = parseFloat(school['distance'].replace(' mi', ''));
-
+    
-    console.log(`Filtering School: ${school['INSTNM']} | Tuition: ${inStateCost} | Distance: ${distance}`);
-
     return (
-      inStateCost >= tuitionRange[0] &&
+      inStateCost <= maxTuition &&
-      inStateCost <= tuitionRange[1] &&
+      distance <= maxDistance
-      distance >= distanceRange[0] &&
-      distance <= distanceRange[1]
     );
   })
   .sort((a, b) => {
@@ -153,63 +146,49 @@ function PopoutPanel({
       </div>
 
       {/* Sorting & Filtering UI */}
-      <div className="filter-controls">
+      {/* Sorting UI */}
-        <div>
+      <div className="filter-container">
-          <label>Sort by:</label>
+        <div className="filter-group">
-          <input
+          <label htmlFor="sort-by">Sort by:</label>
-            type="radio"
+          <select
-            name="sort"
+            id="sort-by"
-            value="tuition"
+            value={sortBy}
-            checked={sortBy === 'tuition'}
+            onChange={(e) => setSortBy(e.target.value)}
-            onChange={() => setSortBy('tuition')}
+          >
-          /> Tuition
+            <option value="tuition">Tuition</option>
-          <input
+            <option value="distance">Distance</option>
-            type="radio"
+          </select>
-            name="sort"
-            value="distance"
-            checked={sortBy === 'distance'}
-            onChange={() => setSortBy('distance')}
-          /> Distance
         </div>
 
-        <label>Tuition Range: ${tuitionRange[0]} - ${tuitionRange[1]}</label>
+        <div className="filter-group">
-        <input
+          <label htmlFor="tuition-range">Max Tuition:</label>
-          type="range"
+          <input
-          min="0"
+            type="range"
-          max="50000"
+            id="tuition-range"
-          step="500"
+            min="0"
-          value={tuitionRange[0]}
+            max="100000"
-          onChange={(e) => setTuitionRange([Number(e.target.value), tuitionRange[1]])}
+            step="1000"
-        />
+            value={maxTuition}
-        <input
+            onChange={(e) => setMaxTuition(Number(e.target.value))}
-          type="range"
+          />
-          min="0"
+          <span>{`$0 - $${maxTuition.toLocaleString()}`}</span>
-          max="50000"
+        </div>
-          step="500"
-          value={tuitionRange[1]}
-          onChange={(e) => setTuitionRange([tuitionRange[0], Number(e.target.value)])}
-        />
 
-        <label>Distance Range: {distanceRange[0]} - {distanceRange[1]} mi</label>
+        <div className="filter-group">
-        <input
+          <label htmlFor="distance-range">Max Distance (mi):</label>
-          type="range"
+          <input
-          min="0"
+            type="range"
-          max="200"
+            id="distance-range"
-          step="5"
+            min="0"
-          value={distanceRange[0]}
+            max="1000"
-          onChange={(e) => setDistanceRange([Number(e.target.value), distanceRange[1]])}
+            step="10"
-        />
+            value={maxDistance}
-        <input
+            onChange={(e) => setMaxDistance(Number(e.target.value))}
-          type="range"
+          />
-          min="0"
+          <span>{`${maxDistance} mi`}</span>
-          max="200"
+        </div>
-          step="5"
-          value={distanceRange[1]}
-          onChange={(e) => setDistanceRange([distanceRange[0], Number(e.target.value)])}
-        />
       </div>
 
-
       {/* Schools Offering Programs Section */}
       <h3>Schools Offering Programs</h3>
       <div className="schools-offering">