iindex.html main.js js include visu-separator

In order to place the separator between the two visu elements, create
the separator code in the javascript code, rather than have it hard
coded into the index.html file

See #3603

browser/index.html

@@ -331,23 +331,6 @@
 
             <!-- VISU-CONTAINER  -->
             <div id="visu-container">
-                <div id="visu-separator" >...
-                    <div class="visu2_menu_anchor devel-mode">
-                        <div class="visu2_menu">
-                            <div class="visu2_menu_content">
-                                <label for="visu2_mode_sp" onclick="switch_visu2('scatterplot')">
-                                    scatterplot
-                                    <input id="visu2_mode_sp" name="visu2_mode" type="radio"/>
-                                </label>
-                                <label for="visu2_mode_gr" onclick="switch_visu2('graph')">
-                                    graph
-                                    <input id="visu2_mode_gr" name="visu2_mode" type="radio" checked/>
-                                </label>
-                            </div>
-                            mode
-                        </div>
-                    </div>
-                </div>
             </div>
 
         </div>

browser/js/main.js

@@ -51,6 +51,27 @@ var notification = new Notification(m)
 try {
     var vmi = new VMI();
     vmi.setupDrawer();
+
+    /* use template to create DOM elements from string */
+    var template = document.createElement('template');
+    template.innerHTML = "<div id=\"visu-separator\" >...\
+                    <div class=\"visu2_menu_anchor devel-mode\">\
+                        <div class=\"visu2_menu\">\
+                            <div class=\"visu2_menu_content\">\
+                                <label for=\"visu2_mode_sp\" onclick=\"switch_visu2('scatterplot')\">\
+                                    scatterplot\
+                                    <input id=\"visu2_mode_sp\" name=\"visu2_mode\" type=\"radio\"/>\
+                                </label>\
+                                <label for=\"visu2_mode_gr\" onclick=\"switch_visu2('graph')\">\
+                                    graph\
+                                    <input id=\"visu2_mode_gr\" name=\"visu2_mode\" type=\"radio\" checked/>\
+                                </label>\
+                            </div>\
+                            mode\
+                        </div>\
+                    </div>\
+                </div>";
+    var separator = template.content.firstChild;
     var panel_instructions = [{'mid-container': ["left-container", "visu-container"]},"bot-container"];
     vmi.setupPanels(panel_instructions, document.body);
 
@@ -58,6 +79,7 @@ try {
     vmi.addView("info", "left-container", "");
     vmi.addView("list", "left-container", "");
     vmi.addView("visu2", "visu-container", "");
+    document.getElementById("mid-container").appendChild(separator);
     vmi.addView("visu", "visu-container", "");
     vmi.addView("segmenter", "bot-container", "");
     vmi.setOverlays(["info-row", "list-row", "data-row", "visu-container", "bot-container"]);