Unable to run ChartJS example from custom_models.md

[LyndonAlcock]

Software Version Info

panel.__version__ = '1.5.2.post1.dev8+gef313542.d20241015'
bokeh.__version__ = 3.6.0
OS Windows
Browser firefox

The impression I get is that the custom_models.md is potentially a little out of date or does not build for all systems. while attempting to create the example custom model using ChartJS I encounterered a few errors in the chartjs.ts file that had to be changed but the bulk of the issue is when I run the final :

panel serve panel/tests/pane/test_chartjs.py --auto --show

A window is opened showing the python error:

AttributeError: unexpected attribute 'title' to ChartJS, possible attributes are align, aspect_ratio, clicks, context_menu, css_classes, css_variables, disabled, elements, flow_mode, height, height_policy, js_event_callbacks, js_property_callbacks, margin, max_height, max_width, min_height, min_width, name, object, resizable, sizing_mode, styles, stylesheets, subscribed_events, syncable, tags, visible, width or width_policy

Changes Made from the custom_models example:

for the most part I have followed the custom_models.md to the word except for these changes required to get the code to run:

panel/model/chartjs.py

from bokeh.core.properties import Int, String
from .layout import HTMLBox # changed from from 'bokeh.models import HTMLBox' as this threw error 'ImportError: cannot import name 'HTMLBox' from 'bokeh.models' (C:\Users\lyndo\OneDrive\Documents\Professional_Work\NMIS\three-panel\panel\.pixi\envs\test-312\Lib\site-packages\bokeh\models\__init__.py)'

class ChartJS(HTMLBox):
    """Custom ChartJS Model"""
    
    object = String()
    clicks = Int()

panel/model/chartjs.ts

// See https://docs.bokeh.org/en/latest/docs/reference/models/layouts.html
import { HTMLBox, HTMLBoxView } from "./layout" // changed from 'import { HTMLBox, HTMLBoxView } from "@bokehjs/models/layouts/html_box"'

// See https://docs.bokeh.org/en/latest/docs/reference/core/properties.html
import * as p from "@bokehjs/core/properties"

// The view of the Bokeh extension/ HTML element
// Here you can define how to render the model as well as react to model changes or View events.
export class ChartJSView extends HTMLBoxView {
    declare model: ChartJS // declare added
    objectElement: any // Element

    override connect_signals(): void { // override added ect ...
        super.connect_signals()

        this.on_change(this.model.properties.object, () => {
            this.render();
        })
    }

    override render(): void {
        super.render()
        this.el.innerHTML = `<button type="button">${this.model.object}</button>`
        this.objectElement = this.el.firstElementChild

        this.objectElement.addEventListener("click", () => {this.model.clicks+=1;}, false)
    }
}

export namespace ChartJS {
    export type Attrs = p.AttrsOf<Props>
    export type Props = HTMLBox.Props & {
        object: p.Property<string>,
        clicks: p.Property<number>,
    }
}

export interface ChartJS extends ChartJS.Attrs { }

// The Bokeh .ts model corresponding to the Bokeh .py model
export class ChartJS extends HTMLBox {
    declare properties: ChartJS.Props

    constructor(attrs?: Partial<ChartJS.Attrs>) {
        super(attrs)
    }

    static override __module__ = "panel.models.chartjs"

    static {
        this.prototype.default_view = ChartJSView;

        this.define<ChartJS.Props>(({Int, String}) => ({
            object: [String, "Click Me!"],
            clicks: [Int, 0],
        }))
    }
}

[MarcSkovMadsen]

There is a working example in #7408 @LyndonAlcock.

My recommendation @philippjfr would be to remove the code from the docs. Keep this PR alive and link to it in the docs. Probably make this example a real ChartJS example instead of a Button with the class name ChartJS - or alternative change it to a CustomButtonWidget example.

Having it as a PR would make it so much easier to test out and update when needed. Creating the files actually takes a long time. And now that the example also requires updating existing files its just hard to explain.

[LyndonAlcock]

Hi @MarcSkovMadsen , unfortunately this still doesn't seem to work when i try to run the command

panel serve panel/tests/pane/test_chartjs.py --auto --show

The parameters for the panel appear to show correctly but the actual click me button does not show while the console says bokeh items are rendered successfully:

What environment are you able to run this in?

also i had to make this change to chartjs.py to get it to run on my system as it was showing import errors:

from __future__ import annotations

from typing import (
    TYPE_CHECKING, ClassVar, Mapping, Optional,
)

# ...

if TYPE_CHECKING:
    from bokeh.document import Document
    from bokeh.model import Model
from pyviz_comms import Comm, JupyterComm

[MarcSkovMadsen]

Did you

• checkout the branch
• run panel build panel to build the javascript
• serve the example app?

[LyndonAlcock]

yes but it still didn't work but I had better close the issue as I am no longer as I am no longer working on implementing with the Bokeh - Typescript approach