Strange data template problem

[marklam]

Hi, I'm looking for advice on how to make a model that works with FuncUI, for what's probably an unusual situation.

I'm trying to show a list of millions of items, so I've got a ListBox with a VirtualizingStackPanel mapping an ImmutableList of the items.

As I want to be able to attach extra info to some of the items in the list, without replacing the entire collection, I have an extra Map of item IDs (ints) to info. This map is in the model, and can be replaced whenever a change is made to this info.

(The big collection and the notes to associate with the items are in different stores, which is another reason for this separation).

I've made a cut-down Elmish example app of this (as a script or as an app)

• Items (which consist of just an ID) in a collection called ItemsByIndex where they are stored in order of their ID.
• Augmentations which has an incrementing Version for debugging purposes and a map of numeric ID to a Notes string.
• A message to set the Note for a given ID
• An initial model with 1 million Items
• A list item template which shows the Item ID and a TextBox for entering notes - the initial value is looked up by Item ID from the map in Augmentations (which is supplied to the template as an IReadable). Changing the text sends the SetNote message.
• A separate panel that always shows the Note for Item ID 0, along with the current version of the Augmentation map.

I've put debugging output in the app which shows

• when the list is rebuilt
• when the item template is re-created
• when the item template is invoked for Item 0
• when item 0's notes are updated

If you enter text in the Notes field for Item 0 in the list, the Augmentations are updated and the separate Item0-specific panel also updates.

(this image doesn't loop, to avoid confusion - you might need to click it to see it replay)

But if you select item 1, scroll down the list and then back to the top, the notes for Item 0 get reset.

(this image doesn't loop, to avoid confusion - you might need to click it to see it replay)

The debugging output shows that the list item template was invoked with Augmentations version 0 rather than the most recent version when the template was re-created.

itemTemplate constructed with annotations version 20
augmentations updated with version 21, index 0 note Hello
List rebuilt with annotations 21
itemTemplate constructed with annotations version 21
itemTemplate invoked for item 0 with annotations version 0
Setting note for 0 to '', version 22
augmentations updated with version 22, index 0 note
List rebuilt with annotations 22

specifically the lines

itemTemplate constructed with annotations version 21
itemTemplate invoked for item 0 with annotations version 0

This suggests to me that:

1. The template constructed when the version was 21 has been ignored since it seems equivalent to the initial version (which seems OK, and overriding the equality with ReferenceEquals makes bad things happen like losing the item selection)
2. The IReadable.Current access in the list template is getting the value that was current at the time the template was created, not (as I would have expected) the time the template is invoked.

(Less importantly to me, if you enter text in the right-hand panel, the messages are sent to update notes for Item0, the list template is reconstructed, but the template is not invoked so the list does not update)

So what I'm wondering is:

• is there a way to get the item template to pick up the latest version of the IReadable?
• is there a better way to do this instead?

Any help or suggestions would be greatly appreciated!

[marklam]

overriding the equality with ReferenceEquals makes bad things happen like losing the item selection

My attempt here was to use MyDataTemplateView.create instead of DataTemplateView.create but it caused a never-ending update stream:

type MyDataTemplateView<'data, 'childData, 'view when 'view :> IView>(func) =
    inherit DataTemplateView<'data, 'childData, 'view>(func, ValueNone, ValueNone, true)

    override this.Equals(other) =
        System.Object.ReferenceEquals(this, other)

    override this.GetHashCode() =
        func.GetType().GetHashCode()

    static member create<'data, 'view> func =
        new MyDataTemplateView<'data, _, 'view>(func)

[JaggerJo]

Hi @marklam

I'm taking a look later today.

[JaggerJo]

I was looking at it and the item template has no reason to ever re-render.

The funny thing is that there is no way to fix this using elmish, without re-rendering your list.

You can easily fix this by using a component - but I'd strongly recommend to rewrite this using just components.

[JaggerJo]

My comment from above also fixes another issue in the app. Typing on the right did not make the text appear on the left.

[marklam]

That's amazing thanks!

In a broader context than this example, I'm getting some benefits from the elmish loop - I can serialize the messages (or at least a subset of the important ones) and replay them to restore the app state; and get a sort of audit trail too.

[JaggerJo]

Depending on what you need you could also roll your own state implementation.

type HistoricState<'t> (initial: 't) =
    let instanceId = Guid.NewGuid()
    let mutable history = [initial]
    let onChange = new Event<'t>()

    interface IWritable<'t> with
        member this.Current = history.Head
        member this.Dispose() = ()
        member this.InstanceId = instanceId
        member this.InstanceType = InstanceType.Source
        member this.Set(value) =
            history <- value :: history
            onChange.Trigger(value)
            ()

        member this.Subscribe(handler) =
            onChange.Publish.Subscribe(handler)

        member this.SubscribeAny(handler) =
            onChange.Publish.Subscribe(handler)

        member this.ValueType = typeof<'t>

    member this.Undo () =
        match history with
        | _ :: x :: xs ->
            history <- x :: xs
            onChange.Trigger(x)
            true
        | _ -> false