Allow defining an update method as part of an element's dictionary (#4470)

This PR solves #4344 by defining update methods as part of the element's
dictionary which is sent to the client. This way nicegui.js can call
such update methods directly and we don't have to call something like
`runMethod('update_grid')` from Python.

The following code caused multiple updates when clicking the button
(analyzed with a console.log in aggrid.js):
```py
grid = ui.aggrid({})
ui.button('update', on_click=lambda: grid.classes('foo').classes('bar').classes('baz'))
```
With this PR, all updates are consolidated and `update_grid` is only
called once.

Author: falkoschindler

nicegui/element.py

@@ -63,6 +63,7 @@ def __init__(self, tag: Optional[str] = None, *, _client: Optional[Client] = Non
         self._text: Optional[str] = None
         self.slots: Dict[str, Slot] = {}
         self.default_slot = self.add_slot('default')
+        self._update_method: Optional[str] = None
         self._deleted: bool = False
 
         self.client.elements[self.id] = self
@@ -197,6 +198,7 @@ def _to_dict(self) -> Dict[str, Any]:
                     'slots': self._collect_slot_dict(),
                     'children': [child.id for child in self.default_slot.children],
                     'events': [listener.to_dict() for listener in self._event_listeners.values()],
+                    'update_method': self._update_method,
                     'component': {
                         'key': self.component.key,
                         'name': self.component.name,

nicegui/elements/aggrid.py

@@ -45,6 +45,7 @@ def __init__(self,
         self._props['html_columns'] = html_columns[:]
         self._props['auto_size_columns'] = auto_size_columns
         self._classes.append(f'ag-theme-{theme}')
+        self._update_method = 'update_grid'
 
     @classmethod
     def from_pandas(cls,
@@ -121,10 +122,6 @@ def options(self) -> Dict:
         """The options dictionary."""
         return self._props['options']
 
-    def update(self) -> None:
-        super().update()
-        self.run_method('update_grid')
-
     def run_grid_method(self, name: str, *args, timeout: float = 1) -> AwaitableResponse:
         """Run an AG Grid API method.
 

nicegui/elements/echart.py

@@ -43,6 +43,7 @@ def __init__(self,
         self._props['options'] = options
         self._props['enable_3d'] = enable_3d or any('3D' in key for key in options)
         self._props['renderer'] = renderer
+        self._update_method = 'update_chart'
 
         if on_point_click:
             self.on_point_click(on_point_click)
@@ -104,10 +105,6 @@ def options(self) -> Dict:
         """The options dictionary."""
         return self._props['options']
 
-    def update(self) -> None:
-        super().update()
-        self.run_method('update_chart')
-
     def run_chart_method(self, name: str, *args, timeout: float = 1) -> AwaitableResponse:
         """Run a method of the EChart instance.
 

nicegui/elements/json_editor.py

@@ -34,6 +34,7 @@ def __init__(self,
         """
         super().__init__()
         self._props['properties'] = properties
+        self._update_method = 'update_editor'
 
         if schema:
             self._props['schema'] = schema
@@ -63,10 +64,6 @@ def properties(self) -> Dict:
         """The property dictionary."""
         return self._props['properties']
 
-    def update(self) -> None:
-        super().update()
-        self.run_method('update_editor')
-
     def run_editor_method(self, name: str, *args, timeout: float = 1) -> AwaitableResponse:
         """Run a method of the JSONEditor instance.
 

nicegui/elements/notification.py

@@ -66,6 +66,7 @@ def __init__(self,
         """
         with context.client.layout:
             super().__init__()
+        self._update_method = 'update_notification'
         if options:
             self._props['options'] = options
         else:
@@ -211,7 +212,3 @@ def dismiss(self) -> None:
 
     def set_visibility(self, visible: bool) -> None:
         raise NotImplementedError('Use `dismiss()` to remove the notification. See #3670 for more information.')
-
-    def update(self) -> None:
-        super().update()
-        self.run_method('update_notification')

nicegui/elements/plotly.py

@@ -37,6 +37,7 @@ def __init__(self, figure: Union[Dict, go.Figure]) -> None:
         self.figure = figure
         self.update()
         self._classes.append('js-plotly-plot')
+        self._update_method = 'update'
 
     def update_figure(self, figure: Union[Dict, go.Figure]):
         """Overrides figure instance of this Plotly chart and updates chart on client side."""
@@ -46,7 +47,6 @@ def update_figure(self, figure: Union[Dict, go.Figure]):
     def update(self) -> None:
         self._props['options'] = self._get_figure_json()
         super().update()
-        self.run_method('update')
 
     def _get_figure_json(self) -> Dict:
         if isinstance(self.figure, go.Figure):

nicegui/elements/teleport.py

@@ -16,11 +16,4 @@ def __init__(self, to: Union[str, Element]) -> None:
         if isinstance(to, Element):
             to = f'#c{to.id}'
         self._props['to'] = to
-
-    def update(self) -> None:
-        """Force the internal content to be retransmitted to the specified location.
-
-        This method is usually called after the target container is rebuilt.
-        """
-        super().update()
-        self.run_method('update')
+        self._update_method = 'update'

nicegui/static/nicegui.js

@@ -25,6 +25,7 @@ function replaceUndefinedAttributes(element) {
   element.props ??= {};
   element.text ??= null;
   element.events ??= [];
+  element.update_method ??= null;
   element.component ??= null;
   element.libraries ??= [];
   element.slots = {
@@ -386,6 +387,13 @@ function createApp(elements, options) {
             replaceUndefinedAttributes(element);
             this.elements[id] = element;
           }
+
+          await this.$nextTick();
+          for (const [id, element] of Object.entries(msg)) {
+            if (element?.update_method) {
+              getElement(id)[element.update_method]();
+            }
+          }
         },
         run_javascript: (msg) => runJavascript(msg.code, msg.request_id),
         open: (msg) => {