add test for VisB rendering

Signed-off-by: Michael Leuschel <leuschel@uni-duesseldorf.de>

add test for VisB rendering
26e14e47 · Michael Leuschel · 37fd5e0a · 26e14e47
Commit 26e14e47 authored 1 year ago by Michael Leuschel
--- a/notebooks/tests/VisB_Test.ipynb
+++ b/notebooks/tests/VisB_Test.ipynb
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "id": "c91030ef",
+   "metadata": {},
+   "source": [
+    "# Test VisB Rendering"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "id": "30b8bf50",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "Loaded machine: button_def"
+      ]
+     },
+     "execution_count": 1,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "::load\n",
+    "MACHINE button_def\n",
+    "// An example that uses VisB DEFINITIONS instead of a JSON and SVG file\n",
+    "DEFINITIONS \n",
+    "  VISB_JSON_FILE == \"\"; // \"button.svg\";\n",
+    "  VISB_SVG_BOX == rec(height:200, width:240);\n",
+    "  VISB_SVG_CONTENTS == '''\n",
+    "   <defs>\n",
+    "    <marker id=\"arrowhead\" markerWidth=\"10\" markerHeight=\"7\"\n",
+    "    refX=\"0\" refY=\"3.5\" orient=\"auto\">\n",
+    "      <polygon points=\"0 0, 10 3.5, 0 7\" />\n",
+    "    </marker>\n",
+    "  </marker>\n",
+    "  </defs>\n",
+    "''';\n",
+    "  VISB_SVG_OBJECTS == rec(`id`:\"button\", svg_class:\"circle\",\n",
+    "     cx:\"100\",cy:\"100\", r:\"80\", \n",
+    "     stroke:\"black\", `stroke-width`:\"2\");\n",
+    "  VISB_SVG_UPDATES == rec(`id`:\"button\",\n",
+    "     fill: IF button=TRUE THEN \"green\" ELSE \"red\" END);\n",
+    "  VISB_SVG_HOVERS == rec(`id`:\"button\",\n",
+    "     stroke:\"gray\", `stroke-width`:\"5\");\n",
+    "     \n",
+    "  VISB_SVG_OBJECTS_ARROW == rec( svg_class:\"line\",\n",
+    "         `id`: \"arrow\",\n",
+    "          stroke:\"gray\",\n",
+    "          `stroke-width`:2.0,\n",
+    "          x1:100, y1:100,\n",
+    "          `marker-end`: \"url(#arrowhead)\");\n",
+    "  VISB_SVG_UPDATES2 == rec(`id`:\"arrow\", \n",
+    "                           visible:\"TRUE\",\n",
+    "                           y2:IF button=TRUE THEN 180.0 ELSE 20.0 END,\n",
+    "                           x2:100.0);\n",
+    "VARIABLES button\n",
+    "INVARIANT button:BOOL\n",
+    "INITIALISATION button := FALSE\n",
+    "OPERATIONS\n",
+    "  toggle_button /* desc change status of button */ = BEGIN\n",
+    "    button:= bool(button=FALSE)\n",
+    "  END\n",
+    "END"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "id": "91082d92",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "Executed operation: INITIALISATION()"
+      ]
+     },
+     "execution_count": 2,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    ":init"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "id": "7eee20b7",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<!DOCTYPE html>\n",
+       "<html>\n",
+       "<head>\n",
+       "     <!-- html file generated by ProB from a VisB visualization -->\n",
+       "     <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
+       "     <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\">\n",
+       "     <script>\n",
+       "        function setAttr(id, attribute, value){\n",
+       "\t\t\tvar obj = document.getElementById(id);\n",
+       "\t\t\tif (obj == null) {\n",
+       "\t\t\t    if (id != \"visb_debug_messages\") {\n",
+       "\t\t\t\t     console.error(\"Unknown SVG id \" + id + \" for attribute \" + attribute);\n",
+       "\t\t\t\t}\n",
+       "\t\t\t} else if(attribute==\"text\") {\n",
+       "\t\t\t\tobj.textContent = value;\n",
+       "\t\t\t} else if(attribute==\"class\" && value != \"\") {\n",
+       "\t\t\t   if(value[0]==\"+\") {\n",
+       "\t\t\t      obj.classList.add(value.substr(1));\n",
+       "\t\t\t   } else if(value[0]==\"-\") {\n",
+       "\t\t\t      obj.classList.remove(value.substr(1));\n",
+       "\t\t\t   } else {\n",
+       "\t\t\t\t  obj.setAttribute(attribute, value);\n",
+       "\t\t\t   }\n",
+       "\t\t\t} else {\n",
+       "\t\t\t\tobj.setAttribute(attribute, value);\n",
+       "\t\t\t}\n",
+       "        }\n",
+       "\t\tfunction sleep(ms) {\n",
+       "\t\t    return new Promise(resolve => setTimeout(resolve, ms));\n",
+       "\t\t}\n",
+       "\t\tvar lastSelectedRow = 0;\n",
+       "\t\tfunction highlightRow(id) {\n",
+       "             if (lastSelectedRow>0) {setAttr(\"row\"+lastSelectedRow,\"bgcolor\",\"\")};\n",
+       "             setAttr(\"row\"+id,\"bgcolor\",\"yellow\");\n",
+       "             lastSelectedRow = id;\n",
+       "\t\t}\n",
+       "\t\tfunction backStep() {\n",
+       "\t\t     if (lastSelectedRow>1) {\n",
+       "\t\t       var prev = lastSelectedRow-1;\n",
+       "\t\t       document.getElementById(\"row\"+prev).click();\n",
+       "\t\t     }\n",
+       "\t\t}\n",
+       "\t\tfunction forwardStep() {\n",
+       "\t\t     if (lastSelectedRow>0) {\n",
+       "\t\t        var nxt = lastSelectedRow+1;\n",
+       "\t\t        var row = document.getElementById(\"row\"+(nxt));\n",
+       "\t\t        if (row != null) { row.click() };\n",
+       "\t\t     }\n",
+       "\t\t}\n",
+       "    </script>\n",
+       "  \n",
+       "\t<style>\n",
+       "\ttable {\n",
+       "\t  font-family: arial, sans-serif;\n",
+       "\t  font-size: 11px;\n",
+       "\t  border-collapse: collapse;\n",
+       "\t  width: 100%;\n",
+       "\t}\n",
+       "\ttd, th {\n",
+       "\t  border: 1px solid #dddddd;\n",
+       "\t  text-align: left;\n",
+       "\t  padding: 2px;\n",
+       "\t}\n",
+       "/* \n",
+       "\ttr:nth-child(even) {\n",
+       "\t  background-color: #dddddd;\n",
+       "\t}\n",
+       " */\n",
+       "\t</style> \n",
+       "\t\n",
+       "\t<style>\n",
+       "\t.collapsible {\n",
+       "\t  cursor: pointer;\n",
+       "\t}\n",
+       "\t.collapsible-style {\n",
+       "\t  background-color: #777;\n",
+       "\t  color: white;\n",
+       "\t  padding: 6px;\n",
+       "\t  width: 100%;\n",
+       "\t  border: none;\n",
+       "\t  text-align: left;\n",
+       "\t  outline: none;\n",
+       "\t  font-size: 12px;\n",
+       "\t}\n",
+       "\n",
+       "\t.active, .collapsible:hover {\n",
+       "\t  background-color: #555;\n",
+       "\t}\n",
+       "\t\n",
+       "\t.collapsible:after {\n",
+       "\t  content: '\\002B';\n",
+       "\t  color: white;\n",
+       "\t  font-weight: bold;\n",
+       "\t  float: right;\n",
+       "\t  margin-left: 5px;\n",
+       "\t}\n",
+       "\n",
+       "\t.active:after {\n",
+       "\t  content: \"\\2212\";\n",
+       "\t}\n",
+       "\n",
+       "\t.coll-content-hid {\n",
+       "\t  padding: 0 12px;\n",
+       "\t  display: none;\n",
+       "\t  overflow: hidden;\n",
+       "\t  background-color: #f1f1f1;\n",
+       "\t}\n",
+       "\t.coll-content-vis {\n",
+       "\t  padding: 0 12px;\n",
+       "\t  display: block;\n",
+       "\t  overflow: hidden;\n",
+       "\t  background-color: #f1f1f1;\n",
+       "\t}\n",
+       "\t.visb-messages {\n",
+       "\t  text-align: left;\n",
+       "\t  outline: none;\n",
+       "\t  font-size: 12px;\n",
+       "\t  font-family: arial, sans-serif;\n",
+       "\t}\n",
+       "  </style>\n",
+       "\n",
+       "        \n",
+       "\n",
+       " <script>\n",
+       "   function visualise0(stepNr) {\n",
+       "       setAttr(\"visb_debug_messages\",\"text\",\"Step \"+stepNr+\"/1, State ID: 0\");\n",
+       "Extracting SVG updates from VISB_SVG_UPDATES\n",
+       "       setAttr(\"button\",\"fill\",\"red\");\n",
+       "Extracting SVG updates from VISB_SVG_UPDATES2\n",
+       "       setAttr(\"arrow\",\"visible\",\"TRUE\");\n",
+       "       setAttr(\"arrow\",\"x2\",\"100.0\");\n",
+       "       setAttr(\"arrow\",\"y2\",\"20.0\");\n",
+       "       highlightRow(stepNr);\n",
+       "     }\n",
+       "   async function runAll(delay) {\n",
+       "   visualise0(1);\n",
+       "   setAttr(\"visb_debug_messages\",\"text\",\"Step: 1/1,  State ID: 0,  Event: \");\n",
+       "   await sleep(delay);\n",
+       "   }\n",
+       " </script>\n",
+       "\n",
+       "   <script>\n",
+       "   function registerHovers() {\n",
+       "     var obj;\n",
+       "   obj = document.getElementById(\"button\");\n",
+       "   obj.onmouseover = function(ev){\n",
+       "       setAttr(\"button\",\"stroke\",\"gray\")\n",
+       "       setAttr(\"button\",\"stroke-width\",\"5\")\n",
+       "     };\n",
+       "   obj.onmouseout = function(){\n",
+       "       setAttr(\"button\",\"stroke\",\"black\")\n",
+       "       setAttr(\"button\",\"stroke-width\",\"2\")\n",
+       "     };\n",
+       "   }\n",
+       "  </script>\n",
+       "    </head>\n",
+       "<body>\n",
+       "    <button type=\"button\" class=\"collapsible collapsible-style\">SVG Visualisation</button>\n",
+       "    <div text-align=\"left\"> \n",
+       " \n",
+       "\n",
+       "<svg  xmlns=\"http://www.w3.org/2000/svg\"\n",
+       "      width=\"240\" height=\"200\" viewBox=\"0 0 240 200\" >\n",
+       "Detected VISB_SVG_CONTENTS (requires_nothing)\n",
+       "\n",
+       "   <defs>\n",
+       "    <marker id=\"arrowhead\" markerWidth=\"10\" markerHeight=\"7\"\n",
+       "    refX=\"0\" refY=\"3.5\" orient=\"auto\">\n",
+       "      <polygon points=\"0 0, 10 3.5, 0 7\" />\n",
+       "    </marker>\n",
+       "  </marker>\n",
+       "  </defs>\n",
+       "\n",
+       "Extracting SVG updates from VISB_SVG_UPDATES\n",
+       "Extracting SVG updates from VISB_SVG_UPDATES2\n",
+       " <circle id=\"button\" cx=\"100\" cy=\"100\" fill=\"red\" r=\"80\" stroke=\"black\" stroke-width=\"2\"></circle>\n",
+       " <line id=\"arrow\" marker-end=\"url(#arrowhead)\" stroke=\"gray\" stroke-width=\"2.0\" visible=\"TRUE\" x1=\"100\" x2=\"100.0\" y1=\"100\" y2=\"20.0\"></line>\n",
+       "</svg>\n",
+       " </div>\n",
+       " <button type=\"button\" class=\"collapsible-style\">Trace (length=1)</button>\n",
+       "<div class=\"coll-content-vis\">\n",
+       " <table> <tr> <th>Nr</th> <th>Event</th> <th>Target State ID</th> </tr>\n",
+       "\n",
+       "  <tr id=\"row1\" onclick=\"visualise0(1)\"><td>1</td><td style=\"cursor:pointer\"></td><td><button onclick=\"visualise0(1);\">State 0</button></td></tr>\n",
+       " </table>\n",
+       " </div>\n",
+       " <script> visualise0(1); </script>\n",
+       " </div>\n",
+       " <script> registerHovers() </script>\n",
+       " \n",
+       "<script>\n",
+       "var collapsibles = document.getElementsByClassName(\"collapsible\");\n",
+       "var ii;\n",
+       "\n",
+       "for (ii = 0; ii < collapsibles.length; ii++) {\n",
+       "  collapsibles[ii].addEventListener(\"click\", function() {\n",
+       "    this.classList.toggle(\"active\");\n",
+       "    var content = this.nextElementSibling;\n",
+       "    if (content.style.display === \"block\") {\n",
+       "      content.style.display = \"none\";\n",
+       "    } else {\n",
+       "      content.style.display = \"block\";\n",
+       "    }\n",
+       "  });\n",
+       "}\n",
+       "</script>\n",
+       "\n",
+       "</body>\n",
+       "</html>\n",
+       "\n"
+      ],
+      "text/plain": [
+       "<VisB visualization>"
+      ]
+     },
+     "execution_count": 3,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    ":show"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "id": "0e4f3287",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "Executed operation: toggle_button()"
+      ]
+     },
+     "execution_count": 4,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    ":exec toggle_button"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "id": "1d766206",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<!DOCTYPE html>\n",
+       "<html>\n",
+       "<head>\n",
+       "     <!-- html file generated by ProB from a VisB visualization -->\n",
+       "     <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
+       "     <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\">\n",
+       "     <script>\n",
+       "        function setAttr(id, attribute, value){\n",
+       "\t\t\tvar obj = document.getElementById(id);\n",
+       "\t\t\tif (obj == null) {\n",
+       "\t\t\t    if (id != \"visb_debug_messages\") {\n",
+       "\t\t\t\t     console.error(\"Unknown SVG id \" + id + \" for attribute \" + attribute);\n",
+       "\t\t\t\t}\n",
+       "\t\t\t} else if(attribute==\"text\") {\n",
+       "\t\t\t\tobj.textContent = value;\n",
+       "\t\t\t} else if(attribute==\"class\" && value != \"\") {\n",
+       "\t\t\t   if(value[0]==\"+\") {\n",
+       "\t\t\t      obj.classList.add(value.substr(1));\n",
+       "\t\t\t   } else if(value[0]==\"-\") {\n",
+       "\t\t\t      obj.classList.remove(value.substr(1));\n",
+       "\t\t\t   } else {\n",
+       "\t\t\t\t  obj.setAttribute(attribute, value);\n",
+       "\t\t\t   }\n",
+       "\t\t\t} else {\n",
+       "\t\t\t\tobj.setAttribute(attribute, value);\n",
+       "\t\t\t}\n",
+       "        }\n",
+       "\t\tfunction sleep(ms) {\n",
+       "\t\t    return new Promise(resolve => setTimeout(resolve, ms));\n",
+       "\t\t}\n",
+       "\t\tvar lastSelectedRow = 0;\n",
+       "\t\tfunction highlightRow(id) {\n",
+       "             if (lastSelectedRow>0) {setAttr(\"row\"+lastSelectedRow,\"bgcolor\",\"\")};\n",
+       "             setAttr(\"row\"+id,\"bgcolor\",\"yellow\");\n",
+       "             lastSelectedRow = id;\n",
+       "\t\t}\n",
+       "\t\tfunction backStep() {\n",
+       "\t\t     if (lastSelectedRow>1) {\n",
+       "\t\t       var prev = lastSelectedRow-1;\n",
+       "\t\t       document.getElementById(\"row\"+prev).click();\n",
+       "\t\t     }\n",
+       "\t\t}\n",
+       "\t\tfunction forwardStep() {\n",
+       "\t\t     if (lastSelectedRow>0) {\n",
+       "\t\t        var nxt = lastSelectedRow+1;\n",
+       "\t\t        var row = document.getElementById(\"row\"+(nxt));\n",
+       "\t\t        if (row != null) { row.click() };\n",
+       "\t\t     }\n",
+       "\t\t}\n",
+       "    </script>\n",
+       "  \n",
+       "\t<style>\n",
+       "\ttable {\n",
+       "\t  font-family: arial, sans-serif;\n",
+       "\t  font-size: 11px;\n",
+       "\t  border-collapse: collapse;\n",
+       "\t  width: 100%;\n",
+       "\t}\n",
+       "\ttd, th {\n",
+       "\t  border: 1px solid #dddddd;\n",
+       "\t  text-align: left;\n",
+       "\t  padding: 2px;\n",
+       "\t}\n",
+       "/* \n",
+       "\ttr:nth-child(even) {\n",
+       "\t  background-color: #dddddd;\n",
+       "\t}\n",
+       " */\n",
+       "\t</style> \n",
+       "\t\n",
+       "\t<style>\n",
+       "\t.collapsible {\n",
+       "\t  cursor: pointer;\n",
+       "\t}\n",
+       "\t.collapsible-style {\n",
+       "\t  background-color: #777;\n",
+       "\t  color: white;\n",
+       "\t  padding: 6px;\n",
+       "\t  width: 100%;\n",
+       "\t  border: none;\n",
+       "\t  text-align: left;\n",
+       "\t  outline: none;\n",
+       "\t  font-size: 12px;\n",
+       "\t}\n",
+       "\n",
+       "\t.active, .collapsible:hover {\n",
+       "\t  background-color: #555;\n",
+       "\t}\n",
+       "\t\n",
+       "\t.collapsible:after {\n",
+       "\t  content: '\\002B';\n",
+       "\t  color: white;\n",
+       "\t  font-weight: bold;\n",
+       "\t  float: right;\n",
+       "\t  margin-left: 5px;\n",
+       "\t}\n",
+       "\n",
+       "\t.active:after {\n",
+       "\t  content: \"\\2212\";\n",
+       "\t}\n",
+       "\n",
+       "\t.coll-content-hid {\n",
+       "\t  padding: 0 12px;\n",
+       "\t  display: none;\n",
+       "\t  overflow: hidden;\n",
+       "\t  background-color: #f1f1f1;\n",
+       "\t}\n",
+       "\t.coll-content-vis {\n",
+       "\t  padding: 0 12px;\n",
+       "\t  display: block;\n",
+       "\t  overflow: hidden;\n",
+       "\t  background-color: #f1f1f1;\n",
+       "\t}\n",
+       "\t.visb-messages {\n",
+       "\t  text-align: left;\n",
+       "\t  outline: none;\n",
+       "\t  font-size: 12px;\n",
+       "\t  font-family: arial, sans-serif;\n",
+       "\t}\n",
+       "  </style>\n",
+       "\n",
+       "        \n",
+       "\n",
+       " <script>\n",
+       "   function visualise1(stepNr) {\n",
+       "       setAttr(\"visb_debug_messages\",\"text\",\"Step \"+stepNr+\"/1, State ID: 1\");\n",
+       "Extracting SVG updates from VISB_SVG_UPDATES\n",
+       "       setAttr(\"button\",\"fill\",\"green\");\n",
+       "Extracting SVG updates from VISB_SVG_UPDATES2\n",
+       "       setAttr(\"arrow\",\"visible\",\"TRUE\");\n",
+       "       setAttr(\"arrow\",\"x2\",\"100.0\");\n",
+       "       setAttr(\"arrow\",\"y2\",\"180.0\");\n",
+       "       highlightRow(stepNr);\n",
+       "     }\n",
+       "   async function runAll(delay) {\n",
+       "   visualise1(1);\n",
+       "   setAttr(\"visb_debug_messages\",\"text\",\"Step: 1/1,  State ID: 1,  Event: \");\n",
+       "   await sleep(delay);\n",
+       "   }\n",
+       " </script>\n",
+       "\n",
+       "   <script>\n",
+       "   function registerHovers() {\n",
+       "     var obj;\n",
+       "   obj = document.getElementById(\"button\");\n",
+       "   obj.onmouseover = function(ev){\n",
+       "       setAttr(\"button\",\"stroke\",\"gray\")\n",
+       "       setAttr(\"button\",\"stroke-width\",\"5\")\n",
+       "     };\n",
+       "   obj.onmouseout = function(){\n",
+       "       setAttr(\"button\",\"stroke\",\"black\")\n",
+       "       setAttr(\"button\",\"stroke-width\",\"2\")\n",
+       "     };\n",
+       "   }\n",
+       "  </script>\n",
+       "    </head>\n",
+       "<body>\n",
+       "    <button type=\"button\" class=\"collapsible collapsible-style\">SVG Visualisation</button>\n",
+       "    <div text-align=\"left\"> \n",
+       " \n",
+       "\n",
+       "<svg  xmlns=\"http://www.w3.org/2000/svg\"\n",
+       "      width=\"240\" height=\"200\" viewBox=\"0 0 240 200\" >\n",
+       "Detected VISB_SVG_CONTENTS (requires_nothing)\n",
+       "\n",
+       "   <defs>\n",
+       "    <marker id=\"arrowhead\" markerWidth=\"10\" markerHeight=\"7\"\n",
+       "    refX=\"0\" refY=\"3.5\" orient=\"auto\">\n",
+       "      <polygon points=\"0 0, 10 3.5, 0 7\" />\n",
+       "    </marker>\n",
+       "  </marker>\n",
+       "  </defs>\n",
+       "\n",
+       "Extracting SVG updates from VISB_SVG_UPDATES\n",
+       "Extracting SVG updates from VISB_SVG_UPDATES2\n",
+       " <circle id=\"button\" cx=\"100\" cy=\"100\" fill=\"green\" r=\"80\" stroke=\"black\" stroke-width=\"2\"></circle>\n",
+       " <line id=\"arrow\" marker-end=\"url(#arrowhead)\" stroke=\"gray\" stroke-width=\"2.0\" visible=\"TRUE\" x1=\"100\" x2=\"100.0\" y1=\"100\" y2=\"180.0\"></line>\n",
+       "</svg>\n",
+       " </div>\n",
+       " <button type=\"button\" class=\"collapsible-style\">Trace (length=1)</button>\n",
+       "<div class=\"coll-content-vis\">\n",
+       " <table> <tr> <th>Nr</th> <th>Event</th> <th>Target State ID</th> </tr>\n",
+       "\n",
+       "  <tr id=\"row1\" onclick=\"visualise1(1)\"><td>1</td><td style=\"cursor:pointer\"></td><td><button onclick=\"visualise1(1);\">State 1</button></td></tr>\n",
+       " </table>\n",
+       " </div>\n",
+       " <script> visualise1(1); </script>\n",
+       " </div>\n",
+       " <script> registerHovers() </script>\n",
+       " \n",
+       "<script>\n",
+       "var collapsibles = document.getElementsByClassName(\"collapsible\");\n",
+       "var ii;\n",
+       "\n",
+       "for (ii = 0; ii < collapsibles.length; ii++) {\n",
+       "  collapsibles[ii].addEventListener(\"click\", function() {\n",
+       "    this.classList.toggle(\"active\");\n",
+       "    var content = this.nextElementSibling;\n",
+       "    if (content.style.display === \"block\") {\n",
+       "      content.style.display = \"none\";\n",
+       "    } else {\n",
+       "      content.style.display = \"block\";\n",
+       "    }\n",
+       "  });\n",
+       "}\n",
+       "</script>\n",
+       "\n",
+       "</body>\n",
+       "</html>\n",
+       "\n"
+      ],
+      "text/plain": [
+       "<VisB visualization>"
+      ]
+     },
+     "execution_count": 5,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    ":show"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "id": "a921eeea",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "Executed operation: toggle_button()"
+      ]
+     },
+     "execution_count": 6,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    ":exec toggle_button"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 7,
+   "id": "15eedcc6",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<!DOCTYPE html>\n",
+       "<html>\n",
+       "<head>\n",
+       "     <!-- html file generated by ProB from a VisB visualization -->\n",
+       "     <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
+       "     <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\">\n",
+       "     <script>\n",
+       "        function setAttr(id, attribute, value){\n",
+       "\t\t\tvar obj = document.getElementById(id);\n",
+       "\t\t\tif (obj == null) {\n",
+       "\t\t\t    if (id != \"visb_debug_messages\") {\n",
+       "\t\t\t\t     console.error(\"Unknown SVG id \" + id + \" for attribute \" + attribute);\n",
+       "\t\t\t\t}\n",
+       "\t\t\t} else if(attribute==\"text\") {\n",
+       "\t\t\t\tobj.textContent = value;\n",
+       "\t\t\t} else if(attribute==\"class\" && value != \"\") {\n",
+       "\t\t\t   if(value[0]==\"+\") {\n",
+       "\t\t\t      obj.classList.add(value.substr(1));\n",
+       "\t\t\t   } else if(value[0]==\"-\") {\n",
+       "\t\t\t      obj.classList.remove(value.substr(1));\n",
+       "\t\t\t   } else {\n",
+       "\t\t\t\t  obj.setAttribute(attribute, value);\n",
+       "\t\t\t   }\n",
+       "\t\t\t} else {\n",
+       "\t\t\t\tobj.setAttribute(attribute, value);\n",
+       "\t\t\t}\n",
+       "        }\n",
+       "\t\tfunction sleep(ms) {\n",
+       "\t\t    return new Promise(resolve => setTimeout(resolve, ms));\n",
+       "\t\t}\n",
+       "\t\tvar lastSelectedRow = 0;\n",
+       "\t\tfunction highlightRow(id) {\n",
+       "             if (lastSelectedRow>0) {setAttr(\"row\"+lastSelectedRow,\"bgcolor\",\"\")};\n",
+       "             setAttr(\"row\"+id,\"bgcolor\",\"yellow\");\n",
+       "             lastSelectedRow = id;\n",
+       "\t\t}\n",
+       "\t\tfunction backStep() {\n",
+       "\t\t     if (lastSelectedRow>1) {\n",
+       "\t\t       var prev = lastSelectedRow-1;\n",
+       "\t\t       document.getElementById(\"row\"+prev).click();\n",
+       "\t\t     }\n",
+       "\t\t}\n",
+       "\t\tfunction forwardStep() {\n",
+       "\t\t     if (lastSelectedRow>0) {\n",
+       "\t\t        var nxt = lastSelectedRow+1;\n",
+       "\t\t        var row = document.getElementById(\"row\"+(nxt));\n",
+       "\t\t        if (row != null) { row.click() };\n",
+       "\t\t     }\n",
+       "\t\t}\n",
+       "    </script>\n",
+       "  \n",
+       "\t<style>\n",
+       "\ttable {\n",
+       "\t  font-family: arial, sans-serif;\n",
+       "\t  font-size: 11px;\n",
+       "\t  border-collapse: collapse;\n",
+       "\t  width: 100%;\n",
+       "\t}\n",
+       "\ttd, th {\n",
+       "\t  border: 1px solid #dddddd;\n",
+       "\t  text-align: left;\n",
+       "\t  padding: 2px;\n",
+       "\t}\n",
+       "/* \n",
+       "\ttr:nth-child(even) {\n",
+       "\t  background-color: #dddddd;\n",
+       "\t}\n",
+       " */\n",
+       "\t</style> \n",
+       "\t\n",
+       "\t<style>\n",
+       "\t.collapsible {\n",
+       "\t  cursor: pointer;\n",
+       "\t}\n",
+       "\t.collapsible-style {\n",
+       "\t  background-color: #777;\n",
+       "\t  color: white;\n",
+       "\t  padding: 6px;\n",
+       "\t  width: 100%;\n",
+       "\t  border: none;\n",
+       "\t  text-align: left;\n",
+       "\t  outline: none;\n",
+       "\t  font-size: 12px;\n",
+       "\t}\n",
+       "\n",
+       "\t.active, .collapsible:hover {\n",
+       "\t  background-color: #555;\n",
+       "\t}\n",
+       "\t\n",
+       "\t.collapsible:after {\n",
+       "\t  content: '\\002B';\n",
+       "\t  color: white;\n",
+       "\t  font-weight: bold;\n",
+       "\t  float: right;\n",
+       "\t  margin-left: 5px;\n",
+       "\t}\n",
+       "\n",
+       "\t.active:after {\n",
+       "\t  content: \"\\2212\";\n",
+       "\t}\n",
+       "\n",
+       "\t.coll-content-hid {\n",
+       "\t  padding: 0 12px;\n",
+       "\t  display: none;\n",
+       "\t  overflow: hidden;\n",
+       "\t  background-color: #f1f1f1;\n",
+       "\t}\n",
+       "\t.coll-content-vis {\n",
+       "\t  padding: 0 12px;\n",
+       "\t  display: block;\n",
+       "\t  overflow: hidden;\n",
+       "\t  background-color: #f1f1f1;\n",
+       "\t}\n",
+       "\t.visb-messages {\n",
+       "\t  text-align: left;\n",
+       "\t  outline: none;\n",
+       "\t  font-size: 12px;\n",
+       "\t  font-family: arial, sans-serif;\n",
+       "\t}\n",
+       "  </style>\n",
+       "\n",
+       "        \n",
+       "\n",
+       " <script>\n",
+       "   function visualise0(stepNr) {\n",
+       "       setAttr(\"visb_debug_messages\",\"text\",\"Step \"+stepNr+\"/1, State ID: 0\");\n",
+       "Extracting SVG updates from VISB_SVG_UPDATES\n",
+       "       setAttr(\"button\",\"fill\",\"red\");\n",
+       "Extracting SVG updates from VISB_SVG_UPDATES2\n",
+       "       setAttr(\"arrow\",\"visible\",\"TRUE\");\n",
+       "       setAttr(\"arrow\",\"x2\",\"100.0\");\n",
+       "       setAttr(\"arrow\",\"y2\",\"20.0\");\n",
+       "       highlightRow(stepNr);\n",
+       "     }\n",
+       "   async function runAll(delay) {\n",
+       "   visualise0(1);\n",
+       "   setAttr(\"visb_debug_messages\",\"text\",\"Step: 1/1,  State ID: 0,  Event: \");\n",
+       "   await sleep(delay);\n",
+       "   }\n",
+       " </script>\n",
+       "\n",
+       "   <script>\n",
+       "   function registerHovers() {\n",
+       "     var obj;\n",
+       "   obj = document.getElementById(\"button\");\n",
+       "   obj.onmouseover = function(ev){\n",
+       "       setAttr(\"button\",\"stroke\",\"gray\")\n",
+       "       setAttr(\"button\",\"stroke-width\",\"5\")\n",
+       "     };\n",
+       "   obj.onmouseout = function(){\n",
+       "       setAttr(\"button\",\"stroke\",\"black\")\n",
+       "       setAttr(\"button\",\"stroke-width\",\"2\")\n",
+       "     };\n",
+       "   }\n",
+       "  </script>\n",
+       "    </head>\n",
+       "<body>\n",
+       "    <button type=\"button\" class=\"collapsible collapsible-style\">SVG Visualisation</button>\n",
+       "    <div text-align=\"left\"> \n",
+       " \n",
+       "\n",
+       "<svg  xmlns=\"http://www.w3.org/2000/svg\"\n",
+       "      width=\"240\" height=\"200\" viewBox=\"0 0 240 200\" >\n",
+       "Detected VISB_SVG_CONTENTS (requires_nothing)\n",
+       "\n",
+       "   <defs>\n",
+       "    <marker id=\"arrowhead\" markerWidth=\"10\" markerHeight=\"7\"\n",
+       "    refX=\"0\" refY=\"3.5\" orient=\"auto\">\n",
+       "      <polygon points=\"0 0, 10 3.5, 0 7\" />\n",
+       "    </marker>\n",
+       "  </marker>\n",
+       "  </defs>\n",
+       "\n",
+       "Extracting SVG updates from VISB_SVG_UPDATES\n",
+       "Extracting SVG updates from VISB_SVG_UPDATES2\n",
+       " <circle id=\"button\" cx=\"100\" cy=\"100\" fill=\"red\" r=\"80\" stroke=\"black\" stroke-width=\"2\"></circle>\n",
+       " <line id=\"arrow\" marker-end=\"url(#arrowhead)\" stroke=\"gray\" stroke-width=\"2.0\" visible=\"TRUE\" x1=\"100\" x2=\"100.0\" y1=\"100\" y2=\"20.0\"></line>\n",
+       "</svg>\n",
+       " </div>\n",
+       " <button type=\"button\" class=\"collapsible-style\">Trace (length=1)</button>\n",
+       "<div class=\"coll-content-vis\">\n",
+       " <table> <tr> <th>Nr</th> <th>Event</th> <th>Target State ID</th> </tr>\n",
+       "\n",
+       "  <tr id=\"row1\" onclick=\"visualise0(1)\"><td>1</td><td style=\"cursor:pointer\"></td><td><button onclick=\"visualise0(1);\">State 0</button></td></tr>\n",
+       " </table>\n",
+       " </div>\n",
+       " <script> visualise0(1); </script>\n",
+       " </div>\n",
+       " <script> registerHovers() </script>\n",
+       " \n",
+       "<script>\n",
+       "var collapsibles = document.getElementsByClassName(\"collapsible\");\n",
+       "var ii;\n",
+       "\n",
+       "for (ii = 0; ii < collapsibles.length; ii++) {\n",
+       "  collapsibles[ii].addEventListener(\"click\", function() {\n",
+       "    this.classList.toggle(\"active\");\n",
+       "    var content = this.nextElementSibling;\n",
+       "    if (content.style.display === \"block\") {\n",
+       "      content.style.display = \"none\";\n",
+       "    } else {\n",
+       "      content.style.display = \"block\";\n",
+       "    }\n",
+       "  });\n",
+       "}\n",
+       "</script>\n",
+       "\n",
+       "</body>\n",
+       "</html>\n",
+       "\n"
+      ],
+      "text/plain": [
+       "<VisB visualization>"
+      ]
+     },
+     "execution_count": 7,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    ":show"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "8e25955c",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "ProB 2",
+   "language": "prob",
+   "name": "prob2"
+  },
+  "language_info": {
+   "codemirror_mode": "prob2_jupyter_repl",
+   "file_extension": ".prob",
+   "mimetype": "text/x-prob2-jupyter-repl",
+   "name": "prob"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}
+%% Cell type:markdown id:c91030ef tags:
+
+# Test VisB Rendering
+
+%% Cell type:code id:30b8bf50 tags:
+
+``` prob
+::load
+MACHINE button_def
+// An example that uses VisB DEFINITIONS instead of a JSON and SVG file
+DEFINITIONS
+  VISB_JSON_FILE == ""; // "button.svg";
+  VISB_SVG_BOX == rec(height:200, width:240);
+  VISB_SVG_CONTENTS == '''
+   <defs>
+    <marker id="arrowhead" markerWidth="10" markerHeight="7"
+    refX="0" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" />
+    </marker>
+  </marker>
+  </defs>
+''';
+  VISB_SVG_OBJECTS == rec(`id`:"button", svg_class:"circle",
+     cx:"100",cy:"100", r:"80",
+     stroke:"black", `stroke-width`:"2");
+  VISB_SVG_UPDATES == rec(`id`:"button",
+     fill: IF button=TRUE THEN "green" ELSE "red" END);
+  VISB_SVG_HOVERS == rec(`id`:"button",
+     stroke:"gray", `stroke-width`:"5");
+
+  VISB_SVG_OBJECTS_ARROW == rec( svg_class:"line",
+         `id`: "arrow",
+          stroke:"gray",
+          `stroke-width`:2.0,
+          x1:100, y1:100,
+          `marker-end`: "url(#arrowhead)");
+  VISB_SVG_UPDATES2 == rec(`id`:"arrow",
+                           visible:"TRUE",
+                           y2:IF button=TRUE THEN 180.0 ELSE 20.0 END,
+                           x2:100.0);
+VARIABLES button
+INVARIANT button:BOOL
+INITIALISATION button := FALSE
+OPERATIONS
+  toggle_button /* desc change status of button */ = BEGIN
+    button:= bool(button=FALSE)
+  END
+END
+```
+
+%% Output
+
+    Loaded machine: button_def
+
+%% Cell type:code id:91082d92 tags:
+
+``` prob
+:init
+```
+
+%% Output
+
+    Executed operation: INITIALISATION()
+
+%% Cell type:code id:7eee20b7 tags:
+
+``` prob
+:show
+```
+
+%% Output
+
+    <VisB visualization>
+
+%% Cell type:code id:0e4f3287 tags:
+
+``` prob
+:exec toggle_button
+```
+
+%% Output
+
+    Executed operation: toggle_button()
+
+%% Cell type:code id:1d766206 tags:
+
+``` prob
+:show
+```
+
+%% Output
+
+    <VisB visualization>
+
+%% Cell type:code id:a921eeea tags:
+
+``` prob
+:exec toggle_button
+```
+
+%% Output
+
+    Executed operation: toggle_button()
+
+%% Cell type:code id:15eedcc6 tags:
+
+``` prob
+:show
+```
+
+%% Output
+
+    <VisB visualization>
+
+%% Cell type:code id:8e25955c tags:
+
+``` prob
+```