Skip to content
Snippets Groups Projects
Commit 10e670c6 authored by Matthieu BELLUCCI's avatar Matthieu BELLUCCI
Browse files

Added TODO and adjusted viewBox for SVG

parent c25028ad
No related merge requests found
......@@ -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}
......
......@@ -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 {
......
......@@ -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">
......
# 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
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>
);
}
......
......@@ -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
{
"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
......@@ -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);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment