set ajax loading of experiments images [fixes SCI-349]

app/assets/javascripts/projects/show.js

@@ -1,48 +1,59 @@
 (function(){
   var count = 0;
 
-  function initProjectExperiment(){
+  function init(){
-    var url = $("[data-lupdated-url]").data("lupdated-url");
+    $("[data-id]").each(function(){
-    var updated = "[data-id=" + $("[data-lupdated-id]").data('lupdated-id') +"]";
+      var that = $(this);
-    var el = $(updated).find("img");
+      that.find(".workflowimg-container").hide();
-    var timestamp = el.data("timestamp");
+      initProjectExperiment(that);
-    var img_url = $(updated).find(".workflowimg-container").data('updated-img');
+    });
-
-    animateSpinner($(updated).find(".workflowimg-container"), true);
-    checkUpdatedImg(el, img_url, url, timestamp, updated);
-    animateSpinner($(updated).find(".workflowimg-container"), false);
   }
 
+  function initProjectExperiment(element){
+    var container = element.find(".workflowimg-container");
+    var url = container.data("check-img");
+    var timestamp = container.data("timestamp");
+    var img_url = container.data('updated-img');
 
-  function checkUpdatedImg(el, img_url, url, timestamp, updated){
+    animateSpinner(container, true);
-    if (count !== 100){
+    checkUpdatedImg(img_url, url, timestamp, container);
+  }
+
+  // checks if the experiment image is updated
+  function checkUpdatedImg(img_url, url, timestamp, container){
+    if (count < 30 && timestamp){
       $.ajax({
         url: url,
         type: "GET",
         data: { "timestamp": timestamp },
         dataType: "json",
         success: function (data) {
-          getNewWorkforwImg(el, img_url, updated);
+          getNewWorkforwImg(container, img_url);
-          animateSpinner($(updated).find(".workflowimg-container"), false);
+          container.show();
+          animateSpinner(container, false);
         },
         error: function (ev) {
           if (ev.status == 404) {
-              setTimeout(checkUpdatedImg(el, img_url, url, timestamp, updated), 200);
+            setTimeout(checkUpdatedImg(img_url, url, timestamp, container), 500);
+          } else {
+            animateSpinner(container, false);
           }
           count++;
           }
       });
+    } else {
+      animateSpinner(container, false);
     }
   }
 
-  function getNewWorkforwImg(el, url, updated){
+  // fetch the new experiment image
+  function getNewWorkforwImg(el, url){
     $.ajax({
       url: url,
       type: "GET",
       dataType: "json",
       success: function (data) {
-        el.html(data.workflowimg);
+        el.append(data.workflowimg);
-        animateSpinner($(updated).find(".workflowimg-container"), false);
       },
       error: function (ev) {
         // TODO
@@ -50,5 +61,5 @@
     });
   }
   // init
-  initProjectExperiment();
+  init();
 })();

app/controllers/experiments_controller.rb

@@ -220,7 +220,7 @@ class ExperimentsController < ApplicationController
   def updated_img
     respond_to do |format|
       format.json do
-        if @experiment.workflowimg_updated_at.to_i !=
+        if @experiment.workflowimg_updated_at.to_i >=
            params[:timestamp].to_time.to_i
           render json: {}, status: 200
         else
@@ -230,19 +230,13 @@ class ExperimentsController < ApplicationController
     end
   end
 
-  def get_workflow_img
+  def fetch_workflow_img
     respond_to do |format|
       format.json do
         render json: {
-          workflowimg: (link_to image_tag(experiment
+          workflowimg: render_to_string(
-                                          .workflowimg
+            partial: 'projects/show/workflow_img.html.erb'
-                                          .expiring_url(30),
+          )
-                                          class: 'img-responsive center-block',
-                                          data: {
-                                            timestamp: experiment
-                                                       .workflowimg_updated_at
-                                                }),
-                                canvas_experiment_path(experiment)).to_s
         }
       end
     end

app/helpers/projects_helper.rb

@@ -11,11 +11,4 @@ module ProjectsHelper
     end
     conns.to_s[1..-2]
   end
-
-  def last_experiment_updated(project)
-    project
-      .active_experiments(updated_at: :desc)
-      .pluck(:id)
-      .first.to_s
-  end
 end

app/views/projects/show.html.erb

@@ -23,9 +23,7 @@
     </div>
   </div>
 </div>
-<div class="row"
+<div class="row">
-     data-lupdated-id="<%= last_experiment_updated(@project) %>"
-     data-lupdated-url="<%= updated_img_experiment_url(last_experiment_updated(@project))%>">
   <% @project.active_experiments.each_with_index do |experiment, index| %>
     <%= render partial: 'projects/show/experiment',
                locals: { experiment: experiment } %>

app/views/projects/show/_experiment.html.erb

@@ -23,11 +23,12 @@
     <div class="panel-body">
       <% if experiment.workflowimg? %>
         <div class="workflowimg-container"
-             data-updated-img="<%= get_workflow_img_experiment_url(experiment) %>"
+             data-check-img="<%= updated_img_experiment_url(experiment) %>"
+             data-updated-img="<%= fetch_workflow_img_experiment_url(experiment) %>"
+             data-timestamp="<%= experiment.updated_at %>"
         >
-          <%= link_to image_tag(experiment.workflowimg.expiring_url(30),
+          <%#= link_to image_tag(experiment.workflowimg.expiring_url(30),
                                 class: 'img-responsive center-block',
-                                data: { timestamp: experiment.workflowimg_updated_at }),
                       canvas_experiment_path(experiment) %>
         </div>
       <% end %>

app/views/projects/show/_workflow_img.html.erb

@@ -0,0 +1,3 @@
+<%= link_to image_tag( @experiment.workflowimg.expiring_url(30),
+                                class: 'img-responsive center-block'),
+                      canvas_experiment_path(@experiment) %>

config/routes.rb

@@ -129,7 +129,7 @@ Rails.application.routes.draw do
       post 'move' # move experiment
       get 'samples' # Samples for single project
       get 'updated_img' # Checks if the workflow image is updated
-      get 'get_workflow_img' # Get udated workflow img
+      get 'fetch_workflow_img' # Get udated workflow img
       # Renders sample datatable for single project (ajax action)
       post 'samples_index'
       post :delete_samples,