debugging_environment.xml 72 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267
  1. <?xml version="1.0" ?>
  2. <diagram name="DebuggingEnvironment" author="Simon Van Mierlo">
  3. <description>
  4. Debugging environment for Dynamic Structure DEVS in HTML + JS (d3/w2ui).
  5. </description>
  6. <inport name="ui_input"/>
  7. <inport name="simulation_input"/>
  8. <outport name="output"/>
  9. <class name="MainApp" default="True">
  10. <relationships>
  11. <association name="toolbar" class="DebuggingToolbar" min="1" max="1" />
  12. <association name="visualizer" class="Visualizer" min="1" max="1" />
  13. </relationships>
  14. <method name="MainApp">
  15. <body>
  16. <![CDATA[
  17. ]]>
  18. </body>
  19. </method>
  20. <scxml initial="creating_toolbar">
  21. <state id="creating_toolbar">
  22. <onentry>
  23. <raise event="create_instance" scope="cd">
  24. <parameter expr="'toolbar'" />
  25. <parameter expr="'DebuggingToolbar'" />
  26. </raise>
  27. </onentry>
  28. <transition target="../creating_visualizer" event="instance_created">
  29. <parameter name="association_name" type="string"/>
  30. <raise event="start_instance" scope="cd">
  31. <parameter expr="association_name"/>
  32. </raise>
  33. </transition>
  34. </state>
  35. <state id="creating_visualizer">
  36. <onentry>
  37. <raise event="create_instance" scope="cd">
  38. <parameter expr="'visualizer'" />
  39. <parameter expr="'Visualizer'" />
  40. </raise>
  41. </onentry>
  42. <transition target="../running" event="instance_created">
  43. <parameter name="association_name" type="string"/>
  44. <raise event="start_instance" scope="cd">
  45. <parameter expr="association_name"/>
  46. </raise>
  47. </transition>
  48. </state>
  49. <state id="running" />
  50. </scxml>
  51. </class>
  52. <class name="DebuggingToolbar">
  53. <relationships>
  54. <association name="parent" class="MainApp" min="1" max="1" />
  55. <association name="buttons" class="Button" />
  56. </relationships>
  57. <method name="DebuggingToolbar">
  58. <body>
  59. <![CDATA[
  60. this.visualized_simulator = "NETLOGO"
  61. this.parameters = {};
  62. this.buttons = {};
  63. this.curr_parameter = null;
  64. this.button_counter = 0;
  65. if (this.visualized_simulator == "NETLOGO") {
  66. this.buttons_to_create = [{parent: this, description: 'Simulate', icon: 'simulate', command: 'simulate'},
  67. {parent: this, description: 'Realtime Simulate', icon: 'simulatert', command: 'realtime', parameter_needed: 'realtime_scale'},
  68. {parent: this, description: 'Realtime Scale', html: 'input size="1" value="1.0" style="border: 1px solid silver"', default: 1.0, parameter: 'realtime_scale'},
  69. {parent: this, description: 'Pause', icon: 'pause', command: 'pause'},
  70. {parent: this, description: 'Big Step', icon: 'bigstep', command: 'big_step'},
  71. {parent: this, description: 'Reset', icon: 'reset', command: 'reset'},
  72. {parent: this, description: 'Add Breakpoint', icon: 'breakpoint', action: function() {breakpoint_dialog.dialog( "open" );}}];
  73. } else {
  74. this.buttons_to_create = [{parent: this, description: 'Simulate', icon: 'simulate', command: 'simulate'},
  75. {parent: this, description: 'Realtime Simulate', icon: 'simulatert', command: 'realtime', parameter_needed: 'realtime_scale'},
  76. {parent: this, description: 'Realtime Scale', html: 'input size="1" value="1.0" style="border: 1px solid silver"', default: 1.0, parameter: 'realtime_scale'},
  77. {parent: this, description: 'Pause', icon: 'pause', command: 'pause'},
  78. {parent: this, description: 'Big Step', icon: 'bigstep', command: 'big_step'},
  79. {parent: this, description: 'Small Step', icon: 'smallstep', command: 'small_step'},
  80. {parent: this, description: 'Reset', icon: 'reset', command: 'reset'},
  81. {parent: this, description: 'Add Breakpoint', icon: 'breakpoint', action: function() {breakpoint_dialog.dialog( "open" );}}];
  82. }
  83. this.tb = ui.create_toolbar('DebuggingToolbar');
  84. ]]>
  85. </body>
  86. </method>
  87. <scxml initial="initializing">
  88. <state id="initializing" initial="check">
  89. <state id="check">
  90. <transition target="../creating_button" cond="this.buttons_to_create.length &gt; 0">
  91. <script>
  92. if ('parameter' in this.buttons_to_create[0]) {
  93. this.curr_parameter = this.buttons_to_create[0]['parameter']
  94. }
  95. </script>
  96. <raise event="create_instance" scope="cd">
  97. <parameter expr="'buttons'" />
  98. <parameter expr="'Button'" />
  99. <parameter expr="'button' + this.button_counter" />
  100. <parameter expr="this.tb" />
  101. <parameter expr="this.buttons_to_create.shift()" />
  102. </raise>
  103. </transition>
  104. <transition target="../running" cond="this.buttons_to_create.length == 0" />
  105. </state>
  106. <state id="creating_button">
  107. <transition target="../check" event="instance_created">
  108. <parameter name="association_name" type="string"/>
  109. <raise event="start_instance" scope="cd">
  110. <parameter expr="association_name"/>
  111. </raise>
  112. <script>
  113. if (this.curr_parameter) {
  114. this.parameters[this.curr_parameter] = association_name;
  115. this.curr_parameter = null;
  116. }
  117. this.buttons['button' + this.button_counter] = association_name;
  118. this.button_counter += 1;
  119. </script>
  120. </transition>
  121. </state>
  122. <state id="running">
  123. <transition target="../getting_parameter" event="get_parameter">
  124. <parameter name="the_parameter" />
  125. <parameter name="respond_id" />
  126. <raise event="get_parameter" target="this.parameters[the_parameter]" />
  127. <script>
  128. this.respond_id = respond_id;
  129. </script>
  130. </transition>
  131. </state>
  132. <state id="getting_parameter">
  133. <transition target="../running" event="parameter_reply">
  134. <parameter name="parameter_value" />
  135. <raise event="parameter_reply" target="this.buttons[this.respond_id]">
  136. <parameter expr="parameter_value" />
  137. </raise>
  138. </transition>
  139. </state>
  140. </state>
  141. </scxml>
  142. </class>
  143. <class name="Button">
  144. <inport name="button_ui_input" />
  145. <relationships>
  146. <association name="parent" class="DebuggingToolbar" min="1" max="1" />
  147. </relationships>
  148. <method name="Button">
  149. <parameter name="button_id" />
  150. <parameter name="toolbar" />
  151. <parameter name="parameters" />
  152. <body>
  153. <![CDATA[
  154. this.button_id = button_id;
  155. this.toolbar = toolbar;
  156. this.action = null;
  157. this.command = null;
  158. if ('parameter_needed' in parameters) {
  159. this.parameter_needed = parameters['parameter_needed'];
  160. } else {
  161. this.parameter_needed = null;
  162. }
  163. if ('html' in parameters) {
  164. var the_html = parameters['html']
  165. the_html += ' id="' + this.button_id + '_input" onchange="ui.parameter_changed(\'' + button_id + '\');"'
  166. this.btn = ui.create_tb_element(this.button_id, '<' + the_html + ' />', parameters['default'], this.toolbar, this.controller, this.inports['button_ui_input']);
  167. } else if ('action' in parameters) {
  168. this.action = parameters['action'];
  169. this.btn = ui.create_button(this.button_id, parameters['description'], parameters['icon'], this.toolbar, this.controller, this.inports['button_ui_input']);
  170. } else {
  171. this.command = parameters['command'];
  172. this.btn = ui.create_button(this.button_id, parameters['description'], parameters['icon'], this.toolbar, this.controller, this.inports['button_ui_input']);
  173. }
  174. ]]>
  175. </body>
  176. </method>
  177. <scxml initial="listening">
  178. <state id="listening">
  179. <transition target="." event="mouse_press" port="button_ui_input" cond="this.action">
  180. <script>
  181. this.action();
  182. </script>
  183. </transition>
  184. <transition target="." event="mouse_press" port="button_ui_input" cond="this.parameter_needed == null &amp;&amp; this.command">
  185. <raise event="debugging_command" port="output">
  186. <parameter expr="this.command" />
  187. </raise>
  188. </transition>
  189. <transition target="../getting_parameter" event="mouse_press" port="button_ui_input" cond="this.parameter_needed != null &amp;&amp; this.command">
  190. <raise event="get_parameter" target="'parent'">
  191. <parameter expr="this.parameter_needed" />
  192. <parameter expr="this.button_id" />
  193. </raise>
  194. </transition>
  195. <transition target="." event="get_parameter">
  196. <raise event="parameter_reply" target="'parent'">
  197. <parameter expr="this.btn.value" />
  198. </raise>
  199. </transition>
  200. </state>
  201. <state id="getting_parameter">
  202. <transition target="../listening" event="parameter_reply">
  203. <parameter name="the_parameter" />
  204. <script>
  205. var the_parameters = {};
  206. the_parameters[this.parameter_needed] = the_parameter;
  207. </script>
  208. <raise event="debugging_command" port="output">
  209. <parameter expr="this.command" />
  210. <parameter expr="the_parameters" />
  211. </raise>
  212. </transition>
  213. </state>
  214. </scxml>
  215. </class>
  216. <class name="Visualizer">
  217. <relationships>
  218. <association name="parent" class="MainApp" min="1" max="1" />
  219. </relationships>
  220. <method name="Visualizer">
  221. <body>
  222. this.visualized_simulator = "NETLOGO"
  223. the_controller = this.controller;
  224. this.simulation_info = d3.select("body").append("div")
  225. .attr("class", "simulationInfo")
  226. .style("margin", "5px")
  227. .style("display", "block");
  228. this.simulation_time = this.simulation_info.append("span")
  229. .append("text")
  230. .text("SIMULATION TIME: (not started)")
  231. .style("float", "left");
  232. this.simulation_steps = this.simulation_info.append("span")
  233. .style("margin", "5px")
  234. .style("float", "left")
  235. .attr("class", "invisibleInfo")
  236. .attr("id", "smallStepInfo");
  237. this.simulation_steps.selectAll("div").data([0,1,2,3,4,5,6,7])
  238. .enter()
  239. .append("div")
  240. .attr("id", function(d) {return "smallStepInfo_" + d})
  241. .attr("class", "smallStepInfo inactive")
  242. .style("transform", function(d) {return "translate(" + d * 5 + "px, -4px) rotate(45deg)"});
  243. d3.select("body").append("br");
  244. this.breakpoint_info = d3.select("body").append("div")
  245. .attr("class", "breakpointInfo")
  246. .style("margin", "5px")
  247. .style("display", "block");
  248. this.breakpoint_text = this.breakpoint_info.append("span")
  249. .append("text")
  250. .text("BREAKPOINTS: ")
  251. .style("float", "left");
  252. this.breakpoint_infos = this.breakpoint_info.append("span")
  253. .style("margin", "5px")
  254. .style("float", "left")
  255. .attr("id", "breakpointInfos");
  256. this.breakpoints = [];
  257. this.port_connections = [];
  258. this.loc_to_item = {};
  259. event_to_inject = undefined;
  260. god_event_to_process = undefined;
  261. // TODO: this is domain-specific!
  262. this.particle_id_to_item = {};
  263. var margin = {top: 50, right: 0, bottom: 0, left: 0},
  264. width = 960 - margin.right - margin.left,
  265. height = 1024 - margin.top - margin.bottom;
  266. this.node_id = 0;
  267. if (this.visualized_simulator == "NETLOGO") {
  268. this.data = [{'name': '&lt;root&gt;', 'children': [], 'loc': '', 'id': this.node_id}];
  269. this.node_id++;
  270. } else {
  271. this.data = [];
  272. }
  273. this.tree = d3.layout.tree()
  274. .size([width, height]);
  275. this.diagonal = d3.svg.diagonal();
  276. this.port_connection_diagonal = d3.svg.diagonal().projection(function(d) {return [d.x, d.y]});
  277. this.parent_svg = d3.select("body").append("svg")
  278. .attr("width", width + margin.right + margin.left)
  279. .attr("height", height + margin.top + margin.bottom);
  280. var defs = this.parent_svg.append('svg:defs')
  281. var markers = [{name: 'arrow', path: 'M2,2 L2,11 L10,6 L2,2', fill: "red"},
  282. {name: 'arrow_green', path: 'M2,2 L2,11 L10,6 L2,2', fill: "green"}];
  283. var marker = defs.selectAll('marker')
  284. .data(markers)
  285. .enter()
  286. .append('svg:marker')
  287. .attr('id', function(d){ return 'marker_' + d.name})
  288. .attr('markerHeight', 13)
  289. .attr('markerWidth', 13)
  290. .attr('markerUnits', 'strokeWidth')
  291. .attr('orient', 'auto')
  292. .attr('refX', 2)
  293. .attr('refY', 6)
  294. .append('svg:path')
  295. .attr('d', function(d){ return d.path })
  296. .attr('fill', function(d){ return d.fill });
  297. this.svg = this.parent_svg.append("g")
  298. .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  299. this_object = this;
  300. function godEvent() {
  301. if (this_object.visualized_simulator == "NETLOGO") {
  302. god_event_to_process = {'turtle': $('#currLoc').text(), 'attribute': $('#godEventName').val(), 'value': eval($('#godEventValue').val())};
  303. the_controller.addInput(new Event("process_god_event", "ui_input", [god_event_to_process]), 0.0);
  304. dialog.dialog("close");
  305. } else {
  306. god_event_to_process = {'model': $('#currLoc').text(), 'attribute': $('#godEventName').val(), 'value': eval($('#godEventValue').val())};
  307. the_controller.addInput(new Event("process_god_event", "ui_input", [god_event_to_process]), 0.0);
  308. dialog.dialog("close");
  309. }
  310. }
  311. dialog = $( "#godEventPopup" ).dialog({
  312. autoOpen: false,
  313. height: 200,
  314. width: 325,
  315. modal: true,
  316. buttons: {
  317. "Submit": godEvent,
  318. Cancel: function() {
  319. dialog.dialog( "close" );
  320. }
  321. },
  322. close: function() {
  323. form[ 0 ].reset();
  324. }
  325. }).css("font-size", "14px");;
  326. form = dialog.find( "form" ).on( "submit", function( event ) {
  327. event.preventDefault();
  328. godEvent();
  329. });
  330. function injectEvent() {
  331. event_to_inject = {'port': $('#currLoc').text(), 'event': eval($('#injectEvent').val()), 'time': eval($('#injectTime').val())};
  332. the_controller.addInput(new Event("inject_event", "ui_input", [event_to_inject]), 0.0);
  333. inject_dialog.dialog("close");
  334. }
  335. inject_dialog = $( "#injectEventPopup" ).dialog({
  336. autoOpen: false,
  337. height: 200,
  338. width: 325,
  339. modal: true,
  340. buttons: {
  341. "Submit": injectEvent,
  342. Cancel: function() {
  343. inject_dialog.dialog( "close" );
  344. }
  345. },
  346. close: function() {
  347. inject_form[ 0 ].reset();
  348. }
  349. }).css("font-size", "14px");
  350. inject_form = inject_dialog.find( "form" ).on( "submit", function( event ) {
  351. event.preventDefault();
  352. injectEvent();
  353. });
  354. if (this.visualized_simulator == "NETLOGO") {
  355. $('#breakpointFunction').text("def breakpoint(time, turtles):\n")
  356. }
  357. function addBreakpoint() {
  358. breakpoint_to_add = [$('#breakpointName').val(), $('#breakpointFunction').val(), $('#breakpointEnabled').is(":checked"), $('#breakpointDisableOnTrigger').is(":checked")];
  359. the_controller.addInput(new Event("add_breakpoint", "ui_input", [breakpoint_to_add]), 0.0);
  360. breakpoint_dialog.dialog("close");
  361. }
  362. breakpoint_dialog = $( "#breakpointPopup" ).dialog({
  363. autoOpen: false,
  364. height: 400,
  365. width: 600,
  366. modal: true,
  367. buttons: {
  368. "Submit": addBreakpoint,
  369. Cancel: function() {
  370. breakpoint_dialog.dialog( "close" );
  371. }
  372. },
  373. close: function() {
  374. breakpoint_form[ 0 ].reset();
  375. }
  376. }).css("font-size", "14px");
  377. breakpoint_form = breakpoint_dialog.find( "form" ).on( "submit", function( event ) {
  378. event.preventDefault();
  379. addBreakpoint();
  380. });
  381. </body>
  382. </method>
  383. <method name="update_vis">
  384. <parameter name="structural_changes" />
  385. <body>
  386. if (this.visualized_simulator == "NETLOGO") {
  387. var created_turtles = [],
  388. deleted_turtles = [];
  389. if ('CREATED_TURTLES' in structural_changes) {
  390. created_turtles = structural_changes['CREATED_TURTLES'];
  391. }
  392. if ('DELETED_TURTLES' in structural_changes) {
  393. deleted_turtles = structural_changes['DELETED_TURTLES'];
  394. }
  395. var node_id = this.node_id;
  396. var loc_to_item = this.loc_to_item;
  397. var data = this.data;
  398. created_turtles.forEach(function(item) {
  399. var node = {'name': 'turtle[' + item + ']', 'children': [], 'id': node_id++, 'turtle_id': item}
  400. if (!data[0].hasOwnProperty('children')) {
  401. data[0]['children'] = [];
  402. }
  403. data[0].children.push(node);
  404. loc_to_item[item] = node;
  405. });
  406. deleted_turtles.forEach(function(item) {
  407. curr_array = data;
  408. data[0]['children'] = data[0]['children'].filter(function(el) {return el['name'] != ('turtle[' + item + ']')});
  409. });
  410. this.node_id = node_id;
  411. this.data = data;
  412. var nodes = this.tree.nodes(this.data[0]),
  413. links = this.tree.links(nodes);
  414. nodes.forEach(function(d, i) {
  415. d.y = d.depth * 100 + i * 40;
  416. });
  417. // Declare the nodes...
  418. var node = this.svg.selectAll("g.node")
  419. .data(nodes, function(d) { return d.id; });
  420. // Enter the nodes.
  421. var nodeEnter = node.enter().append("g")
  422. .attr("class", "node")
  423. .attr("id", function(d) {return 'instance_' + d.id;})
  424. .attr("transform", function(d) {
  425. return "translate(" + d.x + "," + d.y + ")";
  426. });
  427. nodeEnter.append("rect")
  428. .attr("width", 120)
  429. .attr("height", 25)
  430. .attr("transform", "translate(-60, 0)")
  431. .on("click", function(d) {
  432. console.log(JSON.stringify(d.state, null, 2));
  433. })
  434. .on("mouseover", function(d) {
  435. var node = d3.select("#instance_" + d.id)
  436. var stateInfo = node.selectAll(".stateInfo")
  437. .data(function(n) {if (n.state) {return [n.state]} else {return []}}, function(d) {return d.id});
  438. var stateInfoEnter = stateInfo.enter().append("text")
  439. .attr("transform", "translate(-60, 60)")
  440. .attr("id", this.node_id++)
  441. .attr("class", "stateInfo");
  442. var stateInfoText = stateInfo.selectAll("tspan")
  443. .data(function(d) {return JSON.stringify(d, null, 2).split("\n")});
  444. var stateInfoTextEnter = stateInfoText.enter().append("tspan")
  445. .attr("x", "0.0")
  446. .attr("dy", "1.4em")
  447. .attr("xml:space", "preserve")
  448. .text(function(d) {return d});
  449. })
  450. .on("mouseout", function(d) {
  451. var node = d3.select("#instance_" + d.id)
  452. var stateInfo = node.selectAll(".stateInfo");
  453. stateInfo.selectAll("tspan").data([]).exit().remove();
  454. })
  455. .on("contextmenu", function (d, i) {
  456. $( "#currLoc" ).html(d.turtle_id);
  457. d3.event.preventDefault();
  458. if (!d.children) {
  459. dialog.dialog( "open" );
  460. }
  461. });
  462. nodeEnter.append("text")
  463. .attr("y", 12)
  464. .attr("dy", ".35em")
  465. .attr("text-anchor", "middle")
  466. .text(function(d) { return d.name; })
  467. .style("fill-opacity", 1);
  468. // Declare the links...
  469. var link = this.svg.selectAll("path.link")
  470. .data(links);
  471. // Enter the links.
  472. link.enter().insert("path", "g")
  473. .attr("class", "link")
  474. .attr("d", this.diagonal);
  475. // Update the nodes.
  476. node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  477. node.classed("coupled", function(d) {return d.name == '&lt;root&gt;'});
  478. // Transition links to their new position.
  479. link.attr("d", this.diagonal);
  480. // Remove nodes and links.
  481. node.exit().remove();
  482. link.exit().remove();
  483. } else {
  484. d3.select("#smallStepInfo_7").classed("inactive", false);
  485. var created_models = [],
  486. created_ports = [],
  487. connected_ports = [],
  488. deleted_models = [],
  489. deleted_ports = [],
  490. disconnected_ports = [];
  491. if ('CREATED_MODELS' in structural_changes) {
  492. created_models = structural_changes['CREATED_MODELS'];
  493. }
  494. if ('CREATED_PORTS' in structural_changes) {
  495. created_ports = structural_changes['CREATED_PORTS'];
  496. }
  497. if ('CONNECTED_PORTS' in structural_changes) {
  498. connected_ports = structural_changes['CONNECTED_PORTS'];
  499. }
  500. if ('DELETED_MODELS' in structural_changes) {
  501. deleted_models = structural_changes['DELETED_MODELS'];
  502. }
  503. if ('DELETED_PORTS' in structural_changes) {
  504. deleted_ports = structural_changes['DELETED_PORTS'];
  505. }
  506. if ('DISCONNECTED_PORTS' in structural_changes) {
  507. disconnected_ports = structural_changes['DISCONNECTED_PORTS'];
  508. }
  509. // sort according to their depth (amounts of dots in their name)
  510. created_models.sort(function(a, b) {
  511. return (a.match(/./g) || []).length - (b.match(/./g) || []).length
  512. })
  513. data = this.data;
  514. var node_id = this.node_id;
  515. var loc_to_item = this.loc_to_item;
  516. created_models.forEach(function(item) {
  517. splitted_path = item.split('.');
  518. element_to_insert = data;
  519. while (splitted_path.length > 1) {
  520. curr_name = splitted_path.shift();
  521. element_to_insert = element_to_insert.find(function(el) {return el['name'] == curr_name}).children;
  522. }
  523. var node = {'name': splitted_path[0], 'children': [], 'ports': [], 'loc': item, 'id': node_id++}
  524. element_to_insert.push(node);
  525. loc_to_item[item] = node;
  526. });
  527. created_ports.forEach(function(item) {
  528. splitted_path = item[0].split('.');
  529. curr_array = data;
  530. while (splitted_path.length > 2) {
  531. curr_name = splitted_path.shift();
  532. curr_array = curr_array.find(function(el) {return el['name'] == curr_name}).children;
  533. }
  534. ports = curr_array.find(function(el) {return el['name'] == splitted_path[0]})['ports'];
  535. var node = {'name': splitted_path[1], 'is_input': item[1], 'loc': item[0], 'id': node_id++};
  536. ports.push(node);
  537. loc_to_item[item[0]] = node;
  538. });
  539. this.node_id = node_id;
  540. port_connections = this.port_connections
  541. connected_ports.forEach(function(item) {
  542. splitted_path_src = item[0].split('.');
  543. curr_array = data;
  544. while (splitted_path_src.length > 2) {
  545. curr_name = splitted_path_src.shift();
  546. curr_array = curr_array.find(function(el) {return el['name'] == curr_name}).children;
  547. }
  548. src_parent = curr_array.find(function(el) {return el['name'] == splitted_path_src[0]});
  549. src = src_parent['ports'].find(function(el) {return el['name'] == splitted_path_src[1]});
  550. splitted_path_dst = item[1].split('.');
  551. curr_array = data;
  552. while (splitted_path_dst.length > 2) {
  553. curr_name = splitted_path_dst.shift();
  554. curr_array = curr_array.find(function(el) {return el['name'] == curr_name}).children;
  555. }
  556. dst_parent = curr_array.find(function(el) {return el['name'] == splitted_path_dst[0]});
  557. dst = dst_parent['ports'].find(function(el) {return el['name'] == splitted_path_dst[1]});
  558. port_connections.push({'source': src, 'target': dst});
  559. });
  560. disconnected_ports.forEach(function(item) {
  561. port_connections = port_connections.filter(function(el) {return el.source.loc != item[0] || el.target.loc != item[1];});
  562. });
  563. this.port_connections = port_connections
  564. deleted_ports.forEach(function(item) {
  565. splitted_path = item.split('.');
  566. curr_array = data;
  567. while (splitted_path.length > 2) {
  568. curr_name = splitted_path.shift();
  569. curr_array = curr_array.find(function(el) {return el['name'] == curr_name}).children;
  570. }
  571. parent = curr_array.find(function(el) {return el['name'] == splitted_path[0]});
  572. parent['ports'] = parent['ports'].filter(function(el) {return el['name'] != splitted_path[1]});
  573. });
  574. deleted_models.forEach(function(item) {
  575. splitted_path = item.split('.');
  576. curr_array = data;
  577. while (splitted_path.length > 2) {
  578. curr_name = splitted_path.shift();
  579. curr_array = element_to_insert.find(function(el) {return el['name'] == curr_name}).children;
  580. }
  581. parent = curr_array.find(function(el) {return el['name'] == splitted_path[0]});
  582. parent['children'] = parent['children'].filter(function(el) {return el['name'] != splitted_path[1]});
  583. });
  584. this.data = data;
  585. var nodes = this.tree.nodes(this.data[0]),
  586. links = this.tree.links(nodes);
  587. nodes.forEach(function(d, i) {
  588. d.y = d.depth * 100 + i * 40
  589. d.ports.forEach(function(p, i) {p.dx = 13, p.dy = 18; p.x = (d.x - 40) + i * p.dx; p.y = d.y + p.dy;});
  590. });
  591. // Declare the nodes...
  592. var node = this.svg.selectAll("g.node")
  593. .data(nodes, function(d) { return d.id; });
  594. // Enter the nodes.
  595. var nodeEnter = node.enter().append("g")
  596. .attr("class", "node")
  597. .attr("id", function(d) {return 'instance_' + d.id;})
  598. .attr("transform", function(d) {
  599. return "translate(" + d.x + "," + d.y + ")";
  600. });
  601. nodeEnter.append("rect")
  602. .attr("width", 120)
  603. .attr("height", 25)
  604. .attr("transform", "translate(-60, 0)")
  605. .on("click", function(d) {
  606. console.log(JSON.stringify(d.state, null, 2));
  607. })
  608. .on("mouseover", function(d) {
  609. var node = d3.select("#instance_" + d.id)
  610. var stateInfo = node.selectAll(".stateInfo")
  611. .data(function(n) {if (n.state) {return [n.state]} else {return []}}, function(d) {return d.id});
  612. var stateInfoEnter = stateInfo.enter().append("text")
  613. .attr("transform", "translate(-60, 60)")
  614. .attr("id", this.node_id++)
  615. .attr("class", "stateInfo");
  616. var stateInfoText = stateInfo.selectAll("tspan")
  617. .data(function(d) {return JSON.stringify(d, null, 2).split("\n")});
  618. var stateInfoTextEnter = stateInfoText.enter().append("tspan")
  619. .attr("x", "0.0")
  620. .attr("dy", "1.4em")
  621. .attr("xml:space", "preserve")
  622. .text(function(d) {return d});
  623. })
  624. .on("mouseout", function(d) {
  625. var node = d3.select("#instance_" + d.id)
  626. var stateInfo = node.selectAll(".stateInfo");
  627. stateInfo.selectAll("tspan").data([]).exit().remove();
  628. })
  629. .on("contextmenu", function (d, i) {
  630. $( "#currLoc" ).html(d.loc);
  631. d3.event.preventDefault();
  632. if (!d.children) {
  633. dialog.dialog( "open" );
  634. }
  635. });
  636. nodeEnter.append("text")
  637. .attr("y", 12)
  638. .attr("dy", ".35em")
  639. .attr("text-anchor", "middle")
  640. .text(function(d) { return d.name; })
  641. .style("fill-opacity", 1);
  642. nodeEnter.append("text")
  643. .attr("class", "timeNext")
  644. .attr("y", -10)
  645. .attr("x", 30)
  646. .attr("dy", ".35em")
  647. .attr("text-anchor", "middle")
  648. .text("TN: --")
  649. .style("fill-opacity", 1);
  650. port = node.selectAll("g.port")
  651. .data(function(n) {return n.ports}, function(d) { return d.id; })
  652. portEnter = port.enter().append("g")
  653. .attr("class", "port invisible")
  654. .attr("id", function(d) {return 'port_' + d.id;})
  655. .on("mouseover", function(d) {
  656. d3.selectAll(".source_" + d.id).classed("invisibleLink", false)
  657. .classed("input", false);
  658. d3.selectAll(".target_" + d.id).classed("invisibleLink", false)
  659. .classed("input", true);
  660. port_connections.forEach(function(port_connection) {
  661. if (port_connection.source.id == d.id) {
  662. d3.select('#port_' + port_connection.target.id).attr("class", "port visible");
  663. } else if (port_connection.target.id == d.id) {
  664. d3.select('#port_' + port_connection.source.id).attr("class", "port visible");
  665. }
  666. });
  667. d3.select(this).attr("class", "port visible");
  668. })
  669. .on("mouseout", function(d) {
  670. d3.selectAll(".source_" + d.id).classed("invisibleLink", true);
  671. d3.selectAll(".target_" + d.id).classed("invisibleLink", true);
  672. d3.selectAll(".port").attr("class", "port invisible");
  673. })
  674. .on("click", function (d, i) {
  675. $('#currLoc').html(d.loc);
  676. d3.event.preventDefault();
  677. if (d.is_input) {
  678. inject_dialog.dialog( "open" );
  679. }
  680. });
  681. portEnter.append("rect")
  682. .attr("width", 10)
  683. .attr("height", 10)
  684. .style("fill", function(d) {return d.is_input ? "green" : "purple";})
  685. .attr("transform", "rotate(45)");
  686. portEnter.append("text")
  687. .attr("dy", ".35em")
  688. .attr("text-anchor", "left")
  689. .text(function(d) {return d.name;})
  690. .attr("transform", "translate(0, 20) rotate(30)");
  691. port.attr("transform", function(d, i) {return "translate(" + (-40 + i * d.dx) + ", " + d.dy + ")"});
  692. // Declare the links...
  693. var link = this.svg.selectAll("path.link")
  694. .data(links);
  695. // Enter the links.
  696. link.enter().insert("path", "g")
  697. .attr("class", "link")
  698. .attr("d", this.diagonal);
  699. // Declare port connections...
  700. var port_connection = this.svg.selectAll("path.portConnection")
  701. .data(port_connections);
  702. // Enter port connections.
  703. port_connection.enter().insert("path", "g")
  704. .attr("class", "invisibleLink portConnection");
  705. // Update the nodes.
  706. node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  707. node.classed("coupled", function(d) {return d.children});
  708. // Transition links to their new position.
  709. link.attr("d", this.diagonal);
  710. // Transition links to their new position.
  711. port_connection.attr("d", function(d) {
  712. var dx = d.target.x - d.source.x,
  713. dy = d.target.y - d.source.y,
  714. dr = Math.sqrt(dx * dx + dy * dy)/4,
  715. mx = d.source.x + dx/2,
  716. my = d.source.y + dy/2 + 30;
  717. return [
  718. "M",d.source.x,d.source.y+5,
  719. "T",mx,my,
  720. "T",d.target.x,d.target.y+5
  721. ].join(" ");
  722. })
  723. .attr("class", function(d) {return "invisibleLink portConnection source_" + d.source.id + " target_" + d.target.id});
  724. // Remove nodes and links.
  725. node.exit().remove();
  726. link.exit().remove();
  727. port.exit().remove();
  728. port_connection.exit().remove();
  729. }
  730. </body>
  731. </method>
  732. <method name="visualize_initial_state">
  733. <parameter name="initial_states" />
  734. <body>
  735. if (this.visualized_simulator == "NETLOGO") {
  736. for (var loc in initial_states) {
  737. var item = this.loc_to_item[loc];
  738. item.state = initial_states[loc];
  739. }
  740. } else {
  741. d3.select("#smallStepInfo").classed("invisibleInfo", true);
  742. d3.selectAll("g.node").attr("class", "node")
  743. .classed("coupled", function(d) {return d.children});
  744. d3.selectAll("circle.inmessage").data([]).exit().remove();
  745. d3.selectAll("circle.outmessage").data([]).exit().remove();
  746. d3.selectAll(".portConnection").classed("invisibleLink", true);
  747. d3.selectAll(".port").classed("visible", false);
  748. d3.selectAll(".port").classed("invisible", true);
  749. d3.selectAll(".stateInfo").data([]).exit().remove();
  750. for (var loc in initial_states) {
  751. var item = this.loc_to_item[loc];
  752. d3.select("#instance_" + item.id + " .timeNext").text("TN: " + initial_states[loc][0][0] + "/" + initial_states[loc][0][1])
  753. item.state = initial_states[loc][1];
  754. if (item.state.particle_id) {
  755. this.particle_id_to_item[item.state.particle_id] = item; // TODO: this is somewhat ugly, we're making a lot of assumptions here and it's no longer domain-independent!
  756. }
  757. }
  758. }
  759. </body>
  760. </method>
  761. <method name="visualize_new_state">
  762. <parameter name="new_states" />
  763. <parameter name="new_tn" />
  764. <body>
  765. d3.select("#smallStepInfo").classed("invisibleInfo", true);
  766. d3.selectAll("g.node").attr("class", "node")
  767. .classed("coupled", function(d) {return d.children});
  768. d3.selectAll("circle.inmessage").data([]).exit().remove();
  769. d3.selectAll("circle.outmessage").data([]).exit().remove();
  770. d3.selectAll(".portConnection").classed("invisibleLink", true);
  771. d3.selectAll(".port").classed("visible", false);
  772. d3.selectAll(".port").classed("invisible", true);
  773. d3.selectAll(".stateInfo").data([]).exit().remove();
  774. for (var loc in new_tn) {
  775. var item = this.loc_to_item[loc];
  776. d3.select("#instance_" + item.id + " .timeNext").text("TN: " + new_tn[loc][0] + "/" + new_tn[loc][1])
  777. item.state = new_states[loc];
  778. if (item.state.particle_id != undefined) {
  779. this.particle_id_to_item[item.state.particle_id] = item; // TODO: this is somewhat ugly, we're making a lot of assumptions here and it's no longer domain-independent!
  780. }
  781. }
  782. </body>
  783. </method>
  784. <method name="visualize_imminents">
  785. <parameter name="imminents" />
  786. <body>
  787. d3.selectAll(".portConnection").classed("invisibleLink", true);
  788. d3.selectAll(".port").classed("visible", false);
  789. d3.selectAll(".port").classed("invisible", true);
  790. d3.selectAll("circle.inmessage").data([]).exit().remove();
  791. d3.selectAll("circle.outmessage").data([]).exit().remove();
  792. if (this.transitioning_nodes) {
  793. this.transitioning_nodes.forEach(function(n) {n.attr("class", "node")
  794. .classed("coupled", function(d) {return d.children});});
  795. }
  796. d3.select("#smallStepInfo").classed("invisibleInfo", false);
  797. d3.selectAll(".smallStepInfo").classed("inactive", true);
  798. d3.select("#smallStepInfo_0").classed("inactive", false);
  799. var loc_to_item = this.loc_to_item;
  800. this.imminents = imminents;
  801. imminents.forEach(function(imminent) {
  802. d3.select("#instance_" + loc_to_item[imminent].id).classed("imminent", true);
  803. })
  804. </body>
  805. </method>
  806. <method name="visualize_selected_imminent">
  807. <parameter name="selected_imminent" />
  808. <body>
  809. d3.select("#smallStepInfo_1").classed("inactive", false);
  810. var loc_to_item = this.loc_to_item;
  811. this.imminents.forEach(function(imminent) {
  812. if (!(imminent == selected_imminent)) {
  813. d3.select("#instance_" + loc_to_item[imminent].id).classed("imminent", false);
  814. }
  815. })
  816. </body>
  817. </method>
  818. <method name="visualize_messages">
  819. <parameter name="bag" />
  820. <parameter name="msg_type" />
  821. <body>
  822. var total_msgs = [];
  823. for (var key in bag) {
  824. var msgs = bag[key];
  825. var port = this.loc_to_item[key];
  826. if (port != undefined) {
  827. msgs[0].port = port;
  828. Array.prototype.push.apply(total_msgs, msgs);
  829. }
  830. }
  831. var msgs_vis = this.svg.selectAll("circle." + msg_type)
  832. .data(total_msgs);
  833. var msg_enter = msgs_vis.enter().append("circle")
  834. .attr("class", msg_type)
  835. .attr("id", function(m) {return "msg_" + m.port.id;})
  836. .attr("r", 5)
  837. .attr("transform", function(m) {return "translate(" + m.port.x + "," + (m.port.y + 22) + ")"})
  838. .on("click", function(d) {console.log(d[0])});
  839. </body>
  840. </method>
  841. <method name="visualize_inbags">
  842. <parameter name="inbags" />
  843. <body>
  844. d3.select("#smallStepInfo_3").classed("inactive", false);
  845. function transition(circle, path, source_port_vis, target_port_vis) {
  846. circle.transition()
  847. .duration(3000)
  848. .attrTween("transform", translateAlong(path.node()))
  849. .each("end", function() {
  850. path.classed("invisibleLink", true);
  851. source_port_vis.classed("invisible", true);
  852. target_port_vis.classed("invisible", true);
  853. source_port_vis.classed("visible", false);
  854. target_port_vis.classed("visible", false);
  855. circle.attr("class", "inmessage");
  856. });
  857. }
  858. // Returns an attrTween for translating along the specified path element.
  859. function translateAlong(path) {
  860. var l = path.getTotalLength();
  861. return function(d, i, a) {
  862. return function(t) {
  863. var p = path.getPointAtLength(t * l);
  864. return "translate(" + p.x + "," + (p.y + 17) + ")";
  865. };
  866. };
  867. }
  868. var outports_visited = []
  869. for (var key in inbags) {
  870. if (inbags[key].length == 2) {
  871. var msgs = inbags[key][1];
  872. var inport = this.loc_to_item[key];
  873. if (inport != undefined) {
  874. var circle = undefined;
  875. var outport_id = this.loc_to_item[inbags[key][0]].id;
  876. if (outports_visited.indexOf(outport_id) > -1) {
  877. circle = d3.select('#msg_' + outport_id);
  878. var parent = d3.select(circle.node().parentNode);
  879. circle = parent.append("circle")
  880. .attr("class", "outmessage")
  881. .attr("id", circle.id + outports_visited.indexOf(outport_id))
  882. .attr("r", 5)
  883. .attr("transform", circle.transform)
  884. .on("click", (function(msgs) {return function(d) {console.log(msgs[0])}})(msgs));
  885. } else {
  886. circle = d3.select('#msg_' + outport_id);
  887. circle.on("click", (function(msgs) {return function(d) {console.log(msgs[0])}})(msgs));
  888. }
  889. var path = d3.select(".source_" + outport_id + ".target_" + inport.id);
  890. var source_port_vis = d3.select("#port_" + outport_id)
  891. var target_port_vis = d3.select("#port_" + inport.id)
  892. source_port_vis.classed("invisible", false);
  893. target_port_vis.classed("invisible", false);
  894. source_port_vis.classed("visible", true);
  895. target_port_vis.classed("visible", true);
  896. path.classed("invisibleLink", false);
  897. transition(circle, path, source_port_vis, target_port_vis);
  898. outports_visited.push(outport_id);
  899. }
  900. } else {
  901. var msgs = inbags[key][0];
  902. var inport = this.loc_to_item[key];
  903. this.svg.append("circle")
  904. .attr("class", "inmessage")
  905. .attr("id", "msg_" + inport.id)
  906. .attr("r", 5)
  907. .attr("transform", "translate(" + inport.x + "," + (inport.y + 22) + ")")
  908. .on("click", (function(msgs) {return function(d) {console.log(msgs[0])}})(msgs));
  909. }
  910. }
  911. </body>
  912. </method>
  913. <method name="visualize_transitioning">
  914. <parameter name="transitioning" />
  915. <body>
  916. var transitioning_nodes = [];
  917. var loc_to_item = this.loc_to_item;
  918. Object.keys(transitioning).forEach(function(key) {
  919. transitioning_nodes.push(d3.select("#instance_" + loc_to_item[key].id).classed(transitioning[key], true));
  920. });
  921. this.transitioning_nodes = transitioning_nodes;
  922. </body>
  923. </method>
  924. <method name="handle_internal_state_change">
  925. <parameter name="new_internal_states" />
  926. <body>
  927. d3.select("#smallStepInfo_5").classed("inactive", false);
  928. for (var loc in new_internal_states) {
  929. var item = this.loc_to_item[loc];
  930. item.state = new_internal_states[loc];
  931. }
  932. if (this.transitioning_nodes) {
  933. this.transitioning_nodes.forEach(function(n) {n.attr("class", "node")
  934. .classed("coupled", function(d) {return d.children});});
  935. }
  936. var node = this.svg.selectAll("g.node");
  937. var stateInfo = node.selectAll("g.state");
  938. stateInfo.text(function(d) {return JSON.stringify(d);});
  939. </body>
  940. </method>
  941. <method name="visualize_new_tn">
  942. <parameter name="new_tn" />
  943. <body>
  944. d3.select("#smallStepInfo_6").classed("inactive", false);
  945. for (var loc in new_tn) {
  946. var item = this.loc_to_item[loc];
  947. d3.select("#instance_" + item.id + " .timeNext").text("TN: " + new_tn[loc][0] + "/" + new_tn[loc][1])
  948. }
  949. </body>
  950. </method>
  951. <method name="select_instance">
  952. <parameter name="instance_id" />
  953. <body>
  954. d3.selectAll(".stateInfo").data([]).exit().remove();
  955. if (instance_id in this.particle_id_to_item) {
  956. var d = this.particle_id_to_item[instance_id];
  957. var node = d3.select("#instance_" + d.id)
  958. var stateInfo = node.selectAll(".stateInfo")
  959. .data(function(n) {if (n.state) {return [n.state]} else {return []}}, function(d) {return d.id});
  960. var stateInfoEnter = stateInfo.enter().append("text")
  961. .attr("transform", "translate(-60, 60)")
  962. .attr("id", this.node_id++)
  963. .attr("class", "stateInfo");
  964. var stateInfoText = stateInfo.selectAll("tspan")
  965. .data(function(d) {return JSON.stringify(d, null, 2).split("\n")});
  966. var stateInfoTextEnter = stateInfoText.enter().append("tspan")
  967. .attr("x", "0.0")
  968. .attr("dy", "1.4em")
  969. .attr("xml:space", "preserve")
  970. .text(function(d) {return d});
  971. }
  972. </body>
  973. </method>
  974. <method name="visualize_breakpoints">
  975. <body>
  976. if (this.visualized_simulator == "PYDEVS") {
  977. for (idx in this.breakpoints) {
  978. var curr_bp = this.breakpoints[idx];
  979. if (curr_bp.triggered) {
  980. this.visualize_messages(curr_bp.outbag, 'outmessage');
  981. for (var key in curr_bp.inbags) {
  982. if (curr_bp.inbags[key].length == 2) {
  983. curr_bp.inbags[key] = [curr_bp.inbags[key][1]];
  984. }
  985. }
  986. this.visualize_messages(curr_bp.inbags, 'inmessage');
  987. this.visualize_transitioning(curr_bp.transitioned);
  988. }
  989. }
  990. }
  991. var curr_bps = this.breakpoint_infos.selectAll("div").data(this.breakpoints)
  992. curr_bps_enter = curr_bps.enter().append("div")
  993. .attr("id", function(d) {return "breakpoint_" + d.name})
  994. .attr("class", "breakpoint")
  995. .style("transform", function(d, i) {return "translate(" + i * 5 + "px, -8px)"})
  996. .style("float", "left");
  997. curr_bps_enter.append("text")
  998. .text(function(d) {return d.name})
  999. .on("click", function(d) {
  1000. d.enabled = !d.enabled;
  1001. the_controller.addInput(new Event("toggle_breakpoint", "ui_input", [d.name, d.enabled]), 0.0);
  1002. })
  1003. .on('mouseover', function() {
  1004. d3.event.preventDefault();
  1005. });
  1006. curr_bps_enter.append("img")
  1007. .attr('src', 'img/delete-bp.png')
  1008. .style('transform', 'translate(1px, 2px)')
  1009. .on("click", function(d) {
  1010. the_controller.addInput(new Event("del_breakpoint", "ui_input", [d.name]), 0.0);
  1011. });
  1012. curr_bps.exit().remove();
  1013. curr_bps.style("background-color", function(d) {
  1014. if (d.triggered) {
  1015. d.triggered = false;
  1016. if (d.disable_on_trigger) {
  1017. d.enabled = false;
  1018. }
  1019. return "red";
  1020. } else {
  1021. return "transparent";
  1022. }});
  1023. curr_bps.select("text").style("opacity", function(d) {if (d.enabled) return "1"; else return "0.5";});
  1024. </body>
  1025. </method>
  1026. <scxml initial="initializing">
  1027. <state id="initializing">
  1028. <transition target="../running">
  1029. <raise event="reset" port="output" />
  1030. </transition>
  1031. </state>
  1032. <state id="running">
  1033. <transition target="." event="all_states_reset" port="simulation_input">
  1034. <parameter name="the_parameters" />
  1035. <script>
  1036. this.simulation_time.text("SIMULATION TIME: " + the_parameters[0][0] + "/" + the_parameters[0][1]);
  1037. this.data = [];
  1038. this.port_connections = [];
  1039. this.update_vis(the_parameters[2]);
  1040. this.visualize_initial_state(the_parameters[1]);
  1041. this.breakpoints = the_parameters[3];
  1042. this.visualize_breakpoints();
  1043. </script>
  1044. </transition>
  1045. <transition target="." event="all_states" port="simulation_input">
  1046. <parameter name="the_parameters" />
  1047. <script>
  1048. <![CDATA[
  1049. if (this.visualized_simulator == "NETLOGO") {
  1050. this.simulation_time.text("SIMULATION TIME: " + the_parameters[0]);
  1051. this.update_vis(the_parameters[2]);
  1052. this.visualize_initial_state(the_parameters[1]);
  1053. this.visualize_breakpoints();
  1054. } else {
  1055. this.simulation_time.text("SIMULATION TIME: " + the_parameters[0][0] + "/" + the_parameters[0][1]);
  1056. this.update_vis(the_parameters[2]);
  1057. this.visualize_initial_state(the_parameters[1]);
  1058. this.visualize_breakpoints();
  1059. }
  1060. ]]>
  1061. </script>
  1062. </transition>
  1063. <transition target="." event="new_states" port="simulation_input">
  1064. <parameter name="the_parameters" />
  1065. <script>
  1066. this.simulation_time.text("SIMULATION TIME: " + the_parameters[0][0] + "/" + the_parameters[0][1]);
  1067. this.update_vis(the_parameters[3]);
  1068. this.visualize_new_state(the_parameters[1], the_parameters[2]);
  1069. this.visualize_breakpoints();
  1070. </script>
  1071. </transition>
  1072. <transition target="." event="imminents" port="simulation_input">
  1073. <parameter name="the_parameters" />
  1074. <script>
  1075. this.visualize_breakpoints();
  1076. this.simulation_time.text("SIMULATION TIME: " + the_parameters[0][0] + "/" + the_parameters[0][1]);
  1077. this.visualize_imminents(the_parameters[1]);
  1078. </script>
  1079. </transition>
  1080. <transition target="." event="selected_imminent" port="simulation_input">
  1081. <parameter name="the_parameters" />
  1082. <script>
  1083. this.simulation_time.text("SIMULATION TIME: " + the_parameters[0][0] + "/" + the_parameters[0][1]);
  1084. this.visualize_selected_imminent(the_parameters[1]);
  1085. </script>
  1086. </transition>
  1087. <transition target="." event="outbag" port="simulation_input">
  1088. <parameter name="the_parameters" />
  1089. <script>
  1090. d3.select("#smallStepInfo_2").classed("inactive", false);
  1091. d3.selectAll("g.node").classed("imminent", false);
  1092. this.simulation_time.text("SIMULATION TIME: " + the_parameters[0][0] + "/" + the_parameters[0][1]);
  1093. this.visualize_messages(the_parameters[1], 'outmessage');
  1094. </script>
  1095. </transition>
  1096. <transition target="." event="inbags" port="simulation_input">
  1097. <parameter name="the_parameters" />
  1098. <script>
  1099. this.simulation_time.text("SIMULATION TIME: " + the_parameters[0][0] + "/" + the_parameters[0][1]);
  1100. this.visualize_inbags(the_parameters[1]);
  1101. </script>
  1102. </transition>
  1103. <transition target="." event="transitioning" port="simulation_input">
  1104. <parameter name="the_parameters" />
  1105. <script>
  1106. this.simulation_time.text("SIMULATION TIME: " + the_parameters[0][0] + "/" + the_parameters[0][1]);
  1107. d3.select("#smallStepInfo_4").classed("inactive", false);
  1108. d3.selectAll(".portConnection").classed("invisibleLink", true);
  1109. d3.selectAll(".port").classed("visible", false);
  1110. d3.selectAll(".port").classed("invisible", true);
  1111. d3.selectAll("circle.inmessage").data([]).exit().remove();
  1112. d3.selectAll("circle.outmessage").data([]).exit().remove();
  1113. this.visualize_transitioning(the_parameters[1]);
  1114. </script>
  1115. </transition>
  1116. <transition target="." event="new_internal_states" port="simulation_input">
  1117. <parameter name="the_parameters" />
  1118. <script>
  1119. this.simulation_time.text("SIMULATION TIME: " + the_parameters[0][0] + "/" + the_parameters[0][1]);
  1120. this.handle_internal_state_change(the_parameters[1]);
  1121. </script>
  1122. </transition>
  1123. <transition target="." event="new_tn" port="simulation_input">
  1124. <parameter name="the_parameters" />
  1125. <script>
  1126. this.simulation_time.text("SIMULATION TIME: " + the_parameters[0][0] + "/" + the_parameters[0][1]);
  1127. this.visualize_new_tn(the_parameters[1]);
  1128. </script>
  1129. </transition>
  1130. <transition target="." event="structural_changes" port="simulation_input">
  1131. <parameter name="the_parameters" />
  1132. <script>
  1133. this.simulation_time.text("SIMULATION TIME: " + the_parameters[0][0] + "/" + the_parameters[0][1]);
  1134. this.update_vis(the_parameters[1]);
  1135. </script>
  1136. </transition>
  1137. <transition target="." event="select_instance" port="ui_input">
  1138. <parameter name="the_parameters" />
  1139. <script>
  1140. this.select_instance(the_parameters);
  1141. </script>
  1142. </transition>
  1143. <transition target="." event="process_god_event" port="ui_input">
  1144. <raise event="god_event" port="output">
  1145. <parameter expr="god_event_to_process" />
  1146. </raise>
  1147. </transition>
  1148. <transition target="." event="god_event_ok" port="simulation_input">
  1149. <parameter name="the_parameters" />
  1150. <script>
  1151. this.handle_internal_state_change(the_parameters[0]);
  1152. </script>
  1153. </transition>
  1154. <transition target="." event="inject_event" port="ui_input">
  1155. <raise event="inject" port="output">
  1156. <parameter expr="event_to_inject" />
  1157. </raise>
  1158. </transition>
  1159. <transition target="." event="inject_ok" port="simulation_input" />
  1160. <transition target="." event="add_breakpoint" port="ui_input">
  1161. <raise event="add_breakpoint" port="output">
  1162. <parameter expr="breakpoint_to_add" />
  1163. </raise>
  1164. <script>
  1165. this.breakpoints.push({'name': breakpoint_to_add[0], 'enabled': breakpoint_to_add[2], 'disable_on_trigger': breakpoint_to_add[3], 'triggered': false});
  1166. this.visualize_breakpoints();
  1167. </script>
  1168. </transition>
  1169. <transition target="." event="toggle_breakpoint" port="ui_input">
  1170. <parameter name="breakpoint_id" />
  1171. <parameter name="enabled" />
  1172. <raise event="toggle_breakpoint" port="output">
  1173. <parameter expr="breakpoint_id" />
  1174. <parameter expr="enabled" />
  1175. </raise>
  1176. <script>
  1177. this.visualize_breakpoints();
  1178. </script>
  1179. </transition>
  1180. <transition target="." event="del_breakpoint" port="ui_input">
  1181. <parameter name="breakpoint_id" />
  1182. <raise event="del_breakpoint" port="output">
  1183. <parameter expr="breakpoint_id" />
  1184. </raise>
  1185. <script>
  1186. this.breakpoints = this.breakpoints.filter(function(bp) {return bp.name != breakpoint_id});
  1187. this.visualize_breakpoints();
  1188. </script>
  1189. </transition>
  1190. <transition target="." event="breakpoint_triggered" port="simulation_input">
  1191. <parameter name="the_parameters" />
  1192. <script>
  1193. for (var idx in this.breakpoints) {
  1194. var curr_bp = this.breakpoints[idx];
  1195. if (curr_bp.name == the_parameters[0]) {
  1196. curr_bp.triggered = true;
  1197. curr_bp.transitioned = the_parameters[1];
  1198. curr_bp.outbag = the_parameters[2];
  1199. curr_bp.inbags = the_parameters[3];
  1200. }
  1201. }
  1202. this.visualize_breakpoints()
  1203. </script>
  1204. </transition>
  1205. </state>
  1206. </scxml>
  1207. </class>
  1208. </diagram>