I can add tables

Refactoring DbEngine

Fixing unit tests

Fixing unit tests

Fixing unit tests

Refactored DbManager for datagrid

Improving front end performance

I can add new table

Fixed sidebar closing when clicking on it

Fix drag event rebinding, improve listener options, and add debug

Prevent duplicate drag event bindings with a dataset flag and ensure consistent scrollbar functionality. Change wheel event listener to passive mode for better performance. Refactor function naming for consistency, and add debug logs for event handling.

Refactor Datagrid bindings and default state handling.

Updated Javascript to conditionally rebind Datagrid on specific events. Improved Python components by handling empty DataFrame cases and removing redundant code. Revised default state initialization in settings for better handling of mutable fields.

Added Rowindex visualisation support

Working on Debugger with own implementation of JsonViewer

Working on JsonViewer.py

Fixed unit tests

Adding unit tests

I can fold and unfold

fixed unit tests

Adding css for debugger

Added tooltip management

Adding debugger functionalities

Refactor serializers and improve error handling in DB engine

Fixed error where tables were overwritten

I can display footer menu

Working on footer. Refactoring how heights are managed

Refactored scrollbars management

Working on footer menu

I can display footer menu + fixed unit tests

Fixed unit tests

Updated click management

I can display aggregations in footers

Added docker management

Refactor input handling and improve config defaults

Fixed scrollbars colors

Refactored tooltip management

Improved tooltip management

Improving FilterAll

src/components/tabs/assets/tabs.css

@@ -1,20 +1,27 @@
-.tabs {
-    background-color: var(--color-base-200);
-    color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
-    border-radius: .5rem;
-    width: 100%;
-    height: 100%;
+.mmt-tabs {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-base-200);
+  color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
+  border-radius: .5rem;
+  width: 100%;
+  height: 100%;
 }
 
-.tabs-content {
+.mmt-tabs-header {
+    display: flex;
+    min-height: 25px;
+}
+
+.mmt-tabs-content {
     display: block;
     width: 100%;
-    height: 100%;
+    flex: 1;
     background-color: var(--color-base-100);
     padding: 4px;
 }
 
-.tabs-tab {
+.mmt-tabs-tab {
     cursor: pointer;
     appearance: none;
     text-align: center;
@@ -28,15 +35,15 @@
 
 }
 
-.tabs-tab:hover {
+.mmt-tabs-tab:hover {
     color: var(--color-base-content); /* Change text color on hover */
 }
 
-.tabs-label {
+.mmt-tabs-label {
     max-width: 150px;
 }
 
-.tabs-active {
+.mmt-tabs-active {
     --depth: 1;
     background-color: var(--color-base-100);
     color: var(--color-base-content);

src/components/tabs/assets/tabs.js

@@ -1,3 +1,11 @@
-function bindTabs(tabsId) {
-    bindTooltipsWithDelegation(tabsId)
+function getTabContentBoundaries(tabsId) {
+    const tabsContainer = document.getElementById(tabsId)
+    console.debug("tabsContainer", tabsContainer)
+    const contentDiv = tabsContainer.querySelector('.mmt-tabs-content')
+
+    const boundaries = contentDiv.getBoundingClientRect()
+    return {
+      width: boundaries.width,
+      height: boundaries.height
+    }
 }

src/components/tabs/components/MyTabs.py

@@ -2,12 +2,11 @@ import dataclasses
 import logging
 
 from fasthtml.components import *
-from fasthtml.xtend import Script
 
 from assets.icons import icon_dismiss_regular
 from components.BaseComponent import BaseComponent
 from components.tabs.constants import MY_TABS_INSTANCE_ID, Routes, ROUTE_ROOT
-from components_helpers import mk_ellipsis, mk_tooltip_container
+from components_helpers import mk_ellipsis
 from core.instance_manager import InstanceManager
 from core.utils import get_unique_id
 
@@ -151,12 +150,9 @@ class MyTabs(BaseComponent):
     return self.render(oob=True)
   
   def __ft__(self):
-    return mk_tooltip_container(self._id), self.render(), Script(f"bindTabs('{self._id}')")
+    return self.render()
   
   def render(self, oob=False):
-    if not self.tabs:
-      return Div(id=self._id, hx_swap_oob="true" if oob else None)
-    
     active_content = self.get_active_tab_content()
     if hasattr(active_content, "on_htmx_after_settle"):
       extra_params = {"hx-on::after-settle": active_content.on_htmx_after_settle()}
@@ -164,9 +160,9 @@ class MyTabs(BaseComponent):
       extra_params = {}
     
     return Div(
-      *[self._mk_tab(tab) for tab in self.tabs],  # headers
-      Div(active_content, cls="tabs-content"),
-      cls="tabs",
+      Div(*[self._mk_tab(tab) for tab in self.tabs], cls="mmt-tabs-header"),  # headers
+      Div(active_content, cls="mmt-tabs-content"),
+      cls="mmt-tabs",
       id=self._id,
       hx_swap_oob="true" if oob else None,
       **extra_params,
@@ -174,9 +170,9 @@ class MyTabs(BaseComponent):
   
   def _mk_tab(self, tab: Tab):
     return Span(
-      Label(mk_ellipsis(tab.title), hx_post=f"{ROUTE_ROOT}{Routes.SelectTab}", cls="tabs-label truncate"),
+      Label(mk_ellipsis(tab.title), hx_post=f"{ROUTE_ROOT}{Routes.SelectTab}", cls="mmt-tabs-label truncate"),
       Div(icon_dismiss_regular, cls="icon-16 ml-2", hx_post=f"{ROUTE_ROOT}{Routes.RemoveTab}"),
-      cls=f"tabs-tab {'tabs-active' if tab.active else ''}",
+      cls=f"mmt-tabs-tab {'mmt-tabs-active' if tab.active else ''}",
       hx_vals=f'{{"_id": "{self._id}", "tab_id":"{tab.id}"}}',
       hx_target=f"#{self._id}",
       hx_swap="outerHTML",