Clientside callback with pattern matching

Dash Python
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