R2 score UI changes

* R2 -> R^2 label update on datasets and results pages * best results bar on datasets page for regression changed to max at 1 Ref #319
EpistasisLab · Feb 24, 2021 · a94fca7 · a94fca7
1 parent 4b237de
commit a94fca7
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 16 deletions.
diff --git a/lab/webapp/src/components/Datasets/components/DatasetCard/components/BestResult/index.jsx b/lab/webapp/src/components/Datasets/components/DatasetCard/components/BestResult/index.jsx
@@ -29,6 +29,8 @@ import React from 'react';
 import { Segment, Header, Progress } from 'semantic-ui-react';
 import { formatAlgorithm } from '../../../../../../utils/formatter';
 
+
+
 function BestResult({ result, hasMetadata }) {
   const getNoResultMessage = () => {
     if(!hasMetadata) {
@@ -41,6 +43,37 @@ function BestResult({ result, hasMetadata }) {
   const getResultLink = () => `/#/results/${result._id}`;
 
   const getPercent = () => (result.score * 100).toFixed(2);
+
+  const getValue = () => (result.score).toFixed(2);
+
+  const renderProgressBar = (result) => {
+    switch(result.prediction_type) {
+      case 'classification':
+        return (
+          <Progress
+            inverted
+            progress
+            percent={getPercent()}
+            className="accuracy-score"
+            label="Balanced Accuracy"
+          />
+        );
+      case 'regression':
+        return (
+          <Progress
+            inverted
+            progress='value'
+            value={getValue()}
+            total='1'
+            className="accuracy-score"
+            label="R^2"
+          />
+        );
+      default:
+        return;
+    }
+  }
+
 
   if(!result) {
     return (
@@ -50,13 +83,6 @@ function BestResult({ result, hasMetadata }) {
     );
   }
 
-  // add label for best results
-  var label = "";
-  if (result.prediction_type == "classification") {
-    label = "Balanced Accuracy";
-  } else if (result.prediction_type == "regression") {
-    label = "R2";
-  }
 
   return (
     <Segment
@@ -72,15 +98,9 @@ function BestResult({ result, hasMetadata }) {
           <span>{`#${result._id}`}</span>
         </Header.Subheader>
       </Header>
-      <Progress
-        inverted
-        progress
-        percent={getPercent()}
-        className="accuracy-score"
-        label={label}
-      />
+      { renderProgressBar(result) }
     </Segment>
   );
 }
 
-export default BestResult;
+export default BestResult;
diff --git a/lab/webapp/src/components/Results/index.jsx b/lab/webapp/src/components/Results/index.jsx
@@ -364,7 +364,7 @@ class Results extends Component {
                   scores={experiment.data.scores}
                 />
                 <Score
-                  scoreName="R2"
+                  scoreName="R^2"
                   scoreValueList={R2List}
                   chartKey="R2"
                   chartColor="#55D6BE"