slider width in vbox

[korsbo]

Hi,

I have been playing around with InteractNext and WebIO. One issue that I have come across in Juno is that the slider width becomes imperceptibly small when I use vbox.

using DifferentialEquations
using Plots
using InteractNext
using WebIO
using CSSUtil

ode = @reaction_network Test begin
    p, 0 --> x
    d, x --> 0 
end p d

function plot_sim(ode, p::Vector{Float64})
    prob = ODEProblem(ode, fill(0., length(ode.syms)), (0.,10.), p)
    sol = solve(prob)
    plot(sol)
end

sliders = [slider(0.1:0.01:1, label="$p") for p in ode.params]    

iplot = map((x...)->plot_sim(ode, collect(x)), observe.(sliders)...)

ui = vbox(sliders..., iplot)

I have tried playing with CSSUtils directly:

using Measures
container(map(CSSUtil.render, sliders))(style("display" => "flex", "flex-direction"=>"column", "width"=>1000px))

but it does not help.

[shashi]

cc @piever, I believe you have been able to overcome this with other widget themes?

[piever]

Yes, both InteractBulma and InteractUIkit have a fullwidth slider that behaves well with vbox and hbox.

@korsbo I recommend you try either InteractBulma or InteractUIkit, see here for more information. The same syntax should work.

[piever]

Tested with InteractBulma. The code is exactly the same except using InteractBulma instead of using InteractNext.

using DifferentialEquations
using Plots
using InteractBulma
using WebIO
using CSSUtil

ode = @reaction_network Test begin
    p, 0 --> x
    d, x --> 0
end p d

function plot_sim(ode, p::Vector{Float64})
    prob = ODEProblem(ode, fill(0., length(ode.syms)), (0.,10.), p)
    sol = solve(prob)
    plot(sol)
end

sliders = [slider(0.1:0.01:1, label="$p") for p in ode.params]

iplot = map((x...)->plot_sim(ode, collect(x)), observe.(sliders)...)

ui = vbox(sliders..., iplot)

[korsbo]

Thanks!

Am I to take it that I am investing time in learning the wrong tool?

I'm basically looking to create an interactive course book on modelling of biology. My first prototype uses Interact and jupyter appmode. I then wanted to see if InteractNext + WebIO could do a better job. Should I instead be looking at InteractBase?

Also, I am willing to put in a bit of development effort if I find myself wanting features which are not already implemented. In which interactive-widgets project would this be of most use/have the longest life?

[piever]

InteractBase is the correct place to look at. InteractNext had some issues as it was too tightly bounded with a specific framework/style (Vue material design), so we moved on and decoupled the logic (HTML5 + Vue.js, which lives in InteractBase) and the design (either Bulma or UIkit). This way, especially if you're willing to learn the underlying framework (I recommend Bulma as it is the one I'm using, so it got much more testing than the other) it's possible to create web apps with complex design. For example this is the one I'm working on for my GSoC (project Sputnik):

It makes a lot of sense to collaborate on InteractBase/InteractBulma at the moment (if you have bugfixes, or new widgets you want to include, or maybe a new Bulma theme you would like to use).

Also, if there is overlap between "chunks" of things I'm developing for Sputnik and things you need for your book, we should definitely try to modularize the structure to share those components.

[korsbo]

Thanks for the pointers. That UI looks nice! I don't really know HTML, nor JS, but I'm not afraid of jumping in to the deep end of the pool. I learned ipywidgets when I fiddled with Interact.jl, maybe it is time to learn Bulma as well. I'll make my way over to InteractBase and start playing around.

[shashi]

Maybe we should rename this package to InteractMaterial.jl and make changes to that effect, i.e. make it a theme on top of InteractBase.jl.

[piever]

We could add a notice on the README pointing to InteractBase.

Using Vue material design is a bit against the philosophy of InteractBase (meaning all the logic is in InteractBase, the WidgetTheme only does layout and beautification) as I think it comes with a fair amount of prebuilt logic, but we can maybe see if there are less "invasive" material design frameworks.

[korsbo]

If you want people to find InteractBase it may be a good idea to make a note of it in the Interact.jl README.