kodjo/MyManagingTools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

I can add tables

Browse Source 
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
This commit is contained in:
Kodjo Sossouvi
2025-05-11 18:27:32 +02:00
parent e1c10183eb
commit 66ea45f501
70 changed files with 2884 additions and 1258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/assets/css.py
View File

@@ -1,62 +0,0 @@
from fasthtml.components import Style
my_managing_tools_style = Style("""
.icon-32 {
width: 32px;
height: 32px;
}
.icon-32 svg {
width: 100%;
height: 100%;
}
.icon-24 {
width: 24px;
min-width: 24px;
height: 24px;
}
.icon-24 svg {
width: 100%;
height: 100%;
}
.icon-20 {
width: 20px;
min-width: 20px;
height: 20px;
margin-top: auto;
margin-bottom: auto;
}
.icon-16 {
width: 16px;
min-width: 16px;
height: 16px;
margin-top: auto;
margin-bottom: 4px;
}
.icon-bool {
display: block;
width: 20px;
height: 20px;
margin: auto;
}
.icon-btn {
cursor: pointer;
}
.cursor-pointer {
cursor: pointer;
}
.cursor-default {
cursor: default;
}
""")

81
src/assets/main.css
View File

@@ -1,7 +1,11 @@
:root {
--theme-controller-zindex: 1000;
--datagrid-menu-zindex: 910;
--datagrid-sidebar-zindex: 900;
--datagrid-scrollbars-zindex: 800;
--mmt-tooltip-zindex: 10;
--datagrid-drag-drop-zindex: 5;
--datagrid-resize-zindex: 1;
}
.mmt-tooltip-container {
@@ -15,11 +19,86 @@
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: 10; /* Ensure it's on top */
z-index: var(--mmt-tooltip-zindex); /* Ensure it's on top */
}
.mmt-tooltip-container[data-visible="true"] {
opacity: 1;
visibility: visible; /* Show tooltip */
transition: opacity 0.3s ease; /* No delay when becoming visible */
}
.icon-32 {
width: 32px;
height: 32px;
}
.icon-32 svg {
width: 100%;
height: 100%;
}
.icon-24 {
width: 24px;
min-width: 24px;
height: 24px;
}
.icon-24 svg {
width: 100%;
height: 100%;
}
.icon-20 {
width: 20px;
min-width: 20px;
height: 20px;
margin-top: auto;
margin-bottom: auto;
}
.icon-20-inline {
display: inline-block;
width: 20px;
min-width: 20px;
height: 20px;
padding-top: 4px;
}
.icon-16 {
width: 16px;
min-width: 16px;
height: 16px;
margin-top: auto;
margin-bottom: 4px;
}
.icon-16-inline {
display: inline-block;
width: 16px;
min-width: 16px;
height: 16px;
padding-top: 5px;
}
.icon-bool {
display: block;
width: 20px;
height: 20px;
margin: auto;
}
.icon-btn {
cursor: pointer;
}
.cursor-pointer {
cursor: pointer;
}
.cursor-default {
cursor: default;
}

58
src/assets/main.js
View File

@@ -1,19 +1,31 @@
function bindTooltipsWithDelegation(elementId) {
const tooltipElementId = "mmt-app"
function bindTooltipsWithDelegation() {
const elementId = tooltipElementId
console.debug("bindTooltips on element " + elementId);
const element = document.getElementById(elementId);
const tooltipContainer = document.getElementById(`tt_${elementId}`);
if (!element || !tooltipContainer) {
console.error("Invalid element or tooltip container");
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) => {
const cell = event.target.closest("div[data-tooltip]");
const cell = event.target.closest("[data-tooltip]");
if (!cell) return;
const no_tooltip = element.hasAttribute("mmt-no-tooltip");
if (no_tooltip) return;
const content = cell.querySelector(".truncate") || cell;
const isOverflowing = content.scrollWidth > content.clientWidth;
const forceShow = cell.classList.contains("mmt-tooltip");
@@ -34,18 +46,46 @@ function bindTooltipsWithDelegation(elementId) {
}
// Apply styles for tooltip positioning
tooltipContainer.textContent = tooltipText;
tooltipContainer.setAttribute("data-visible", "true");
tooltipContainer.style.top = `${top}px`;
tooltipContainer.style.left = `${left}px`;
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("div[data-tooltip]");
const cell = event.target.closest("[data-tooltip]");
if (cell) {
tooltipContainer.setAttribute("data-visible", "false");
}
}, true); // Use capture phase for better delegation if needed
}
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");
}