Add styling and highligh

app/assets/javascripts/sitewide/atwho_res.js.erb

@@ -49,63 +49,26 @@ var SmartAnnotation = (function() {
         DEFAULT_SEARCH_FILTER = FilterTypeEnum.REPOSITORY,
         atWhoUpdating = false;
 
-    var defaultRepId;
+    function _matchHighlighter(html, query, filterType) {
+      var $html = $(html);
+      var $li_text = $html.find('.item-text');
 
-    // helper methods for AtWho callback
-    function _templateEval(_tpl, map) {
-      var res;
-      try {
-        res = generateTemplate(map);
-      } catch (_error) {
-        res = '';
-      }
-      return res;
-    }
+      if ($li_text.length === 0 || !query) return html;
 
-    function _matchHighlighter(li, query, filterType) {
-      var $li, re;
+      $.each($li_text, function(i, item) {
+        $(item).html($(item).text().replace(new RegExp(query, 'gi'), '<span class="atwho-highlight">$&</span>'));
+      })
 
-      function highlight(el, sel, re) {
-        var prevVal, newVal;
-        prevVal = el.find(sel).html();
-        newVal = prevVal.replace(re, '<strong>$&</strong>');
-        el.find(sel).html(newVal);
-      }
-
-      if (!query || $(li).data('no-results')) {
-        return li;
-      }
-
-      $li = $(li);
-      re = new RegExp(query, 'gi');
-      // search_filter is not passed for the user
-      if(filterType) {
-        highlight($li, '[data-val=name]', re);
-      } else {
-        highlight($li, '[data-val=full-name]', re);
-        highlight($li, '[data-val=email]', re);
-      }
-
-      return $li[0].outerHTML
+      return $html;
     }
 
     function _generateInputTag(value, li) {
       return `[#${li.attr('data-name')}~${li.attr('data-type')}~${li.attr('data-id')}]`;
     }
 
-    // initialise dropdown dismiss button
-    function initDismissButton($currentAtWho) {
-      $currentAtWho.find('.dismiss').off('click')
-                                    .on('click', function() {
-        $(field).atwho('destroy');
-        init();
-      });
-    }
-
     // Generates suggestion dropdown filter
     function generateFilterMenu(active, res_data) {
       var menu = '';
-      var rep_buttons = '';
       $.ajax({
         async: false,
         dataType: 'json',
@@ -117,17 +80,6 @@ var SmartAnnotation = (function() {
       return menu;
     }
 
-    function noResultsTemplate() {
-      return `<div class="atwho-no-results" data-no-results="1">
-                <span><%= I18n.t("atwho.no_results") %></span>
-              </div>`;
-    }
-
-    // Generates resources list items
-    function generateTemplate(map) {
-      return map.name;
-    }
-
     function atWhoSettings(at, defaultFilterType) {
       return {
         at: at,
@@ -138,7 +90,7 @@ var SmartAnnotation = (function() {
             var params = { query: query };
             filterType = FilterTypeEnum[$currentAtWho.find('.tab-pane.active').data('object-type')]
             if (!filterType) {
-              callback([{name: noResultsTemplate()}]);
+              callback([{name: ''}]);
               return false
             }
 
@@ -159,15 +111,11 @@ var SmartAnnotation = (function() {
               }
             });
           },
-          sorter: function(query, items, _searchKey) {
-            // Sorting is already done on server-side
-            return items;
-          },
-          tplEval: function(_tpl, map) {
-            return _templateEval(_tpl, map);
+          tplEval: function(_tpl, items) {
+            return items.name;
           },
           highlighter:  function(li, query) {
-            //return _matchHighlighter(li, query, true);
+            return _matchHighlighter(li, query, true);
             return li;
           },
           beforeInsert: function(value, li) {
@@ -258,7 +206,7 @@ var SmartAnnotation = (function() {
             var res;
             try {
               if (map.no_results) {
-                res = noResultsTemplate();
+                res = '';
               } else {
                 res = '';
                 res += '<li class="atwho-li atwho-li-user" ';
@@ -284,7 +232,7 @@ var SmartAnnotation = (function() {
             return res;
           },
           highlighter: function(li, query) {
-            return _matchHighlighter(li, query);
+            return li;//_matchHighlighter(li, query);
           },
           beforeInsert: function(value, li) {
             var res = '';

app/assets/stylesheets/shared/smart_annotation.scss

@@ -22,27 +22,71 @@
       display: flex;
       padding: .25em;
     }
+
+    .repository-object {
+      max-width: 250px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 
   .atwho-view-ul {
     margin: 0;
-    padding: .25em;
+    padding: 0;
   }
 
   .atwho-footer {
     @include font-small;
     border-top: $border-default;
     color: $color-silver-chalice;
-    margin-left: -.25em;
     padding: .5em;
-    width: calc(100% + .5em);
     white-space: pre;
   }
 
   .atwho-scroll-container {
     max-height: 200px;
     overflow-y: auto;
+    padding: .5em;
     position: relative;
+
+    .atwho-breadcrumbs {
+      @include font-small;
+      color: $color-silver-chalice;
+      display: flex;
+
+      .atwho-breadcrumb {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .slash {
+        margin: 0 .5em;
+      }
+    }
+
+    .sa-type {
+      font-size: 8px;
+    }
+
+    .item {
+      cursor: pointer;
+      margin-left: -.5em;
+      overflow: hidden;
+      padding: .25em .5em;
+      text-overflow: ellipsis;
+      width: calc(100% + 1em);
+      white-space: nowrap;
+
+      &.cur {
+        background: $color-concrete;
+      }
+
+      .atwho-highlight {
+        background: $brand-warning-light;
+      }
+    }
   }
 }
 

app/helpers/experiments_helper.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module ExperimentsHelper
+  def grouped_by_prj(experiments)
+    ungrouped_experiments = experiments.joins(:project)
+                                       .select('projects.name as project_name,
+                                         projects.archived as project_archived,
+                                         experiments.*')
+    ungrouped_experiments.group_by { |i| [i[:project_name]] }.map do |group, exps|
+      {
+        project_name: group[0],
+        project_archived: exps[0]&.project_archived,
+        experiments: exps
+      }
+    end
+  end
+end

app/utilities/smart_annotation.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class SmartAnnotation
   include ActionView::Helpers::SanitizeHelper
   include ActionView::Helpers::TextHelper
@@ -12,20 +14,24 @@ class SmartAnnotation
 
   def my_modules
     # Search tasks
-    task_ids = MyModule.search(@current_user, false, @query, 1, @current_team)
-                .limit(Constants::ATWHO_SEARCH_LIMIT).pluck(:id)
-    MyModule.where(id: task_ids)
+    MyModule.search_by_name(@current_user, @current_team, @query).active
+            .joins(experiment: :project)
+            .where(projects: { archived: false }, experiments: { archived: false })
+            .limit(Constants::ATWHO_SEARCH_LIMIT)
   end
 
   def projects
     # Search projects
-    Project.search(@current_user, false, @query, 1, @current_team)
+    Project.search_by_name(@current_user, @current_team, @query)
+           .where(archived: false)
            .limit(Constants::ATWHO_SEARCH_LIMIT)
   end
 
   def experiments
     # Search experiments
-    Experiment.search(@current_user, false, @query, 1, @current_team)
+    Experiment.search_by_name(@current_user, @current_team, @query)
+              .joins(:project)
+              .where(projects: { archived: false }, experiments: { archived: false })
               .limit(Constants::ATWHO_SEARCH_LIMIT)
   end
 

app/views/shared/smart_annotation/_experiment_items.html.erb

@@ -1,7 +1,21 @@
-<% experiments.each do |experiment| %>
-<li data-name="<%= experiment.name %>" data-id="<%= experiment.id.base62_encode %>" data-type="exp"><%= experiment.name %></li>
-<% end %>
-<% if experiments.empty? %>
-  <%= render partial: 'shared/smart_annotation/no_results.html.erb' %>
-<% end %>
+<div class="atwho-scroll-container">
+  <% grouped_by_prj(experiments).each do |experiment_group| %>
+  <div class="item-group">
+    <div class="atwho-breadcrumbs">
+      <span class="atwho-breadcrumb" title="<%= experiment_group[:project_name] %>"><%= experiment_group[:project_name] %></span>
+    </div>
+    <div class="items">
+      <% experiment_group[:experiments].each do |experiment| %>
+        <li class="item" data-name="<%= experiment.name %>" data-id="<%= experiment.id.base62_encode %>" data-type="exp">
+          <span class='sa-type'>Exp</span>
+          <span class="item-text"><%= experiment.name %></span>
+        </li>
+      <% end %>
+    </div>
+  </div>
+  <% end %>
+  <% if experiments.empty? %>
+    <%= render partial: 'shared/smart_annotation/no_results.html.erb' %>
+  <% end %>
+</div>
 <%= render partial: 'shared/smart_annotation/footer.html.erb' %>

app/views/shared/smart_annotation/_my_module_items.html.erb

@@ -1,32 +1,23 @@
-<div class="my-modules-list-partial atwho-scroll-container">
+<div class="atwho-scroll-container">
   <% grouped_by_prj_exp(my_modules).each do |task_group| %>
-  <div class="task-group">
-    <div class="header">
-      <% if task_group[:project_archived]%>
-        <span class="archived"><%= t('general.archived') %></span>
-      <% end %>
-      <span class="project" title="<%= task_group[:project_name] %>"><%= task_group[:project_name] %></span>
+  <div class="item-group">
+    <div class="atwho-breadcrumbs">
+      <span class="atwho-breadcrumb" title="<%= task_group[:project_name] %>"><%= task_group[:project_name] %></span>
       <span class="slash">/</span>
-      <% if task_group[:experiment_archived] %>
-        <span class="archived"><%= t('general.archived') %></span>
-      <% end %>
-      <span class="experiment" title="<%= task_group[:experiment_name] %>"><%= task_group[:experiment_name] %></span>
+      <span class="atwho-breadcrumb" title="<%= task_group[:experiment_name] %>"><%= task_group[:experiment_name] %></span>
     </div>
-    <div class="tasks">
+    <div class="items">
       <% task_group[:tasks].each do |task| %>
-      <div class="task">
-        <%= draw_custom_icon('task-icon') %>
-        <% if task.archived %>
-          <span class="archived"><%= t('general.archived') %></span>
-        <% end %>
-        <li class="task-link" data-name="<%= task.name %>" data-id="<%= task.id.base62_encode %>" data-type="tsk"><%= task.name %></li>
-      </div>
+        <li class="item" data-name="<%= task.name %>" data-id="<%= task.id.base62_encode %>" data-type="tsk">
+          <span class='sa-type'>Tsk</span>
+          <span class="item-text"><%= task.name %></span>
+        </li>
       <% end %>
     </div>
   </div>
   <% end %>
+  <% if my_modules.empty? %>
+    <%= render partial: 'shared/smart_annotation/no_results.html.erb' %>
+  <% end %>
 </div>
-<% if my_modules.empty? %>
-  <%= render partial: 'shared/smart_annotation/no_results.html.erb' %>
-<% end %>
 <%= render partial: 'shared/smart_annotation/footer.html.erb' %>

app/views/shared/smart_annotation/_project_items.html.erb

@@ -1,7 +1,12 @@
-<% projects.each do |project| %>
-  <li data-name="<%= project.name %>" data-id="<%= project.id.base62_encode %>" data-type="prj"><%= project.name %></li>
-<% end %>
-<% if projects.empty? %>
-  <%= render partial: 'shared/smart_annotation/no_results.html.erb' %>
-<% end %>
+<div class="atwho-scroll-container">
+  <% projects.each do |project| %>
+    <li class="item" data-name="<%= project.name %>" data-id="<%= project.id.base62_encode %>" data-type="prj">
+      <span class='sa-type'>Prj</span>
+      <span class="item-text"><%= project.name %></span>
+    </li>
+  <% end %>
+  <% if projects.empty? %>
+    <%= render partial: 'shared/smart_annotation/no_results.html.erb' %>
+  <% end %>
+</div>
 <%= render partial: 'shared/smart_annotation/footer.html.erb' %>

app/views/shared/smart_annotation/_repository_items.html.erb

@@ -1,9 +1,12 @@
-<% repository_rows.each do |row| %>
-  <li data-name="<%= row[:name] %>" data-id="<%= row[:id] %>" data-type="rep_item">
-    [<%= row[:repository_tag] %>] <%= row[:name] %>
-  </li>
-<% end %>
-<% if repository_rows.empty? %>
-  <%= render partial: 'shared/smart_annotation/no_results.html.erb' %>
-<% end %>
+<div class="atwho-scroll-container">
+  <% repository_rows.each do |row| %>
+    <li class="item" data-name="<%= row[:name] %>" data-id="<%= row[:id] %>" data-type="rep_item">
+      <span class='sa-type'><%= row[:repository_tag] %></span>
+      <span class="item-text"><%= row[:name] %></span>
+    </li>
+  <% end %>
+  <% if repository_rows.empty? %>
+    <%= render partial: 'shared/smart_annotation/no_results.html.erb' %>
+  <% end %>
+</div>
 <%= render partial: 'shared/smart_annotation/footer.html.erb' %>