From db9624f832be5e235b626f332cc63776d300bff1 Mon Sep 17 00:00:00 2001
From: Minh Vu <minh@biocommons.org.au>
Date: Wed, 20 Mar 2024 14:52:48 +1100
Subject: [PATCH] galaxy tools in table

---
 _includes/table.html | 48 ++++++++++++++++++++++++++++++++++----------
 1 file changed, 37 insertions(+), 11 deletions(-)

diff --git a/_includes/table.html b/_includes/table.html
index 651d2df..e8c4700 100644
--- a/_includes/table.html
+++ b/_includes/table.html
@@ -30,9 +30,9 @@
   }
   .popover {
     display: flex;
-    flex-direction: column; 
+    flex-direction: column;
     max-height: 50vh;
-    max-width: 840px;
+    max-width: 50vw;
   }
   .popover-body {
     overflow: scroll;
@@ -41,9 +41,13 @@
     text-decoration: underline;
   }
   .col-publications,
-  .col-galaxy {
+  .col-galaxy,
+  .col-description {
     min-width: 180px;
   }
+  .col-galaxy-description {
+    min-width: 240px;
+  }
   .col-badge {
     width: 180px !important;
     min-width: 120px;
@@ -95,7 +99,7 @@ <h2>Relevant tools and resources</h2>
             <i class="fa-solid fa-info-circle"></i> </a
           >{%- endif %}
         </th>
-        <th>Description</th>
+        <th class="col-description">Description</th>
         <th>Registry link</th>
         <th>Tool identifier (e.g. module name)</th>
         <th>Topic(s)</th>
@@ -207,13 +211,26 @@ <h2>Relevant tools and resources</h2>
             data-bs-trigger="focus"
             data-bs-html="true"
             data-bs-content="
-              <ul class='ps-3 mb-0'>
-                {%- for galaxy-tool in tool.galaxy %}
-                <li>
-                  <a href='{{galaxy-tool.url}}' target='_blank' class='fs-6 lh-lg'>{{galaxy-tool.title}}</a>
-                </li>
-                {%- endfor %}
-              </ul>
+              <div class='p-3'>
+                <table class='table table-bordered mb-0 align-middle'>
+                  <thead class='table-dark'>
+                    <tr>
+                      <th>Tool Name</th>
+                      <th>Description</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {%- for galaxy-tool in tool.galaxy %}
+                    <tr>
+                      <td>
+                        <a href='{{galaxy-tool.url}}' target='_blank' class='fs-6 lh-lg'>{{galaxy-tool.title}}</a>
+                      </td>
+                      <td class='col-galaxy-description'></td>
+                    </tr>
+                    {%- endfor %}
+                  </tbody>
+                </table>
+              </div>
             "
           >
             {{tool.galaxy.size}} tools
@@ -393,6 +410,15 @@ <h2>Relevant tools and resources</h2>
       document.querySelector(".clear-all-button").style.display = "none";
     }
 
+    // Allow table elements in popovers
+    const myDefaultAllowList = bootstrap.Tooltip.Default.allowList;
+    myDefaultAllowList.table = [];
+    myDefaultAllowList.thead = [];
+    myDefaultAllowList.tbody = [];
+    myDefaultAllowList.th = [];
+    myDefaultAllowList.tr = [];
+    myDefaultAllowList.td = [];
+
     const popoverTriggerList = document.querySelectorAll(
       '[data-bs-toggle="popover"]'
     );