updates and polish
This commit is contained in:
JuliusHerrmann
parent
064c7948cf
commit
831c3f9db9
@ -7,6 +7,7 @@ class Custom extends Model {
|
||||
[["S", "I", 0.5]],
|
||||
20, 0.05);
|
||||
this.state = {input: ""};
|
||||
this.defaultColors = ["#0fa75f", "#ff225b", "#03aaf9", "#fffb00", "#cc0080"];
|
||||
}
|
||||
|
||||
textFieldChanged = (e) => {
|
||||
@ -34,13 +35,14 @@ class Custom extends Model {
|
||||
return null;
|
||||
}
|
||||
|
||||
let newStates = [];
|
||||
let newRules = [];
|
||||
//regex to match states
|
||||
cleaned.forEach((element) => {
|
||||
element = element.split(",");
|
||||
//test if we have a simple or complex rule
|
||||
if (element.length === 3) {
|
||||
newRules.push(this.parseValidRule(element));
|
||||
newRules.push(this.parseValidRule(element, newStates));
|
||||
} else {
|
||||
//check if there are an equal number of states left and right
|
||||
if (element.length % 2 === 0) {
|
||||
@ -51,7 +53,7 @@ class Custom extends Model {
|
||||
return;
|
||||
}
|
||||
//this rule is correct, we can continue
|
||||
newRules.push(this.parseValidRule(element));
|
||||
newRules.push(this.parseValidRule(element, newStates));
|
||||
}
|
||||
});
|
||||
if (newRules.length === 0) {
|
||||
@ -59,26 +61,33 @@ class Custom extends Model {
|
||||
}
|
||||
|
||||
//parse states
|
||||
let newStates = [];
|
||||
|
||||
//only add states that are not duplicates
|
||||
for (var i = 0; i < newRules.length; i++) {
|
||||
for (var j = 0; j < newRules[i].length - 1; j++) {
|
||||
let currentState = newRules[i][j];
|
||||
if (!newStates.includes(currentState)) {
|
||||
newStates.push(currentState);
|
||||
}
|
||||
}
|
||||
}
|
||||
//for (var i = 0; i < newRules.length; i++) {
|
||||
//for (var j = 0; j < newRules[i].length - 1; j++) {
|
||||
//let currentState = newRules[i][j];
|
||||
//if (!newStates.includes(currentState)) {
|
||||
//newStates.push(currentState);
|
||||
//}
|
||||
//}
|
||||
//}
|
||||
|
||||
//convert states to states with distribution and color
|
||||
newStates = newStates.map((x) => [x, 1/newStates.length, "#ffffff"]);
|
||||
console.log(newStates);
|
||||
//newStates = newStates.map((x) => [x, 1/newStates.length, "#ffffff"]);
|
||||
let i = -1;
|
||||
newStates = newStates.map((x) => {
|
||||
i++;
|
||||
if(i < 5) {
|
||||
return [x, 1/newStates.length, this.defaultColors[i]];
|
||||
}
|
||||
return [x, 1/newStates.length, "#ffffff"];
|
||||
});
|
||||
console.log(newStates);
|
||||
|
||||
|
||||
return {rules: newRules, states: newStates};
|
||||
}
|
||||
|
||||
parseValidRule(rule) {
|
||||
parseValidRule(rule, newStates) {
|
||||
//filter states
|
||||
let subString = rule.slice(0, rule.length - 1);
|
||||
|
||||
@ -88,16 +97,37 @@ class Custom extends Model {
|
||||
//match probability
|
||||
re = /([0-9]*[.])?[0-9]+/g
|
||||
let probability = rule[rule.length - 1].match(re);
|
||||
return [...subString, Number(probability)];
|
||||
//add states
|
||||
subString.forEach((e) => {
|
||||
if(!newStates.includes(e)) {
|
||||
newStates.push(e);
|
||||
}
|
||||
})
|
||||
//spontaneous rule
|
||||
if(subString.length === 2) {
|
||||
return [...subString, Number(probability)];
|
||||
}
|
||||
//complex (edge) rule
|
||||
let leftSide = [subString.slice(0, subString.length / 2)];
|
||||
let rightSide = [subString.slice(subString.length / 2, subString.length)];
|
||||
let out = [leftSide, rightSide, Number(probability)];
|
||||
console.log(out)
|
||||
return out;
|
||||
//let out = [0,0,0];
|
||||
//out[0] = (leftSide);
|
||||
//out[1] = (rightSide);
|
||||
//out[2] = (Number(probability));
|
||||
//return out;
|
||||
}
|
||||
|
||||
//override render
|
||||
render() {
|
||||
return(<div>
|
||||
<h3>Enter the rules like: <code>("S","I",0.1), (("I","I"),("S","I"),0.3)</code></h3>
|
||||
<h3>Enter the rules like: <code>("S","I",0.1), (("I","S"),("I","I"),0.3)</code></h3>
|
||||
<textarea className="CustomInput CustomModel" type="text" onChange={this.textFieldChanged}
|
||||
value={this.state.input} required pattern="[[(]'?[\w\d]+'?,'?[\w\d]+'?,([0-9]*[.])?[0-9]+[)\]][\s\t]*|[([][([]('?[\w\d]+'?,)+'?[\w\d]+'?[\])],[([]('?[\w\d]+'?,)+'?[\w\d]+'?[\])],([0-9]*[.])?[0-9]+[\])][\s\t]*"
|
||||
placeholder='("S","I",0.1), (("I","I"),("S","I"),0.3)'/>
|
||||
placeholder='("S","I",0.1), (("I","S"),("I","I"),0.3)'/>
|
||||
<h3 id="selectDistributionHeader">Initial Distribution</h3>
|
||||
{this.buildSlidersDistribution()}
|
||||
</div>);
|
||||
}
|
||||
|
||||
@ -3,8 +3,8 @@ import Model from "./Model";
|
||||
class SIModel extends Model {
|
||||
constructor() {
|
||||
super("SI Model",
|
||||
[["S", 0.97, "#0FA75F"], ["I", 0.03, "#ff225b"]],
|
||||
[["S", "I", 0.5]],
|
||||
[["S", 0.9, "#0FA75F"], ["I", 0.1, "#ff225b"]],
|
||||
[[["S", "I"],["I", "I"], 0.5]],
|
||||
20, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,10 +2,9 @@ import Network from "./Network";
|
||||
|
||||
class KarateClass extends Network {
|
||||
constructor(){
|
||||
//super("Karate",
|
||||
//[[2,1], [3,1], [4,1], [5,1]]);
|
||||
super("Karate",
|
||||
[[2, 1],[3, 1], [3, 2],[4 ,1], [4, 2], [4, 3],[5, 1],[6, 1],[7, 1], [7, 5], [7, 6],[8, 1], [8, 2], [8, 3], [8, 4],[9, 1], [9, 3],[10, 3],[11, 1], [11, 5], [11, 6],[12, 1],[13, 1], [13, 4],[14, 1], [14, 2], [14, 3], [14, 4],[17, 6], [17, 7],[18, 1], [18, 2],[20, 1], [20, 2],[22, 1], [22, 2],[26, 24], [26, 25],[28, 3], [28, 24], [28, 25],[29, 3],[30, 24], [30, 27],[31, 2], [31, 9],[32, 1], [32, 25], [32, 26], [32, 29],[33, 3], [33, 9], [33, 15], [33, 16], [33, 19], [33, 21], [33, 23], [33, 24], [33, 30], [33, 31], [33, 32], [34, 9], [34, 10], [34, 14], [34, 15], [34, 16], [34, 19], [34, 20], [34, 21], [34, 23], [34, 24], [34, 27], [34, 28], [34, 29], [34, 30], [34, 31], [34, 32], [34, 33]]
|
||||
[[1, 0], [2, 0], [2, 1], [3, 0], [3, 1], [3, 2], [4, 0], [5, 0], [6, 0], [6, 4], [6, 5], [7, 0], [7, 1], [7, 2], [7, 3], [8, 0], [8, 2], [9, 2], [10, 0], [10, 4], [10, 5], [11, 0], [12, 0], [12, 3], [13, 0], [13, 1], [13, 2], [13, 3], [16, 5], [16, 6], [17, 0], [17, 1], [19, 0], [19, 1], [21, 0], [21, 1], [25, 23], [25, 24], [27, 2], [27, 23], [27, 24], [28, 2], [29, 23], [29, 26], [30, 1], [30, 8], [31, 0], [31, 24], [31, 25], [31, 28], [32, 2], [32, 8], [32, 14], [32, 15], [32, 18], [32, 20], [32, 22], [32, 23], [32, 29], [32, 30], [32, 31], [33, 8], [33, 9], [33, 13], [33, 14], [33, 15], [33, 18], [33, 19], [33, 20], [33, 22], [33, 23], [33, 26], [33, 27], [33, 28], [33, 29], [33, 30], [33, 31], [33, 32]]
|
||||
//[[2, 1],[3, 1], [3, 2],[4 ,1], [4, 2], [4, 3],[5, 1],[6, 1],[7, 1], [7, 5], [7, 6],[8, 1], [8, 2], [8, 3], [8, 4],[9, 1], [9, 3],[10, 3],[11, 1], [11, 5], [11, 6],[12, 1],[13, 1], [13, 4],[14, 1], [14, 2], [14, 3], [14, 4],[17, 6], [17, 7],[18, 1], [18, 2],[20, 1], [20, 2],[22, 1], [22, 2],[26, 24], [26, 25],[28, 3], [28, 24], [28, 25],[29, 3],[30, 24], [30, 27],[31, 2], [31, 9],[32, 1], [32, 25], [32, 26], [32, 29],[33, 3], [33, 9], [33, 15], [33, 16], [33, 19], [33, 21], [33, 23], [33, 24], [33, 30], [33, 31], [33, 32], [34, 9], [34, 10], [34, 14], [34, 15], [34, 16], [34, 19], [34, 20], [34, 21], [34, 23], [34, 24], [34, 27], [34, 28], [34, 29], [34, 30], [34, 31], [34, 32], [34, 33]]
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -7,17 +7,21 @@ import GIF from '@dhdbstjr98/gif.js';
|
||||
class GIFGenerator extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {step: 0, duration: 5, loop: true, background: "#ffffff"};
|
||||
this.state = {step: 0, duration: 5, loop: true, background: "#ffffff", rendering: false};
|
||||
this.animationId = 0;
|
||||
}
|
||||
|
||||
|
||||
generateGIF = () => {
|
||||
if(this.state.rendering) {
|
||||
return;
|
||||
}
|
||||
//clean input
|
||||
if(!Math.abs(Number(this.state.duration)) > 0) {
|
||||
console.log("Only numbers are allowed in duration!");
|
||||
return;
|
||||
}
|
||||
this.setState({rendering: true});
|
||||
this.setState({duration: Math.abs(this.state.duration)});
|
||||
var gif = new GIF( {
|
||||
workers: 2,
|
||||
@ -28,6 +32,7 @@ class GIFGenerator extends React.Component {
|
||||
|
||||
//set download trigger
|
||||
gif.on('finished', function(blob) {
|
||||
this.setState({rendering: false});
|
||||
const link = document.createElement('a');
|
||||
// create a blobURI pointing to our Blob
|
||||
link.href = URL.createObjectURL(blob);
|
||||
@ -38,7 +43,7 @@ class GIFGenerator extends React.Component {
|
||||
link.remove();
|
||||
// in case the Blob uses a lot of memory
|
||||
setTimeout(() => URL.revokeObjectURL(link.href), 7000);
|
||||
});
|
||||
}.bind(this));
|
||||
|
||||
let stepBefore = this.state.step;
|
||||
|
||||
@ -70,6 +75,13 @@ class GIFGenerator extends React.Component {
|
||||
{copy: true, delay: this.state.duration / this.props.animationLength});
|
||||
}
|
||||
|
||||
getButtonText = () => {
|
||||
if(this.state.rendering) {
|
||||
return "Please Wait ...";
|
||||
}
|
||||
return "Generate GIF 📸";
|
||||
}
|
||||
|
||||
//onChange={(e) => this.setState({loop: e.state.value})}>
|
||||
render() {
|
||||
return (
|
||||
@ -95,7 +107,7 @@ class GIFGenerator extends React.Component {
|
||||
onChange={(e) =>
|
||||
this.setState({loop: e.target.checked})}/>
|
||||
</div>
|
||||
<button className="popupButton" onClick={this.generateGIF} >Generate GIF 📸</button>
|
||||
<button className="popupButton" onClick={this.generateGIF} >{this.getButtonText()}</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -47,13 +47,15 @@ function get_next_state(current_labels){
|
||||
//iterate over edges
|
||||
for(var edge in graph_as_edgelist){
|
||||
edge = graph_as_edgelist[edge];
|
||||
let node1 = edge;
|
||||
let node2 = edge;
|
||||
let node1 = edge[0];
|
||||
let node2 = edge[1];
|
||||
if(node2 === 0) {
|
||||
}
|
||||
let current_state1 = current_labels[node1];
|
||||
let current_state2 = current_labels[node2];
|
||||
for(var currentRule in rules){
|
||||
currentRule = rules[currentRule];
|
||||
if(typeof currentRule[0] == typeof ""){
|
||||
if(typeof currentRule[0] == typeof ""){
|
||||
//is spont. rule
|
||||
continue
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user