Golden Templates and Chart Resizing

I am trying to resize an echarts object which is in the golden template main frame.
I wrote the below code to fetch the height and the width for the current frame.

How can I

use scripts in reactive html to trigger a python command?

never mind, found the solution…

1 Like

Hi @jitz

Happy you found the solution. Would it be worth sharing for the community to learn from?

1 Like

You can trigger python commands by watching param.parameters change. Golden Template JS lets you monitor the change in the state using myLayout.on. When these dimensions change they trigger the python function using decorator @param.depends. This is where we pass the changed dimensions to the resizing object in my case its Echart object.

The below code is not absolutely correct but its a start to making auto_resizing a possibility for golden templates and other objects displayed in it.

Issue is that Golden Template i.e myLayout does not always have an absolute names present its JS object. This leads to wrong autoresizing. So I guess one will have to some how identify or write some identifiers in the html code to be then be able to resize exactly those panel objects.

Apologies if this is bit confusing but I guess this should be a feature in Panel and Golden Layout Template.

class Auto_Resize(ReactiveHTML):

    w = param.Parameter(default=10, doc="X position")
    h = param.Parameter(default=10, doc="Y position")


    _scripts = {

        

        'render': '''
                    console.log('width',myLayout.width);
                    console.log('height',myLayout.height);
                    console.log('w',data.w);
                   
                    myLayout.on('stateChanged',function()
                    
                    {
                        let content = myLayout.root.contentItems[0].contentItems[1].config.width;
                        //console.log(content);
                        let f = document.getElementsByClassName('lm_item lm_stack');  // need another way to be able to find dimensions using html tags written during creation of the panel object. Maybe some one has a better idea. 

                        data.w = f[1].clientWidth;
                        data.h = f[1].clientHeight;
                             
                    
                    });
                    ''',
    }

    @param.depends("w","h", watch=True)
    def event_happened(self):

        echart_pane.width = self.w
        echart_pane.height = self.h