Tailing data

In [1]:

import genstudio.plot as Plot

import genstudio.plot as Plot

Out[2]:

When animating using Plot.Frames or Plot.Slider, the range of the slider can be set dynamically by passing a reference to a list as a rangeFrom parameter. If the tail option is True, the animation will pause at the end of the range, then continue when more data is added to the list.

In [3]:

from genstudio.plot import js

letters = Plot.ref(["A", "B", "C"], state_key="letters")

tailedSlider = (
    Plot.Slider("n", fps=2, rangeFrom=letters, tail=True, controls=False)
    | ["span", "All letters: ", ["span.text-gray-400", js("$state.letters.toString()")]]
    | ["span", "Current letter: ", js("$state.letters[$state.n]")]
    | ["span", "Current index: ", js("$state.n")]
).display_as("widget")
tailedSlider

from genstudio.plot import js letters = Plot.ref(["A", "B", "C"], state_key="letters") tailedSlider = ( Plot.Slider("n", fps=2, rangeFrom=letters, tail=True, controls=False) | ["span", "All letters: ", ["span.text-gray-400", js("$state.letters.toString()")]] | ["span", "Current letter: ", js("$state.letters[$state.n]")] | ["span", "Current index: ", js("$state.n")] ).display_as("widget") tailedSlider

Out[3]:

In [4]:

Plot.html(
    [
        "button.bg-blue-500.hover:bg-blue-700.text-white.font-bold.py-2.px-4.rounded",
        {
            "onClick": lambda widget, e: tailedSlider.state.update(
                ["letters", "concat", ["D", "E", "F", "G", "H", "I"]]
            )
        },
        "Add more letters to the widget above",
    ]
)

Plot.html( [ "button.bg-blue-500.hover:bg-blue-700.text-white.font-bold.py-2.px-4.rounded", { "onClick": lambda widget, e: tailedSlider.state.update( ["letters", "concat", ["D", "E", "F", "G", "H", "I"]] ) }, "Add more letters to the widget above", ] )

Out[4]: