From 162a7660cfe32b72c4954a147269c5d2b7f55a08 Mon Sep 17 00:00:00 2001
From: stew-ro <60453211+stew-ro@users.noreply.github.com>
Date: Fri, 17 Jul 2020 17:01:43 -0700
Subject: [PATCH] fix: make analyzed result UI key-values same as json
 key-values (#409)

* fix: make analyzed result UI key-values same as json key-values

* refactor: use percent for confidence results

* refactor: replace percents with json result decimal values
---
 .../pages/predict/predictModelInfo.tsx        | 24 ++++---------------
 .../pages/predict/predictResult.tsx           |  4 ++--
 .../components/pages/train/trainChart.tsx     |  3 +--
 .../components/pages/train/trainRecord.tsx    |  2 +-
 .../components/pages/train/trainTable.tsx     |  2 +-
 5 files changed, 10 insertions(+), 25 deletions(-)

diff --git a/src/react/components/pages/predict/predictModelInfo.tsx b/src/react/components/pages/predict/predictModelInfo.tsx
index 7554ce1b..2011badf 100644
--- a/src/react/components/pages/predict/predictModelInfo.tsx
+++ b/src/react/components/pages/predict/predictModelInfo.tsx
@@ -6,33 +6,19 @@ import './predictModelInfo.scss';
 
 export default function PredictModelInfo({ modelInfo }) {
     const { docType, modelId, docTypeConfidence } = modelInfo;
-    const getPercentage = (value: number) => {
-        const percents = 100 * value;
-        return percents % 1 !== 0 ? percents.toFixed(2) : percents;
-    };
-    const modeType = docType.split(":")[0];
-    const modelName = docType.split(":")[1];
-
     return (
         <div className="model-info-container">
             <div className="model-info-item">
-                <span className="title" >Model type:</span>
-                <span className="value" >{modeType}</span>
+                <span className="title" >docType:</span>
+                <span className="value" >{docType}</span>
             </div>
-            {
-                modelName !== modelId &&
-                <div className="model-info-item">
-                    <span className="title" >Model name:</span>
-                    <span className="value" >{modelName}</span>
-                </div>
-            }
             <div className="model-info-item">
-                <span className="title" >Model id:</span>
+                <span className="title" >modelId:</span>
                 <span className="value" >{modelId}</span>
             </div>
             <div className="model-info-item">
-                <span className="title" >Document type confidence:</span>
-                <span className="value" >{getPercentage(docTypeConfidence)}%</span>
+                <span className="title" >docTypeConfidence:</span>
+                <span className="value" >{docTypeConfidence}</span>
             </div>
         </div>
     )
diff --git a/src/react/components/pages/predict/predictResult.tsx b/src/react/components/pages/predict/predictResult.tsx
index b28ea883..05b751c3 100644
--- a/src/react/components/pages/predict/predictResult.tsx
+++ b/src/react/components/pages/predict/predictResult.tsx
@@ -58,7 +58,7 @@ export default class PredictResult extends React.Component<IPredictResultProps,
                 <PredictModelInfo modelInfo={analyzeModelInfo} />
                 <div className="prediction-field-header">
                     <h6 className="prediction-field-header-field"> Page # / Field name / Value</h6>
-                    <h6 className="prediction-field-header-confidence"> Confidence %</h6>
+                    <h6 className="prediction-field-header-confidence"> Confidence</h6>
                 </div>
                 <div className="prediction-header-clear"></div>
 
@@ -118,7 +118,7 @@ export default class PredictResult extends React.Component<IPredictResultProps,
                     }
                 </div>
                 <div className={"predictiontag-confidence"}>
-                    <span>{this.toPercentage(item.confidence)}</span>
+                    <span>{item.confidence}</span>
                 </div>
             </div>
         );
diff --git a/src/react/components/pages/train/trainChart.tsx b/src/react/components/pages/train/trainChart.tsx
index 32803ab4..f91fc2a7 100644
--- a/src/react/components/pages/train/trainChart.tsx
+++ b/src/react/components/pages/train/trainChart.tsx
@@ -58,13 +58,12 @@ export default class TrainChart
         return Object
             .entries(this.props.accuracies)
             .map((entry) =>
-                entry[0] + " (" + this.toPercent(entry[1]) + "%)");
+                entry[0] + " (" + entry[1] + ")");
     }
 
     private getData = (): string[] => {
         return Object
             .values(this.props.accuracies)
-            .map((val) => (val * 100).toFixed(2));
     }
 
     private getColor = (): string[] => {
diff --git a/src/react/components/pages/train/trainRecord.tsx b/src/react/components/pages/train/trainRecord.tsx
index 7f369c2d..ea1a48c5 100644
--- a/src/react/components/pages/train/trainRecord.tsx
+++ b/src/react/components/pages/train/trainRecord.tsx
@@ -41,7 +41,7 @@ export default class TrainRecord extends React.Component<ITrainRecordProps, ITra
                     </p>
                     <h6>Average accuracy:</h6>
                     <p>
-                        {(this.props.averageAccuracy * 100).toFixed(2) + "%"}
+                        {this.props.averageAccuracy}
                     </p>
                     <div className="accuracy-info">
                         <a href="https://aka.ms/form-recognizer/docs/train" target="_blank" rel="noopener noreferrer">
diff --git a/src/react/components/pages/train/trainTable.tsx b/src/react/components/pages/train/trainTable.tsx
index 24d8dc8f..ade73eb7 100644
--- a/src/react/components/pages/train/trainTable.tsx
+++ b/src/react/components/pages/train/trainTable.tsx
@@ -39,7 +39,7 @@ export default class TrainTable
                                 Object.entries(this.props.accuracies).map((entry) =>
                                     <tr key={entry[0]}>
                                         <td>{entry[0]}</td>
-                                        <td className="text-right">{(entry[1] * 100).toFixed(2) + "%"}</td>
+                                        <td className="text-right">{entry[1]}</td>
                                     </tr>)
                             }
                         </tbody>