fix: overlapping indication with hidden views (#988)

This commit is contained in:
Guy Ben-Aharon
2025-11-30 15:50:54 +02:00
committed by GitHub
parent de5f17266d
commit 7428f46f32
2 changed files with 47 additions and 35 deletions

View File

@@ -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,
]
);

View File

@@ -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,
]
);