Matrix input field: bug in StippleUI?

Specific Domains Web Stack
1

I am trying to write a function that allows me to render table-like structures so users can input matrices. However, when I use a matrix as a reactive variable for the structure backend the table does not behave as it should. When the user changes a field of the matrix, random other fields change their values. When I instead use 3 vectors, the problem disappears. Therefore I believe this is a bug in the Symbol() function when it needs to handle more than 1 index. Can anyone confirm this? Is there perhaps a better way to achieve matrix input using Genie?

Below the code needed to reproduce the issue.


module wwwef
# set up Genie development environment
using GenieFramework
@genietools

# add reactive code to make the UI interactive
@app begin
    @in velocity_gradient = zeros(Float64, 3,3)
end

function generate_tensor_input_field(model)
        table([
            row([
                 numberfield("xx",Symbol(model * "[1,1]"))
                 numberfield("xy",Symbol(model * "[1,2]"))
                 numberfield("xz",Symbol(model * "[1,3]"))
                   ])  
            row([
                 numberfield("yx",Symbol(model * "[2,1]"))
                 numberfield("yy",Symbol(model * "[2,2]"))
                 numberfield("yz",Symbol(model * "[2,3]"))
             ])  
             row([
                  numberfield("zx",Symbol(model * "[3,1]"))
                  numberfield("zy",Symbol(model * "[3,2]"))
                  numberfield("zz",Symbol(model * "[3,3]"))
                   ])  
           ])  

    end 

function test()
    [   
        generate_tensor_input_field("velocity_gradient")
    ]   
end

# register a new route and the page that will be
# loaded on access
@page("/test", test)

end
~
2

One thing to know is that when you access a variable in the UI code, you’re not actually accessing the Julia variable, but its Javascript counterpart in the browser. Reactive variables are serialized and sent to the browser, and then synchronized. In this case, the matrix is being serialized as a vector

image
image2764×756 194 KB

To fix your code, use linear indexing instead of Cartesian. Moreover, keep in mind that Javascript uses zero-based indexing.

      table([
            row([
                 numberfield("xx",Symbol(model * "[0]"))
                 numberfield("xy",Symbol(model * "[1]"))
                 numberfield("xz",Symbol(model * "[2]"))
                   ])  
            row([
                 numberfield("yx",Symbol(model * "[3]"))
                 numberfield("yy",Symbol(model * "[4]"))
                 numberfield("yz",Symbol(model * "[5]"))
             ])  
             row([
                  numberfield("zx",Symbol(model * "[6]"))
                  numberfield("zy",Symbol(model * "[7]"))
                  numberfield("zz",Symbol(model * "[8]"))
                   ])  
           ])

In order to work with Cartesian index, I guess we’d need to write a new serializer for matrices.

Hope this helps! I you have more questions, we’re more active on Discord. It’d be cool if you shared your app with us once it’s done!

1 Like
3

Thanks a lot! This definitely helps. I will check out the Discord as well.