From 1a214fa8bd101f6d6028e23e8d519f00c471b1f4 Mon Sep 17 00:00:00 2001
From: "Frank T. Bergmann" <frank.thomas.bergmann@gmail.com>
Date: Thu, 5 Sep 2024 15:14:32 +0200
Subject: [PATCH]  - add simple example showing how to run simulateEx

---
 examples/plain/index.html  |   5 +
 examples/plain/simple.html | 302 +++++++++++++++++++++++++++++++++++++
 2 files changed, 307 insertions(+)
 create mode 100644 examples/plain/simple.html
diff --git a/examples/plain/index.html b/examples/plain/index.html
index 4ae31f1..5bab689 100644
--- a/examples/plain/index.html
+++ b/examples/plain/index.html
@@ -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>
diff --git a/examples/plain/simple.html b/examples/plain/simple.html
new file mode 100644
index 0000000..992e62c
--- /dev/null
+++ b/examples/plain/simple.html
@@ -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>
\ No newline at end of file
