Genie Discord forum

Hi all,

I am new to Genie and have been going through some tutorials. Unfortunately, I was unable to run some tutorials cloned from git without error. I have been trying to model my code from those examples. Since I do not have much background with JS, I have been using the GenieBuilder (which is nice by the way). For some reason, the plot does not update, but the code appears to run. Here is what I have:

app.jl

module App

  using GenieFramework
  using Distributions

  function update(mu, sigma)
      x = range(-5, 5, length=100)
      y = pdf.(Normal(mu, sigma), x)
      pdf_plot = PlotData(;x, y, mode="lines")
  end


  @genietools 
    @handlers begin
      @in mu = 0.0
      @in sigma = 0.0
      @out pdf_plot = PlotData()

      @onchange mu, sigma begin 
        update(mu, sigma)
      end
    end

  @page("/", "app.jl.html")
  
end

app.jl.html

<h1>Default content</h1>
<div class="row">
    <div class="col col-6 col-sm">
        <p>mu</p>
        <q-slider :min="-5" :step="-.1" v-model="mu"></q-slider>
    </div>
    <div class="col col-6 col-sm">
        <p>sigma</p>
        <q-slider :min="0" :max="5" :step=".1" v-model="sigma"></q-slider>
    </div>
</div>
<div class="row">
    <div class="col col-12 col-sm">
        <p>awesome plot<br /></p>
        <plotly :data="pdf_plot"></plotly>
    </div>
</div>

What am I doing wrong?

I also have a somewhat different question. Suppose I want to run this code outside of the VSCode builder. What is the recommended way to organize the code and run a startup script?

I believe the pdf_plot variable you create inside the update function is not linked to the one that was tagged with @out, as it is created in the function scope. Try returning the PlotData from the function an then setting the variable

  function update(mu, sigma)
      x = range(-5, 5, length=100)
      y = pdf.(Normal(mu, sigma), x)
      PlotData(;x, y, mode="lines")
  end
     @onchange mu, sigma begin 
        pdf_plot = update(mu, sigma)
      end

as for your second question, the Genie Builder apps are located in the folder ~/.julia/geniebuilder/apps. You'd just have to put the code wherever you want and then run julia --project app.jl to execute the app

Thank you for your reply. It turns out there were multiple issues. As you noted, the pdf_plot needed to be defined in the macro. Interestingly, pdf_plot was defined in a previous version because the function body was defined in the begin block. The other problem was that sigma=0, which means that there was nothing to plot. I set the default value to 1, but the problem still persisted until I clicked on one of the sliders. For some reason, the plot did not initialize immediately.

I suspect the later is an html problem, but I wonder whether it would be helpful to create a default value field for sliders in GenieBuilder?

If you want the reactive code to run when the page loads, you can use the isready variable as

@onchange isready, my, sigma begin

This variable is automatically created by the @handlers macro. When the page is finished loading, isready will be set to true and the update function will read the initial sigma=1

Ah. That makes sense now. I was not sure what about the purpose of isready . Thank you for clarifying all of my questions/misconceptions.

If you don't mind, I have one other question: I watched and read some tutorials in which @reactive was used to define structs. Were some of these other macros defined to reduce boilerplate code?

I was wrong. I have yet another question😆

I tried to bind the slider output value to the text above the display. Unfortunately, it only displays the value instead of the variable name with the value:

mu 1.2

I tried various solutions (perhaps the builder should do this by default). Here is what it has:

        <q-slider :min="-5" :step="-.1" v-model="mu" :max="5"></q-slider>

Can you please recommend a way to interpolate the variable name?

Also, I tried running the app from the terminal, but it did not launch as expected. Here is what I did:

(base) dfish@dfish-MS-7850:~$ cd .julia/geniebuilder/apps/TestApp/
(base) dfish@dfish-MS-7850:~/.julia/geniebuilder/apps/TestApp$ ls
app.jl  app.jl.html  Manifest.toml  Project.toml  public  run.jl
(base) dfish@dfish-MS-7850:~/.julia/geniebuilder/apps/TestApp$ julia --project app.jl
[ Info: 2023-03-26 06:21:50 Watching ["/home/dfish/.julia/geniebuilder/apps/TestApp"]

Nothing happened. When I checked http://0.0.0.0:56123/, it said the site could not be reached.

oh sorry, forgot to mention that you need to start the server - GB does this automatically for you. Add Server.up()at the end of app.jl

i you bind a variable to a

element with v-text, it'll replace everything in betweeen the

`

mu value i null

Note that null only accepts variable names or javascript expressions

about @reactive and the ReactiveModel structs, that's the old API. It still works but it's outdated and we don't recommend its use anymore

Thank you again for your reply. I tried the following but it did not work:

(base) dfish@dfish-MS-7850:~/.julia/geniebuilder/apps/TestApp$ julia --project app.jl
┌ Info: 2023-03-26 08:08:23 
└ Web Server starting at http://127.0.0.1:8000 
[ Info: 2023-03-26 08:08:25 Watching ["/home/dfish/.julia/geniebuilder/apps/TestApp"]
(base) dfish@dfish-MS-7850:~/.julia/geniebuilder/apps/TestApp$ 

http://127.0.0.1:8000 could not be reached. I wonder whether the server shuts down as soon as the script runs. I vaguely recall seeing something like Server.isrunning() || Server.up() . I tried that, but it did not work. Do I need to do something to keep the program alive?

Ok. I think I found a workaround. I added the following after Server.up()

wait(Condition())

I'm not sure if this is proper form, but it seems to have worked.

Thank you again for all of your help. Genie is becoming a very nice and useful package.

For anyone who encounters this thread, the final code is:

app.jl

module App

  using GenieFramework
  using Distributions
  using DataFrames
  using CSV

  @genietools 
    @handlers begin
      @in mu = 0.0
      @in sigma = 1.0
      @out pdf_plot = PlotData()

      @onchange isready, mu, sigma begin 
        dist = Normal(mu, sigma)
        q1,q99 = quantile(dist, [.001, .999])
        x = [range(-5, q1, length=5)..., 
            range(q1, q99, length=100)..., 
            range(q99, 5, length=5)...]
        y = pdf.(dist, x)
        pdf_plot = PlotData(;x, y, mode="lines")
      end
    end

  @page("/", "app.jl.html")
  Server.up()
  wait(Condition())
end

app.jl.html

<h1>Default content</h1>
<div class="row">
    <div class="col col-6 col-sm">
        <p> mu {{mu}}</p>
        <q-slider :min="-5" :step="-.1" v-model="mu" :max="5"></q-slider>
    </div>
    <div class="col col-6 col-sm">
        <p> sigma {{sigma}}</p>
        <q-slider :min="0" :max="5" :step=".1" v-model="sigma"></q-slider>
    </div>
</div>
<div class="row">
    <div class="col col-12 col-sm">
        <p>awesome plot<br /></p>
        <plotly :data="pdf_plot"></plotly>
    </div>
</div>

Once you have cd'ed to the project directory, run the following from the terminal:

run julia --project app.jl 

oh sorry again @itsdfish ! I usually run from the REPL, and of course the app does not close there after running Server.up() ...thanks for posting your solution! I'll add instructions to the docs for running apps from the command line

No problem at all. You were very helpful in directing me to a solution.

I do want to make one minor note. When I ran the code above, I had to refresh the webpage in order to render the page. For some reason the info statements:

[ Info: 2023-03-26 09:12:41 GET / 200
[ Info: 2023-03-26 09:12:42 GET /stipple.jl/master/assets/css/stipplecore.css 200
[ Info: 2023-03-26 09:12:42 GET /stippleui.jl/master/assets/css/quasar.min.css 200
[ Info: 2023-03-26 09:12:42 GET /genie.jl/master/assets/js/channels.js 200
[ Info: 2023-03-26 09:12:42 GET /stipple.jl/master/assets/js/underscore-min.js 200
[ Info: 2023-03-26 09:12:42 GET /stipple.jl/master/assets/js/vue.js 200
[ Info: 2023-03-26 09:12:42 GET /stipple.jl/master/assets/js/stipplecore.js 200
[ Info: 2023-03-26 09:12:42 GET /stipple.jl/master/assets/js/watchers.js 200
[ Info: 2023-03-26 09:12:42 GET /stippleui.jl/master/assets/js/quasar.umd.min.js 200
[ Info: 2023-03-26 09:12:42 GET /stippleplotly.jl/master/assets/js/plotly2.min.js 200
[ Info: 2023-03-26 09:12:42 GET /stippleplotly.jl/master/assets/js/resizesensor.min.js 200
[ Info: 2023-03-26 09:12:42 GET /stippleplotly.jl/master/assets/js/lodash.min.js 200
[ Info: 2023-03-26 09:12:43 GET /stippleplotly.jl/master/assets/js/vueresize.min.js 200
[ Info: 2023-03-26 09:12:43 GET /stippleplotly.jl/master/assets/js/vueplotly.min.js 200
[ Info: 2023-03-26 09:12:43 GET /stippleplotly.jl/master/assets/js/sentinel.min.js 200
[ Info: 2023-03-26 09:12:43 GET /stippleplotly.jl/master/assets/js/syncplot.js 200
[ Info: 2023-03-26 09:12:43 GET /genieautoreload.jl/master/assets/js/autoreload.js 200
[ Info: 2023-03-26 09:12:43 GET /stipple.jl/master/assets/js/vue_filters.js 200
[ Info: 2023-03-26 09:12:43 GET /stipple.jl/master/assets/js/keepalive.js 200
[ Info: 2023-03-26 09:12:44 GET /stipple.jl/master/assets/js/main_app_varmain_app_reactivemodel.js 200

in the command line did not start otherwise. I'm not sure if there is a way to load the page without user intervention.

wait(Condition()) is exactly the way you should do it if you if you want to start your project from the command line or as a service. Very good that you found out!