added assertions display

src/Prediction.js

@@ -15,32 +15,41 @@ function TextExplanation(props) {
             <p>
                 The model saw a <b>{predictedClass}</b> and it is <b>{isConsistent ? "consistent" : "not consistent"}</b> with the observed properties.
             </p>
-            {isConsistent ? consistentExplanation : <PropertiesExplanation properties={props.properties}/>}
+            <PropertiesExplanation properties={props.properties} consistent={isConsistent}/>
         </div>
     )
 }
 
-function PropertiesExplanation(props) {
+function PropertiesExplanation(props, isConsistent) {
     var inconsistentProps = [];
+    var consistentProps = [];
     for (let i=0; i<props.properties.length; i++){
         var property = props.properties[i];
-        if (property[0] == "class"){continue ;}
+        if (property[0] == "Global"){continue ;}
         var propertyName = property[0];
         var propertyResults = Object.entries(property[1].results);
         for (let j=0; j<propertyResults.length; j++){
             var currentProp = propertyResults[j];
-            if (currentProp[1].consistency != null && !currentProp[1].consistency){
+            if (currentProp[1].consistency != null){
                 var addedProperty = (currentProp[1].not ? "Not ": "") + propertyName;
+                if (currentProp[1].consistency){
+                    consistentProps.push([addedProperty, currentProp[0]]);
+                }
+                else {
                 inconsistentProps.push([addedProperty, currentProp[0]]);
+                }
             }
         }
 
     }
     return (
-    <p>
-        The following properties are inconsistent:
-        {React.Children.toArray(inconsistentProps.map(x => <li>{x[0]} {x[1]}</li>))}
-    </p>
+    <><p>
+            The following properties were observed:
+            {React.Children.toArray(consistentProps.map(x => <li>{x[0]} {x[1]}</li>))}
+        </p><p>
+                The following properties are inconsistent:
+                {React.Children.toArray(inconsistentProps.map(x => <li>{x[0]} {x[1]}</li>))}
+            </p></>
     )
 }
 
@@ -49,7 +58,7 @@ function Prediction(props) {
     const tabList = properties.map(function(x) {return {name: x[0], content: <BarChart data={x[1]}/>};});
     const allTab = {name: "Global view", content: <GlobalBarChart data={properties}/>};
     tabList.push(allTab);
-    const img = require('./.\\data\\images\\Bassoon\\253.jpg')
+    const img = require('./data/images/Bassoon/253.jpg')
     const label = props.data.predictedClass
     return (
     <div className="Prediction">

src/data_test.json

@@ -4,7 +4,7 @@
     "trueClass": "Trombone",
     "isConsistent": false,
     "properties" : {
-        "Class": {
+        "Global": {
             "thresholdPos": 70,
             "thresholdNeg": 30,
             "functionnal": true,
@@ -15,7 +15,7 @@
                 "Oboe": {"probability": 2, "consistency": null, "not": false}
             }
         },
-        "Mechanism" : {
+        "hasMechanism" : {
             "thresholdPos": 70,
             "thresholdNeg": 30,
             "functionnal": true,
@@ -26,7 +26,7 @@
                 "Keys": {"probability": 10, "consistency": false, "not": true} 
             }
         },
-        "Texture" : {
+        "hasTexture" : {
             "thresholdPos": 70,
             "thresholdNeg": 20,
             "functionnal": false,
@@ -36,7 +36,7 @@
                 "Wood": {"probability": 70, "consistency": false, "not": false}
             }
         },
-        "Mouthpiece" : {
+        "hasMouthpiece" : {
             "thresholdPos" : 60,
             "thresholdNeg": 20,
             "functionnal": true,

src/index.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 
 import Prediction from './Prediction';
 
-const data = require('./data.json')
+const data = require('./data_test.json')
 const root = document.getElementById('root');
 const pred = <Prediction data={data}/>
 ReactDOM.render(pred, root);
\ No newline at end of file