Name: simulation/resources/result.html 
1:
<!DOCTYPE html>
2:
<!--
3:
  Apache License, Version 2.0
4:
  
5:
  Copyright (c) 2013 Juergen Mangler
6:
  
7:
  Licensed under the Apache License, Version 2.0 (the "License");
8:
  you may not use this file except in compliance with the License.
9:
  You may obtain a copy of the License at
10:
  
11:
      http://www.apache.org/licenses/LICENSE-2.0
12:
  
13:
  Unless required by applicable law or agreed to in writing, software
14:
  distributed under the License is distributed on an "AS IS" BASIS,
15:
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16:
  See the License for the specific language governing permissions and
17:
  limitations under the License.
18:
-->
19:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
20:
  <head>
21:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
22:
    <title>Simulation Result</title>
23:
 
24:
    <!-- libs, do not modify -->
25:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
26:
 
27:
    <style type="text/css">
28:
      html, body {
29:
        height:100%;
30:
      }
31:
 
32:
      body {
33:
        background-color:#FFFFFF;
34:
        margin:1.5em;
35:
        padding:0;
36:
        font-family: Verdana, Helvetica, sans-serif;
37:
        font-size: 0.75em;
38:
        color: #000000;
39:
      }
40:
 
41:
      /* Browser Bug, set textarea explicitly */
42:
      textarea, input, select, button {
43:
        font-family: Verdana, Helvetica, sans-serif;
44:
        font-size: 1em;
45:
      }
46:
 
47:
      textarea, input[type=text],  input[type=password] {
48:
        margin-top: 1px;
49:
        margin-bottom: 1px;
50:
        margin-right: 1px;
51:
        border: 1px solid #AAAAAA;
52:
      }  
53:
 
54:
      a:link    { color:#425d73; text-decoration:none; }
55:
      a:visited { color:#425d73; text-decoration:none; }
56:
      a:hover   { color:#000000; text-decoration:underline; }
57:
      a:active  { color:#000000; text-decoration:underline; }
58:
 
59:
      h1 { font-size: 1.5em; }
60:
      pre { font-size: 1.3em; }
61:
 
62:
      #status span { font-weight: bold; }
63:
 
64:
      .hide { display: none; }
65:
    </style>
66:
 
67:
    <script type='text/javascript'>
68:
      function getResult() {
69:
        $.ajax({
70:
          type: "GET",
71:
          url: document.URL + "/result",
72:
          success: function(data) {
73:
            $("#result pre").text(data);
74:
            setTimeout(function(){ getResult(); }, 5000);
75:
          },
76:
          error: function() {
77:
            setTimeout(function(){ getResult(); }, 5000);
78:
          }
79:
        });
80:
      }
81:
      function getExpectations() {
82:
        $.ajax({
83:
          type: "GET",
84:
          url: document.URL + "/expectations",
85:
          success: function(data) {
86:
            $("#expectations pre").text(data);
87:
          },
88:
          error: function() {
89:
            setTimeout(function(){ getExpectations(); }, 5000);
90:
          }
91:
        });
92:
      }
93:
 
94:
      function putQuestion() {
95:
        var result = $('#question .input input').val();
96:
        $.ajax({
97:
          type: "PUT",
98:
          url: document.URL + "/question",
99:
          data: {
100:
            'value': result
101:
          },
102:
          success: function(data) {
103:
            $("#question").toggleClass("hide");
104:
            $('#question .input input').val('');
105:
            setTimeout(function(){getStatus();}, 1000);
106:
          },
107:
          error: function() {
108:
            setTimeout(function(){getStatus();}, 1000);
109:
          }
110:
        });
111:
      }
112:
 
113:
      function getOffset() {
114:
        $.ajax({
115:
          type: "GET",
116:
          url: document.URL + "/offset",
117:
          success: function(data) {
118:
            if (data.trim()== "") {
119:
              $("#status span.offset").text("right now");
120:
            } else {  
121:
              $("#status span.offset").text(data);
122:
            }
123:
            setTimeout(function(){ getOffset(); }, 1000);
124:
          },
125:
          error: function() {
126:
            setTimeout(function(){getOffset();}, 1000);
127:
          }
128:
        });
129:
      }
130:
 
131:
      function getStatus() {
132:
        $.ajax({
133:
          type: "GET",
134:
          url: document.URL + "/status",
135:
          success: function(data) {
136:
            if (data == "running" || data == "finished") {
137:
              $("#status span.status").text(data);
138:
              setTimeout(function(){
139:
                getStatus();
140:
              }, 1000);
141:
            }
142:
            if (data == "asking") {
143:
              $("#status span.status").text("asking for input");
144:
              $.ajax({
145:
                type: "GET",
146:
                url: document.URL + "/question",
147:
                success: function(data) {
148:
                  $("#question .head").text(data.head);
149:
                  $("#question .doc").html(data.doc);
150:
                  $("#question .label").html(data.label);
151:
                  $("#question").toggleClass("hide");
152:
                },
153:
                error: function() {
154:
                  setTimeout(function(){getStatus();}, 1000);
155:
                }
156:
              });
157:
            }
158:
          },
159:
          error: function() {
160:
            setTimeout(function(){getStatus();}, 1000);
161:
          }
162:
        });
163:
      }
164:
 
165:
      $(document).ready(function() {
166:
        getResult();
167:
        getExpectations();
168:
        getStatus();
169:
        getOffset();
170:
      });
171:
    </script>
172:
  </head>
173:
  <body>
174:
    <div id='status'>
175:
      <h1>Status</h1>
176:
      <p>
177:
        <div>The Simulation is <span class='status'>asking for offset</span>.</div>
178:
        <div>The current offset (the point in the future for which the simulation is run) is "<span class='offset'></span>".</div>
179:
      </p>  
180:
    </div>
181:
    <div id='question' class='hide'>
182:
      <h1>Please provide: <span class='head'></span></h1>
183:
      <div class='doc'>
184:
      </div>
185:
      <div class='input'>
186:
        <form onsubmit="putQuestion(); return false;">
187:
          <span class='label'></span>
188:
          <span><input type="text" value=""></input></span>
189:
          <span><button type="submit">send</button></span>
190:
        </form>  
191:
      </div>
192:
    </div>
193:
    <div id='expectations'>
194:
      <h1>Expectations</h1>
195:
      <pre>No expectations available yet.</pre>
196:
    </div>
197:
    <div id='result'>
198:
      <h1>Simulation Result</h1>
199:
      <pre>No simulation result available yet.</pre>
200:
    </div>
201:
    <h1>About / How to Read the Results</h1>
202:
    <p>
203:
      The Simulation combines two techniques:
204:
      <ul>
205:
        <li><strong>Forecast:</strong> calling individual business intelligence functionality
206:
        provided by the gateways behind some tasks, to gather details,
207:
        what they would return given they are called at a certain point in the
208:
        future, with a certain parameterset.</li>
209:
        <li><strong>Simulation:</strong> following the dataflow of a process,
210:
        performing individual forecasts, and accumulate the results given a
211:
        certain set of candidate partner gateways per task.
212:
        </li>
213:
      </ul>  
214:
    </p>  
215:
    <p>
216:
      The <strong>"Expectations"</strong> above, represents an analysis of the static information that
217:
      comes with the process model. It consists of a set of traces and the probability that
218:
      they might occur. Parallel sections are simply serialized, the represent ONE possible
219:
      execution order. For the purpose of simulation, it is not necessary to explore all possible
220:
      traces that might occur, because from the point of view of the dataflow
221:
      there will be no difference.
222:
    </p>  
223:
    <p>
224:
      The <strong>"Simulation Results"</strong> above, show timing and probabilities from a dataflow
225:
      perspective. It has the following properties:
226:
      <ul>
227:
        <li>Script tasks are executed, like they would be during normal execution.</li>
228:
        <li>For tasks, all partner gateways are invoked, and yield a set of possible results, given a certain
229:
        min, avg, or max start time.</li>
230:
        <li>Each partner gateway can yield a range of results, with probabilities that they might occur
231:
        given certain input.</li>
232:
        <li>Each result is used, individually, as it would be during normal execution</li>
233:
        <li>A tree of results is created.</li>
234:
        <li>The leafs of the tree represent on possible outcome for a particular trace.</li>
235:
        <li>Missing information (i.e. dataelements no present at simulation time, because certain gateways yield
236:
        no or unexpected results) has to be entered interactively by the user.</li>
237:
      </ul>  
238:
    </p>  
239:
  </body>
240:
</html>