Fix the behavior of the SelectPicker

nimh-dsst · Aug 27, 2024 · 7260074 · 7260074
1 parent 8c12246
commit 7260074
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 13 deletions.
diff --git a/web/dashboard/components/select_picker.py b/web/dashboard/components/select_picker.py
@@ -14,6 +14,8 @@ class SelectPicker(ReactiveHTML, Widget):
 
     filter_str = param.String(default="")
 
+    trigger_rendering = param.Integer(default=0)
+
     update_title_callback = None
 
     _child_config = {"options": "model"}
@@ -28,7 +30,7 @@ def from_param(cls, parameter: param.Parameter, update_title_callback, **params)
         result.value_did_change()
         return result
 
-    def update_filtereted_options(self):
+    def update_filtered_options(self):
         self.filtered_options = [
             opt
             for opt in self.options
@@ -39,7 +41,7 @@ def update_filtereted_options(self):
     def options_did_change(self):
         # print("options_did_change", self.options)
         self.value = [v for v in self.value if v in self.options]
-        self.update_filtereted_options()
+        self.update_filtered_options()
 
     @param.depends("value", watch=True, on_init=True)
     def value_did_change(self):
@@ -50,7 +52,7 @@ def value_did_change(self):
     @param.depends("filter_str", watch=True, on_init=True)
     def filter_str_did_change(self):
         # print("filter_str_did_change", self.filter_str)
-        self.update_filtereted_options()
+        self.update_filtered_options()
 
     @param.depends("filtered_options", watch=True, on_init=True)
     def filtered_options_did_change(self):
@@ -126,12 +128,12 @@ def filtered_options_did_change(self):
             font-size: var(--type-ramp-base-font-size);
             padding-left: 12px;
             width:auto;
-            height:33px
+            height:40px
         }
 
 
         div.sp_header p {
-            margin-top: 6px;
+            margin-top: 9px;
             margin-right:18px;
         }
 
@@ -306,6 +308,7 @@ def filtered_options_did_change(self):
         + """
 
     <div id="sp_container" class="sp_container">
+        <div id="trigger_rendering" style="display:none;" class="${trigger_rendering}">${trigger_rendering}</div>
 
         <div id="sp_header"  onclick="${script('toggle_list')}" class="sp_header" tabindex="100">
             <p>${title}</p>
@@ -460,16 +463,28 @@ def filtered_options_did_change(self):
 
         """,
         "render": """
-            console.log("render");
+
             /*
-            console.log("data", data);
-            console.log("model", model);
-            console.log("state", state);
-            console.log("view", view);
-            console.log("checkboxes_container", checkboxes_container);
-            console.log("sp_options_list_container", sp_options_list_container);
+                In some cases the render is called before the data is updated.
+                So we need to wait a bit before rendering.
             */
-            self.rebuild_checkboxes();
+
+            setTimeout(function() {
+                console.log("render");
+                /*
+                console.log("data", data);
+                console.log("data", data.value);
+                console.log("data", data.trigger_rendering);
+                console.log("model", model);
+                console.log("state", state);
+                console.log("view", view);
+                console.log("checkboxes_container", checkboxes_container);
+                console.log("sp_options_list_container", sp_options_list_container);
+                */
+                self.rebuild_checkboxes();
+                self.update_select_all_checkbox()
+            }, 250);
+
             self.update_select_all_checkbox()
 
             var isPointerEventInsideElement = function (event, element) {

diff --git a/web/dashboard/main_dashboard.py b/web/dashboard/main_dashboard.py
@@ -109,6 +109,12 @@ class MainDashboard(param.Parameterized):
         {}, height=640, width=1200, renderer="svg", options={"replaceMerge": ["series"]}
     )
 
+    # set up in the init method
+    journal_select_picker = None
+    affiliation_country_select_picker = None
+    funder_select_picker = None
+    tags_select_picker = None
+
     # DEBUG
     # This is a code editor to update the ECharts config and render the plot from the browser
     # without having to restart the server.
@@ -372,6 +378,13 @@ def did_change_splitting_var(self):
             trigger_rendering=self.trigger_rendering + 1,
         )
 
+        # Hack to force re-rendering the select pickers
+        if self.affiliation_country_select_picker is not None:
+            self.journal_select_picker.trigger_rendering += 1
+            self.affiliation_country_select_picker.trigger_rendering += 1
+            self.funder_select_picker.trigger_rendering += 1
+            self.tags_select_picker.trigger_rendering += 1
+
         if splitting_var == "None":
             notif_msg = "No more splitting. Filters reset to default"
 
@@ -407,6 +420,7 @@ def country_filter(cell):
             filtered_df = filtered_df[
                 filtered_df.affiliation_country.apply(country_filter)
             ]
+            print("FILTERED_GROUPED_DATA_COUNTRY", len(filtered_df))
 
         if len(filtered_df) > 0 and len(self.filter_funder) != len(
             self.param.filter_funder.objects