mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-20 14:45:56 +08:00
Improve loading time of canvas view/edit [SCI-6797]
This commit is contained in:
parent
aef0bc1669
commit
e957d7d35e
|
@ -250,6 +250,17 @@ function initializeEdit() {
|
|||
{ color: 'white', shadow: true }
|
||||
);
|
||||
});
|
||||
|
||||
$('.module-options-dropdown')
|
||||
.on('show.bs.dropdown', function() {
|
||||
let dropdownContainer = $(this);
|
||||
$.getJSON(dropdownContainer.data('dropdown-menu-path'), function(result) {
|
||||
dropdownContainer.find('.dropdown-menu').html(result.html);
|
||||
});
|
||||
})
|
||||
.on('show.bs.dropdown', function() {
|
||||
$(this).find('.dropdown-menu').html('');
|
||||
});
|
||||
}
|
||||
|
||||
function destroyEdit() {
|
||||
|
|
|
@ -1,13 +1,15 @@
|
|||
class CanvasController < ApplicationController
|
||||
before_action :load_vars
|
||||
|
||||
before_action :check_view_canvas, only: [:edit, :full_zoom, :medium_zoom, :small_zoom]
|
||||
before_action :check_edit_canvas, only: [:edit, :update]
|
||||
before_action :check_view_canvas, except: %i(edit update)
|
||||
before_action :check_edit_canvas, only: %i(edit update)
|
||||
|
||||
def edit
|
||||
render partial: 'canvas/edit',
|
||||
locals: { experiment: @experiment, my_modules: @my_modules },
|
||||
:content_type => 'text/html'
|
||||
locals: {
|
||||
experiment: @experiment,
|
||||
my_modules: @my_modules
|
||||
}, content_type: 'text/html'
|
||||
end
|
||||
|
||||
def full_zoom
|
||||
|
@ -201,11 +203,12 @@ class CanvasController < ApplicationController
|
|||
end
|
||||
end
|
||||
|
||||
@my_modules = @experiment.my_modules.active
|
||||
@my_modules = @experiment.my_modules.active.preload(outputs: :to, user_assignments: %i(user user_role))
|
||||
end
|
||||
|
||||
def check_edit_canvas
|
||||
render_403 and return unless can_manage_experiment?(@experiment)
|
||||
@experiment_managable = can_manage_experiment?(@experiment)
|
||||
return render_403 unless @experiment_managable
|
||||
end
|
||||
|
||||
def check_view_canvas
|
||||
|
|
|
@ -67,8 +67,13 @@ class ExperimentsController < ApplicationController
|
|||
def canvas
|
||||
redirect_to module_archive_experiment_path(@experiment) if @experiment.archived_branch?
|
||||
@project = @experiment.project
|
||||
@active_modules = @experiment.my_modules.active.order(:name).includes(:tags, :inputs, :outputs)
|
||||
current_team_switch(@project.team)
|
||||
@active_modules = @experiment.my_modules.active.order(:name)
|
||||
.left_outer_joins(:designated_users, :task_comments)
|
||||
.preload(:tags, outputs: :to)
|
||||
.preload(:my_module_status, :my_module_group, user_assignments: %i(user user_role))
|
||||
.select('COUNT(users.id) as designated_users_count')
|
||||
.select('COUNT(comments.id) as task_comments_count')
|
||||
.select('my_modules.*').group(:id)
|
||||
end
|
||||
|
||||
def edit
|
||||
|
@ -290,7 +295,7 @@ class ExperimentsController < ApplicationController
|
|||
private
|
||||
|
||||
def load_experiment
|
||||
@experiment = Experiment.find_by(id: params[:id])
|
||||
@experiment = Experiment.preload(user_assignments: %i(user user_role)).find_by(id: params[:id])
|
||||
render_404 unless @experiment
|
||||
end
|
||||
|
||||
|
|
|
@ -56,6 +56,15 @@ class MyModulesController < ApplicationController
|
|||
end
|
||||
end
|
||||
|
||||
def canvas_dropdown_menu
|
||||
@experiment_managable = can_manage_experiment?(@experiment)
|
||||
@group_my_modules = @my_module.my_module_group&.my_modules&.preload(user_assignments: %i(user user_role))
|
||||
render json: {
|
||||
html: render_to_string({ partial: 'canvas/edit/my_module_dropdown_menu',
|
||||
locals: { my_module: @my_module } })
|
||||
}
|
||||
end
|
||||
|
||||
def activities
|
||||
params[:subjects] = {
|
||||
MyModule: [@my_module.id]
|
||||
|
@ -327,7 +336,7 @@ class MyModulesController < ApplicationController
|
|||
private
|
||||
|
||||
def load_vars
|
||||
@my_module = MyModule.find_by_id(params[:id])
|
||||
@my_module = MyModule.preload(user_assignments: %i(user user_role)).find_by(id: params[:id])
|
||||
if @my_module
|
||||
@experiment = @my_module.experiment
|
||||
@project = @my_module.experiment.project if @experiment
|
||||
|
|
|
@ -19,7 +19,7 @@ Canaid::Permissions.register_for(Experiment) do
|
|||
# assign/reassign/unassign tags
|
||||
can :manage_experiment do |user, experiment|
|
||||
experiment.permission_granted?(user, ExperimentPermissions::MANAGE) &&
|
||||
experiment.my_modules.all? do |my_module|
|
||||
experiment.my_modules.preload(my_module_status: :my_module_status_implications).all? do |my_module|
|
||||
if my_module.my_module_status
|
||||
my_module.my_module_status.my_module_status_implications.all? { |implication| implication.call(my_module) }
|
||||
else
|
||||
|
|
|
@ -1,15 +1,15 @@
|
|||
<div id="update-canvas"
|
||||
data-can-create-modules="<%= can_manage_experiment?(@experiment) ? "yes" : "no" %>"
|
||||
data-can-edit-modules="<%= can_manage_experiment?(@experiment) ? "yes" : "no" %>"
|
||||
data-can-clone-modules="<%= can_manage_experiment?(@experiment) ? "yes" : "no" %>"
|
||||
data-can-move-modules="<%= can_manage_experiment?(@experiment) ? "yes" : "no" %>"
|
||||
data-can-delete-modules="<%= can_manage_experiment?(@experiment) ? "yes" : "no" %>"
|
||||
data-can-reposition-modules="<%= can_manage_experiment?(@experiment) ? "yes" : "no" %>"
|
||||
data-can-edit-connections="<%= can_manage_experiment?(@experiment) ? "yes" : "no" %>"
|
||||
data-can-create-modules="<%= @experiment_managable ? "yes" : "no" %>"
|
||||
data-can-edit-modules="<%= @experiment_managable ? "yes" : "no" %>"
|
||||
data-can-clone-modules="<%= @experiment_managable ? "yes" : "no" %>"
|
||||
data-can-move-modules="<%= @experiment_managable ? "yes" : "no" %>"
|
||||
data-can-delete-modules="<%= @experiment_managable ? "yes" : "no" %>"
|
||||
data-can-reposition-modules="<%= @experiment_managable ? "yes" : "no" %>"
|
||||
data-can-edit-connections="<%= @experiment_managable ? "yes" : "no" %>"
|
||||
data-unsaved-work-text="<%=t "experiments.canvas.edit.unsaved_work" %>"
|
||||
>
|
||||
<%= bootstrap_form_tag url: canvas_experiment_url, method: "post", html: {class: "canvas-header"} do |f| %>
|
||||
<% if can_manage_experiment?(@experiment) %>
|
||||
<% if @experiment_managable %>
|
||||
<%=link_to "", type: "button", class: "btn btn-primary", id: "canvas-new-module" do %>
|
||||
<span class="hbtn-default">
|
||||
<span class="fas fa-credit-card"></span>
|
||||
|
@ -71,7 +71,7 @@
|
|||
</span>
|
||||
</div>
|
||||
<div id="diagram-container">
|
||||
<% if can_manage_experiment?(@experiment) %>
|
||||
<% if @experiment_managable %>
|
||||
<div id="diagram" class="diagram">
|
||||
<% my_modules.each do |my_module| %>
|
||||
<% if can_read_my_module?(my_module) %>
|
||||
|
@ -85,7 +85,7 @@
|
|||
</div>
|
||||
|
||||
<%-# Since we need to preload modals, we just check permission for experiment, instead of permissions for every module and module group -%>
|
||||
<% if can_manage_experiment?(@experiment) %>
|
||||
<% if @experiment_managable %>
|
||||
<%= render partial: "canvas/edit/modal/new_module", locals: {experiment: @experiment} %>
|
||||
<%= render partial: "canvas/edit/modal/edit_module", locals: {experiment: @experiment } %>
|
||||
<%= render partial: "canvas/edit/modal/move_module", locals: {experiment: @experiment } %>
|
||||
|
|
|
@ -7,12 +7,12 @@
|
|||
<span class="fas fa-tag"></span>
|
||||
</div>
|
||||
<% end %>
|
||||
<% if tags2.count == 0 %>
|
||||
<% if tags2.length.zero? %>
|
||||
<div class="add-tag last"><span class="fas fa-tag"></span></div>
|
||||
<% end %>
|
||||
<% if my_module.tags.count > 0 %>
|
||||
<% if my_module.tags.size.positive? %>
|
||||
<span class="badge badge-indicator">
|
||||
<%= my_module.tags.count %>
|
||||
<%= my_module.tags.size %>
|
||||
</span>
|
||||
<% else %>
|
||||
<span class="badge badge-indicator <%= "invisible" unless can_manage_my_module?(my_module) %>">
|
||||
|
|
|
@ -6,68 +6,23 @@
|
|||
data-module-y="<%= my_module.y %>"
|
||||
data-module-conns="<%= construct_module_connections(my_module) %>">
|
||||
|
||||
<% module_group = my_module.my_module_group %>
|
||||
|
||||
<div class="panel-heading">
|
||||
|
||||
<h3 class="panel-title"><%= my_module.name %></h3>
|
||||
|
||||
<div class="dropdown pull-right module-options">
|
||||
<div class="dropdown module-options-dropdown pull-right module-options" data-dropdown-menu-path="<%= canvas_dropdown_menu_my_module_path(my_module) %>">
|
||||
<a class="dropdown-toggle" id="<%= my_module.id %>_options" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span class="fas fa-caret-down" aria-hidden="true"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu custom-dropdown-menu no-scale" aria-labelledby="<%= my_module.id %>_options">
|
||||
<% if can_manage_my_module?(my_module) %>
|
||||
<li>
|
||||
<a class="edit-module" href="" data-module-id="<%= my_module.id %>"><%= t('experiments.canvas.edit.edit_module') %></a>
|
||||
</li>
|
||||
<% end %>
|
||||
<% if can_manage_experiment?(my_module.experiment) %>
|
||||
<li>
|
||||
<a class ="clone-module" href="" data-module-id="<%= my_module.id %>"><%= t('experiments.canvas.edit.clone_module') %></a>
|
||||
</li>
|
||||
<% end %>
|
||||
<% if can_move_my_module?(my_module) %>
|
||||
<li>
|
||||
<a class="move-module" href="" data-module-id="<%= my_module.id %>"><%= t('experiments.canvas.edit.move_module') %></a>
|
||||
</li>
|
||||
<% end %>
|
||||
<li>
|
||||
<%= link_to t('experiments.canvas.edit.task_access'),
|
||||
can_manage_my_module_users?(my_module) ? edit_access_permissions_project_experiment_my_module_path(my_module.experiment.project, my_module.experiment, my_module) : access_permissions_project_experiment_my_module_path(my_module.experiment.project, my_module.experiment, my_module),
|
||||
data: { action: 'remote-modal'} %>
|
||||
</li>
|
||||
<% if can_archive_my_module?(my_module) %>
|
||||
<li>
|
||||
<a class="delete-module" href="" data-module-id="<%= my_module.id %>"><%= t('experiments.canvas.edit.delete_module') %></a>
|
||||
</li>
|
||||
<% end %>
|
||||
<% if can_manage_experiment?(my_module.experiment) %>
|
||||
<li <%= 'style=display:none;' if my_module.my_module_group.blank? %>>
|
||||
<a class ="clone-module-group" href="" data-module-id="<%= my_module.id %>"><%= t('experiments.canvas.edit.clone_module_group') %></a>
|
||||
</li>
|
||||
<% end %>
|
||||
<% if module_group&.my_modules&.all? { |my_module| can_move_my_module?(my_module) } %>
|
||||
<li>
|
||||
<a class="move-module-group" href="" data-module-id="<%= my_module.id %>"><%= t('experiments.canvas.edit.move_module_group') %></a>
|
||||
</li>
|
||||
<% end %>
|
||||
|
||||
<% if module_group&.my_modules&.all? { |my_module| can_archive_my_module?(my_module) } %>
|
||||
<li data-hook="archive-module-group">
|
||||
<a class ="delete-module-group" href="" data-module-id="<%= my_module.id %>"><%= t('experiments.canvas.edit.delete_module_group') %></a>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<% if can_manage_experiment?(my_module.experiment) %>
|
||||
<div class="panel-body ep">
|
||||
<%= t('experiments.canvas.edit.drag_connections') %>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="panel-body ep">
|
||||
<%= t('experiments.canvas.edit.drag_connections') %>
|
||||
</div>
|
||||
|
||||
<div class="overlay"></div>
|
||||
|
||||
|
|
41
app/views/canvas/edit/_my_module_dropdown_menu.html.erb
Normal file
41
app/views/canvas/edit/_my_module_dropdown_menu.html.erb
Normal file
|
@ -0,0 +1,41 @@
|
|||
<% if can_manage_my_module?(my_module) %>
|
||||
<li>
|
||||
<a class="edit-module" href="" data-module-id="<%= my_module.id %>"><%= t('experiments.canvas.edit.edit_module') %></a>
|
||||
</li>
|
||||
<% end %>
|
||||
<% if @experiment_managable %>
|
||||
<li>
|
||||
<a class ="clone-module" href="" data-module-id="<%= my_module.id %>"><%= t('experiments.canvas.edit.clone_module') %></a>
|
||||
</li>
|
||||
<% end %>
|
||||
<% if can_move_my_module?(my_module) %>
|
||||
<li>
|
||||
<a class="move-module" href="" data-module-id="<%= my_module.id %>"><%= t('experiments.canvas.edit.move_module') %></a>
|
||||
</li>
|
||||
<% end %>
|
||||
<li>
|
||||
<%= link_to t('experiments.canvas.edit.task_access'),
|
||||
can_manage_my_module_users?(my_module) ? edit_access_permissions_project_experiment_my_module_path(my_module.experiment.project, my_module.experiment, my_module) : access_permissions_project_experiment_my_module_path(my_module.experiment.project, my_module.experiment, my_module),
|
||||
data: { action: 'remote-modal'} %>
|
||||
</li>
|
||||
<% if can_archive_my_module?(my_module) %>
|
||||
<li>
|
||||
<a class="delete-module" href="" data-module-id="<%= my_module.id %>"><%= t('experiments.canvas.edit.delete_module') %></a>
|
||||
</li>
|
||||
<% end %>
|
||||
<% if @experiment_managable %>
|
||||
<li <%= 'style=display:none;' if my_module.my_module_group.blank? %>>
|
||||
<a class ="clone-module-group" href="" data-module-id="<%= my_module.id %>"><%= t('experiments.canvas.edit.clone_module_group') %></a>
|
||||
</li>
|
||||
<% end %>
|
||||
<% if @group_my_modules&.all? { |my_module| can_move_my_module?(my_module) } %>
|
||||
<li>
|
||||
<a class="move-module-group" href="" data-module-id="<%= my_module.id %>"><%= t('experiments.canvas.edit.move_module_group') %></a>
|
||||
</li>
|
||||
<% end %>
|
||||
|
||||
<% if @group_my_modules&.all? { |my_module| can_archive_my_module?(my_module) } %>
|
||||
<li data-hook="archive-module-group">
|
||||
<a class ="delete-module-group" href="" data-module-id="<%= my_module.id %>"><%= t('experiments.canvas.edit.delete_module_group') %></a>
|
||||
</li>
|
||||
<% end %>
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
<%= link_to_if can_read_experiment?(my_module.experiment), my_module.name, protocols_my_module_path(my_module), class: 'my-module-title' %>
|
||||
<%= link_to my_module.name, protocols_my_module_path(my_module), class: 'my-module-title' %>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
|
@ -82,41 +82,37 @@
|
|||
|
||||
<div class="panel-footer panel-footer-scinote buttons-container">
|
||||
<ul class="nav nav-tabs nav-tabs-less" role="tablist">
|
||||
<% if can_read_experiment?(my_module.experiment) %>
|
||||
<li role="presentation">
|
||||
<a class="btn btn-link task-card-view-users" href="<%= index_old_my_module_user_my_modules_url(my_module_id: my_module.id, format: :json) %>" aria-controls="<%= my_module.id %>_users" role="tab" data-remote="true">
|
||||
<span class="fas fa-users" aria-hidden="true"></span>
|
||||
<span class="badge badge-indicator users-badge-indicator <%= 'hidden' unless my_module.designated_users.count.positive? %>"
|
||||
data-linked-id="<%= my_module.id %>">
|
||||
<%= my_module.designated_users.count %>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a class="btn btn-link task-card-view-activities" href="<%= activities_my_module_url(id: my_module.id) %>" aria-controls="<%= my_module.id %>_activities" role="tab">
|
||||
<span class="fas fa-list" aria-hidden="true"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a class="btn btn-link task-card-view-comments" href="<%= my_module_my_module_comments_url(my_module_id: my_module.id, format: :json) %>" aria-controls="<%= my_module.id %>_comments" role="tab" data-remote="true">
|
||||
<span class="fas fa-comment" aria-hidden="true"></span>
|
||||
<span id="comment-counter-<%= my_module.id %>" class="badge badge-indicator comments-badge-indicator <%= 'hidden' unless my_module.task_comments.count.positive? %>"
|
||||
data-linked-id="<%= my_module.id %>">
|
||||
<%= my_module.task_comments.count %>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<% end %>
|
||||
<li role="presentation">
|
||||
<a class="btn btn-link task-card-view-users" href="<%= index_old_my_module_user_my_modules_url(my_module_id: my_module.id, format: :json) %>" aria-controls="<%= my_module.id %>_users" role="tab" data-remote="true">
|
||||
<span class="fas fa-users" aria-hidden="true"></span>
|
||||
<span class="badge badge-indicator users-badge-indicator <%= 'hidden' unless my_module.designated_users_count.positive? %>"
|
||||
data-linked-id="<%= my_module.id %>">
|
||||
<%= my_module.designated_users_count %>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a class="btn btn-link task-card-view-activities" href="<%= activities_my_module_url(id: my_module.id) %>" aria-controls="<%= my_module.id %>_activities" role="tab">
|
||||
<span class="fas fa-list" aria-hidden="true"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a class="btn btn-link task-card-view-comments" href="<%= my_module_my_module_comments_url(my_module_id: my_module.id, format: :json) %>" aria-controls="<%= my_module.id %>_comments" role="tab" data-remote="true">
|
||||
<span class="fas fa-comment" aria-hidden="true"></span>
|
||||
<span id="comment-counter-<%= my_module.id %>" class="badge badge-indicator comments-badge-indicator <%= 'hidden' unless my_module.task_comments_count.positive? %>"
|
||||
data-linked-id="<%= my_module.id %>">
|
||||
<%= my_module.task_comments_count %>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Tab panes -->
|
||||
<div class="tab-content">
|
||||
<% if can_read_experiment?(my_module.experiment) %>
|
||||
<div role="tabpanel" class="tab-pane" id="<%= my_module.id %>_info" data-contents="info"></div>
|
||||
<div role="tabpanel" class="tab-pane" id="<%= my_module.id %>_users" data-contents="users"></div>
|
||||
<div role="tabpanel" class="tab-pane" id="<%= my_module.id %>_activities" data-contents="activities"></div>
|
||||
<div role="tabpanel" class="tab-pane" id="<%= my_module.id %>_comments" data-contents="comments"></div>
|
||||
<% end %>
|
||||
<div role="tabpanel" class="tab-pane" id="<%= my_module.id %>_info" data-contents="info"></div>
|
||||
<div role="tabpanel" class="tab-pane" id="<%= my_module.id %>_users" data-contents="users"></div>
|
||||
<div role="tabpanel" class="tab-pane" id="<%= my_module.id %>_activities" data-contents="activities"></div>
|
||||
<div role="tabpanel" class="tab-pane" id="<%= my_module.id %>_comments" data-contents="comments"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -419,6 +419,7 @@ Rails.application.routes.draw do
|
|||
# AJAX popup accessed from full-zoom canvas for single module,
|
||||
# as well as full activities view (HTML) for single module
|
||||
get 'description'
|
||||
get 'canvas_dropdown_menu'
|
||||
get 'activities'
|
||||
post 'activities'
|
||||
get 'activities_tab' # Activities in tab view for single module
|
||||
|
|
Loading…
Reference in a new issue