Merge pull request #1403 from okriuchykhin/ok_SCI_2757

Enable caching for navigation sidebar [SCI-2757]

app/assets/javascripts/sidebar.js

@@ -114,6 +114,33 @@
       }
     }
 
+    // Make active current project/experiment/task
+    function activateCurrent() {
+      var sidebar = $('#slide-panel');
+      var projectId = sidebar.data('current-project');
+      var experimentId = sidebar.data('current-experiment');
+      var taskId = sidebar.data('current-task');
+      var currentPage = sidebar.data('page');
+      var li;
+
+      if (currentPage === 'project') {
+        li = sidebar.find('li[data-project-id="' + projectId + '"]');
+      } else if (currentPage === 'experiment') {
+        li = sidebar.find('[data-experiment-id="' + experimentId + '"]');
+      } else if (currentPage === 'canvas') {
+        li = sidebar.find('[data-experiment-id="' + experimentId + '"]');
+        li.find('.task-tree-link')
+          .append('<a href="" class="canvas-center-on">'
+                  + '<span class="fas fa-map-marker-alt"></span></a>');
+      } else if (currentPage === 'task') {
+        li = sidebar.find('[data-module-id="' + taskId + '"]');
+      }
+      li.find('a:first').addClass('disabled');
+      li.addClass('active');
+    }
+
+    activateCurrent();
+
     // Add triangle icons and titles to every parent node
     $('.tree li:has(ul)')
       .addClass('parent_li')

app/assets/stylesheets/partials/_sidebar.scss

@@ -68,6 +68,14 @@ $toggle-btn-size: 50px;
     #slide-panel {
       height: 100%;
 
+      .disabled {
+        opacity: 1;
+      }
+
+      .fa-caret-right {
+        padding: 3px 5px;
+      }
+
       .tree {
         margin-bottom: 0;
         opacity: 1;

app/helpers/sidebar_helper.rb

@@ -1,13 +1,4 @@
 module SidebarHelper
-
-  def currently_active?(my_module)
-      @my_module.present? and @my_module.id == my_module.id
-  end
-
-  def is_canvas?
-    action_name == "canvas"
-  end
-
   def project_action_to_link_to(project)
     case action_name
     when 'samples'

app/models/experiment.rb

@@ -19,7 +19,8 @@ class Experiment < ApplicationRecord
              optional: true
 
   has_many :my_modules, inverse_of: :experiment, dependent: :destroy
-  has_many :active_my_modules, -> { where(archived: false) },
+  has_many :active_my_modules,
+           -> { where(archived: false).order(:workflow_order) },
            class_name: 'MyModule'
   has_many :my_module_groups, inverse_of: :experiment, dependent: :destroy
   has_many :report_elements, inverse_of: :experiment, dependent: :destroy

app/models/project.rb

@@ -27,7 +27,7 @@ class Project < ApplicationRecord
              foreign_key: 'restored_by_id',
              class_name: 'User',
              optional: true
-  belongs_to :team, inverse_of: :projects, optional: true
+  belongs_to :team, inverse_of: :projects, touch: true, optional: true
   has_many :user_projects, inverse_of: :project
   has_many :users, through: :user_projects
   has_many :experiments, inverse_of: :project

app/views/experiments/canvas.html.erb

@@ -1,5 +1,5 @@
 <% provide(:head_title, t("experiments.canvas.head_title", project: h(@project.name)).html_safe) %>
-<%= render partial: "shared/sidebar" %>
+<%= render partial: "shared/sidebar", locals: { current_experiment: @experiment, page: 'canvas' } %>
 <%= render partial: "shared/secondary_navigation" %>
 
 <div class="content-pane" id="experiment-canvas">

app/views/experiments/module_archive.html.erb

@@ -1,5 +1,5 @@
 <% provide(:head_title, t("experiments.module_archive.head_title", experiment: h(@experiment.name)).html_safe) %>
-<%= render partial: "shared/sidebar" %>
+<%= render partial: "shared/sidebar", locals: { current_experiment: @experiment, page: 'experiment' } %>
 <%= render partial: "shared/secondary_navigation" %>
 
 <div class="content-pane" id="module-archive">

app/views/my_modules/activities.html.erb

@@ -1,5 +1,5 @@
 <% provide(:head_title, t("my_modules.activities.head_title", project: h(@my_module.experiment.project.name), module: h(@my_module.name)).html_safe) %>
-<%= render partial: "shared/sidebar" %>
+<%= render partial: "shared/sidebar", locals: { current_task: @my_module, page: 'task' } %>
 <%= render partial: "shared/secondary_navigation" %>
 
 <div class="content-pane">

app/views/my_modules/archive.html.erb

@@ -1,5 +1,5 @@
 <% provide(:head_title, t("my_modules.module_archive.head_title", project: h(@my_module.experiment.project.name), module: h(@my_module.name)).html_safe) %>
-<%= render partial: "shared/sidebar" %>
+<%= render partial: "shared/sidebar", locals: { current_task: @my_module, page: 'task' } %>
 <%= render partial: "shared/secondary_navigation" %>
 
 <div class="content-pane" id="result-archive">

app/views/my_modules/protocols.html.erb

@@ -1,7 +1,7 @@
 <% provide(:head_title, t("my_modules.protocols.head_title", project: h(@project.name), module: h(@my_module.name)).html_safe) %>
 
 <%= render partial: 'shared/drag_n_drop_overlay' %>
-<%= render partial: "shared/sidebar" %>
+<%= render partial: "shared/sidebar", locals: { current_task: @my_module, page: 'task' } %>
 <%= render partial: "shared/secondary_navigation" %>
 
 <div class="content-pane">

app/views/my_modules/repository.html.erb

@@ -6,7 +6,7 @@
                           project: h(@project.name),
                           module: h(@my_module.name),
                           repository: @repository.name).html_safe) %>
-<%= render partial: "shared/sidebar" %>
+<%= render partial: "shared/sidebar", locals: { current_task: @my_module, page: 'task' } %>
 <%= render partial: "shared/secondary_navigation" %>
 
 <div class="content-pane">

app/views/my_modules/results.html.erb

@@ -1,5 +1,5 @@
 <% provide(:head_title, t("my_modules.results.head_title", project: h(@project.name), module: h(@my_module.name)).html_safe) %>
-<%= render partial: "shared/sidebar" %>
+<%= render partial: "shared/sidebar", locals: { current_task: @my_module, page: 'task' } %>
 <%= render partial: "shared/secondary_navigation" %>
 <%= render partial: 'shared/drag_n_drop_overlay' %>
 

app/views/projects/archive.html.erb

@@ -1,5 +1,5 @@
 <% provide(:head_title, t("projects.archive.head_title")) %>
-<%= render partial: "shared/sidebar" %>
+<%= render partial: "shared/sidebar", locals: { page: 'project' } %>
 <%= render partial: "shared/secondary_navigation" %>
 
 <div class="content-pane" id="project-archive">

app/views/projects/experiment_archive.html.erb

@@ -1,5 +1,5 @@
 <% provide(:head_title, t("projects.experiment_archive.head_title", project: h(@project.name)).html_safe) %>
-<%= render partial: "shared/sidebar" %>
+<%= render partial: "shared/sidebar", locals: { current_project: @project, page: 'project' } %>
 <%= render partial: "shared/secondary_navigation" %>
 
 <div class="content-pane" id="experiment-archive">

app/views/projects/index.html.erb

@@ -1,7 +1,7 @@
 <% provide(:head_title, t("projects.index.head_title")) %>
 
 <% if current_team %>
-  <%= render partial: "shared/sidebar" %>
+  <%= render partial: "shared/sidebar", locals: { page: 'project' } %>
   <%= render partial: "shared/secondary_navigation" %>
 
   <% if can_create_projects?(current_team) %>

app/views/projects/show.html.erb

@@ -1,5 +1,5 @@
 <% provide(:head_title, t("projects.show.head_title", project: h(@project.name)).html_safe) %>
-<%= render partial: "shared/sidebar" %>
+<%= render partial: "shared/sidebar", locals: { current_project: @project, page: 'project' } %>
 <%= render partial: "shared/secondary_navigation" %>
 
 <div class="content-pane" id="project-show">

app/views/shared/_sidebar.html.erb

@@ -1,8 +1,19 @@
 <%= content_for :sidebar do %>
-  <div id="slide-panel" class="visible">
+  <% current_task ||= current_task || nil %>
+  <% current_experiment ||= current_experiment || current_task&.experiment || nil %>
+  <% current_project ||= current_experiment&.project || current_task&.experiment&.project || nil %>
+
+  <div id="slide-panel"
+       class="visible"
+       data-page="<%= page %>"
+       data-current-project="<%= current_project&.id %>"
+       data-current-experiment="<%= current_experiment&.id %>"
+       data-current-task="<%= current_task&.id %>">
     <div class="tree">
       <ul>
-        <%= render partial: 'shared/sidebar/projects' %>
+        <% cache [current_user, current_team] do %>
+          <%= render partial: 'shared/sidebar/projects' %>
+        <% end %>
       </ul>
     </div>
   </div>

app/views/shared/sidebar/_experiments.html.erb

@@ -1,16 +1,8 @@
 <% if project.active_experiments.present? %>
   <ul>
     <% project.active_experiments.each do |experiment| %>
-      <% if experiment_page? && experiment == @experiment %>
+      <% cache [current_user, experiment] do %>
-        <li class="active" data-parent="candidate">
+        <li data-parent="candidate" data-experiment-id="<%= experiment.id %>">
-          <span class="tree-link line-wrap first-indent">
-            <i class="no-arrow"></i>
-            <span title="<%= @experiment.name %>"><%= @experiment.name %></span>
-          </span>
-          <%= render partial: 'shared/sidebar/my_modules', locals: { experiment: @experiment } %>
-        </li>
-      <% else %>
-        <li data-parent="candidate">
           <span class="tree-link line-wrap first-indent">
             <i class="no-arrow"></i>
             <%= link_to experiment.name,

app/views/shared/sidebar/_my_modules.html.erb

@@ -1,21 +1,11 @@
 <% if experiment.active_my_modules.present? %>
   <ul>
-    <% experiment.active_my_modules.sort_by{ |m| m.workflow_order }.each do |my_module| %>
+    <% experiment.active_my_modules.each do |my_module| %>
-
+      <li class="leaf" data-module-id="<%= my_module.id %>">
-      <li class="leaf <%= "active" if currently_active? my_module %>"
+        <span class="tree-link task-tree-link second-indent">
-           data-module-id="<%= my_module.id %>">
+          <%= link_to my_module.name, module_action_to_link_to(my_module) %>
-        <span class="tree-link second-indent">
-          <% if currently_active? my_module %>
-              <%= my_module.name %>
-          <% else %>
-            <%= link_to my_module.name, module_action_to_link_to(my_module) %>
-          <% end %>
-          <% if is_canvas? %>
-            <a href="" class="canvas-center-on"><span class="fas fa-map-marker-alt"></span></a>
-          <% end %>
         </span>
       </li>
-
     <% end %>
   </ul>
 <% end %>

app/views/shared/sidebar/_projects.html.erb

@@ -1,29 +1,16 @@
 <ul>
-  <% if @projects_tree.present? then %>
+  <% @projects_tree.each do |project| %>
-    <% @projects_tree.each do |project| %>
+    <% cache [current_user, project] do %>
-      <% if project_page? && project == @project %>
+      <li data-parent="candidate" data-project-id="<%= project.id %>">
-        <li class="active" data-parent="candidate">
+        <span class="tree-link line-wrap no-indent">
-          <span class="tree-link line-wrap no-indent">
+          <i class="no-arrow"></i>
-            <i class="no-arrow"></i>
+            <%= link_to project.name,
-            <span data-project-id="<%= @project.id %>"
+                        project_action_to_link_to(project),
-                  title="<%= @project.name %>"><%= @project.name %></span>
+                        title: project.name,
-          </span>
+                        data: { project_id: project.id } %>
-          <%= render partial: 'shared/sidebar/experiments',
+        </span>
-                    locals: { project: project } %>
+        <%= render partial: 'shared/sidebar/experiments', locals: { project: project } %>
-        </li>
+      </li>
-      <% else %>
-        <li data-parent="candidate">
-          <span class="tree-link line-wrap no-indent">
-            <i class="no-arrow"></i>
-              <%= link_to project.name,
-                          project_action_to_link_to(project),
-                          title: project.name,
-                          data: { project_id: project.id } %>
-          </span>
-          <%= render partial: 'shared/sidebar/experiments',
-                    locals: { project: project } %>
-        </li>
-      <% end %>
     <% end %>
   <% end %>
 </ul>