Fix #506 : Fix value selector widget for IN and NOT_IN operator

ragna/deploy/_ui/components/metadata_filters_builder.py

@@ -55,7 +55,7 @@ def __init__(self, on_delete_callback, key_value_pairs=None, **params):
             self.param.multi_value,
             name="",
             css_classes=["metadata-filter-value"],
-            min_height=60,
+            option_limit=3,
             delete_button=False,
         )
 
@@ -94,11 +94,19 @@ def compute_valid_operator_options(self, type_str):
     def construct_metadata_filter(self):
         if self.key_select.value == NO_FILTER_KEY:
             return None
-        return MetadataFilter(
-            MetadataOperator[self.operator_select.value],
-            self.key_select.value,
-            self.value_select.value,
-        )
+
+        if self.operator_select.value in ["IN", "NOT_IN"]:
+            return MetadataFilter(
+                MetadataOperator[self.operator_select.value],
+                self.key_select.value,
+                self.multi_value_select.value,
+            )
+        else:
+            return MetadataFilter(
+                MetadataOperator[self.operator_select.value],
+                self.key_select.value,
+                self.value_select.value,
+            )
 
     @param.depends("operator")
     def display(self):
@@ -109,13 +117,15 @@ def display(self):
                 self.operator_select,
                 self.multi_value_select,
                 self.delete_button,
+                css_classes=["metadata-filter-row"],
             )
         else:
             return pn.Row(
                 self.key_select,
                 self.operator_select,
                 self.value_select,
                 self.delete_button,
+                css_classes=["metadata-filter-row"],
             )
 
     def __panel__(self):
@@ -204,6 +214,7 @@ def construct_metadata_filters(self):
 
         if not metadata_filters:
             return None
+
         return MetadataFilter.and_(metadata_filters).to_primitive()
 
     def __panel__(self):

ragna/deploy/_ui/css/modal_configuration/column.css

@@ -1,3 +1,3 @@
 :host(.metadata-filter-row-collection) {
-  overflow-y: scroll;
+  overflow-y: visible;
 }

ragna/deploy/_ui/css/modal_configuration/multichoice.css

@@ -1,35 +1,38 @@
 :host(.metadata-filter-value) {
   max-width: 38%;
   min-width: 38%;
-  height: 30px;
+  height: 60px;
+  overflow: visible;
 }
 
-.choices__inner {
+:host(.metadata-filter-value) .choices__inner {
   padding-top: 0px;
 }
 
-.choices__list--dropdown,
-.choices__list[aria-expanded] {
+:host(.metadata-filter-value) .choices__list--dropdown,
+:host(.metadata-filter-value) .choices__list[aria-expanded] {
   border-radius: 10px;
   font-size: 10px;
 }
 
-.choices {
+:host(.metadata-filter-value) .choices {
   visibility: visible !important;
 }
 
-.choices__list {
-  height: 60px;
+:host(.metadata-filter-value) .choices__list {
+  height: 120px;
 }
 
-.choices__item {
+:host(.metadata-filter-value) .choices__item {
   font-size: 13px !important;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  margin-bottom: 0px;
+  margin-right: 3.75px;
 }
 
-.choices__item--selectable:not(.choices__item--choice) {
+:host(.metadata-filter-value) .choices__item--selectable:not(.choices__item--choice) {
   width: 25% !important;
   background-color: #e9ecef !important;
   color: black !important;

ragna/deploy/_ui/css/modal_configuration/row.css

@@ -1,3 +1,7 @@
 :host(.modal_configuration_upload_row) {
   margin-bottom: 20px;
 }
+
+:host(.metadata-filter-row) {
+  overflow: visible;
+}