fix for schemas

src/pages/editor-page/canvas/area-utils.ts

@@ -1,6 +1,9 @@
 import type { DBTable } from '@/lib/domain/db-table';
 import type { Area } from '@/lib/domain/area';
-import { calcTableHeight } from '@/lib/domain/db-table';
+import {
+    calcTableHeight,
+    shouldShowTablesBySchemaFilter,
+} from '@/lib/domain/db-table';
 
 /**
  * Check if a table is inside an area based on their positions and dimensions
@@ -53,9 +56,31 @@ const findContainingArea = (table: DBTable, areas: Area[]): Area | null => {
  */
 export const updateTablesParentAreas = (
     tables: DBTable[],
-    areas: Area[]
+    areas: Area[],
+    hiddenTableIds?: string[],
+    filteredSchemas?: string[]
 ): DBTable[] => {
     return tables.map((table) => {
+        // Check if table is hidden by direct hiding or schema filter
+        const isHiddenDirectly = hiddenTableIds?.includes(table.id) ?? false;
+        const isHiddenBySchema = !shouldShowTablesBySchemaFilter(
+            table,
+            filteredSchemas
+        );
+        const isHidden = isHiddenDirectly || isHiddenBySchema;
+
+        // If table is hidden, remove it from any area
+        if (isHidden) {
+            if (table.parentAreaId !== null) {
+                return {
+                    ...table,
+                    parentAreaId: null,
+                };
+            }
+            return table;
+        }
+
+        // For visible tables, find containing area as before
         const containingArea = findContainingArea(table, areas);
         const newParentAreaId = containingArea?.id || null;
 

src/pages/editor-page/canvas/canvas-filter/canvas-filter.tsx

@@ -132,15 +132,13 @@ export const CanvasFilter: React.FC<CanvasFilterProps> = ({ onClose }) => {
             // Convert to tree nodes
             const nodes: TreeNode<NodeType, NodeContext>[] = [];
 
-            // Sort areas by order or name
+            // Sort all areas by order or name (including empty ones)
-            const sortedAreas = areas
+            const sortedAreas = areas.sort((a, b) => {
-                .filter((area) => tablesByArea.has(area.id))
+                if (a.order !== undefined && b.order !== undefined) {
-                .sort((a, b) => {
+                    return a.order - b.order;
-                    if (a.order !== undefined && b.order !== undefined) {
+                }
-                        return a.order - b.order;
+                return a.name.localeCompare(b.name);
-                    }
+            });
-                    return a.name.localeCompare(b.name);
-                });
 
             sortedAreas.forEach((area) => {
                 const areaTables = tablesByArea.get(area.id) || [];
@@ -400,13 +398,16 @@ export const CanvasFilter: React.FC<CanvasFilterProps> = ({ onClose }) => {
                         variant="ghost"
                         size="sm"
                         className="size-7 h-fit p-0"
+                        disabled={!node.children || node.children.length === 0}
                         onClick={(e) => {
                             e.stopPropagation();
                             // Toggle all tables in this area
                             const allHidden =
-                                node.children?.every((child) =>
+                                (node.children?.length > 0 &&
-                                    hiddenTableIds?.includes(child.id)
+                                    node.children?.every((child) =>
-                                ) ?? false;
+                                        hiddenTableIds?.includes(child.id)
+                                    )) ||
+                                false;
 
                             node.children?.forEach((child) => {
                                 if (child.type === 'table') {

src/pages/editor-page/canvas/canvas.tsx

@@ -154,6 +154,21 @@ const areaToAreaNode = (
     const tablesInArea = tables.filter(
         (table) => table.parentAreaId === area.id
     );
+
+    // Don't hide area if it has no tables (empty area)
+    if (tablesInArea.length === 0) {
+        return {
+            id: area.id,
+            type: 'area',
+            position: { x: area.x, y: area.y },
+            data: { area },
+            width: area.width,
+            height: area.height,
+            zIndex: -10,
+            hidden: false,
+        };
+    }
+
     const allTablesHidden = tablesInArea.every(
         (table) =>
             hiddenTableIds?.includes(table.id) ||
@@ -490,7 +505,12 @@ export const Canvas: React.FC<CanvasProps> = ({ initialTables }) => {
 
     useEffect(() => {
         const checkParentAreas = debounce(() => {
-            const updatedTables = updateTablesParentAreas(tables, areas);
+            const updatedTables = updateTablesParentAreas(
+                tables,
+                areas,
+                hiddenTableIds,
+                filteredSchemas
+            );
             const needsUpdate: Array<{
                 id: string;
                 parentAreaId: string | null;
@@ -530,7 +550,14 @@ export const Canvas: React.FC<CanvasProps> = ({ initialTables }) => {
         }, 300);
 
         checkParentAreas();
-    }, [tablePositions, areas, updateTablesState, tables]);
+    }, [
+        tablePositions,
+        areas,
+        updateTablesState,
+        tables,
+        hiddenTableIds,
+        filteredSchemas,
+    ]);
 
     const onConnectHandler = useCallback(
         async (params: AddEdgeParams) => {