Skip to content

Commit

Permalink
- add simple example showing how to run simulateEx
Browse files Browse the repository at this point in the history
  • Loading branch information
@fbergmann
fbergmann committed Sep 5, 2024
1 parent b32337f commit 1a214fa
Show file tree
Hide file tree
Showing 2 changed files with 307 additions and 0 deletions.
5 changes: 5 additions & 0 deletions examples/plain/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,11 @@

<h1>COPASI.js Test</h1>

<div style="float: right;">
<a href="#"> Default Version </a> |
<a href="simple.html"> Simple Version </a>
</div>

<div class="panel-group">
<ul class="nav nav-tabs" id="mytab">
<li class="active"><a href="#fileTab">File</a></li>
Expand Down
302 changes: 302 additions & 0 deletions examples/plain/simple.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,302 @@
<html lang="en">

<head>
<script src="copasi.js" type="text/javascript"></script>
<script src="copasijs.js" type="text/javascript"> </script>
<script src='https://cdn.plot.ly/plotly-2.27.0.min.js'></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<script>
var copasi = null;
createCpsModule().then(module => {
copasi = new COPASI(module);
console.log(copasi.version);
});


$(document).ready(function () {

$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
});

document.getElementById('inputfile')
.addEventListener('change', function () {
var fr = new FileReader();
fr.onload = function () {
var modelString = fr.result;
document.getElementById("cps").value = modelString;
loadIntoCOPASI();
}
fr.readAsText(this.files[0]);

});

});



function clearForm() {
document.getElementById("cps").value = "";
document.getElementById("yaml").value = "{}";
document.getElementById('inputfile').value = "";
document.getElementById("data").innerHTML = "";
document.getElementById("chart").innerHTML = "";
};

function clearResults() {
document.getElementById("data").innerHTML = "";
document.getElementById("chart").innerHTML = "";
}

function runSimpleSimulation() {
var autoStepSize = document.getElementById("autoStepSize").checked;
var timeStart = parseFloat(document.getElementById("startTime").value);
var timeEnd = parseFloat(document.getElementById("endTime").value);

if (autoStepSize) {
var result = copasi.simulateYaml({
"problem": {
"AutomaticStepSize": true,
"Duration": timeEnd,
"OutputStartTime": timeStart
}
});
loadPlotFromResult(result);
return;
}

var numPoints = parseInt(document.getElementById("numPoints").value);

var result = copasi.simulateEx(timeStart, timeEnd, numPoints);
loadPlotFromResult(result);
}

function loadPlotFromResult(result) {

if (typeof result === 'string') {
result = JSON.parse(result);
}

clearResults();

// dump data
document.getElementById("data").innerHTML = JSON.stringify(result);

// use highcharts to display data
var data = [];
for (var i = 1; i < result.num_variables; i++) {
data.push({
name: result.columns[i][0],
x: result.columns[0],
y: result.columns[i],
type: "scatter",
name: result.titles[i]
});
}

Plotly.newPlot('chart', data);
}

function runSimulation() {
if (copasi == null) {
return;
}

clearResults();

var result = copasi.simulateYaml(document.getElementById("yaml").value);

loadPlotFromResult(result);

}

function loadIntoCOPASI() {
if (copasi == null) {
return;
}
var info = copasi.loadModel(document.getElementById("cps").value);
document.getElementById("modelName").innerHTML = "none";
if (info['status'] != "success") {
alert("Error loading model: " + info['messages']);
return;
}
document.getElementById("modelName").innerHTML = info['model']['name'];

}

function loadUrl() {
loadUrlFrom(document.getElementById("inputUrl").value);
};

function loadUrlFrom(url) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'text';
xhr.onload = function () {
if (xhr.readyState === xhr.DONE) {
if (xhr.status === 200) {
document.getElementById("cps").value = xhr.responseText;
loadIntoCOPASI();
}
}
};
xhr.send(null);
};

</script>

<body>
<div class="container-fluid">

<h1>COPASI.js Test</h1>

<div style="float: right;">
<a href="index.html"> Default Version </a> |
<a href="#"> Simple Version </a>
</div>

<div class="panel-group">
<ul class="nav nav-tabs" id="mytab">
<li class="active"><a href="#fileTab">File</a></li>
<li><a href="#urlTab">Url</a></li>
<li><a href="#examples">Examples</a></li>
</ul>

<div class="tab-content">
<div id="fileTab" class="tab-pane fade in active">
<div class="form-group">
<label class="form-label" for="inputfile">Upload SBML / COPASI file</label>
<input type="file" class="form-control" name="inputfile" id="inputfile">
</div>
</div>
<div id="urlTab" class="tab-pane fade">
<div class="form-group">
<label class="form-label" for="inputUrl">Specify URL (that is not access restricted)</label>
<input type="text" class="form-control" name="inputUrl" id="inputUrl"
value="https://raw.githubusercontent.com/copasi/COPASI/develop/TestSuite/distribution/brusselator.cps">
<a class="btn btn-sm" onclick="loadUrl()">Load</a>
</div>
</div>
<div id="examples" class="tab-pane fade">
<div>
<small>Some examples</small>
</div>
<div>
<a class="btn btn-sm"
onclick='loadUrlFrom("https://raw.githubusercontent.com/copasi/COPASI/develop/TestSuite/distribution/brusselator.cps")'>Brusselator</a>
|
<a class="btn btn-sm"
onclick='loadUrlFrom("https://raw.githubusercontent.com/copasi/COPASI/develop/TestSuite/distribution/MAPK-HF96-layout.cps")'>MAPK-HF96-layout.cps
(this one takes a while)</a>
|
<a class="btn btn-sm"
onclick='loadUrlFrom("https://raw.githubusercontent.com/copasi/COPASI/develop/TestSuite/distribution/DimericMWC-stiff.cps")'>DimericMWC-stiff.cps</a>
</div>
</div>
</div>
</div>

<p class="lead">
Current Model: <span id="modelName">none</span>
</p>

<div id="chart"></div>

<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-sm-2">
<label for="startTime">Start Time:</label>
<input type="number" class="form-control" id="startTime" placeholder="Enter start time" value="0">
</div>
<div class="col-sm-2">
<label for="endTime">End Time:</label>
<input type="number" class="form-control" id="endTime" placeholder="Enter end time" value="10">
</div>
<div class="col-sm-2">
<label for="numPoints">Number of Points:</label>
<input type="number" class="form-control" id="numPoints" placeholder="Enter number of points" value="101">
</div>
<div class="col-sm-3">
<label for="simulate"> &nbsp;</label>
<button class="btn btn-primary btn-block" onclick="runSimpleSimulation()">Simulate</button>
</div>
<div class="col-sm-2">
<label for="reset"> &nbsp;</label>
<button class="btn btn-block" onclick="copasi.reset()">Reset</button>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<label for="autoStepSize">Automatic Step Size:</label>
<input type="checkbox" id="autoStepSize">
</div>
</div>
</div>
</div>

<button onclick="alert(copasi.version)">Get Version</button>
<button onclick="clearForm()">Clear</button>

<div>
<a class="btn btn-sm" data-toggle="collapse" href="#cps_form" role="button" aria-expanded="false"
aria-controls="cps_form">show cps</a>
<a class="btn btn-sm" data-toggle="collapse" href="#yaml_form" role="button" aria-expanded="false"
aria-controls="yaml_form">show yaml</a>
<a class="btn btn-sm" data-toggle="collapse" href="#data_form" role="button" aria-expanded="false"
aria-controls="data_form">show data</a>
<div class="form-group collapse" id="cps_form">
<label for="cps">CPS Model:</label>
<textarea id="cps" class="form-control" rows="8"></textarea>
</div>

<div class="form-group collapse" id="yaml_form">
<label for="yaml">Processing: </label>
<small> Changes for processing in yaml for the problem:
<pre>{"problem":{"Duration": 100, "StepNumber": 100, "StepSize": 0.1}}</pre> or
<pre>{"method": {"name": "Stochastic (Gibson + Bruck)"}}</pre> or for changes of
initialvalues in the form of display names. So:
<ul>
<li>
<pre>[A]_0</pre> for initial concentration of species A
</li>
<li>
<pre>Values[t].InitialValue</pre> for initial value of parameter t
</li>
<li>
<pre>(r1).k</pre> for the value of k of reaction r1.
</li>
</ul>
<pre>{"initial_values": {"[A]_0": 10.0, "Values[t].InitialValue": 0.1, "(r1).k": 0.1}}</pre>
</small>
<textarea id="yaml" class="form-control" rows="8">{}</textarea>
</div>

<div class="form-group collapse" id="data_form">
<label for="data">Data Yaml:</label>
<textarea id="data" class="form-control" rows="8"></textarea>
</div>


</div>

<p></p>

</div>

</div>
</body>


</html>

0 comments on commit 1a214fa

Please sign in to comment.