JuliusHerrmann/simulation_react
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix color bug and added data caching

Browse Source
This commit is contained in:
JuliusHerrmann 2022-01-16 17:58:32 +01:00
parent 6fee7d3b9a
commit 92b9ba9b25
4 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Header/Headerdata.jsx
View File

@ -7,7 +7,7 @@ class HeaderData extends React.Component{
<div>
<h1>Network Epidemic Playground</h1>
<h2>Continuous-time stochastic simulation of epidemic spreading on human-to-human contact networks</h2>
<h3 id="credits">Simulation developed by <a href="https://mosi.uni-saarland.de/people/gerrit/" target="_blank" rel="noreferrer">Gerrit Großmann</a>, website developed by <a href="https://juliusherrmann.de" target="_blank" rel="noreferrer">Julius Herrmann</a></h3>
<h3 id="credits">Simulation developed by <a href="https://mosi.uni-saarland.de/people/gerrit/" target="_blank" rel="noreferrer">Gerrit Großmann</a>, website developed by <a href="https://juliusherrmann.de" target="_blank" rel="noreferrer">Julius Herrmann</a>. Source code on <a href="https://github.com/JuliusHerrmann/NetworkEpidemicPlayground" target="_blank" rel="noreferrer">github</a>.</h3>
</div>
);
}

11
src/Simulation/Simulation.jsx
View File

@ -31,17 +31,12 @@ class Simulation extends React.Component{
var states = selectedModel.getStates();
var initial_distribution = selectedModel.getDistribution();
this.state = {rules: rules, states: states, initial_distribution: initial_distribution, graphData: graphData, horizon: 20.0, selectedNetwork: this.networkObject, selectedModel: this.modelObject, simulationData: undefined,};
}
//we have to run the simulation once in the beginning... sadly componentWillUnmount is deprecated
var newSimulationData = simulate(rules, states, initial_distribution, this.networkObject.getGraph(), 20.0);
UNSAFE_componentWillMount() {
this.recalculate();
this.state = {rules: rules, states: states, initial_distribution: initial_distribution, graphData: graphData, horizon: 20.0, selectedNetwork: this.networkObject, selectedModel: this.modelObject, simulationData: newSimulationData,};
}
//componentDidMount(){
//this.recalculate();
//}
horizonChange(e){
if(e.target.value > 200){
e.target.value = 200

5
src/Simulation/visualizations/Graph.jsx
View File

@ -28,6 +28,7 @@ class Graph extends React.Component {
componentDidUpdate(prevProps, _) {
//only recalculate the layout if graph has changed
if (prevProps.graphData !== this.props.graphData) {
console.log("updated component => error");
this.layoutGraph();
this.setState({step: 0}, () => {
//first crop the animation
@ -36,8 +37,10 @@ class Graph extends React.Component {
this.visualizeOneStep(false);
});
}
}
//we could check here if the simulation should start displaying
componentWillUnmount() {
clearInterval(this.animationId);
}
//layouting algorithm

20
src/Simulation/visualizations/Visual.jsx
View File

@ -9,12 +9,16 @@ class Visual extends React.Component {
this.cy = React.createRef();
this.stepTime = 0;
this.neverPlayed = true;
this.state ={animationDuration: 4, step: 0, playing: false, animationLength: 100, newColors: null, currentView: "graph"};
this.state ={animationDuration: 4, step: 0, playing: false, animationLength: 100, cachedColors: this.props.colors, cachedSimulationData: this.props.simulationData, cachedGraphData: this.props.graphData, currentView: "graph"};
}
componentDidMount() {
this.cropAnimation();
this.setState({newColors: this.props.colors});
this.setState({
cachedColors: this.props.colors,
cachedSimulationData: this.props.simulationData,
cachedGraphData: this.props.graphData
});
}
//remove steps where the animation does not change
@ -43,8 +47,12 @@ class Visual extends React.Component {
this.props.recalculateFuntion().then(() => {
//now crop
this.cropAnimation();
//update the colors for the chart
this.setState({newColors: this.props.colors});
//we now update the cached data
this.setState({
cachedColors: this.props.colors,
cachedSimulationData: this.props.simulationData,
cachedGraphData: this.props.graphData
});
});
}
@ -63,12 +71,12 @@ class Visual extends React.Component {
showGraphOrChart = () => {
if (this.state.currentView === "graph") {
return (
<Graph animationLength={this.state.animationLength} graphData={this.props.graphData} normalize={this.props.normalize} colors={this.props.colors} simulationData={this.props.simulationData.data}/>
<Graph animationLength={this.state.animationLength} graphData={this.state.cachedGraphData} normalize={this.props.normalize} colors={this.state.cachedColors} simulationData={this.state.cachedSimulationData.data}/>
);
} else {
return (
<div id="chart">
<Chart stateCounts={this.props.simulationData.stateCounts} timeSteps={this.props.simulationData.timeSteps} colors={this.state.newColors} animationLength={this.state.animationLength}/>
<Chart stateCounts={this.state.cachedSimulationData.stateCounts} timeSteps={this.state.cachedSimulationData.timeSteps} colors={this.state.cachedColors} animationLength={this.state.animationLength}/>
</div>
);
}