refactor

Author: Andrei Neagu

services/dynamic-scheduler/src/simcore_service_dynamic_scheduler/api/frontend/_common/_mixins.py

@@ -0,0 +1,32 @@
+from abc import ABC, abstractmethod
+from functools import cached_property
+
+from nicegui import ui
+from nicegui.element import Element
+
+
+class ParentMixin:
+    def __init__(self) -> None:
+        self._parent: Element | None = None
+
+    @staticmethod
+    def _get_parent() -> Element:
+        """overwrite to use a different parent element"""
+        return ui.element()
+
+    @cached_property
+    def parent(self) -> Element:
+        if self._parent is None:
+            self._parent = self._get_parent()
+        return self._parent
+
+    def remove_parent(self) -> None:
+        if self._parent is not None:
+            self._parent.delete()
+            self._parent = None
+
+
+class DisplayaMixin(ABC):
+    @abstractmethod
+    def display(self) -> None:
+        """creates ui elements inside the parent container"""

services/dynamic-scheduler/src/simcore_service_dynamic_scheduler/api/frontend/_common/some_renderer.py

@@ -1,9 +1,6 @@
-from functools import cached_property
 from typing import Generic, TypeAlias, TypeVar
 
-from nicegui import ui
-from nicegui.element import Element
-
+from ._mixins import DisplayaMixin, ParentMixin
 from .base_display_model import BaseUpdatableDisplayModel
 from .updatable_component import BaseUpdatableComponent
 
@@ -12,35 +9,13 @@
 Reference: TypeAlias = str
 
 
-class SomeRenderer(Generic[M]):
+class UpdatableComponentList(DisplayaMixin, ParentMixin, Generic[M]):
     def __init__(self, component: type[BaseUpdatableComponent]) -> None:
+        super().__init__()
         self.component = component
 
         self._added_models: dict[Reference, M] = {}
-        self._rendered_models: dict[Reference, BaseUpdatableComponent] = (
-            {}
-        )  # TODO: might only need a set here
-
-        self._parent: Element | None = None
-
-    @cached_property
-    def parent(self) -> Element:
-        if self._parent is None:
-            self._parent = ui.element()  # this is an empty div as a parent
-        return self._parent
-
-    def add_or_update_model(self, reference: Reference, model: M) -> None:
-        if reference not in self._added_models:
-            self._added_models[reference] = model
-            self._render_component(reference)
-        else:
-            self._added_models[reference].update(model)
-
-    def remove_model(self, reference: Reference) -> None:
-        if reference in self._added_models:
-            self._added_models[reference].remove_from_ui()
-            del self._added_models[reference]
-            del self._rendered_models[reference]
+        self._rendered_models: set[Reference] = set()
 
     def _render_to_parent(self) -> None:
         with self.parent:
@@ -53,7 +28,33 @@ def _render_component(self, reference: Reference) -> None:
             model = self._added_models[reference]
             component = self.component(model)
             component.display()
-            self._rendered_models[reference] = component
+            self._rendered_models.add(reference)
 
     def display(self) -> None:
         self._render_to_parent()
+
+    def add_or_update_model(self, reference: Reference, display_model: M) -> None:
+        """adds or updates and existing ui element form a given model"""
+        if reference not in self._added_models:
+            self._added_models[reference] = display_model
+            self._render_component(reference)
+        else:
+            self._added_models[reference].update(display_model)
+
+    def remove_model(self, reference: Reference) -> None:
+        """removes a model from the ui via it's given reference"""
+        if reference in self._added_models:
+            self._added_models[reference].remove_from_ui()
+            del self._added_models[reference]
+            self._rendered_models.remove(reference)
+
+    def update_from_dict(self, models: dict[Reference, M]) -> None:
+        """updates UI given a new input"""
+        # remove models that are not in the new list
+        for reference in tuple(self._added_models.keys()):
+            if reference not in models:
+                self.remove_model(reference)
+
+        # add or update existing models
+        for reference, model in models.items():
+            self.add_or_update_model(reference, model)

services/dynamic-scheduler/src/simcore_service_dynamic_scheduler/api/frontend/_common/updatable_component.py

@@ -1,30 +1,21 @@
-from abc import ABC, abstractmethod
+from abc import abstractmethod
 from typing import Generic, TypeVar
 
-from nicegui import ui
-from nicegui.element import Element
-
+from ._mixins import DisplayaMixin, ParentMixin
 from .base_display_model import BaseUpdatableDisplayModel
 
-T = TypeVar("T", bound=BaseUpdatableDisplayModel)
-
+M = TypeVar("M", bound=BaseUpdatableDisplayModel)
 
-class BaseUpdatableComponent(ABC, Generic[T]):
-    def __init__(self, display_model: T):
-        self.display_model = display_model
 
-        self._parent: Element | None = None
-        self.display_model.on_remove_from_ui(self._remove_from_ui)
+class BaseUpdatableComponent(DisplayaMixin, ParentMixin, Generic[M]):
+    def __init__(self, display_model: M):
+        super().__init__()
 
-    def _remove_from_ui(self) -> None:
-        if self._parent is not None:
-            self._parent.delete()
-            self._parent = None
+        self.display_model = display_model
+        self.display_model.on_remove_from_ui(self.remove_parent)
 
     def display(self) -> None:
-        if self._parent is None:
-            self._parent = ui.element()  # this is an empty div as a parent
-        with self._parent:
+        with self.parent:
             self._draw_ui()
 
     @abstractmethod

services/dynamic-scheduler/tests/unit/api_frontend/_common/test_updatable_component.py

@@ -17,7 +17,7 @@
     BaseUpdatableDisplayModel,
 )
 from simcore_service_dynamic_scheduler.api.frontend._common.some_renderer import (
-    SomeRenderer,
+    UpdatableComponentList,
 )
 from simcore_service_dynamic_scheduler.api.frontend._common.updatable_component import (
     BaseUpdatableComponent,
@@ -159,41 +159,42 @@ def _draw_ui(self) -> None:
 
 class PersonComponent(BaseUpdatableComponent[Person]):
     def _draw_ui(self) -> None:
-        # NOTE:
-        # There are 3 ways to bind the UI to the model changes:
-        # 1. using nicegui builting facilties
-        # 2. via model attribute VALE change
-        # 3. via model attribute TYPE change
-        # The model attribute changes allow to trigger re-rendering of subcomponents.
-        # This should be mainly used for chainging the UI layout based on
-        # the attribute's value or type.
-
-        # 1. bind the label directly to the model's attribute
-        ui.label().bind_text_from(
-            self.display_model,
-            "name",
-            backward=lambda name: f"Name: {name}",
-        )
-
-        # 2. use refreshable and bind to the attribute's VALUE change
-        @ui.refreshable
-        def _person_age_ui() -> None:
-            ui.label(f"Age: {self.display_model.age}")
-
-        _person_age_ui()
-        self.display_model.on_value_change("age", _person_age_ui.refresh)
-
-        # 3. use refreshable and bind to the attribute's TYPE change
-        @ui.refreshable
-        def _friend_or_pet_ui() -> None:
-            if isinstance(self.display_model.companion, Friend):
-                FriendComponent(self.display_model.companion).display()
-
-            elif isinstance(self.display_model.companion, Pet):
-                PetComponent(self.display_model.companion).display()
-
-        _friend_or_pet_ui()
-        self.display_model.on_type_change("companion", _friend_or_pet_ui.refresh)
+        with ui.element().classes("border"):
+            # NOTE:
+            # There are 3 ways to bind the UI to the model changes:
+            # 1. using nicegui builting facilties
+            # 2. via model attribute VALE change
+            # 3. via model attribute TYPE change
+            # The model attribute changes allow to trigger re-rendering of subcomponents.
+            # This should be mainly used for chainging the UI layout based on
+            # the attribute's value or type.
+
+            # 1. bind the label directly to the model's attribute
+            ui.label().bind_text_from(
+                self.display_model,
+                "name",
+                backward=lambda name: f"Name: {name}",
+            )
+
+            # 2. use refreshable and bind to the attribute's VALUE change
+            @ui.refreshable
+            def _person_age_ui() -> None:
+                ui.label(f"Age: {self.display_model.age}")
+
+            _person_age_ui()
+            self.display_model.on_value_change("age", _person_age_ui.refresh)
+
+            # 3. use refreshable and bind to the attribute's TYPE change
+            @ui.refreshable
+            def _friend_or_pet_ui() -> None:
+                if isinstance(self.display_model.companion, Friend):
+                    FriendComponent(self.display_model.companion).display()
+
+                elif isinstance(self.display_model.companion, Pet):
+                    PetComponent(self.display_model.companion).display()
+
+            _friend_or_pet_ui()
+            self.display_model.on_type_change("companion", _friend_or_pet_ui.refresh)
 
 
 async def _ensure_before_corpus(async_page: Page) -> None:
@@ -331,13 +332,17 @@ async def test_multiple_componenets_management(
     ensure_page_loaded: Callable[[Callable[[], None]], Awaitable[None]],
     async_page: Page,
 ):
-    renderer = SomeRenderer[Person](PersonComponent)
+    renderer = UpdatableComponentList[Person](PersonComponent)
 
     def _index_corpus() -> None:
         renderer.display()
 
     await ensure_page_loaded(_index_corpus)
 
+    from helpers import take_screenshot
+
+    await take_screenshot(async_page, prefix="1.before")
+
     person_1 = Person(name="Alice", age=30, companion=Pet(name="Fluffy", species="cat"))
     person_2 = Person(name="Bob", age=25, companion=Friend(name="Marta", age=28))
 
@@ -350,10 +355,33 @@ def _index_corpus() -> None:
     await _ensure_person_is_present(async_page, person_1)
     await _ensure_person_is_present(async_page, person_2)
 
+    await take_screenshot(async_page, prefix="2.persons-added")
+
     renderer.remove_model("person_1")
     await _ensure_person_not_present(async_page, person_1)
     await _ensure_person_is_present(async_page, person_2)
 
+    await take_screenshot(async_page, prefix="3.person-1-removed")
+
     renderer.remove_model("person_2")
     await _ensure_person_not_present(async_page, person_2)
     await _ensure_person_not_present(async_page, person_1)
+
+    await take_screenshot(async_page, prefix="4.person-2-removed")
+
+    renderer.update_from_dict({"person_1": person_1, "person_2": person_2})
+    await _ensure_person_is_present(async_page, person_1)
+    await _ensure_person_is_present(async_page, person_2)
+
+    await take_screenshot(async_page, prefix="5.persons-added")
+
+    renderer.update_from_dict({"person_1": person_1})
+    await _ensure_person_is_present(async_page, person_1)
+    await _ensure_person_not_present(async_page, person_2)
+
+    await take_screenshot(async_page, prefix="6.person-2-removed")
+
+    renderer.update_from_dict({})
+    await _ensure_person_not_present(async_page, person_1)
+    await _ensure_person_not_present(async_page, person_2)
+    await take_screenshot(async_page, prefix="7.person-1-removed")