diff --git a/src/Prediction.js b/src/Prediction.js index 737002394bc3c9676caf5dedd63dd4c9c0c254a8..2cddfac1bcfde30799c0907afdf563945285ce76 100644 --- a/src/Prediction.js +++ b/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"> diff --git a/src/data_test.json b/src/data_test.json index bdb12f6b51cf0c3cd8a6e1f6156148890833d2e0..37d765ac195c76c8697569a67b640d31dc1b81d8 100644 --- a/src/data_test.json +++ b/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, diff --git a/src/index.js b/src/index.js index 24e7e88e02894f3fa0e7ea322acbb9f48eb6d54e..57e80fee7d39246055b93e0f7da342271175f6e2 100644 --- a/src/index.js +++ b/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