diff --git a/notebooks/tests/VisB_Test.ipynb b/notebooks/tests/VisB_Test.ipynb
index 98ad77f67acf7e9f27cb4b63e84546ca5b759f37..8ec01d333e35a7ea7224363e19cbeefd48409cda 100644
--- a/notebooks/tests/VisB_Test.ipynb
+++ b/notebooks/tests/VisB_Test.ipynb
@@ -225,10 +225,10 @@
" <script>\n",
" function visualise0(stepNr) {\n",
" setAttr(\"visb_debug_messages\",\"text\",\"Step \"+stepNr+\"/1, State ID: 0\");\n",
- " setAttr(\"button\",\"fill\",\"red\");\n",
- " setAttr(\"arrow\",\"visible\",\"TRUE\");\n",
- " setAttr(\"arrow\",\"x2\",\"100.0\");\n",
- " setAttr(\"arrow\",\"y2\",\"20.0\");\n",
+ " setAttr(\"visb__1.button\",\"fill\",\"red\");\n",
+ " setAttr(\"visb__1.arrow\",\"visible\",\"TRUE\");\n",
+ " setAttr(\"visb__1.arrow\",\"x2\",\"100.0\");\n",
+ " setAttr(\"visb__1.arrow\",\"y2\",\"20.0\");\n",
" }\n",
" async function runAll(delay) {\n",
" visualise0(1);\n",
@@ -240,14 +240,14 @@
" <script>\n",
" function registerHovers() {\n",
" var obj;\n",
- " obj = document.getElementById(\"button\");\n",
+ " obj = document.getElementById(\"visb__1.button\");\n",
" obj.onmouseover = function(ev){\n",
- " setAttr(\"button\",\"stroke\",\"gray\")\n",
- " setAttr(\"button\",\"stroke-width\",\"5\")\n",
+ " setAttr(\"visb__1.button\",\"stroke\",\"gray\")\n",
+ " setAttr(\"visb__1.button\",\"stroke-width\",\"5\")\n",
" };\n",
" obj.onmouseout = function(){\n",
- " setAttr(\"button\",\"stroke\",\"black\")\n",
- " setAttr(\"button\",\"stroke-width\",\"2\")\n",
+ " setAttr(\"visb__1.button\",\"stroke\",\"black\")\n",
+ " setAttr(\"visb__1.button\",\"stroke-width\",\"2\")\n",
" };\n",
" }\n",
" </script>\n",
@@ -266,8 +266,8 @@
" </marker>\n",
" </defs>\n",
"\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",
+ " <circle id=\"visb__1.button\" cx=\"100\" cy=\"100\" fill=\"red\" r=\"80\" stroke=\"black\" stroke-width=\"2\"></circle>\n",
+ " <line id=\"visb__1.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",
" <script> visualise0(1); </script>\n",
@@ -464,10 +464,10 @@
" <script>\n",
" function visualise1(stepNr) {\n",
" setAttr(\"visb_debug_messages\",\"text\",\"Step \"+stepNr+\"/1, State ID: 1\");\n",
- " setAttr(\"button\",\"fill\",\"green\");\n",
- " setAttr(\"arrow\",\"visible\",\"TRUE\");\n",
- " setAttr(\"arrow\",\"x2\",\"100.0\");\n",
- " setAttr(\"arrow\",\"y2\",\"180.0\");\n",
+ " setAttr(\"visb__2.button\",\"fill\",\"green\");\n",
+ " setAttr(\"visb__2.arrow\",\"visible\",\"TRUE\");\n",
+ " setAttr(\"visb__2.arrow\",\"x2\",\"100.0\");\n",
+ " setAttr(\"visb__2.arrow\",\"y2\",\"180.0\");\n",
" }\n",
" async function runAll(delay) {\n",
" visualise1(1);\n",
@@ -479,14 +479,14 @@
" <script>\n",
" function registerHovers() {\n",
" var obj;\n",
- " obj = document.getElementById(\"button\");\n",
+ " obj = document.getElementById(\"visb__2.button\");\n",
" obj.onmouseover = function(ev){\n",
- " setAttr(\"button\",\"stroke\",\"gray\")\n",
- " setAttr(\"button\",\"stroke-width\",\"5\")\n",
+ " setAttr(\"visb__2.button\",\"stroke\",\"gray\")\n",
+ " setAttr(\"visb__2.button\",\"stroke-width\",\"5\")\n",
" };\n",
" obj.onmouseout = function(){\n",
- " setAttr(\"button\",\"stroke\",\"black\")\n",
- " setAttr(\"button\",\"stroke-width\",\"2\")\n",
+ " setAttr(\"visb__2.button\",\"stroke\",\"black\")\n",
+ " setAttr(\"visb__2.button\",\"stroke-width\",\"2\")\n",
" };\n",
" }\n",
" </script>\n",
@@ -505,8 +505,8 @@
" </marker>\n",
" </defs>\n",
"\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",
+ " <circle id=\"visb__2.button\" cx=\"100\" cy=\"100\" fill=\"green\" r=\"80\" stroke=\"black\" stroke-width=\"2\"></circle>\n",
+ " <line id=\"visb__2.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",
" <script> visualise1(1); </script>\n",
@@ -703,10 +703,10 @@
" <script>\n",
" function visualise0(stepNr) {\n",
" setAttr(\"visb_debug_messages\",\"text\",\"Step \"+stepNr+\"/1, State ID: 0\");\n",
- " setAttr(\"button\",\"fill\",\"red\");\n",
- " setAttr(\"arrow\",\"visible\",\"TRUE\");\n",
- " setAttr(\"arrow\",\"x2\",\"100.0\");\n",
- " setAttr(\"arrow\",\"y2\",\"20.0\");\n",
+ " setAttr(\"visb__3.button\",\"fill\",\"red\");\n",
+ " setAttr(\"visb__3.arrow\",\"visible\",\"TRUE\");\n",
+ " setAttr(\"visb__3.arrow\",\"x2\",\"100.0\");\n",
+ " setAttr(\"visb__3.arrow\",\"y2\",\"20.0\");\n",
" }\n",
" async function runAll(delay) {\n",
" visualise0(1);\n",
@@ -718,14 +718,14 @@
" <script>\n",
" function registerHovers() {\n",
" var obj;\n",
- " obj = document.getElementById(\"button\");\n",
+ " obj = document.getElementById(\"visb__3.button\");\n",
" obj.onmouseover = function(ev){\n",
- " setAttr(\"button\",\"stroke\",\"gray\")\n",
- " setAttr(\"button\",\"stroke-width\",\"5\")\n",
+ " setAttr(\"visb__3.button\",\"stroke\",\"gray\")\n",
+ " setAttr(\"visb__3.button\",\"stroke-width\",\"5\")\n",
" };\n",
" obj.onmouseout = function(){\n",
- " setAttr(\"button\",\"stroke\",\"black\")\n",
- " setAttr(\"button\",\"stroke-width\",\"2\")\n",
+ " setAttr(\"visb__3.button\",\"stroke\",\"black\")\n",
+ " setAttr(\"visb__3.button\",\"stroke-width\",\"2\")\n",
" };\n",
" }\n",
" </script>\n",
@@ -744,8 +744,8 @@
" </marker>\n",
" </defs>\n",
"\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",
+ " <circle id=\"visb__3.button\" cx=\"100\" cy=\"100\" fill=\"red\" r=\"80\" stroke=\"black\" stroke-width=\"2\"></circle>\n",
+ " <line id=\"visb__3.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",
" <script> visualise0(1); </script>\n",
diff --git a/src/main/java/de/prob2/jupyter/commands/ShowCommand.java b/src/main/java/de/prob2/jupyter/commands/ShowCommand.java
index 29b278a50c691f2a9a39008466e353c37ff3f6ea..c4f343675492018ccaa0aa7dc83d32c2b43c9121 100644
--- a/src/main/java/de/prob2/jupyter/commands/ShowCommand.java
+++ b/src/main/java/de/prob2/jupyter/commands/ShowCommand.java
@@ -165,7 +165,11 @@ public final class ShowCommand implements Command {
return null;
}
- GetVisBHtmlForStates htmlCmd = new GetVisBHtmlForStates(state, VisBExportOptions.DEFAULT.withShowHeader(false).withShowVersionInfo(false));
+ VisBExportOptions options = VisBExportOptions.DEFAULT
+ .withShowHeader(false)
+ .withShowVersionInfo(false)
+ .withAutoIdPrefix();
+ GetVisBHtmlForStates htmlCmd = new GetVisBHtmlForStates(state, options);
state.getStateSpace().execute(htmlCmd);
final DisplayData result = new DisplayData("<VisB visualization>");