diff test-data/index.html @ 3:5784e268efca draft

"planemo upload for repository https://github.com/galaxyproject/tools-iuc/tree/master/tools/antismash commit 19cbd26d33334a903a2028d463b2132cdd1f7e57"
author bgruening
date Sun, 09 Aug 2020 10:15:12 -0400
parents 593bb8f5488b
children e78e25d3b4bd
line wrap: on
line diff
--- a/test-data/index.html	Sat Feb 10 02:37:49 2018 -0500
+++ b/test-data/index.html	Sun Aug 09 10:15:12 2020 -0400
@@ -1,273 +1,360 @@
+
 <!doctype html>
-<html>
-  <head>
-    <title>ARBH01000003.1 - 1 clusters - antiSMASH results</title>
-    <link rel="stylesheet" type="text/css" href="css/bacteria.css">
-    <meta charset="utf-8">
-  </head>
-  <body>
-    <div id="header">
-      <div class="top-header">
-        <img class="antismash-logo" src="images/bacteria_logo.png" alt="antiSMASH">
-        <span class="antismash-title"><a class="main-link" href="http://antismash.secondarymetabolites.org/">antibiotics &amp; Secondary Metabolite Analysis SHell</a><br>
-            <span class="white">Version <span id="antismash-version">4.0.2</span></span>
-        </span>
-        <div id="icons">
-          <a class="main-link" href="http://antismash.secondarymetabolites.org/"><img src="images/bacteria_home.png" alt="home" title="Go to start page"></a>
-          <a class="help-link" href="http://antismash.secondarymetabolites.org/#!/help"><img src="images/bacteria_help.png" alt="help" title="Get help using antiSMASH"></a>
-          <a class="about-link" href="http://antismash.secondarymetabolites.org/#!/about"><img src="images/bacteria_about.png" alt="about" title="About antiSMASH"></a>
-          <a href="#" id="download"><img src="images/bacteria_download.png" alt="download" title="Download results"></a>
-          <div id="downloadmenu">
-            <ul id="downloadoptions">
-            <li><a href="ARBH01000003.1.zip">Download all results</a></li><li><a href="ARBH01000003.1.geneclusters.xls">Download XLS overview file</a></li><li><a href="ARBH01000003.1.final.embl">Download EMBL summary file</a></li><li><a href="ARBH01000003.1.final.gbk">Download GenBank summary file</a></li></ul>
-          </div>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>input_tempfile - 1 region(s) - antiSMASH results</title>
+  <style>img {width: 20px; height: 20px;}</style>
+  <link rel="stylesheet" type="text/css" href="css/bacteria.css">
+  <meta property="og:title" content="input_tempfile - 1 record(s) - 1 region(s)" />
+  <meta property="og:description" content="">
+  <meta property="og:image" content="https://antismash.secondarymetabolites.org/images/bacteria_logo.png" />
+  <meta property="og:image:alt" content="antiSMASH logo" />
+  <meta property="og:image:width" content="600" />
+  <meta property="og:image:height" content="600" />
+  <meta property="og:url" content="https://antismash.secondarymetabolites.org/upload/input_tempfile/index.html" />
+  <meta property="og:type" content="website" />
+  <meta name="twitter:card" content="summary" />
+  <meta name="twitter:site" content="@antismash_dev" />
+</head>
+
+<body>
+  <div id="header">
+      <nav>
+    <div class="main-link">
+     <div>
+        <a href="https://antismash.secondarymetabolites.org/">
+          <img src="images/bacteria_antismash_logo.svg" alt="antiSMASH logo" style="width:40px;height:unset;">
+        </a>
+       </div>
+       <div>
+        <a href="https://antismash.secondarymetabolites.org/">
+          antiSMASH version 5.1.2
+        </a>
+      </div>
+    </div>
+    <div class="custom-description"></div>
+    <div class="ancillary-links">
+      <div class="ancillary-link dropdown-menu" id="download-dropdown"><a href="#" id="download-dropdown-link"><img src="images/download.svg" alt="download"> &nbsp; Download</a>
+        <ul class="dropdown-options">
+        
+        <li><a href="input_tempfile.zip">Download all results</a></li>
+        
+          <li><a href="input_tempfile.gbk">Download GenBank summary file</a></li>
+        
+        </ul>
+      </div>
+      <div class="ancillary-link"><a href="https://antismash.secondarymetabolites.org/#!/about"><img src="images/about.svg" alt="about"> &nbsp; About</a></div>
+      <div class="ancillary-link"><a href="https://docs.antismash.secondarymetabolites.org/"><img src="images/help.svg" alt="help"> &nbsp; Help</a></div>
+      <div class="ancillary-link"><a href="https://antismash.secondarymetabolites.org/#!/contact"><img src="images/contact.svg" alt="contact"> &nbsp; Contact</a></div>
+    </div>
+  </nav>
+    <div id="buttons">
+      <span id="region-type">Select genomic region:</span>
+      <div id="regionbuttons">
+        <div class="arrow-left" id="prev-region"></div>
+        <div class="regbutton" style="min-width: inherit;"><a href="#">Overview</a></div>
+        <div style="display: flex; flex-wrap: wrap">
+        
+          
+            
+            
+            <div class="regbutton T1PKS r1c1">
+              <a href="#r1c1">1.1</a>
+            </div>
+          
+        
         </div>
-      </div>
-      <div id="buttons">
-        <span id="cluster-type">Select Gene Cluster:</span>
-        <ul id="clusterbuttons">
-          <li><div class="arrow-left" id="prev-cluster"></div></li>
-          <li class="clbutton"><a href="#">Overview</a></li>
-          <li class="clbutton t1pks cluster-1"><a href="#cluster-1">1</a></li><li id="last-clbutton"><div class="arrow-right" id="next-cluster"></div></li>
-        </ul>
+        <div id="last-regbutton"><div class="arrow-right" id="next-region"></div></div>
       </div>
     </div>
-
-    <!-- overview page -->
-    <div class="page" id="overview">
-      <h3>Identified secondary metabolite clusters<span id="truncated"></span></h3>
-      <table id="cluster-overview">
-        <thead>
-          <tr>
-            <th>Cluster</th>
-            <th>Type</th>
-            <th>From</th>
-            <th>To</th>
-            <th>Most similar known cluster</th>
-            <th>MIBiG BGC-ID</th>
-          </tr>
-        </thead>
-        <tbody>
-        <tr class="separator-row"><td class="separator-text" colspan="2">The following clusters are from record ARBH01000003.1:</td></tr><tr><td class="clbutton t1pks"><a href="#cluster-1">Cluster 1</a></td><td><a href="http://antismash.secondarymetabolites.org/help#t1pks" target="_blank">T1pks</a></td><td class="digits">1</td><td class="digits">3500</td><td>-</td><td>-</td></tr></tbody>
-      </table>
-    </div>
+  </div>
 
-    <div class="page" id="cluster-1"><h3>ARBH01000003.1 - Cluster 1 - T1pks</h3><div class="sidepanel"><div class="structure"><h3>Predicted core structure</h3><a href="images/nostructure_icon.png" target="_new"><img src="images/nostructure_icon.png"></a><div class="as-structure-warning">Rough prediction of core scaffold based on assumed PKS/NRPS colinearity; tailoring reactions not taken into account</div></div><div class="more-details"><h3>Prediction details</h3><dl class="prediction-text"><dt>Monomers prediction:</dt><dd>(mal)</dd><dt>ctg1_1</dt><dd>PKS signature: mal<br></dd><dd>Minowa: mal<br></dd><dd>consensus: mal<br></dd></dl></div></div><div class="content"><div class="description-container"><h3>Gene cluster description</h3><div class="cluster-download"><a href="ARBH01000003.1.cluster001.gbk">Download cluster GenBank file</a></div><div class="description-text">ARBH01000003.1 - Gene Cluster 1. Type = t1pks. Location: 1 - 3500 nt. Click on genes for more information.</div><a class="cluster-rules-header" id="cluster-1-rules-header" href="#cluster-1">Show pHMM detection rules used</a><div class="cluster-rules" id="cluster-1-rules">t1pks: ((PKS_KS &amp; PKS_AT) or (ene_KS &amp; PKS_AT) or (mod_KS &amp; PKS_AT) or (hyb_KS &amp; PKS_AT) or (itr_KS &amp; PKS_AT) or (tra_KS &amp; PKS_AT))<br></div><div id="cluster-1-svg"></div></div><div class="legend"><h4>Legend:</h4><div><div><div class="legend-field legend-type-biosynthetic"></div><div class="legend-label">core biosynthetic genes</div></div><div><div class="legend-field legend-type-biosynthetic-additional"></div><div class="legend-label">additional biosynthetic genes</div></div><div><div class="legend-field legend-type-transport"></div><div class="legend-label">transport-related genes</div></div><div><div class="legend-field legend-type-regulatory"></div><div class="legend-label">regulatory genes</div></div><div><div class="legend-field legend-type-other"></div><div class="legend-label">other genes</div></div></div></div><div class="details"><h3>Detailed annotation</h3><div class="details-svg" id="cluster-1-details-svg"></div></div></div></div><div id="footer">
-      <div id="logos">
-      	<table id="logo-table">
-      		<tr>
-      			<td>
-        			<img src="images/tueblogo.gif">
-        		</td>
-        		<td>
-        			<img src="images/ruglogo.gif">
-        		</td>
-        		<td>
-        			<img src="images/ucsflogo.gif">
-        		</td>
-        		<td>
-				<img src="images/wur-logo.png">
-        		</td>
-        	</tr>
-        	<tr>
-        		<td>
-        			<img src="images/uomlogo.jpg">
-        		</td>
-        		<td>
-        			<img src="images/dziflogo.png">
-        		</td>
-        		<td>
-        			<img src="images/cfb-logo.png">
-        		</td>
-        		<td>
-        		</td>
-        	</tr>
-        </table>
+  <!-- overview page -->
+  
+  <div class="page" id="overview">
+   
+   
+     <h3>Identified secondary metabolite regions using strictness &#39;relaxed&#39;<span id="truncated"></span></h3>
+   
+   <div class="overview-layout">
+    <div id="record-tables">
+     <div id="single-record-tables">
+     <div class="record-overview-header">
+       <strong>ARBH01000003.1</strong>
       </div>
-      <div id="copyright">
-        If you have found antiSMASH useful, please <a href="http://antismash.secondarymetabolites.org/about">cite us</a>.
+      <div class="record-overview-details">
+        <svg id="record-minimap-1" class="record-overview-svg" height="1" width="1"></svg>
+        <table class="region-table">
+ <thead>
+  <tr>
+   <th>Region</th>
+   <th>Type</th>
+   <th>From</th>
+   <th>To</th>
+   <th colspan="2">Most similar known cluster</th>
+   <th>Similarity</th>
+  </tr>
+ </thead>
+ <tbody>
+ <tr class="linked-row odd" data-anchor="#r1c1">
+     
+     
+     <td class="regbutton T1PKS r1c1">
+      <a href="#r1c1">Region&nbsp1</a>
+     </td>
+     <td>
+       
+       <a class="external-link" href="https://docs.antismash.secondarymetabolites.org/glossary/#t1pks" target="_blank">T1PKS</a>
+     </td>
+     <td class="digits">1</td>
+     <td class="digits table-split-left">3,500</td>
+     
+      <td colspan="3"></td>
+     
+   </tr>
+ 
+ </tbody>
+</table>
+      </div>
+     </div>
+     
+     
+    </div>
+    
+   </div>
+  </div>
+  
+
+
+
+
+
+
+<div class="page" id='r1c1' style="display: none;">
+ <div class="region-grid">
+  <div class = "content">
+    <div class ="description-container">
+      <div class="heading"> ARBH01000003.1 - Region 1 - T1PKS <div class="help-container"> <div class="help-icon" data-id="region_svg-help-4"></div> <span class="help-tooltip" id="region_svg-help-4">Shows the layout of the region, marking coding sequences and areas of interest. Clicking a gene will select it and show any relevant details. Clicking an area feature (e.g. a candidate cluster) will select all coding sequences within that area. Double clicking an area feature will zoom to that area. Multiple genes and area features can be selected by clicking them while holding the Ctrl key.<br>More detailed help is available <a class='external-link' href='https://docs.antismash.secondarymetabolites.org/understanding_output/#the-antismash-5-region-concept' target='_blank'>here</a>.</span></div></div>
+      <div class="region-download">
+        <a href = ARBH01000003.1.region001.gbk>Download region GenBank file</a>
+      </div>
+      <div class = 'description-text'>
+        Location: 1 - 3,500 nt. (total: 3,500 nt)
+        
+        <a class="cluster-rules-header" id="r1c1-rules-header" href="#r1c1">Show pHMM detection rules used</a>
+        
+        
+          <div class="contig-edge-warning">Region on contig edge.</div>
+        
+      </div>
+      
+      <div class="cluster-rules" id="r1c1-rules">T1PKS: cds(PKS_AT and (PKS_KS or ene_KS or mod_KS or hyb_KS or itr_KS or tra_KS))</div>
+      
+      <div class="region-svg-container">
+       <div id='r1c1-svg'>
+       </div>
       </div>
     </div>
-
-    <script src="js/jquery.js"></script>
-    <script src="js/purl.js"></script>
-    <script src="js/d3.v2.js"></script>
-    <script src="js/svgene.js"></script>
-    <script src="js/jsdomain.js"></script>
-    <script src="js/clusterblast.js"></script>
-    <script src="js/domainalign.js"></script>
-    <script src="geneclusters.js"></script>
-    <script type="text/javascript">
-function toggle_downloadmenu(event) {
-    event.preventDefault();
-    $("#downloadmenu").fadeToggle("fast", "linear");
-}
-
-function switch_to_cluster() {
-    setTimeout(function() {
-        var url = $.url();
-        $(".page").hide();
-        $("li.clbutton").removeClass("active");
-        var anchor = url.data.attr.fragment;
-        if (anchor == "") {
-            anchor = "overview";
-        }
-        $("#" + anchor).show();
-        if (anchor != "overview") {
-          $("li.clbutton." + anchor).addClass("active");
-        }
-
-        if (geneclusters[anchor] !== undefined) {
-            svgene.drawClusters(anchor+"-svg", [geneclusters[anchor]], 20, 700);
-        }
-        if ($("#" + anchor + "-details-svg").length > 0) {
-            jsdomain.drawDomains(anchor+ "-details-svg", details_data[anchor], 40, 700);
-        }
-        $("#" + anchor + " .clusterblast-selector").change();
-        $("#" + anchor + " .domainalign-selector").change();
-    }, 1);
-}
+    <div class="legend">
+      <h4>Legend:</h4>
+      <div class="legend-items">
+        <div class="button-like legend-selector" data-id="legend-type-biosynthetic">
+      <div class="legend-field legend-type-biosynthetic"></div>
+      <div class="legend-label">core biosynthetic genes</div>
+    </div>
+        <div class="button-like legend-selector" data-id="legend-type-biosynthetic-additional">
+      <div class="legend-field legend-type-biosynthetic-additional"></div>
+      <div class="legend-label">additional biosynthetic genes</div>
+    </div>
+        <div class="button-like legend-selector" data-id="legend-type-transport">
+      <div class="legend-field legend-type-transport"></div>
+      <div class="legend-label">transport-related genes</div>
+    </div>
+        <div class="button-like legend-selector" data-id="legend-type-regulatory">
+      <div class="legend-field legend-type-regulatory"></div>
+      <div class="legend-label">regulatory genes</div>
+    </div>
+        <div class="button-like legend-selector" data-id="legend-type-other">
+      <div class="legend-field legend-type-other"></div>
+      <div class="legend-label">other genes</div>
+    </div>
+        <div style="margin-right: 2em;"></div>
+        <div class="button-like legend-selector" data-id="legend-resistance">
+        <div class="legend-symbol">
+            <svg viewbox="0 0 8 8">
+                <rect x=0 y=2 height=4 width=8 class="svgene-resistance"></rect>
+            </svg>
+        </div>
+        <div class="legend-label">resistance</div>
+    </div>
+        
+            <div class="button-like legend-selector" data-id="legend-tta-codon">
+        <div class="legend-symbol">
+                <svg viewbox="0 0 6 6">
+                    <polyline class="svgene-tta-codon" points="3,0 0,6 6,6 3,0"></rect>
+                </svg>
+            </div>
+        <div class="legend-label">TTA codons</div>
+    </div>
+        
+        
+        
+      </div>
+    </div>
+    <div class="zoom-buttons">
+      <div class="button-like zoom-button zoom-reset"><img src="images/expand-arrows-alt-solid.svg" alt="reset zoom">reset view</div>
+      <div class="button-like zoom-button zoom-in"><img src="images/search-solid.svg" alt="zoom">zoom to selection</div>
+    </div>
+  </div>
 
-function next_cluster() {
-    var num_clusters = Object.keys(geneclusters).length;
-    var url = $.url();
-    var anchor = url.data.attr.fragment;
-    var href = "#" + anchor;
-    if (anchor == "" || anchor == "overview") {
-        anchor = "cluster-0";
-    }
-    var cluster_number = parseInt(anchor.split('-')[1]);
-    var next_cluster_number = cluster_number + 1;
-    if (next_cluster_number <= num_clusters) {
-        href = "#cluster-" + next_cluster_number;
-    } else {
-        href = "#overview";
-    }
-    window.location.href = href;
-    switch_to_cluster();
-}
-
-function previous_cluster() {
-    var num_clusters = Object.keys(geneclusters).length;
-    var url = $.url();
-    var anchor = url.data.attr.fragment;
-    var href = "#" + anchor;
-    if (anchor == "" || anchor == "overview") {
-        anchor = "cluster-0";
-    }
-    var cluster_number = parseInt(anchor.split('-')[1]);
-    var prev_cluster_number = cluster_number - 1;
-    if (prev_cluster_number == 0 ) {
-        href = "#overview";
-    } else if (prev_cluster_number < 0){
-        href = "#cluster-" + num_clusters;
-    } else {
-        href = "#cluster-" + prev_cluster_number;
-    }
-    window.location.href = href;
-    switch_to_cluster();
-}
-
-function toggle_cluster_rules(ev) {
-    ev.preventDefault();
-    var id = $(this).attr('id').replace(/-header/, '');
-    var rules = $('#' + id);
-    if (rules.css('display') == "none") {
-        $(this).text('Hide pHMM detection rules used');
-    } else {
-        $(this).text('Show pHMM detection rules used');
-    }
-    rules.fadeToggle("fast", "linear");
-}
+  <div class="focus-panel">
+    <div class="heading">
+      <span>Gene details</span>
+      <div class="help-container"> <div class="help-icon" data-id="focus-panel-help-5"></div> <span class="help-tooltip" id="focus-panel-help-5">Shows details of the most recently selected gene, including names, products, location, and other annotations.</span></div>
+    </div>
+    <div class="focus-panel-content focus-panel-content-r1c1">
+        <div style="text-align: center; margin-top: 30%;">
+            Select a gene to view the details available for it
+        </div>
+    </div>
+  </div>
 
-function map_type_to_desc(type) {
-    switch(type) {
-      case "nrps": return "NRPS";
-      case "t1pks": return "Type I PKS";
-      case "t2pks": return "Type II PKS";
-      case "t3pks": return "Type III PKS";
-      case "t4pks": return "Type IV PKS";
-      default: return type;
-    }
-}
-
-function copyToClipboard (text) {
-    window.prompt ("Copy to clipboard: Ctrl+C, Enter", text);
-}
-
-$(document).ready(function() {
-
-    $("#download").click(toggle_downloadmenu);
-
-    $("#next-cluster").click(next_cluster);
-    $("#prev-cluster").click(previous_cluster);
-
-    $(".clbutton").click(function() {
-        /* Make sure that even if user missed the link and clicked the
-           background we still have the correct anchor */
-        var href = $(this).children().first().attr('href');
-
-        if (href === undefined) {
-            return;
-        }
-        window.location.href = href;
+  
+  <div class="body-details">
+    <div class="body-details-headers">
+    
+     
+      <div class="body-details-header r1c1-nrps_pks" data-name="r1c1-nrps_pks">
+        NRPS/PKS domains
+      </div>
+     
+    
+     
+    
+     
+      <div class="body-details-header r1c1-knownclusterblast" data-name="r1c1-knownclusterblast">
+        KnownClusterBlast
+      </div>
+     
+      <div class="body-details-header r1c1-subclusterblast" data-name="r1c1-subclusterblast">
+        SubClusterBlast
+      </div>
+     
+    
+    </div>
+    
+     
+    <div class="body-details-section r1c1-nrps_pks">
+      <div class="details">
+    <div class="heading">
+      <span>Detailed domain annotation</span>
+      <div class="help-container"> <div class="help-icon" data-id="nrps-domain-help-1"></div> <span class="help-tooltip" id="nrps-domain-help-1">Shows <a href='https://docs.antismash.secondarymetabolites.org/glossary/#nrps' target='_blank'>NRPS</a>- and <a href='https://docs.antismash.secondarymetabolites.org/glossary/#pks' target='_blank'>PKS</a>-related domains for each feature that contains them. Click on each domain for more information about the domain's location, consensus monomer prediction, and other details.<br>A glossary is available <a href='https://docs.antismash.secondarymetabolites.org/modules/nrps_pks_domains/' target='_blank'>here</a>.</span></div>
+    </div>
+    <div class="nrps-pks-domain-buttons">
+      <div class="domains-selected-only switch-container"><span class="switch-desc">Selected features only</span> <label class="switch">  <input class="domains-selected-only" type="checkbox">  <span class="slider"></span> </label></div>
+      <div class="show-module-domains switch-container"><span class="switch-desc">Show module domains</span> <label class="switch">  <input class="show-module-domains" type="checkbox">  <span class="slider"></span> </label></div>
+    </div>
+    <div class="details-svg" id="r1c1-details-svg"></div>
+</div>
+    </div>
+     
+    
+     
+    
+     
+    <div class="body-details-section r1c1-knownclusterblast">
+      <div class = "knownclusterblast">
+    <div class="heading">
+      <span>Similar known gene clusters</span>
+      <div class="help-container"> <div class="help-icon" data-id="cb-known-help-2"></div> <span class="help-tooltip" id="cb-known-help-2">Shows clusters from the MiBIG database that are similar to the current region. Genes marked with the same colour are interrelated. White genes have no relationship.<br>Click on reference genes to show details of similarities to genes within the current region.<br>Click on an accession to open that entry in the MiBIG database.</span></div>
+    </div>
+  
+  <div>
+    <p>No matches found.</p>
+  </div>
+  
+</div>
+    </div>
+     
+    <div class="body-details-section r1c1-subclusterblast">
+      <div class = "subclusterblast">
+    <div class="heading">
+      <span>Similar subclusters</span>
+      <div class="help-container"> <div class="help-icon" data-id="cb-sub-help-3"></div> <span class="help-tooltip" id="cb-sub-help-3">Shows sub-cluster units that are similar to the current region. Genes marked with the same colour are interrelated. White genes have no relationship.<br>Click on reference genes to show details of similarities to genes within the current region.</span></div>
+    </div>
+  
+  <div>
+    <p>No matches found.</p>
+  </div>
+  
+</div>
+    </div>
+     
+    
+  </div>
 
-        switch_to_cluster();
-    }).mouseover(function() {
-        /* Set the select cluster label text to cluster type */
-        var classes = $(this).attr('class').split(' ');
-        if (classes.length < 2) {
-          return;
-        }
-        if (classes[1] == 'separator') {
-          return;
-        }
-        var cluster_type = map_type_to_desc(classes[1]);
-        var label = $('#cluster-type');
-        label.data("orig_text", label.text());
-        label.text(cluster_type + ":");
-    }).mouseout(function() {
-        /* and reset the select cluster label text */
-        var label = $('#cluster-type');
-        label.text(label.data("orig_text"));
-    });
+  <div class="sidepanel">
+    <div class="sidepanel-details-headers">
+    
+     
+    
+     
+    
+     
+    
+    </div>
+    
+     
+    
+     
+    
+     
+    
+  </div>
+
+ </div>
+
+</div>
+
 
-    $('.clusterblast-selector').change(function() {
-        var id = $(this).attr('id').replace('-select', '');
-        var url = $(this).val();
-        $.get(url, function(data) {
-            $('#' + id + '-svg').html(data);
-            clusterblast.init(id + '-svg');
-            //            id =
-        }, 'html');
-        $('#' + id + '-download').off('click');
-        $('#' + id + '-download').click(function () {
-            var url = $("#" + id + "-select").val();
-            window.open(url, '_blank');
-        });
-    });
+  <footer class="footer">
+    <div class="container">
+      <div>
+        <img src="images/bacteria_antismash_logo.svg" style="height:90px;width:unset;">
+      </div>
+      <div class="cite-me">
+        If you have found antiSMASH useful, please <a href="https://antismash.secondarymetabolites.org/#!/about">cite us</a>.
+      </div>
+      <div>
+        <img src="images/bacteria_antismash_icon.svg" style="height:100px;width:unset;">
+      </div>
+    </div>
+  </footer>
 
-    $('.domainalign-selector').change(function() {
-        var id = $(this).attr('id').replace('-select', '');
-        var url = $(this).val();
-        $.get(url, function(data) {
-            $('#' + id + '-svg').html(data);
-            domainalign.init(id + '-svg');
-            //            id =
-        }, 'html');
-        $('#' + id + '-download').off('click');
-        $('#' + id + '-download').click(function () {
-            var url = $("#" + id + "-select").val();
-            window.open(url, '_blank');
-        });
-    });
+  <script src="js/jquery.js"></script>
+  <script src="js/antismash.js"></script>
+  <script src="regions.js"></script>
+  <script>
+    $(document).ready(function() {
+        viewer["start"](all_regions, details_data, recordData);
+    })
+  </script>
 
-    $('.cluster-rules-header').click(toggle_cluster_rules);
-
-    switch_to_cluster();
-
-});
-    </script>
-
-  </body>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <filter id="inset-shadow">
+   <feOffset dx="-2" dy="-2"></feOffset>
+   <feGaussianBlur result="offset-blur" stdDeviation="2"></feGaussianBlur>
+   <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"></feComposite>
+   <feFlood flood-color="black" result="color" flood-opacity="1"></feFlood>
+   <feComposite operator="in" in="color" in2="inverse" result="shadow"></feComposite>
+   <feComponentTransfer in="shadow" result="shadow">
+    <feFuncA type="linear" slope=".95"></feFuncA>
+   </feComponentTransfer>
+   <feComposite operator="over" in="shadow" in2="SourceGraphic"></feComposite>
+  </filter>
+ </defs>
+</svg>
+</body>
 </html>
\ No newline at end of file