Added TODO and adjusted viewBox for SVG

src/BarChart.js

@@ -12,6 +12,15 @@ let barHeight = 50;
 let barPadding = 2;
 let widthScale = d => d * 5;
 
+function getTextWidth(text, font) {
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+
+  context.font = font || getComputedStyle(document.body).font;
+
+  return context.measureText(text).width;
+}
+
 function chooseColour(value) {
   if (value > 70) {
     return "green";
@@ -26,7 +35,6 @@ function BarGroup(props) {
   let width = widthScale(props.state.value);
   let yMid = barHeight * 0.5;
   const barColour = chooseColour(props.state.value)
-  console.log(props)
   return (
     <g className="bar-group" transform={`translate(0, ${props.state.y})`}>
       <rect
@@ -37,7 +45,7 @@ function BarGroup(props) {
       />
       <text
         className="value-label"
-        x={width - 6}
+        x={width + 6}
         y={yMid}
         alignmentBaseline="middle"
       >
@@ -62,6 +70,21 @@ class BarChart extends Component {
     this.state = {
       data: this.handleData(props.data)
     };
+    let max_name_width = 10;
+    for (let i = 0; i < this.state.data.length; i++){
+      let text_width = getTextWidth(this.state.data[i].name);
+      if (text_width > max_name_width){
+        max_name_width = text_width;
+      }
+    }
+    const svg_width = widthScale(100) + max_name_width;
+    const svg_height = barHeight*this.state.data.length + 10;
+    this.state = {
+      data: this.state.data,
+      max_name_width: max_name_width,
+      svg_width: svg_width,
+      svg_height: svg_height,
+    };
 
 /*     this.handleAdd = this.handleAdd.bind(this);
     this.handleRemove = this.handleRemove.bind(this);
@@ -87,13 +110,15 @@ class BarChart extends Component {
   };
 
   handleData(arr) {
-    let numItems = arr.length
-    let data = Array(numItems)
-    for (let i = 0; i < arr.length; i++) {
+    var items = Object.keys(arr).map((key) => [key, arr[key]]);
+    items.sort((first, second) => second[1] - first[1]);
+    let numItems = items.length;
+    let data = Array(numItems);
+    for (let i = 0; i < items.length; i++) {
         let item = {
             id: "id-" + i,
-            value: arr[i],
-            name: "Item" + i,
+            value: items[i][1],
+            name: items[i][0],
         };
         data[i] = item
     }
@@ -119,8 +144,8 @@ class BarChart extends Component {
   render() {
     return (
       <div>
-        <svg width="800" height="2200">
-          <g className="chart" transform="translate(100,10)">
+        <svg width="100%" height={this.state.svg_height} viewBox={"0 0 " + this.state.svg_width + " "+this.state.svg_height} preserveAspectRatio="xMinYMin">
+          <g className="chart" transform={"translate(" + this.state.max_name_width.toString() + ",10)"}>
             <NodeGroup
               data={this.state.data}
               keyAccessor={d => d.name}

src/Prediction.css

@@ -13,12 +13,19 @@
     outline: solid;
     align-items: center;
     justify-content: space-around;
+    gap: 10px;
+}
+.LowerPrediction{
+    color: pink;
+    justify-content: flex-start;
+    outline: solid;
 }
-
 .Label {
     display:flex;
-    color: red;
+    flex-direction: column;
+    align-items: center;
     outline: solid;
+    overflow-wrap: break-word;
 }
 
 .Image {

src/Prediction.js

@@ -3,12 +3,12 @@ import './Prediction.css';
 import BarChart from './BarChart';
 import PredictionTab from './Tabs';
 function Prediction(props) {
-
+    console.log(props.data);
     const bar = <BarChart data={props.arr} barColour="#AAA"/>
-    const tabList = 
-    const tabList1 = [{name: "Title 1", content: bar,}, 
-    {name: "Title 2", content: <BarChart data={props.arr}/>}, 
-    {name: "Title 3", content: <BarChart data={props.arr}/>}];
+    const properties = Object.entries(props.data.prediction.properties);
+    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">
@@ -20,7 +20,11 @@ function Prediction(props) {
                 />
             </div>
             <div className="Label">
-                <h1>{props.data.prediction.predicted_class}</h1>
+                <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>
         </div>
         <div className="LowerPrediction">

src/TODO.md

+# TODO
+* Add description to prediction.
+  * Which class, is it consistent ?
+  * If consistent, which properties matched ?
+  * If not, which properties were an issue ?
+  * For each property, sentence per target class, sentence to explain the threshold...
+* Interface with Python and Ontology
+  * Extract information to json file from Python
+  * Read and use information in JS
+* Display which target class / property were an issue with color coding or some other form (warning sign ?).
+* Propose two displays, one with tabs, the other without tabs.
+* Create an index page, with all the images from validation dataset, if the prediction is correct or consistent and be able to click it to go to the main explanation interface.
+* Write explanation generation pattern for each property in the ontology and use it to generate explanation.
\ No newline at end of file

src/Tabs.js

 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import 'react-tabs/style/react-tabs.css';
+import React from 'react';
 
 function PredictionTab(props) {
-    let tabList = props.tabList
-
+    let tabList = props.tabList;
     return (
         <Tabs>
             <TabList>
-                {tabList.map(tab => (
+                {React.Children.toArray(tabList.map(tab => (
                     <Tab>{tab.name}</Tab>
-                ))}
+                )))}
             </TabList>
-            {tabList.map(tab => (
+            {React.Children.toArray(tabList.map(tab => (
                 <TabPanel>
                     {tab.content}
                 </TabPanel>
-            ))}
+            )))}
         </Tabs>
     );
 }

src/barchart.css

@@ -8,19 +8,25 @@ body {
   #menu button {
     margin: 10px;
   }
-  
+.charts{
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  justify-items: flex-start;
+  outline: solid;
+  color: black
+}
   .bar-group .name-label {
     text-anchor: end;
     font-weight: 300;
     font-size: 0.7em;
-    fill: green;
   }
   
   .bar-group .value-label {
-    text-anchor: end;
-    fill: green;
+    text-anchor: start;
     font-weight: 400;
     font-size: 0.7em;
+
   }
   
   .bar-group rect {
@@ -34,5 +40,4 @@ body {
   
   .bar-group:hover .name-label {
     font-weight: 400;
-  }
-  
\ No newline at end of file
+  }
\ No newline at end of file

src/data.json

 {
     "prediction" : {
         "predicted_class": "Trombone",
-        "class": {"Trombone": 80, "Trumpet": 18, "Oboe": 2},
-        "hasMechanism" : {"Slide": 50, "Pistons": 30, "Keys": 10, "Nothing": 10},
-        "hasTexture" : {"Brass" : 60, "Wood": 30, "Nothing": 10}
+        "properties" : {
+            "class": {"Trombone": 80, "Trumpet": 18, "Oboe": 2},
+            "hasMechanism" : {"Slide": 50, "Pistons": 30, "Keys": 10, "Nothing": 10},
+            "hasTexture" : {"Brass" : 60, "Wood": 30, "Nothing": 10}
+            }
     }
 
 }
\ No newline at end of file

src/index.js

@@ -5,9 +5,10 @@ import Image from './Image';
 import BarChart from './BarChart';
 import Tabs from './Tabs';
 import Prediction from './Prediction';
-import data from './data.json';
+//import data from './data.json';
 
-const element = <h1>Bonjour, monde</h1>;
+const data = require('./data.json')
+//const element = <h1>Bonjour, monde</h1>;
 const root = document.getElementById('root');
 let arr = [5, 10, 2, 3, 0, 100, 50];
 //ReactDOM.render(<BarChart data={arr}/>, root);