Added tests for Layout and Treeview

src/app.py

@@ -4,6 +4,7 @@ import yaml
 from fasthtml import serve
 
 from myfasthtml.controls.CommandsDebugger import CommandsDebugger
+from myfasthtml.controls.DataGridsManager import DataGridsManager
 from myfasthtml.controls.Dropdown import Dropdown
 from myfasthtml.controls.FileUpload import FileUpload
 from myfasthtml.controls.InstancesDebugger import InstancesDebugger
@@ -44,38 +45,38 @@ def create_sample_treeview(parent):
       TreeView: Configured TreeView instance with sample data
   """
   tree_view = TreeView(parent, _id="-treeview")
-
+  
   # Create sample file structure
   projects = TreeNode(label="Projects", type="folder")
   tree_view.add_node(projects)
-
+  
   myfasthtml = TreeNode(label="MyFastHtml", type="folder")
   tree_view.add_node(myfasthtml, parent_id=projects.id)
-
+  
   app_py = TreeNode(label="app.py", type="file")
   tree_view.add_node(app_py, parent_id=myfasthtml.id)
-
+  
   readme = TreeNode(label="README.md", type="file")
   tree_view.add_node(readme, parent_id=myfasthtml.id)
-
+  
   src_folder = TreeNode(label="src", type="folder")
   tree_view.add_node(src_folder, parent_id=myfasthtml.id)
-
+  
   controls_py = TreeNode(label="controls.py", type="file")
   tree_view.add_node(controls_py, parent_id=src_folder.id)
-
+  
   documents = TreeNode(label="Documents", type="folder")
   tree_view.add_node(documents, parent_id=projects.id)
-
+  
   notes = TreeNode(label="notes.txt", type="file")
   tree_view.add_node(notes, parent_id=documents.id)
-
+  
   todo = TreeNode(label="todo.md", type="file")
   tree_view.add_node(todo, parent_id=documents.id)
-
+  
   # Expand all nodes to show the full structure
-  #tree_view.expand_all()
-
+  # tree_view.expand_all()
+  
   return tree_view
 
 
@@ -110,10 +111,10 @@ def index(session):
   
   btn_popup = mk.label("Popup",
                        command=add_tab("Popup", Dropdown(layout, "Content", button="button", _id="-dropdown")))
-
+  
   # Create TreeView with sample data
   tree_view = create_sample_treeview(layout)
-
+  
   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, "Debugger")
@@ -121,6 +122,7 @@ def index(session):
   layout.left_drawer.add(btn_file_upload, "Test")
   layout.left_drawer.add(btn_popup, "Test")
   layout.left_drawer.add(tree_view, "TreeView")
+  layout.left_drawer.add(DataGridsManager(layout, _id="-datagrids"), "Documents")
   layout.set_main(tabs_manager)
   keyboard = Keyboard(layout, _id="-keyboard").add("ctrl+o",
                                                    add_tab("File Open", FileUpload(layout, _id="-file_upload")))

src/myfasthtml/assets/myfasthtml.css

@@ -13,6 +13,7 @@
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
     --properties-font-size: var(--text-xs);
+    --mf-tooltip-zindex: 10;
 }
 
 
@@ -58,6 +59,26 @@
  * Compatible with DaisyUI 5
  */
 
+.mf-tooltip-container {
+    background: var(--color-base-200);
+    padding: 5px 10px;
+    border-radius: 4px;
+    pointer-events: none; /* Prevent interfering with mouse events */
+    font-size: 12px;
+    white-space: nowrap;
+    opacity: 0; /* Default to invisible */
+    visibility: hidden; /* Prevent interaction when invisible */
+    transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Delay visibility removal */
+    position: fixed; /* Keep it above other content and adjust position */
+    z-index: var(--mf-tooltip-zindex); /* Ensure it's on top */
+}
+
+.mf-tooltip-container[data-visible="true"] {
+    opacity: 1;
+    visibility: visible; /* Show tooltip */
+    transition: opacity 0.3s ease; /* No delay when becoming visible */
+}
+
 /* Main layout container using CSS Grid */
 .mf-layout {
     display: grid;
@@ -634,7 +655,6 @@
 /* *************** Panel Component *************** */
 /* *********************************************** */
 
-/* Container principal du panel */
 .mf-panel {
     display: flex;
     width: 100%;
@@ -643,7 +663,6 @@
     position: relative;
 }
 
-/* Panel gauche */
 .mf-panel-left {
     position: relative;
     flex-shrink: 0;
@@ -655,15 +674,13 @@
     border-right: 1px solid var(--color-border-primary);
 }
 
-/* Panel principal (centre) */
 .mf-panel-main {
     flex: 1;
     height: 100%;
     overflow: auto;
-    min-width: 0; /* Important pour permettre le shrink du flexbox */
+    min-width: 0; /* Important to allow the shrinking of flexbox */
 }
 
-/* Panel droit */
 .mf-panel-right {
     position: relative;
     flex-shrink: 0;

src/myfasthtml/assets/myfasthtml.js

@@ -159,6 +159,113 @@ function initResizer(containerId, options = {}) {
   });
 }
 
+function bindTooltipsWithDelegation(elementId) {
+  // To display the tooltip, the attribute 'data-tooltip' is mandatory => it contains the text to tooltip
+  // Then
+  //      the 'truncate' to show only when the text is truncated
+  //      the class 'mmt-tooltip' for force the display
+
+  console.info("bindTooltips on element " + elementId);
+
+  const element = document.getElementById(elementId);
+  const tooltipContainer = document.getElementById(`tt_${elementId}`);
+
+
+  if (!element) {
+    console.error(`Invalid element '${elementId}' container`);
+    return;
+  }
+
+  if (!tooltipContainer) {
+    console.error(`Invalid tooltip 'tt_${elementId}' container.`);
+    return;
+  }
+
+  // Add a single mouseenter and mouseleave listener to the parent element
+  element.addEventListener("mouseenter", (event) => {
+    //console.debug("Entering element", event.target)
+
+    const cell = event.target.closest("[data-tooltip]");
+    if (!cell) {
+      // console.debug("  No 'data-tooltip' attribute found. Stopping.");
+      return;
+    }
+
+    const no_tooltip = element.hasAttribute("mf-no-tooltip");
+    if (no_tooltip) {
+      // console.debug("  Attribute 'mmt-no-tooltip' found. Cancelling.");
+      return;
+    }
+
+    const content = cell.querySelector(".truncate") || cell;
+    const isOverflowing = content.scrollWidth > content.clientWidth;
+    const forceShow = cell.classList.contains("mf-tooltip");
+
+    if (isOverflowing || forceShow) {
+      const tooltipText = cell.getAttribute("data-tooltip");
+      if (tooltipText) {
+        const rect = cell.getBoundingClientRect();
+        const tooltipRect = tooltipContainer.getBoundingClientRect();
+
+        let top = rect.top - 30; // Above the cell
+        let left = rect.left;
+
+        // Adjust tooltip position to prevent it from going off-screen
+        if (top < 0) top = rect.bottom + 5; // Move below if no space above
+        if (left + tooltipRect.width > window.innerWidth) {
+          left = window.innerWidth - tooltipRect.width - 5; // Prevent overflow right
+        }
+
+        // Apply styles for tooltip positioning
+        requestAnimationFrame(() => {
+          tooltipContainer.textContent = tooltipText;
+          tooltipContainer.setAttribute("data-visible", "true");
+          tooltipContainer.style.top = `${top}px`;
+          tooltipContainer.style.left = `${left}px`;
+        });
+      }
+    }
+  }, true); // Use capture phase for better delegation if needed
+
+  element.addEventListener("mouseleave", (event) => {
+    const cell = event.target.closest("[data-tooltip]");
+    if (cell) {
+      tooltipContainer.setAttribute("data-visible", "false");
+    }
+  }, true); // Use capture phase for better delegation if needed
+}
+
+function initLayout(elementId) {
+  initResizer(elementId);
+  bindTooltipsWithDelegation(elementId);
+}
+
+function disableTooltip() {
+  const elementId = tooltipElementId
+  // console.debug("disableTooltip on element " + elementId);
+
+  const element = document.getElementById(elementId);
+  if (!element) {
+    console.error(`Invalid element '${elementId}' container`);
+    return;
+  }
+
+  element.setAttribute("mmt-no-tooltip", "");
+}
+
+function enableTooltip() {
+  const elementId = tooltipElementId
+  // console.debug("enableTooltip on element " + elementId);
+
+  const element = document.getElementById(elementId);
+  if (!element) {
+    console.error(`Invalid element '${elementId}' container`);
+    return;
+  }
+
+  element.removeAttribute("mmt-no-tooltip");
+}
+
 function initBoundaries(elementId, updateUrl) {
   function updateBoundaries() {
     const container = document.getElementById(elementId);
@@ -363,7 +470,6 @@ function updateTabs(controllerId) {
 
     for (const [combinationStr, config] of Object.entries(combinations)) {
       const sequence = parseCombination(combinationStr);
-      console.log("Parsing combination", combinationStr, "=>", sequence);
       let currentNode = root;
 
       for (const keySet of sequence) {
@@ -1354,4 +1460,5 @@ function updateTabs(controllerId) {
       detachGlobalListener();
     }
   };
-})();
+})();
+

src/myfasthtml/controls/DataGrid.py

@@ -0,0 +1,59 @@
+from typing import Optional
+
+from fasthtml.components import Div
+
+from myfasthtml.controls.BaseCommands import BaseCommands
+from myfasthtml.controls.datagrid_objects import DataGridColumnState, DataGridRowState, DataGridFooterConf, \
+  DatagridSelectionState, DataGridHeaderFooterConf, DatagridEditionState
+from myfasthtml.core.dbmanager import DbObject
+from myfasthtml.core.instances import MultipleInstance
+
+
+class DatagridState(DbObject):
+  def __init__(self, owner):
+    super().__init__(owner)
+    with self.initializing():
+      self.sidebar_visible: bool = False
+      self.selected_view: str = None
+      self.row_index: bool = False
+      self.columns: list[DataGridColumnState] = []
+      self.rows: list[DataGridRowState] = []  # only the rows that have a specific state
+      self.headers: list[DataGridHeaderFooterConf] = []
+      self.footers: list[DataGridHeaderFooterConf] = []
+      self.sorted: list = []
+      self.filtered: dict = {}
+      self.edition: DatagridEditionState = DatagridEditionState()
+      self.selection: DatagridSelectionState = DatagridSelectionState()
+
+
+class DatagridSettings(DbObject):
+  def __init__(self, owner):
+    super().__init__(owner)
+    with self.initializing():
+      self.file_name: Optional[str] = None
+      self.selected_sheet_name: Optional[str] = None
+      self.header_visible: bool = True
+      self.filter_all_visible: bool = True
+      self.views_visible: bool = True
+      self.open_file_visible: bool = True
+      self.open_settings_visible: bool = True
+
+
+class Commands(BaseCommands):
+  pass
+
+
+class DataGrid(MultipleInstance):
+  def __init__(self, parent, settings=None, _id=None):
+    super().__init__(parent, _id=_id)
+    self._settings = DatagridSettings(self).update(settings)
+    self._state = DatagridState(self)
+    self.commands = Commands(self)
+  
+  def render(self):
+    return Div(
+      self._id
+    )
+  
+  def __ft__(self):
+    return self.render()

src/myfasthtml/controls/DataGridsManager.py

@@ -0,0 +1,58 @@
+import pandas as pd
+from fasthtml.components import Div
+
+from myfasthtml.controls.BaseCommands import BaseCommands
+from myfasthtml.controls.TabsManager import TabsManager
+from myfasthtml.controls.TreeView import TreeView
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.commands import Command
+from myfasthtml.core.instances import MultipleInstance, InstancesManager
+from myfasthtml.icons.fluent_p1 import table_add20_regular
+from myfasthtml.icons.fluent_p3 import folder_open20_regular
+
+
+class Commands(BaseCommands):
+  def upload_from_source(self):
+    return Command("UploadFromSource", "Upload from source", self._owner.upload_from_source)
+  
+  def new_grid(self):
+    return Command("NewGrid", "New grid", self._owner.new_grid)
+  
+  def open_from_excel(self, tab_id, get_content_callback):
+    excel_content = get_content_callback()
+    return Command("OpenFromExcel", "Open from Excel", self._owner.open_from_excel, tab_id, excel_content)
+
+
+class DataGridsManager(MultipleInstance):
+  def __init__(self, parent, _id=None):
+    super().__init__(parent, _id=_id)
+    self.tree = TreeView(self, _id="-treeview")
+    self.commands = Commands(self)
+    self._tabs_manager = InstancesManager.get_by_type(self._session, TabsManager)
+  
+  def upload_from_source(self):
+    from myfasthtml.controls.FileUpload import FileUpload
+    file_upload = FileUpload(self, _id="-file-upload", auto_register=False)
+    self._tabs_manager = InstancesManager.get_by_type(self._session, TabsManager)
+    tab_id = self._tabs_manager.add_tab("Upload Datagrid", file_upload)
+    file_upload.on_ok = self.commands.open_from_excel(tab_id, file_upload.get_content)
+    return self._tabs_manager.show_tab(tab_id)
+  
+  def open_from_excel(self, tab_id, excel_content):
+    df = pd.read_excel(excel_content)
+    content = df.to_html(index=False)
+    self._tabs_manager.switch(tab_id, content)
+  
+  def render(self):
+    return Div(
+      Div(
+        mk.icon(folder_open20_regular, tooltip="Upload from source", command=self.commands.upload_from_source()),
+        mk.icon(table_add20_regular, tooltip="New grid"),
+        cls="flex"
+      ),
+      self.tree,
+      id=self._id,
+    )
+  
+  def __ft__(self):
+    return self.render()

src/myfasthtml/controls/FileUpload.py

@@ -6,7 +6,7 @@ from fastapi import UploadFile
 from fasthtml.components import *
 
 from myfasthtml.controls.BaseCommands import BaseCommands
-from myfasthtml.controls.helpers import Ids, mk
+from myfasthtml.controls.helpers import mk
 from myfasthtml.core.commands import Command
 from myfasthtml.core.dbmanager import DbObject
 from myfasthtml.core.instances import MultipleInstance
@@ -24,6 +24,7 @@ class FileUploadState(DbObject):
       self.ns_file_name: str | None = None
       self.ns_sheets_names: list | None = None
       self.ns_selected_sheet_name: str | None = None
+      self.ns_file_content: bytes | None = None
 
 
 class Commands(BaseCommands):
@@ -44,16 +45,16 @@ class FileUpload(MultipleInstance):
   to ensure smooth operation within a parent application.
   """
   
-  def __init__(self, parent, _id=None):
-    super().__init__(parent, _id=_id)
+  def __init__(self, parent, _id=None, **kwargs):
+    super().__init__(parent, _id=_id, **kwargs)
     self.commands = Commands(self)
     self._state = FileUploadState(self)
   
   def upload_file(self, file: UploadFile):
     logger.debug(f"upload_file: {file=}")
     if file:
-      file_content = file.file.read()
-      self._state.ns_sheets_names = self.get_sheets_names(file_content)
+      self._state.ns_file_content = file.file.read()
+      self._state.ns_sheets_names = self.get_sheets_names(self._state.ns_file_content)
       self._state.ns_selected_sheet_name = self._state.ns_sheets_names[0] if len(self._state.ns_sheets_names) > 0 else 0
     
     return self.mk_sheet_selector()
@@ -72,6 +73,10 @@ class FileUpload(MultipleInstance):
       cls="select select-bordered select-sm w-full ml-2"
     )
   
+  def get_content(self):
+    return self._state.ns_file_content
+    
+  
   @staticmethod
   def get_sheets_names(file_content):
     try:

src/myfasthtml/controls/InstancesDebugger.py

@@ -21,13 +21,13 @@ class InstancesDebugger(SingleInstance):
   
   def on_network_event(self, event_data: dict):
     session, instance_id = event_data["nodes"][0].split("#")
-    properties = {"Main": {"Id": "_id", "Parent Id": "_parent._id"},
-                  "State": {"*": "_state"},
-                  "Commands": {"*": "commands"},
-                  }
+    properties_def = {"Main": {"Id": "_id", "Parent Id": "_parent._id"},
+                      "State": {"_name": "_state._name", "*": "_state"},
+                      "Commands": {"*": "commands"},
+                      }
     return self._panel.set_right(Properties(self,
                                             InstancesManager.get(session, instance_id),
-                                            properties,
+                                            properties_def,
                                             _id="-properties"))
   
   def _get_nodes_and_edges(self):

src/myfasthtml/controls/Layout.py

@@ -17,15 +17,17 @@ from myfasthtml.core.commands import Command
 from myfasthtml.core.dbmanager import DbObject
 from myfasthtml.core.instances import SingleInstance
 from myfasthtml.core.utils import get_id
-from myfasthtml.icons.fluent import panel_left_expand20_regular as left_drawer_icon
-from myfasthtml.icons.fluent_p2 import panel_right_expand20_regular as right_drawer_icon
+from myfasthtml.icons.fluent import panel_left_contract20_regular as left_drawer_contract
+from myfasthtml.icons.fluent import panel_left_expand20_regular as left_drawer_expand
+from myfasthtml.icons.fluent_p1 import panel_right_contract20_regular as right_drawer_contract
+from myfasthtml.icons.fluent_p2 import panel_right_expand20_regular as right_drawer_expand
 
 logger = logging.getLogger("LayoutControl")
 
 
 class LayoutState(DbObject):
-  def __init__(self, owner):
-    super().__init__(owner)
+  def __init__(self, owner, name=None):
+    super().__init__(owner, name=name)
     with self.initializing():
       self.left_drawer_open: bool = True
       self.right_drawer_open: bool = True
@@ -115,7 +117,7 @@ class Layout(SingleInstance):
     
     # Content storage
     self._main_content = None
-    self._state = LayoutState(self)
+    self._state = LayoutState(self, "default_layout")
     self._boundaries = Boundaries(self)
     self.commands = Commands(self)
     self.left_drawer = self.Content(self)
@@ -278,7 +280,14 @@ class Layout(SingleInstance):
     
     # Wrap content in scrollable container
     content_wrapper = Div(
-      *self.right_drawer.get_content(),
+      *[
+          (
+              Div(cls="divider") if index > 0 else None,
+              group_ft,
+              *[item for item in self.right_drawer.get_content()[group_name]]
+          )
+          for index, (group_name, group_ft) in enumerate(self.right_drawer.get_groups())
+      ],
       cls="mf-layout-drawer-content"
     )
     
@@ -291,12 +300,12 @@ class Layout(SingleInstance):
     )
   
   def _mk_left_drawer_icon(self):
-    return mk.icon(right_drawer_icon if self._state.left_drawer_open else left_drawer_icon,
+    return mk.icon(left_drawer_contract if self._state.left_drawer_open else left_drawer_expand,
                    id=f"{self._id}_ldi",
                    command=self.commands.toggle_drawer("left"))
   
   def _mk_right_drawer_icon(self):
-    return mk.icon(right_drawer_icon if self._state.left_drawer_open else left_drawer_icon,
+    return mk.icon(right_drawer_contract if self._state.right_drawer_open else right_drawer_expand,
                    id=f"{self._id}_rdi",
                    command=self.commands.toggle_drawer("right"))
   
@@ -324,12 +333,13 @@ class Layout(SingleInstance):
     
     # Wrap everything in a container div
     return Div(
+      Div(id=f"tt_{self._id}", cls="mf-tooltip-container"),  # container for the tooltips
       self._mk_header(),
       self._mk_left_drawer(),
       self._mk_main(),
       self._mk_right_drawer(),
       self._mk_footer(),
-      Script(f"initResizer('{self._id}');"),
+      Script(f"initLayout('{self._id}');"),
       id=self._id,
       cls="mf-layout",
     )

src/myfasthtml/controls/TabsManager.py

@@ -102,7 +102,11 @@ class TabsManager(MultipleInstance):
     tab_config = self._state.tabs[tab_id]
     if tab_config["component_type"] is None:
       return None
-    return InstancesManager.get(self._session,  tab_config["component_id"])
+    try:
+      return InstancesManager.get(self._session, tab_config["component_id"])
+    except Exception as e:
+      logger.error(f"Error while retrieving tab content: {e}")
+      return Div("Tab not found.")
   
   @staticmethod
   def _get_tab_count():
@@ -203,6 +207,11 @@ class TabsManager(MultipleInstance):
       logger.debug(f"  Content already exists. Just switch.")
       return self._mk_tabs_controller()
   
+  def switch_tab(self, tab_id, label, component, activate=True):
+    logger.debug(f"switch_tab {label=}, component={component}, activate={activate}")
+    self._add_or_update_tab(tab_id, label, component, activate)
+    return self.show_tab(tab_id) #
+  
   def close_tab(self, tab_id: str):
     """
     Close a tab and remove it from the tabs manager.
@@ -382,6 +391,34 @@ class TabsManager(MultipleInstance):
   def _get_tab_list(self):
     return [self._state.tabs[tab_id] for tab_id in self._state.tabs_order if tab_id in self._state.tabs]
   
+  def _add_or_update_tab(self, tab_id, label, component, activate):
+    state = self._state.copy()
+    
+    # Extract component ID if the component has a get_id() method
+    component_type, component_id = None, None
+    if isinstance(component, BaseInstance):
+      component_type = component.get_prefix() if isinstance(component, BaseInstance) else type(component).__name__
+      component_id = component.get_id()
+    
+    # Add tab metadata to state
+    state.tabs[tab_id] = {
+        'id': tab_id,
+        'label': label,
+        'component_type': component_type,
+        'component_id': component_id
+    }
+    
+    # Add the content
+    state._tabs_content[tab_id] = component
+    
+    # Activate tab if requested
+    if activate:
+      state.active_tab = tab_id
+    
+    # finally, update the state
+    self._state.update(state)
+    self._search.set_items(self._get_tab_list())
+  
   def update_boundaries(self):
     return Script(f"updateBoundaries('{self._id}');")
   

src/myfasthtml/controls/TreeView.py

@@ -334,12 +334,11 @@ class TreeView(MultipleInstance):
     
     # Toggle icon
     toggle = mk.icon(
-      chevron_down20_regular if is_expanded else chevron_right20_regular if has_children else " ",
+      chevron_down20_regular if is_expanded else chevron_right20_regular if has_children else None,
       command=self.commands.toggle_node(node_id))
     
     # Label or input for editing
     if is_editing:
-      # TODO: Bind input to save_rename (Enter) and cancel_rename (Escape)
       label_element = mk.mk(Input(
         name="node_label",
         value=node.label,
@@ -357,7 +356,6 @@ class TreeView(MultipleInstance):
       label_element,
       self._render_action_buttons(node_id),
       cls=f"mf-treenode flex {'selected' if is_selected and not is_editing else ''}",
-      data_node_id=node_id,
       style=f"padding-left: {level * 20}px"
     )
     
@@ -372,7 +370,8 @@ class TreeView(MultipleInstance):
     return Div(
       node_element,
       *children_elements,
-      cls="mf-treenode-container"
+      cls="mf-treenode-container",
+      data_node_id=node_id,
     )
   
   def render(self):
@@ -390,7 +389,7 @@ class TreeView(MultipleInstance):
     
     return Div(
       *[self._render_node(node_id) for node_id in root_nodes],
-      Keyboard(self, {"esc": self.commands.cancel_rename()}, _id="_keyboard"),
+      Keyboard(self, {"esc": self.commands.cancel_rename()}, _id="-keyboard"),
       id=self._id,
       cls="mf-treeview"
     )

src/myfasthtml/controls/datagrid_objects.py

@@ -0,0 +1,49 @@
+from dataclasses import dataclass, field
+
+from myfasthtml.core.constants import ColumnType, DEFAULT_COLUMN_WIDTH, ViewType
+
+
+@dataclass
+class DataGridRowState:
+  row_id: int
+  visible: bool = True
+  height: int | None = None
+
+@dataclass
+class DataGridColumnState:
+  col_id: str  # name of the column: cannot be changed
+  col_index: int  # index of the column in the dataframe: cannot be changed
+  title: str = None
+  type: ColumnType = ColumnType.Text
+  visible: bool = True
+  usable: bool = True
+  width: int = DEFAULT_COLUMN_WIDTH
+
+
+@dataclass
+class DatagridEditionState:
+  under_edition: tuple[int, int] | None = None
+  previous_under_edition: tuple[int, int] | None = None
+
+
+@dataclass
+class DatagridSelectionState:
+  selected: tuple[int, int] | None = None
+  last_selected: tuple[int, int] | None = None
+  selection_mode: str = None  # valid values are "row", "column" or None for "cell"
+  extra_selected: list[tuple[str, str | int]] = field(default_factory=list)  # list(tuple(selection_mode, element_id))
+  last_extra_selected: tuple[int, int] = None
+
+
+@dataclass
+class DataGridHeaderFooterConf:
+  conf: dict[str, str] = field(default_factory=dict)  # first 'str' is the column id
+
+
+
+
+@dataclass
+class DatagridView:
+  name: str
+  type: ViewType = ViewType.Table
+  columns: list[DataGridColumnState] = None

src/myfasthtml/controls/helpers.py

@@ -50,6 +50,7 @@ class mk:
            size=20,
            can_select=True,
            can_hover=False,
+           tooltip=None,
            cls='',
            command: Command = None,
            binding: Binding = None,
@@ -65,6 +66,7 @@ class mk:
     :param size: The size of the icon, specified in pixels. Defaults to 20.
     :param can_select: Indicates whether the icon can be selected. Defaults to True.
     :param can_hover: Indicates whether the icon reacts to hovering. Defaults to False.
+    :param tooltip:
     :param cls: A string of custom CSS classes to be added to the icon container.
     :param command: The command object defining the function to be executed on icon interaction.
     :param binding: The binding object for configuring additional event listeners on the icon.
@@ -79,6 +81,10 @@ class mk:
                                cls,
                                kwargs)
     
+    if tooltip:
+      merged_cls = merge_classes(merged_cls, "mf-tooltip")
+      kwargs["data-tooltip"] = tooltip
+    
     return mk.mk(Div(icon, cls=merged_cls, **kwargs), command=command, binding=binding)
   
   @staticmethod

src/myfasthtml/core/commands.py

@@ -135,7 +135,7 @@ class Command(BaseCommand):
   def __init__(self, name, description, callback, *args, **kwargs):
     super().__init__(name, description)
     self.callback = callback
-    self.callback_parameters = dict(inspect.signature(callback).parameters)
+    self.callback_parameters = dict(inspect.signature(callback).parameters) if callback else {}
     self.args = args
     self.kwargs = kwargs
   

src/myfasthtml/core/constants.py

@@ -1,5 +1,39 @@
+from enum import Enum
+
+DEFAULT_COLUMN_WIDTH = 100
+
 ROUTE_ROOT = "/myfasthtml"
 
+
 class Routes:
   Commands = "/commands"
-  Bindings = "/bindings"
+  Bindings = "/bindings"
+
+
+class ColumnType(Enum):
+  RowIndex = "RowIndex"
+  Text = "Text"
+  Number = "Number"
+  Datetime = "DateTime"
+  Bool = "Boolean"
+  Choice = "Choice"
+  List = "List"
+
+
+class ViewType(Enum):
+  Table = "Table"
+  Chart = "Chart"
+  Form = "Form"
+
+
+class FooterAggregation(Enum):
+  Sum = "Sum"
+  Mean = "Mean"
+  Min = "Min"
+  Max = "Max"
+  Count = "Count"
+  FilteredSum = "FilteredSum"
+  FilteredMean = "FilteredMean"
+  FilteredMin = "FilteredMin"
+  FilteredMax = "FilteredMax"
+  FilteredCount = "FilteredCount"

src/myfasthtml/core/dbmanager.py

@@ -39,7 +39,7 @@ class DbObject:
   
   def __init__(self, owner: BaseInstance, name=None, db_manager=None):
     self._owner = owner
-    self._name = name or self.__class__.__name__
+    self._name = name or owner.get_full_id()
     self._db_manager = db_manager or DbManager(self._owner)
     
     self._finalize_initialization()
@@ -112,6 +112,7 @@ class DbObject:
         setattr(self, k, v)
     self._save_self()
     self._initializing = old_state
+    return self
   
   def copy(self):
     as_dict = self._get_properties().copy()

src/myfasthtml/core/instances.py

@@ -176,12 +176,22 @@ class InstancesManager:
     :param instance_id:
     :return:
     """
-    session_id = InstancesManager.get_session_id(session) if isinstance(session, dict) else session
+    session_id = InstancesManager.get_session_id(session)
     key = (session_id, instance_id)
     return InstancesManager.instances[key]
   
+  @staticmethod
+  def get_by_type(session: dict, cls: type):
+    session_id = InstancesManager.get_session_id(session)
+    res = [i for s, i in InstancesManager.instances.items() if s[0] == session_id and isinstance(i, cls)]
+    assert len(res) <= 1, f"Multiple instances of type {cls.__name__} found"
+    assert len(res) > 0, f"No instance of type {cls.__name__} found"
+    return res[0]
+  
   @staticmethod
   def get_session_id(session):
+    if isinstance(session, str):
+      return session
     if session is None:
       return "** NOT LOGGED IN **"
     if "user_info" not in session:

src/myfasthtml/test/matcher.py

@@ -1,10 +1,11 @@
 import re
 from dataclasses import dataclass
-from typing import Optional
+from typing import Optional, Any
 
 from fastcore.basics import NotStr
 from fastcore.xml import FT
 
+from myfasthtml.core.commands import BaseCommand
 from myfasthtml.core.utils import quoted_str, snake_to_pascal
 from myfasthtml.test.testclient import MyFT
 
@@ -69,11 +70,16 @@ class EndsWith(AttrPredicate):
 
 
 class Contains(AttrPredicate):
-  def __init__(self, *value):
+  def __init__(self, *value, _word=False):
     super().__init__(value)
+    self._word = _word
   
   def validate(self, actual):
-    return all(val in actual for val in self.value)
+    if self._word:
+      words = actual.split()
+      return all(val in words for val in self.value)
+    else:
+      return all(val in actual for val in self.value)
 
 
 class DoesNotContain(AttrPredicate):
@@ -145,6 +151,26 @@ class AttributeForbidden(ChildrenPredicate):
     return element
 
 
+class HasHtmx(ChildrenPredicate):
+  def __init__(self, command: BaseCommand = None, **htmx_params):
+    super().__init__(None)
+    self.command = command
+    if command:
+      self.htmx_params = command.get_htmx_params() | htmx_params
+    else:
+      self.htmx_params = htmx_params
+    
+    self.htmx_params = {k.replace("hx_", "hx-"): v for k, v in self.htmx_params.items()}
+  
+  def validate(self, actual):
+    return all(actual.attrs.get(k) == v for k, v in self.htmx_params.items())
+  
+  def to_debug(self, element):
+    for k, v in self.htmx_params.items():
+      element.attrs[k] = v
+    return element
+
+
 class TestObject:
   def __init__(self, cls, **kwargs):
     self.cls = cls
@@ -152,17 +178,29 @@ class TestObject:
 
 
 class TestIcon(TestObject):
-  def __init__(self, name: Optional[str] = ''):
+  def __init__(self, name: Optional[str] = '', command=None):
     super().__init__("div")
     self.name = snake_to_pascal(name) if (name and name[0].islower()) else name
     self.children = [
         TestObject(NotStr, s=Regex(f'<svg name="\\w+-{self.name}'))
     ]
+    if command:
+      self.attrs |= command.get_htmx_params()
   
   def __str__(self):
     return f'<div><svg name="{self.name}" .../></div>'
 
 
+class TestIconNotStr(TestObject):
+  def __init__(self, name: Optional[str] = ''):
+    super().__init__(NotStr)
+    self.name = snake_to_pascal(name) if (name and name[0].islower()) else name
+    self.attrs["s"] = Regex(f'<svg name="\\w+-{self.name}')
+  
+  def __str__(self):
+    return f'<svg name="{self.name}" .../>'
+
+
 class TestCommand(TestObject):
   def __init__(self, name, **kwargs):
     super().__init__("Command", **kwargs)
@@ -183,6 +221,12 @@ class DoNotCheck:
   desc: str = None
 
 
+@dataclass
+class Skip:
+  element: Any
+  desc: str = None
+
+
 def _get_type(x):
   if hasattr(x, "tag"):
     return x.tag
@@ -215,6 +259,34 @@ def _get_children(x):
   return []
 
 
+def _str_element(element, expected=None, keep_open=None):
+  # compare to itself if no expected element is provided
+  if expected is None:
+    expected = element
+  
+  if hasattr(element, "tag"):
+    # the attributes are compared to the expected element
+    elt_attrs = {attr_name: _get_attr(element, attr_name) for attr_name in
+                 [attr_name for attr_name in _get_attributes(expected) if attr_name is not None]}
+    
+    elt_attrs_str = " ".join(f'"{attr_name}"="{attr_value}"' for attr_name, attr_value in elt_attrs.items())
+    tag_str = f"({element.tag} {elt_attrs_str}"
+    
+    # manage the closing tag
+    if keep_open is False:
+      tag_str += " ...)" if len(element.children) > 0 else ")"
+    elif keep_open is True:
+      tag_str += "..." if elt_attrs_str == "" else " ..."
+    else:
+      # close the tag if there are no children
+      not_special_children = [c for c in element.children if not isinstance(c, Predicate)]
+      if len(not_special_children) == 0:  tag_str += ")"
+    return tag_str
+  
+  else:
+    return quoted_str(element)
+
+
 class ErrorOutput:
   def __init__(self, path, element, expected):
     self.path = path
@@ -239,14 +311,14 @@ class ErrorOutput:
     # first render the path hierarchy
     for p in self.path.split(".")[:-1]:
       elt_name, attr_name, attr_value = self._unconstruct_path_item(p)
-      path_str = self._str_element(MyFT(elt_name, {attr_name: attr_value}), keep_open=True)
+      path_str = _str_element(MyFT(elt_name, {attr_name: attr_value}), keep_open=True)
       self._add_to_output(f"{path_str}")
       self.indent += "  "
     
     # then render the element
     if hasattr(self.expected, "tag") and hasattr(self.element, "tag"):
       # display the tag and its attributes
-      tag_str = self._str_element(self.element, self.expected)
+      tag_str = _str_element(self.element, self.expected)
       self._add_to_output(tag_str)
       
       # Try to show where the differences are
@@ -269,7 +341,7 @@ class ErrorOutput:
           
           # display the child
           element_child = self.element.children[element_index]
-          child_str = self._str_element(element_child, expected_child, keep_open=False)
+          child_str = _str_element(element_child, expected_child, keep_open=False)
           self._add_to_output(child_str)
           
           # manage errors (only when the expected is a FT element
@@ -303,34 +375,6 @@ class ErrorOutput:
   def _add_to_output(self, msg):
     self.output.append(f"{self.indent}{msg}")
   
-  @staticmethod
-  def _str_element(element, expected=None, keep_open=None):
-    # compare to itself if no expected element is provided
-    if expected is None:
-      expected = element
-    
-    if hasattr(element, "tag"):
-      # the attributes are compared to the expected element
-      elt_attrs = {attr_name: element.attrs.get(attr_name, MISSING_ATTR) for attr_name in
-                   [attr_name for attr_name in expected.attrs if attr_name is not None]}
-      
-      elt_attrs_str = " ".join(f'"{attr_name}"="{attr_value}"' for attr_name, attr_value in elt_attrs.items())
-      tag_str = f"({element.tag} {elt_attrs_str}"
-      
-      # manage the closing tag
-      if keep_open is False:
-        tag_str += " ...)" if len(element.children) > 0 else ")"
-      elif keep_open is True:
-        tag_str += "..." if elt_attrs_str == "" else " ..."
-      else:
-        # close the tag if there are no children
-        not_special_children = [c for c in element.children if not isinstance(c, Predicate)]
-        if len(not_special_children) == 0:  tag_str += ")"
-      return tag_str
-    
-    else:
-      return quoted_str(element)
-  
   def _detect_error(self, element, expected):
     """
     Detect errors between element and expected, returning a visual marker string.
@@ -543,8 +587,29 @@ class Matcher:
       if len(actual_children) < len(expected_children):
         self._assert_error("Actual is lesser than expected.", _actual=actual, _expected=expected)
       
-      for actual_child, expected_child in zip(actual_children, expected_children):
+      actual_child_index, expected_child_index = 0, 0
+      while expected_child_index < len(expected_children):
+        if actual_child_index >= len(actual_children):
+          self._assert_error("Nothing more to skip.", _actual=actual, _expected=expected)
+        
+        actual_child = actual_children[actual_child_index]
+        expected_child = expected_children[expected_child_index]
+        
+        if isinstance(expected_child, Skip):
+          try:
+            # if this is the element to skip, skip it and continue
+            self._match_element(actual_child, expected_child.element)
+            actual_child_index += 1
+            continue
+          except AssertionError:
+            # otherwise try to match with the following element
+            expected_child_index += 1
+            continue
+        
         assert self.matches(actual_child, expected_child)
+        
+        actual_child_index += 1
+        expected_child_index += 1
   
   def _match_list(self, actual, expected):
     """Match list or tuple."""
@@ -625,7 +690,7 @@ class Matcher:
   @staticmethod
   def _debug(elt):
     """Format an element for debug output."""
-    return str(elt) if elt else "None"
+    return _str_element(elt, keep_open=False) if elt else "None"
 
 
 def matches(actual, expected, path=""):