Personal opinions about best practices for Panel + HoloViews

ahuang11 · February 23, 2024, 4:40pm

I have not; are you able to reproduce with MRVE? Also maybe check browser for any errors

fmfreeze · February 23, 2024, 5:46pm

It works in Firefox, but not in Chrome nor Edge.

What is MRVE?

ahuang11 · February 23, 2024, 5:57pm

Minimal reproducible verifiable example (I guess just MRE)

fmfreeze · February 23, 2024, 6:52pm

Oh, sure

I ran the following code in python3.10, panel 1.3.8 and geoviews 1.11.1:

import panel as pn
from geoviews import tile_sources


class MinimalModalApp(pn.viewable.Viewer):
    def __init__(self):
        self.button = pn.widgets.Button(name="open modal")
        self.button.on_click(self.open_modal)

        self.modal = pn.Column(
            pn.pane.Markdown("### Worldcard:"),
            self.get_worldcard(),
            align="center")

        self.template = pn.template.FastListTemplate(
            main=[self.button],
            modal=[self.modal],
            title="MVPE - Worldmap not displayed in modal in Chromium based browsers (Chrome/Edge, Firefox works)"
        )

    def get_worldcard(self):
        return tile_sources.tile_sources["CartoEco"].opts(width=800, height=400)

    def open_modal(self, event):
        self.template.open_modal()

    def __panel__(self):
        return self.template


if __name__ == "__main__":
    app = MinimalModalApp()
    pn.serve(app, port=5006)

ahuang11 · February 23, 2024, 8:13pm

I took a quick look:

Something with xlim/ylim I think, but I couldn’t get it working yet

import panel as pn
from geoviews import tile_sources
import cartopy.crs as ccrs
import geoviews as gv


class MinimalModalApp(pn.viewable.Viewer):
    def __init__(self):
        self.button = pn.widgets.Button(name="open modal")
        self.button.on_click(self.open_modal)

        modal = pn.pane.HoloViews(self.get_worldcard())
        self.modal = pn.Column(
            pn.pane.Markdown("### Worldcard:"),
            modal,
            align="center")

        self.template = pn.template.FastListTemplate(
            main=[self.button],
            modal=[self.modal],
            title="MVPE - Worldmap not displayed in modal in Chromium based browsers (Chrome/Edge, Firefox works)"
        )

    def get_worldcard(self):
        return gv.Points((0, 0), crs=ccrs.GOOGLE_MERCATOR).opts(global_extent=True) * tile_sources.CartoDark()

    def open_modal(self, event):
        self.template.open_modal()

    def __panel__(self):
        return self.template


MinimalModalApp().servable()

ahuang11 · February 23, 2024, 9:47pm

It seems like it’s not just tile sources, but generic plots

import panel as pn
from geoviews import tile_sources
import cartopy.crs as ccrs
import geoviews as gv


class MinimalModalApp(pn.viewable.Viewer):
    def __init__(self):
        self.button = pn.widgets.Button(name="open modal")
        self.button.on_click(self.open_modal)

        self._map = gv.Points((0, 0)).opts(xlim=(-90, 90), ylim=(-90, 90), width=500, height=500)
        self.modal = pn.Column(
            pn.pane.Markdown("### Worldcard:"),
            pn.pane.HoloViews(self._map, width=800, height=400),
            align="center")

        self.template = pn.template.FastListTemplate(
            main=[self.button, self._map.clone()],
            modal=[self.modal],
            title="MVPE - Worldmap not displayed in modal in Chromium based browsers (Chrome/Edge, Firefox works)"
        )

    def open_modal(self, event):
        self.template.open_modal()

    def __panel__(self):
        return self.template


MinimalModalApp().servable()

ahuang11 · February 27, 2024, 7:25pm

Use persist() or load() if data fits in memory to prevent re-triggering computations.

fmfreeze · February 29, 2024, 7:48pm

I don’t understand. Which object should be persist() or load() be applied on?

ahuang11 · February 29, 2024, 7:50pm

See this for context.

github.com/holoviz/holoviews

Unrelated updates in overlay with dmap triggers computation of another dmap

opened 09:19PM - 27 Feb 24 UTC

ahuang11

type: enhancement

```python import xarray as xr import panel as pn import dask.array as da p…n.extension(throttled=True) import holoviews as hv from holoviews.operation.datashader import rasterize from holoviews.streams import RangeXY hv.extension("bokeh") DATA_ARRAY = "10000frames" # create fake dask array data = da.random.random((100000, 100, 100), chunks=(100, 100, 100)) data = xr.DataArray(data, dims=["frame", "height", "width"]) FRAMES_PER_SECOND = 30 FRAMES = data.coords["frame"].values def plot_image(value): return hv.Image(data.sel(frame=value), kdims=["width", "height"]).opts( cmap="Viridis", frame_height=400, frame_width=400, colorbar=False, ) # Create a video player widget video_player = pn.widgets.Player( length=len(data.coords["frame"]), interval=1000 // FRAMES_PER_SECOND, # ms value=int(FRAMES.min()), max_width=400, max_height=90, loop_policy="loop", sizing_mode="stretch_width", ) # Create the main plot main_plot = hv.DynamicMap( plot_image, kdims=["value"], streams=[video_player.param.value] ) # frame indicator lines on side plots line_opts = dict(color="red", alpha=0.6, line_width=3) dmap_vline = hv.DynamicMap( pn.bind(lambda value: hv.VLine(value), video_player) ).opts( **line_opts ) # height side view right_data = data.mean(["width"]) right_plot = rasterize( hv.Image(right_data, kdims=["frame", "height"]).opts( cmap="Viridis", frame_height=400, frame_width=200, colorbar=False, title="_", ), streams=[RangeXY()], ) sim_app = pn.Column( video_player, pn.Row(main_plot, right_plot * dmap_vline), ) sim_app ``` If this is loaded, things move much quicker ```python right_data = data.mean(["width"]).load() ```

fmfreeze · February 29, 2024, 8:22pm

Sorry, but I still don’t see the relation to the modal-browser issue.
Do you think because of endless dmap retriggering the object is not rendered in chrome/edge?

ahuang11 · February 29, 2024, 9:14pm

Oh sorry, I’m just using this thread to take notes for an eventual best practices guide; not as a reply to your question.

StuckDuckF · March 4, 2024, 2:26pm

I would love to see how you create more complicated Holoviews objects from scratch and even more interested in how you set options. I have been struggling setting opts such as line_color or other more niche options while overlaying geofeatures and other plots (Say FilledContours, WindBarbs and coastline). It gets even trickier if you try and change them later as now it is an Overlay.

ahuang11 · March 19, 2024, 10:17pm

I have been struggling setting opts such as line_color or other more niche options while overlaying geofeatures and other plots

You can target specific elements: Overlay([hv_obj1, hv_obj2]).opts("Curve", line_color="red")

Collecting more best practices things here:

Generally, try to replace HoloViews usage with hvPlot. At a certain point of complexity, such as with the use of ‘.select’, it might be better to stick with HoloViews.
Almost always, try to replace the use of datashade with rasterize (read this page). Essentially, rasterize allows Bokeh to handle the colormapping instead of Datashader.
Remove all pn.interact usage
Try to avoid .param.watch() usage. This is pretty low-level and verbose approach Prefer using pn.bind(). Read this page for explanation.
For apps built using a class approach, when they create a view() method and call it directly, update the class by inheriting from pn.viewable.Viewer and replace view() by __panel__(). Here is an example.

ahuang11 · April 11, 2024, 6:10pm

Revising:

set loading=True/False inside a try/finally block 6 so that widgets are disabled while loading, and upon completion/something goes wrong, the widgets are always reactivated.

Philipp mentioned we could simply do with param.update

import time
import panel as pn

pn.extension()

layout = pn.WidgetBox(pn.widgets.TextInput(), pn.widgets.Button(name="Click me!"))
layout

with layout.param.update(loading=True):
    time.sleep(2)
    layout[0].value = "Loaded!"

ahuang11 · April 17, 2024, 5:00pm

From Marc

ahuang11 · April 17, 2024, 8:37pm

Using flexbox instead of column / row

ahuang11 · May 6, 2024, 2:21pm

Adding another to the list: toggling axiswise, framewise, shared_axes,

ahuang11 · May 9, 2024, 8:29pm

Started migrating over here; let me know if you have feedback!

github.com/holoviz/panel

Start best practices notebook

holoviz:main ← holoviz:add_best_practices

opened 08:25PM - 09 May 24 UTC

ahuang11

+554 -0

Starts migrating the collection from https://discourse.holoviz.org/t/personal-op…inions-about-best-practices-for-panel-holoviews/6789/27 to the official docs page, with examples Thus far, I think it can be broken down into two sections: Dev Experience (or I was also thinking 'Nice to knows') and User Experience, and thus two separate notebooks. Feedback appreciated on how to proceed (and what's missing; in particular, how to add it to the index).

ahuang11 · May 16, 2024, 6:59pm

Widgets should not be used like param

github.com/holoviz/param

Parameterized objects (e.g. Panel Widgets) as class attributes

opened 04:26AM - 14 Sep 23 UTC

jbednar

type-feature

Param was designed to support nested Parameterized objects, where the value of a… Parameter is a Parameterized that has its own Parameters: ```python import param, panel as pn class P(param.Parameterized): x = param.Integer(5) y = param.ClassSelector(param.Parameterized, default=pn.widgets.IntSlider(value=7)) @param.depends("y.value", watch=True) def fn(self): self.x = self.y.value p = P() p.y.value=32 p.x # 32 ``` Here the value of `y` is a Parameterized that happens to be a [HoloViz Panel](https://panel.holoviz.org) widget that has a Parameter named `value`, and you can see that Param code can depend on that widget's Parameters. However, several Panel core developers have noticed Panel users writing classes like: ```python import param, panel as pn class P(param.Parameterized): x = param.Integer(5) y = pn.widgets.IntSlider(value=7) @param.depends("y.value", watch=True) def fn(self): self.x = self.y.value p = P() p.y.value=32 p.x # 32 ``` This code was not anticipated when writing Param but it happens to work in this case, because the dependency code does not actually check that `y` was defined as a Parameter before fetching the `value` parameter from that object. And the code makes sense at a semantic level, because both a `param.Integer` and a `pn.widgets.IntSlider` are objects that have an underlying integer value, so it would seem reasonable to be able to use a widget the same way one uses a Parameter. However, because this case was never intended to be supported, a widget used as if it were a Parameter does not actually work like a Parameter in all cases. In particular, the Parameter `x` will be instantiated into an object, giving the object an independent copy of the value for `x`, while the widget `y` is a normal Python class attribute, and will thus not be instantiated. So things will seem to be working, but if the class P is ever instantiated more than once, `x` will be independent per object, and `y` will be shared across all objects, leading to untold subtle bugs. A user can currently avoid this issue by moving the widget definition out of the class and into the constructor: ```python import param, panel as pn class P(param.Parameterized): x = param.Integer(5) def __init__(self, **params): super().__init__(**params) self.y = pn.widgets.IntSlider(value=7) @param.depends("y.value", watch=True) def fn(self): self.x = self.y.value p = P() p.y.value=21 p.x # 5 # Why is this not 32? ``` But that's a lot wordier, fails to declare the Parameter value in the class's manifest of Parameters, and in this case doesn't work (maybe because of https://github.com/holoviz/param/issues/829?). Because people seem to fall into the trap of putting widgets at the class level quite a bit, I think we should do something about it. The options I can think of are: 1. Warn people not to do this! If we find a Parameterized as a class attribute, and certainly if we find one being depended on, warn that this attribute will not behave like a true Parameter and will not be instantiated per object, and point people to an implementation like the first one above. 2. If we find a Parameterized `q` as a class attribute of a Parameterized class, treat it as if there were a Parameter declared like `param.ClassSelector(param.Parameterized, default=q)`. We probably wouldn't actually create such a Parameter, but we'd instantiate a copy of the Parameterized into each object as if we had. I.e., just accept that people will do this, and treat it as legal. In practice I'd guess it's only Panel users who expect such usage to work, but the implementation would be for any Parameterized, and maybe there are other similar applications for this approach. 3. Under the theory that people are treating Panel Widgets and Parameters as interchangeable, one could imagine doing even more magic, so that if we find a Panel Widget (or e.g. use duck typing and find a Parameterized with a `value` Parameter), treat it as if they had actually declared that Parameter in this class (`y=param.Integer(7)` here, where `y` becomes a reference to the `value` parameter of this widget). It's hard to pin down how that could work, and it would be Panel-specific deep magic, so it would be hard to convince me that it's a good idea, but I wanted to list the idea concretely just so that we can be sure that what people seem to be assuming would work is really not something we should ever be supporting. Personally, I vote against 3, and by default I'd vote for 1 because 2 doesn't solve a problem I have. But if 2 makes sense to other people and would support new users better, I don't think it would be difficult to implement, and I don't think it would affect code that's currently working properly. Any thoughts from others?

ahuang11 · July 16, 2024, 6:22pm

I finally had a chance to update the PR panel/examples/best_practices.ipynb at 819c891d75a08bc52113f528bca2a24602e5ef0c · holoviz/panel · GitHub

If you have any thoughts, happy to hear them here Start best practices notebook by ahuang11 · Pull Request #6819 · holoviz/panel · GitHub