Multiple holomaps in html not working

Hi;

I want to ask a question about holomap. I’m adding 7 holomaps into same html file that is generated by save method. ( run().save(“report.html”, embed=True) ) Change in one of the selector is triggering the change of others but not all of them. As only 5 of them have the same dimension name, they are interacting together but other 2 holomaps are not working even if I change the value of corresponding select box. If I create 2 html files (first 5 is grouped in 1 file and rest in another file), it is working but there are some issues in layout of main html file.

I wonder whether there is a known issue of holomaps when we add multiple holomaps. If not, I will generate a small example to replicate behaviour.

Thanks.

I have 4 more holomaps. Their structures are similar. They are interacting together. As date is changed in one selectbox, all will be updated. This is the behaviour I expect.

def nationality_count_view(self):
    dates = np.sort(self.df.Date.unique())
    result_dict = {}


    if signal_vs_user == "Sinyal":
        columns_rename = "Sinyal Sayısi"
        method = "count"
    else:
        columns_rename = "Cihaz Sayısi"
        method = "nunique"


    for date in dates[:4]:


        filtre_date = np.where(self.df.Date.values.astype("datetime64[D]")==date,True,False)

        result_dict[(pd.to_datetime(date).date().strftime("%Y-%m-%d"))] = self.df.loc[(~self.df.countryOrigin.isna()) & (filtre_date)] \
                    .groupby("countryOrigin",as_index=False) \
                    .agg({"Device_ID":method}).sort_values("Device_ID",ascending=False).iloc[0:20] \
                    .rename(columns={"countryOrigin":"Ulke","Device_ID":columns_rename}) \
                    .hvplot.bar(x='Ulke', y=columns_rename, rot=90, yformatter='%.0f').opts(xrotation= 45, default_tools=[])
                    
                    
    kdims = [hv.Dimension(('Tarih', 'Tarih'), default="2022-04-01")]
    holomap_nation = hv.HoloMap(result_dict, kdims=kdims)

    return holomap_nation 

But when I added code below, holomaps in main html are not working anymore.

def location_signals(self):
    mekanlar = np.sort(self.df.query("assigned_poly!=''").assigned_poly.unique()).tolist()
    result_dict = {}
    
    if signal_vs_user == "Sinyal":
        columns_rename = "Sinyal Say"
        method = "count"
    else:
        columns_rename = "Cihaz Say"
        method = "nunique"

    for mekan in mekanlar[:4]:

        data = self.df.query("assigned_poly == @mekan").query("assigned_poly!=''") \
                    .groupby("Date") \
                    .agg({"Device_ID":method}).sort_values("Device_ID",ascending=False) \
                    .reset_index() \
                  .rename(columns={"Device_ID":columns_rename,"Date":"Date1"})

        result_dict[mekan] =  data.hvplot.line(x='Date1', y=columns_rename, yformatter='%.0f').opts(default_tools=[]) * \
                                     data.hvplot.area(x='Date1', y=columns_rename,yformatter='%.0f').opts(default_tools=[])



   # kdims3 = [hv.Dimension(('mekan', 'Mekan'),('Tarih','Tarih'),default="AKM")]
    holomap_loc = hv.HoloMap(result_dict, kdims=["Mekan"])


    return holomap_loc

`

Hi;

I’m sharing full code to replicate problem.

import numpy as np, pandas as pd
import panel as pn, param
import holoviews as hv
import geoviews as gv  #sorun olusturuyor


hv.extension('bokeh', logo=False, sizing_mode='stretch_both')



class dashboard(param.Parameterized):

    def __init__(self, **params):
        super(dashboard, self).__init__(**params)

 
    def viewable(self):

        dates = np.arange('2022-01-01', 10, dtype='M8[D]')
        result_dict = {}

        for date in dates[:4]:
            xs = range(-10,11)
            ys = np.random.randint(1,10,len(list(xs)))
            step_graph = hv.Curve((xs, ys))

            result_dict[(pd.to_datetime(date).date().strftime("%Y-%m-%d"))] = step_graph

        kdims = [hv.Dimension(('date', 'Tarih'), default="2022-01-01")]
        holomap = hv.HoloMap(result_dict, kdims=kdims)
        
        return holomap
    
    def date2(self):

        dates = np.arange('2022-01-01', 10, dtype='M8[D]')
        result_dict = {}

        for date in dates[:4]:
            xs = range(-10,11)
            ys = np.random.randint(1,10,len(list(xs)))
            step_graph = hv.Curve((xs, ys))

            result_dict[(pd.to_datetime(date).date().strftime("%Y-%m-%d"))] = step_graph

        kdims = [hv.Dimension(('date', 'Tarih'), default="2022-01-01")]
        holomap = hv.HoloMap(result_dict, kdims=kdims)
        
        return holomap


    def place(self):

        places = ["place1","place2","place3","place4"]
        result_dict = {}

        for place in places:
            xs = range(-10,11)
            ys = np.random.randint(1,10,len(list(xs)))
            step_graph = hv.Curve((xs, ys))

            result_dict[(place)] = step_graph

        kdims = [hv.Dimension(('place', 'Place'), default="place1")]
        holomap = hv.HoloMap(result_dict, kdims=kdims)
        
        return holomap


  
                         

def run():
    
    
    dashborad_instance = dashboard(name="")
    component1 = dashborad_instance.viewable().opts(responsive=True)

    component1 = pn.Card(pn.panel(component1, height=600,sizing_mode='stretch_width'),
                                    title="panel1",
                                    collapsible=False,
                                    active_header_background="#94F1F2", sizing_mode='stretch_both')

    component2 = dashborad_instance.date2().opts(responsive=True)

    component2 = pn.Card(pn.panel(component2, height=600,sizing_mode='stretch_width'),
                                    title="panel 2",
                                    collapsible=False,
                                    active_header_background="#94F1F2", sizing_mode='stretch_both')

    component3 =dashborad_instance.place().opts(responsive=True)

    component3 = pn.Card(pn.panel(component3, height=500,sizing_mode='stretch_width'),
                                    title="Panel3",
                                    collapsible=False,
                                    active_header_background="#94F1F2", sizing_mode='stretch_both')


    plot1 = pn.Column(pn.panel(component1,sizing_mode="stretch_width"),
                      pn.panel(component2,sizing_mode="stretch_width"),
                      pn.panel(component3,sizing_mode="stretch_width"),sizing_mode='stretch_both')


    return plot1



run().save("./raporlar/rapora.html", embed=True)

If you don’t add component3, first 2 holoviews will work as it should be but when you run the above code, last holoview will work but others will not work. Please first change the last select box and then try first or second one. Then you will experience problem.

Hi community;

anyone tried and replicate the same problem? I need your advice. I could not find a solution.

Hi @nemesis,

I can indeed replicate a problem. When I save your example only the last plot gets updated when I change its widget value, the others don’t change on their widget update. Is it the issue you’re reporting? If so it looks like a bug in Panel and I would suggest you opening an issue with a minimum example (the one you shared, or even more contained if possible to narrow down the issue) and a description of the issue (maybe with a GIF?). That would be very helpful. I have noticed there are already a few open issues with the save() functionality but maybe this one is a new one.

Hi Maximlt,

Yes you spotted the problem. I will create an issue later.

Thanks.