Awesome Panel Designer

[Marc]

I’m happy and proud to introduce the Awesome Panel Designer as an idea and a POC.

With this post I hope will you be inspired about the potential and the power of Panel. It’s Awesome.

What you see below is me developing a new Panel component on the left

I have have the PanelDesigner on the right to help me explore, develop and test efficiently from my favorite editor (VS code).

I can change my code and it updates instantaneously (by the click of a button for now). I can also use the Parameter explorer on the right to test what happens when changing the parameters of the component.

Please note the update is much, much faster and flexible than the normal Bokeh/ Tornado server reload providing much faster feedback.

My Pain(s)

I’m an experienced data scientist developer.

I want to be able to do rapid exploration and visualization like you can do in a Jupyter Notebook or in BI tools like Tableau or Power BI.

But I also want to develop robust and mature code efficiently using a lot of best practices from Software Development like

• An awesome editor like VS Code
  • Integrated debugging.
  • code navigation
  • context help etc.
• Automated testing using Pytest
  • Test Driven Development TDD with refactoring
• Code Quality using Black, Pylint and MyPy
• Documentation with Docstrings
• Heavy collaboration via Git
• The ability to break down components into smaller components.
• Develop reactive applications where I can subscribe to services like in modern front end frameworks. Panel and Param is perfect for that.
• Develop streaming applications. Panel. HoloViews and Param is perfect for that.

I cannot do all of that today. How do I combine the best from all?

What is holding me back?

SLOW FEEDBACK CYCLE

I can’t just update a code file and see my data science application update immediately.

• In my editor or terminal I have to wait for Bokeh server to reload which takes +10 secs.
• I also have to reload data from file or database which can take a long time as well. Or alternative save sample datasets locally.
• In Jupyter Notebook I can importlib.reload or %run my code from code files. But it is tedius to setup, use and maintain I belive.
• In BI Tools I can drag and drop components, browse parameters and update to see changes. I cant do that efficiently from an editor today. But using BI tools is not what I believe in for other than rapid prototyping. I believe in code and the power of Python for building long term, powerfull and flexible solutions.

Slow to navigate across multiple programs

VS Code -> Jupyter Notebook -> Browser and back. I want to stay in my editor primarely.

Slow to browse through and update the parameters of my components

When running from my editor or the terminal its not that easy to browse through the parameters of my components (and sub components) and update them.

Cannot efficiently test what happens when changing parameters

Not possible in editor without doing a breakpoint and updating.

Cannot experiment efficiently with layout and styles

Sometimes you need a bit of styling via CSS I want to have a CSS file update it and see the changes. I did not have access to that. Or you need to change the layout of your app. Today that is simply too slow for me du to the +10secs reload time for the Bokeh/ Tornado server.

Notebook Experience is not efficient for me - not even inside editor

I simply don’t find the notebook experience efficient even though a lot of work has been done to bring it to my favorite editor. I simply don’t end up with production ready code from it.

But I actually strongly believe in Jupyter Notebooks for a lot of other people like analysts, engineers, traders and scientists. Thats one reason why I look to Panel and not Streamlit or Dash for example. Panel works great in Notebooks while Streamlit and Dash do not.

Solution

Take the best from all worlds and combine it into the PanelDesigner.

• A live python kernel with data extracted and parameters defined on start up.
• Very, very fast reloads after code changes.
• Work in favorite Editor and with code files
• WYSIWYG in browser.
• Code files for css and java if needed.
• Parameter exploration via built in pn.Param.

I can run the PanelDesigner via .show, .serve and .servable providing a lot of flexibility. Can be run and debugged from terminal but most important directly from my editor with integrated debugging.

Ideas for improvement

• Add in watchdog to automatically reload the component and css when a file is changed.
• Add in the ability to reload your start up data and parameters.
• Add in the Material Design Template app that I’ve been experimenting with to easily change the color and other styles with a few clicks or selections.
• Implement more clever module reloading. Right now I’m just reload the one file containing the component. But it works great.
• Support working with a collection of components defined via a configuration dictionary.
  • Support reloading the configuration dynamically.
• Improve parameter exploration via pn.Param.
• Make it easy to transfer changes from Parameters explorer back to code. Maybe by providing a dictionary of changes or something.
• Share the Designer via the awesome-panel python package.

Please share your thoughts and ideas

• Am I reinventing the wheel?
• What is holding you back today when working with Panel?
• Could the PanelDesigner be something for you?
• How could it be improved?
• What works great in other stacks? Could we get some inspiration?

Example code

See

• Implementation: https://github.com/MarcSkovMadsen/awesome-panel/tree/master/package/awesome_panel/designer
• Test Example Shown: https://github.com/MarcSkovMadsen/awesome-panel/blob/master/package/tests/designer/test_designer_show.py

FYI. @philippjfr, @maximlt, @ceball, @xavArtley, @pybokeh

[Marc]

I’ve added support for multiple components.

So in in the designer on the right you can select between components you have configured on start up. Thus you can use this to keep a library of components that you want to explore, maintain or refine over time.

As you can see that are minor styling and layout issues that I will have to fix.

[philippjfr]

Very neat. Ideally we could make the reload of the server a lot more efficient and thereby speed up the existing --dev mode.

[maximlt]

Wow @Marc that looks awesome ! I haven’t given it a try yet (it’d be nice if you could provide some guidance as to how to use it) but for sure this kind of work goes in the right direction, i.e. building the tooling around panel so that it’s easier to use and more accessible. The fast reload feature is great, I also found that +10s to reload with --dev wasn’t so fun.

[Marc]

Hi @philippjfr. Regarding the reload of the server there is a feature request in the Bokeh Github that I made half a year ago. https://github.com/bokeh/bokeh/issues/9501.

Together with the faster reload in --dev mode the browser window should be reloaded, not open in a new tab as I do today. That is clumsy and inefficient.

---

One problem faster reload of the server does not solve is that it would actually reload all my code and especially my data and fixtures. For some use cases that might take a long time. For example if I sit together with a user we would like the application to contain as much of the real data as possible. This might take a long time to load initially. The Awesome Panel Designer enables loading this once and for all and then its just the small code changes that are reloaded instantly. That enables testing out a lot of ideas quickly with the correct data. That is also better than what for example Tableau can provide.

The Awesome Panel Designer enables working with a “live kernel” like in a Jupyter Notebook but just as an integration between editor and panel server where the reload is built in and not something you have to custom develop for each notebook you setup via importlib.reload or %run magic.

And its not like in the VS Code notebook integration that you have to “transfer” your code to the notebook. I find that a bit tedious. And what you do there is not really “repeatable”.

And here you have a parameter explorer built in.

And a separate, real browser window for your app.

[Marc]

Hi @maximlt

I hope to be releasing it as part of the awesome-panel python package soon.

You can use it as described below (may change though)

---

The Awesome Panel Designer provides an integrated experience between editor/ IDE and the

Panel Server to enable a quick experiment+develop+test cycle.

Use it from your code or test file.

Args:

reload_services (List[ReloadService]): A list of ReloadServices one for each component

or app you want access to in the designer.

Example

---

The below example can be run via python, panel serve, python -m panel serve --dev --show,

pytest or via the integrated run or debug in your editor which provides a lot of flexibility.

import pathlib

import panel as pn

import param

from awesome_panel.designer import Designer, ReloadService, components

from awesome_panel.express import Card

from awesome_panel.express.assets import BOOTSTRAP_PANEL_EXPRESS_CSS

FIXTURES = pathlib.Path(__file__).parent / "fixtures"

COMPONENT_CSS = FIXTURES / "component.css"

COMPONENT_JS = FIXTURES / "component.js"

COMPONENT2_JS = FIXTURES / "component2.js"

TITLE_COMPONENT = ReloadService(

    component=components.TitleComponent, css_path=COMPONENT_CSS, js_path=COMPONENT_JS,

)

EMPTY_COMPONENT = ReloadService(

    component=components.EmptyComponent, css_path=COMPONENT_CSS, js_path=COMPONENT2_JS,

)

CENTERED_COMPONENT = ReloadService(

    component=components.CenteredComponent,

    css_path=COMPONENT_CSS,

    js_path=COMPONENT_JS,

    component_parameters={"component": components.TitleComponent()},

)

STOPPED_COMPONENT = ReloadService(

    component=components.StoppedComponent, css_path=COMPONENT_CSS, js_path=COMPONENT_JS,

)

CARD_COMPONENT = ReloadService(

    component=Card,

    css_path=BOOTSTRAP_PANEL_EXPRESS_CSS,

    js_path=COMPONENT_JS,

    component_parameters={

        "header": "Test Card",

        "body": pn.pane.Markdown("Awesome Panel " * 50),

        "collapsable": True,

    },

)

RELOAD_SERVICES = [

    TITLE_COMPONENT,

    EMPTY_COMPONENT,

    CENTERED_COMPONENT,

    STOPPED_COMPONENT,

    CARD_COMPONENT,

]

def test_designer():

    return Designer(reload_services=RELOAD_SERVICES).show()

if __name__.startswith("__main__") or __name__.startswith("bokeh"):

    test_designer()

[johnzzzzzzz]

I am intrigued.
Could Awesome Panel Designer work for other IDE’s? specifically Pycharm.
Pycharm has a jupyter notebook mode, but it does support bokeh.

[Marc]

Sure. There is nothing VS Code specific things in there.

Its just about running and reloading python files.

One caveat though.

Right now the components supported are either on the form

class MyComponent(pn.Column):

or

class MyComponent(param.Parameterized):
    view = param.ClassSelector(class_=pn.Column)

where pn.Column could be exchanged with any other panel layout, pane or widget.

But I will also support any function that returns a panel layout, pane or widget in the future. (Takes a few lines of code extra).

[Marc]

If you want to try it out you can.

I’ve just released an updated version at https://pypi.org/project/awesome-panel/20200511.1/

But remember. Right now this might be a rough ride. It’s a POC right now. I will be using it for my personal work though and happy to improve it if it can help you as well.

[Marc]

Lessons learned from day one:

I improved the error handling to show nicely in both the browser and console.

There is an updated version of the package on PyPi.

I also got a little bit of time trying it out creating a mockup for a new dashboard. Worked really, really well. So nice to be able to instantly try out changes and see+feel them.

[Jhsmit]

Neat! This will be very useful if I’m going to change the layout and formatting of my app. That usually takes a lot of changing and reloading the server and going back and forth. This might save me a lot of time

[Marc]

Exactly @Jhsmit. When you try it out please let me/ us know of your impressions.

If you have bugs or features to report or request then feel free to do that at https://github.com/marcskovmadsen/awesome-panel

[Marc]

I’ve added a lot of improvements and moved the Awesome Panel Designer to the awesome-panel-extensions package. Use it via

from awesome_panel_extensions.developer_tools.designer import Designer

Checkout the guide here

https://awesome-panel.readthedocs.io/en/latest/packages/awesome-panel-extensions/designer.html

And please share my tweet if you think this is awesome.

Marc Skov Madsen (MarcSkovMadsen)