From d2f0104008e6c23a66842bb7bcb8537b5de87a7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eneko=20Uru=C3=B1uela?= <enekouru@gmail.com>
Date: Sat, 2 Oct 2021 11:14:21 +0200
Subject: [PATCH] Small bug fixes

---
 src/PlotUtils.js    |  5 +++++
 src/Plots.js        | 13 ++++++++-----
 src/ToggleSwitch.js |  7 ++++++-
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/PlotUtils.js b/src/PlotUtils.js
index 5731348..06db444 100644
--- a/src/PlotUtils.js
+++ b/src/PlotUtils.js
@@ -95,6 +95,7 @@ export function parseData(data) {
   return [kappa_rho, variance, kappa, rho];
 }
 
+// This function assigns a color to all components in the data based on the classification
 export function assignColor(data) {
   for (var i = 0; i < data.length; i++) {
     if (data[i].classification === "accepted") {
@@ -110,6 +111,7 @@ export function assignColor(data) {
   }
 }
 
+// This function resets the color of a selected component (hover) into that of a non-selected component
 export function resetColors(data, isPie) {
   for (var i = 0; i < data.labels.length; i++) {
     if (data.datasets[0].classification[i] === "accepted") {
@@ -137,6 +139,7 @@ export function resetColors(data, isPie) {
   }
 }
 
+// This function updates the colors on the Pie chart when a component is selected and/or manually classified
 export function updatePieColors(data, index, color, isNew) {
   data.datasets[0].backgroundColor[index] = color;
   if (isNew) {
@@ -144,6 +147,7 @@ export function updatePieColors(data, index, color, isNew) {
   }
 }
 
+// This function updates the colors on the given Scatter chart when a component is selected and/or manually classified
 export function updateScatterColors(data, index, color, isNew) {
   data.datasets[0].pointBackgroundColor[index] = color;
   data.datasets[0].pointBorderColor[index] = color;
@@ -152,6 +156,7 @@ export function updateScatterColors(data, index, color, isNew) {
   }
 }
 
+// This function resets the colors of the given chart back to a non-selected state, and applies the new selection color
 export function resetAndUpdateColors(data, index, isVariance) {
   if (isVariance) {
     resetColors(data, isVariance);
diff --git a/src/Plots.js b/src/Plots.js
index 94aa6ae..17706fc 100644
--- a/src/Plots.js
+++ b/src/Plots.js
@@ -40,6 +40,7 @@ class Plots extends React.Component {
     };
   }
 
+  // Only read data on the first render of the Plots page
   componentDidMount() {
     var compData = this.props.componentData[0];
     assignColor(compData);
@@ -50,6 +51,7 @@ class Plots extends React.Component {
     this.setState({ rho: parsed_data[3] });
   }
 
+  // Update all attributes of a manually classified component on all 4 plots
   handleNewSelection(val) {
     var variance = { ...this.state.variance };
     var componentIndex = variance.labels.indexOf(this.state.selectedLabel);
@@ -73,7 +75,6 @@ class Plots extends React.Component {
     var kappa = { ...this.state.kappa };
     var rho = { ...this.state.rho };
     componentIndex = kappaRho.labels.indexOf(this.state.selectedLabel);
-    console.log(kappaRho);
     kappaRho.datasets[0].classification[componentIndex] = val;
     kappa.datasets[0].classification[componentIndex] = val;
     rho.datasets[0].classification[componentIndex] = val;
@@ -87,9 +88,9 @@ class Plots extends React.Component {
       updateScatterColors(kappa, componentIndex, rejedtecColorHover, true);
       updateScatterColors(rho, componentIndex, rejedtecColorHover, true);
     } else if (val === "ignored") {
-      updateScatterColors(kappaRho, componentIndex, rejedtecColorHover, true);
-      updateScatterColors(kappa, componentIndex, rejedtecColorHover, true);
-      updateScatterColors(rho, componentIndex, rejedtecColorHover, true);
+      updateScatterColors(kappaRho, componentIndex, ignoredColorHover, true);
+      updateScatterColors(kappa, componentIndex, ignoredColorHover, true);
+      updateScatterColors(rho, componentIndex, ignoredColorHover, true);
     }
 
     this.setState({ kappaRho: kappaRho });
@@ -98,6 +99,7 @@ class Plots extends React.Component {
   }
 
   render() {
+    // Handle onClick events on the Pie chart
     const getPieElementAtEvent = (element) => {
       if (!element.length) return;
 
@@ -143,6 +145,7 @@ class Plots extends React.Component {
       }
     };
 
+    // Handle onClick events on the Scatter charts
     const getScatterElementAtEvent = (element) => {
       if (!element.length) return;
 
@@ -170,7 +173,7 @@ class Plots extends React.Component {
       this.setState({ rho: rho });
 
       var variance = { ...this.state.variance };
-      var pieIndex = kappaRho.labels.indexOf(selectedLabel);
+      var pieIndex = variance.labels.indexOf(selectedLabel);
       resetAndUpdateColors(variance, pieIndex, true);
       this.setState({ variance: variance });
 
diff --git a/src/ToggleSwitch.js b/src/ToggleSwitch.js
index 62c4ba6..076324a 100644
--- a/src/ToggleSwitch.js
+++ b/src/ToggleSwitch.js
@@ -19,7 +19,12 @@ const ClickableLabel = ({ title, onChange, id }) => (
 );
 
 const ConcealedRadio = ({ value, selected }) => (
-  <SwitchRadio type="radio" name="switch" checked={selected === value} />
+  <SwitchRadio
+    type="radio"
+    name="switch"
+    checked={selected === value}
+    readOnly
+  />
 );
 
 class ToggleSwitch extends Component {