Improve interface and interaction of relationships column [SCI-9893] (#6851)

* Improve interface and interaction of relationships column [SCI-9893]

* Fix failling specs (use column order than relationships for sorting) [SCI-9893]

app/assets/javascripts/repositories/renderers/view_renderers.js

@@ -269,15 +269,10 @@ $.fn.dataTable.render.defaultRepositoryStockConsumptionValue = function() {
 };
 
 $.fn.dataTable.render.RelationshipValue = function(data, row) {
-  if (data > 0) {
-    return `<div class="relationships-cell-wrapper flex flex-wrap items-center w-fit"
-              data-relationships-url="${row.relationshipsUrl}">
-              <i class="sn-icon sn-icon-navigator"></i>
-              <a class="bg-sn-science-blue flex flex-wrap text-white w-4 h-4
-                        ml-2 rounded-lg content-center justify-center text-xs" href='#'>
-                ${data}
-              </a>
-            </div>`;
-  }
-  return '';
+  return `<a
+            style="text-decoration: none !important;"
+            class="relationships-info-link !text-sn-science-blue !no-underline pl-4"
+            href=${row.recordInfoUrl}>
+            ${data}
+          </a>`;
 };

app/assets/javascripts/sitewide/repository_row_card.js

@@ -3,12 +3,12 @@
 (function() {
   'use strict';
 
-  $(document).on('click', '.relationships-cell-wrapper', function(e) {
+  $(document).on('click', '.relationships-info-link', (e) => {
+    const myModuleId = $('.my-module-content').data('task-id');
+    const repositoryRowURL = $(e.target).attr('href');
+
     e.stopPropagation();
     e.preventDefault();
-    const myModuleId = $('.my-module-content').data('task-id');
-    // extract the href attribute from a neighboring column cell, required for sidebar to open
-    const repositoryRowURL = $(this).closest('tr').find('.sorting_1 a').attr('href');
 
     window.repositoryItemSidebarComponent.toggleShowHideSidebar(repositoryRowURL, myModuleId, 'relationships-section');
   });

app/helpers/repository_datatable_helper.rb

@@ -231,7 +231,7 @@ module RepositoryDatatableHelper
       '1': assigned_row(record),
       '2': record.code,
       '3': escape_input(record.name),
-      '4': record.relationship_count,
+      '4': "#{record.parent_connections_count || 0} / #{record.child_connections_count || 0}",
       '5': I18n.l(record.created_at, format: :full),
       '6': escape_input(record.created_by.full_name),
       '7': (record.archived_on ? I18n.l(record.archived_on, format: :full) : ''),

app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue

@@ -289,43 +289,7 @@
             <div v-if="isShowing && !dataLoading" ref="navigationRef" id="navigation"
               class="flex item-end gap-x-4 min-w-[130px] min-h-[130px] h-fit sticky top-0 pr-6 [scrollbar-gutter:stable_both-edges] ">
 
-              <scroll-spy :itemsToCreate="[
-                {
-                  id: 'highlight-item-1',
-                  textId: 'text-item-1',
-                  labelAlias: 'information_label',
-                  label: 'information-label',
-                  sectionId: 'information-section'
-                },
-                {
-                  id: 'highlight-item-2',
-                  textId: 'text-item-2',
-                  labelAlias: 'custom_columns_label',
-                  label: 'custom-columns-label',
-                  sectionId: 'custom-columns-section'
-                },
-                {
-                  id: 'highlight-item-3',
-                  textId: 'text-item-3',
-                  labelAlias: 'relationships_label',
-                  label: 'relationships-label',
-                  sectionId: 'relationships-section'
-                },
-                {
-                  id: 'highlight-item-4',
-                  textId: 'text-item-4',
-                  labelAlias: 'assigned_label',
-                  label: 'assigned-label',
-                  sectionId: 'assigned-section'
-                },
-                {
-                  id: 'highlight-item-5',
-                  textId: 'text-item-5',
-                  labelAlias: 'QR_label',
-                  label: 'QR-label',
-                  sectionId: 'qr-section'
-                },
-              ]" v-show="isShowing" />
+              <scroll-spy v-show="isShowing" :initialSectionId="initialSectionId" />
             </div>
           </div>
 

app/javascript/vue/repository_item_sidebar/repository_values/ScrollSpy.vue

@@ -21,11 +21,48 @@
 </template>
 
 <script>
+const items = [
+  {
+    id: 'highlight-item-1',
+    textId: 'text-item-1',
+    labelAlias: 'information_label',
+    label: 'information-label',
+    sectionId: 'information-section'
+  },
+  {
+    id: 'highlight-item-2',
+    textId: 'text-item-2',
+    labelAlias: 'custom_columns_label',
+    label: 'custom-columns-label',
+    sectionId: 'custom-columns-section'
+  },
+  {
+    id: 'highlight-item-3',
+    textId: 'text-item-3',
+    labelAlias: 'relationships_label',
+    label: 'relationships-label',
+    sectionId: 'relationships-section'
+  },
+  {
+    id: 'highlight-item-4',
+    textId: 'text-item-4',
+    labelAlias: 'assigned_label',
+    label: 'assigned-label',
+    sectionId: 'assigned-section'
+  },
+  {
+    id: 'highlight-item-5',
+    textId: 'text-item-5',
+    labelAlias: 'QR_label',
+    label: 'QR-label',
+    sectionId: 'qr-section'
+  }
+];
 export default {
   name: 'ScrollSpy',
 
   props: {
-    itemsToCreate: Array,
+    itemsToCreate: { type: Array, default: () => items },
     initialSectionId: String || null,
   },
 

app/models/repository.rb

@@ -129,6 +129,7 @@ class Repository < RepositoryBase
       'assigned',
       'repository_rows.id',
       'repository_rows.name',
+      'relationships',
       'repository_rows.created_at',
       'users.full_name',
       'repository_rows.archived_on',

app/services/repository_datatable_service.rb

@@ -81,6 +81,8 @@ class RepositoryDatatableService
                       .select('COUNT(DISTINCT all_my_module_repository_rows.id) AS "assigned_my_modules_count"')
                       .select('COUNT(DISTINCT my_modules.experiment_id) AS "assigned_experiments_count"')
                       .select('COUNT(DISTINCT experiments.project_id) AS "assigned_projects_count"')
+                      .select('COALESCE(parent_connections_count, 0) + COALESCE(child_connections_count, 0)
+                               AS "relationships_count"')
     repository_rows = repository_rows.preload(Extends::REPOSITORY_ROWS_PRELOAD_RELATIONS)
 
     sort_rows(order_by_column, repository_rows)
@@ -500,6 +502,8 @@ class RepositoryDatatableService
       records.group('users.full_name').order("users.full_name #{dir}")
     when 'consumed_stock'
       records.order("#{@sortable_columns[column_id - 1]} #{dir}")
+    when 'relationships'
+      records.order("relationships_count #{dir}")
     else
       records.group(@sortable_columns[column_id - 1]).order("#{@sortable_columns[column_id - 1]} #{dir}")
     end

spec/controllers/repository_rows_controller_spec.rb

@@ -78,7 +78,7 @@ describe RepositoryRowsController, type: :controller do
 
     describe 'pagination' do
       it 'returns first 10 records' do
-        params = { order: [{ column: '4', dir: 'asc' }],
+        params = { order: [{ column: '5', dir: 'asc' }],
                    drow: '0',
                    search: { value: '' },
                    length: '10',
@@ -92,7 +92,7 @@ describe RepositoryRowsController, type: :controller do
       end
 
       it 'returns next 10 records' do
-        params = { order: [{ column: '4', dir: 'asc' }],
+        params = { order: [{ column: '5', dir: 'asc' }],
                    drow: '0',
                    search: { value: '' },
                    length: '10',