Feature circos legend

Gemfile

@@ -60,6 +60,7 @@ end
 # Bootstrap
 gem 'bootstrap-sass'
 gem 'autoprefixer-rails'
+gem 'bootstrap-slider-rails', '~> 9.8'
 
 # JQuery extensions
 gem 'jquery-ui-rails'
@@ -98,11 +99,18 @@ gem 'figaro'
 gem 'bigdecimal', '1.3.5'
 gem 'execjs', '2.7.0'
 
-# gem 'turbolinks', '~> 5.2.0'
+gem 'turbolinks', '~> 5.2.0'
 
 gem 'concurrent-ruby'
 
 gem 'whenever', require: false
 
 # cookie consent
 gem 'cookies_eu'
+
+# html to image (for circos legend)
+gem 'imgkit'
+gem 'wkhtmltoimage-binary'
+
+# reference select box
+gem 'select2-rails'

Gemfile.lock

@@ -55,6 +55,8 @@ GEM
     bootstrap-sass (3.3.7)
       autoprefixer-rails (>= 5.2.1)
       sass (>= 3.3.4)
+    bootstrap-slider-rails (9.8.0)
+      railties (>= 3.2, < 6.0)
     builder (3.2.4)
     chronic (0.10.2)
     chronic_duration (0.10.6)
@@ -90,6 +92,7 @@ GEM
       activesupport (>= 5.0)
     i18n (1.10.0)
       concurrent-ruby (~> 1.0)
+    imgkit (1.6.3)
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
@@ -174,6 +177,7 @@ GEM
       sprockets (> 3.0)
       sprockets-rails
       tilt
+    select2-rails (4.0.13)
     sidekiq (6.5.7)
       connection_pool (>= 2.2.5)
       rack (~> 2.0)
@@ -205,6 +209,9 @@ GEM
     thor (1.2.1)
     thread_safe (0.3.6)
     tilt (2.0.10)
+    turbolinks (5.2.1)
+      turbolinks-source (~> 5.2)
+    turbolinks-source (5.2.0)
     tzinfo (1.2.9)
       thread_safe (~> 0.1)
     uglifier (4.2.0)
@@ -214,6 +221,7 @@ GEM
     websocket-extensions (0.1.5)
     whenever (1.0.0)
       chronic (>= 0.6.3)
+    wkhtmltoimage-binary (0.12.5)
 
 PLATFORMS
   ruby
@@ -227,6 +235,7 @@ DEPENDENCIES
   bcrypt (~> 3.1.7)
   bigdecimal (= 1.3.5)
   bootstrap-sass
+  bootstrap-slider-rails (~> 9.8)
   coffee-rails (~> 4.1.0)
   concurrent-ruby
   cookies_eu
@@ -235,6 +244,7 @@ DEPENDENCIES
   execjs (= 2.7.0)
   figaro
   foreman
+  imgkit
   jbuilder (~> 2.0)
   jquery-rails
   jquery-ui-rails
@@ -248,6 +258,7 @@ DEPENDENCIES
   ruby-debug-ide
   rubyzip
   sass-rails (>= 3.2)
+  select2-rails
   sidekiq (>= 6.4.1)
   sidekiq-limit_fetch
   sidekiq-status
@@ -256,8 +267,10 @@ DEPENDENCIES
   spring (= 1.2.0)
   sys-filesystem
   thin
+  turbolinks (~> 5.2.0)
   uglifier (>= 2.7.2)
   whenever
+  wkhtmltoimage-binary
 
 BUNDLED WITH
    1.13.6

app/assets/javascripts/application.js

@@ -18,3 +18,7 @@
 //= require bootstrap
 //= require_tree .
 //= require cookies_eu
+//= require turbolinks
+//= require select2
+//= require bootstrap-slider
+//= require fontawesome/all.min

app/assets/stylesheets/application.scss

@@ -12,6 +12,8 @@
  *
  *= require_self
  *= require jquery-ui
+ *= require select2
+ *= require bootstrap-slider
  *= require_tree .
  */
 

app/controllers/jobs_controller.rb

@@ -339,6 +339,9 @@ def get_tree_genes
 
   def get_all_synteny_images
     job = Job.find_by(:job_id => params[:id])
+    ref = Reference.find(job[:reference_id])
+    kit = IMGKit.new(render_to_string partial: 'legend.html.erb', locals: {:job => job, :ref => ref})
+    kit.stylesheets << "#{Rails.root}/vendor/assets/stylesheets/fontawesome/all.min.css"
     if job then
       if job.circos_images and job.circos_images.size > 0 then
         t = Tempfile.new(job.job_id)
@@ -347,6 +350,8 @@ def get_all_synteny_images
             zos.put_next_entry("#{image.chromosome}.png")
             zos.print IO.read(image.file.path)
           end
+          zos.put_next_entry("circos_legend.png")
+          zos.print kit.to_png
         end
         send_file t.path, :type => 'application/zip',
                           :disposition => 'attachment',

app/views/jobs/_legend.html.erb

@@ -0,0 +1,4 @@
+<p>
+    top: reference chromosome from <i><%= ref[:name] %></i>, bottom: <i> <%= job[:name] %></i> contiguated pseudochromosome <br>
+    <span class='fa-stop fa-solid' style='color: #fb6a4a'></span> = forward strand gene  &emsp; <span class='fa-stop fa-solid' style='color: #6aadd5'></span> = reverse strand gene &emsp; <span class='fa-stop fa-solid' style='color: #74c476'></span> = missing core gene &emsp; <span class='fa-stop fa-solid' style='color: #0000000'></span> = singleton gene &emsp; <span class='fa-stop fa-solid' style='color: #fff64a'></span> = gap
+</p>

app/views/jobs/_tabs.html.erb

@@ -330,10 +330,7 @@ var vtable;
         <p>
           This is <span id='map-header'></span>. Click and drag in the diagram below to pan around. Use the mouse wheel or the <span class='glyphicon glyphicon-plus'></span>/<span class='glyphicon glyphicon-minus'></span> icons to zoom in and out.
         </p>
-        <p>
-          top: reference chromosome from <i><%= @ref[:name] %></i>, bottom: <i> <%= @job[:name] %></i> contiguated pseudochromosome <br />
-          <span class='fa fa-stop' style='color: #fb6a4a'></span> = forward strand gene  &emsp; <span class='fa fa-stop' style='color: #6aadd5'></span> = reverse strand gene &emsp; <span class='fa fa-stop' style='color: #74c476'></span> = missing core gene &emsp; <span class='fa fa-stop' style='color: #0000000'></span> = singleton gene &emsp; <span class='fa fa-stop' style='color: #fff64a'></span> = gap
-        </p>
+        <%= render partial: 'legend', locals: {:job => @job, :ref => @ref} %>
         <div id="image-map"></div>
       </div>
     <% else %>

app/views/jobs/new.html.erb

@@ -1,10 +1,4 @@
 <% content_for(:title, "Submit new Companion job") %>
-<% content_for :head do %>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/6.0.7/bootstrap-slider.min.js"></script>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/6.0.7/css/bootstrap-slider.min.css" />
-  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
-<% end %>
 
 <div class="page-header">
   <h1>Submit a new annotation job</h1>
@@ -244,7 +238,7 @@
    <% end %>
 
    <script type="text/javascript">
-   $(document).ready(function() {
+   $(document).on('turbolinks:load', function() {
     $('.js-example-basic-single').select2();
     $('#advanced-panel').slideUp();
     $('#transcript-selection').slideUp();

app/views/layouts/application.html.erb

@@ -3,13 +3,19 @@
 <head>
   <title><%= content_for?(:title) ? yield(:title) : "Companion" %></title>
   <%= stylesheet_link_tag 'application', media: 'all' %>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
   <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
   <%= yield :head %>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <%= csrf_meta_tags %>
+  <script>
+    FontAwesomeConfig = {
+      mutateApproach: 'sync'
+    }
+  </script>
+  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
 </head>
 <body>
   <nav class="navbar navbar-default navbar-static-top">