From 6ea39c9363f4c96c4cdd87d2343ac16872a04787 Mon Sep 17 00:00:00 2001
From: Urban Rotnik <urban.rotnik@gmail.com>
Date: Tue, 16 Feb 2021 15:26:51 +0100
Subject: [PATCH] Add experiment thumbnail, update archived view for
 experiments

SCI-5481
---
 app/assets/javascripts/projects/show.js       |  5 +-
 app/assets/stylesheets/experiments.scss       | 50 +++++++++++++++++--
 .../projects/show/_experiment_card.html.erb   |  6 ++-
 ...periment_workflow_image_container.html.erb | 17 +++++++
 4 files changed, 70 insertions(+), 8 deletions(-)
 create mode 100644 app/views/projects/show/_experiment_workflow_image_container.html.erb

diff --git a/app/assets/javascripts/projects/show.js b/app/assets/javascripts/projects/show.js
index 7950dbe38..115f6ce0c 100644
--- a/app/assets/javascripts/projects/show.js
+++ b/app/assets/javascripts/projects/show.js
@@ -93,6 +93,7 @@
         }
         selectedExperiments.length = 0;
         updateExperimentsToolbar();
+        loadExperimentWorkflowImages();
       },
       error: function() {
         viewContainer.html('Error loading project list');
@@ -261,7 +262,7 @@
       });
   }
 
-  function init() {
+  function loadExperimentWorkflowImages() {
     $('.workflowimg-container').each(function() {
       let container = $(this);
       if (container.data('workflowimg-present') === false) {
@@ -280,7 +281,9 @@
         });
       }
     });
+  }
 
+  function init() {
     $('#content-wrapper').on('ajax:success', '.experiment-action-link', function(ev, data) {
       appendActionModal($(data.html));
     });
diff --git a/app/assets/stylesheets/experiments.scss b/app/assets/stylesheets/experiments.scss
index 29b358cbc..ee1b4762e 100644
--- a/app/assets/stylesheets/experiments.scss
+++ b/app/assets/stylesheets/experiments.scss
@@ -61,11 +61,27 @@
           border-radius: 4px;
           box-shadow: $flyout-shadow;
 
-          .workflow-img-container {
+          .workflow-img-wrapper {
             background-color: $color-concrete;
             border-radius: 4px;
             height: 76px;
             width: 76px;
+
+            .archived-icon-plceholder {
+              color: $color-silver-chalice;
+              font-size: 3.5em;
+              line-height: 76px;
+              text-align: center;
+            }
+
+            .workflowimg-container {
+              text-align: center;
+
+              img {
+                border-radius: 4px;
+                max-height: 76px;
+              }
+            }
           }
 
           .experiment-name-cell {
@@ -170,11 +186,24 @@
               line-height: 2em;
             }
 
-            .workflow-img-container {
+            .workflow-img-wrapper {
               flex-shrink: 0;
               height: 3.5em;
-              margin: .25em 1em .25em 0;
+              margin: .25em 1em .25em .5em;
               width: 3.5em;
+
+              .archived-icon-plceholder {
+                font-size: 2em;
+                line-height: 1.75em;
+              }
+
+              .workflowimg-container {
+                text-align: center;
+
+                img {
+                  max-height: 3em;
+                }
+              }
             }
 
             .dates-and-img-container,
@@ -276,7 +305,7 @@
 
       .cards-wrapper {
         .card.experiment-card {
-          .workflow-img-container {
+          .workflow-img-wrapper {
             background-color: $color-alto;
           }
 
@@ -287,6 +316,13 @@
           .description-cell {
             width: 100%;
 
+            .description-text::before {
+              background: $color-alto;
+              content: "";
+              display: block;
+              height: 4px;
+            }
+
             .description-text::after {
               background: linear-gradient(to right, transparent, $color-concrete 50%);
             }
@@ -294,11 +330,15 @@
         }
 
         &.list {
-
           .card.experiment-card {
             .archived-date-cell {
               grid-column: 5;
             }
+            .description-cell {
+              .description-text::before {
+                content: unset;
+              }
+            }
 
             &:hover {
               .description-text::after {
diff --git a/app/views/projects/show/_experiment_card.html.erb b/app/views/projects/show/_experiment_card.html.erb
index ecd4a2a1e..83de8c23a 100644
--- a/app/views/projects/show/_experiment_card.html.erb
+++ b/app/views/projects/show/_experiment_card.html.erb
@@ -16,7 +16,8 @@
       <% end %>
     </div>
   <div class="experiment-name-cell table-cell">
-    <div class="workflow-img-container" list-render="true">
+    <div class="workflow-img-wrapper" list-render="true">
+      <%= render partial: 'projects/show/experiment_workflow_image_container', locals: { experiment: experiment } %>
     </div>
     <% if experiment.archived_branch? %>
       <%= link_to experiment.name, module_archive_experiment_path(experiment), title: experiment.name, class: 'name-link' %>
@@ -50,7 +51,8 @@
         <span class="card-value"><%= t('experiments.card.completed_value', completed: experiment.completed_task_count, all: experiment.task_count) %></span>
       </div>
     </div>
-    <div class="workflow-img-container" cards-render="true">
+    <div class="workflow-img-wrapper" cards-render="true">
+      <%= render partial: 'projects/show/experiment_workflow_image_container', locals: { experiment: experiment } %>
     </div>
   </div>
   <div class="completed-task-cell table-cell" data-view-mode="active">
diff --git a/app/views/projects/show/_experiment_workflow_image_container.html.erb b/app/views/projects/show/_experiment_workflow_image_container.html.erb
new file mode 100644
index 000000000..a1107ee0e
--- /dev/null
+++ b/app/views/projects/show/_experiment_workflow_image_container.html.erb
@@ -0,0 +1,17 @@
+<% if experiment.archived_branch? %>
+  <div class="archived-icon-plceholder">
+    <i class="fas fa-archive"></i>
+  </div>
+<% else %>
+  <% if experiment.workflowimg.attached? %>
+    <div class="workflowimg-container" data-workflowimg-present="true">
+      <%= render partial: 'projects/show/workflow_img.html.erb', locals: { experiment: experiment } %>
+    </div>
+  <% else %>
+    <div class="workflowimg-container"
+         data-workflowimg-present="false"
+         data-workflowimg-url="<%= fetch_workflow_img_experiment_url(experiment) %>" >
+      <i class="fas fa-spinner fa-spin fa-3x workflowimg-spinner" aria-hidden="true"></i>
+    </div>
+  <% end %>
+<% end %>