From 7428f46f328f02e5fa808c5256ebda8693d4ed03 Mon Sep 17 00:00:00 2001
From: Guy Ben-Aharon <baguy3@gmail.com>
Date: Sun, 30 Nov 2025 15:50:54 +0200
Subject: [PATCH] fix: overlapping indication with hidden views (#988)

---
 .../canvas-context/canvas-provider.tsx        | 26 +++++----
 src/pages/editor-page/canvas/canvas.tsx       | 56 +++++++++++--------
 2 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/src/context/canvas-context/canvas-provider.tsx b/src/context/canvas-context/canvas-provider.tsx
index 857def06..f922bce8 100644
--- a/src/context/canvas-context/canvas-provider.tsx
+++ b/src/context/canvas-context/canvas-provider.tsx
@@ -21,6 +21,7 @@ import {
     type CreateRelationshipNodeType,
 } from '@/pages/editor-page/canvas/create-relationship-node/create-relationship-node';
 import { useEventEmitter } from 'ahooks';
+import { useLocalConfig } from '@/hooks/use-local-config';
 
 interface CanvasProviderProps {
     children: ReactNode;
@@ -36,6 +37,7 @@ export const CanvasProvider = ({ children }: CanvasProviderProps) => {
         diagramId,
     } = useChartDB();
     const { filter, loading: filterLoading } = useDiagramFilter();
+    const { showDBViews } = useLocalConfig();
     const { fitView, screenToFlowPosition, setNodes } = useReactFlow();
     const [overlapGraph, setOverlapGraph] =
         useState<Graph<string>>(createGraph());
@@ -77,17 +79,18 @@ export const CanvasProvider = ({ children }: CanvasProviderProps) => {
         ) => {
             const newTables = adjustTablePositions({
                 relationships,
-                tables: tables.filter((table) =>
-                    filterTable({
-                        table: {
-                            id: table.id,
-                            schema: table.schema,
-                        },
-                        filter,
-                        options: {
-                            defaultSchema: defaultSchemas[databaseType],
-                        },
-                    })
+                tables: tables.filter(
+                    (table) =>
+                        filterTable({
+                            table: {
+                                id: table.id,
+                                schema: table.schema,
+                            },
+                            filter,
+                            options: {
+                                defaultSchema: defaultSchemas[databaseType],
+                            },
+                        }) && (showDBViews ? true : !table.isView)
                 ),
                 areas,
                 mode: 'all',
@@ -133,6 +136,7 @@ export const CanvasProvider = ({ children }: CanvasProviderProps) => {
             fitView,
             databaseType,
             areas,
+            showDBViews,
         ]
     );
 
diff --git a/src/pages/editor-page/canvas/canvas.tsx b/src/pages/editor-page/canvas/canvas.tsx
index f8ebf909..3f560e6d 100644
--- a/src/pages/editor-page/canvas/canvas.tsx
+++ b/src/pages/editor-page/canvas/canvas.tsx
@@ -630,21 +630,26 @@ export const Canvas: React.FC<CanvasProps> = ({ initialTables }) => {
     }, [tempFloatingEdge?.sourceNodeId, setNodes]);
 
     const prevFilter = useRef<DiagramFilter | undefined>(undefined);
+    const prevShowDBViews = useRef<boolean>(showDBViews);
     useEffect(() => {
-        if (!equal(filter, prevFilter.current)) {
+        if (
+            !equal(filter, prevFilter.current) ||
+            showDBViews !== prevShowDBViews.current
+        ) {
             debounce(() => {
                 const overlappingTablesInDiagram = findOverlappingTables({
-                    tables: tables.filter((table) =>
-                        filterTable({
-                            table: {
-                                id: table.id,
-                                schema: table.schema,
-                            },
-                            filter,
-                            options: {
-                                defaultSchema: defaultSchemas[databaseType],
-                            },
-                        })
+                    tables: tables.filter(
+                        (table) =>
+                            filterTable({
+                                table: {
+                                    id: table.id,
+                                    schema: table.schema,
+                                },
+                                filter,
+                                options: {
+                                    defaultSchema: defaultSchemas[databaseType],
+                                },
+                            }) && (showDBViews ? true : !table.isView)
                     ),
                 });
                 setOverlapGraph(overlappingTablesInDiagram);
@@ -655,8 +660,9 @@ export const Canvas: React.FC<CanvasProps> = ({ initialTables }) => {
                 });
             }, 500)();
             prevFilter.current = filter;
+            prevShowDBViews.current = showDBViews;
         }
-    }, [filter, fitView, tables, setOverlapGraph, databaseType]);
+    }, [filter, fitView, tables, setOverlapGraph, databaseType, showDBViews]);
 
     useEffect(() => {
         const checkParentAreas = debounce(() => {
@@ -1337,17 +1343,18 @@ export const Canvas: React.FC<CanvasProps> = ({ initialTables }) => {
             } else if (event.action === 'load_diagram') {
                 const diagramTables = event.data.diagram.tables ?? [];
                 const overlappingTablesInDiagram = findOverlappingTables({
-                    tables: diagramTables.filter((table) =>
-                        filterTable({
-                            table: {
-                                id: table.id,
-                                schema: table.schema,
-                            },
-                            filter,
-                            options: {
-                                defaultSchema: defaultSchemas[databaseType],
-                            },
-                        })
+                    tables: diagramTables.filter(
+                        (table) =>
+                            filterTable({
+                                table: {
+                                    id: table.id,
+                                    schema: table.schema,
+                                },
+                                filter,
+                                options: {
+                                    defaultSchema: defaultSchemas[databaseType],
+                                },
+                            }) && (showDBViews ? true : !table.isView)
                     ),
                 });
                 setOverlapGraph(overlappingTablesInDiagram);
@@ -1361,6 +1368,7 @@ export const Canvas: React.FC<CanvasProps> = ({ initialTables }) => {
             filter,
             setNodes,
             databaseType,
+            showDBViews,
         ]
     );