pn.depends on static text change is broken in v1.4.5

[TianchengTang]

ALL software version info

(this library, plus any other relevant software, e.g. bokeh, python, notebook, OS, browser, etc should be added within the dropdown below.)

Software Version Info

Panel v1.4.5

Description of expected behavior and the observed behavior

Hello! I have been using @pn.depends(self.json_saved.param.value, watch=True) from the very beginning of the project. Back then the panel version was v1.4.2. However I recently upgraded to panel v1.5.2 and noticed that the same function is broken. Then I traced it back to v1.4.5 is the first broken build, v1.4.4 is the last working build.

Below is partial code from a large panel project. I have a function to save parameters from the perspective plot so that the same configuration can be reloaded next time. This function is triggered by a StaticText module which is used to transfer json to Python. In below sample code, self.json_saved is a StaticText module, when json is saved to its value, it should trigger the send_to_db function via pn.depends. After v1.4.5, it is not triggering the send_to_db function with the same code.

I have spent large amount of time to debug this and traced it down to the pn.depends call. With the exact same code, if I just toggle between panel v1.4.4 and v1.4.5, I get pass/fail behavior. So obviously something changed between those 2 builds. I checked the release document but couldn't find anything related. Can someone please help? Thanks in advance.

Complete, minimal, self-contained example code that reproduces the issue

# code goes here between backticks

### initialize json_saved
self.json_saved = pn.widgets.StaticText(value="", styles={'visibility': 'hidden'})
### initialize save button
self.save_temp = pn.widgets.Button(name="Save", button_type="primary")

### read son string from perspective, save_to_json function is defined below
self.save_temp.js_on_click(code="""                     
                            var unexplored = Array.from(document.children);
                            var persp = null;

                            for(let i = 0; i < unexplored.length; i++) {
                                if(unexplored[i].className.includes("bk-panel-models-perspective-Perspective")) {
                                    persp = unexplored[i].shadowRoot.querySelector('perspective-viewer');
                                    break;
                                }
                                if (unexplored[i].shadowRoot != null) {
                                    unexplored = unexplored.concat(Array.from(unexplored[i].shadowRoot.children));
                                }
                                else {
                                    unexplored = unexplored.concat(Array.from(unexplored[i].children));
                                }
                            }
                            
                            if(!name_holder.value) {
                                alert('Please provide a name for the template.');
                                save_conditions = false;
                            }
                            if(taken_names.includes(name_holder.value)) {
                                overwrite = confirm("A template already exists with the name " + name_holder.value + ". Would you like to overwrite it?");
                                if(!overwrite) {
                                    save_conditions = false;
                                    alert("Template was not saved.");
                                }
                            }
                            if(save_conditions) {
                                console.log("start calling");
                                save_to_json(persp, json_holder);
                                console.log("end calling");

                            }
                            else {
                                save_conditions = true;
                            }
                    """,
                    args={'json_holder': self.json_saved, 'name_holder': self.name_input, 'taken_names': self.template_reader.list_templates()})

### js script to save json string from perspective
setup_save_persp = """<script>
                                //try{
                                // Used to determine whether to overwrite an existing record
                                var overwrite = false;
                                // Used to determine whether the perspective template should be saved (will be updated to allow overriding taken names)
                                var save_conditions = true;
                                // Save the given save_object using persp.save() and write it to save_object so it can be read by Python
                                // or alert the user that the template needs data to save
                                async function save_to_json(persp, save_object) {
                                    try {
                                        saved_persp = await persp.save('json');
                                        if(saved_persp.filter.toString() == 'index,<,0') {
                                            alert('Please select data for the template.');
                                            save_conditions = false;
                                        }
                                        if(save_conditions == true) {
                                            save_object.text = "";
                                            save_object.text = JSON.stringify(saved_persp);
                                            console.log(JSON.stringify(saved_persp));                                            
                                        }
                                        else {
                                            save_conditions = true;
                                        }
                                    }
                                    catch(error) {
                                        alert(error)
                                    }
                                }
                                /*}
                                catch(e) {
                                    // Do nothing; will likely occur when the page is left and visited again
                                }*/
                            </script>"""

### trigger save perspective json to database
@pn.depends(self.json_saved.param.value, watch=True)
            def send_to_db(json_text):
                '''
                When the configuration of the template is saved to json_saved, send it to
                webapp_data for processing
                '''
                print("enter here, json_text: ", json_text)             
                
                if json_text != "":
                    saved = self.template_reader.save_analysis_template(self.name_input.value, json_text, self.name_input.value in self.template_reader.list_templates())
                    alert_save.object = ""
                    if saved == "True":
                        alert_save.object = ""
                        alert_save.object = "<script> \
                                                alert('Template is saved!'); \
                                            </script>"
                        self.load_search.options = self.template_reader.list_templates()
                    else:
                        alert_save.object = ""
                        alert_save.object = "<script> \
                                                alert('Template save failed.'); \
                                            </script>"
                    json_saved.value = ""

Stack traceback and/or browser JavaScript console output

Screenshots or screencasts of the bug in action

• I may be interested in making a pull request to address this