Merge pull request #5349 from aignatov-bio/ai-sci-8047-add-navigator-interactions

Add navigator interactions [SCI-8047]
2024-09-20 23:16:15 +08:00 · 2023-04-26 10:53:29 +02:00 · 2023-04-26 10:53:29 +02:00 · 5cf5201efd
parent b01fc03101 1bc2baf1f3
commit 5cf5201efd
19 changed files with 96 additions and 33 deletions
--- a/app/assets/javascripts/experiments/table.js
+++ b/app/assets/javascripts/experiments/table.js
@ -166,6 +166,7 @@ var ExperimnetTable = {
  duplicateMyModules: function(url, ids) {
    $.post(url, { my_module_ids: ids }, () => {
      this.loadTable();
+      window.navigatorContainer.reloadChildrenLevel = true
    }).error((data) => {
      HelperModule.flashAlertMsg(data.responseJSON.message, 'danger');
    });
@ -179,6 +180,7 @@ var ExperimnetTable = {
    $.post(url, { my_modules: ids }, (data) => {
      HelperModule.flashAlertMsg(data.message, 'success');
      this.loadTable();
+      window.navigatorContainer.reloadChildrenLevel = true;
    }).error((data) => {
      HelperModule.flashAlertMsg(data.responseJSON.message, 'danger');
    });
@ -357,6 +359,7 @@ var ExperimnetTable = {
        $.post(table.data('move-modules-url'), moveParams, (data) => {
          HelperModule.flashAlertMsg(data.message, 'success');
          this.loadTable();
+          window.navigatorContainer.reloadChildrenLevel = true
        }).error((data) => {
          HelperModule.flashAlertMsg(data.responseJSON.message, 'danger');
        });
@ -494,6 +497,7 @@ var ExperimnetTable = {
  initNewTaskModal: function(table) {
    $('.experiment-new-my_module').on('ajax:success', '#new-my-module-modal', function() {
      table.loadTable();
+      window.navigatorContainer.reloadChildrenLevel = true
    });
  },
  initSorting: function(table) {
@ -564,11 +568,6 @@ var ExperimnetTable = {
    $(this.table).find('.table-row').remove();
    this.loadPlaceholder();

-    Sidebar.reload({
-      sort: this.myModulesCurrentSort,
-      view_mode: $('#experimentTable').hasClass('archived') ? 'archived' : ''
-    });
-
    $.get(dataUrl, tableParams, (result) => {
      $(this.table).find('.table-row-placeholder, .table-row-placeholder-divider').remove();
      this.appendRows(result.data);
--- a/app/assets/javascripts/projects/canvas.js.erb
+++ b/app/assets/javascripts/projects/canvas.js.erb
@ -174,11 +174,8 @@ function initializeEdit() {
  $("#canvas-container").addClass("canvas-container-edit-mode");

  // Hide sidebar & also its toggle button
-  $(".sidebar-container").addClass("collapsed");
  $("#wrapper").css("paddingLeft", "0");
  $(".navbar-secondary").addClass("navbar-without-sidebar");
-  $(".show-sidebar").addClass("invisible");
-  $('.sci--layout').attr('data-navigator-collapsed', true);

  // Also, hide zoom levels button group
  $("#diagram-buttons").hide();
--- a/app/assets/javascripts/projects/index.js
+++ b/app/assets/javascripts/projects/index.js
@ -308,10 +308,7 @@ var ProjectsIndex = (function() {

  function refreshCurrentView() {
    loadCardsView();
-    Sidebar.reload({
-      sort: projectsCurrentSort,
-      view_mode: $('.projects-index').data('view-mode')
-    });
+    window.navigatorContainer.reloadCurrentLevel = true
  }

  function initEditButton() {
@ -552,7 +549,7 @@ var ProjectsIndex = (function() {
      if (projectsCurrentSort !== $(this).data('sort')) {
        $('#sortMenuDropdown a').removeClass('selected');
        projectsCurrentSort = $(this).data('sort');
-        refreshCurrentView();
+        loadCardsView();
        $(this).addClass('selected');
        $('#sortMenu').dropdown('toggle');
      }
@ -627,7 +624,7 @@ var ProjectsIndex = (function() {

    $filterDropdown.on('filter:apply', function() {
      appliedFiltersMark();
-      refreshCurrentView();
+      loadCardsView();
    });

    // Clear filters
--- a/app/assets/javascripts/projects/show.js
+++ b/app/assets/javascripts/projects/show.js
@ -150,10 +150,6 @@

  function refreshCurrentView() {
    loadCardsView();
-    Sidebar.reload({
-      sort: experimentsCurrentSort,
-      view_mode: $(experimentsPage).data('view-mode')
-    });
  }

  function selectDate($field) {
--- a/app/assets/stylesheets/shared_styles/elements/toggles.scss
+++ b/app/assets/stylesheets/shared_styles/elements/toggles.scss
@ -98,6 +98,7 @@ input[type="checkbox"].sci-toggle-checkbox {
      svg,
      svg path {
        fill: $color-black;
+        display: initial;
      }

      &:first-of-type {
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@ -306,7 +306,7 @@ mark,.mark {
  #secondary-menu {
    background: $color-white;
    border-bottom: 1px solid $color-gainsboro;
-    padding-left: 29px;
+    padding-left: 0;
    padding-top: 15px;

    .open > a,
--- a/app/controllers/navigator/base_controller.rb
+++ b/app/controllers/navigator/base_controller.rb
@ -164,8 +164,8 @@ module Navigator
    end

    def build_folder_tree(folder, children, archived = false)
-      tree = fetch_projects(folder, archived).map { |i| project_serializer(i) } +
-             fetch_project_folders(folder, archived).map { |i| folder_serializer(i) }
+      tree = fetch_projects(folder.parent_folder, archived).map { |i| project_serializer(i) } +
+             fetch_project_folders(folder.parent_folder, archived).map { |i| folder_serializer(i) }
      tree.find { |i| i[:id] == folder.code }[:children] = children
      tree = build_folder_tree(folder.parent_folder, tree, archived) if folder.parent_folder.present?
      tree
--- a/app/controllers/navigator/project_folders_controller.rb
+++ b/app/controllers/navigator/project_folders_controller.rb
@ -10,7 +10,10 @@ module Navigator
    end

    def tree
-      tree = build_folder_tree(@project_folder, nil, params[:archived] == 'true')
+      project_and_folders = project_level_branch(@project_folder, params[:archived] == 'true')
+      if @project_folder.parent_folder
+        tree = build_folder_tree(@project_folder, project_and_folders, params[:archived] == 'true')
+      end
      render json: { items: tree }
    end

--- a/app/javascript/packs/vue/navigation/navigator.js
+++ b/app/javascript/packs/vue/navigation/navigator.js
@ -17,12 +17,32 @@ window.addEventListener('DOMContentLoaded', () => {
    data() {
      return {
        navigatorCollapsed: false,
+        reloadCurrentLevel: false,
+        reloadChildrenLevel: false
      }
    },
    created() {
      this.navigatorCollapsed = $('.sci--layout').attr('data-navigator-collapsed');
+
+      $(document).on('inlineEditing:fieldUpdated', '.title-row .inline-editing-container', () => {
+        this.reloadCurrentLevel = true;
+      })
    },
    watch: {
+      reloadCurrentLevel: function () {
+        if (this.reloadCurrentLevel) {
+          this.$nextTick(() => {
+            this.reloadCurrentLevel = false;
+          });
+        }
+      },
+      reloadChildrenLevel: function () {
+        if (this.reloadChildrenLevel) {
+          this.$nextTick(() => {
+            this.reloadChildrenLevel = false;
+          });
+        }
+      },
      navigatorCollapsed: function () {
        let stateUrl = $('#sciNavigationNavigatorContainer').attr('data-navigator-state-url');
        $('.sci--layout').attr('data-navigator-collapsed', this.navigatorCollapsed);
--- a/app/javascript/vue/navigation/navigator.vue
+++ b/app/javascript/vue/navigation/navigator.vue
@ -12,6 +12,8 @@
                     :key="item.id"
                     :currentItemId="currentItemId"
                     :item="item"
+                     :reloadCurrentLevel="reloadCurrentLevel"
+                     :reloadChildrenLevel="reloadChildrenLevel"
                     :archived="archived" />
    </perfect-scrollbar>
  </div>
@ -35,9 +37,21 @@ export default {
      archived: null
    }
  },
+  props: {
+    reloadCurrentLevel: Boolean,
+    reloadChildrenLevel: Boolean
+  },
  computed: {
    sortedMenuItems() {
-      return this.menuItems.sort((a, b) => a.name - b.name);
+      return this.menuItems.sort((a, b) => {
+        if (a.name < b.name) {
+          return -1;
+        }
+        if (a.name > b.name) {
+          return 1;
+        }
+        return 0;
+      });
    }
  },
  created() {
@ -53,6 +67,14 @@ export default {
  watch: {
    archived() {
      this.loadTree();
+    },
+    reloadCurrentLevel: function() {
+      if (this.reloadCurrentLevel && (
+            this.currentItemId.length == 0 ||
+            this.menuItems.filter(item => item.id == this.currentItemId)
+          )) {
+        this.loadTree();
+      }
    }
  },
  methods: {
--- a/app/javascript/vue/navigation/navigator_item.vue
+++ b/app/javascript/vue/navigation/navigator_item.vue
@ -23,6 +23,8 @@
                     @item:expand="treeExpand"
                     :key="item.id"
                     :currentItemId="currentItemId"
+                     :reloadCurrentLevel="reloadCurrentLevel"
+                     :reloadChildrenLevel="reloadChildrenLevel"
                     :item="item"
                     :archived="archived" />
    </div>
@ -35,7 +37,9 @@ export default {
  props: {
    item: Object,
    currentItemId: String,
-    archived: Boolean
+    archived: Boolean,
+    reloadCurrentLevel: Boolean,
+    reloadChildrenLevel: Boolean
  },
  data: function() {
    return {
@ -48,7 +52,15 @@ export default {
      return this.item.has_children;
    },
    sortedMenuItems: function() {
-      return this.children.sort((a, b) => a.name - b.name);
+      return this.children.sort((a, b) => {
+        if (a.name < b.name) {
+          return -1;
+        }
+        if (a.name > b.name) {
+          return 1;
+        }
+        return 0;
+      });
    },
    activeItem: function() {
      return this.item.id == this.currentItemId;
@ -71,6 +83,16 @@ export default {
  watch: {
    currentItemId: function() {
      this.selectItem();
+    },
+    reloadChildrenLevel: function() {
+      if (this.reloadChildrenLevel && this.item.id == this.currentItemId) {
+        this.loadChildren();
+      }
+    },
+    reloadCurrentLevel: function() {
+      if (this.reloadCurrentLevel && this.children.find((item) => item.id == this.currentItemId)) {
+        this.loadChildren();
+      }
    }
  },
  methods: {
--- a/app/views/experiments/_show_header.html.erb
+++ b/app/views/experiments/_show_header.html.erb
@ -1,5 +1,6 @@
 <div class="content-header sticky-header">
  <div class="title-row">
+    <i class="fas fa-bars sci--layout--navigator-open p-2 cursor-pointer"></i>
    <h1 class="experimnet-name" data-toggle="tooltip" data-placement="bottom" title="<%= @experiment.name %>">
      <% if @experiment.archived? %>
        <i class="fas fa-archive" data-view-mode="archived"></i>
--- a/app/views/my_modules/activities.html.erb
+++ b/app/views/my_modules/activities.html.erb
@ -10,7 +10,7 @@
    }
  %>
 <% end %>
-<%= render partial: "shared/secondary_navigation" %>
+<%= render partial: "shared/secondary_navigation", locals: { with_navigator: true } %>

 <div class="global-activities-container container-flex task-activities">
    <div class="ga-top ">
--- a/app/views/my_modules/archive.html.erb
+++ b/app/views/my_modules/archive.html.erb
@ -10,7 +10,7 @@
    }
  %>
 <% end %>
-<%= render partial: "shared/secondary_navigation" %>
+<%= render partial: "shared/secondary_navigation", locals: { with_navigator: true } %>

 <div class="content-pane" id="result-archive">
  <div class="row">
--- a/app/views/my_modules/protocols.html.erb
+++ b/app/views/my_modules/protocols.html.erb
@ -37,7 +37,7 @@
  %>
 <% end %>
 <%= render partial: 'shared/drag_n_drop_overlay' %>
-<%= render partial: 'shared/secondary_navigation', locals: { render_breadcrumbs: false, project: @experiment.project, experiment: @experiment } %>
+<%= render partial: 'shared/secondary_navigation', locals: { render_breadcrumbs: false, project: @experiment.project, experiment: @experiment, with_navigator: true } %>

 <div class="content-pane my-modules-protocols-index" data-task-id="<%= @my_module.id %>">
  <div class="my-module-position-container">
--- a/app/views/my_modules/results.html.erb
+++ b/app/views/my_modules/results.html.erb
@ -10,7 +10,7 @@
    }
  %>
 <% end %>
-<%= render partial: "shared/secondary_navigation" %>
+<%= render partial: "shared/secondary_navigation", locals: { with_navigator: true } %>
 <%= render partial: 'shared/drag_n_drop_overlay' %>
 <%= render partial: 'assets/wopi/create_wopi_file_modal' %>

--- a/app/views/projects/show/_header.html.erb
+++ b/app/views/projects/show/_header.html.erb
@ -1,5 +1,6 @@
 <div class="content-header sticky-header">
  <div class="title-row">
+    <i class="fas fa-bars sci--layout--navigator-open p-2 cursor-pointer"></i>
    <h1 class="project-name">
      <% if @project.archived? %>
        <i class="fas fa-archive" data-view-mode="archived"></i>
--- a/app/views/shared/_secondary_navigation.html.erb
+++ b/app/views/shared/_secondary_navigation.html.erb
@ -100,13 +100,16 @@
      </ul>

      <!-- Secondary navigation title -->
-      <h1 class="nav-name <%= @inline_editable_title_config.present? ? 'editable' : '' %>" data-hook="secondary-navigation-title-name">
+      <h1 class="nav-name title-row flex <%= @inline_editable_title_config.present? ? 'editable' : '' %>" data-hook="secondary-navigation-title-name">
+        <% if defined?(with_navigator) && with_navigator %>
+          <i class="fas fa-bars sci--layout--navigator-open p-2 cursor-pointer text-base"></i>
+        <% end %>
        <% if @inline_editable_title_config.present? %>
          <%= render partial: "shared/inline_editing",
-                     locals: {
+                    locals: {
                        initial_value: title_element.name,
                        config: @inline_editable_title_config
-                     } %>
+                    } %>
        <% else %>
          <% if title_element.archived_branch? %>
            <i class="fas fa-archive"></i>&nbsp;
@ -114,7 +117,6 @@
          <%= title_element.name %>
        <% end %>
      </h1>
-
    </div>
  </div>
 </nav>
--- a/app/views/shared/navigation/_navigator.html.erb
+++ b/app/views/shared/navigation/_navigator.html.erb
@ -9,5 +9,7 @@
      data-turbolinks-permanent data-behaviour="vue">
  <navigator-container
    @navigator:colapse="navigatorCollapsed = true"
+    :reload-current-level="reloadCurrentLevel"
+    :reload-children-level="reloadChildrenLevel"
  />
 </div>