pages/sine_widget.py

import ipyreact
from traitlets import List, Any
import numpy as np

class TldrawSineWidget(ipyreact.ReactWidget):
    points = List(List(Any())).tag(sync=True)
    _esm = """
    import { TDShapeType, Tldraw } from "@tldraw/tldraw";
    import * as React from "react";

    export default function App({ points }) {

        const [app, setApp] = React.useState()

        const handleMount = React.useCallback((app: Tldraw) => {
            setApp(app)
        }, []);

        React.useEffect(() => {
            if (app) {
            app.createShapes({
                type: "draw",
                id: "draw1",
                color: 'red',
                points: points,
            });
            }
        }, [points, app])

        return (
            <div
            style={{
                position: "relative",
                width: "800px",
                height: "350px",
            }}
            >
            <Tldraw onMount={handleMount} onChange={e => console.log("hii")} />
            </div>
        );
}

    """

import solara
import numpy as np

float_value = solara.reactive(0)

@solara.component
def Page():
    stretchx = 50
    x = np.arange(0,4*np.pi*stretchx , 2)
    y = 130*np.sin(x*1/stretchx+float_value.value)+150

    points = np.column_stack((x, y)).tolist()
    TldrawSineWidget.element(points=points)
    solara.Markdown(f"**Float value**: {float_value.value}")
    solara.FloatSlider("Some float", value=float_value, min=0, max=4*np.pi, step=0.1)

    with solara.Row():
        solara.Button("Reset", on_click=lambda: float_value.set(0))
Page()