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

some minor changes for demo

parent 0c12ca87
......@@ -145,10 +145,12 @@ class ExperimentView extends Component {
Show Complete Path:
<input type="checkbox" defaultChecked={this.props.completePath} checked={this.props.completePath} onChange={this.props.onChangeCompletePath} />
</div> : ""}
{this.props.beliefs ? <div>
{/* {this.props.beliefs ? */}
<div>
Show Visible area:
<input type="checkbox" defaultChecked={this.state.showVisibles} checked={this.state.showVisibles} onChange={this.onChangeShowVisibles} />
</div> : ""}
</div>
{/* : ""} */}
{this.props.beliefs ? <div>
Show Beliefed Vision:
<input type="checkbox" defaultChecked={this.state.showBeliefedVision} checked={this.state.showBeliefedVision} onChange={this.onChangeShowBeliefedVision} />
......
......@@ -153,6 +153,7 @@ class CanvasGridworld extends PureComponent {
let posY = this.props.pos[0];
const canvas = this.refs[this.props.bgname];
var context = canvas.getContext("2d");
context.lineWidth = 1;
context.strokeStyle = "black";
// context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
......@@ -230,6 +231,7 @@ class CanvasGridworld extends PureComponent {
var posThick = {};
var visited = {};
var maxPos = 0;
for (var i=0; i< aggregates.length; i++) {
visited= {};
var trajObj = aggregates[i];
......@@ -244,6 +246,10 @@ class CanvasGridworld extends PureComponent {
} else {
posThick[posString] = 1
}
if (posThick[posString] > maxPos) {
maxPos = posThick[posString];
}
// }
// visited[posString] = true;
})
......@@ -253,23 +259,35 @@ class CanvasGridworld extends PureComponent {
var trajObj = aggregates[i];
var name = Object.keys(trajObj)[0];
var traj = trajObj[name];
context.strokeStyle = this.getColor(i, aggregates.length); //"red";
context.strokeStyle = "black"; //this.getColor(i, aggregates.length); //"red";
var lastPos;
traj.forEach(function(pos, j) {
context.lineWidth = posThick[JSON.stringify(pos)]/2;
//context.lineWidth = posThick[JSON.stringify(pos)]/2;
context.beginPath();
let centerX = pos[1]*tileSize + tileSize/2;
let centerY = pos[0]*tileSize + tileSize/2;
if (j > 0) {
context.moveTo(lastPos[0], lastPos[1]);
context.lineTo(centerX,centerY);
}
lastPos = [centerX, centerY];
context.stroke();
lastPos = [centerX, centerY];
})
}
for (var stringPos in posThick) {
let pos = JSON.parse(stringPos);
let centerX = pos[1]*tileSize + tileSize/2;
let centerY = pos[0]*tileSize + tileSize/2;
context.beginPath();
context.arc(centerX, centerY,
tileSize*0.2*(2*posThick[JSON.stringify(pos)])/maxPos, 0, 2*Math.PI);
context.fillStyle = 'rgba(0,0,0,' +posThick[JSON.stringify(pos)]/maxPos + ')';
context.fill();
context.stroke();
}
}
updateCanvas() {
......@@ -281,13 +299,14 @@ class CanvasGridworld extends PureComponent {
if (this.props.showPath && !renderAggregates) {
this.renderPath();
}
if (this.props.pos && !renderAggregates) {
this.renderAgent();
}
if (renderAggregates) {
this.renderAggregates();
}
if (this.props.pos ) {
this.renderAgent();
}
};
}
......
......@@ -92,13 +92,14 @@ class StudyReview extends Component {
"C1,C2;C2,C1": "orange",
"C2,C1;C1,C2": "green",
"C2,C1;C2,C1": "purple",
"Study2": "orange",
"Study3": "blue",
"Study3BE": "lightblue",
"Group1": "orange",
"Group2": "blue",
"Group2BE": "lightblue",
"twg": "green",
"tw": "purple",
"tw2": "lightblue" ,
"Sampling":"red"
"Sampling":"red",
"Switching": "black"
}
let curMap = this.state.curMap;
let map = maps[curMap];
......@@ -117,7 +118,7 @@ class StudyReview extends Component {
this.curQP = curStep;
var normalize = this.state.normalize || this.state.dataSrc["twg"] || this.state.dataSrc["tw"];
var normalize = this.state.normalize || this.state.dataSrc["twg"] || this.state.dataSrc["tw"] || this.state.dataSrc["Switching"];
for (var dataSrc in this.state.dataSrc) {
if (this.state.dataSrc[dataSrc]) {
......@@ -226,15 +227,17 @@ class StudyReview extends Component {
orientation="horizontal"
height={80}
items={[
{"title": "Group 1", "color": colors["Study2"]},
{"title": "Group 2", "color": colors["Study3BE"]},
{"title": "Group 1", "color": colors["Group1"]},
{"title": "Group 2", "color": colors["Group2"]},
{"title": "Group 2BE", "color": colors["Study3BE"]},
{"title": "Sampling", "color": colors["Sampling"]},
{"title": "True Belief", "color": colors["twg"]},
{"title": "Unknown", "color": colors["tw"]},
{"title": "Switching", "color": colors["Switching"]},
]}
/>: ""}
<div className={"slider-controls"}>
{bars.length > 0 ? <BarPlot width={width/2} height={height/2} bars={bars} yDomain={normalize ? [0,1]: null}/> : ""}
{bars.length > 0 ? <BarPlot width={width/2} height={height/1.8} bars={bars} yDomain={normalize ? [0,1]: null}/> : ""}
</div>
</div>
</div>
......@@ -251,9 +254,9 @@ class StudyReview extends Component {
<input type="checkbox" defaultChecked={this.state.normalize} checked={this.state.normalize} onChange={this.onChangeCollapse} />
</div>
</div>
<CheckboxList boxes={["Study2","Study3","Study3BE", "Sampling","twg","tw","tw2"]} callback={this.onChangeDataSource} />
<CheckboxList boxes={["Group1","Group2","Group2BE", "Sampling","twg","tw","Switching","tw2"]} callback={this.onChangeDataSource} />
<CustomSlider value={curStep} min={0} max={traj.length-1} onSliderChange={this.onSliderChange}/>
{bars.length > 0 ? <DiscreteColorLegend
{/* {bars.length > 0 ? <DiscreteColorLegend
orientation="horizontal"
height={80}
items={[
......@@ -267,8 +270,8 @@ class StudyReview extends Component {
]}
/>: ""}
<div className={"slider-controls"}>
{bars.length > 0 ? <BarPlot width={width} height={height/4} bars={bars} yDomain={normalize ? [0,1]: null}/> : ""}
</div>
{bars.length > 0 ? <BarPlot width={width} height={height/5} bars={bars} yDomain={normalize ? [0,1]: null}/> : ""}
</div> */}
</div>
)
......
......@@ -463,7 +463,7 @@ export default class Webblocks extends Component {
onChangeCompletePath={this.onChangeCompletePath}
/> : ""}
</Element>
<Element key="gridAgentsBelief" id="gridAgentsBelief">
{/* <Element key="gridAgentsBelief" id="gridAgentsBelief">
{samples ? <ExperimentView conditionName={this.conditionName}
bgname={"bg"}
fgname={"fg"}
......@@ -476,7 +476,7 @@ export default class Webblocks extends Component {
requestVisibles={this.requestVisibles}
visibles={this.state.visibleList[stepNr]}
/> : ""}
</Element>
</Element> */}
<Element key="slider" id="Step">
{agentPositions ? <div onWheel={this.onWheel}>
<CustomSlider value={stepNr} min={0} max={agentPositions.length-1} onSliderChange={this.onSliderChange}/>
......@@ -488,9 +488,9 @@ export default class Webblocks extends Component {
</div>: ""}
</Element>
<Element key="text" id="text">
{/* <Element key="text" id="text">
{samples ? <Text data={samples[stepNr]}/> : ""}
</Element>
</Element> */}
<Element key="Model selection" id="Model selection">
<div className={"flex"}>
<div>
......@@ -523,19 +523,22 @@ export default class Webblocks extends Component {
</div>
</div>
</Element>
<Element key="ratings" id="Negative Log-Likelihood">
<Element key="legend" id="Legend">
<DiscreteColorLegend
orientation="horizontal"
height={50}
items={[
// {"title": "sample", "color": colors["sampling"]},
{"title": "TrueGoalWorld", "color": colors["twg"]},
{"title": "TrueWorld", "color": colors["tw"]},
{"title": "TrueGoal", "color": colors["tg"]},
{"title": "NoAssumption", "color": colors["na"]},
{"title": "Switching", "color": colors["switching"]},
]}
orientation="horizontal"
height={50}
items={[
{"title": "sample", "color": colors["sampling"]},
{"title": "TrueGoalWorld", "color": colors["twg"]},
{"title": "TrueWorld", "color": colors["tw"]},
{"title": "TrueGoal", "color": colors["tg"]},
{"title": "NoAssumption", "color": colors["na"]},
{"title": "Switching", "color": colors["switching"]},
]}
/>
</Element>
<Element key="ratings" id="Negative Log-Likelihood">
{lines.length > 0 ? <FlexibleWidthXYPlot
width={layout["ratings"] ? parseInt(layout["ratings"].w)*colwidth : 600}
height={layout["ratings"] ? parseInt(layout["ratings"].h)*rowHeight: 400}
......@@ -634,9 +637,9 @@ export default class Webblocks extends Component {
options2={participantConditions} selected2={this.conditionName}
onChange2={this.onCondSelection} />
</Element>
<Element key="Action Prediction" id="Action Prediction">
{/* <Element key="Action Prediction" id="Action Prediction">
<ActionPrediction actionPredictions={actionPredictions}/>
</Element>
</Element> */}
<Element key="studyReview" id="studyReview">
{this.state.studyResults ? <StudyReview
width={layout["studyReview"] ? parseInt(layout["studyReview"].w)*colwidth : 600}
......
......@@ -14,6 +14,7 @@
.conList-item {
display: flex;
font-size: 14px;
}
......@@ -127,7 +128,7 @@ ul {
}
.condition-list {
column-width: 350px;
column-width: 330px;
overflow: auto;
}
......@@ -382,7 +383,7 @@ ul {
.rv-discrete-color-legend {
box-sizing: border-box;
overflow-y: auto;
font-size: 18px;
font-size: 13px;
}
.rv-discrete-color-legend.horizontal {
white-space: nowrap;
......
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