scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-03 10:24:30 +08:00
Code Issues Projects Releases Packages Wiki Activity

Improve loading time of canvas view/edit [SCI-6797]

Browse source
This commit is contained in:
Oleksii Kriuchykhin 2022-05-09 11:40:31 +02:00
parent aef0bc1669
commit e957d7d35e
11 changed files with 126 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/assets/javascripts/projects/canvas.js.erb
View file

@ -250,6 +250,17 @@ function initializeEdit() {
{ color: 'white', shadow: true } { 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() { function destroyEdit() {

15
app/controllers/canvas_controller.rb
View file

@ -1,13 +1,15 @@
class CanvasController < ApplicationController class CanvasController < ApplicationController
before_action :load_vars before_action :load_vars
before_action :check_view_canvas, only: [:edit, :full_zoom, :medium_zoom, :small_zoom] before_action :check_view_canvas, except: %i(edit update)
before_action :check_edit_canvas, only: [:edit, :update] before_action :check_edit_canvas, only: %i(edit update)
def edit def edit
render partial: 'canvas/edit', render partial: 'canvas/edit',
locals: { experiment: @experiment, my_modules: @my_modules }, locals: {
:content_type => 'text/html' experiment: @experiment,
my_modules: @my_modules
}, content_type: 'text/html'
end end
def full_zoom def full_zoom
@ -201,11 +203,12 @@ class CanvasController < ApplicationController
end end
end end
@my_modules = @experiment.my_modules.active @my_modules = @experiment.my_modules.active.preload(outputs: :to, user_assignments: %i(user user_role))
end end
def check_edit_canvas 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 end
def check_view_canvas def check_view_canvas

11
app/controllers/experiments_controller.rb
View file

@ -67,8 +67,13 @@ class ExperimentsController < ApplicationController
def canvas def canvas
redirect_to module_archive_experiment_path(@experiment) if @experiment.archived_branch? redirect_to module_archive_experiment_path(@experiment) if @experiment.archived_branch?
@project = @experiment.project @project = @experiment.project
@active_modules = @experiment.my_modules.active.order(:name).includes(:tags, :inputs, :outputs) @active_modules = @experiment.my_modules.active.order(:name)
current_team_switch(@project.team) .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 end
def edit def edit
@ -290,7 +295,7 @@ class ExperimentsController < ApplicationController
private private
def load_experiment 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 render_404 unless @experiment
end end

11
app/controllers/my_modules_controller.rb
View file

@ -56,6 +56,15 @@ class MyModulesController < ApplicationController
end end
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 def activities
params[:subjects] = { params[:subjects] = {
MyModule: [@my_module.id] MyModule: [@my_module.id]
@ -327,7 +336,7 @@ class MyModulesController < ApplicationController
private private
def load_vars 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 if @my_module
@experiment = @my_module.experiment @experiment = @my_module.experiment
@project = @my_module.experiment.project if @experiment @project = @my_module.experiment.project if @experiment

2
app/permissions/experiment.rb
View file

@ -19,7 +19,7 @@ Canaid::Permissions.register_for(Experiment) do
# assign/reassign/unassign tags # assign/reassign/unassign tags
can :manage_experiment do |user, experiment| can :manage_experiment do |user, experiment|
experiment.permission_granted?(user, ExperimentPermissions::MANAGE) && 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 if my_module.my_module_status
my_module.my_module_status.my_module_status_implications.all? { |implication| implication.call(my_module) } my_module.my_module_status.my_module_status_implications.all? { |implication| implication.call(my_module) }
else else

20
app/views/canvas/_edit.html.erb
View file

@ -1,15 +1,15 @@
<div id="update-canvas" <div id="update-canvas"
data-can-create-modules="<%= can_manage_experiment?(@experiment) ? "yes" : "no" %>" data-can-create-modules="<%= @experiment_managable ? "yes" : "no" %>"
data-can-edit-modules="<%= can_manage_experiment?(@experiment) ? "yes" : "no" %>" data-can-edit-modules="<%= @experiment_managable ? "yes" : "no" %>"
data-can-clone-modules="<%= can_manage_experiment?(@experiment) ? "yes" : "no" %>" data-can-clone-modules="<%= @experiment_managable ? "yes" : "no" %>"
data-can-move-modules="<%= can_manage_experiment?(@experiment) ? "yes" : "no" %>" data-can-move-modules="<%= @experiment_managable ? "yes" : "no" %>"
data-can-delete-modules="<%= can_manage_experiment?(@experiment) ? "yes" : "no" %>" data-can-delete-modules="<%= @experiment_managable ? "yes" : "no" %>"
data-can-reposition-modules="<%= can_manage_experiment?(@experiment) ? "yes" : "no" %>" data-can-reposition-modules="<%= @experiment_managable ? "yes" : "no" %>"
data-can-edit-connections="<%= can_manage_experiment?(@experiment) ? "yes" : "no" %>" data-can-edit-connections="<%= @experiment_managable ? "yes" : "no" %>"
data-unsaved-work-text="<%=t "experiments.canvas.edit.unsaved_work" %>" 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| %> <%= 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 %> <%=link_to "", type: "button", class: "btn btn-primary", id: "canvas-new-module" do %>
<span class="hbtn-default"> <span class="hbtn-default">
<span class="fas fa-credit-card"></span> <span class="fas fa-credit-card"></span>
@ -71,7 +71,7 @@
</span> </span>
</div> </div>
<div id="diagram-container"> <div id="diagram-container">
<% if can_manage_experiment?(@experiment) %> <% if @experiment_managable %>
<div id="diagram" class="diagram"> <div id="diagram" class="diagram">
<% my_modules.each do |my_module| %> <% my_modules.each do |my_module| %>
<% if can_read_my_module?(my_module) %> <% if can_read_my_module?(my_module) %>
@ -85,7 +85,7 @@
</div> </div>
<%-# Since we need to preload modals, we just check permission for experiment, instead of permissions for every module and module group -%> <%-# 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/new_module", locals: {experiment: @experiment} %>
<%= render partial: "canvas/edit/modal/edit_module", locals: {experiment: @experiment } %> <%= render partial: "canvas/edit/modal/edit_module", locals: {experiment: @experiment } %>
<%= render partial: "canvas/edit/modal/move_module", locals: {experiment: @experiment } %> <%= render partial: "canvas/edit/modal/move_module", locals: {experiment: @experiment } %>

6
app/views/canvas/_tags.html.erb
View file

@ -7,12 +7,12 @@
<span class="fas fa-tag"></span> <span class="fas fa-tag"></span>
</div> </div>
<% end %> <% end %>
<% if tags2.count == 0 %> <% if tags2.length.zero? %>
<div class="add-tag last"><span class="fas fa-tag"></span></div> <div class="add-tag last"><span class="fas fa-tag"></span></div>
<% end %> <% end %>
<% if my_module.tags.count > 0 %> <% if my_module.tags.size.positive? %>
<span class="badge badge-indicator"> <span class="badge badge-indicator">
<%= my_module.tags.count %> <%= my_module.tags.size %>
</span> </span>
<% else %> <% else %>
<span class="badge badge-indicator <%= "invisible" unless can_manage_my_module?(my_module) %>"> <span class="badge badge-indicator <%= "invisible" unless can_manage_my_module?(my_module) %>">

53
app/views/canvas/edit/_my_module.html.erb
View file

@ -6,68 +6,23 @@
data-module-y="<%= my_module.y %>" data-module-y="<%= my_module.y %>"
data-module-conns="<%= construct_module_connections(my_module) %>"> data-module-conns="<%= construct_module_connections(my_module) %>">
<% module_group = my_module.my_module_group %>
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"><%= my_module.name %></h3> <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"> <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> <span class="fas fa-caret-down" aria-hidden="true"></span>
</a> </a>
<ul class="dropdown-menu custom-dropdown-menu no-scale" aria-labelledby="<%= my_module.id %>_options"> <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> </ul>
</div> </div>
</div> </div>
<% if can_manage_experiment?(my_module.experiment) %> <div class="panel-body ep">
<div class="panel-body ep"> <%= t('experiments.canvas.edit.drag_connections') %>
<%= t('experiments.canvas.edit.drag_connections') %> </div>
</div>
<% end %>
<div class="overlay"></div> <div class="overlay"></div>

41
app/views/canvas/edit/_my_module_dropdown_menu.html.erb Normal file
View 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 %>

60
app/views/canvas/full_zoom/_my_module.html.erb
View file

@ -41,7 +41,7 @@
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <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> </h3>
</div> </div>
@ -82,41 +82,37 @@
<div class="panel-footer panel-footer-scinote buttons-container"> <div class="panel-footer panel-footer-scinote buttons-container">
<ul class="nav nav-tabs nav-tabs-less" role="tablist"> <ul class="nav nav-tabs nav-tabs-less" role="tablist">
<% if can_read_experiment?(my_module.experiment) %> <li role="presentation">
<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">
<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="fas fa-users" aria-hidden="true"></span> <span class="badge badge-indicator users-badge-indicator <%= 'hidden' unless my_module.designated_users_count.positive? %>"
<span class="badge badge-indicator users-badge-indicator <%= 'hidden' unless my_module.designated_users.count.positive? %>" data-linked-id="<%= my_module.id %>">
data-linked-id="<%= my_module.id %>"> <%= my_module.designated_users_count %>
<%= my_module.designated_users.count %> </span>
</span> </a>
</a> </li>
</li> <li role="presentation">
<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">
<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>
<span class="fas fa-list" aria-hidden="true"></span> </a>
</a> </li>
</li> <li role="presentation">
<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">
<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 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? %>"
<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 %>">
data-linked-id="<%= my_module.id %>"> <%= my_module.task_comments_count %>
<%= my_module.task_comments.count %> </span>
</span> </a>
</a> </li>
</li>
<% end %>
</ul> </ul>
<!-- Tab panes --> <!-- Tab panes -->
<div class="tab-content"> <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 %>_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 %>_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 %>_activities" data-contents="activities"></div> <div role="tabpanel" class="tab-pane" id="<%= my_module.id %>_comments" data-contents="comments"></div>
<div role="tabpanel" class="tab-pane" id="<%= my_module.id %>_comments" data-contents="comments"></div>
<% end %>
</div> </div>
</div> </div>
</div> </div>

1
config/routes.rb
View file

@ -419,6 +419,7 @@ Rails.application.routes.draw do
# AJAX popup accessed from full-zoom canvas for single module, # AJAX popup accessed from full-zoom canvas for single module,
# as well as full activities view (HTML) for single module # as well as full activities view (HTML) for single module
get 'description' get 'description'
get 'canvas_dropdown_menu'
get 'activities' get 'activities'
post 'activities' post 'activities'
get 'activities_tab' # Activities in tab view for single module get 'activities_tab' # Activities in tab view for single module