Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Clientside callback with pattern matching

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

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!)

1 Like

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

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

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.