From 4f6cf9a1cc520a4891b3b21196fa0b4a3c030f21 Mon Sep 17 00:00:00 2001
From: aunshx <aunsh.sb@gmail.com>
Date: Tue, 3 Sep 2024 17:11:22 -0700
Subject: [PATCH] Partial progress on mvt manipulator and toggling

---
 .../Visualizer/Graphs/MVT/Components/Graph.js |  1 -
 .../Graphs/MVT/Components/Manipulator.js      | 18 +++--
 .../Pages/Visualizer/Graphs/MVT/index.js      | 77 ++++++++++---------
 3 files changed, 51 insertions(+), 45 deletions(-)

diff --git a/src/Components/Pages/Visualizer/Graphs/MVT/Components/Graph.js b/src/Components/Pages/Visualizer/Graphs/MVT/Components/Graph.js
index 6c8455d..5ed16ff 100644
--- a/src/Components/Pages/Visualizer/Graphs/MVT/Components/Graph.js
+++ b/src/Components/Pages/Visualizer/Graphs/MVT/Components/Graph.js
@@ -112,7 +112,6 @@ const themeObj = {
 }
 
 const MvtGraph = ({ chartData, chartMaxData, mvtGraphNo }) => {
-    console.log('CHART DATA', chartData)
     const { theme } = useContext(ThemeContext)
 
     const graphTheme = theme ? themeObj : {
diff --git a/src/Components/Pages/Visualizer/Graphs/MVT/Components/Manipulator.js b/src/Components/Pages/Visualizer/Graphs/MVT/Components/Manipulator.js
index fec7cde..b890c79 100644
--- a/src/Components/Pages/Visualizer/Graphs/MVT/Components/Manipulator.js
+++ b/src/Components/Pages/Visualizer/Graphs/MVT/Components/Manipulator.js
@@ -8,7 +8,6 @@ const Manipulator = ({
     toggleFaulty,
     toggleLine,
 }) => {
-    console.log('eifne', labelToggle)
     return (
         <div className='mt-2 rounded-md w-550p py-6 px-2 border-3p border-solid border-gray-700 dark:border-gray-50 flex flex-col gap-y-6 bg-blue-10 dark:bg-blue-450'>
             <div className="flex flex-col gap-y-6">
@@ -28,13 +27,16 @@ const Manipulator = ({
                 <FontVarTitle title={'Toggle Line Graph:'} fontClass={'text-15p'} />
                 <div className='flex gap-x-7 justify-center'>
                     {MVT_GRAPH_LABELS.length > 0 && MVT_GRAPH_LABELS.map((title, index) => (
-                        <ReplicaButton
-                            title={title}
-                            onClick={() => toggleLine(title)}
-                            lineActive={!labelToggle[title]}
-                            lineToggle={true}
-                            key={index}
-                        />
+                        <>
+                            {console.log('HELLO', title, labelToggle)}
+                            <ReplicaButton
+                                title={title}
+                                onClick={() => toggleLine(title)}
+                                lineActive={labelToggle[title]}
+                                lineToggle={true}
+                                key={index}
+                            />
+                        </>
                     ))}
                 </div>
             </div>
diff --git a/src/Components/Pages/Visualizer/Graphs/MVT/index.js b/src/Components/Pages/Visualizer/Graphs/MVT/index.js
index ea62986..2dd10fa 100644
--- a/src/Components/Pages/Visualizer/Graphs/MVT/index.js
+++ b/src/Components/Pages/Visualizer/Graphs/MVT/index.js
@@ -1,4 +1,3 @@
-
 import { useContext, useEffect, useState } from "react";
 import { VizDataHistoryContext } from "../../../../../Context/visualizer";
 import { mvtGraphComputation } from "../../Ancilliary/Computation/MVT";
@@ -6,20 +5,39 @@ import ResizableContainer from "../Components/GraphContainer";
 import MvtGraph from "./Components/Graph";
 import Manipulator from "./Components/Manipulator";
 
-const LABEL_TOGGLES = { "Replica 1": true, "Replica 2": true, "Replica 3": true, "Replica 4": true }
-
-const FAULT_TOGGLES = { "Replica 1": false, "Replica 2": false, "Replica 3": false, "Replica 4": false }
-
+const LABEL_TOGGLES = { "Replica 1": true, "Replica 2": true, "Replica 3": true, "Replica 4": true };
+const FAULT_TOGGLES = { "Replica 1": false, "Replica 2": false, "Replica 3": false, "Replica 4": false };
+
+const updateLabelToggles = (status) => {
+    let updatedLabel = {};
+    status.forEach((value, index) => {
+        let str = `Replica ${index + 1}`;
+        updatedLabel = {
+            ...updatedLabel,
+            [str]: value
+        };
+    });
+    return updatedLabel;
+}
+
+const updateFaultToggles = (status) => {
+    let updatedFaultToggles = {};
+    status.forEach((value, index) => {
+        let str = `Replica ${index + 1}`;
+        updatedFaultToggles = {
+            ...updatedFaultToggles,
+            [str]: !value 
+        };
+    });
+    return updatedFaultToggles;
+}
 
 const Mvt = () => {
-    const { messageHistory, currentTransaction, replicaStatus } = useContext(VizDataHistoryContext)
-
+    const { messageHistory, currentTransaction, replicaStatus } = useContext(VizDataHistoryContext);
     const [messageChartData, setMessageChartData] = useState([]);
     const [chartMaxData, setChartMaxData] = useState({});
-
     const [labelToggle, setLabelToggle] = useState(LABEL_TOGGLES);
     const [labelToggleFaulty, setLabelToggleFaulty] = useState(FAULT_TOGGLES);
-
     const [resetGraph, setResetGraph] = useState(0);
     const [isLoading, setIsLoading] = useState(false);
 
@@ -27,7 +45,7 @@ const Mvt = () => {
         let value = resetGraph;
         value = value + 1;
         setResetGraph(value);
-    }
+    };
 
     const toggleFaulty = (label) => {
         setLabelToggleFaulty((prevLabels) => {
@@ -39,16 +57,13 @@ const Mvt = () => {
         const setFaulty = async (label) => {
             try {
                 let response = await fetch('http://localhost:1850' + String(label.charAt(label.length - 1)) + '/make_faulty');
-
-
                 console.log(response.body());
             } catch (error) {
-                //console.error('Error toggling faulty:', error);
+                console.error('Error toggling faulty:', error);
             }
-        }
+        };
 
         setFaulty(label);
-
         updateGraph();
     };
 
@@ -56,27 +71,24 @@ const Mvt = () => {
         setLabelToggle((prevLabels) => {
             const updatedLabels = { ...prevLabels };
             updatedLabels[label] = !updatedLabels[label];
-            return updatedLabels;
+            return updatedLabels; 
         });
-        updateGraph();
     };
 
+
     const chartMaxDataUpdate = (value) => setChartMaxData(value);
     const messageChartDataUpdate = (value) => setMessageChartData(value);
 
     useEffect(() => {
         const transactionData = messageHistory[currentTransaction];
-        setLabelToggleFaulty(replicaStatus)
-        setLabelToggle(replicaStatus)
 
-        replicaStatus.length > 0 && replicaStatus.forEach((value, index) => {
-            if (!value) {
-                toggleFaulty(`Replica ${index + 1}`)
-                toggleLine(`Replica ${index + 1}`)
-            }
-        });
+        const updatedLabelToggles = updateLabelToggles(replicaStatus);
+        const updatedFaultToggles = updateFaultToggles(replicaStatus);
+
+        setLabelToggle(updatedLabelToggles);
+        setLabelToggleFaulty(updatedFaultToggles);
 
-        const { pointData, maxPointData } = mvtGraphComputation(transactionData, labelToggle, chartMaxDataUpdate, messageChartDataUpdate)
+        const { pointData, maxPointData } = mvtGraphComputation(transactionData, updatedLabelToggles, chartMaxDataUpdate, messageChartDataUpdate);
 
         chartMaxDataUpdate(maxPointData);
         messageChartDataUpdate(pointData);
@@ -88,7 +100,7 @@ const Mvt = () => {
             <div className="grid grid-cols-2 gap-x-6 w-full">
                 <ResizableContainer title={'Prepare Messages v Time'} >
                     <div className='relative w-full h-full pl-4 pr-2 pb-6'>
-                        {(isLoading) ? (
+                        {isLoading ? (
                             <div className='loader'>
                                 <div>MVT</div>
                                 <div className='inner' />
@@ -100,7 +112,7 @@ const Mvt = () => {
                 </ResizableContainer>
                 <ResizableContainer title={'Commit Messages v Time'}>
                     <div className='relative w-full h-full pl-4 pr-2 pb-6'>
-                        {(isLoading) ? (
+                        {isLoading ? (
                             <div className='loader'>
                                 <div>MVT</div>
                                 <div className='inner' />
@@ -123,11 +135,4 @@ const Mvt = () => {
     );
 };
 
-const index = () => {
-    return (
-        <Mvt />
-    );
-};
-
-
-export default index;
+export default Mvt;