feat: Document delta updates (DH-18090)

[mofojed]

• Closes Handle document delta updates sent from the server #123
• Generates and sends a JSON Patch (RFC 6902) instead of the entire document
• Diffs between new and old React objects to preserve unchanged old ones
• Supercedes feat: delta updates #1069
• Tested with:

from deephaven import ui, empty_table
from random import randint
from time import time

counter = 0
_tables = []
for i in range(10):
    _tables.append(empty_table(i).update(f"X{i}=i"))


@ui.component
def delta_test():
    global counter
    items, set_items = ui.use_state([])
    i1, seti1 = ui.use_state(0)
    i2, seti2 = ui.use_state(0)
    colour, set_colour = ui.use_state([255, 255, 255])

    def _handle_add():
        global counter
        num = counter
        set_items(
            lambda old_items: [
                *old_items,
                ui.button(f"{num}", on_press=lambda: print(num)),
                ui.table(_tables[num], width="80px"),
            ]
        )
        counter += 1

    handle_add = ui.use_callback(_handle_add, [])

    def _handle_swap():
        def _swap_items(old_items):
            new_items = [*old_items]
            new_items[i1] = old_items[i2]
            new_items[i2] = old_items[i1]
            return new_items

        set_items(_swap_items)

    handle_swap = ui.use_callback(_handle_swap, [i1, i2])

    handle_delete = ui.use_callback(
        lambda: set_items(lambda old_items: [*old_items[:-1]]), []
    )

    handle_i1_change = ui.use_callback(lambda i: seti1(int(i)), [])
    handle_i2_change = ui.use_callback(lambda i: seti2(int(i)), [])
    handle_color_change = ui.use_callback(
        lambda: set_colour([randint(0, 255), randint(0, 255), randint(0, 255)]), []
    )

    return [
        ui.flex(
            ui.button("Add", on_press=handle_add),
            ui.button("Delete", on_press=handle_delete),
            ui.button("Swap", on_press=handle_swap),
            ui.text_field(value=i1, on_change=handle_i1_change, width="80px"),
            ui.text_field(value=i2, on_change=handle_i2_change, width="80px"),
            ui.button("Colour", on_press=handle_color_change),
            ui.view(
                width="80px",
                background_color=f"rgb({colour[0]}, {colour[1]}, {colour[2]})",
                key="test",
            ),
            max_height="32px",
        ),
        ui.flex(*items, direction="row", flex_grow=1),
    ]


my_delta = delta_test()

• Checked the browser logs by opening devtools and running DHLog.setLogLevel(10), then filtering on documentUpdated
• Checked the python logs by running:

import logging
import sys

# Have the root logger output to stdout instead of stderr
logging.basicConfig(stream=sys.stdout, level=logging.WARNING)

# Set the log level for the deephaven.ui logger to DEBUG
logging.getLogger("deephaven.ui.object_types.ElementMessageStream").setLevel(level=logging.DEBUG)

[github-actions]

ui docs preview (Available for 14 days)

[mattrunyon]

Looking pretty good. Just a few minor things

[mattrunyon]

There is an edge case here (that we probably don't need to support) if a dict has non-serializable keys. With the previous code this would hit the except block. Here we'd end up returning a dict with non-serializable keys which would fail to serialize later.

Like I said it probably doesn't matter though as I don't think we should support complex keys

[mofojed]

Yea in theory I suppose the transform_node should take an Any instead of just a str for the key... though I don't think we want to support that.

[github-actions]

ui docs preview (Available for 14 days)