Merge pull request #88 from Jai0212/Jai.TLI-101.e-Multiple-Model-Upload

Jai/TLI 101.e -- Added ability to upload multiple model and fixed graphs

frontend/src/pages/DashboardPage/ChartComponenet/ChartComponent.css

@@ -4,7 +4,10 @@
     width: 100%; /* Makes the chart take up full width of the container */
     max-width: 800px; /* Limit the maximum width of the chart */
     margin: 0 auto; /* Centers the chart horizontally */
-    padding: 20px;
+    padding-bottom: 14px;
+    padding-left: 14px;
+    padding-right: 38px;
+    padding-top: 20px;
     box-sizing: border-box;
   }
 

frontend/src/pages/DashboardPage/ChartComponenet/ChartComponent.jsx

@@ -1,10 +1,4 @@
-import React, {
-  useEffect,
-  useRef,
-  useImperativeHandle,
-  forwardRef,
-  useState,
-} from "react";
+import React, { useEffect, useRef, useImperativeHandle, forwardRef, useState } from "react";
 import Chart from "chart.js/auto";
 import "./ChartComponent.css";
 
@@ -20,7 +14,7 @@ const ChartComponent = forwardRef(({ chartData, sliderValue }, ref) => {
 
     // Step 1: Identify unique feature1 values and assign colors dynamically
     const uniqueFeature1Groups = Array.from(
-        new Set(chartData.map((item) => item.feature1))
+      new Set(chartData.map((item) => item.feature1))
     );
     const colorPalette = [
       "rgba(54, 162, 235, 0.7)",
@@ -35,7 +29,7 @@ const ChartComponent = forwardRef(({ chartData, sliderValue }, ref) => {
 
     // Step 2: Sort and prepare data for the chart
     const sortedChartData = [...chartData].sort((a, b) =>
-        a.feature1.localeCompare(b.feature1)
+      a.feature1.localeCompare(b.feature1)
     );
 
     const labels = sortedChartData.map((item) => item.feature2); // Only feature2 labels
@@ -55,10 +49,10 @@ const ChartComponent = forwardRef(({ chartData, sliderValue }, ref) => {
         data: accuracyData.map((d) => ({ x: d.label, y: d.accuracy })),
         backgroundColor: accuracyData.map((d) => d.color), // Bars are filled with the color for each feature1 group
         borderColor: accuracyData.map(
-            (d) => (d.accuracy > sliderValue ? "rgba(255, 0, 0, 1)" : d.color) // Red border if above threshold, else use the same color as fill
+          (d) => (d.accuracy > sliderValue ? "rgba(255, 0, 0, 1)" : d.color) // Red border if above threshold, else use the same color as fill
         ),
         borderWidth: accuracyData.map(
-            (d) => (d.accuracy > sliderValue ? 3 : 1) // Increased border width if above threshold, else default
+          (d) => (d.accuracy > sliderValue ? 3 : 1) // Increased border width if above threshold, else default
         ),
         borderCapStyle: "round",
         borderJoinStyle: "round",
@@ -102,11 +96,33 @@ const ChartComponent = forwardRef(({ chartData, sliderValue }, ref) => {
               offset: true,
               display: false,
             },
+            title: {
+              display: true,   // Display the x-axis title
+              text: 'Demographics', // Set the x-axis label
+              font: {
+                size: 16,   // Font size for the title
+                weight: 'bold', // Make the title bold
+              },
+              padding: {
+                top: 8, // Space above the title
+              },
+            },
           },
           y: {
             min: 0,
             max: 1,
             beginAtZero: true,
+            title: {
+              display: true,   // Display the y-axis title
+              text: 'Accuracy', // Set the y-axis label
+              font: {
+                size: 16,   // Font size for the title
+                weight: 'bold', // Make the title bold
+              },
+              padding: {
+                bottom: 8, // Space below the title
+              },
+            },
           },
         },
         responsive: true,
@@ -159,10 +175,10 @@ const ChartComponent = forwardRef(({ chartData, sliderValue }, ref) => {
             ctx.save();
             ctx.fillStyle = "rgba(200, 200, 200, 0.3)";
             ctx.fillRect(
-                left,
-                chartArea.top,
-                right - left,
-                chartArea.bottom - chartArea.top
+              left,
+              chartArea.top,
+              right - left,
+              chartArea.bottom - chartArea.top
             );
             ctx.restore();
           },
@@ -181,10 +197,10 @@ const ChartComponent = forwardRef(({ chartData, sliderValue }, ref) => {
   }));
 
   return (
-      <div className="chart-container">
-        <canvas ref={chartRef} />
-      </div>
+    <div className="chart-container">
+      <canvas ref={chartRef} />
+    </div>
   );
 });
 
-export default ChartComponent;
+export default ChartComponent;

frontend/src/pages/DashboardPage/ControlButtons/ControlButtons.css

@@ -77,7 +77,7 @@ input[type="file"] {
 
 /* Style for the Download Graph button */
 .file-import-container button:nth-child(3) {
-  background-color: #45a049;
+  background-color: #0088cc;
   color: #fafafa;
 }
 

frontend/src/pages/ModelTester/ChartComponenet2/ChartComponent2.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useImperativeHandle, forwardRef } from "react
 import Chart from "chart.js/auto";
 import './ChartComponent2.css';
 
-const ChartComponent2 = forwardRef(({ chartData }, ref) => {
+const ChartComponent2 = forwardRef(({ chartData, generationalResults }, ref) => {
     const chartRef = useRef(null);
     const myChartRef = useRef(null);
 
@@ -27,11 +27,49 @@ const ChartComponent2 = forwardRef(({ chartData }, ref) => {
                         ticks: {
                             autoSkip: false, // Ensure all x-axis labels are shown
                         },
+                        title: {
+                            display: true,   // Show the title
+                            text: 'Model Name', // Set the x-axis title
+                            font: {
+                                size: 15,   // Increase the font size
+                                weight: 'bold',
+                            },
+                        }
                     },
                     y: {
                         min: 0,
                         max: 1,
                         beginAtZero: true, // Ensure y-axis starts at zero
+                        title: {
+                            display: true,   // Show the title
+                            text: 'Bias',     // Set the y-axis title
+                            font: {
+                                size: 15,   // Increase the font size
+                                weight: 'bold', // Make the text bold
+                            },
+                        },
+                    },
+                },
+                plugins: {
+                    tooltip: {
+                        callbacks: {
+                            label: (tooltipItem) => {
+                                const index = tooltipItem.dataIndex; // Get the index of the hovered bar
+
+                                // Access the generational result for the hovered bar
+                                const generationalResult = generationalResults[index];
+
+                                // Build the custom tooltip content using generationalResults data
+                                return [
+                                    `Bias: ${tooltipItem.raw}`, // Bias value of the hovered bar
+                                    `Race: ${generationalResult.race}`,
+                                    `Gender: ${generationalResult.gender}`,
+                                    `Age: ${generationalResult.age_groups}`,
+                                    `State: ${generationalResult.state}`,
+                                    `Variance: ${generationalResult.variance}`,
+                                ];
+                            },
+                        },
                     },
                 },
             },
@@ -42,7 +80,7 @@ const ChartComponent2 = forwardRef(({ chartData }, ref) => {
                 myChartRef.current.destroy(); // Cleanup on component unmount
             }
         };
-    }, [chartData]);
+    }, [chartData, generationalResults]);
 
     useImperativeHandle(ref, () => ({
         downloadChart() {
@@ -60,4 +98,4 @@ const ChartComponent2 = forwardRef(({ chartData }, ref) => {
     );
 });
 
-export default ChartComponent2;
+export default ChartComponent2;

frontend/src/pages/ModelTester/ControlButtons2/ControlButtons2.jsx

@@ -70,8 +70,8 @@ const ControlButton2 = ({ setUploadedFiles }) => {
 
         if (!files.length) return; // If no files are selected, exit
 
-        if (uploadedFiles.length === 5) {
-            alert("You can only upload 5 models at a time.");
+        if (uploadedFiles.length === 5 || uploadedFiles.length + files.length > 5) {
+            alert("You can only upload 5 models.");
             return;
         }
 
@@ -80,33 +80,41 @@ const ControlButton2 = ({ setUploadedFiles }) => {
 
         for (let i = 0; i < files.length; i++) {
             const file = files[i];
-            if (!file.name.endsWith(".pkl")) {
-                alert("Please upload a model in .pkl format.");
-                return;
-            }
 
             if (!currUser || !file) {
                 alert("Error: Missing required data.");
                 return;
             }
 
-            if (uploadedFiles.includes(file.name)) {
+            if (!file.name.endsWith(".pkl")) {
+                alert("Please upload a model in .pkl format.");
+                return;
+            }
+
+            if (newUploadedFiles.includes(file.name)) {
                 alert(`File with name ${file.name} already uploaded.`);
-                continue;
+                return;
             }
 
             if (file.name === "model.pkl") {
                 alert("You cannot upload a file named model.pkl.");
-                continue;
+                return;
             }
 
-            const formData = new FormData();
-            formData.append("curr_user", currUser);
-            formData.append("model_file", file);
-            formData.append("dashboard", file.name);
+            newUploadedFiles.push(file.name);
+        }
+
+        // Prepare for the file upload
+        const uploadedFilesToPush = [...uploadedFiles];
+
+        try {
+            // Make a POST request to upload models
+            const uploadPromises = Array.from(files).map(async (file) => {
+                const formData = new FormData();
+                formData.append("curr_user", currUser);
+                formData.append("model_file", file);
+                formData.append("dashboard", file.name);
 
-            try {
-                // Make a POST request to upload model
                 const response = await fetch(`${VITE_BACKEND_URL}/api/upload-model`, {
                     method: "POST",
                     body: formData,
@@ -121,25 +129,27 @@ const ControlButton2 = ({ setUploadedFiles }) => {
 
                 const responseData = await response.json();
                 console.log("Success:", responseData.message);
-                alert("Model uploaded successfully!");
 
-                // Add the file to the list of uploaded files
-                newUploadedFiles.push(file.name);
+                uploadedFilesToPush.push(file.name); // Add to local list of uploaded files
+            });
 
-                // Update the state with the new list of uploaded files
-                setUploadedFiles(newUploadedFiles);
-                setUploadedFilesState(newUploadedFiles); // Update local state
+            // Wait for all files to be uploaded
+            await Promise.all(uploadPromises);
 
-                // Save the new list to localStorage
-                localStorage.setItem("uploadedFiles", JSON.stringify(newUploadedFiles));
+            // Update the state with the new list of uploaded files
+            setUploadedFiles(uploadedFilesToPush);
+            setUploadedFilesState(uploadedFilesToPush); // Update local state
 
-                // Reset the file input after uploading
-                event.target.value = null;
+            // Save the new list to localStorage
+            localStorage.setItem("uploadedFiles", JSON.stringify(uploadedFilesToPush));
 
-            } catch (error) {
-                console.error("Error during model upload:", error);
-                alert("Error during model upload: " + error.message);
-            }
+            // Reset the file input after uploading
+            event.target.value = null;
+
+            alert("Model(s) uploaded successfully!");
+        } catch (error) {
+            console.error("Error during model upload:", error);
+            alert("Error during model upload: " + error.message);
         }
     };
 

frontend/src/pages/ModelTester/Dashboard2/Dashboard2.jsx

@@ -10,18 +10,18 @@ const Dashboard2 = () => {
   const [currUser, setCurrUser] = useState("");
 
   const backgroundColours = [
-    "#00CC00", // Darker bright green 1
-    "#66CC66", // Darker bright green 2
-    "#66FF66", // Bright green 3 (unchanged)
-    "#99CC99", // Darker bright green 4
-    "#99FF99", // Bright green 5 (unchanged)
+    "#FF5733", // Vibrant Red
+    "#33FF57", // Vibrant Green
+    "#3357FF", // Vibrant Blue
+    "#F3F33B", // Bright Yellow
+    "#F33BF3", // Bright Purple
   ];
 
   const [graphData, setGraphData] = useState({
     labels: ["Model 1", "Model 2", "Model 3", "Model 4", "Model 5"],
     datasets: [
       {
-        label: "Models",
+        label: "Bias",
         data: [0, 0, 0, 0, 0],
         backgroundColor: backgroundColours,
       },
@@ -30,8 +30,6 @@ const Dashboard2 = () => {
 
   const [uploadedFiles, setUploadedFiles] = useState([]);
 
-  const tempUploadedFiles = ['model1', 'model2', 'model3', 'model4', 'model5'];
-
   const [generationResults, setGenerationResults] = useState([]);
 
   const fetchEmailAndDemographics = async () => {
@@ -188,7 +186,7 @@ const Dashboard2 = () => {
 
       <div className="chart-section">
         {Object.keys(graphData).length > 0 && (
-          <ChartComponent2 chartData={graphData} />
+          <ChartComponent2 chartData={graphData} generationalResults={generationResults} />
         )}
       </div>
     </div>