New UI to exclude tags, chose boolean operator and limit selection to data types

omero_tagsearch/forms.py

@@ -1,13 +1,26 @@
-from django.forms import Form, MultipleChoiceField, BooleanField
+from django.forms import Form, MultipleChoiceField, BooleanField, ChoiceField, RadioSelect
 
 
 class TagSearchForm(Form):
     selectedTags = MultipleChoiceField()
-    results_preview = BooleanField()
+    excludedTags = MultipleChoiceField()
+    operation = ChoiceField(
+        widget = RadioSelect,
+        choices = (("AND", "AND"), ("OR", "OR")),
+        initial = "AND"
+    )
+    view_image = BooleanField(initial=True)
+    view_dataset = BooleanField(initial=True)
+    view_project = BooleanField(initial=True)
+    view_well = BooleanField(initial=True)
+    view_acquisition = BooleanField(initial=True)
+    view_plate = BooleanField(initial=True)
+    view_screen = BooleanField(initial=True)
 
     def __init__(self, tags, conn=None, *args, **kwargs):
         super(TagSearchForm, self).__init__(*args, **kwargs)
 
         # Process Tags into choices (lists of tuples)
         self.fields["selectedTags"].choices = tags
+        self.fields["excludedTags"].choices = tags
         self.conn = conn

omero_tagsearch/static/tagsearch/css/webtagging_search.css

@@ -11,9 +11,26 @@
     }
 
 #id_selectedTags {
-  width:150px;
+  width:200px;
 }
 
+#id_excludedTags {
+  width:200px;
+}
+
+.tagSearchDivider .field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 1px; /* Adjust as needed */
+}
+
+.tagSearchDivider label {
+    width:100px;
+    margin-right: 10px; /* Adjust as needed */
+}
+
+
 .hidden {
   display: none !important;
 }
@@ -81,3 +98,38 @@
     margin-left: 5px;
     margin-top: 10px;
   }
+
+.search_tips__tag {
+  vertical-align: middle;
+}
+
+.search_tips__join {
+  vertical-align: bottom;
+}
+
+#id_view_project, #id_view_dataset, #id_view_screen, #id_view_plate,
+#id_view_well, #id_view_acquisition, #id_view_image{
+  vertical-align: bottom;
+}
+
+ul#id_operation li{
+  display: inline-block;
+}
+
+#counts_list li,
+#counts_list ul{
+  margin-top: 2px;
+  margin-left: 0px;
+}
+#selectall_btn {
+  margin-left: 3px;
+  margin-top: 8px;
+}
+
+#id_operation {
+  display: flex;
+}
+
+#id_operation div {
+  margin-right: 10px; /* Adjust as needed */
+}

omero_tagsearch/templates/omero_tagsearch/search_details.html

@@ -53,13 +53,9 @@
                 }
             });
 
-            // We init sorting (not cols 0 & 3) but don't sort by default
-            $("#dataTable").tablesorter({headers: { 0: { sorter: false}, 4: {sorter: false} } });
+            // We init sorting (not cols 0 & 5) but don't sort by default
+            $("#dataTable").tablesorter({headers: { 0: { sorter: false}, 5: {sorter: false} } });
 
-            $('input#id_search').quicksearch('table#dataTable tbody tr', {
-                'delay': 300,
-                'loader': 'span.loading'
-            });
         });
     </script>
 
@@ -121,7 +117,7 @@
                 {% endwith %}
             {% endfor %}
             {% for c in manager.containers.project %}
-                <tr id="project-{{ c.id }}" class="{{ c.getPermsCss }}">
+                <tr id="project-{{ c.id }}" class="{{ c.getPermsCss }} project_row">
                     <td class="image">
                         <img id="{{ c.id }}" src="{% static "webgateway/img/folder16.png" %}" alt="project" title="{{ c.name }}"/>
                     </td>
@@ -135,7 +131,7 @@
                 </tr>
             {% endfor %}
             {% for c in manager.containers.screen %}
-                <tr id="screen-{{ c.id }}" class="{{ c.getPermsCss }}">
+                <tr id="screen-{{ c.id }}" class="{{ c.getPermsCss }} screen_row">
                     <td class="image">
                         <img id="{{ c.id }}" src="{% static "webclient/image/folder_screen16.png" %}" alt="screen" title="{{ c.name }}"/>
                     </td>
@@ -149,7 +145,7 @@
                 </tr>
             {% endfor %}
             {% for c in manager.containers.dataset %}
-                <tr id="dataset-{{ c.id }}" class="{{ c.getPermsCss }}">
+                <tr id="dataset-{{ c.id }}" class="{{ c.getPermsCss }} dataset_row">
                     <td class="image">
                         <img id="{{ c.id }}" src="{% static "webgateway/img/folder_image16.png" %}" alt="dataset" title="{{ c.name }}"/>
                     </td>
@@ -163,7 +159,7 @@
                 </tr>
             {% endfor %}
             {% for c in manager.containers.plate %}
-                <tr id="plate-{{ c.id }}" class="{{ c.getPermsCss }}">
+                <tr id="plate-{{ c.id }}" class="{{ c.getPermsCss }} plate_row">
                     <td class="image">
                         <img id="{{ c.id }}" src="{% static "webclient/image/folder_plate16.png" %}" alt="plate" title="{{ c.name }}"/>
                     </td>
@@ -177,7 +173,7 @@
                 </tr>
             {% endfor %}
             {% for c in manager.containers.acquisition %}
-                <tr id="acquisition-{{ c.id }}" class="{{ c.getPermsCss }}">
+                <tr id="acquisition-{{ c.id }}" class="{{ c.getPermsCss }} acquisition_row">
                     <td class="image">
                         <img id="{{ c.id }}" src="{% static "webclient/image/run16.png" %}" alt="acquisition" title="{{ c.name }}"/>
                     </td>
@@ -191,7 +187,7 @@
                 </tr>
             {% endfor %}
             {% for c in manager.containers.well %}
-                <tr id="well-{{ c.id }}" class="{{ c.getPermsCss }}">
+                <tr id="well-{{ c.id }}" class="{{ c.getPermsCss }} well_row">
                     <td class="image">
                         <img id="{{ c.id }}" src="{% static "webclient/image/well16.png" %}" alt="well" title="{{ c.name }}"/>
                     </td>
@@ -205,7 +201,7 @@
                 </tr>
             {% endfor %}
             {% for c in manager.containers.image %}
-                <tr id="image-{{ c.id }}" class="{{ c.getPermsCss }}">
+                <tr id="image-{{ c.id }}" class="{{ c.getPermsCss }} image_row">
                     <td class="image">
                         <img class="search_thumb" id="{{ c.id }}" src="{% url 'render_thumbnail_resize' 96 c.id  %}" alt="image" title="{{ c.name }}"/>
                     </td>