Refactor experiment sidebar

app/assets/javascripts/sidebar.js

@@ -272,4 +272,60 @@
   });
 
   scrollToSelectedItem();
-}(window));
+});
+
+
+
+var Sidebar = (function() {
+
+  const SIDEBAR_ID = '#slide-panel';
+  const STORAGE_TREE_KEY = 'scinote-sidebar-tree-state';
+  const STORAGE_SCROLL_TREE_KEY = 'scinote-sidebar-tree-scroll-state';
+
+  function toggleTree($tree_childs) {
+    $tree_childs.toggleClass('hidden')
+    $.each($tree_childs, (i, tree_child) => {
+      $(tree_child).closest('.branch').find('.tree-toggle').first().toggleClass('fa-caret-down').toggleClass('fa-caret-right')
+    })
+  }
+
+  function saveCurrentState() {
+    var config = []
+    $.each($(SIDEBAR_ID).find('.tree-child:not(:hidden)'), (i, branch) => {
+      config.push(`[data-branch-id=${branch.dataset.branchId}]`)
+    })
+    sessionStorage.setItem(STORAGE_TREE_KEY, config.join(','));
+  }
+
+  function initSideBar() {
+    $(SIDEBAR_ID).on('click', '.tree-toggle', function() {
+      var $tree_child = $(this).closest('.branch').find('.tree-child').first()
+      toggleTree($tree_child)
+      saveCurrentState();
+      PerfectSb().update_all();
+    })
+
+    $(SIDEBAR_ID).find('.tree').scroll(function() {
+      sessionStorage.setItem(STORAGE_SCROLL_TREE_KEY, $(this).scrollTop());
+    })
+
+    toggleTree($(SIDEBAR_ID).find('.tree-child[data-active="true"]'))
+    toggleTree($(SIDEBAR_ID).find('.tree-child.hidden').filter(sessionStorage.getItem(STORAGE_TREE_KEY)))
+    $('#wrapper').show();
+
+    PerfectSb().update_all();
+    $(SIDEBAR_ID).find('.tree').scrollTo(sessionStorage.getItem(STORAGE_SCROLL_TREE_KEY));
+  }
+
+  return {
+    init: (mode) => {
+      if ($(SIDEBAR_ID).length) {
+        initSideBar()
+      }
+    }
+  };
+}());
+
+$(document).on('turbolinks:load', function() {
+  Sidebar.init();
+});

app/assets/stylesheets/partials/_sidebar.scss

@@ -66,10 +66,6 @@
         opacity: 1;
       }
 
-      .fa-caret-right {
-        padding: 3px 5px;
-      }
-
       .tree {
         margin-bottom: 0;
         opacity: 1;

app/assets/stylesheets/partials/_tree_view.scss

@@ -85,7 +85,24 @@
   }
 
   .tree-link {
+    align-items: center;
     display: flex;
+    padding-left: 0;
+    position: relative;
+
+    .tree-toggle {
+      display: inline-block;
+      line-height: 30px;
+      position: absolute;
+      text-align: center;
+      top: 10px;
+      width: 30px;
+      z-index: 2;
+    }
+
+    .line-wrap {
+      padding-left: 30px;
+    }
 
     a:not(.canvas-center-on) {
       width: 100%;

app/controllers/projects_controller.rb

@@ -69,11 +69,20 @@ class ProjectsController < ApplicationController
   end
 
   def sidebar
+    current_task ||= current_task || nil
+    current_experiment ||= current_experiment || current_task&.experiment || nil
+    current_project ||= current_experiment&.project || current_task&.experiment&.project || nil
+
     respond_to do |format|
       format.json do
         render json: {
           html: render_to_string(
             partial: 'shared/sidebar/projects.html.erb',
+            locals: {
+              current_project: current_project,
+              current_experiment: current_experiment,
+              current_task: current_task
+            },
             formats: :html
           )
         }

app/views/shared/_sidebar.html.erb

@@ -12,7 +12,11 @@
     <div class="tree perfect-scrollbar" data-scroll="<%= params[:scroll] %>">
       <ul>
         <% cache [action_name, current_user, current_team] do %>
-          <%= render partial: 'shared/sidebar/projects' %>
+          <%= render partial: 'shared/sidebar/projects', locals: {
+            current_project: current_project,
+            current_experiment: current_experiment,
+            current_task: current_task
+          }  %>
         <% end %>
       </ul>
     </div>

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

@@ -1,17 +1,27 @@
 <% if project.active_experiments.present? %>
-  <ul>
+  <ul class="tree-child hidden" data-active="<%= project.id == current_project&.id %>" data-branch-id="pro<%= project.id %>">
     <% project.active_experiments.each do |experiment| %>
       <% cache [action_name, current_user, experiment] do %>
-        <li data-parent="candidate">
+        <li data-parent="candidate" class="branch <%= 'active' if experiment_page? && current_experiment == experiment %>">
           <span class="tree-link line-wrap first-indent" title="<%= experiment.name %>">
-            <i class="no-arrow"></i>
+            <% if experiment.active_my_modules.any? %>
+              <i class="fas fa-caret-right tree-toggle"></i>
+            <% end %>
             <%= link_to experiment.name,
                         experiment_action_to_link_to(experiment),
                         class: 'overview_exp_label line-wrap',
+                        style: (current_experiment == experiment ? 'font-weight: bold' : ''),
                         data: { type: 'experiment', id: experiment.id }
                         %>
+            <% if experiment_page? && current_experiment == experiment && action_name =='canvas' %>
+              <a href="" class="canvas-center-on"><span class="fas fa-map-marker-alt"></span></a>
+            <% end %>
           </span>
-          <%= render partial: 'shared/sidebar/my_modules', locals: { experiment: experiment } %>
+          <%= render partial: 'shared/sidebar/my_modules', locals: {
+            experiment: experiment,
+            current_experiment: current_experiment,
+            current_task: current_task
+          } %>
         </li>
       <% end %>
     <% end %>

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

@@ -1,7 +1,7 @@
 <% if experiment.active_my_modules.present? %>
-  <ul>
+  <ul class="tree-child hidden" data-active="<%= current_experiment&.id == experiment.id %>" data-branch-id="exp<%= experiment.id %>">
     <% experiment.active_my_modules.each do |my_module| %>
-      <li class="leaf" data-module-id="<%= my_module.id %>">
+      <li class="leaf  <%= 'active' if module_page? && current_task == my_module %>" data-module-id="<%= my_module.id %>">
         <span class="tree-link task-tree-link second-indent" title="<%= my_module.name %>">
           <%= link_to my_module.name,
                       module_action_to_link_to(my_module),

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

@@ -1,16 +1,25 @@
 <ul>
   <% @projects_tree.each do |project| %>
     <% cache [action_name, current_user, project] do %>
-      <li data-parent="candidate">
+      <li data-parent="candidate"
+          class="branch <%= 'active' if project_page? && current_project == project %>" >
         <span class="tree-link no-indent" title="<%= project.name %>">
-          <i class="no-arrow"></i>
+          <% if project.active_experiments.any? %>
+            <i class="fas fa-caret-right tree-toggle"></i>
+          <% end %>
             <%= link_to project.name,
                         project_action_to_link_to(project),
                         title: project.name,
                         class: 'line-wrap',
+                        style: (current_project == project ? 'font-weight: bold' : ''),
                         data: { type: 'project', id: project.id } %>
         </span>
-        <%= render partial: 'shared/sidebar/experiments', locals: { project: project } %>
+        <%= render partial: 'shared/sidebar/experiments', locals: {
+            project: project,
+            current_project: current_project,
+            current_experiment: current_experiment,
+            current_task: current_task
+        } %>
       </li>
     <% end %>
   <% end %>