feat: enable new model info in preditct page (#383)

* feat: enable new model info in preditc page

* refactor styles and data

* fix: indents and semicolons

src/react/components/pages/predict/predictModelInfo.scss

@@ -0,0 +1,10 @@
+.model-info-container {
+    margin-top: .5rem;
+    margin-bottom: 1rem;
+    .model-info-item {
+        .title {
+            margin-right: 0.5rem;
+            font-weight: 500;
+        }
+    }
+}

src/react/components/pages/predict/predictModelInfo.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import React from 'react'
+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>
+            </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="value" >{modelId}</span>
+            </div>
+            <div className="model-info-item">
+                <span className="title" >Document type confidence:</span>
+                <span className="value" >{getPercentage(docTypeConfidence)}%</span>
+            </div>
+        </div>
+    )
+}

src/react/components/pages/predict/predictPage.tsx

@@ -33,6 +33,7 @@ import { constants } from "../../../../common/constants";
 import { getPrimaryGreenTheme, getPrimaryWhiteTheme,
          getGreenWithWhiteBackgroundTheme } from "../../../../common/themes";
 import axios from "axios";
+import { IAnalyzeModelInfo } from './predictResult';
 
 pdfjsLib.GlobalWorkerOptions.workerSrc = constants.pdfjsWorkerSrc(pdfjsLib.version);
 const cMapUrl = constants.pdfjsCMapUrl(pdfjsLib.version);
@@ -168,6 +169,7 @@ export default class PredictPage extends React.Component<IPredictPageProps, IPre
         const urlInputDisabled: boolean = !this.state.predictionLoaded || this.state.isFetching;
         const predictDisabled: boolean = !this.state.predictionLoaded || !this.state.file;
         const predictions = this.getPredictionsFromAnalyzeResult(this.state.analyzeResult);
+        const modelInfo: IAnalyzeModelInfo = this.getAnalyzeModelInfo(this.state.analyzeResult);
         const fetchDisabled: boolean =
             !this.state.predictionLoaded ||
             this.state.isFetching ||
@@ -318,6 +320,7 @@ export default class PredictPage extends React.Component<IPredictPageProps, IPre
                                 <PredictResult
                                     predictions={predictions}
                                     analyzeResult={this.state.analyzeResult}
+                                    analyzeModelInfo={modelInfo}
                                     page={this.state.currPage}
                                     tags={this.props.project.tags}
                                     downloadResultLabel={this.state.fileLabel}
@@ -894,6 +897,11 @@ export default class PredictPage extends React.Component<IPredictPageProps, IPre
         return _.get(analyzeResult, "analyzeResult.documentResults[0].fields", {});
     }
 
+    private getAnalyzeModelInfo(analyzeResult) {
+        const { modelId, docType, docTypeConfidence } = _.get(analyzeResult, "analyzeResult.documentResults[0]", {})
+        return { modelId, docType, docTypeConfidence };
+    }
+
     private getOcrFromAnalyzeResult(analyzeResult: any) {
         return _.get(analyzeResult, "analyzeResult.readResults", []);
     }

src/react/components/pages/predict/predictResult.tsx

@@ -6,10 +6,18 @@ import { ITag } from "../../../../models/applicationState";
 import "./predictResult.scss";
 import { getPrimaryGreenTheme } from "../../../../common/themes";
 import { PrimaryButton } from "@fluentui/react";
+import PredictModelInfo from './predictModelInfo';
+
+export interface IAnalyzeModelInfo {
+    docType: string,
+    modelId: string,
+    docTypeConfidence: number,
+}
 
 export interface IPredictResultProps {
     predictions: { [key: string]: any };
     analyzeResult: {};
+    analyzeModelInfo: IAnalyzeModelInfo;
     page: number;
     tags: ITag[];
     downloadResultLabel: string;
@@ -22,7 +30,7 @@ export interface IPredictResultState { }
 
 export default class PredictResult extends React.Component<IPredictResultProps, IPredictResultState> {
     public render() {
-        const { tags, predictions } = this.props;
+        const { tags, predictions, analyzeModelInfo } = this.props;
         const tagsDisplayOrder = tags.map((tag) => tag.name);
         for (const name of Object.keys(predictions)) {
             const prediction = predictions[name];
@@ -47,6 +55,7 @@ export default class PredictResult extends React.Component<IPredictResultProps,
                         onClick={this.triggerDownload}
                     />
                 </div>
+                <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>