From d5864bd8586091bc79d956ca4646a7a4a2ddd3f9 Mon Sep 17 00:00:00 2001
From: Natacha Beck <777590+natacha-beck@users.noreply.github.com>
Date: Mon, 3 Mar 2025 16:51:20 -0500
Subject: [PATCH] Overlay in available page (#1449)

Added closable overlays helper method.
---
 BrainPortal/app/helpers/rich_ui_helper.rb     | 22 ++++++++++++++
 .../portal/_available_datasets_table.html.erb |  5 +++-
 .../portal/_available_tools_table.html.erb    |  5 +++-
 .../app/views/portal/available.html.erb       |  2 +-
 BrainPortal/public/javascripts/cbrain.js      | 29 ++++++++++++++-----
 5 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/BrainPortal/app/helpers/rich_ui_helper.rb b/BrainPortal/app/helpers/rich_ui_helper.rb
index 8a504a89e..df3361e85 100644
--- a/BrainPortal/app/helpers/rich_ui_helper.rb
+++ b/BrainPortal/app/helpers/rich_ui_helper.rb
@@ -261,6 +261,28 @@ def overlay_content_link(name, options = {}, &block)
     html.html_safe
   end
 
+  # Create a link that will open a dialog box.
+  #
+  #   +link_text+: clickable text that appears on the page in order to open the overlay
+  #   +title+: title that will show up as a header at the top of the overlay
+  #   +description+: text of the overlay content
+  #   +size+: maximum height and width of the overlay
+  #
+  def closable_overlay_content_link(link_text, title, description="", size="50em", options = {})
+    return "" if description.blank?
+
+    link = overlay_content_link(link_text, :enclosing_element => "span") do
+      html = "<div style='overflow: auto; max-height: #{size}; max-width: #{size};'>" +
+      "<h1>#{h(title)}</h1><hr/>" +
+      "<p>#{h(description)}</p>" +
+      "</div>"
+
+      html.html_safe
+    end
+
+    return link
+  end
+
   # Create a button with a drop down menu
   #
   # Options:
diff --git a/BrainPortal/app/views/portal/_available_datasets_table.html.erb b/BrainPortal/app/views/portal/_available_datasets_table.html.erb
index bf9e800db..0f884f662 100644
--- a/BrainPortal/app/views/portal/_available_datasets_table.html.erb
+++ b/BrainPortal/app/views/portal/_available_datasets_table.html.erb
@@ -41,7 +41,10 @@
     end
   %>
   <tr>
-    <td><%= overlay_description((name + "\n" + description).strip) %></td>
+    <td>
+      <%= name %>
+      <%= closable_overlay_content_link(" &#8505; ".html_safe, name, description) %>
+    </td>
     <td><%= access %></td>
   </tr>
 <% end %>
diff --git a/BrainPortal/app/views/portal/_available_tools_table.html.erb b/BrainPortal/app/views/portal/_available_tools_table.html.erb
index 05d7adf97..d63dcd216 100644
--- a/BrainPortal/app/views/portal/_available_tools_table.html.erb
+++ b/BrainPortal/app/views/portal/_available_tools_table.html.erb
@@ -53,7 +53,10 @@
     end
   %>
   <tr>
-    <td><%= overlay_description((name + "\n" + description).strip) %></td>
+    <td>
+      <%= name %>
+      <%= closable_overlay_content_link(" &#8505; ".html_safe, name, description) %>
+    </td>
     <td><%= versions %></td>
     <td><%= tags.join(", ") %></td>
     <td class="no_wrap"><%= access %></td>
diff --git a/BrainPortal/app/views/portal/available.html.erb b/BrainPortal/app/views/portal/available.html.erb
index ef97708ed..3f223ce26 100644
--- a/BrainPortal/app/views/portal/available.html.erb
+++ b/BrainPortal/app/views/portal/available.html.erb
@@ -33,7 +33,7 @@ Not all of them are available to all users.
 <% open_tools     = @tools.select { |tool| (tool.group_id == @everyone_gid) && tool.tool_configs.where(:group_id => @everyone_gid).exists? } %>
 <% restrict_tools = @tools - open_tools %>
 
-<%= build_tabs do |tb| %>
+<%= build_tabs( :class => 'available_tabs' ) do |tb| %>
   <%= tb.tab("Tools") do %>
     <%= render :partial => 'available_tools_table', :locals => { :tools => open_tools } %>
     <%= render :partial => 'available_tools_table', :locals => { :tools => restrict_tools } %>
diff --git a/BrainPortal/public/javascripts/cbrain.js b/BrainPortal/public/javascripts/cbrain.js
index 8dd335e87..2d5d11888 100644
--- a/BrainPortal/public/javascripts/cbrain.js
+++ b/BrainPortal/public/javascripts/cbrain.js
@@ -182,6 +182,16 @@
       $(this).tabs();
     });
 
+    // Find tabs in div with class available_tabs in order to close all overlay dialogs
+    loaded_element.find(".available_tabs").each( function(_, tab) {
+      $(tab).click( event => {
+        // Close all dialogs
+        $(".ui-dialog-content:visible").each(function(_, element) {
+          $(element).dialog('close');
+        });
+      });
+    });
+
     loaded_element.find(".inline_text_field").each(function() {
       var inline_text_field = $(this);
       var data_type = inline_text_field.data("type") || "script";
@@ -382,23 +392,28 @@
       return false;
     });
 
-    //Overlay dialogs
-    //See overlay_dialog_with_button()
+    // Overlay dialogs
+    // See overlay_dialog_with_button()
     loaded_element.find(".overlay_dialog").each( function(index,element) {
-      var enclosing_div = $(this);
-      var dialog_link = enclosing_div.children('.overlay_content_link');
-      var dialog = enclosing_div.children(".overlay_content")
-      var content_width = parseInt(dialog_link.data("width"), 10);
+      var enclosing_div  = $(this);
+      var dialog_link    = enclosing_div.children('.overlay_content_link');
+      var dialog         = enclosing_div.children('.overlay_content');
+      var content_width  = parseInt(dialog_link.data("width"), 10);
       var content_height = parseInt(dialog_link.data("height"), 10);
 
       dialog.dialog({
         autoOpen: false,
-        position: "center",
         width:  content_width  || 'auto',
         height: content_height || 'auto'
       });
 
       dialog_link.click(function() {
+        // Close all other dialogs
+        $(".ui-dialog-content:visible").each(function(_, element) {
+          var visible_dialog = $(element);
+          visible_dialog.dialog('close');
+        });
+
         dialog.dialog('open');
         return false;
       });