Prediction.js

import { render } from '@testing-library/react';
import React from 'react'
import './Prediction.css';
import { BarChart, GlobalBarChart } from './BarCharts';
import PredictionTab from './Tabs';

function TextExplanation(props) {
    const isConsistent = props.data.isConsistent;
    const predictedClass = props.data.predictedClass;
    const predictionColor = isConsistent ? "green" : "red";
    const consistentExplanation = <p>Every property found by the model is consistent with the prediction, see below for more details.</p>
    return (
        <div className="Label">
            <h1 style={{color:predictionColor}}>{predictedClass}</h1>
            <p>
                The model saw a <b>{predictedClass}</b> and it is <b>{isConsistent ? "consistent" : "not consistent"}</b> with the observed properties.
            </p>
            <PropertiesExplanation properties={props.properties} consistent={isConsistent}/>
        </div>
    )
}

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] == "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){
                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 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></>
    )
}

function Prediction(props) {
    const properties = Object.entries(props.data.properties);
    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 label = props.data.predictedClass
    return (
    <div className="Prediction">
        <div className="UpperPrediction">
            <div className="Image">
                <figure>
                    <img 
                    src={img}
                    alt={props.data.predictedClass}
                    />
                    <figcaption>Input image</figcaption>
                </figure>
            </div>
            <TextExplanation data={props.data} properties={properties} />
        </div>
        <PredictionTab  tabList={tabList}/>    
    </div>
    );
}

export default Prediction;