fix(ui): use class components

src/nrtk_explorer/app/core.py

@@ -24,8 +24,6 @@
 html.Template.slot_names.add("before")
 html.Template.slot_names.add("after")
 
-HORIZONTAL_SPLIT_DEFAULT_VALUE = 17
-VERTICAL_SPLIT_DEFAULT_VALUE = 40
 
 DIR_NAME = os.path.dirname(nrtk_explorer.test_data.__file__)
 DEFAULT_DATASETS = [
@@ -55,10 +53,6 @@ def __init__(self, server=None):
 
         self.ctrl.get_image_fpath = lambda i: get_image_fpath(i, self.state.current_dataset)
 
-        self.state.horizontal_split = HORIZONTAL_SPLIT_DEFAULT_VALUE
-        self.state.vertical_split = VERTICAL_SPLIT_DEFAULT_VALUE
-        self.state.client_only("horizontal_split", "vertical_split")
-
         self._transforms_app = TransformsApp(server=self.server.create_child_server())
 
         self._embeddings_app = EmbeddingsApp(
@@ -76,9 +70,6 @@ def __init__(self, server=None):
         self._transforms_app.set_on_hover(self._embeddings_app.on_image_hovered)
         self._filtering_app.set_on_apply_filter(self.on_filter_apply)
 
-        # Set state variable
-        self.state.trame__title = "nrtk_explorer"
-
         # Bind instance methods to controller
         self.ctrl.on_server_reload = self._build_ui
         self.ctrl.add("on_server_ready")(self.on_server_ready)
@@ -160,7 +151,7 @@ def _build_ui(self):
             ui.reload(ui)
             extra_args["reload"] = self._build_ui
 
-        self.ui = ui.build_layout(
+        self.ui = ui.NrtkExplorerLayout(
             server=self.server,
             dataset_paths=self.input_paths,
             embeddings_app=self._embeddings_app,

src/nrtk_explorer/app/ui/__init__.py

@@ -1,6 +1,6 @@
-from .layout import build_layout
+from .layout import NrtkExplorerLayout
 from .image_list import ImageList
-from .collapsible_card import card
+from .collapsible_card import CollapsibleCard
 
 
 def reload(m=None):
@@ -14,7 +14,7 @@ def reload(m=None):
 
 
 __all__ = [
-    "build_layout",
+    "NrtkExplorerLayout",
     "ImageList",
-    "card",
+    "CollapsibleCard",
 ]

src/nrtk_explorer/app/ui/collapsible_card.py

@@ -1,37 +1,31 @@
 from trame.widgets import quasar
 from trame.widgets import html
-from trame.app import get_server
 
-state = get_server().state
-card_count = 0
 
+class CollapsibleCard(quasar.QCard):
+    id_count = 0
 
-def get_card_open_key():
-    global card_count
-    card_count += 1
-    key = f"is_card_open_{card_count}"
-    state[key] = True
-    state.client_only(key)
-    return key
+    def __init__(self, name=None, collapsed=False, **kwargs):
+        super().__init__(**kwargs)
 
+        if name is None:
+            CollapsibleCard.id_count += 1
+            name = f"is_card_open_{CollapsibleCard.id_count}"
+            self.state.client_only(name)  # keep it local if not provided
 
-def card(open_key=None):
-    key = open_key if open_key is not None else get_card_open_key()
-    with quasar.QCard():
-        with quasar.QCardSection():
-            with html.Div(classes="row items-center no-wrap"):
-                title_slot = html.Div(classes="col")
-                with html.Div(classes="col-auto"):
-                    quasar.QBtn(
-                        round=True,
-                        flat=True,
-                        dense=True,
-                        click=f"{key} = !{key}",
-                        icon=(f"{key} ? 'keyboard_arrow_up' : 'keyboard_arrow_down'",),
-                    )
-        with quasar.QSlideTransition():
-            with html.Div(v_show=f"{key}"):
-                content_slot = quasar.QCardSection()
-                actions_slot = quasar.QCardActions(align="right")
-
-    return title_slot, content_slot, actions_slot
+        with self:
+            with quasar.QCardSection():
+                with html.Div(classes="row items-center no-wrap"):
+                    self.slot_title = html.Div(classes="col")
+                    with html.Div(classes="col-auto"):
+                        quasar.QBtn(
+                            round=True,
+                            flat=True,
+                            dense=True,
+                            click=f"{name} = !{name}",
+                            icon=(f"{name} ? 'keyboard_arrow_up' : 'keyboard_arrow_down'",),
+                        )
+            with quasar.QSlideTransition():
+                with html.Div(v_show=(name, not collapsed)):
+                    self.slot_content = quasar.QCardSection()
+                    self.slot_actions = quasar.QCardActions(align="right")