Genie Discord forum

Author AvatarDaveMacMahon
3/5/2023, 8:47:29 PM

I've written an interactive dashboard using GenieBuilder. When the user makes a selection from a "select" element, the other elements on the page update in response. For some elements the update can take a few seconds. Is there a way to get these "slow" elements to indicate that an update is pending so that the user has a visual cue to know that updates are on the way?

Author Avatarhhaensel
3/7/2023, 11:01:39 PM

You could disable them by setting a model field :processingto true during calculation and set the disabled attribute of the element to :processing, e.g. btn("Just do it!", @click(:mybutton), loading = :processing, disabled = :processing)

Author AvatarDaveMacMahon
3/8/2023, 6:27:32 AM

In my GenieBuilder app's app.jl.html file I added these attributes to a plotly tag, but they didn't seem to have any effect. Here is how I added them:

<plotly :data="data" :layout="layout" :loading="isprocessing", :disabled="isprocessing", class="sync_data"></plotly>

In my app.jl file I simulate slow updates by doing:

    isprocessing = true
    sleep(3)
    data = [ PlotData(x=1:50, y=rand(50), plot="scatter") ]
    isprocessing = false

but the appearnce of the plot doesn't chnage for the duration of the three seconds spent sleeping. Am I doing something wrong?

Author AvatarDaveMacMahon
3/8/2023, 10:00:24 PM

Just to follow up, I realized that the <plotly> tag doesn't support loading and disabled attributes, but it does support the v-if attribute, so I can at least hide plots until they get new data. For plots, I could also simply assign PlotData[] (or [PlotData()]) to the @out variable to "erase" the existing traces.