Use the same layout for search and results

wurmlab · Aug 27, 2024 · 061ee48 · 061ee48
1 parent ed0c42a
commit 061ee48
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 245 deletions.
diff --git a/lib/sequenceserver/routes.rb b/lib/sequenceserver/routes.rb
@@ -35,7 +35,7 @@ class Routes < Sinatra::Base
       # e.g. for example.org/our-sequenceserver set to '/our-sequenceserver'
       set :root_path_prefix, ''
 
-      set :search_layout, :'search_layout'
+      set :layout, :'layout'
     end
 
     # See
@@ -86,7 +86,7 @@ class Routes < Sinatra::Base
 
     # Returns base HTML. Rest happens client-side: rendering the search form.
     get '/' do
-      erb :search, layout: settings.search_layout
+      erb :search, layout: settings.layout
     end
 
     # Returns data that is used to render the search form client side. These
@@ -113,7 +113,7 @@ class Routes < Sinatra::Base
     post '/' do
       if params[:input_sequence]
         @input_sequence = params[:input_sequence]
-        erb :search, layout: settings.search_layout
+        erb :search, layout: settings.layout
       else
         job = Job.create(params)
         redirect to("/#{job.id}")
@@ -143,7 +143,7 @@ class Routes < Sinatra::Base
       job = Job.fetch(jid)
       halt 404, File.read(File.join(settings.root, 'public/404.html')) if job.nil?
 
-      erb :report, layout: true
+      erb :report, layout: settings.layout
     end
     # @params sequence_ids: whitespace separated list of sequence ids to
     # retrieve

diff --git a/public/js/options.js b/public/js/options.js
@@ -91,7 +91,7 @@ export class Options extends Component {
                             let description = config.description || textValue;
 
                             return (
-                                <label key={index} className={`block w-full px-2 py-1 text-seqblue hover:bg-gray-200 hover: text-seqorange cursor-pointer`}>
+                                <label key={index} className={`block w-full px-2 py-1 text-seqblue hover:bg-gray-200 hover:text-seqorange cursor-pointer`}>
                                     <input
                                         type="radio"
                                         name="predefinedOption"

diff --git a/public/sequenceserver-report.min.js b/public/sequenceserver-report.min.js
diff --git a/public/sequenceserver-report.min.js.map b/public/sequenceserver-report.min.js.map
diff --git a/public/sequenceserver-search.min.js b/public/sequenceserver-search.min.js
diff --git a/public/sequenceserver-search.min.js.map b/public/sequenceserver-search.min.js.map
diff --git a/views/layout.erb b/views/layout.erb
@@ -1,17 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
 
+<head>
   <title>SequenceServer: Custom BLAST Server</title>
-  <meta name="author" content="Pragmatic Genomics Ltd">
+  <meta name="author" content="Pragmatic Genomics Limited"/>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="Custom BLAST server provided by SequenceServer (https://sequenceserver.com)"/>
-
   <%= Rack::Csrf.metatag(env) %>
   <link rel="stylesheet" media="screen,print" type="text/css" href="css/app.min.css"/>
-  <link rel="stylesheet" media="screen,print" type="text/css" href="css/sequenceserver.css"/>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 
@@ -27,12 +24,14 @@
             </small>
           </a>
         </div>
+
         <div class="flex-grow"></div>
         <ul class="flex space-x-2">
           <li>
             <a
               href="https://sequenceserver.com/progress-on-BLAST-interface/"
               class="underline text-seqblue"
+              data-update-check
               data-version="<%= SequenceServer::VERSION %>"
               target="_blank">
             </a>
@@ -42,117 +41,114 @@
               class="text-seqblue flex items-center text-sm hover:text-seqorange"
               target="_blank"
               href="https://sequenceserver.com/support">
+
               <i class="fa-regular fa-comment w-4 h-4 mr-1 fill-current"></i>
               Help &amp; Support
             </a>
           </li>
         </ul>
-        </div>
       </div>
     </div>
   </header>
+
   <noscript>
     <div class="mx-auto px-4">
       <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
-        <strong>SequenceServer can't work without JavaScript.</strong>
-        <ul class="mt-2 list-disc list-inside"">
+        <strong class="font-bold">Our website cannot work without JavaScript.</strong>
+        <ul class="mt-2 list-disc list-inside">
           <li>Please see if you can enable JavaScript in your browser's preferences.</li>
           <li>If your browser doesn't support JavaScript, please consider upgrading to the latest version or using Firefox or Chrome.</li>
         </ul>
       </div>
     </div>
   </noscript>
+
   <%= yield %>
+
   <div class="mx-auto px-4">
     <div class="container mx-auto max-w-screen-xl">
       <p class="text-center text-sm">
         Please cite data sources and <a class="text-seqblue" href="https://doi.org/10.1093/molbev/msz185">the paper</a> describing <a class="text-seqblue" href="https://wurmlab.com">our</a> <a class="text-seqblue" href="https://sequenceserver.com">SequenceServer BLAST interface</a>.
         <a class="text-seqblue" href='https://sequenceserver.com'>
           <em>
             <%=
-            quote = [
-	            "Visualize BLAST results.",
-              "Run BLAST on local computer.",
-	            "BLAST on Mac.",
-	            "BLAST on Windows.",
-	            "Run blast on mac.",
-	            "Blast analysis software.",
-	            "Sequence Search on local computer.",
-	            "Blast DNA sequence search.",
-              "Custom BLAST search.",
-              "Install blast on Mac.",
-              "Perform BLAST analyses.",
-              "Custom BLAST web interface.",
-              "SequenceServer: Local BLAST with bespoke html interface.",
-              "Set up custom BLAST interface with SequenceServer.",
-              "Easy BLASTing with SequenceServer.",
-              "BLAST against a custom, local database with SequenceServer.",
-  	          "Cloud BLAST custom genome.",
-	            "NCBI BLAST alternative.",
-	            "BLAST private transcriptome assembly in the Cloud.",
-	            "Cloud server for comparative genomics, oligos, crisp, primers and more."
-            ][rand(19)]
-          %>
-        </em>
+              quote = [
+                "Visualize BLAST results.",
+                "Run BLAST on local computer.",
+                "BLAST on Mac.",
+                "BLAST on Windows.",
+                "Run blast on mac.",
+                "Blast analysis software.",
+                "Sequence Search on local computer.",
+                "Blast DNA sequence search.",
+                "Custom BLAST search.",
+                "Install blast on Mac.",
+                "Perform BLAST analyses.",
+                "Custom BLAST web interface.",
+                "SequenceServer: Local BLAST with bespoke html interface.",
+                "Set up custom BLAST interface with SequenceServer.",
+                "Easy BLASTing with SequenceServer.",
+                "BLAST against a custom, local database with SequenceServer.",
+                "Cloud BLAST custom genome.",
+                "NCBI BLAST alternative.",
+                "BLAST private transcriptome assembly in the Cloud.",
+                "Cloud server for comparative genomics, oligos, crisp, primers and more."
+              ].sample
+            %>
+          </em>
+        </a>
       </p>
-      <% footer_path = File.join(settings.root, '../website-extras/footer.html.erb') %>
-      <%= erb :'../../website-extras/footer.html', locals: { path_prefix: root_path_prefix } if File.exist?(footer_path) %>
-    </div>
   </div>
 
-  <script nonce="<%= env['csp.nonce'] %>">
+  <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);
+        function suggestNewVersion(element, version) {
+            element.textContent = `New version v${version} is available`;
+            console.log(`New SequenceServer version available ${version}. Please consider updating.`)
         }
-        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')
+        const element = document.querySelector('[data-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);
             }
-        })
-        .then(data => {
-            const date = new Date();
-            date.setTime(date.getTime() + (24 * 60 * 60 * 1000));
-            const expires = "; expires=" + date.toUTCString();
+            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(() => {});
+                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>
 </body>
 </html>