sequenceserver 3.0.1 → 3.1.0

data/views/blastx_options.erb

@@ -4,15 +4,15 @@
         characters per line to preserve formatting.
 %>
 
-<h5>Input Query Options</h5>
-<ul class="list-unstyled">
+<h5 class="text-lg py-4 font-medium">Input Query Options</h5>
+<ul class="list-unstyled space-y-2">
   <li>
-<pre><%= ERB::Util.h %q|-strand <String, `both', `minus', `plus'>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-strand <String, `both', `minus', `plus'>
   Query strand(s) to search against database/subject
   Default = 'both'|%></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-query_gencode <Integer, values between: 1-6, 9-16, 21-31, 33>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-query_gencode <Integer, values between: 1-6, 9-16, 21-31, 33>
   Genetic code to use to translate query (see https://www.ncbi.nlm.nih.gov/Taxonomy/
    taxonomyhome.html/index.cgi?chapter=cgencodes for details)
   Default = '1'|%></pre>
@@ -20,46 +20,46 @@
 </ul>
 <br />
 
-<h5>General Search Options</h5>
-<ul class="list-unstyled">
+<h5 class="text-lg py-4 font-medium">General Search Options</h5>
+<ul class="list-unstyled space-y-2">
   <li>
-<pre><%= ERB::Util.h %q|-task <String, Permissible values: 'blastx' 'blastx-fast'>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-task <String, Permissible values: 'blastx' 'blastx-fast'>
   Task to execute
   Default = 'blastx'|%></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-evalue <Real>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-evalue <Real>
   Expectation value (E) threshold for saving hits
   Default = '10'| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-word_size <Integer, >=2>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-word_size <Integer, >=2>
   Word size for wordfinder algorithm| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-gapopen <Integer>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-gapopen <Integer>
   Cost to open a gap| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-gapextend <Integer>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-gapextend <Integer>
   Cost to extend a gap| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-max_intron_length <Integer, >=0>
-  Length of the largest intron allowed in a translated nucleotide sequence when 
-   linking multiple distinct alignments 
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-max_intron_length <Integer, >=0>
+  Length of the largest intron allowed in a translated nucleotide sequence when
+   linking multiple distinct alignments
   Default = '0'| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-matrix <String>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-matrix <String>
   Scoring matrix name (normally BLOSUM62)| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-threshold <Real, >=0>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-threshold <Real, >=0>
   Minimum word score such that the word is added to the BLAST lookup table| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-comp_based_stats <String>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-comp_based_stats <String>
   Use composition-based statistics:
       D or d: default (equivalent to 2)
       0 or F or f: no composition-based statistics
@@ -74,27 +74,27 @@
   </ul>
   <br />
 
-<h5>Formatting Options</h5>
-<ul class="list-unstyled">
+<h5 class="text-lg py-4 font-medium">Formatting Options</h5>
+<ul class="list-unstyled space-y-2">
   <li>
-<pre><%= ERB::Util.h %q|-show_gis
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-show_gis
   Show NCBI GIs in deflines?| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-num_descriptions <Integer, >=0>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-num_descriptions <Integer, >=0>
   Number of database sequences to show one-line descriptions for
   Not applicable for outfmt > 4
   Default = '500'
   * Incompatible with:  max_target_seqs| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q| -num_alignments <Integer, >=0>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q| -num_alignments <Integer, >=0>
   Number of database sequences to show alignments for
   Default = '250'
   * Incompatible with:  max_target_seqs| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q| -sorthits <Integer, (>=0 and =<4)>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q| -sorthits <Integer, (>=0 and =<4)>
   Sorting option for hits:
    alignment view options:
      0 = Sort by evalue,
@@ -105,7 +105,7 @@
    Not applicable for outfmt > 4| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q| -sorthsps <Integer, (>=0 and =<4)>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q| -sorthsps <Integer, (>=0 and =<4)>
   Sorting option for hps:
      0 = Sort by hsp evalue,
      1 = Sort by hsp score,
@@ -118,52 +118,52 @@
 
 <br/>
 
-<h5>Query filtering options</h5>
-<ul class="list-unstyled">
+<h5 class="text-lg py-4 font-medium">Query filtering options</h5>
+<ul class="list-unstyled space-y-2">
   <li>
-<pre><%= ERB::Util.h %q|-seg <String>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-seg <String>
   Filter query sequence with SEG (Format: 'yes', 'window locut hicut',
   or 'no' to disable)
   Default = '12 2.2 2.5'| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-soft_masking <Boolean>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-soft_masking <Boolean>
   Apply filtering locations as soft masks
   Default = 'false'| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-lcase_masking
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-lcase_masking
   Use lower case filtering in query and subject sequence(s)?| %></pre>
   </li>
 </ul>
 
 <br/>
 
-<h5>Restrict search or results</h5>
-<ul class="list-unstyled">
+<h5 class="text-lg py-4 font-medium">Restrict search or results</h5>
+<ul class="list-unstyled space-y-2">
   <li>
-<pre><%= ERB::Util.h %q|-gilist <String>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-gilist <String>
   Restrict search of database to list of GIs
   * Incompatible with:  seqidlist, taxids, taxidlist, negative_gilist,
    negative_seqidlist, negative_taxids, negative_taxidlist, remote, subject,
    subject_loc| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-seqidlist <String>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-seqidlist <String>
   Restrict search of database to list of SeqIDs
   * Incompatible with:  gilist, taxids, taxidlist, negative_gilist,
    negative_seqidlist, negative_taxids, negative_taxidlist, remote, subject,
    subject_loc| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-negative_gilist <String>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-negative_gilist <String>
   Restrict search of database to everything except the specified GIs
   * Incompatible with:  gilist, seqidlist, taxids, taxidlist,
    negative_seqidlist, negative_taxids, negative_taxidlist, remote, subject,
    subject_loc| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-negative_seqidlist <String>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-negative_seqidlist <String>
   Restrict search of database to everything except the specified SeqIDs
   * Incompatible with:  gilist, seqidlist, taxids, taxidlist,
    negative_gilist, negative_taxids, negative_taxidlist, remote, subject,
@@ -171,88 +171,88 @@
   </li>
   <li>
   <li>
-<pre><%= ERB::Util.h %q|-taxids <String>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-taxids <String>
   Restrict search of database to include only the specified taxonomy IDs (multiple IDs delimited by ',')
   * Incompatible with:  gilist, seqidlist, taxidlist, negative_gilist,
    negative_seqidlist, negative_taxids, negative_taxidlist, remote, subject,
    subject_loc| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-negative_taxids <String>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-negative_taxids <String>
   Restrict search of database to everything except the specified taxonomy IDs (multiple IDs delimited by ',')
   * Incompatible with:  gilist, seqidlist, taxids, taxidlist,
    negative_gilist, negative_seqidlist, negative_taxidlist, remote, subject,
    subject_loc| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-taxidlist <String>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-taxidlist <String>
   Restrict search of database to include only the specified taxonomy IDs
   * Incompatible with:  gilist, seqidlist, taxids, negative_gilist,
    negative_seqidlist, negative_taxids, negative_taxidlist, remote, subject,
    subject_loc| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-negative_taxidlist <String>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-negative_taxidlist <String>
   Restrict search of database to everything except the specified taxonomy IDs
   * Incompatible with:  gilist, seqidlist, taxids, taxidlist,
    negative_gilist, negative_seqidlist, negative_taxids, remote, subject,
    subject_loc| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q| -ipglist <String>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q| -ipglist <String>
   Restrict search of database to list of IPGs
   * Incompatible with:  subject, subject_loc| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q| -negative_ipglist <String>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q| -negative_ipglist <String>
   Restrict search of database to everything except the specified IPGs
   * Incompatible with:  subject, subject_loc| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-entrez_query <String>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-entrez_query <String>
   Restrict search with the given Entrez query
   * Requires:  remote| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-db_soft_mask <String>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-db_soft_mask <String>
   Filtering algorithm ID to apply to the BLAST database as soft masking
   * Incompatible with:  db_hard_mask, subject, subject_loc| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-db_hard_mask <String>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-db_hard_mask <String>
   Filtering algorithm ID to apply to the BLAST database as hard masking
   * Incompatible with:  db_soft_mask, subject, subject_loc| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-qcov_hsp_perc <Real, 0..100>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-qcov_hsp_perc <Real, 0..100>
   Percent query coverage per hsp| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-max_hsps <Integer, >=1>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-max_hsps <Integer, >=1>
   Set maximum number of HSPs per subject sequence to save for each query| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-culling_limit <Integer, >=0>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-culling_limit <Integer, >=0>
   If the query range of a hit is enveloped by that of at least this
   many higher-scoring hits, delete the hit
   * Incompatible with:  best_hit_overhang, best_hit_score_edge| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-best_hit_overhang <Real, (>0 and <0.5)>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-best_hit_overhang <Real, (>0 and <0.5)>
   Best Hit algorithm overhang value (recommended value: 0.1)
   * Incompatible with:  culling_limit| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-best_hit_score_edge <Real, (>0 and <0.5)>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-best_hit_score_edge <Real, (>0 and <0.5)>
   Best Hit algorithm score edge value (recommended value: 0.1)
   * Incompatible with:  culling_limit| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-subject_besthit
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-subject_besthit
   Turn on best hit per subject sequence| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-max_target_seqs <Integer, >=1>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-max_target_seqs <Integer, >=1>
   Maximum number of aligned sequences to keep (value of 5 or more is recommended)
   Default = '500'
   * Incompatible with:  num_descriptions, num_alignments| %></pre>
@@ -261,58 +261,58 @@
 
 <br/>
 
-<h5>Statistical options</h5>
-<ul class="list-unstyled">
+<h5 class="text-lg py-4 font-medium">Statistical options</h5>
+<ul class="list-unstyled space-y-2">
   <li>
-<pre><%= ERB::Util.h %q|-dbsize <Int8>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-dbsize <Int8>
   Effective length of the database| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-searchsp <Int8, >=0>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-searchsp <Int8, >=0>
   Effective length of the search space| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-sum_stats <Boolean>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-sum_stats <Boolean>
   Use sum statistics| %></pre>
   </li>
 </ul>
 
 <br/>
 
-<h5>Extension options</h5>
-<ul class="list-unstyled">
+<h5 class="text-lg py-4 font-medium">Extension options</h5>
+<ul class="list-unstyled space-y-2">
   <li>
-<pre><%= ERB::Util.h %q|-xdrop_ungap <Real>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-xdrop_ungap <Real>
   X-dropoff value (in bits) for ungapped extensions| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-xdrop_gap <Real>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-xdrop_gap <Real>
   X-dropoff value (in bits) for preliminary gapped extensions| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-xdrop_gap_final <Real>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-xdrop_gap_final <Real>
   X-dropoff value (in bits) for final gapped alignment| %></pre>
   </li>
   <li>
-  <pre><%= ERB::Util.h %q|-window_size <Integer, >=0>
+  <pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-window_size <Integer, >=0>
   Multiple hits window size, use 0 to specify 1-hit algorithm| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-ungapped
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-ungapped
   Perform ungapped alignment only?| %></pre>
   </li>
 </ul>
 <br/>
 
-<h5>Miscellaneous options</h5>
-<ul class="list-unstyled">
+<h5 class="text-lg py-4 font-medium">Miscellaneous options</h5>
+<ul class="list-unstyled space-y-2">
   <li>
-<pre><%= ERB::Util.h %q|-parse_deflines <Real>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-parse_deflines <Real>
   Should the query and subject defline(s) be parsed?| %></pre>
   </li>
   <li>
-<pre><%= ERB::Util.h %q|-use_sw_tback <Real>
+<pre class="bg-gray-100 border rounded overflow-x-auto p-2 font-mono hover:bg-yellow-100"><%= ERB::Util.h %q|-use_sw_tback <Real>
   Compute locally optimal Smith-Waterman alignments?| %></pre>
   </li>
-  
+
 </ul>

data/views/layout.erb

@@ -20,17 +20,24 @@
 <body>
   <div
     class="navbar">
-    <div
-      class="container">
+    <div class="container">
       <a
         class="navbar-brand"
         href="https://sequenceserver.com" target="_blank">
-        <img class="logo" src="SequenceServer_logo.png" alt="sequenceserver_logo">
+        <img class="logo" src="sequenceserver_logo.webp" alt="sequenceserver_logo">
         <small>
           <%= SequenceServer::VERSION %>
         </small>
       </a>
       <ul class="nav navbar-nav navbar-right hover-reset focus-reset">
+        <li>
+          <a
+            href="https://sequenceserver.com/progress-on-BLAST-interface/"
+            class="update-check"
+            data-version="<%= SequenceServer::VERSION %>"
+            target="_blank">
+          </a>
+        </li>
         <li>
           <a
             target="_blank"
@@ -100,6 +107,56 @@
     </div> <!-- /container -->
   </div>
 
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+
+        function suggestNewVersion(element, version) {
+            element.textContent = `New version v${version} is available`;
+            console.log(`New SequenceServer version available ${version}. Please consider updating.`)
+        }
+
+        const element = document.querySelector('.update-check');
+        const currentVersion = element.getAttribute('data-version');
+        const cachedVersion = document.cookie.split(';').find((item) => item.trim().startsWith('newVersion='));
+        const upToDate = document.cookie.split(';').find((item) => item.trim().startsWith('versionIsLatest='));
+        if (upToDate) {
+            console.log('SequenceServer is up to date');
+            return;
+        }
+        if (cachedVersion) {
+            const newVersion = cachedVersion.split('=')[1];
+            if (newVersion !== currentVersion) {
+              suggestNewVersion(element, newVersion);
+            }
+            return;
+        }
+        console.log('Checking for new SequenceServer version...')
+        fetch(`https://updates.sequenceserver.com/?version=${currentVersion}`)
+            .then(response => {
+                if (response.ok) {
+                    return response.json();
+                } else {
+                    console.error('Failed to check for new SequenceServer version')
+                }
+            })
+            .then(data => {
+                const date = new Date();
+                date.setTime(date.getTime() + (24 * 60 * 60 * 1000));
+                const expires = "; expires=" + date.toUTCString();
+
+                if (data.update_available) {
+                    const newVersion = data.new_version;
+                    document.cookie = `newVersion=${newVersion}${expires}; path=/`;
+                    suggestNewVersion(element, newVersion);
+                } else {
+                    console.log('SequenceServer is up to date');
+                    document.cookie = `versionIsLatest=true${expires}; path=/`;
+                }
+            })
+            .catch(() => {});
+    });
+
+  </script>
   <!-- twitter -->
   <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 </body>

data/views/search.erb

@@ -2,51 +2,46 @@
 <input type="hidden" id="input_sequence" value="<%= @input_sequence %>">
 
 <!-- We will initialise React on this div -->
-<div id="view"></div>
+<div id="view" class="my-6 container mx-auto max-w-screen-xl py-6"></div>
 
 <!-- JS -->
-  <script src="sequenceserver-search.min.js?ver=<%= SequenceServer::VERSION %>"></script>
+<script src="sequenceserver-search.min.js?ver=<%= SequenceServer::VERSION %>"></script>
 
 <!-- Markup for advanced options modal -->
-<div
-  class="modal fade" id="help"
-  tabindex="-1">
-  <div
-    class="modal-dialog modal-lg">
-    <div
-      class="modal-content">
-      <div
-        class="modal-header">
-        <h3>Advanced Options</h3>
+<div class="hidden fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true" data-help-modal>
+  <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
+
+    <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+    <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-screen-md sm:w-full">
+      <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 border-b">
+        <h3 class="text-xl leading-6 font-medium text-gray-900">Advanced Options</h3>
       </div>
-      <div
-        class="modal-body">
-          <div id="tblastn">
-          <%= erb :tblastn_options %>
-          </div>
-          <div id="blastn">
-          <%= erb :blastn_options %>
-          </div>
-          <div id="blastx">
-          <%= erb :blastx_options %>
-          </div>
-          <div id="tblastx">
-          <%= erb :tblastx_options %>
-          </div>
-          <div id="blastp">
-          <%= erb :blastp_options %>
-          </div>
+
+      <div class="overflow-y-scroll max-h-96 bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div id="tblastn">
+        <%= erb :tblastn_options %>
+        </div>
+        <div id="blastn">
+        <%= erb :blastn_options %>
+        </div>
+        <div id="blastx">
+        <%= erb :blastx_options %>
+        </div>
+        <div id="tblastx">
+        <%= erb :tblastx_options %>
+        </div>
+        <div id="blastp">
+        <%= erb :blastp_options %>
+        </div>
       </div>
-      
-      <div
-        class="modal-footer">
-        <button
-          type="button"
-          class="btn btn-default btn-primary"
-          data-dismiss="modal">
-          Got it!
+
+      <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse border-t">
+        <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-seqblue text-base font-medium text-white hover:bg-seqorange focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-seqorange sm:ml-3 sm:w-auto sm:text-sm" onclick="document.querySelector('[data-help-modal]').classList.add('hidden')">
+          Close
         </button>
       </div>
     </div>
   </div>
-</div>
+</div>