diff --git a/group_manager/static/group_manager/js/group_manager.js b/group_manager/static/group_manager/js/group_manager.js
index 0a145d4a..068781ab 100644
--- a/group_manager/static/group_manager/js/group_manager.js
+++ b/group_manager/static/group_manager/js/group_manager.js
@@ -2408,30 +2408,6 @@ $(function () {
$groupPanel.find('.create-button').removeClass('disabled')
}
- // Indicate which groups are managed by this user.
- const groupList = document.querySelector('#group-list')
- let icons = ''
- for (const groupName in this.groups) {
- const group = groupList.querySelector('.group[data-name="' + Yoda.escapeQuotes(groupName) + '"]')
-
- icons = '
'
-
- if (groupName.match(/^(research)-/)) {
- icons += ' | '
- }
-
- if (this.isManagerOfGroup(groupName)) {
- icons += ' ' + ' |
'
- } else if (!this.isMemberOfGroup(groupName) && this.isRodsAdmin) {
- icons += ' ' + ' | '
- } else if (this.isMemberOfGroup(groupName) && this.groups[groupName].members[this.userNameFull].access === 'reader') {
- icons += ' ' + ' | '
- } else {
- icons += ' | '
- }
- group.insertAdjacentHTML('beforeend', icons)
- }
-
const isCollapsed = Yoda.storage.session.get('is-collapsed')
if (isCollapsed !== null && isCollapsed === 'true') {
$('.collapsible-group-properties').removeClass('show')
@@ -2459,6 +2435,54 @@ $(function () {
if ($categoryEls.length === 1) { this.unfoldToGroup($categoryEls.find('.group').attr('data-name')) }
}
+ // Indicate which groups are managed by this user.
+ const groupList = document.querySelector('#group-list')
+ const fragment = document.createDocumentFragment() // Create a document fragment for batch updates
+
+ for (const groupName in this.groups) {
+ const group = groupList.querySelector('.group[data-name="' + Yoda.escapeQuotes(groupName) + '"]')
+
+ if (!group) continue // Skip if the group is not found
+
+ const table = document.createElement('table')
+ table.className = 'float-end'
+ const row = document.createElement('tr')
+
+ if (groupName.match(/^(research)-/)) {
+ const linkCell = document.createElement('td')
+ const link = document.createElement('a')
+ link.href = '/research/?dir=' + encodeURIComponent('/' + groupName)
+ link.title = 'Go to group ' + groupName + ' in research space'
+ link.innerHTML = ''
+ linkCell.appendChild(link)
+ row.appendChild(linkCell)
+ }
+
+ if (this.isManagerOfGroup(groupName)) {
+ const managerCell = document.createElement('td')
+ managerCell.innerHTML = ' '
+ row.appendChild(managerCell)
+ } else if (!this.isMemberOfGroup(groupName) && this.isRodsAdmin) {
+ const adminCell = document.createElement('td')
+ adminCell.innerHTML = ' '
+ row.appendChild(adminCell)
+ } else if (this.isMemberOfGroup(groupName) && this.groups[groupName].members[this.userNameFull].access === 'reader') {
+ const readerCell = document.createElement('td')
+ readerCell.innerHTML = ' '
+ row.appendChild(readerCell)
+ } else {
+ const emptyCell = document.createElement('td')
+ emptyCell.style.width = '26px'
+ row.appendChild(emptyCell)
+ }
+
+ table.appendChild(row)
+ group.appendChild(table) // Append the table to the group
+ }
+
+ // Append all changes to the DOM at once
+ groupList.appendChild(fragment)
+
$(window).on('beforeunload', function () {
that.unloading = true
})