Accessing FastGridTemplate's full-screen capability for components contained in components

rcravotta · October 5, 2021, 3:22am

I recently found Marc Skov Madsen’s YouTube video titled “FastGridTemplate Deep Dive”. It demonstrated a number of capabilities that greatly interest me, but the one capability that sticks out the most is the full screen button at the top right of each component within the main body of the template.

My question/request is how to access this type of functionality on components contained inside of components (such as Tabs or embedded Cards) - not just the outermost components in the main window? I have been experimenting with ways of producing panel-based presentations that run on any web browser (ship as an .html file only). Using tabs has worked as an acceptable work-around for the lack of embedding support for templates.

How can I make use of this demonstrated capability for full screen in the FastGridTemplate on a per-component basis - even if it is only available on a Card (Although Tab and Accordion make sense also)?

Marc suggested that using the ReactiveHTML component might be a path to a solution. Any guidance on how to access this capability is appreciated.

Marc · October 5, 2021, 6:02am

Hi @rcravotta

I’ve created the FastFullScreenComponent below. Please note that it only works inside Fast Templates. If you or someone else wants it to work in other places we need to carve out small parts of the css and js that ships with the Fast Templates.

Try it out. It probably needs a few iterations before its working well for lots of use cases.

full-screen

import panel as pn

from panel.layout.base import NamedListLike
from panel.reactive import ReactiveHTML

class FastFullScreenComponent(ReactiveHTML, NamedListLike):
    _template = """
      <fast-card id="fullScreenComponent" class="fullScreenComponent">
        <span class="fullscreen-button" >
          <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18"><path d="M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z"/></svg>
        </span>
        {% for object in objects %}
          <div id="fullScreenComponentItem" class="fullScreenComponentItem">
            ${object}
          </div>
        {% endfor %}
      </fast-card>
     """

    _scripts = {
      "render": """fullScreenComponent.children[0].onclick=()=>{toggleFullScreen(fullScreenComponent)}""",
      "toggle": """console.log(event.target);toggleFullScreen(event.target.parentElement.parentElement)""",
    }

    def __init__(self, *objects, **params):
        NamedListLike.__init__(self, *objects, **params)
        ReactiveHTML.__init__(self, objects=self.objects, **params)

    @property
    def _child_names(self):
        return {'objects': self._names}

pn.extension(sizing_mode="stretch_width")

fullscreen_component1 = FastFullScreenComponent(
  "Panel is awesome 0",
  "Panel is awesome 1",
  "Panel is awesome 2",
  "Panel is awesome 3",
  "Panel is awesome 4",
  "Panel is awesome 5",
  name="Component 1"
)

fullscreen_component2 = FastFullScreenComponent(
  "Fast Design is also nice 0",
  "Fast Design is also nice 1",
  "Fast Design is also nice 2",
  "Fast Design is also nice 3",
  "Fast Design is also nice 4",
  "Fast Design is also nice 5",
  name="Component 2"
)

description = """Every Panel/ Card in the Fast Templates have a full screen button in the uppper
right corner.

But **a user needed full screen functionality inside nested layouts like Tabs**. Using
`ReactiveHTML` it was easy to provide.
"""

pn.template.FastListTemplate(
  site="Awesome Panel",
  title="Full Screen Component for Fast Templates",
  main=[description, pn.Tabs(fullscreen_component1, fullscreen_component2)],
  header_color="#777777",
  header_background="#f3e4df",
  accent_base_color="#f3e4df",
  # You can play around with the below as well
  # main_layout=""
  # main_layout="card"
).servable()

rcravotta · October 5, 2021, 9:58am

I did some testing and learned a lot about what does and does not work. I have more testing, especially on how to embed a fullscreen component with something else next it (like text). below is the code I am testing with.

import numpy as np
import panel as pn
import holoviews as hv

from panel.layout.base import NamedListLike
from panel.reactive import ReactiveHTML

class FastFullScreenComponent(ReactiveHTML, NamedListLike):
    _template = """
      <fast-card id="fullScreenComponent" class="fullScreenComponent">
        <span class="fullscreen-button" >
          <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18"><path d="M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z"/></svg>
        </span>
        {% for object in objects %}
          <div id="fullScreenComponentItem" class="fullScreenComponentItem">
            ${object}
          </div>
        {% endfor %}
      </fast-card>
     """

    _scripts = {
      "render": """fullScreenComponent.children[0].onclick=()=>{toggleFullScreen(fullScreenComponent)}""",
      "toggle": """console.log(event.target);toggleFullScreen(event.target.parentElement.parentElement)""",
    }

    def __init__(self, *objects, **params):
        NamedListLike.__init__(self, *objects, **params)
        ReactiveHTML.__init__(self, objects=self.objects, **params)

    @property
    def _child_names(self):
        return {'objects': self._names}

pn.extension(sizing_mode="stretch_both")

grid_style = {'grid_line_color':'lightgray', 'grid_line_width':1.5, 'grid_line_alpha':0.3, 
              'minor_grid_line_color':'lightgray', 'minor_grid_line_width':0.5, 'minor_grid_line_alpha':0.3, 'minor_grid_line_dash':[6,4]}

colors = ['#014baf', '#84ae50', '#793688', '#cd7e3a', '#7183d6', '#49b46f', '#cb5084', '#356e84', '#bb4740', '#73a9d4',
          '#7a492e', '#c88bc8', '#49772b', '#5b4b74', '#a8ab83', '#833349', '#5bb9b0', '#3b6240', '#cc8598', '#d09377']

hv.opts.defaults(
    hv.opts.Curve(min_height=200, responsive=True, padding=(0.01, 0.01), gridstyle=grid_style, show_grid=True, tools=['hover'], hover_line_color='red', color=hv.Cycle(colors)),
    hv.opts.VLine(color='red', line_width=1, line_dash='dashed'),
    hv.opts.HLine(color=hv.Cycle(colors))
    )

XS = np.linspace(0, np.pi)

a = hv.Curve((XS, np.sin(XS * 3 + 0))).opts(title="Sine")
b = hv.Curve((XS, np.cos(XS * 3 + 0))).opts(title="Cosine")

fsa = FastFullScreenComponent(a)
fsb = FastFullScreenComponent(b)

fullscreen_component1 = FastFullScreenComponent(
  "Panel is awesome 0",
  "Panel is awesome 1",
  "Panel is awesome 2",
  "Panel is awesome 3",
  "Panel is awesome 4",
  "Panel is awesome 5",
  name="Component 1"
)

fullscreen_component2 = FastFullScreenComponent(
  "Fast Design is also nice 0",
  "Fast Design is also nice 1",
  "Fast Design is also nice 2",
  "Fast Design is also nice 3",
  "Fast Design is also nice 4",
  "Fast Design is also nice 5",
  name="Component 2"
)

# fs3 = FastFullScreenComponent(a) + FastFullScreenComponent(b)

description = """Every Panel/ Card in the Fast Templates have a full screen button in the uppper
right corner.

But **a user needed full screen functionality inside nested layouts like Tabs**. Using
`ReactiveHTML` it was easy to provide.
"""

app = pn.template.FastGridTemplate(
    site="Awesome Panel",
    title="Full Screen Component for Fast Grid Templates",
    header_color="#777777",
    header_background="#f3e4df",
    accent_base_color="#f3e4df",
    # main_layout="", # default is 'card'
    corner_radius=15,
    row_height=100,
    sizing_mode='stretch_both',
)

app.main[:1,:]= description
app.main[1:7, :] = pn.Tabs(
    fullscreen_component1, 
    fullscreen_component2, 
    ('Side-by-side', pn.Row(fullscreen_component1, fullscreen_component2)),
    ('2x2 plots', pn.pane.HoloViews(hv.Layout(a + b + b + a).cols(2))),
    ('text left of plot', pn.Row(
        pn.pane.Markdown('''# Text Title
            Only top-level or explicit fullscreen components have a full screen button. However, text does not wrap appropriately.

            This is where explanation text would go for the plot on the right.
            
            The desire is to ne able to examine only the layout on the right in full screen mode. It is a single plot on this tab.''',
            ),
        pn.pane.HoloViews(a)), # I have not figured out syntax for putting a fullscreen_component here yet
        ), 
    ('text right of plot', pn.Row(
        pn.pane.HoloViews(a), # I have not figured out syntax for putting a fullscreen_component here yet
        pn.pane.Markdown('''# Text Title
            Only top-level or explicit fullscreen components have a full screen button. However, text does not wrap appropriately.

            This is where explanation text would go for the plot on the right.
            
            The desire is to ne able to examine only the layout on the right in full screen mode. It is a single plot on this tab.''',
            ))),
    ('text above plot', pn.Column(# I have not figured out syntax for putting a fullscreen_component here yet
        pn.pane.Markdown('''# Text Title
            Only top-level or explicit fullscreen components have a full screen button. However, text does not wrap appropriately.

            This is where explanation text would go for the plot on the right.
            
            The desire is to ne able to examine only the layout on the right in full screen mode. It is a single plot on this tab.''',
            ),
        pn.pane.HoloViews(a),
        )), 
    ('text below plot', pn.Column(
        pn.pane.HoloViews(a), # I have not figured out syntax for putting a fullscreen_component here yet
        pn.pane.Markdown('''# Text Title
            Only top-level or explicit fullscreen components have a full screen button. However, text does not wrap appropriately.

            This is where explanation text would go for the plot on the right.
            
            The desire is to ne able to examine only the layout on the right in full screen mode. It is a single plot on this tab.''',
            ),
        )),
    ('tests remaining', 'get a working version of a single and a double plot layout in a full screen component rather than as part of the top-level tab to addressing sizing problems'),
    ('Initial test of fullscreen', fsa),
    scroll=False,
    )
app.show()

pn.template.FastListTemplate(
    site="Awesome Panel",
    title="Full Screen Component for Fast List Templates",
    main=[description, pn.Tabs(
        fullscreen_component1,
        fullscreen_component2, 
        ('Side-by-side', pn.Row(fullscreen_component1, fullscreen_component2)),
        ('2x2 plots', pn.pane.HoloViews(hv.Layout(a + b + b + a).cols(2))),
        ('text left of plot', pn.Row(
            pn.pane.Markdown('''# Text Title
                Only top-level or explicit fullscreen components have a full screen button. However, text does not wrap appropriately.

                This is where explanation text would go for the plot on the right.
                
                The desire is to ne able to examine only the layout on the right in full screen mode. It is a single plot on this tab.''',
                ),
            pn.pane.HoloViews(a)), # I have not figured out syntax for putting a fullscreen_component here yet
            ), 
        ('text right of plot', pn.Row(
            pn.pane.HoloViews(a), # I have not figured out syntax for putting a fullscreen_component here yet
            pn.pane.Markdown('''# Text Title
                Only top-level or explicit fullscreen components have a full screen button. However, text does not wrap appropriately.

                This is where explanation text would go for the plot on the right.
                
                The desire is to ne able to examine only the layout on the right in full screen mode. It is a single plot on this tab.''',
                ))),
        ('text above plot', pn.Column(# I have not figured out syntax for putting a fullscreen_component here yet
            pn.pane.Markdown('''# Text Title
                Only top-level or explicit fullscreen components have a full screen button. However, text does not wrap appropriately.

                This is where explanation text would go for the plot on the right.
                
                The desire is to ne able to examine only the layout on the right in full screen mode. It is a single plot on this tab.''',
                ),
            pn.pane.HoloViews(a),
            )), 
        ('text below plot', pn.Column(
            pn.pane.HoloViews(a), # I have not figured out syntax for putting a fullscreen_component here yet
            pn.pane.Markdown('''# Text Title
                Only top-level or explicit fullscreen components have a full screen button. However, text does not wrap appropriately.

                This is where explanation text would go for the plot on the right.
                
                The desire is to ne able to examine only the layout on the right in full screen mode. It is a single plot on this tab.''',
                ),
            )),
        ('tests remaining', 'get a working version of a single and a double plot layout in a full screen component rather than as part of the top-level tab to addressing sizing problems'),
        ('Initial test of fullscreen', fsa),
        scroll=False,
        )],
    header_color="#777777",
    header_background="#f3e4df",
    accent_base_color="#f3e4df",
    # main_layout="", # default is 'card'
    corner_radius=15,
).show()

rcravotta · October 5, 2021, 6:27pm

All testing has used no interactivity other than changing tabs and selecting the full screen button on each component. More testing of the above code yields the following observations: (FSC = full screen component):

Plots with both min_height and min_width declared initially render at min dimensions
These plots maintain min_height but render stretch_width when Tabs FSC expanded
upon closing FSC, re-rendered plot width is too long for frame, height is unchanged
These plots maintain min_height but render stretch_width when Plot FSC expanded
upon closing FSC, re-rendered plot width is much longer than frame, height is unchanged
Plots with only min_height specified initially render a zero width plot
These plots stretch_width but maintain height when Tabs FSC expanded (both should expand because used min_height and declared stretch both for template)
Upon closing FSC, re-rendered plot width too long for frame, height is unchanged
These plots maintain min_height but render stretch_width when Plot FSC expanded
Upon closing FSC, re-rendered plot width is much longer than frame, height is unchanged

It seems the renderer is having different issues with determining the size of the frame it is placing the plot in on initial and subsequent renderings based on whether the FSC was top-level or embedded-level.

In all cases, the FSC is not supporting stretch_height when min_height is used. The non-FSC tabs are provided for comparison; they exhibit desirable behavior other than I can only expand the Tab FSC (which is normal behavior without FSC).

Hoxbro · October 5, 2021, 6:57pm

For the plotting could you try to implement something similar to example 3 or 4 from here:

github.com/holoviz/panel

Problem with responsive in hvplot

opened 04:40PM - 23 Sep 21 UTC

Hoxbro

TRIAGE

#### ALL software version info <details> <summary> doit env_capture </summ…ary> ``` yaml . env_capture active environment : base active env location : C:\Users\shh\miniconda3\envs\holoviz shell level : 2 user config file : C:\Users\shh\.condarc populated config files : C:\Users\shh\.condarc conda version : 4.10.3 conda-build version : 3.21.4 python version : 3.7.10.final.0 virtual packages : __cuda=11.3=0 __win=0=0 __archspec=1=x86_64 base environment : C:\Users\shh\miniconda3\envs\holoviz (writable) conda av data dir : C:\Users\shh\miniconda3\envs\holoviz\etc\conda conda av metadata url : None channel URLs : https://conda.anaconda.org/pyviz/win-64 https://conda.anaconda.org/pyviz/noarch https://conda.anaconda.org/conda-forge/win-64 https://conda.anaconda.org/conda-forge/noarch https://repo.anaconda.com/pkgs/main/win-64 https://repo.anaconda.com/pkgs/main/noarch https://repo.anaconda.com/pkgs/r/win-64 https://repo.anaconda.com/pkgs/r/noarch https://repo.anaconda.com/pkgs/msys2/win-64 https://repo.anaconda.com/pkgs/msys2/noarch package cache : C:\Users\shh\miniconda3\envs\holoviz\pkgs C:\Users\shh\.conda\pkgs C:\Users\shh\AppData\Local\conda\conda\pkgs envs directories : C:\Users\shh\miniconda3\envs\holoviz\envs C:\Users\shh\.conda\envs C:\Users\shh\AppData\Local\conda\conda\envs platform : win-64 user-agent : conda/4.10.3 requests/2.26.0 CPython/3.7.10 Windows/10 Windows/10.0.19041 administrator : False netrc file : None offline mode : False # packages in environment at C:\Users\shh\miniconda3\envs\holoviz: # # Name Version Build Channel anyio 3.3.0 py37h03978a9_0 conda-forge argcomplete 1.12.3 pyhd8ed1ab_2 conda-forge argon2-cffi 20.1.0 py37hcc03f2d_2 conda-forge async_generator 1.10 py_0 conda-forge atomicwrites 1.4.0 pyh9f0ad1d_0 conda-forge attrs 21.2.0 pyhd8ed1ab_0 conda-forge babel 2.9.1 pyh44b312d_0 conda-forge backcall 0.2.0 pyh9f0ad1d_0 conda-forge backports 1.0 py_2 conda-forge backports.functools_lru_cache 1.6.4 pyhd8ed1ab_0 conda-forge beautifulsoup4 4.10.0 pyha770c72_0 conda-forge bleach 4.1.0 pyhd8ed1ab_0 conda-forge bokeh 2.4.0 py37h03978a9_0 conda-forge branca 0.4.2 pyhd8ed1ab_0 conda-forge brotlipy 0.7.0 py37hcc03f2d_1001 conda-forge bzip2 1.0.8 h8ffe710_4 conda-forge ca-certificates 2021.5.30 h5b45459_0 conda-forge certifi 2021.5.30 py37h03978a9_0 conda-forge cffi 1.14.6 py37hd8e9650_1 conda-forge chardet 4.0.0 py37h03978a9_1 conda-forge charset-normalizer 2.0.5 pyhd8ed1ab_0 conda-forge cloudpickle 2.0.0 pyhd8ed1ab_0 conda-forge cmarkgfm 0.6.0 py37hcc03f2d_0 conda-forge codecov 2.1.11 pyhd3deb0d_0 conda-forge colorama 0.4.4 pyh9f0ad1d_0 conda-forge colorcet 2.0.6 py_0 pyviz/label/dev conda 4.10.3 py37h03978a9_1 conda-forge conda-build 3.21.4 py37h03978a9_0 conda-forge conda-package-handling 1.7.3 py37ha54c9ec_0 conda-forge coverage 5.5 py37hcc03f2d_0 conda-forge cryptography 3.4.7 py37h20c650d_0 conda-forge cycler 0.10.0 py_2 conda-forge debugpy 1.4.1 py37hf2a7229_0 conda-forge decorator 5.1.0 pyhd8ed1ab_0 conda-forge defusedxml 0.7.1 pyhd8ed1ab_0 conda-forge docutils 0.17.1 py37h03978a9_0 conda-forge doit 0.33.1 py37hc8dfbb8_1 conda-forge entrypoints 0.3 py37hc8dfbb8_1002 conda-forge filelock 3.0.12 pyh9f0ad1d_0 conda-forge flake8 3.9.2 pyhd8ed1ab_0 conda-forge folium 0.12.0 pyhd8ed1ab_1 conda-forge freetype 2.10.4 h546665d_1 conda-forge glob2 0.7 py_0 conda-forge holoviews 1.14.4.post51+g73490cbf6 dev_0 <develop> hvplot 0.7.3 py_0 pyviz icu 68.1 h0e60522_0 conda-forge idna 3.1 pyhd3deb0d_0 conda-forge importlib-metadata 4.8.1 py37h03978a9_0 conda-forge importlib_metadata 4.8.1 hd8ed1ab_0 conda-forge iniconfig 1.1.1 pyh9f0ad1d_0 conda-forge intel-openmp 2021.3.0 h57928b3_3372 conda-forge ipykernel 6.4.1 py37h4038f58_0 conda-forge ipympl 0.8.0 pyhd8ed1ab_0 conda-forge ipython 7.27.0 py37h4038f58_0 conda-forge ipython_genutils 0.2.0 py_1 conda-forge ipywidgets 7.6.5 pyhd8ed1ab_0 conda-forge jbig 2.1 h8d14728_2003 conda-forge jedi 0.18.0 py37h03978a9_2 conda-forge jinja2 3.0.1 pyhd8ed1ab_0 conda-forge jpeg 9d h8ffe710_0 conda-forge json5 0.9.5 pyh9f0ad1d_0 conda-forge jsonschema 3.2.0 py37hc8dfbb8_1 conda-forge jupyter_client 7.0.3 pyhd8ed1ab_0 conda-forge jupyter_core 4.8.1 py37h03978a9_0 conda-forge jupyter_server 1.11.0 pyhd8ed1ab_0 conda-forge jupyterlab 3.1.13 pyhd8ed1ab_0 conda-forge jupyterlab_pygments 0.1.2 pyh9f0ad1d_0 conda-forge jupyterlab_server 2.8.1 pyhd8ed1ab_0 conda-forge jupyterlab_widgets 1.0.2 pyhd8ed1ab_0 conda-forge keyring 23.2.1 py37h03978a9_0 conda-forge kiwisolver 1.3.2 py37h8c56517_0 conda-forge lcms2 2.12 h2a16943_0 conda-forge lerc 2.2.1 h0e60522_0 conda-forge libarchive 3.5.2 hb45042f_0 conda-forge libblas 3.9.0 11_win64_mkl conda-forge libcblas 3.9.0 11_win64_mkl conda-forge libclang 11.1.0 default_h5c34c98_1 conda-forge libdeflate 1.8 h8ffe710_0 conda-forge libiconv 1.16 he774522_0 conda-forge liblapack 3.9.0 11_win64_mkl conda-forge liblief 0.11.5 h0e60522_0 conda-forge libpng 1.6.37 h1d00b33_2 conda-forge libsodium 1.0.18 h8d14728_1 conda-forge libtiff 4.3.0 h0c97f57_0 conda-forge libxml2 2.9.12 hf5bbc77_0 conda-forge lz4-c 1.9.3 h8ffe710_1 conda-forge lzo 2.10 he774522_1000 conda-forge m2-msys2-runtime 2.5.0.17080.65c939c 3 conda-forge m2-patch 2.7.5 2 conda-forge m2w64-gcc-libgfortran 5.3.0 6 conda-forge m2w64-gcc-libs 5.3.0 7 conda-forge m2w64-gcc-libs-core 5.3.0 7 conda-forge m2w64-gmp 6.1.0 2 conda-forge m2w64-libwinpthread-git 5.0.0.4634.697f757 2 conda-forge markdown 3.3.4 pyhd8ed1ab_0 conda-forge markupsafe 2.0.1 py37hcc03f2d_0 conda-forge matplotlib 3.4.3 py37h03978a9_0 conda-forge matplotlib-base 3.4.3 py37h4a79c79_0 conda-forge matplotlib-inline 0.1.3 pyhd8ed1ab_0 conda-forge mccabe 0.6.1 py_1 conda-forge menuinst 1.4.18 py37h03978a9_0 conda-forge mistune 0.8.4 py37hcc03f2d_1004 conda-forge mkl 2021.3.0 hb70f87d_564 conda-forge more-itertools 8.10.0 pyhd8ed1ab_0 conda-forge msys2-conda-epoch 20160418 1 conda-forge nbclassic 0.3.2 pyhd8ed1ab_0 conda-forge nbclient 0.5.4 pyhd8ed1ab_0 conda-forge nbconvert 6.1.0 py37h03978a9_1 conda-forge nbformat 5.1.3 pyhd8ed1ab_0 conda-forge nbsmoke 0.5.0 pyh9f0ad1d_0 pyviz/label/dev nest-asyncio 1.5.1 pyhd8ed1ab_0 conda-forge notebook 6.4.4 pyha770c72_0 conda-forge numpy 1.21.2 py37h940b05c_0 conda-forge olefile 0.46 pyh9f0ad1d_1 conda-forge openjpeg 2.4.0 hb211442_1 conda-forge openssl 1.1.1l h8ffe710_0 conda-forge packaging 21.0 pyhd8ed1ab_0 conda-forge pandas 1.3.3 py37h9386db6_0 conda-forge pandoc 2.14.2 h8ffe710_0 conda-forge pandocfilters 1.5.0 pyhd8ed1ab_0 conda-forge panel 0.13.0a5.post18+gdef70ef8.dirty dev_0 <develop> param 1.11.2a1 py_0 pyviz/label/dev parameterized 0.8.1 pyhd3deb0d_0 conda-forge parso 0.8.2 pyhd8ed1ab_0 conda-forge pickleshare 0.7.5 py37hc8dfbb8_1002 conda-forge pillow 8.3.2 py37hd7d9ad0_0 conda-forge pip 21.2.4 pyhd8ed1ab_0 conda-forge pkginfo 1.7.1 pyhd8ed1ab_0 conda-forge plotly 5.3.1 pyhd8ed1ab_0 conda-forge pluggy 1.0.0 py37h03978a9_1 conda-forge prometheus_client 0.11.0 pyhd8ed1ab_0 conda-forge prompt-toolkit 3.0.20 pyha770c72_0 conda-forge psutil 5.8.0 py37hcc03f2d_1 conda-forge py 1.10.0 pyhd3deb0d_0 conda-forge py-lief 0.11.5 py37hf2a7229_0 conda-forge pycodestyle 2.7.0 pyhd8ed1ab_0 conda-forge pycosat 0.6.3 py37hcc03f2d_1006 conda-forge pycparser 2.20 pyh9f0ad1d_2 conda-forge pyct 0.4.8 py_0 pyviz/label/dev pyct-core 0.4.8 py_0 pyviz/label/dev pyctdev 0.6.4 py_0 pyviz pyflakes 2.3.1 pyhd8ed1ab_0 conda-forge pygments 2.10.0 pyhd8ed1ab_0 conda-forge pyopenssl 20.0.1 pyhd8ed1ab_0 conda-forge pyparsing 2.4.7 pyh9f0ad1d_0 conda-forge pyqt 5.12.3 py37h03978a9_7 conda-forge pyqt-impl 5.12.3 py37hf2a7229_7 conda-forge pyqt5-sip 4.19.18 py37hf2a7229_7 conda-forge pyqtchart 5.12 py37hf2a7229_7 conda-forge pyqtwebengine 5.12.1 py37hf2a7229_7 conda-forge pyrsistent 0.17.3 py37hcc03f2d_2 conda-forge pysocks 1.7.1 py37h03978a9_3 conda-forge pytest 6.2.5 py37h03978a9_0 conda-forge pytest-cov 2.12.1 pyhd8ed1ab_0 conda-forge python 3.7.10 h7840368_101_cpython conda-forge python-dateutil 2.8.2 pyhd8ed1ab_0 conda-forge python-libarchive-c 3.1 py37h03978a9_0 conda-forge python_abi 3.7 2_cp37m conda-forge pytz 2021.1 pyhd8ed1ab_0 conda-forge pyviz_comms 2.1.0 py_0 pyviz/label/dev pywin32 301 py37hcc03f2d_0 conda-forge pywin32-ctypes 0.2.0 py37h03978a9_1003 conda-forge pywinpty 1.1.4 py37h7f67f24_0 conda-forge pyyaml 5.4.1 py37hcc03f2d_1 conda-forge pyzmq 22.3.0 py37hcce574b_0 conda-forge qt 5.12.9 h5909a2a_4 conda-forge readme_renderer 27.0 pyh9f0ad1d_0 conda-forge requests 2.26.0 pyhd3eb1b0_0 requests-toolbelt 0.9.1 py_0 conda-forge requests-unixsocket 0.2.0 py_0 conda-forge rfc3986 1.5.0 pyhd8ed1ab_0 conda-forge ripgrep 13.0.0 h7f3b576_0 conda-forge ruamel_yaml 0.15.80 py37hcc03f2d_1004 conda-forge scipy 1.7.1 py37hb6553fb_0 conda-forge send2trash 1.8.0 pyhd8ed1ab_0 conda-forge setuptools 58.0.4 py37h03978a9_1 conda-forge six 1.16.0 pyh6c4a22f_0 conda-forge sniffio 1.2.0 py37h03978a9_1 conda-forge soupsieve 2.0.1 py37hc8dfbb8_0 conda-forge sqlite 3.36.0 h8ffe710_1 conda-forge tbb 2021.3.0 h2d74725_0 conda-forge tenacity 8.0.1 pyhd8ed1ab_0 conda-forge terminado 0.12.1 py37h03978a9_0 conda-forge testpath 0.5.0 pyhd8ed1ab_0 conda-forge tk 8.6.11 h8ffe710_1 conda-forge toml 0.10.2 pyhd8ed1ab_0 conda-forge tornado 6.1 py37hcc03f2d_1 conda-forge tqdm 4.62.3 pyhd8ed1ab_0 conda-forge traitlets 5.1.0 pyhd8ed1ab_0 conda-forge twine 3.4.2 pyhd8ed1ab_0 conda-forge typing_extensions 3.10.0.2 pyha770c72_0 conda-forge ucrt 10.0.20348.0 h57928b3_0 conda-forge urllib3 1.26.6 pyhd8ed1ab_0 conda-forge vc 14.2 hb210afc_5 conda-forge vs2015_runtime 14.29.30037 h902a5da_5 conda-forge wcwidth 0.2.5 pyh9f0ad1d_2 conda-forge webencodings 0.5.1 py_1 conda-forge websocket-client 0.57.0 py37h03978a9_4 conda-forge wheel 0.37.0 pyhd8ed1ab_1 conda-forge widgetsnbextension 3.5.1 py37h03978a9_4 conda-forge win_inet_pton 1.1.0 py37h03978a9_2 conda-forge winpty 0.4.3 4 conda-forge xz 5.2.5 h62dcd97_1 conda-forge yaml 0.2.5 he774522_0 conda-forge zeromq 4.3.4 h0e60522_1 conda-forge zipp 3.5.0 pyhd8ed1ab_0 conda-forge zlib 1.2.11 h62dcd97_1010 conda-forge zstd 1.5.0 h6255e5f_0 conda-forge name: holoviz channels: - pyviz - conda-forge - defaults prefix: C:\Users\shh\miniconda3\envs\holoviz\envs\holoviz ``` </details> #### Description of expected behavior and the observed behavior I have a function which returns a hvplot which I want to be `responsive=True` so it can be used with `stretch_both` or in a template. But when I add it to a panel as a function without calling it or have it inside a template it sets the width and/or height to 0. When I move around the plot it gives an error. If there is a workaround to this I would love to hear it. I'm also not completly sure if this is a panel or hvplot problem. #### Complete, minimal, self-contained example code that reproduces the issue This is the same for all the following examples. ``` python import hvplot.pandas # noqa import panel as pn import pandas as pd df = pd.DataFrame(range(100)) f = lambda: df.hvplot(responsive=True) ``` <details> <summary> Example 1 </summary> ``` python pn.panel(f, sizing_mode="stretch_both").servable() ``` ![image](https://user-images.githubusercontent.com/19758978/134545285-88c4aa2f-f31c-4ff7-b04d-e5d08b313ab5.png) </details> <details> <summary> Example 2</summary> ``` python pn.panel(f(), sizing_mode="stretch_both").servable() # This one works ``` ![image](https://user-images.githubusercontent.com/19758978/134545981-33bf2482-26f4-4b06-9f1f-fda319639f7a.png) </details> <details> <summary> Example 3</summary> ``` python pn.template.FastListTemplate(main=f).servable() ``` ![image](https://user-images.githubusercontent.com/19758978/134546317-f92b22ac-6fc1-4676-a000-3a314c1cc278.png) </details> <details> <summary> Example 4</summary> ``` python pn.template.FastListTemplate(main=f()).servable() ``` ![image](https://user-images.githubusercontent.com/19758978/134546717-a31152ac-4fe0-43f6-a432-6a03c71adefd.png) </details> #### Stack traceback and/or browser JavaScript console output <details> <summary> Stack traceback </summary> ``` python 2021-09-23 18:28:20,542 error handling message message: Message 'PATCH-DOC' content: {'events': [{'kind': 'ModelChanged', 'model': {'id': '11104'}, 'attr': 'start', 'new': None}, {'kind': 'ModelChanged', 'model': {'id': '11104'}, 'attr': 'end', 'new': None}], 'references': []} error: ValueError("failed to validate Range1d(id='11104', ...).start: expected an element of either Float, Datetime or TimeDelta, got None") Traceback (most recent call last): File "C:\Users\shh\miniconda3\envs\holoviz\lib\site-packages\bokeh\server\protocol_handler.py", line 97, in handle work = await handler(message, connection) File "C:\Users\shh\miniconda3\envs\holoviz\lib\site-packages\bokeh\server\session.py", line 93, in _needs_document_lock_wrapper result = func(self, *args, **kwargs) File "C:\Users\shh\miniconda3\envs\holoviz\lib\site-packages\bokeh\server\session.py", line 287, in _handle_patch message.apply_to_document(self.document, self) File "C:\Users\shh\miniconda3\envs\holoviz\lib\site-packages\bokeh\protocol\messages\patch_doc.py", line 115, in apply_to_document invoke_with_curdoc(doc, lambda: doc.apply_json_patch(self.content, setter)) File "C:\Users\shh\miniconda3\envs\holoviz\lib\site-packages\bokeh\document\callbacks.py", line 408, in invoke_with_curdoc return f() File "C:\Users\shh\miniconda3\envs\holoviz\lib\site-packages\bokeh\protocol\messages\patch_doc.py", line 115, in <lambda> invoke_with_curdoc(doc, lambda: doc.apply_json_patch(self.content, setter)) File "C:\Users\shh\miniconda3\envs\holoviz\lib\site-packages\bokeh\document\document.py", line 391, in apply_json_patch DocumentPatchedEvent.handle_json(self, event_json, references, setter) File "C:\Users\shh\miniconda3\envs\holoviz\lib\site-packages\bokeh\document\events.py", line 259, in handle_json handler(doc, event_json, references, setter) File "C:\Users\shh\miniconda3\envs\holoviz\lib\site-packages\bokeh\document\events.py", line 467, in _handle_json patched_obj.set_from_json(attr, value, models=references, setter=setter) File "C:\Users\shh\miniconda3\envs\holoviz\lib\site-packages\bokeh\core\has_props.py", line 384, in set_from_json descriptor.set_from_json(self, json, models=models, setter=setter) File "C:\Users\shh\miniconda3\envs\holoviz\lib\site-packages\bokeh\core\property\descriptors.py", line 376, in set_from_json value = self.property.prepare_value(obj, self.name, self.property.from_json(json, models=models)) File "C:\Users\shh\miniconda3\envs\holoviz\lib\site-packages\bokeh\core\property\bases.py", line 365, in prepare_value raise ValueError(f"failed to validate {obj_repr}.{name}: {error}") ValueError: failed to validate Range1d(id='11104', ...).start: expected an element of either Float, Datetime or TimeDelta, got None ``` </details>

rcravotta · October 5, 2021, 10:54pm

I tested plots generated by pd.hvplot with responsive=False and shared_axes=False. plots not in a FSC filled their container component. Plots in a FSC behaved like the original plots - stretch_width is applied only after a re-render to full screen.

There appears to be a timing or missing step issue with the plot sizing that is captured on the re-render - however, the rendering outside of full screen is always a little too large for the actual container component.

rcravotta · October 5, 2021, 10:58pm

The FSC functionality is not critical if template.save() supports embed=True because all of the data could reside in top-level components and switch based on the embedded data. I do not know the complexities of bringing that support into the templates.