Use of IReadable.Observable, and should there be a useStateWith or similar

[marklam]

Once again I've found myself off the beaten track, so I've got a question about whether this is the right way to do things, and if so, if there's something missing.

I'm wrapping OxyPlot.Avalonia's PlotControl for use in a view. The control has very few properties, most of the interaction is in its PlotModel.

I'm trying to do something similar to their Overlay Example where a custom drawing (a Rectangle on a Canvas) is positioned between the axes. TransformChanged handlers on the axes in PlotModel need to update the state for the View to position the Rectangle. To do that I'm passing IWritables into the construction of the PlotModel.

I also want to update the PlotModel in response to changes in the view state. To do this I'm subscribing to the Observable property of an IReadable and the handler updates the PlotModel (in this example it's a ListBox selection updating the axes in the PlotModel).

The code is in my scratch repo, along with a nuget reference to the pre-release of OxyPlot.Avalonia for a matching Avalonia version. But for reference:

namespace FuncUIFileDialog

open System
open Avalonia
open Avalonia.Themes.Fluent
open Avalonia.FuncUI.Hosts
open Avalonia.Controls.ApplicationLifetimes

open Avalonia.Controls
open Avalonia.FuncUI
open Avalonia.FuncUI.DSL
open Avalonia.Controls.Shapes
open OxyPlot
open OxyPlot.Avalonia
open Avalonia.FuncUI.Types
open Avalonia.FuncUI.Builder

[<AutoOpen>]
module PlotView  =

    let create (attrs: IAttr<PlotView> list): IView<PlotView> =
        ViewBuilder.Create<PlotView>(attrs)

    type PlotView with

        static member model<'t when 't :> PlotView>(value) : IAttr<'t> =
            AttrBuilder<'t>.CreateProperty<_>(PlotView.ModelProperty, value, ValueNone)

module MainView =
    let plotModel (clip : IWritable<_>) (rect : IWritable<_>) =

        let model = OxyPlot.PlotModel(Title = Random.Shared.Next().ToString())
        Diagnostics.Debug.WriteLine $"Created a plot model {model.Title}"
        let horizontalAxis = OxyPlot.Axes.LinearAxis(Position = OxyPlot.Axes.AxisPosition.Bottom)
        let verticalAxis   = OxyPlot.Axes.LinearAxis(Position = OxyPlot.Axes.AxisPosition.Left)

        model.Axes.Add(horizontalAxis)
        model.Axes.Add(verticalAxis)

        let handleTransformChanged _ =
            // Transform to screen coordinates
            let p1 = horizontalAxis.Transform(0, 0, verticalAxis)
            let p2 = horizontalAxis.Transform(100, 100, verticalAxis)

            // Change the position and size of the Avalonia shape
            rect.Set (Avalonia.Rect((min p1.X p2.X), (min p1.Y p2.Y), abs (p2.X - p1.X), abs (p2.Y - p1.Y)))
            clip.Set (Avalonia.Rect(model.PlotArea.Left, model.PlotArea.Top, model.PlotArea.Width, model.PlotArea.Height))

        horizontalAxis.TransformChanged.Add(handleTransformChanged)
        verticalAxis.TransformChanged.Add(handleTransformChanged)
        model

    let updateAxes (plotModel : OxyPlot.PlotModel) (maxVal : int) =
        Diagnostics.Debug.WriteLine $"Updating axes on {plotModel.Title}"
        plotModel.Axes[0].Zoom(0, maxVal)
        plotModel.Axes[1].Zoom(0, maxVal)
        plotModel.InvalidatePlot(false)

    let create () =
        let scales = [ 50; 100; 150; 200 ]
        Component (
            fun ctx ->
                let clip = ctx.useState Avalonia.Rect.Empty
                let rect = ctx.useState Avalonia.Rect.Empty
                let scale = ctx.useState(0)
                let plotModel = ctx.useState (plotModel clip rect)

                Diagnostics.Debug.WriteLine $"Hooking up a subscription"
                scale.Observable
                |> Observable.subscribe (
                        fun i ->
                            updateAxes plotModel.Current i
                    )
                |> ctx.trackDisposable

                Grid.create [
                    Grid.columnDefinitions "Auto, *"
                    Grid.children [
                        ListBox.create [
                            Grid.column 0
                            ListBox.dataItems scales
                            ListBox.selectedItem scale.Current
                            ListBox.onSelectedItemChanged (
                                function
                                | :? int as i -> scale.Set i
                                | _ -> ()
                            )
                        ]

                        Grid.create [
                            Grid.column 1
                            Grid.children [
                                PlotView.create [
                                    PlotView.model plotModel.Current
                                ]
                                Canvas.create [
                                    Visual.clip (Media.RectangleGeometry(clip.Current) :> Media.Geometry)

                                    Canvas.children [
                                        Rectangle.create [
                                            Rectangle.isHitTestVisible false

                                            Canvas.left      rect.Current.Left
                                            Canvas.top       rect.Current.Top
                                            Rectangle.width  rect.Current.Width
                                            Rectangle.height rect.Current.Height
                                            Rectangle.fill   Avalonia.Media.Brushes.Blue
                                        ]
                                    ]
                                ]
                            ]
                        ]
                    ]
                ]
        )


type MainWindow() =
    inherit HostWindow()

    do
        base.Title   <- "FuncUIExperiments"
        base.Content <- MainView.create ()

type App() =
    inherit Application()

    override this.Initialize() =
        this.Styles.Add (FluentTheme(baseUri=null))
        this.Styles.Add (OxyPlot.Avalonia.Themes.Default())

    override this.OnFrameworkInitializationCompleted() =
        this.Name <- "FuncUIExperiments"
        match this.ApplicationLifetime with
        | :? IClassicDesktopStyleApplicationLifetime as desktopLifetime ->
            let mainWindow = MainWindow()
            mainWindow.MinWidth <- 850.0
            mainWindow.MinHeight <- 600.0

            desktopLifetime.MainWindow <- mainWindow
        | _ -> ()

module Program =

    [<EntryPoint; STAThread>]
    let main(args: string[]) =
        AppBuilder
            .Configure<App>()
            .UsePlatformDetect()
            .UseSkia()
            .StartWithClassicDesktopLifetime(args)

The problems I'm seeing with my approach are:

• Subscribing to the state's Observable property adds a duplicate subscription to the same observable every time the view is rendered.
• A new PlotModel is created (and ignored) every time the view updates, because ctx.useState takes a default state each time, and I have to build it up with the IWritable clip and rect for the plotModel to update. Is this just the wrong approach, or would it be OK to have a Context member function

member this.useStateWith(buildInitialValue: unit -> 'value, ?renderOnChange: bool) =
    this.useStateHook<'value>(
        StateHook.Create (
            identity = callingIndex,
            state = StateHookValue.Lazy (fun _ -> new State<'value>(buildInitialValue()) :> IAnyReadable),
            renderOnChange = defaultArg renderOnChange true
        )
    ) :?> IWritable<'value>

[JaggerJo]

Yes, when you use ctx.useState a new default value is created on each render. So your lazy implementation makes sense. I don't think we expose a simple member function to do this currently.

Instead of subscribing to the observable you could use an effect. (check out the docs - URL might change in the future)

[marklam]

The effect approach is very nice, I clearly hadn't grasped what it was about.
I can work with IObservable by:

ctx.useEffect ((
    fun () ->
        Diagnostics.Debug.WriteLine $"Hooking up a subscription"
        scale.Observable
        |> Observable.subscribe (
                fun i ->
                    updateAxes plotModel.Current i
            )
), [EffectTrigger.AfterInit])

or a much simpler AfterChange effect

ctx.useEffect ((fun () -> updateAxes plotModel.Current scale.Current), [EffectTrigger.AfterChange scale])

In fact, I don't strictly need the lazy version of useState, because I can do this:

let emptyPlotModel = PlotModel()
Component (
    fun ctx ->
        let clip = ctx.useState Avalonia.Rect.Empty
        let rect = ctx.useState Avalonia.Rect.Empty
        let scale = ctx.useState(0)
        let pmodel = ctx.useState emptyPlotModel
        ctx.useEffect ((fun () -> pmodel.Set (plotModel clip rect)), [EffectTrigger.AfterInit])

But I'd also be happy to make a PR to add the lazy useState, if you've got a preferred name for it - I went for useStateWith like Option.defaultWith but anything like useStateLazy, useStateBuilder, useDelayedState, useDeferredState might be possibilities?

[JaggerJo]

I personally prefer useStateLazy.

In theory all useState calls could be made lazy without the consumer knowing. Just not sure if we should, as it would work via. Quotations (no idea about the performance characteristics of this btw)

Basically:

member this.useState([<ReflectedDefinition>] initialValue: Expr<'value>, ?renderOnChange: bool) =
    this.useStateHook<'value>(
        StateHook.Create (
            identity = callingIndex,
            state = StateHookValue.Lazy (fun _ -> new State<'value>(initialValue.Eval()) :> IAnyReadable),
            renderOnChange = defaultArg renderOnChange true
        )
    ) :?> IWritable<'value>

[marklam]

It might not be too bad perf-wise since it would only be on the creation of the component, which should be less often than rendering.

But I'd be wary of it since it's probably not what the user is expecting to happen. It seems a bit magical, and imo magic always leads to trouble.

[JaggerJo]

Fair 😁 I'll merge useStateLazy if you create a PR.