feat: delta updates

.pre-commit-config.yaml

@@ -27,6 +27,7 @@ repos:
             sphinx,
             click,
             watchdog,
+            pyjsonpatch,
           ]
   - repo: https://github.com/astral-sh/ruff-pre-commit
     rev: v0.2.2

plugins/ui/setup.cfg

@@ -28,6 +28,7 @@ install_requires =
     deephaven-core>=0.37.0
     deephaven-plugin>=0.6.0
     json-rpc
+    pyjsonpatch
     deephaven-plugin-utilities>=0.0.2
     typing_extensions;python_version<'3.11'
 include_package_data = True

plugins/ui/src/deephaven/ui/object_types/ElementMessageStream.py

@@ -15,6 +15,7 @@
 from deephaven.server.executors import submit_task
 from deephaven.execution_context import ExecutionContext, get_exec_ctx
 from deephaven.liveness_scope import liveness_scope
+from pyjsonpatch import generate_patch
 
 from .._internal import wrap_callable
 from ..elements import Element
@@ -194,6 +195,7 @@ def __init__(self, element: Element, connection: MessageStream):
         self._render_state = _RenderState.IDLE
         self._exec_context = get_exec_ctx()
         self._is_closed = False
+        self._last_document = {}
 
     def _render(self) -> None:
         logger.debug("ElementMessageStream._render")
@@ -208,7 +210,7 @@ def _render(self) -> None:
         try:
             node = self._renderer.render(self._element)
             state = self._context.export_state()
-            self._send_document_update(node, state)
+            self._send_document_patch(node, state)
         except Exception as e:
             # Send the error to the client for displaying to the user
             # If there's an error sending it to the client, then it will be caught by the render exception handler
@@ -450,11 +452,11 @@ def _close_callable(self, callable_id: str) -> None:
         self._callable_dict.pop(callable_id, None)
         self._temp_callable_dict.pop(callable_id, None)
 
-    def _send_document_update(
+    def _send_document_patch(
         self, root: RenderedNode, state: ExportedRenderState
     ) -> None:
         """
-        Send a document update to the client. Currently just sends the entire document for each update.
+        Send a document update to the client in the form of a JSON Patch (RFC 6902).
 
         Args:
             root: The root node of the document to send
@@ -464,18 +466,19 @@ def _send_document_update(
             logger.error("Stream is closed, cannot render document")
             sys.exit()
 
-        # TODO(#67): Send a diff of the document instead of the entire document.
         encoder_result = self._encoder.encode_node(root)
         encoded_document = encoder_result["encoded_node"]
         new_objects = encoder_result["new_objects"]
         callable_id_dict = encoder_result["callable_id_dict"]
 
+        document = json.loads(encoded_document)
+        patch = generate_patch(self._last_document, document)
+        self._last_document = document
+
         logger.debug("Exported state: %s", state)
         encoded_state = json.dumps(state)
 
-        request = self._make_notification(
-            "documentUpdated", encoded_document, encoded_state
-        )
+        request = self._make_notification("documentPatched", patch, encoded_state)
         payload = json.dumps(request)
         logger.debug(f"Sending payload: {payload}")
 

plugins/ui/src/js/package.json

@@ -62,6 +62,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@internationalized/date": "^3.5.5",
     "classnames": "^2.5.1",
+    "fast-json-patch": "^3.1.1",
     "json-rpc-2.0": "^1.6.0",
     "nanoid": "^5.0.7",
     "react-markdown": "^8.0.7",

plugins/ui/src/js/src/widget/WidgetHandler.test.tsx

@@ -3,12 +3,13 @@ import { act, render } from '@testing-library/react';
 import { useWidget } from '@deephaven/jsapi-bootstrap';
 import { dh } from '@deephaven/jsapi-types';
 import { TestUtils } from '@deephaven/test-utils';
+import { Operation } from 'fast-json-patch';
 import WidgetHandler, { WidgetHandlerProps } from './WidgetHandler';
 import { DocumentHandlerProps } from './DocumentHandler';
 import {
   makeWidget,
   makeWidgetDescriptor,
-  makeWidgetEventDocumentUpdated,
+  makeWidgetEventDocumentPatched,
   makeWidgetEventJsonRpcResponse,
 } from './WidgetTestUtils';
 
@@ -68,6 +69,7 @@ it('updates the document when event is received', async () => {
   const mockSendMessage = jest.fn();
   const initialData = { state: { fiz: 'baz' } };
   const initialDocument = { foo: 'bar' };
+  const initialPatch: Operation[] = [{ op: 'add', path: '/foo', value: 'bar' }];
   mockWidgetWrapper = {
     widget: makeWidget({
       addEventListener: mockAddEventListener,
@@ -102,7 +104,7 @@ it('updates the document when event is received', async () => {
     listener(makeWidgetEventJsonRpcResponse(1));
 
     // Then send the initial document update
-    listener(makeWidgetEventDocumentUpdated(initialDocument));
+    listener(makeWidgetEventDocumentPatched(initialPatch));
   });
 
   expect(mockDocumentHandler).toHaveBeenCalledWith(
@@ -115,13 +117,13 @@ it('updates the document when event is received', async () => {
 
   mockDocumentHandler.mockClear();
 
-  const updatedDocument = { fiz: 'baz' };
-
+  const updatedDocument = { foo: 'bar', fiz: 'baz' };
+  const updatedPatch: Operation[] = [{ op: 'add', path: '/fiz', value: 'baz' }];
   act(() => {
     // Send an updated document event to the listener of the widget
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (mockAddEventListener.mock.calls[0] as any)[1](
-      makeWidgetEventDocumentUpdated(updatedDocument)
+      makeWidgetEventDocumentPatched(updatedPatch)
     );
   });
   expect(mockDocumentHandler).toHaveBeenCalledWith(
@@ -144,6 +146,7 @@ it('updates the initial data only when widget has changed', async () => {
   const onClose = jest.fn();
   const data1 = { state: { fiz: 'baz' } };
   const document1 = { foo: 'bar' };
+  const patch1: Operation[] = [{ op: 'add', path: '/foo', value: 'bar' }];
   mockWidgetWrapper = {
     widget: makeWidget({
       addEventListener,
@@ -181,7 +184,7 @@ it('updates the initial data only when widget has changed', async () => {
     listener(makeWidgetEventJsonRpcResponse(1));
 
     // Then send the initial document update
-    listener(makeWidgetEventDocumentUpdated(document1));
+    listener(makeWidgetEventDocumentPatched(patch1));
   });
 
   expect(mockDocumentHandler).toHaveBeenCalledWith(
@@ -210,7 +213,8 @@ it('updates the initial data only when widget has changed', async () => {
   expect(sendMessage).not.toHaveBeenCalled();
 
   const widget2 = makeWidgetDescriptor();
-  const document2 = { FOO: 'BAR' };
+  const document2 = { foo: 'bar', FOO: 'BAR' };
+  const patch2: Operation[] = [{ op: 'add', path: '/FOO', value: 'BAR' }];
   mockWidgetWrapper = {
     widget: makeWidget({
       addEventListener,
@@ -253,7 +257,7 @@ it('updates the initial data only when widget has changed', async () => {
     listener(makeWidgetEventJsonRpcResponse(1));
 
     // Then send the initial document update
-    listener(makeWidgetEventDocumentUpdated(document2));
+    listener(makeWidgetEventDocumentPatched(patch2));
   });
 
   expect(mockDocumentHandler).toHaveBeenCalledWith(