+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 | + +1x +6x +2x +2x + + +6x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React from 'react';
+
+const Modal = ({ closeModal }) => {
+ const handleClose = (e) => {
+ e.preventDefault(); // Prevent any default behavior (like form submission)
+ closeModal();// Close the modal
+ };
+
+ return (
+ <div className="modal">
+ <div className="modal-content">
+ <span className="close" onClick={handleClose}>×</span>
+ <h2>Fairlearn & Performance Metrics</h2>
+ <p>In the context of model evaluation, <strong>accuracy</strong> and the rates of <strong>false
+ positives</strong> and <strong>false negatives</strong> are essential metrics for understanding the
+ performance of a model:</p>
+
+ <ul>
+ <li><strong>Accuracy</strong>: This is the proportion of correct predictions (both true positives
+ and true negatives) to the total predictions. It is defined as:
+ </li>
+ <pre><code>Accuracy = (True Positives + True Negatives) / Total Predictions</code></pre>
+
+ <li><strong>False Positive Rate (FPR)</strong>: This is the proportion of negative instances that
+ are incorrectly classified as positive. A high FPR means the model is incorrectly identifying
+ too many negative instances as positive.
+ </li>
+ <pre><code>False Positive Rate = False Positives / (False Positives + True Negatives)</code></pre>
+
+ <li><strong>False Negative Rate (FNR)</strong>: This is the proportion of positive instances that
+ are incorrectly classified as negative. A high FNR indicates that the model is missing a
+ significant number of actual positive instances.
+ </li>
+ <pre><code>False Negative Rate = False Negatives / (False Negatives + True Positives)</code></pre>
+ </ul>
+
+ <p>These metrics are critical for evaluating a model's fairness, as biases in these rates can
+ disproportionately affect certain demographic groups. By using Fairlearn, you can ensure your model
+ is both accurate and fair across various groups.</p>
+ </div>
+ </div>
+ );
+};
+
+export default Modal;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| Modal.jsx | +
+
+ |
+ 100% | +5/5 | +100% | +0/0 | +100% | +2/2 | +100% | +5/5 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 | + + + +3x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { Link } from "react-router-dom";
+import "./Navbar.css";
+
+function Navbar() {
+ return (
+ <>
+ <nav className="navbar navbar-expand-lg navbar-light bg-light">
+ <div className="container-fluid">
+ <div className="logo-container">
+ <img
+ className="cash-logo"
+ src="/cash-app-logo.png"
+ alt="CashApp's logo in green"
+ />
+ </div>
+ <div
+ className="menu-container collapse navbar-collapse"
+ id="navbarSupportedContent"
+ >
+ <ul className="navbar-nav me-auto mb-2 mb-lg-0">
+ <li className="nav-item">
+ <Link className="nav-link" to="/">
+ Login
+ </Link>
+ </li>
+ <li className="nav-item">
+ <Link className="nav-link" to="/signup">
+ Sign Up
+ </Link>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </nav>
+ </>
+ );
+}
+
+export default Navbar;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| Navbar.jsx | +
+
+ |
+ 100% | +1/1 | +100% | +0/0 | +100% | +1/1 | +100% | +1/1 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 | + + + + + + +5x + +5x + +5x +2x +2x + +2x +1x + +1x + + + + + + +5x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+import axios from "axios";
+import "./UserNavbar.css";
+import { envConfig } from "../../envConfig";
+
+function UserNavbar() {
+ const VITE_BACKEND_URL = envConfig();
+
+ const navigate = useNavigate();
+
+ const handleLogout = async () => {
+ try {
+ const response = await axios.post(`${VITE_BACKEND_URL}/logout`);
+
+ if (response.data.error === false) {
+ navigate("/");
+ } else {
+ console.error("Logout failed:", response.data.message);
+ }
+ } catch (error) {
+ console.error("Error during logout:", error);
+ }
+ };
+
+ return (
+ <>
+ <nav className="navbar navbar-expand-lg navbar-light bg-light">
+ <div className="container-fluid">
+ <div>
+ <img
+ className="cash-logo"
+ src="/cash-app-logo.png"
+ alt="CashApp's logo in green"
+ />
+ </div>
+ <div
+ className="menu-container collapse navbar-collapse"
+ id="navbarSupportedContent"
+ >
+ <ul className="navbar-nav me-auto mb-2 mb-lg-0">
+ <li className="nav-item">
+ <Link className="nav-link" to="/about">
+ About Us
+ </Link>
+ </li>
+ <li className="nav-item">
+ <Link className="nav-link" to="/dashboard">
+ Dashboard
+ </Link>
+ </li>
+ <li className="nav-item">
+ <Link className="nav-link" to="/model-tester">
+ Model Tester
+ </Link>
+ </li>
+ <li className="nav-item">
+ <Link className="nav-link" to="/change-password">
+ Change Password
+ </Link>
+ </li>
+ </ul>
+ <div className="btn-container">
+ <button
+ className="logout-btn btn btn-outline-danger ms-2"
+ onClick={handleLogout}
+ >
+ Logout
+ </button>
+ </div>
+ </div>
+ </div>
+ </nav>
+ </>
+ );
+}
+
+export default UserNavbar;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| UserNavbar.jsx | +
+
+ |
+ 90% | +9/10 | +100% | +2/2 | +100% | +2/2 | +90% | +9/10 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 | + + + +1x +2x + + + + + + + + + | import React from "react";
+import Navbar from "../Components/Navbar/Navbar.jsx";
+import { Outlet } from "react-router-dom";
+
+const PublicLayout = () => {
+ return (
+ <>
+ <Navbar /> {/* Render the Navbar */}
+ <Outlet data-testid="outlet" /> {/* Add data-testid for testing */}
+ </>
+ );
+};
+
+export default PublicLayout;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 | + + + +1x +1x + + + + + + + + + | import React from "react";
+import UserNavbar from "../Components/UserNavbar/UserNavbar.jsx"; // Import the UserNavbar
+import { Outlet } from "react-router-dom"; // Import Outlet
+
+const UserLayout = () => {
+ return (
+ <>
+ <UserNavbar /> {/* Render the User Navbar */}
+ <Outlet /> {/* Render child routes */}
+ </>
+ );
+};
+
+export default UserLayout;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| PublicLayout.jsx | +
+
+ |
+ 100% | +2/2 | +100% | +0/0 | +100% | +1/1 | +100% | +2/2 | +
| UserLayout.jsx | +
+
+ |
+ 100% | +2/2 | +100% | +0/0 | +100% | +1/1 | +100% | +2/2 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| Components/Modal | +
+
+ |
+ 100% | +5/5 | +100% | +0/0 | +100% | +2/2 | +100% | +5/5 | +
| Components/Navbar | +
+
+ |
+ 100% | +1/1 | +100% | +0/0 | +100% | +1/1 | +100% | +1/1 | +
| Components/UserNavbar | +
+
+ |
+ 90% | +9/10 | +100% | +2/2 | +100% | +2/2 | +90% | +9/10 | +
| Layout | +
+
+ |
+ 100% | +4/4 | +100% | +0/0 | +100% | +2/2 | +100% | +4/4 | +
| pages/AboutPage | +
+
+ |
+ 100% | +2/2 | +100% | +0/0 | +100% | +1/1 | +100% | +2/2 | +
| pages/ChangePassword | +
+
+ |
+ 72.22% | +13/18 | +50% | +1/2 | +50% | +4/8 | +72.22% | +13/18 | +
| pages/DashboardPage/ChartComponenet | +
+
+ |
+ 48.42% | +46/95 | +26.66% | +8/30 | +69.56% | +16/23 | +48.86% | +43/88 | +
| pages/DashboardPage/data | +
+
+ |
+ 100% | +1/1 | +100% | +0/0 | +100% | +0/0 | +100% | +1/1 | +
| pages/SharePage | +
+
+ |
+ 33.33% | +16/48 | +11.11% | +4/36 | +20% | +2/10 | +34.04% | +16/47 | +
| pages/UserLogin | +
+
+ |
+ 68.75% | +22/32 | +50% | +4/8 | +70% | +7/10 | +68.75% | +22/32 | +
| pages/UserSignup | +
+
+ |
+ 75% | +27/36 | +60% | +6/10 | +76.92% | +10/13 | +75% | +27/36 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 | + + + +1x +6x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React from "react";
+import { Container, Row, Col, Card, ListGroup } from "react-bootstrap";
+import "./AboutPage.css"
+
+const AboutPage = () => {
+ return (
+ <Container>
+ <h1 className="text-center my-4">About BIAS BUSTERS</h1>
+
+ <Row>
+ <Col>
+ <h2 class="paragraph-like">
+ We are proud to announce the launch of a new tool that helps engineers identify and address bias in CashApp's machine-learning models. In an effort to promote fairness and equity, we focused on providing clear, actionable insights into gender, race, and other demographic disparities, ensuring that automated decisions are fair across the board.
+ </h2>
+
+ <h3>Key Features:</h3>
+
+ <Card className="my-3">
+ <Card.Body>
+ <Card.Title>1. Bias and Accuracy Measurement</Card.Title>
+ <Card.Text>
+ Using the user’s tree-based ML model along with an open-sourced fairness assessment framework, Fairlearn, we implemented a system to measure bias in the user’s model when trained on their inputted datasets. The datasets are automatically processed and sorted by relevant demographics by our tool.
+ </Card.Text>
+ </Card.Body>
+ </Card>
+
+ <Card className="my-3">
+ <Card.Body>
+ <Card.Title>2. Visualization</Card.Title>
+ <Card.Text>
+ Graphs will be generated based on the user’s choice of demographics on the platform and plotted against each other, demonstrating the possible inaccuracies in bias measurement. An interactive slider was implemented, coloring certain plots red and green, to give the user an understanding of which combinations of demographics are subject to biased decisions executed by their model.
+ </Card.Text>
+ </Card.Body>
+ </Card>
+
+ <Card className="my-3">
+ <Card.Body>
+ <Card.Title>3. Static Data Testing</Card.Title>
+ <Card.Text>
+ We have generated a static dataset of 10,000 lines for the user to test their ML model on after training. This feature allows the user to upload several models to be tested on our dataset against Fairlearn to demonstrate specific biases within their models.
+ </Card.Text>
+ </Card.Body>
+ </Card>
+
+ <h4 class="paragraph-like">
+ Our feedback so far has been great, and our product has demonstrated to the engineers at CashApp that there are vast and quick ways, like our product, to tackle the problem of machine-learning bias in today’s world.
+ </h4>
+ </Col>
+ </Row>
+
+ <footer className="text-center my-4">
+ <p>
+ <strong>CashApp BIAS BUSTERS</strong>
+ <br />
+ Press Release - 7 November, 2024
+ </p>
+ </footer>
+ </Container>
+ );
+};
+
+export default AboutPage;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| AboutPage.jsx | +
+
+ |
+ 100% | +2/2 | +100% | +0/0 | +100% | +1/1 | +100% | +2/2 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 | + + + + +1x +3x + + + + + +3x + +3x +1x + +1x + +1x + + + + + + +1x + +1x +1x + + + + + +1x +1x + + + + + + + + + + + +3x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useForm } from "react-hook-form";
+import { ErrorMessage } from "@hookform/error-message";
+import swal from "sweetalert2";
+import { envConfig } from "../../envConfig";
+
+const ChangePassword = () => {
+ const VITE_BACKEND_URL = envConfig();
+
+ const {
+ register,
+ handleSubmit,
+ formState: { errors },
+ } = useForm();
+
+ const handleForm = (data) => {
+ console.log(data);
+
+ const url = `${VITE_BACKEND_URL}/change_password`;
+
+ fetch(url, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(data), // Send only the old password, new password, and confirm password
+ })
+ .then((res) => res.json())
+ .then((res) => {
+ console.log(res.data);
+ Iif (res.error === true) {
+ swal.fire({
+ icon: "error",
+ title: res.message,
+ });
+ } else {
+ document.getElementById("form").reset();
+ swal.fire({
+ icon: "success",
+ title: res.message,
+ timer: 1500,
+ });
+ }
+ })
+ .catch((e) => {
+ console.log(e);
+ });
+ };
+
+ return (
+ <>
+ <div className="container">
+ <h1> Change Password </h1>
+ </div>
+
+ <hr />
+ <div className="alert alert-primary">
+ <form onSubmit={handleSubmit(handleForm)} id="form">
+ <div className="mb-3">
+ <label htmlFor="old_password">Enter Old Password</label>
+ <input
+ id="old_password"
+ {...register("old_password", {
+ required: "This field is required",
+ })}
+ type="password"
+ className="form-control"
+ />
+ <ErrorMessage
+ errors={errors}
+ name="old_password"
+ render={({message}) => (
+ <p className="text-danger">{message}</p>
+ )}
+ />
+ </div>
+
+ <div className="mb-3">
+ <label htmlFor="new_password">Enter New Password</label>
+ <input
+ id="new_password"
+ {...register("new_password", {
+ required: "This field is required",
+ })}
+ type="password"
+ className="form-control"
+ />
+ <ErrorMessage
+ errors={errors}
+ name="new_password"
+ render={({message}) => (
+ <p className="text-danger">{message}</p>
+ )}
+ />
+ </div>
+
+ <div className="mb-3">
+ <label htmlFor="confirm_password">Confirm Password</label>
+ <input
+ id="confirm_password"
+ {...register("confirm_password", {
+ required: "This field is required",
+ })}
+ type="password"
+ className="form-control"
+ />
+ <ErrorMessage
+ errors={errors}
+ name="confirm_password"
+ render={({message}) => (
+ <p className="text-danger">{message}</p>
+ )}
+ />
+ </div>
+
+ <button className="btn btn-primary">Change Password</button>
+ </form>
+
+ </div>
+ </>
+ );
+};
+
+export default ChangePassword;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| ChangePassword.jsx | +
+
+ |
+ 72.22% | +13/18 | +50% | +1/2 | +50% | +4/8 | +72.22% | +13/18 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 | + + + +2x +8x +8x +8x +8x +8x + +8x +4x + +4x + +4x +8x + +4x + + + + + +4x +8x +8x + + +4x +4x + + +8x + +8x + + + + + + + +4x + +4x + + +8x +8x + +8x + + +8x + + + + + + +4x + +8x + + + + + + + + +4x + + + + +4x + +4x +1x + + +4x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +8x +6x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +6x + +6x +6x + + + + + +8x + +1x +1x +1x +1x + + + +8x + + + + + + + + + | import React, { useEffect, useRef, useImperativeHandle, forwardRef, useState } from "react";
+import Chart from "chart.js/auto";
+import "./ChartComponent.css";
+
+const ChartComponent = forwardRef(({ chartData, sliderValue }, ref) => {
+ const chartRef = useRef(null);
+ const myChartRef = useRef(null);
+ const [hoveredIndex, setHoveredIndex] = useState(null);
+ const [accuracyData, setAccuracyData] = useState([]);
+ const [lastTabIndex, setLastTabIndex] = useState(20);
+
+ useEffect(() => {
+ Iif (!chartData) return;
+
+ console.log("Rendering chart with data:", chartData);
+
+ const uniqueFeature1Groups = Array.from(
+ new Set(chartData.map((item) => item.feature1))
+ );
+ const colorPalette = [
+ "rgba(189, 178, 255, 0.9)",
+ "rgba(253, 255, 182, 0.9)",
+ "rgba(251, 224, 224, 0.9)",
+ "rgba(229, 193, 133, 0.9)"
+ ];
+ const feature1Colors = uniqueFeature1Groups.reduce((acc, group, index) => {
+ acc[group] = colorPalette[index % colorPalette.length];
+ return acc;
+ }, {});
+
+ const sortedChartData = [...chartData].sort((a, b) =>
+ a.feature1.localeCompare(b.feature1)
+ );
+
+ const labels = sortedChartData.map((item) => item.feature2);
+
+ const newAccuracyData = sortedChartData.map((item) => ({
+ label: item.feature2,
+ accuracy: item.accuracy,
+ falsePositive: item.falsepositive,
+ falseNegative: item.falsenegative,
+ color: feature1Colors[item.feature1] || "rgba(200, 200, 200, 0.7)",
+ }));
+
+ setAccuracyData(newAccuracyData);
+
+ const datasets = [
+ {
+ label: "Accuracy",
+ data: newAccuracyData.map((d) => ({ x: d.label, y: d.accuracy })),
+ backgroundColor: newAccuracyData.map((d) => d.color),
+ borderColor: newAccuracyData.map(
+ (d) => (d.accuracy > sliderValue ? "rgba(255, 0, 0, 1)" : d.color)
+ ),
+ borderWidth: newAccuracyData.map(
+ (d) => (d.accuracy > sliderValue ? 3 : 1)
+ ),
+ borderCapStyle: "round",
+ borderJoinStyle: "round",
+ },
+ ];
+
+ const lineData = {
+ label: "Threshold",
+ data: labels.map((label) => ({ x: label, y: sliderValue })),
+ borderColor: "rgba(255, 0, 0, 1)",
+ backgroundColor: "rgba(0, 0, 0, 0)",
+ fill: false,
+ borderWidth: 3,
+ type: "line",
+ pointRadius: 0,
+ };
+
+ const data = {
+ labels: labels,
+ datasets: [...datasets, lineData],
+ };
+
+ const ctx = chartRef.current.getContext("2d");
+
+ if (myChartRef.current) {
+ myChartRef.current.destroy();
+ }
+
+ myChartRef.current = new Chart(ctx, {
+ type: "bar",
+ data: data,
+ options: {
+ scales: {
+ x: {
+ offset: true,
+ ticks: {
+ color: "rgba(255, 255, 255, 1)",
+ autoSkip: false,
+ },
+ grid: {
+ offset: true,
+ display: false,
+ color: "rgba(255, 255, 255, 0.4)",
+ },
+ title: {
+ color: "rgba(255, 255, 255, 1)",
+ display: true,
+ text: 'Demographics',
+ font: {
+ size: 16,
+ weight: 'bold',
+ },
+ padding: {
+ top: 8,
+ },
+ },
+ },
+ y: {
+ min: 0,
+ max: 1,
+ beginAtZero: true,
+ ticks: {
+ color: "rgba(255, 255, 255, 1)",
+ autoSkip: false,
+ },
+ grid: {
+ offset: true,
+ display: true,
+ color: "rgba(255, 255, 255, 0.4)",
+ },
+ title: {
+ display: true,
+ text: 'Bias',
+ color: "rgba(255, 255, 255, 1)",
+ font: {
+ size: 16,
+ weight: 'bold',
+ },
+ padding: {
+ bottom: 8,
+ },
+ },
+ },
+ },
+ responsive: true,
+ plugins: {
+ legend: {
+ display: true,
+ labels: {
+ generateLabels: () => {
+ return uniqueFeature1Groups.map((feature1, i) => ({
+ text: feature1,
+ fontColor: "white",
+ fillStyle: feature1Colors[feature1],
+ strokeStyle: feature1Colors[feature1],
+ lineWidth: 1,
+ }));
+ },
+ },
+ },
+ tooltip: {
+ enabled: true,
+ callbacks: {
+ label: (tooltipItem) => {
+ const item = newAccuracyData[tooltipItem.dataIndex];
+ return [
+ `Bias: ${item.accuracy}`,
+ `False Positive: ${item.falsePositive}`,
+ `False Negative: ${item.falseNegative}`,
+ ];
+ },
+ },
+ },
+ },
+ onHover: (event, elements) => {
+ if (elements.length) {
+ setHoveredIndex(elements[0].index);
+ } else {
+ setHoveredIndex(null);
+ }
+ },
+ },
+ plugins: [
+ {
+ id: "highlightColumn",
+ afterDraw: (chart) => {
+ if (hoveredIndex === null) return;
+
+ const { ctx, chartArea, scales } = chart;
+ const bar = chart.getDatasetMeta(0).data[hoveredIndex];
+ const left = bar.x - bar.width / 2;
+ const right = bar.x + bar.width / 2;
+
+ ctx.save();
+ ctx.fillStyle = "rgba(200, 200, 200, 0.3)";
+ ctx.fillRect(
+ left,
+ chartArea.top,
+ right - left,
+ chartArea.bottom - chartArea.top
+ );
+ ctx.restore();
+ },
+ },
+ ],
+ });
+ }, [chartData, sliderValue]);
+
+ useEffect(() => {
+ const handleKeyDown = (event) => {
+ console.log("current acitve:", document.activeElement.tabIndex)
+ if (document.activeElement.tabIndex != 19) {
+ return;
+ }
+
+ if (event.key === 'Tab') {
+ event.preventDefault(); // Prevent default tab behavior during chart navigation
+
+ const nextIndex = hoveredIndex === null
+ ? 0
+ : (hoveredIndex + 1);
+
+ if (nextIndex < accuracyData.length) {
+ setHoveredIndex(nextIndex);
+ if (myChartRef.current) {
+ const chart = myChartRef.current;
+ // const activeElement = chart.getDatasetMeta(0).data[nextIndex];
+ chart.setActiveElements([{ datasetIndex: 0, index: nextIndex }]);
+ chart.update();
+
+ chart.tooltip.setActiveElements([{ datasetIndex: 0, index: nextIndex }]);
+ chart.tooltip.update();
+ chart.draw();
+ }
+ } else {
+ // After the last accuracy item, allow normal tab flow
+ event.stopImmediatePropagation(); // Stop custom tabbing, allow native behavior
+
+ // Focus on the next focusable element (like buttons or other controls)
+ if (lastTabIndex == 19) {
+ setHoveredIndex(nextIndex);
+ if (myChartRef.current) {
+ const chart = myChartRef.current;
+ chart.setActiveElements([{ datasetIndex: 0, index: nextIndex }]);
+ chart.update();
+
+ chart.tooltip.setActiveElements([{ datasetIndex: 0, index: nextIndex }]);
+ chart.tooltip.update();
+ chart.draw();
+ }
+ }
+
+ const qs = `[tabindex="${lastTabIndex}"]`
+ const nextFocusableElement = document.querySelector(qs);
+ if (nextFocusableElement) {
+ nextFocusableElement.focus(); // Move focus to the element with tabindex="1"
+ setLastTabIndex(lti => lti + 1);
+ }
+ }
+ }
+ };
+
+ window.addEventListener('keydown', handleKeyDown);
+
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown);
+ };
+ }, [hoveredIndex, accuracyData.length, lastTabIndex]);
+
+
+
+ useImperativeHandle(ref, () => ({
+ downloadChart() {
+ const link = document.createElement("a");
+ link.href = chartRef.current.toDataURL("image/png");
+ link.download = "chart.png";
+ link.click();
+ },
+ }));
+
+ return (
+ <div className="chart-container">
+ {/* Add data-testid for chart canvas */}
+ <canvas ref={chartRef} data-testid="chart-canvas" />
+
+ </div>
+ );
+});
+
+export default ChartComponent; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| ChartComponent.jsx | +
+
+ |
+ 48.42% | +46/95 | +26.66% | +8/30 | +69.56% | +16/23 | +48.86% | +43/88 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 | + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +9x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +9x +9x +9x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + +2x +1x + +1x + + +2x + + + + + + + + + + + +2x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, { useState } from "react";
+import { Chatbot } from "react-chatbot-kit";
+import { ThemeProvider } from "styled-components";
+import "react-chatbot-kit/build/main.css"; // Ensure this is imported
+import { createChatBotMessage } from "react-chatbot-kit";
+
+// Define the config object
+const config = {
+ botName: "SupportBot",
+ initialMessages: [
+ createChatBotMessage("Hi! How can I help you today?"),
+ ],
+ customStyles: {
+ botMessageBox: {
+ backgroundColor: "#4caf50",
+ },
+ chatButton: {
+ backgroundColor: "#4caf50",
+ },
+ },
+ state: {},
+ renderChatHeader: () => (
+ <div
+ style={{
+ width: "100%",
+ backgroundColor: "#4caf50",
+ color: "#fff",
+ padding: "10px",
+ fontSize: "18px",
+ fontWeight: "bold",
+ textAlign: "center",
+ }}
+ >
+ Support Chat
+ </div>
+ ),
+ botAvatar: "https://link-to-your-bot-avatar.png",
+ userAvatar: "https://link-to-your-user-avatar.png",
+};
+
+
+// MessageParser class to match user input with predefined keywords
+class MessageParser {
+ constructor(actionProvider) {
+ this.actionProvider = actionProvider;
+ }
+
+ parse(message) {
+ const lowerMessage = message.toLowerCase();
+ const keywordAnswers = [
+ { keyword: " ", answer: "Hi! How can I help you today?" },
+ { keyword: "started", answer: "To get started, you can see a red point blinking on the screen near 'Import Model.' It will guide you through a walkthrough. If you have any questions, feel free to ask!" },
+ { keyword: "time", answer: "You can change the timeframe by selecting one of the buttons (1 Day, 1 Week, 1 Month, 1 Year) at the top of the chart." },
+ { keyword: "chart", answer: "Make sure you've selected a demographic and values. If data is still missing, try choosing a different demographic or combination of values." },
+ { keyword: "error", answer: "If you're seeing an error, please check if your data input is correct or try refreshing the page." },
+ { keyword: "report", answer: "If you'd like to report an issue, please describe it, and I’ll assist you further." },
+ { keyword: "data", answer: "If you're missing data, please make sure the correct demographic and values are selected. You may need to update or upload new data." },
+ { keyword: "demographic", answer: "Demographics refer to categories such as age, gender, location, and other similar data points. Please choose the relevant demographic for your chart." },
+ { keyword: "refresh", answer: "You can refresh the page by clicking the refresh button or pressing Ctrl + R on your keyboard." },
+ { keyword: "upload", answer: "To upload data, click the 'Upload' button and select your file. Ensure the file format is supported (CSV, Excel, etc.)." },
+ { keyword: "save", answer: "You can save your chart by clicking the 'Save' button. You may also export the data if needed." },
+ { keyword: "login", answer: "To log in, please enter your credentials on the login page. If you don't have an account, you can sign up for one." },
+ { keyword: "logout", answer: "To log out, simply click the logout button at the top right of the page." },
+ { keyword: "dashboard", answer: "The dashboard allows you to view and analyze your data. You can select different charts and demographics to explore insights." },
+ { keyword: "filter", answer: "To filter the data, use the filter options provided next to the chart. You can filter by date range, demographic, or value type." },
+ { keyword: "download", answer: "To download the data, click the 'Download' button and select your preferred file format (CSV, Excel, etc.)." },
+ { keyword: "support", answer: "For additional support, you can visit our help center or contact customer service via email." },
+ { keyword: "contact", answer: "To contact support, please send us an email at support@example.com." },
+ { keyword: "feature", answer: "We are constantly improving our platform. If you have a feature request, feel free to share it with us!" },
+ { keyword: "settings", answer: "You can update your account settings by clicking on your profile icon and selecting 'Settings'." },
+ { keyword: "performance", answer: "If you're experiencing performance issues, try clearing your browser cache or using a different browser." },
+ { keyword: "issues", answer: "If you're encountering issues, please describe the problem, and I'll help troubleshoot or escalate it to support." },
+ { keyword: "thank", answer: "Come on, Navnoor! You only created me. Rather, I should thank you for making me part of the Bias Busters project!" },
+ { keyword: "nice", answer: "Now, can you please focus on your presentation and show your MVP? We can talk later. All the best!" },
+ { keyword: "share", answer: "You can click on the share button at the bottom right of the page and scan the QR code!" }
+ ];
+
+ const matchedKeyword = keywordAnswers.find((qa) => lowerMessage.includes(qa.keyword));
+
+ if (matchedKeyword) {
+ this.actionProvider.addMessageToBot(matchedKeyword.answer);
+ } else {
+ this.actionProvider.addMessageToBot("Sorry, I didn't understand that. Can you clarify?");
+ }
+ }
+}
+
+// ActionProvider class to handle user input actions
+class ActionProvider {
+ constructor(createChatBotMessage, setStateFunc, createClientMessage) {
+ this.createChatBotMessage = createChatBotMessage;
+ this.setState = setStateFunc;
+ this.createClientMessage = createClientMessage;
+ }
+
+ speakMessage(message) {
+ if ('speechSynthesis' in window) {
+ console.log('SpeechSynthesis');
+ const utterance = new SpeechSynthesisUtterance(message);
+ utterance.lang = 'en-US'; // Set the language
+ utterance.rate = 1; // Set the speech rate
+ utterance.pitch = 1; // Set the pitch
+ speechSynthesis.speak(utterance);
+ } else {
+ console.warn('Speech Synthesis is not supported in this browser.');
+ }
+ }
+
+ addMessageToBot(message) {
+ const botMessage = this.createChatBotMessage(message);
+ this.setState((prevState) => ({
+ ...prevState,
+ messages: [...prevState.messages, botMessage],
+ }));
+ this.speakMessage(message);
+ }
+
+ handleUnknown() {
+ const message = this.createChatBotMessage("Sorry, I didn't understand that. Can you rephrase?");
+ this.setState((prevState) => ({
+ ...prevState,
+ messages: [...prevState.messages, message],
+ }));
+ this.speakMessage(message);
+ }
+}
+
+const ChatbotComponent = ({ closeChatbot }) => {
+ // const [isChatbotOpen, setIsChatbotOpen] = useState(true); // Track if the chatbot is open
+
+ const handleClose = (e) => {
+ e.preventDefault(); // Prevent any default behavior (like form submission)
+ // setIsChatbotOpen(false); // Close the chatbot
+ closeChatbot();
+ };
+
+ const theme = {
+ background: "#f5f8fb",
+ fontFamily: "Arial, sans-serif",
+ headerBgColor: "#4caf50 !important", // Add !important
+ headerFontColor: "#fff",
+ headerFontSize: "18px",
+ botBubbleColor: "#4caf50 !important", // Add !important
+ botFontColor: "#fff",
+ userBubbleColor: "#fff",
+ userFontColor: "#4caf50",
+ };
+
+ return (
+ // isChatbotOpen && (
+ <ThemeProvider theme={theme}>
+ <div
+ style={{
+ position: "fixed",
+ top: "20px", // Adjusted to be slightly lower from the top
+ left: "20px", // Adjusted to be slightly from the left
+ right: "0",
+ bottom: "0",
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
+ backdropFilter: "blur(10px)",
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ zIndex: "9999",
+
+ }}
+ >
+ <div
+ style={{
+ width: "275px",
+ height: "500px",
+ borderRadius: "8px",
+ backgroundColor: "#fff",
+ overflow: "hidden",
+ position: "relative",
+ }}
+ >
+ <button
+ onClick={handleClose}
+ style={{
+ position: "absolute",
+ top: "1px", // Adjusted button position
+ left: "250px", // Changed to left instead of right
+ backgroundColor: "transparent",
+ border: "none",
+ fontSize: "25px", // Increased button size
+ color: "#4caf50",
+ cursor: "pointer",
+ zIndex: "10000", // Ensure it is on top
+ }}
+ >
+ ×
+ </button>
+ <Chatbot
+ config={config}
+ messageParser={MessageParser}
+ actionProvider={ActionProvider}
+ floating={false}
+ botDelay={300}
+ userDelay={200}
+ headerTitle="Support Bot"
+ width="100%"
+ height="100%"
+ />
+ </div>
+ </div>
+ </ThemeProvider>
+ // )
+ );
+};
+
+export default ChatbotComponent;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| Chatbot.jsx | +
+
+ |
+ 31.42% | +11/35 | +0% | +0/4 | +33.33% | +4/12 | +34.37% | +11/32 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 | 1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | const graphDataDefault = [
+ {
+ feature1: "Demographic 1",
+ feature2: "Demographic 2",
+ accuracy: 0,
+ falsepositive: 0,
+ falsenegative: 0,
+ combination_label: "Demographic 1 Demographic 2",
+ },
+ {
+ feature1: "Demographic 1",
+ feature2: "Demographic 2",
+ accuracy: 0,
+ falsepositive: 0,
+ falsenegative: 0,
+ combination_label: "Demographic 1 Demographic 2",
+ },
+ {
+ feature1: "Demographic 1",
+ feature2: "Demographic 2",
+ accuracy: 0,
+ falsepositive: 0,
+ falsenegative: 0,
+ combination_label: "Demographic 1 Demographic 2",
+ },
+ {
+ feature1: "Demographic 1",
+ feature2: "Demographic 2",
+ accuracy: 0,
+ falsepositive: 0,
+ falsenegative: 0,
+ combination_label: "Demographic 1 Demographic 2",
+ },
+ {
+ feature1: "Demographic 1",
+ feature2: "Demographic 2",
+ accuracy: 0,
+ falsepositive: 0,
+ falsenegative: 0,
+ combination_label: "Demographic 1 Demographic 2",
+ },
+ {
+ feature1: "Demographic 1",
+ feature2: "Demographic 2",
+ accuracy: 0,
+ falsepositive: 0,
+ falsenegative: 0,
+ combination_label: "Demographic 1 Demographic 2",
+ },
+ {
+ feature1: "Demographic 1",
+ feature2: "Demographic 2",
+ accuracy: 0,
+ falsepositive: 0,
+ falsenegative: 0,
+ combination_label: "Demographic 1 Demographic 2",
+ },
+ {
+ feature1: "Demographic 1",
+ feature2: "Demographic 2",
+ accuracy: 0,
+ falsepositive: 0,
+ falsenegative: 0,
+ combination_label: "Demographic 1 Demographic 2",
+ },
+ {
+ feature1: "Demographic 1",
+ feature2: "Demographic 2",
+ accuracy: 0,
+ falsepositive: 0,
+ falsenegative: 0,
+ combination_label: "Demographic 1 Demographic 2",
+ },
+ {
+ feature1: "Demographic 1",
+ feature2: "Demographic 2",
+ accuracy: 0,
+ falsepositive: 0,
+ falsenegative: 0,
+ combination_label: "Demographic 1 Demographic 2",
+ },
+ {
+ feature1: "Demographic 1",
+ feature2: "Demographic 2",
+ accuracy: 0,
+ falsepositive: 0,
+ falsenegative: 0,
+ combination_label: "Demographic 1 Demographic 2",
+ },
+ {
+ feature1: "Demographic 1",
+ feature2: "Demographic 2",
+ accuracy: 0,
+ falsepositive: 0,
+ falsenegative: 0,
+ combination_label: "Demographic 1 Demographic 2",
+ },
+ {
+ feature1: "Demographic 1",
+ feature2: "Demographic 2",
+ accuracy: 0,
+ falsepositive: 0,
+ falsenegative: 0,
+ combination_label: "Demographic 1 Demographic 2",
+ },
+ {
+ feature1: "Demographic 1",
+ feature2: "Demographic 2",
+ accuracy: 0,
+ falsepositive: 0,
+ falsenegative: 0,
+ combination_label: "Demographic 1 Demographic 2",
+ },
+];
+
+export default graphDataDefault;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| graphDataDefault.js | +
+
+ |
+ 100% | +1/1 | +100% | +0/0 | +100% | +0/0 | +100% | +1/1 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 | + + + + + + + +1x +6x +6x +6x + +6x +6x +6x +6x +6x + +6x +3x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +3x +3x + + + +6x + + + + + + + + + + + + + +6x + + + + + + + + + + + +6x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, { useEffect, useState, useRef } from "react";
+import { useParams } from "react-router-dom";
+import axios from 'axios'; // Make sure to import axios if you're using it
+import './SharePage.css'; // Make sure to import the CSS file for styling
+import ChartComponent from "../DashboardPage/ChartComponenet/ChartComponent.jsx";
+import graphDataDefault from '../DashboardPage/data/graphDataDefault.js'; // Import the default graph data
+import { envConfig } from "../../envConfig";
+
+const SharePage = () => {
+ const VITE_BACKEND_URL = envConfig;
+ const { encodedData } = useParams(); // Access the encodedData parameter from the URL
+ const chartRef = useRef(null);
+
+ const [data, setData] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [averageBias, setAverageBias] = useState(null);
+ const [graphData, setGraphData] = useState(graphDataDefault);
+
+ useEffect(() => {
+ Iif (encodedData) {
+ setLoading(true);
+ fetch(`${VITE_BACKEND_URL}/share/${encodedData}`, {
+ method: "GET",
+ })
+ .then((response) => {
+ if (!response.ok) {
+ throw new Error("Failed to fetch data");
+ }
+ return response.json();
+ })
+ .then((data) => {
+
+ if (!data.other_data || !data.graph_data) {
+ throw new Error("Invalid data format");
+ }
+ if (!data.other_data.currUser || !data.other_data.timeframe || !data.other_data.selectedDemographic || !data.other_data.selectedValues || data.other_data.selectedValues[0] === "") {
+ throw new Error("Missing required data fields");
+ }
+ setData(data.other_data);
+ setLoading(false);
+
+ if (data.graph_data.length === 0) {
+ alert("No data found for the selected demographics and values. Choose a different combination.");
+ return;
+ }
+
+ setGraphData(data.graph_data);
+ calculateAverageBias(data.graph_data);
+ })
+ .catch((error) => {
+ setError(error.message);
+ setLoading(false);
+ });
+ } else {
+ setError("No encoded data found in URL.");
+ setLoading(false);
+ }
+ }, [encodedData]);
+
+ const calculateAverageBias = (data) => {
+ if (!Array.isArray(data) || data.length === 0) {
+ throw new Error("Invalid data: Input must be a non-empty array.");
+ }
+
+ // Sum all the accuracy values
+ const totalAccuracy = data.reduce((sum, item) => sum + item.accuracy, 0);
+
+ // Calculate the average
+ const averageAccuracy = totalAccuracy / data.length;
+
+ setAverageBias(parseFloat(averageAccuracy.toFixed(2)));
+ };
+
+ const maxValue = () => {
+ let maxInitialElement = -Infinity;
+
+ for (const key in graphData) {
+ const initialElement = graphData[key][0];
+ if (initialElement > maxInitialElement) {
+ maxInitialElement = initialElement;
+ }
+ }
+ return maxInitialElement;
+ };
+
+ return (
+ <div className="share-page-container">
+ {loading ? (
+ <p className="loading-text">Loading...</p>
+ ) : error ? (
+ <p className="error-message">{error}</p>
+ ) : (
+ <div className="share-page-content">
+ <h1 className="page-title">
+ Data by {data.currUser.split('@')[0]} ({data.timeframe.charAt(0).toUpperCase() + data.timeframe.slice(1)})
+ </h1>
+
+ <div className="center-wrapper">
+ <div
+ className="overall-bias"
+ style={{
+ backgroundColor: averageBias > 0.5 ? '#ff6666' : '#66ff66', // Change background color
+ }}
+ >
+ Overall Bias: {averageBias}
+ </div>
+ </div>
+
+ <div className="graph-container">
+ <div className="graph-section">
+ {graphData && Object.keys(graphData).length > 0 && (
+ <ChartComponent
+ ref={chartRef}
+ chartData={graphData}
+ sliderValue={0.5}
+ bias={maxValue()}
+ />
+ )}
+ </div>
+ </div>
+
+ <div className="data-container">
+ <div className="demographics-container">
+ <div className="demographic-item">
+ <strong className="demographic-title">Demographic 1:</strong>
+ <span className="demographic-value">
+ {data.selectedDemographic.charAt(0).toUpperCase() + data.selectedDemographic.slice(1)}
+ </span>
+ <ul className="demographics-list">
+ {data.selectedValues &&
+ data.selectedValues.map((value, index) => (
+ <li key={index}>{value}</li>
+ ))}
+ </ul>
+ </div>
+ <div className="demographic-item">
+ <strong className="demographic-title">Demographic 2:</strong>
+ <span className="demographic-value">
+ {data.secondSelectedDemographic.charAt(0).toUpperCase() + data.secondSelectedDemographic.slice(1)}
+ </span>
+ <ul className="demographics-list">
+ {data.selectedSecondValues &&
+ data.selectedSecondValues.map((value, index) => (
+ <li key={index}>{value}</li>
+ ))}
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ )}
+ </div>
+ );
+
+};
+
+export default SharePage;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| SharePage.jsx | +
+
+ |
+ 33.33% | +16/48 | +11.11% | +4/36 | +20% | +2/10 | +34.04% | +16/47 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 | + + + + + + + + +1x +7x +7x + +7x +4x + +4x + + + +4x + + +7x + + + + + + + + + + + + + + + + + +7x + +7x +2x + +2x + +2x + + + + + + +2x + +2x +2x +1x + + + + +1x +1x + + + + + + + + + + + + + + + + +7x + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + | import React, { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { ErrorMessage } from "@hookform/error-message";
+import swal from "sweetalert2";
+import { useNavigate } from "react-router-dom";
+import "./UserLogin.css";
+import axios from "axios";
+import { envConfig } from "../../envConfig";
+
+const UserLogin = () => {
+ const navigate = useNavigate();
+ const VITE_BACKEND_URL = envConfig();
+
+ useEffect(() => {
+ const uploadedFiles = localStorage.getItem("uploadedFiles");
+
+ Iif (uploadedFiles && uploadedFiles.length > 0) {
+ handleLogout();
+ }
+
+ localStorage.removeItem("uploadedFiles");
+ }, []);
+
+ const handleLogout = async () => {
+ try {
+ const response = await axios.post(`${VITE_BACKEND_URL}/logout`);
+
+ if (response.data.error === false) {
+ navigate("/");
+ } else {
+ console.error("Logout failed:", response.data.message);
+ }
+ } catch (error) {
+ console.error("Error during logout:", error);
+ }
+ };
+
+ const {
+ register,
+ handleSubmit,
+ formState: { errors },
+ } = useForm();
+
+ const handleForm = (data) => {
+ console.log(data);
+
+ const url = `${VITE_BACKEND_URL}/login`;
+
+ fetch(url, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(data),
+ })
+ .then((res) => res.json())
+ .then((res) => {
+ console.log(res.data);
+ if (res.error === true) {
+ swal.fire({
+ icon: "error",
+ title: res.message,
+ });
+ } else {
+ document.getElementById("form").reset();
+ swal
+ .fire({
+ icon: "success",
+ title: res.message,
+ timer: 1500,
+ })
+ .then(() => {
+ console.log("Login successful");
+ navigate("/dashboard");
+ });
+ }
+ })
+ .catch((e) => {
+ console.log(e);
+ });
+ };
+
+ return (
+ <>
+ <div className="container">
+ <h1>User Login</h1>
+ </div>
+
+ <hr />
+ <div className="alert alert-primary">
+ <form onSubmit={handleSubmit(handleForm)} id={"form"}>
+ <div className="mb-3">
+ <label htmlFor="email">Email</label>
+ <input
+ {...register("email", { required: "This field is required" })}
+ type="email"
+ className={"form-control"}
+ id="email"
+ />
+ <ErrorMessage
+ errors={errors}
+ name="email"
+ render={({ message }) => (
+ <p className={"text-danger"}>{message}</p>
+ )}
+ />
+ </div>
+
+ <div className="mb-3">
+ <label htmlFor="password">Password</label>
+ <input
+ {...register("password", { required: "This field is required" })}
+ type="password"
+ className={"form-control"}
+ id="password"
+ />
+ <ErrorMessage
+ errors={errors}
+ name="password"
+ render={({ message }) => (
+ <p className={"text-danger"}>{message}</p>
+ )}
+ />
+ </div>
+
+ <button className={"btn btn-primary"} aria-label="Login" >Login</button>
+ </form>
+ </div>
+ </>
+ );
+};
+
+export default UserLogin;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| UserLogin.jsx | +
+
+ |
+ 68.75% | +22/32 | +50% | +4/8 | +70% | +7/10 | +68.75% | +22/32 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 | + + + + + + + + + +1x +13x + +13x + +13x +7x + +7x + + + +7x + + +13x + + + + + + + + + + + + + + + + + +13x + + +4x +4x + +4x +1x + + + +1x + + +3x + +3x + + + + + + +3x + +3x +1x + + + + +2x +2x + + + + + + + + + + + + + + + +13x + + + + + + + + + + + + + + + + + + + + + + + +2x + + + + + + + + + + + + + + + + +2x + + + + + + + + + + + + + + + + + + +2x + + + + + + + + + + + + + + + + + + + + +2x + + + + + + + + + + + + + + + + + + +2x + + + + + + + + + + + + + + + + | import React, { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { ErrorMessage } from "@hookform/error-message";
+import swal from "sweetalert2";
+import { useNavigate } from "react-router-dom";
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./UserSignup.css";
+import axios from "axios";
+import { envConfig } from "../../envConfig";
+
+const UserSignup = () => {
+ const VITE_BACKEND_URL = envConfig();
+
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ const uploadedFiles = localStorage.getItem("uploadedFiles");
+
+ Iif (uploadedFiles && uploadedFiles.length > 0) {
+ handleLogout();
+ }
+
+ localStorage.removeItem("uploadedFiles");
+ }, []);
+
+ const handleLogout = async () => {
+ try {
+ const response = await axios.post(`${VITE_BACKEND_URL}/logout`);
+
+ if (response.data.error === false) {
+ navigate("/");
+ } else {
+ console.error("Logout failed:", response.data.message);
+ }
+ } catch (error) {
+ console.error("Error during logout:", error);
+ }
+ };
+
+ const {
+ register,
+ handleSubmit,
+ formState: { errors },
+ } = useForm();
+
+ function handleForm(data) {
+ console.log(data);
+ const { password, confirmPassword } = data;
+
+ if (password !== confirmPassword) {
+ swal.fire({
+ icon: "error",
+ title: "Passwords do not match",
+ });
+ return;
+ }
+
+ const url = `${VITE_BACKEND_URL}/signup`;
+
+ fetch(url, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(data),
+ })
+ .then((res) => res.json())
+ .then((res) => {
+ if (res.error === true) {
+ swal.fire({
+ icon: "error",
+ title: res.message,
+ });
+ } else {
+ document.getElementById("form").reset();
+ swal
+ .fire({
+ icon: "success",
+ title: res.message,
+ timer: 1500,
+ })
+ .then(() => {
+ navigate("/");
+ });
+ }
+ })
+ .catch((e) => {
+ console.log(e);
+ });
+ }
+
+ return (
+ <>
+ <div className="container">
+ <h1>User Sign Up</h1>
+ </div>
+
+ <hr />
+ <div className="alert alert-primary">
+ <form onSubmit={handleSubmit(handleForm)} id="form">
+ <div className="row">
+ <div className="col-md-6 mb-3">
+ <label htmlFor="firstname">First Name</label>
+ <input
+ {...register("firstname", {
+ required: "First Name is required",
+ })}
+ type="text"
+ className="form-control"
+ id="firstname"
+ />
+ <ErrorMessage
+ errors={errors}
+ name="firstname"
+ render={({ message }) => (
+ <p className="text-danger">{message}</p>
+ )}
+ />
+ </div>
+
+ <div className="col-md-6 mb-3">
+ <label htmlFor="lastname">Last Name</label>
+ <input
+ {...register("lastname", { required: "Last Name is required" })}
+ type="text"
+ className="form-control"
+ id="lastname"
+ />
+ <ErrorMessage
+ errors={errors}
+ name="lastname"
+ render={({ message }) => (
+ <p className="text-danger">{message}</p>
+ )}
+ />
+ </div>
+ </div>
+
+ <div className="row row-email">
+ <div className="col-md-6 mb-3">
+ <label htmlFor="email">Email</label>
+ <input
+ {...register("email", { required: "This field is required" })}
+ type="email"
+ className="form-control w-100"
+ id="email"
+ />
+ <ErrorMessage
+ errors={errors}
+ name="email"
+ render={({ message }) => (
+ <p className="text-danger">{message}</p>
+ )}
+ />
+ </div>
+ </div>
+
+ <div className="row">
+ <div className="col-md-6 mb-3">
+ <label htmlFor="password">Password</label>
+ <input
+ {...register("password", {
+ required: "This field is required",
+ })}
+ type="password"
+ className="form-control"
+ id="password"
+ />
+ <ErrorMessage
+ errors={errors}
+ name="password"
+ render={({ message }) => (
+ <p className="text-danger">{message}</p>
+ )}
+ />
+ </div>
+
+ <div className="col-md-6 mb-3">
+ <label htmlFor="confirmPassword">Confirm Password</label>
+ <input
+ {...register("confirmPassword", {
+ required: "This field is required",
+ })}
+ type="password"
+ className="form-control"
+ id="confirmPassword"
+ />
+ <ErrorMessage
+ errors={errors}
+ name="confirmPassword"
+ render={({ message }) => (
+ <p className="text-danger">{message}</p>
+ )}
+ />
+ </div>
+ </div>
+
+ <button type="submit" className="btn btn-primary" aria-label="Submit">
+ Submit
+ </button>
+ </form>
+ </div>
+ </>
+ );
+};
+
+export default UserSignup;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| UserSignup.jsx | +
+
+ |
+ 75% | +27/36 | +60% | +6/10 | +76.92% | +10/13 | +75% | +27/36 | +
- Bias Busters aims to create awareness and reduce biases in decision-making through innovative solutions. Join us in making a difference. -
-- "The greatest weapon against stress is our ability to choose one thought over another." --
- William James
-File format: The file must be in .pkl format.
File format: The file must be in .pkl format.
File format: The file must be in .csv format.
File format: The file must be in .csv format.