Nesting & Appending Panel Accordion Limitations

It seems like there is a significant delay when many accordions containing widgets are nested, or appended to a single panel accordion. Here’s an example of a notebook code that exhibits this issue:

import panel as pn
    pn.extension()
    accordion = pn.Accordion()
    test_accordion = pn.Accordion(('test_great_grandparent',
                                  pn.Accordion(('test_grandparent', 
                                      pn.Accordion(('test_parent', 
                                                pn.Accordion(('test_child', 
                                                            pn.Accordion(('test_grand_child',
                                                                         pn.Accordion(('test_great_grand_child', pn.widgets.Checkbox(name='test')))
                                                                         ))
                                                             ))
                                                   ))
                                    ))
                             ))
    test_accordion1 = pn.Accordion(('test_great_grandparent',
                                  pn.Accordion(('test_grandparent', 
                                      pn.Accordion(('test_parent', 
                                                pn.Accordion(('test_child', 
                                                            pn.Accordion(('test_grand_child',
                                                                         pn.Accordion(('test_great_grand_child', pn.widgets.Checkbox(name='test')))
                                                                         ))
                                                             ))
                                                   ))
                                    ))
                             ))
    test_accordion2 = pn.Accordion(('test_great_grandparent',
                                  pn.Accordion(('test_grandparent', 
                                      pn.Accordion(('test_parent', 
                                                pn.Accordion(('test_child', 
                                                            pn.Accordion(('test_grand_child',
                                                                         pn.Accordion(('test_great_grand_child', pn.widgets.Checkbox(name='test')))
                                                                         ))
                                                             ))
                                                   ))
                                    ))
                             ))
    test_accordion3 = pn.Accordion(('test_great_grandparent',
                                  pn.Accordion(('test_grandparent', 
                                      pn.Accordion(('test_parent', 
                                                pn.Accordion(('test_child', 
                                                            pn.Accordion(('test_grand_child',
                                                                         pn.Accordion(('test_great_grand_child', pn.widgets.Checkbox(name='test')))
                                                                         ))
                                                             ))
                                                   ))
                                    ))
                             ))
    test_accordion4 = pn.Accordion(('test_great_grandparent',
                                  pn.Accordion(('test_grandparent', 
                                      pn.Accordion(('test_parent', 
                                                pn.Accordion(('test_child', 
                                                            pn.Accordion(('test_grand_child',
                                                                         pn.Accordion(('test_great_grand_child', pn.widgets.Checkbox(name='test')))
                                                                         ))
                                                             ))
                                                   ))
                                    ))
                             ))
    accordion.append(('test', test_accordion))
    accordion.append(('test1', test_accordion1))
    accordion.append(('test2', test_accordion2))
    accordion.append(('test3', test_accordion3))
    accordion.append(('test4', test_accordion4))
    accordion

This is down to Bokeh’s layout solver having to recompute the entire layout each time. There are (I think) still some optimizations that could be made there but they should be handled at the bokeh level.

1 Like