Clientside callback with pattern matching

Dash Python
1

Is it possible to use pattern matching with client side callbacks?
If yes, how? I’ve been failing in my attempts so far.
If no, when? =)

1 Like
2

Not an answer to your question but could still be useful.
If you have an id that is a dict instead of a string, a callback that is taking the id as input will not work as it will receive an object (instead of a string) in the callback. You can convert the object you receive to a string with something like this in your javascript code:

        if (!(typeof id === 'string' || id instanceof String)) {
            id = JSON.stringify(id, Object.keys(id).sort());
        };

For instance, in the example Drag and drop cards, changing the js code to

if (!window.dash_clientside) {
    window.dash_clientside = {};
}
window.dash_clientside.clientside = {
    make_draggable: function(id) {
        // convert id to string if dict
        if (!(typeof id === 'string' || id instanceof String)) {
            id = JSON.stringify(id, Object.keys(id).sort());
        };
        setTimeout(function() {
            var el = document.getElementById(id)
            window.console.log(el)
            dragula([el])
        }, 1)
        return window.dash_clientside.no_update
    }
}

will at least make it works if the id in Dash is changed to a dict structure (e.g. id={"class":"dragger","id":"drag_container"} instead of id="drag_container".

Not sure yet if it helps in your case (as it is obviously not the full pattern matching story!)

2 Likes
3

hi @sdementen, thanks for your answer! I had already implemented a solution exactly the way you described, it seems to work fine.

4

Ok, I have filled the issue https://github.com/plotly/plotly.py/issues/2910

5

I also have an application that could be simplified with the implementation of pattern matching on clientside callbacks. Currently I have to create dummy hidden inputs to prevent errors and manage their visibility and location manually.