Docs issues to be fixed before 1.5.0

[MarcSkovMadsen]

I will start reviewing the docs via https://holoviz-dev.github.io/panel.

I will use this issue to list things I can't or should not fix.

I will fix a lot of other things in #7127.

Todo (not for me)

The issues below are explained in more depth in comments below!

• 0. Create a 1.5.0 Change Log to make it easier to test changed docs. Done in Add CHANGELOG for 1.5.0 #7136
• 1. Move Custom_Components to bottom of index
• 2. Add Missing Images to Component Gallery.
• 3. Review and merge PRs
  • New user feedback #7043
  • Fix broken docs links #7279
  • Add pycafe deployment guide #7183
  • Implement PyComponent #7051
  • Improve ESM layout how-to guide #7088
  • Document esm panes #7029
• 4. Add missing logo_horizontal_light_theme.png
• 5. Navigate to Custom Components when clicking Custom_Components.
• 6. Make Pyodide code blocks work (importShim is not defined, unsupported in polyfill mode)
• 7. Consider enabling pn.custom.AnyWidgetComponent usage
• 8. Document how to not sync JSComponent parameters
• 9. Support css sharing between AnyWidget and AnyWidgetComponent
• 10. Update AnyWidget efficiency comment.
• 11. Review https://holoviz-dev.github.io/panel/how_to/migrate/anywidget/index.html
• 12. Fix document did not publish any contents
• 13. Add missing styles to Material UI example
• 14. Fix errors and exceptions in docs build logs.
• 15. DiscretePlayer broken
• 16. Finalize Chat layout change
• 17. Add missing FileDropper thumbnail
• 18. Enable Marc to create PY.CAFE Panel user and migrate examples to that user
• 19. Add missing Placeholder thumbnail.
• 20. Deprecate fastapi embed guide
• 21. Update custom components explanation

[MarcSkovMadsen]

1. Move Custom_Components to bottom of index

I believe Custom Components is the last thing your will be searching for as a new, basic or intermediate Panel user.

[MarcSkovMadsen]

2. Add Missing Images to Component Gallery.

You can add the missing ChatStep image while you are at it.

[MarcSkovMadsen]

4. Add missing logo_horizontal_light_theme.png

This is missing from other pages too

[MarcSkovMadsen]

5. Navigate to Custom Components when clicking Custom_Components.

When I click the Custom_Components link I don't navigate to it. Instead the Component Gallery reloads.

[MarcSkovMadsen]

6. Make Pyodide code blocks work (importShim is not defined, unsupported in polyfill mode)

When I check https://holoviz-dev.github.io/panel/reference/custom_components/AnyWidgetComponent.html, I see

[MarcSkovMadsen]

7. Consider enabling pn.custom.AnyWidgetComponent usage

I was trying to simplify and align the first AnyWidgetComponent example with the AnyWidget docs. But I cannot fully as

import panel as pn
import param

pn.extension()

class CounterButton(pn.custom.AnyWidgetComponent):

Yields

AttributeError: module 'panel' has no attribute 'custom'

Traceback (most recent call last):
  File "/home/jovyan/repos/private/panel/panel/io/handlers.py", line 405, in run
    exec(self._code, module.__dict__)
  File "/home/jovyan/repos/private/panel/script.py", line 6, in <module>
    class CounterButton(pn.custom.AnyWidgetComponent):
                        ^^^^^^^^^
AttributeError: module 'panel' has no attribute 'custom'

I'm used to always using the pn namespace and not seperately importing something. So I feel this is a change in the Panel way of working.

[MarcSkovMadsen]

8. Document how to not sync JSComponent parameters

With AnyWidget you have to actively sync paramter values between python and Javascript.

With Panel this is automatic. And we have no documented way to turn this of. We have seen use cases with ReactiveHTML where this is needed. The way to do it with ReactiveHTML is to set precedence<0. But this is a hack and we have not documented how to do this for JSComponent and similar.

Please find solution and document.

Would it be an idea to support a _sync_parameters or _dont_sync_parameters list on the class? Or a more general _esm_parameter_config attribute?

[MarcSkovMadsen]

9. Support css sharing between AnyWidget and AnyWidgetComponent

Just as sharing Javascript is a big benefit, It would be the same for css. But here the API is not the same:

• AnyWidget adds a class name to the el. This is used for css styling.

The consequence is that its harder to co-develop and share widgets.

The developer can do it him/ her self though: el.classList.add("counter-widget");

import param
import panel as pn

from panel.custom import AnyWidgetComponent

pn.extension()

class CounterWidget(AnyWidgetComponent):
    _esm = """
    function render({ model, el }) {
      el.classList.add("counter-widget");
      let count = () => model.get("value");
      let btn = document.createElement("button");
      btn.innerHTML = `count is ${count()}`;
      btn.addEventListener("click", () => {
        model.set("value", count() + 1);
        model.save_changes();
      });
      model.on("change:value", () => {
        btn.innerHTML = `count is ${count()}`;
      });
      el.appendChild(btn);
    }
    export default { render };
    """
    _stylesheets = [
        """
        .counter-widget button { color: white; font-size: 1.75rem; background-color: #ea580c; padding: 0.5rem 1rem; border: none; border-radius: 0.25rem; }
        .counter-widget button:hover { background-color: #9a3412; }
        """
    ]
    value = param.Integer()

CounterWidget().servable()

For now I've added the comment below to the docs

[MarcSkovMadsen]

10. Update AnyWidget efficiency comment.

https://holoviz-dev.github.io/panel/how_to/migrate/anywidget/index.html

[MarcSkovMadsen]

11. Review https://holoviz-dev.github.io/panel/how_to/migrate/anywidget/index.html

Many things has changed since created. Please review the content such that its correct.

Please also consider the questions below

• Do we still want this guide?
• Should it be changed to a AnyWidget -> AnyWidgetComponent migration guide?