Show Dialog when in fullscreen mode

Hi,

I have a Bokeh Dialog with the ‘close_action’ property set to ‘hide’ as follows:

stylesheet2 = InlineStyleSheet(css=':host { width: 610px; height: 780px; overflow:hidden; } ')
d1 = Dialog(
    title=DomHTML(f"Hydrology forecast tool"),
    close_action = 'hide',
    collapsible = False,
    maximizable = False,
    minimizable = False,
    pinnable = False,
    stylesheets = [stylesheet2],
    content=Column(
        min_height=300,
        height_policy='auto',
        min_width=400,
        width_policy='auto',
        sizing_mode="scale_both",
        children=[
            Row(widgets, div),
            p3,
        ],
    ),
)

The above dialog is initiated as below (note: ‘p’ is my map plot and I’m adding the Dialog to it with visibility set to true):

d1.visible = True
d1.html_id = 'WL_forecast_tool'
p.elements.append(d1)

The above works as expected. For example, the Dialog appears when in fullscreen mode.

I then add a CustomAction tool to toggle the Dialog’s visibility on/off:

toggle_dialog_js = CustomJS(args=dict(d=d1), code="""
     if (d.visible) {
         d.visible = false;
     } else {
         d.visible = true;
     }
""")

# Add a tool to toggle the dialog on or off
dialog_toggle_tool = CustomAction(description = description,
                                    callback = toggle_dialog_js)
p.add_tools(dialog_toggle_tool)

The above code “recreates” the Dialog at the document level:

However, the recreated Dialog needs to be a child of the bokeh map window in order for it to appear in fullscreen mode.

I tried re-creating parent-child connectivity from the browser JS side but didn’t succeed. For example, the following doesn’t work for me in Bokeh 3.7.2:

toggle_dialog_js = CustomJS(args=dict(d=d, id="WL_forecast_tool"), code="""
     if (d.visible) {
         d.visible = false;
     } else {
         d.visible = true;
		 const parent = document.getElementById("divBkMapWindow");
		 const child = document.getElementById(id);
		 parent.appendChild(child);
     }
""")

Could someone from the wider community please throw a few pointers out as to how I can append the Dialog’s div to the Map Window div? For example, is there a way to run the following python command from a CustomAction callback:

p.elements.append(d1)

Alternatively, it would be great if a future Bokeh release could ensure the “recreated” Dialog is a child of the original Map Widow from which it was initiated.

Thank you :folded_hands:

I am afraid I don’t have any immediate suggestions for the layout issues. Both full-screen mod and Dialog are both fairly new features so it’s maybe not surprising there are kinks to work out. I’d suggest filing any GitHub Issues for bugs or missing features.