Fixed InstancesDebugger not showing. Added mk.label

src/app.py

@@ -37,9 +37,11 @@ def index(session):
                                     command=layout.commands.toggle_drawer("right"),
                                     id="btn_show_right_drawer_id")
   
-  btn_show_instances_debugger = mk.icon(volume_object_storage,
-                                        command=tabs_manager.commands.add_tab("Instances", instances_debugger),
-                                        id=instances_debugger.get_id())
+  btn_show_instances_debugger = mk.label("Instances",
+                                         icon=volume_object_storage,
+                                         command=tabs_manager.commands.add_tab("Instances", instances_debugger),
+                                         id=instances_debugger.get_id())
+  
   layout.header_left.add(tabs_manager.add_tab_btn())
   layout.header_right.add(btn_show_right_drawer)
   layout.left_drawer.add(btn_show_instances_debugger)

src/myfasthtml/assets/myfasthtml.css

@@ -2,20 +2,19 @@
     --color-border-primary: color-mix(in oklab, var(--color-primary) 40%, #0000);
 }
 
+
+.mf-icon-16 {
+    width: 16px;
+    min-width: 16px;
+    height: 16px;
+    margin-top: auto;
+}
+
 .mf-icon-20 {
     width: 20px;
     min-width: 20px;
     height: 20px;
     margin-top: auto;
-    margin-bottom: auto;
-}
-
-.mf-icon-16 {
-    width: 16px;
-    min-width: 16px;
-    height: 16px;
-    margin-top: auto;
-    margin-bottom: 4px;
 }
 
 .mf-icon-24 {
@@ -23,7 +22,14 @@
     min-width: 24px;
     height: 24px;
     margin-top: auto;
-    margin-bottom: 4px;
+
+}
+
+.mf-icon-28 {
+    width: 28px;
+    min-width: 28px;
+    height: 28px;
+    margin-top: auto;
 }
 
 .mf-icon-32 {
@@ -31,7 +37,6 @@
     min-width: 32px;
     height: 32px;
     margin-top: auto;
-    margin-bottom: 4px;
 }
 
 /*

src/myfasthtml/controls/helpers.py

@@ -41,6 +41,27 @@ class mk:
     
     return mk.mk(Div(icon, cls=merged_cls, **kwargs), command=command, binding=binding)
   
+  @staticmethod
+  def label(text: str,
+            icon=None,
+            size: str = "sm",
+            cls='',
+            command: Command = None,
+            binding: Binding = None,
+            **kwargs):
+    merged_cls = merge_classes("flex", cls, kwargs)
+    icon_part = Span(icon, cls=f"mf-icon-{mk.convert_size(size)} mr-1") if icon else None
+    text_part = Span(text, cls=f"text-{size}")
+    return mk.mk(Label(icon_part, text_part, cls=merged_cls, **kwargs), command=command, binding=binding)
+  
+  @staticmethod
+  def convert_size(size: str):
+    return (size.replace("xs", "16").
+            replace("sm", "20").
+            replace("md", "24").
+            replace("lg", "28").
+            replace("xl", "32"))
+  
   @staticmethod
   def manage_command(ft, command: Command):
     if command:

src/myfasthtml/core/instances_helper.py

@@ -1,12 +1,22 @@
+import logging
+
+from myfasthtml.controls.InstancesDebugger import InstancesDebugger
 from myfasthtml.controls.VisNetwork import VisNetwork
 from myfasthtml.controls.helpers import Ids
-from myfasthtml.core.instances import BaseInstance
+from myfasthtml.core.instances import BaseInstance, InstancesManager
+
+logger = logging.getLogger("InstancesHelper")
 
 
 class InstancesHelper:
   @staticmethod
   def dynamic_get(parent: BaseInstance, component_type: str, instance_id: str):
     if component_type == Ids.VisNetwork:
-      return VisNetwork(parent, _id=instance_id)
+      return InstancesManager.get(parent.get_session(), instance_id,
+                                  VisNetwork, parent=parent, _id=instance_id)
+    elif component_type == Ids.InstancesDebugger:
+      return InstancesManager.get(parent.get_session(), instance_id,
+                                  InstancesDebugger, parent.get_session(), parent, instance_id)
     
+    logger.warning(f"Unknown component type: {component_type}")
     return None