Editable Tables examples not working

[KeithWM]

The examples that include adding rows or columns in https://dash.plotly.com/julia/datatable/editable do not appear to work when copy-pasted locally.

The error I see is

 Error: error handling request
│   exception =
│    MethodError: no method matching resize!(::JSON3.Array{JSON3.Object, Base.CodeUnits{UInt8, String}, SubArray{UInt64, 1, Vector{UInt64}, Tuple{UnitRange{Int64}}, true}}, ::Int64)
│    
│    Closest candidates are:
│      resize!(::SentinelArrays.MissingVector, ::Any)
│       @ SentinelArrays ~/.julia/packages/SentinelArrays/V85ev/src/missingvector.jl:29
│      resize!(::BitVector, ::Integer)
│       @ Base bitarray.jl:814
│      resize!(::DataFrames.DataFrame, ::Integer)
│       @ DataFrames ~/.julia/packages/DataFrames/58MUJ/src/dataframe/dataframe.jl:1073
│      ...
│    
│    Stacktrace:
│     [1] _append!(a::JSON3.Array{JSON3.Object, Base.CodeUnits{UInt8, String}, SubArray{UInt64, 1, Vector{UInt64}, Tuple{UnitRange{Int64}}, true}}, ::Base.HasLength, iter::Tuple{Dict{String, String}})
│       @ Base ./array.jl:1196
│     [2] append!(a::JSON3.Array{JSON3.Object, Base.CodeUnits{UInt8, String}, SubArray{UInt64, 1, Vector{UInt64}, Tuple{UnitRange{Int64}}, true}}, iter::Tuple{Dict{String, String}})
│       @ Base ./array.jl:1187
│     [3] push!(a::JSON3.Array{JSON3.Object, Base.CodeUnits{UInt8, String}, SubArray{UInt64, 1, Vector{UInt64}, Tuple{UnitRange{Int64}}, true}}, iter::Dict{String, String})
│       @ Base ./array.jl:1188
│     [4] (::DashForest.var"#4#13")(n_clicks::Int64, rows::JSON3.Array{JSON3.Object, Base.CodeUnits{UInt8, String}, SubArray{UInt64, 1, Vector{UInt64}, Tuple{UnitRange{Int64}}, true}}, columns::JSON3.Array{JSON3.Object, Base.CodeUnits{UInt8, String}, SubArray{UInt64, 1, Vector{UInt64}, Tuple{UnitRange{Int64}}, true}})
│       @ DashForest ~/Noteneters/DashForest/src/Application.jl:44
└ @ Dash ~/.julia/packages/Dash/TRtCf/src/handler/make_handler.jl:112

I believe the line push!(rows, Dict(c.id => "" for c in columns)) may be at fault for trying to push! a dictionary onto a JSON3 object, which I presume worked previously, but is no longer supported. I would delve deeper into the issue, but I find it hard to debug the issue as I do not know how to create the objects inside the callback! function from the REPL.

[etpinard]

Bug confirmed. Thanks!

[etpinard]

This is related to Dash.jl's switch to JSON3.

Callbacks should now expect JSON3.Array and JSON3.Object as arguments, which are immutable.

So, to append value a value to a list (like in Editable Table example), we must use a standard Julia Vector type instead.

I would recommand rewriting the problematic callback as:

callback!(app,
    Output("editing-columns", "columns"),
    Input("editing-columns-button", "n_clicks"),
    State("editing-columns-name", "value"),
    State("editing-columns", "columns")
)  do n_clicks, value, existing_columns
    return if n_clicks > 0 && value != ""
        new_column = Dict(
            "id" =>  value, "name" =>  value,
            "renamable" =>  true, "deletable" =>  true
        )
        vcat(Dict.(existing_columns), new_column)
    else
        existing_columns
    end
end

---

Unfortunately, I do not have acces to the Plotly documentation source code, so someone at Plotly will need to make the update.

Thanks again @KeithWM for bringing this up!

[KeithWM]

Thanks for confirming the bug and pointing me towards a solution. I'm trying to work out how to do this for adding a new row, but I'm having a hard time running the code in such a way that I can quickly retrigger the behaviour. What is the recommended way to do this? Is there some way to for the callback to be initiated from the REPL without having to manually refresh the served HTML page and click the button?

[KeithWM]

This has done the trick:

    callback!(app,
        Output("adding-rows-table", "data"),
        Input("adding-rows-button", "n_clicks"),
        State("adding-rows-table", "data"),
        State("adding-rows-table", "columns")
    ) do n_clicks, existing_data, columns
        return if n_clicks > 0
            new_row = Dict(c.id =>  "" for c in columns)
            return vcat(Dict.(existing_data), new_row)
        else
            return existing_data
        end
    end

But I would still appreciate some help in improving my way-of-working. :-)

[etpinard]

Maybe try something like:

# main.jl

function addrow_callback(n_clicks, existing_data, columns)
    return if n_clicks > 0
        new_row = Dict(c.id =>  "" for c in columns)
        return vcat(Dict.(existing_data), new_row)
    else
        return existing_data
    end
end

callback!(addrow_callback, app,
  Output("adding-rows-table", "data"),
  Input("adding-rows-button", "n_clicks"),
  State("adding-rows-table", "data"),
  State("adding-rows-table", "columns"))

and then in the REPL or in a test file

import JSON3

json3ify(x) = JSON3.read(JSON3.write(x))

dash_callback_call(cb, args...) = cb(json3ify.(args)...)

dash_callback_call(addrow_callback, 1, [#= ... =#], [#= ... =#])

[KeithWM]

Thanks. I think that works (after changing the final call to dash_callback_call(addrow_callback, 1, [#= ... =#], [#= ... =#]), with a comma instead of the first open paren.) I can also obtain the proper arguments via app.layout.children[1].data.

[etpinard]

(after changing the final call

Yep, sorry! I edited my previous comment with the fix.