Commit 054af027 authored by Jan Pöppel's avatar Jan Pöppel
Browse files

improved studyView

parent 1a83fbf7
import React, { Component } from 'react';
class CheckboxList extends Component {
constructor (props, context) {
super(props, context);
let checkState = {};
for (var i=0; i<props.boxes.length; i++) {
checkState[props.boxes[i]] = false;
}
this.state = {
checkState: checkState
}
this.updateCheckState = this.updateCheckState.bind(this);
}
updateCheckState(e) {
let checkName = e.target.id.slice(0,-5);
let newCheckState = Object.assign({}, this.state.checkState);
newCheckState[checkName] = !newCheckState[checkName];
this.setState({
checkState: newCheckState
})
this.props.callback(checkName, newCheckState[checkName]);
}
render() {
let checkNames = this.props.boxes;
let checkBoxes = checkNames.map(el => {
return (
<div>
{el}
<input id={el + "Check"} type="checkbox" defaultChecked={this.state.checkState[el]} checked={this.state.checkState[el]} onChange={this.updateCheckState} />
</div>
)
})
return(
<div className={"flex"}>
{checkBoxes}
</div>
)
}
}
export default CheckboxList;
\ No newline at end of file
......@@ -161,7 +161,7 @@ function mapStateToPropsBars(state, ownProps) {
export class BarPlot extends PureComponent {
render() {
let {width, height, bars} = this.props;
let {width, height, bars, yDomain} = this.props;
return(
<FlexibleWidthXYPlot
......@@ -170,7 +170,7 @@ export class BarPlot extends PureComponent {
dontCheckIfEmpty={true}
margin={{"left": 60, "right": 100}}
xType={"ordinal"}
// yDomain={[0,1]}
yDomain={yDomain ? yDomain : null}
>
{bars}
<Borders style={{
......
......@@ -6,6 +6,7 @@ import { BarPlot } from './plots';
import {VerticalBarSeries, DiscreteColorLegend} from "react-vis";
import ListSelection from './listSelection';
import continuousColorLegend from 'react-vis/dist/legends/continuous-color-legend';
import CheckboxList from './checkboxList';
class StudyReview extends Component {
......@@ -21,10 +22,13 @@ class StudyReview extends Component {
this.state = {
curMap: startMap,
collapse: false,
stepNr: 0
stepNr: 0,
normalize: false,
dataSrc: {}
}
this.onChangeCollapse = this.onChangeCollapse.bind(this);
this.onChangeDataSource = this.onChangeDataSource.bind(this);
this.onSliderChange = this.onSliderChange.bind(this);
this.onMapSelect = this.onMapSelect.bind(this);
this.prevQP = this.prevQP.bind(this);
......@@ -35,7 +39,7 @@ class StudyReview extends Component {
onChangeCollapse() {
this.setState({
collapse: !this.state.collapse
normalize: !this.state.normalize
})
}
......@@ -49,7 +53,7 @@ class StudyReview extends Component {
}
prevQP() {
let answersC = this.props.answers["collapsed"]
let answersC = this.props.answers["Sampling"]
let curQP = this.state.stepNr;
while (curQP > 0) {
curQP -= 1;
......@@ -61,7 +65,7 @@ class StudyReview extends Component {
}
nextQP() {
let answersC = this.props.answers["collapsed"]
let answersC = this.props.answers["Sampling"]
let curQP = this.state.stepNr;
while (curQP < this.props.trajs[this.state.curMap].length) {
curQP += 1;
......@@ -72,12 +76,28 @@ class StudyReview extends Component {
}
}
onChangeDataSource(name, newState) {
// let dataSource = e.target.id.slice(0,-5);
let newDataSrc = Object.assign({}, this.state.dataSrc);
newDataSrc[name] = newState;
this.setState({
dataSrc: newDataSrc
})
}
render() {
let {maps, trajs, answers, width, height } = this.props;
const colors = {"C1,C2;C1,C2": "blue",
"C1,C2;C2,C1": "orange",
"C2,C1;C1,C2": "green",
"C2,C1;C2,C1": "purple",
"Study2": "blue",
"Study3": "orange",
"Study3No": "black",
"twg": "green",
"tw": "purple",
"Sampling":"red"
}
let curMap = this.state.curMap;
let map = maps[curMap];
......@@ -89,42 +109,61 @@ class StudyReview extends Component {
let bars = [];
let barsControlled = [];
let answersC = answers["collapsed"];
let answersI = answers["individual"];
let answersC_Controlled = answers["collapsed_control"];
let answersI_Controlled = answers["individual_control"];
const answerOrder = ["R", "B", "O", "Y", "U", "Yes", "No"];
console.log("answersC: ", answersC[curMap][curStep])
this.curQP = curStep;
if (answersC[curMap][curStep]) {
this.curQP = curStep;
} else {
this.curQP = null;
}
var normalize = this.state.normalize || this.state.dataSrc["twg"] || this.state.dataSrc["tw"];
let data = [];
if (answersC[curMap][this.curQP]) {
for (var i=0;i<answerOrder.length; i++) {
var answer = answerOrder[i];
if (answer in answersC[curMap][this.curQP]) {
data.push({"x": answer, "y": answersC[curMap][this.curQP][answer]})
} else {
data.push({"x": answer, "y": 0})
for (var dataSrc in this.state.dataSrc) {
if (this.state.dataSrc[dataSrc]) {
let vals = answers[dataSrc]
let data = [];
if (vals[curMap][this.curQP]) {
var norm = 0;
var normBelief = 0;
if (normalize) {
for (var i=0;i<answerOrder.length; i++) {
if (vals[curMap][this.curQP][answerOrder[i]]) {
if (answerOrder[i] === "Yes" || answerOrder[i] === "No") {
normBelief += vals[curMap][this.curQP][answerOrder[i]];
} else {
norm += vals[curMap][this.curQP][answerOrder[i]];
}
}
}
} else {
norm = 1;
normBelief = 1;
}
for (var i=0;i<answerOrder.length; i++) {
var answer = answerOrder[i];
if (answer in vals[curMap][this.curQP]) {
if (answer === "Yes" || answer === "No") {
data.push({"x": answer, "y": vals[curMap][this.curQP][answer]/normBelief})
} else {
data.push({"x": answer, "y": vals[curMap][this.curQP][answer]/norm})
}
}
}
}
}
}
console.log("Data: ", data)
if (data) {
bars.push(<VerticalBarSeries key={"collapsed"}
data={data}
color={"red"} />)
if (data.length > 0) {
bars.push(<VerticalBarSeries key={dataSrc}
data={data}
color={colors[dataSrc]} />)
}
}
}
data = [];
var data = [];
if (answersC_Controlled[curMap][this.curQP]) {
for (var i=0;i<answerOrder.length; i++) {
var answer = answerOrder[i];
......@@ -134,35 +173,12 @@ class StudyReview extends Component {
}
}
if (data) {
if (data.length > 0) {
barsControlled.push(<VerticalBarSeries key={"collapsed"}
data={data}
color={"red"} />)
}
console.log("answersI: ", answersI)
let barsI = [];
for (var variant in answersI) {
console.log("variant1: ", variant)
if (variant === "null") {
continue;
}
let data = [];
if (answersI[variant][curMap][this.curQP]) {
for (var i=0;i<answerOrder.length; i++) {
var answer = answerOrder[i];
if (answer in answersI[variant][curMap][this.curQP]) {
data.push({"x": answer, "y": answersI[variant][curMap][this.curQP][answer]})
}
}
}
if (data) {
barsI.push(<VerticalBarSeries key={variant}
data={data}
color={colors[variant]} />)
}
}
let barsIControlled = [];
for (var variant in answersI_Controlled) {
......@@ -179,7 +195,7 @@ class StudyReview extends Component {
}
}
}
if (data) {
if (data.length > 0) {
barsIControlled.push(<VerticalBarSeries key={variant}
data={data}
color={colors[variant]} />)
......@@ -202,40 +218,40 @@ class StudyReview extends Component {
<div>
<h3>Controlled:</h3>
<div className={"slider-controls"}>
{data.length > 0 ? <BarPlot width={width/4} height={height/4} bars={barsControlled}/> : ""}
{data.length > 0 ? <BarPlot width={width/4} height={height/4} bars={barsIControlled}/> : ""}
{barsIControlled.length > 0 ? <BarPlot width={width/4} height={height/4} bars={barsControlled}/> : ""}
{barsIControlled.length > 0 ? <BarPlot width={width/4} height={height/4} bars={barsIControlled}/> : ""}
</div>
</div>
</div>
<div className={"flex"}>
<div>
<ListSelection name={"Select Map"} options1={Object.keys(answers["collapsed"])} onChange1={this.onMapSelect} selected1={Object.keys(answers["collapsed"])[0]} />
<ListSelection name={"Select Map"} options1={Object.keys(answers["Sampling"])} onChange1={this.onMapSelect} selected1={Object.keys(answers["Sampling"])[0]} />
</div>
<div>
<button onClick={this.prevQP} >{"<"}</button>
<button onClick={this.nextQP} >{">"}</button>
</div>
<div>
Collapse Conditions:
<input type="checkbox" defaultChecked={this.state.collapse} checked={this.state.collapse} onChange={this.onChangeCollapse} />
Normalize:
<input type="checkbox" defaultChecked={this.state.normalize} checked={this.state.normalize} onChange={this.onChangeCollapse} />
</div>
</div>
<CheckboxList boxes={["Study2","Study3","Study3No", "Sampling","twg","tw"]} callback={this.onChangeDataSource} />
<CustomSlider value={curStep} min={0} max={traj.length-1} onSliderChange={this.onSliderChange}/>
{data.length > 0 ? <DiscreteColorLegend
{bars.length > 0 ? <DiscreteColorLegend
orientation="horizontal"
height={80}
items={[
// {"title": "sample", "color": colors["sampling"]},
{"title": "Collapsed", "color": "red"},
{"title": "C1,C2;C1,C2", "color": colors["C1,C2;C1,C2"]},
{"title": "C1,C2;C2,C1", "color": colors["C1,C2;C2,C1"]},
{"title": "C2,C1;C1,C2", "color": colors["C2,C1;C1,C2"]},
{"title": "C2,C1;C2,C1", "color": colors["C2,C1;C2,C1"]},
{"title": "Study2", "color": colors["Study2"]},
{"title": "Study3", "color": colors["Study3"]},
{"title": "Study3No", "color": colors["Study3No"]},
{"title": "Sampling", "color": colors["Sampling"]},
{"title": "twg", "color": colors["twg"]},
{"title": "tw", "color": colors["tw"]},
]}
/>: ""}
<div className={"slider-controls"}>
{data.length > 0 ? <BarPlot width={width/2} height={height/4} bars={bars}/> : ""}
{data.length > 0 ? <BarPlot width={width/2} height={height/4} bars={barsI}/> : ""}
{bars.length > 0 ? <BarPlot width={width} height={height/4} bars={bars} yDomain={normalize ? [0,1]: null}/> : ""}
</div>
</div>
......
Supports Markdown
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