From fb54d7346562199db67817970fbbdc6e117514b9 Mon Sep 17 00:00:00 2001
From: johnnyfish <jonathanfishner11@gmail.com>
Date: Thu, 31 Jul 2025 23:00:49 +0300
Subject: [PATCH] refactor: consolidate table filtering to canvas filter with
 improved UX

---
 .../canvas-context/canvas-provider.tsx        |  49 +++++++-
 src/context/layout-context/layout-context.tsx |   8 --
 .../layout-context/layout-provider.tsx        |  10 --
 .../local-config-context.tsx                  |   8 --
 .../local-config-provider.tsx                 |  16 ---
 .../canvas/canvas-filter/canvas-filter.tsx    | 117 ++++++++++++++----
 .../editor-page/canvas/toolbar/toolbar.tsx    |  21 +++-
 src/pages/editor-page/editor-page.tsx         |  90 +-------------
 .../dependencies-section.tsx                  |  14 ++-
 .../relationships-section.tsx                 |  15 ++-
 .../editor-page/side-panel/side-panel.tsx     |  65 +---------
 .../table-list-item-header.tsx                |   3 +-
 .../tables-section/tables-section.tsx         |  11 +-
 13 files changed, 192 insertions(+), 235 deletions(-)

diff --git a/src/context/canvas-context/canvas-provider.tsx b/src/context/canvas-context/canvas-provider.tsx
index ab819991..0401148b 100644
--- a/src/context/canvas-context/canvas-provider.tsx
+++ b/src/context/canvas-context/canvas-provider.tsx
@@ -1,4 +1,11 @@
-import React, { type ReactNode, useCallback, useState } from 'react';
+import React, {
+    type ReactNode,
+    useCallback,
+    useState,
+    useMemo,
+    useEffect,
+    useRef,
+} from 'react';
 import { canvasContext } from './canvas-context';
 import { useChartDB } from '@/hooks/use-chartdb';
 import {
@@ -15,13 +22,49 @@ interface CanvasProviderProps {
 }
 
 export const CanvasProvider = ({ children }: CanvasProviderProps) => {
-    const { tables, relationships, updateTablesState, filteredSchemas } =
-        useChartDB();
+    const {
+        tables,
+        relationships,
+        updateTablesState,
+        filteredSchemas,
+        hiddenTableIds,
+        schemas,
+    } = useChartDB();
     const { fitView } = useReactFlow();
     const [overlapGraph, setOverlapGraph] =
         useState<Graph<string>>(createGraph());
 
+    // Check if there are any filtered items to determine initial showFilter state
+    const hasFilteredItems = useMemo(() => {
+        const hasHiddenTables = (hiddenTableIds ?? []).length > 0;
+        const hasSchemasFilter =
+            filteredSchemas &&
+            schemas.length > 0 &&
+            filteredSchemas.length < schemas.length;
+        return hasHiddenTables || hasSchemasFilter;
+    }, [filteredSchemas, hiddenTableIds, schemas]);
+
     const [showFilter, setShowFilter] = useState(false);
+    const hasInitialized = useRef(false);
+
+    // Only auto-show filter on initial load if there are filtered items
+    // Wait for data to be defined (not just empty arrays) before initializing
+    useEffect(() => {
+        const dataLoaded =
+            filteredSchemas !== undefined && hiddenTableIds !== undefined;
+
+        if (!hasInitialized.current && dataLoaded) {
+            // Add 2 seconds delay to ensure all data is fully loaded
+            const timer = setTimeout(() => {
+                if (hasFilteredItems) {
+                    setShowFilter(true);
+                }
+                hasInitialized.current = true;
+            }, 2000);
+
+            return () => clearTimeout(timer);
+        }
+    }, [hasFilteredItems, filteredSchemas, hiddenTableIds]);
 
     const reorderTables = useCallback(
         (
diff --git a/src/context/layout-context/layout-context.tsx b/src/context/layout-context/layout-context.tsx
index 12885e5a..a3c2df1a 100644
--- a/src/context/layout-context/layout-context.tsx
+++ b/src/context/layout-context/layout-context.tsx
@@ -36,10 +36,6 @@ export interface LayoutContext {
     hideSidePanel: () => void;
     showSidePanel: () => void;
     toggleSidePanel: () => void;
-
-    isSelectSchemaOpen: boolean;
-    openSelectSchema: () => void;
-    closeSelectSchema: () => void;
 }
 
 export const layoutContext = createContext<LayoutContext>({
@@ -70,8 +66,4 @@ export const layoutContext = createContext<LayoutContext>({
     hideSidePanel: emptyFn,
     showSidePanel: emptyFn,
     toggleSidePanel: emptyFn,
-
-    isSelectSchemaOpen: false,
-    openSelectSchema: emptyFn,
-    closeSelectSchema: emptyFn,
 });
diff --git a/src/context/layout-context/layout-provider.tsx b/src/context/layout-context/layout-provider.tsx
index d1db4cb3..c7aec87e 100644
--- a/src/context/layout-context/layout-provider.tsx
+++ b/src/context/layout-context/layout-provider.tsx
@@ -23,8 +23,6 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
         React.useState<SidebarSection>('tables');
     const [isSidePanelShowed, setIsSidePanelShowed] =
         React.useState<boolean>(isDesktop);
-    const [isSelectSchemaOpen, setIsSelectSchemaOpen] =
-        React.useState<boolean>(false);
 
     const closeAllTablesInSidebar: LayoutContext['closeAllTablesInSidebar'] =
         () => setOpenedTableInSidebar('');
@@ -88,11 +86,6 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
             setOpenedTableInSidebar(customTypeId);
         };
 
-    const openSelectSchema: LayoutContext['openSelectSchema'] = () =>
-        setIsSelectSchemaOpen(true);
-
-    const closeSelectSchema: LayoutContext['closeSelectSchema'] = () =>
-        setIsSelectSchemaOpen(false);
     return (
         <layoutContext.Provider
             value={{
@@ -108,9 +101,6 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
                 hideSidePanel,
                 showSidePanel,
                 toggleSidePanel,
-                isSelectSchemaOpen,
-                openSelectSchema,
-                closeSelectSchema,
                 openedDependencyInSidebar,
                 openDependencyFromSidebar,
                 closeAllDependenciesInSidebar,
diff --git a/src/context/local-config-context/local-config-context.tsx b/src/context/local-config-context/local-config-context.tsx
index c0f2fb0d..cebe90a8 100644
--- a/src/context/local-config-context/local-config-context.tsx
+++ b/src/context/local-config-context/local-config-context.tsx
@@ -22,11 +22,6 @@ export interface LocalConfigContext {
     showFieldAttributes: boolean;
     setShowFieldAttributes: (showFieldAttributes: boolean) => void;
 
-    hideMultiSchemaNotification: boolean;
-    setHideMultiSchemaNotification: (
-        hideMultiSchemaNotification: boolean
-    ) => void;
-
     githubRepoOpened: boolean;
     setGithubRepoOpened: (githubRepoOpened: boolean) => void;
 
@@ -56,9 +51,6 @@ export const LocalConfigContext = createContext<LocalConfigContext>({
     showFieldAttributes: true,
     setShowFieldAttributes: emptyFn,
 
-    hideMultiSchemaNotification: false,
-    setHideMultiSchemaNotification: emptyFn,
-
     githubRepoOpened: false,
     setGithubRepoOpened: emptyFn,
 
diff --git a/src/context/local-config-context/local-config-provider.tsx b/src/context/local-config-context/local-config-provider.tsx
index b582e03a..9d0a47ec 100644
--- a/src/context/local-config-context/local-config-provider.tsx
+++ b/src/context/local-config-context/local-config-provider.tsx
@@ -8,7 +8,6 @@ const scrollActionKey = 'scroll_action';
 const schemasFilterKey = 'schemas_filter';
 const showCardinalityKey = 'show_cardinality';
 const showFieldAttributesKey = 'show_field_attributes';
-const hideMultiSchemaNotificationKey = 'hide_multi_schema_notification';
 const githubRepoOpenedKey = 'github_repo_opened';
 const starUsDialogLastOpenKey = 'star_us_dialog_last_open';
 const showDependenciesOnCanvasKey = 'show_dependencies_on_canvas';
@@ -40,12 +39,6 @@ export const LocalConfigProvider: React.FC<React.PropsWithChildren> = ({
             (localStorage.getItem(showFieldAttributesKey) || 'true') === 'true'
         );
 
-    const [hideMultiSchemaNotification, setHideMultiSchemaNotification] =
-        React.useState<boolean>(
-            (localStorage.getItem(hideMultiSchemaNotificationKey) ||
-                'false') === 'true'
-        );
-
     const [githubRepoOpened, setGithubRepoOpened] = React.useState<boolean>(
         (localStorage.getItem(githubRepoOpenedKey) || 'false') === 'true'
     );
@@ -77,13 +70,6 @@ export const LocalConfigProvider: React.FC<React.PropsWithChildren> = ({
         localStorage.setItem(githubRepoOpenedKey, githubRepoOpened.toString());
     }, [githubRepoOpened]);
 
-    useEffect(() => {
-        localStorage.setItem(
-            hideMultiSchemaNotificationKey,
-            hideMultiSchemaNotification.toString()
-        );
-    }, [hideMultiSchemaNotification]);
-
     useEffect(() => {
         localStorage.setItem(themeKey, theme);
     }, [theme]);
@@ -127,8 +113,6 @@ export const LocalConfigProvider: React.FC<React.PropsWithChildren> = ({
                 setShowCardinality,
                 showFieldAttributes,
                 setShowFieldAttributes,
-                hideMultiSchemaNotification,
-                setHideMultiSchemaNotification,
                 setGithubRepoOpened,
                 githubRepoOpened,
                 starUsDialogLastOpen,
diff --git a/src/pages/editor-page/canvas/canvas-filter/canvas-filter.tsx b/src/pages/editor-page/canvas/canvas-filter/canvas-filter.tsx
index 005d559c..be4071e2 100644
--- a/src/pages/editor-page/canvas/canvas-filter/canvas-filter.tsx
+++ b/src/pages/editor-page/canvas/canvas-filter/canvas-filter.tsx
@@ -93,9 +93,18 @@ export const CanvasFilter: React.FC<CanvasFilterProps> = ({ onClose }) => {
 
         tablesBySchema.forEach((schemaTables, schemaName) => {
             const schemaId = schemaNameToSchemaId(schemaName);
-            const schemaHidden = filteredSchemas
+            const schemaFilteredOut = filteredSchemas
                 ? !filteredSchemas.includes(schemaId)
                 : false;
+
+            // Pre-calculate if all tables in this schema are hidden
+            const allTablesHidden = schemaTables.every(
+                (table) => hiddenTableIds?.includes(table.id) ?? false
+            );
+
+            // Schema appears hidden if filtered out OR all tables are hidden
+            const schemaHidden = schemaFilteredOut || allTablesHidden;
+
             const schemaNode: TreeNode<NodeType, NodeContext> = {
                 id: `schema-${schemaName}`,
                 name: `${schemaName} (${schemaTables.length})`,
@@ -136,13 +145,24 @@ export const CanvasFilter: React.FC<CanvasFilterProps> = ({ onClose }) => {
         return nodes;
     }, [relevantTableData, databaseType, hiddenTableIds, filteredSchemas]);
 
-    // Initialize expanded state with all schemas expanded
-    useMemo(() => {
-        const initialExpanded: Record<string, boolean> = {};
-        treeData.forEach((node) => {
-            initialExpanded[node.id] = true;
+    // Initialize expanded state - collapse if multiple schemas, expand if single schema
+    useEffect(() => {
+        setExpanded((prevExpanded) => {
+            const hasMultipleSchemas = treeData.length > 1;
+            const newExpanded: Record<string, boolean> = {};
+
+            treeData.forEach((node) => {
+                // Preserve existing expanded state if it exists, otherwise set based on schema count
+                if (node.id in prevExpanded) {
+                    newExpanded[node.id] = prevExpanded[node.id];
+                } else {
+                    // If there are multiple schemas, start collapsed; otherwise expanded
+                    newExpanded[node.id] = !hasMultipleSchemas;
+                }
+            });
+
+            return newExpanded;
         });
-        setExpanded(initialExpanded);
     }, [treeData]);
 
     // Filter tree data based on search query
@@ -222,10 +242,19 @@ export const CanvasFilter: React.FC<CanvasFilterProps> = ({ onClose }) => {
             if (node.type === 'schema') {
                 const schemaContext = node.context as SchemaContext;
                 const schemaId = schemaNameToSchemaId(schemaContext.name);
-                const schemaHidden = filteredSchemas
+                const schemaFilteredOut = filteredSchemas
                     ? !filteredSchemas.includes(schemaId)
                     : false;
 
+                // Check if all tables in this schema are hidden
+                const allTablesHidden =
+                    node.children?.every((child) =>
+                        hiddenTableIds?.includes(child.id)
+                    ) ?? false;
+
+                // Schema is "hidden" if filtered out OR all tables are hidden
+                const schemaHidden = schemaFilteredOut || allTablesHidden;
+
                 return (
                     <Button
                         variant="ghost"
@@ -233,21 +262,26 @@ export const CanvasFilter: React.FC<CanvasFilterProps> = ({ onClose }) => {
                         className="size-7 h-fit p-0"
                         onClick={(e) => {
                             e.stopPropagation();
-                            // unhide all tables in this schema
-                            node.children?.forEach((child) => {
-                                if (
-                                    child.type === 'table' &&
-                                    hiddenTableIds?.includes(child.id)
-                                ) {
-                                    removeHiddenTableId(child.id);
-                                }
-                            });
+
                             if (schemaHidden) {
-                                filterSchemas([
-                                    ...(filteredSchemas ?? []),
-                                    schemaId,
-                                ]);
+                                // Show the schema in filter
+                                if (schemaFilteredOut) {
+                                    filterSchemas([
+                                        ...(filteredSchemas ?? []),
+                                        schemaId,
+                                    ]);
+                                }
+                                // Unhide all tables in this schema
+                                node.children?.forEach((child) => {
+                                    if (
+                                        child.type === 'table' &&
+                                        hiddenTableIds?.includes(child.id)
+                                    ) {
+                                        removeHiddenTableId(child.id);
+                                    }
+                                });
                             } else {
+                                // Hide the schema and all its tables
                                 filterSchemas(
                                     filteredSchemas?.filter(
                                         (s) => s !== schemaId
@@ -308,6 +342,39 @@ export const CanvasFilter: React.FC<CanvasFilterProps> = ({ onClose }) => {
                                 }
                             } else {
                                 toggleTableVisibility(tableId, !hidden);
+
+                                // Check if this was the last visible table in the schema
+                                if (!hidden && tableSchema) {
+                                    const schemaNode = treeData.find(
+                                        (s) =>
+                                            (s.context as SchemaContext)
+                                                .name === tableSchema
+                                    );
+                                    if (schemaNode) {
+                                        // Check if all other tables in this schema will be hidden
+                                        const willAllBeHidden =
+                                            schemaNode.children?.every(
+                                                (child) =>
+                                                    child.id === tableId ||
+                                                    hiddenTableIds?.includes(
+                                                        child.id
+                                                    )
+                                            ) ?? false;
+
+                                        if (willAllBeHidden) {
+                                            // Hide the schema as well
+                                            const schemaId =
+                                                schemaNameToSchemaId(
+                                                    tableSchema
+                                                );
+                                            filterSchemas(
+                                                filteredSchemas?.filter(
+                                                    (s) => s !== schemaId
+                                                ) ?? []
+                                            );
+                                        }
+                                    }
+                                }
                             }
                         }}
                     >
@@ -336,7 +403,13 @@ export const CanvasFilter: React.FC<CanvasFilterProps> = ({ onClose }) => {
     // Handle node click
     const handleNodeClick = useCallback(
         (node: TreeNode<NodeType, NodeContext>) => {
-            if (node.type === 'table') {
+            if (node.type === 'schema') {
+                // Toggle schema expansion on single click
+                setExpanded((prev) => ({
+                    ...prev,
+                    [node.id]: !prev[node.id],
+                }));
+            } else if (node.type === 'table') {
                 const tableContext = node.context as TableContext;
                 const tableSchema = tableContext.tableSchema;
                 const visibleBySchema = shouldShowTableSchemaBySchemaFilter({
diff --git a/src/pages/editor-page/canvas/toolbar/toolbar.tsx b/src/pages/editor-page/canvas/toolbar/toolbar.tsx
index c778cdb0..b03e3a7c 100644
--- a/src/pages/editor-page/canvas/toolbar/toolbar.tsx
+++ b/src/pages/editor-page/canvas/toolbar/toolbar.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useMemo } from 'react';
 import { Card, CardContent } from '@/components/card/card';
 import { ZoomIn, ZoomOut, Funnel, Redo, Undo, Scan } from 'lucide-react';
 import { Separator } from '@/components/separator/separator';
@@ -30,12 +30,26 @@ export const Toolbar: React.FC<ToolbarProps> = () => {
     const { getZoom, zoomIn, zoomOut, fitView } = useReactFlow();
     const [zoom, setZoom] = useState<string>(convertToPercentage(getZoom()));
     const { setShowFilter } = useCanvas();
-    const { hiddenTableIds } = useChartDB();
+    const { hiddenTableIds, filteredSchemas, schemas } = useChartDB();
 
     const toggleFilter = useCallback(() => {
         setShowFilter((prev) => !prev);
     }, [setShowFilter]);
 
+    // Check if any filtering is active
+    const hasActiveFilter = useMemo(() => {
+        // Check if any tables are hidden
+        const hasHiddenTables = (hiddenTableIds ?? []).length > 0;
+
+        // Check if schemas are being filtered
+        const hasSchemasFilter =
+            filteredSchemas &&
+            schemas.length > 0 &&
+            filteredSchemas.length < schemas.length;
+
+        return hasHiddenTables || hasSchemasFilter;
+    }, [hiddenTableIds, filteredSchemas, schemas]);
+
     useOnViewportChange({
         onChange: ({ zoom }) => {
             setZoom(convertToPercentage(zoom));
@@ -80,8 +94,7 @@ export const Toolbar: React.FC<ToolbarProps> = () => {
                                         'transition-all duration-200',
                                         {
                                             'bg-pink-500 text-white hover:bg-pink-600 hover:text-white':
-                                                (hiddenTableIds ?? []).length >
-                                                0,
+                                                hasActiveFilter,
                                         }
                                     )}
                                 >
diff --git a/src/pages/editor-page/editor-page.tsx b/src/pages/editor-page/editor-page.tsx
index a5b97592..39d96a03 100644
--- a/src/pages/editor-page/editor-page.tsx
+++ b/src/pages/editor-page/editor-page.tsx
@@ -1,14 +1,9 @@
-import React, { Suspense, useCallback, useEffect, useRef } from 'react';
-import { useParams } from 'react-router-dom';
+import React, { Suspense, useEffect } from 'react';
 import { useChartDB } from '@/hooks/use-chartdb';
 import { useDialog } from '@/hooks/use-dialog';
 import { Toaster } from '@/components/toast/toaster';
 import { useBreakpoint } from '@/hooks/use-breakpoint';
-import { useLayout } from '@/hooks/use-layout';
-import { useToast } from '@/components/toast/use-toast';
-import { ToastAction } from '@/components/toast/toast';
 import { useLocalConfig } from '@/hooks/use-local-config';
-import { useTranslation } from 'react-i18next';
 import { FullScreenLoaderProvider } from '@/context/full-screen-spinner-context/full-screen-spinner-provider';
 import { LayoutProvider } from '@/context/layout-context/layout-provider';
 import { LocalConfigProvider } from '@/context/local-config-context/local-config-provider';
@@ -43,21 +38,11 @@ export const EditorMobileLayoutLazy = React.lazy(
 );
 
 const EditorPageComponent: React.FC = () => {
-    const { diagramName, currentDiagram, schemas, filteredSchemas } =
-        useChartDB();
-    const { openSelectSchema, showSidePanel } = useLayout();
+    const { diagramName, currentDiagram } = useChartDB();
     const { openStarUsDialog } = useDialog();
-    const { diagramId } = useParams<{ diagramId: string }>();
     const { isMd: isDesktop } = useBreakpoint('md');
-    const {
-        hideMultiSchemaNotification,
-        setHideMultiSchemaNotification,
-        starUsDialogLastOpen,
-        setStarUsDialogLastOpen,
-        githubRepoOpened,
-    } = useLocalConfig();
-    const { toast } = useToast();
-    const { t } = useTranslation();
+    const { starUsDialogLastOpen, setStarUsDialogLastOpen, githubRepoOpened } =
+        useLocalConfig();
     const { initialDiagram } = useDiagramLoader();
 
     useEffect(() => {
@@ -85,73 +70,6 @@ const EditorPageComponent: React.FC = () => {
         starUsDialogLastOpen,
     ]);
 
-    const lastDiagramId = useRef<string>('');
-
-    const handleChangeSchema = useCallback(async () => {
-        showSidePanel();
-        if (!isDesktop) {
-            await new Promise((resolve) => setTimeout(resolve, 500));
-        }
-        openSelectSchema();
-    }, [openSelectSchema, showSidePanel, isDesktop]);
-
-    useEffect(() => {
-        if (lastDiagramId.current === currentDiagram.id) {
-            return;
-        }
-
-        lastDiagramId.current = currentDiagram.id;
-        if (schemas.length > 1 && !hideMultiSchemaNotification) {
-            const formattedSchemas = !filteredSchemas
-                ? t('multiple_schemas_alert.none')
-                : filteredSchemas
-                      .map((filteredSchema) =>
-                          schemas.find((schema) => schema.id === filteredSchema)
-                      )
-                      .map((schema) => `'${schema?.name}'`)
-                      .join(', ');
-            toast({
-                duration: Infinity,
-                title: t('multiple_schemas_alert.title'),
-                description: t('multiple_schemas_alert.description', {
-                    schemasCount: schemas.length,
-                    formattedSchemas,
-                }),
-                variant: 'default',
-                layout: 'column',
-                hideCloseButton: true,
-                className:
-                    'top-0 right-0 flex fixed md:max-w-[420px] md:top-4 md:right-4',
-                action: (
-                    <div className="flex justify-between gap-1">
-                        <div />
-                        <ToastAction
-                            onClick={() => {
-                                handleChangeSchema();
-                                setHideMultiSchemaNotification(true);
-                            }}
-                            altText="Show me the schemas"
-                            className="border border-pink-600 bg-pink-600 text-white hover:bg-pink-500"
-                        >
-                            {t('multiple_schemas_alert.show_me')}
-                        </ToastAction>
-                    </div>
-                ),
-            });
-        }
-    }, [
-        schemas,
-        filteredSchemas,
-        toast,
-        currentDiagram.id,
-        diagramId,
-        openSelectSchema,
-        t,
-        handleChangeSchema,
-        hideMultiSchemaNotification,
-        setHideMultiSchemaNotification,
-    ]);
-
     return (
         <>
             <Helmet>
diff --git a/src/pages/editor-page/side-panel/dependencies-section/dependencies-section.tsx b/src/pages/editor-page/side-panel/dependencies-section/dependencies-section.tsx
index 1ca6f4d7..2da95dd3 100644
--- a/src/pages/editor-page/side-panel/dependencies-section/dependencies-section.tsx
+++ b/src/pages/editor-page/side-panel/dependencies-section/dependencies-section.tsx
@@ -19,7 +19,8 @@ import { useLayout } from '@/hooks/use-layout';
 export interface DependenciesSectionProps {}
 
 export const DependenciesSection: React.FC<DependenciesSectionProps> = () => {
-    const { dependencies, filteredSchemas, getTable } = useChartDB();
+    const { dependencies, filteredSchemas, hiddenTableIds, getTable } =
+        useChartDB();
     const [filterText, setFilterText] = React.useState('');
     const { closeAllDependenciesInSidebar } = useLayout();
     const { t } = useTranslation();
@@ -44,12 +45,15 @@ export const DependenciesSection: React.FC<DependenciesSectionProps> = () => {
             );
         };
 
-        const filterSchema: (dependency: DBDependency) => boolean = (
+        const filterVisible: (dependency: DBDependency) => boolean = (
             dependency
-        ) => shouldShowDependencyBySchemaFilter(dependency, filteredSchemas);
+        ) =>
+            shouldShowDependencyBySchemaFilter(dependency, filteredSchemas) &&
+            !hiddenTableIds?.includes(dependency.tableId) &&
+            !hiddenTableIds?.includes(dependency.dependentTableId);
 
         return dependencies
-            .filter(filterSchema)
+            .filter(filterVisible)
             .filter(filterName)
             .sort((a, b) => {
                 const dependentTableA = getTable(a.dependentTableId);
@@ -60,7 +64,7 @@ export const DependenciesSection: React.FC<DependenciesSectionProps> = () => {
                     `${dependentTableB?.name}${tableB?.name}`
                 );
             });
-    }, [dependencies, filterText, filteredSchemas, getTable]);
+    }, [dependencies, filterText, filteredSchemas, hiddenTableIds, getTable]);
 
     return (
         <section className="flex flex-1 flex-col overflow-hidden px-2">
diff --git a/src/pages/editor-page/side-panel/relationships-section/relationships-section.tsx b/src/pages/editor-page/side-panel/relationships-section/relationships-section.tsx
index efb37521..7f5daeff 100644
--- a/src/pages/editor-page/side-panel/relationships-section/relationships-section.tsx
+++ b/src/pages/editor-page/side-panel/relationships-section/relationships-section.tsx
@@ -20,7 +20,7 @@ import { useDialog } from '@/hooks/use-dialog';
 export interface RelationshipsSectionProps {}
 
 export const RelationshipsSection: React.FC<RelationshipsSectionProps> = () => {
-    const { relationships, filteredSchemas } = useChartDB();
+    const { relationships, filteredSchemas, hiddenTableIds } = useChartDB();
     const [filterText, setFilterText] = React.useState('');
     const { closeAllRelationshipsInSidebar } = useLayout();
     const { t } = useTranslation();
@@ -34,13 +34,18 @@ export const RelationshipsSection: React.FC<RelationshipsSectionProps> = () => {
             !filterText?.trim?.() ||
             relationship.name.toLowerCase().includes(filterText.toLowerCase());
 
-        const filterSchema: (relationship: DBRelationship) => boolean = (
+        const filterVisible: (relationship: DBRelationship) => boolean = (
             relationship
         ) =>
-            shouldShowRelationshipBySchemaFilter(relationship, filteredSchemas);
+            shouldShowRelationshipBySchemaFilter(
+                relationship,
+                filteredSchemas
+            ) &&
+            !hiddenTableIds?.includes(relationship.sourceTableId) &&
+            !hiddenTableIds?.includes(relationship.targetTableId);
 
-        return relationships.filter(filterSchema).filter(filterName);
-    }, [relationships, filterText, filteredSchemas]);
+        return relationships.filter(filterVisible).filter(filterName);
+    }, [relationships, filterText, filteredSchemas, hiddenTableIds]);
 
     const handleCreateRelationship = useCallback(async () => {
         setFilterText('');
diff --git a/src/pages/editor-page/side-panel/side-panel.tsx b/src/pages/editor-page/side-panel/side-panel.tsx
index dfe61aca..2943e8e4 100644
--- a/src/pages/editor-page/side-panel/side-panel.tsx
+++ b/src/pages/editor-page/side-panel/side-panel.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React from 'react';
 import {
     Select,
     SelectContent,
@@ -12,8 +12,6 @@ import { RelationshipsSection } from './relationships-section/relationships-sect
 import { useLayout } from '@/hooks/use-layout';
 import type { SidebarSection } from '@/context/layout-context/layout-context';
 import { useTranslation } from 'react-i18next';
-import type { SelectBoxOption } from '@/components/select-box/select-box';
-import { SelectBox } from '@/components/select-box/select-box';
 import { useChartDB } from '@/hooks/use-chartdb';
 import { DependenciesSection } from './dependencies-section/dependencies-section';
 import { useBreakpoint } from '@/hooks/use-breakpoint';
@@ -25,69 +23,12 @@ export interface SidePanelProps {}
 
 export const SidePanel: React.FC<SidePanelProps> = () => {
     const { t } = useTranslation();
-    const { schemas, filterSchemas, filteredSchemas, databaseType } =
-        useChartDB();
-    const {
-        selectSidebarSection,
-        selectedSidebarSection,
-        isSelectSchemaOpen,
-        openSelectSchema,
-        closeSelectSchema,
-    } = useLayout();
+    const { databaseType } = useChartDB();
+    const { selectSidebarSection, selectedSidebarSection } = useLayout();
     const { isMd: isDesktop } = useBreakpoint('md');
 
-    const schemasOptions: SelectBoxOption[] = useMemo(
-        () =>
-            schemas.map(
-                (schema): SelectBoxOption => ({
-                    label: schema.name,
-                    value: schema.id,
-                    description: `(${schema.tableCount} tables)`,
-                })
-            ),
-        [schemas]
-    );
-
-    const setIsSelectSchemaOpen = useCallback(
-        (open: boolean) => {
-            if (open) {
-                openSelectSchema();
-            } else {
-                closeSelectSchema();
-            }
-        },
-        [openSelectSchema, closeSelectSchema]
-    );
-
     return (
         <aside className="flex h-full flex-col overflow-hidden">
-            {schemasOptions.length > 0 ? (
-                <div className="flex items-center justify-center border-b pl-3 pt-0.5">
-                    <div className="shrink-0 text-sm font-semibold">
-                        {t('side_panel.schema')}
-                    </div>
-                    <div className="flex min-w-0 flex-1">
-                        <SelectBox
-                            oneLine
-                            className="w-full rounded-none border-none"
-                            selectAll
-                            deselectAll
-                            options={schemasOptions}
-                            value={filteredSchemas ?? []}
-                            onChange={(values) => {
-                                filterSchemas(values as string[]);
-                            }}
-                            placeholder={t('side_panel.filter_by_schema')}
-                            inputPlaceholder={t('side_panel.search_schema')}
-                            emptyPlaceholder={t('side_panel.no_schemas_found')}
-                            multiple
-                            open={isSelectSchemaOpen}
-                            onOpenChange={setIsSelectSchemaOpen}
-                        />
-                    </div>
-                </div>
-            ) : null}
-
             {!isDesktop ? (
                 <div className="flex justify-center border-b pt-0.5">
                     <Select
diff --git a/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-header/table-list-item-header.tsx b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-header/table-list-item-header.tsx
index 1b6d5d0e..eb8c193c 100644
--- a/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-header/table-list-item-header.tsx
+++ b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-header/table-list-item-header.tsx
@@ -55,7 +55,6 @@ export const TableListItemHeader: React.FC<TableListItemHeaderProps> = ({
         createField,
         createTable,
         schemas,
-        filteredSchemas,
         databaseType,
     } = useChartDB();
     const { openTableSchemaDialog } = useDialog();
@@ -267,7 +266,7 @@ export const TableListItemHeader: React.FC<TableListItemHeaderProps> = ({
 
     let schemaToDisplay;
 
-    if (schemas.length > 1 && !!filteredSchemas && filteredSchemas.length > 1) {
+    if (schemas.length > 1) {
         schemaToDisplay = table.schema;
     }
 
diff --git a/src/pages/editor-page/side-panel/tables-section/tables-section.tsx b/src/pages/editor-page/side-panel/tables-section/tables-section.tsx
index 16455dfd..2edc4034 100644
--- a/src/pages/editor-page/side-panel/tables-section/tables-section.tsx
+++ b/src/pages/editor-page/side-panel/tables-section/tables-section.tsx
@@ -25,7 +25,8 @@ import type { DBSchema } from '@/lib/domain';
 export interface TablesSectionProps {}
 
 export const TablesSection: React.FC<TablesSectionProps> = () => {
-    const { createTable, tables, filteredSchemas, schemas } = useChartDB();
+    const { createTable, tables, hiddenTableIds, filteredSchemas, schemas } =
+        useChartDB();
     const { openTableSchemaDialog } = useDialog();
     const viewport = useViewport();
     const { t } = useTranslation();
@@ -39,11 +40,13 @@ export const TablesSection: React.FC<TablesSectionProps> = () => {
             !filterText?.trim?.() ||
             table.name.toLowerCase().includes(filterText.toLowerCase());
 
-        const filterSchema: (table: DBTable) => boolean = (table) =>
+        // Show only tables that are visible on the canvas
+        const filterVisible: (table: DBTable) => boolean = (table) =>
+            !hiddenTableIds?.includes(table.id) &&
             shouldShowTablesBySchemaFilter(table, filteredSchemas);
 
-        return tables.filter(filterSchema).filter(filterTableName);
-    }, [tables, filterText, filteredSchemas]);
+        return tables.filter(filterVisible).filter(filterTableName);
+    }, [tables, filterText, hiddenTableIds, filteredSchemas]);
 
     const createTableWithLocation = useCallback(
         async ({ schema }: { schema?: DBSchema }) => {