How to implement custom bokehjs extension that consumes a source, like image_rgba does?

Question

I'm creating a custom extension for bokeh. It's all working and the example in the documentation was useful. However, I'm trying to mirror what image_rgba does, namely with images you can do:

figure.image_rgba(
  image="image_path_in_source", 
  source=ColumnDataSource(dict(image_path_in_source=[np.array(...)]))
)
# or
figure.image_rgba(image=[np.array(...)])

I looked into the source code to recreate the official way to implement this, but I'm getting an error. Let me explain in code:

My custom model defines:

CustomModel.define({
    source: [p.Instance],
    dx: [p.NumberSpec],
    dy: [p.NumberSpec]
});

And the plan is to use the dataspec construct when source changes:

const data = this.model.materialize_dataspecs(source);

But when I send a string for dx from python side, it complains:

Number property 'dx' given invalid value: "path_to_dx"
    at e.validate (properties.js:134)
    at e.t._init (properties.js:112)
    at e.t.update (properties.js:46)

Which is obviously true since I said it would be a NumberSpec and I sent a string. But how do I do this correctly?

Answer 1

Ah, I forgot to change the python model's property to NumberSpec too:

class CustomModel(LayoutDOM):
    __implementation__ = '...'

    source = Instance(ColumnDataSource)
    dx = NumberSpec()
    dy = NumberSpec()