Added TextExplanation component

src/Prediction.js

@@ -2,13 +2,28 @@ import { render } from '@testing-library/react';
 import './Prediction.css';
 import BarChart from './BarChart';
 import PredictionTab from './Tabs';
+
+function TextExplanation(props) {
+    const isConsistent = props.data.isConsistent;
+    const predictedClass = props.data.predictedClass;
+    const predictionColor = isConsistent ? "green" : "red";
+    return (
+        <div className="Label">
+            <h1 style={{color:predictionColor}}>{predictedClass}</h1>
+            <p>
+                The model saw a {predictedClass} and it is {isConsistent ? "consistent" : "not consistent"} with the expert knowledge.
+            </p>
+            <p>
+                ADD PROPERTIES EXPLANATIONS
+            </p>
+        </div>
+    )
+}
+
 function Prediction(props) {
-    console.log(props.data);
-    const bar = <BarChart data={props.arr} barColour="#AAA"/>
     const properties = Object.entries(props.data.prediction.properties);
+    console.log(properties[0][1])
     const tabList = properties.map(function(x) {return {name: x[0], content: <BarChart data={x[1]}/>};});
-    //return (tabList[1][0]["content"]);
-    const color = "green";
     return (
 
     <div className="Prediction">
@@ -19,13 +34,7 @@ function Prediction(props) {
                 alt={props.label}
                 />
             </div>
-            <div className="Label">
-                <h1 style={{color:color}}>{props.data.prediction.predicted_class}</h1>
-                <p>
-                    The model saw a PREDICTED_CLASS and it is CONSISTENCY with the expert knowledge.
-                    ----------------- ---------------- ---------------------- -------------------
-                </p>
-            </div>
+            <TextExplanation data={props.data.prediction} />
         </div>
         <div className="LowerPrediction">
             <PredictionTab  tabList={tabList}/>