[Bug] can't access own structure's properties in the reactive way about genie.jl HOT 11 CLOSED

@Jgmedina95 is that the full code? I don't see using GenieFramework anywhere - that would bring @app into scope.

from genie.jl.

Hi!, yes, I just copy the main body. but using GenieFramework is in both the app.jl and ReactiveForm.jl files. Would you prefer to see the files itself?

this is the header of the ReactiveForm.jl

module ReactiveForm
using GenieFramework
using .Main.SRutils
using .Main.QBC: MyDataset

const FILESPATH = "files/"

and for
app.jl

module App
# set up Genie development environment
using GenieFramework
using GenieFramework.Genie.Requests: postpayload
using Main.SRutils
using .ReactiveForm
@genietools
include("ReactiveForm.jl")

from genie.jl.

@Jgmedina95 thanks - yes, the whole files would help. But before that, can you please update to latest versions of the packages and try again? I see GenieFramework 1.11 while we're on 1.24 currently.

from genie.jl.

Thanks for the tip! The error is fixed :). Now I'm just curious on to why my program is not working. Is hard to access structure's properties with the reactive framework. In the previous examples, I have no problem accessing MyDataset.X with the multipage routing like I showed earlier:

route("/result", method=POST) do
    filename =  postpayload(:filename)
    data = load_data(FILESPATH*filename)
    number_x_features = size(data.X)
    p("The shape of the features are $number_x_features", style="font-size:20px")
end

And it works as expected. But with the UI() function, I get errors such as

function UI()
   shape = size(data.X)
    [cell([
        textfield("Whats File Name?", :filename),
        p("The shape of data is {{shape}}"),
    ]),
    cell(p("it has $(shape[0]) features") )
     ]
end

type #data has no field X

or If i change my approach i get the following:

@app begin
    @in filename = "name"
    @out m = 0.0
    @out datasets = MyDataset(ones(1,1), ones(1), 1, 1)
    @out X = ones(1,1)
    @out y = ones(1)
    @onchange filename begin
        datasets = load_data(FILESPATH * filename)
        X = datasets.X
        y = datasets.y
    
    end
end

function ui()
    [cell([
        textfield("Whats File Name?", :filename),
        p("The shape of data is {{size(:X)}}"),
    ]),
    cell(p("it has $(size(:X)[0]) features") )
     ]
end
I get 
 MethodError: no method matching size(::Symbol)

and if I take the ':'
I get
UndefVarError: X not defined

from genie.jl.

@Jgmedina95 Indeed calculating the size of a Symbol will yield an error as this not supported by this type. As for the undefined variable error, how are you using the ui function? Are you declaring a route with @page("/form", ui) in the same module?

Also, two more things:

• Anything you write in between the {{}} should be valid Javascript as it'll be executed in the browser
• Using custom types, like MyDatasetin your case, for reactive variables can fail sometimes as not all types are supported.

from genie.jl.

Thanks, im declaring the route as in the app.jl:
@page("/reactive", ReactiveForm.ui)

maybe thats wrong? The other ones i declared using route() work fine.
Thanks for the observations. I was using {{}} and $ trying to catch where the error was coming from.
Btw, i cannot access the link, seems to be from your local machine.

from genie.jl.

Oops, I was editing the docs and didn't noticed.

If you want to declare the route in app.jl like you're doing, then the call to @app is a little different. You also need to pass the Module to it. See this page on the docs

https://learn.genieframework.com/guides/adding-reactive-pages#multiple-app-modules

Otherwise, place the @page call inside the ReactiveForm module.

from genie.jl.

Indeed, youre right! I was able to see the reactive interphase. My final issue (fingers crossed) is that the variables don't update If I define them outside the @app (of course) But if i don't do that, then the variables are not accessed by the UI function.

@app begin
    @in filename = "I.13.4"
    @out m = 0.0
    @out datasets = MyDataset(ones(1,1), ones(1), 1, 1)
    @out X = ones(2,2)
    @out y = ones(2)
    @onchange filename begin
      X, y = Update_dataset!(filename)
    end
end

function ui()
    [cell([
        textfield("Whats File Name?", :filename),
        p("The shape of data is $(size(X)) and this is $m"),
    ]),
    cell(p("it has $(size(X)[1]) features") )
     ]
end

this brings Undefined variable X error

but if i define them outside the @app, the app runs, but the UI() function doesnt access X. So is this even possible? haha I'm looking through hell a lot of examples but seems no one has a use case like this.

from genie.jl.

After some try and error i got some good results :)
I followed the reactive UI tutorial and understood why struct attributed don't get updated too.
But something funny is that even though they get updated, anything declared with $ in the UI function doesn't read from the @app but from the module itself.
As example:

const FILESPATH = "files/"
datasets = MyDataset(ones(1,1), ones(1), 1, 1)
X = datasets.X
y = datasets.y
m = 0 
function Update_dataset!(filename)
    datasets = load_data(FILESPATH * filename)
    X = datasets.X
    y = datasets.y
    return X, y
end
    

@app begin
    @in filename = "smallfile"
    @out m = 0.0
    @out datasets = MyDataset(ones(1,1), ones(1), 1, 1)
    @out X = ones(2,2)
    @out y = ones(2)
    @in update_data = false
    @onchange filename begin
      filename = filename
    end
    @onchange update_data begin
        X, y = Update_dataset!(filename)
        m = size(X)[1]
        datasets = load_data(FILESPATH * filename)
        update_data = false
    
    end
end


function ui()
    [cell([
        textfield("Whats File Name?", :filename),
        p("The file name is {{filename}}"),
        p("The shape of data is $(size(X)) and this is m: {{m}} with curly brackets, and this is m with dollar sign $m"),
    ]),
    cell(p("it has $(size(X)[1]) features")),
    btn("Update Data", @click(:update_data))]
end

The results after clicking "update" can be seen in the image. X and y are been updated in the app, but are not shown whenever I used the dollar sign but the curly bracket. :)
I think I understood what I was doing wrong. Thanks @PGimenez and @essenciary for your time and help. i don't think I encounter any bugs and it was more about my inexperience with this framework :D. Feel free to close it if you agree.

from genie.jl.

@Jgmedina95 The thing is that interpolation with {{}} interpolates variables in the browser. Hence, a variable must be made reactive with @inor @out in order to appear in the browser and be interpolated. Note that reactive variables are only instantiated on page load, and the Julia code can only access them from within an @onchange block.

On the other hand, $ is the typical Julia interpolation that is made before the page is sent to the browser. Hence, the interpolated variables need to exist in the Julia code beforehand.

If you're on Discord, we have an active community there with a help forum: https://discord.com/invite/9zyZbD6J7H

from genie.jl.

@Jgmedina95 I've updated the docs with this information, thanks for bringing up these issues.

https://learn.genieframework.com/reference/reactive-ui/caveats

from genie.jl.