Small bug fixes

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,13 +139,15 @@ 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) {
     data.datasets[0].hoverBackgroundColor[index] = color;
   }
 }
 
+// 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);

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 });
 

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 {