@rebasepro/studio 0.24.0 → 0.24.1-canary.gcb918fc

package/dist/{SchemaVisualizer-DCLVfA5t.js → SchemaVisualizer-D-rAqwul.js}

@@ -1,12 +1,101 @@
 import { IconForView, useRebaseContext, useStudioCollectionRegistry, useTranslation } from "@rebasepro/app";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Chip, CircularProgress, IconButton, ResizablePanels, SearchBar, Tooltip, Typography, cls, defaultBorderMixin, useIsDarkMode } from "@rebasepro/ui";
+import { Chip, CircularProgress, IconButton, ResizablePanels, SearchBar, ToggleButtonGroup, Tooltip, Typography, cls, defaultBorderMixin, useIsDarkMode } from "@rebasepro/ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isPostgresCollectionConfig } from "@rebasepro/types";
 import { getTableName, resolveCollectionRelations } from "@rebasepro/common";
-import { Background, BackgroundVariant, BaseEdge, Controls, EdgeLabelRenderer, Handle, MarkerType, MiniMap, Position, ReactFlow, ReactFlowProvider, applyEdgeChanges, applyNodeChanges, getSmoothStepPath, useNodesInitialized, useReactFlow } from "@xyflow/react";
+import { Background, BackgroundVariant, BaseEdge, Controls, EdgeLabelRenderer, Handle, MarkerType, MiniMap, Position, ReactFlow, ReactFlowProvider, applyEdgeChanges, applyNodeChanges, getSmoothStepPath, useReactFlow } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import dagre from "dagre";
+//#region src/components/SchemaVisualizer/dagre-layout.ts
+/**
+* Place the graph with dagre, top to bottom.
+*
+* An ERD read as a column of tables fits the tall, narrow canvas the
+* visualizer is given, and it is the only layout the visualizer offers.
+* Deterministic: the same input always gives the same positions.
+*
+* The cost is in dagre's ordering phase and grows fast with cross-linked
+* graphs — 5 s at 200 tables with two relations each, 90 s at 500 — which is
+* why the visualizer runs this in a worker (`dagre-layout.worker.ts`).
+*/
+function runDagre(input) {
+	const g = new dagre.graphlib.Graph();
+	g.setGraph({
+		rankdir: "TB",
+		nodesep: 100,
+		ranksep: 180,
+		edgesep: 60,
+		marginx: 60,
+		marginy: 60
+	});
+	g.setDefaultEdgeLabel(() => ({}));
+	for (const node of input.nodes) g.setNode(node.id, {
+		width: node.width,
+		height: node.height
+	});
+	for (const edge of input.edges) g.setEdge(edge.source, edge.target);
+	dagre.layout(g);
+	const positions = {};
+	for (const node of input.nodes) {
+		const placed = g.node(node.id);
+		positions[node.id] = {
+			x: placed.x - node.width / 2,
+			y: placed.y - node.height / 2
+		};
+	}
+	return positions;
+}
+//#endregion
+//#region src/components/SchemaVisualizer/layout-runner.ts
+/**
+* Whether this environment can start the layout worker.
+*
+* No in tests (jsdom has no `Worker`) and on a server render; there the
+* layout runs where it is asked for, as it always did.
+*/
+var canLayOutOffThread = () => typeof Worker !== "undefined" && typeof Blob !== "undefined" && typeof URL !== "undefined" && typeof URL.createObjectURL === "function";
+/**
+* Lay a graph out in a worker of its own, which ends with the layout.
+*
+* The worker is inlined into the bundle (`?worker&inline`) rather than emitted
+* as a file beside it: `@rebasepro/studio` is a library, and a worker file
+* would be found only by an app bundler that rewrites
+* `new URL(…, import.meta.url)` inside dependencies, which Vite's dependency
+* pre-bundling does not. Imported on first use, so a page that never lays a
+* graph out never decodes it.
+*
+* A worker that cannot be started or loaded — a Content-Security-Policy
+* without `blob:` in `worker-src`, say — is not a broken diagram: the layout
+* runs on the main thread instead, as it did before there was a worker.
+*/
+async function layOutOffThread(input) {
+	const { default: LayoutWorker } = await import("./dagre-layout.worker-j9NbH9Gb.js");
+	let worker;
+	try {
+		worker = new LayoutWorker({ name: "rebase-schema-layout" });
+	} catch {
+		return runDagre(input);
+	}
+	return new Promise((resolve, reject) => {
+		worker.addEventListener("message", (event) => {
+			worker.terminate();
+			const reply = event.data;
+			if ("positions" in reply) resolve(reply.positions);
+			else reject(new Error(reply.error));
+		});
+		worker.addEventListener("error", (event) => {
+			event.preventDefault();
+			worker.terminate();
+			try {
+				resolve(runDagre(input));
+			} catch (error) {
+				reject(error);
+			}
+		});
+		worker.postMessage(input);
+	});
+}
 /** Header with a single line of text (junction tables or tableName === collectionName). */
 var HEADER_HEIGHT_SINGLE = 33;
 /** Header with two lines (name + subtitle when collectionName !== tableName). */
@@ -29,57 +118,82 @@ var estimateNodeHeight = (columnCount, headerHeight = HEADER_HEIGHT_DOUBLE) => h
 */
 var getColumnRowY = (rowIndex, headerHeight = HEADER_HEIGHT_DOUBLE) => headerHeight + rowIndex * ROW_HEIGHT + ROW_HEIGHT / 2;
 /**
-* Compute node positions using the dagre graph layout engine.
-* Returns a new array of nodes with updated `position`.
-*
-* The graph always ranks top to bottom: an ERD read as a column of tables
-* fits the tall, narrow canvas the visualizer is given, and it is the only
-* layout the visualizer offers.
+* What dagre will be given for these nodes and edges: each node's id and
+* box, each edge's ends, in order. The signature is all of it, so a changed
+* schema — a table, a column count, a relation — is a different key.
 */
-var getLayoutedElements = (nodes, edges) => {
-	const g = new dagre.graphlib.Graph();
-	g.setGraph({
-		rankdir: "TB",
-		nodesep: 100,
-		ranksep: 180,
-		edgesep: 60,
-		marginx: 60,
-		marginy: 60
-	});
-	g.setDefaultEdgeLabel(() => ({}));
-	const nodeHeights = /* @__PURE__ */ new Map();
-	nodes.forEach((node) => {
-		const data = node.data;
-		const h = estimateNodeHeight(data.columns?.length ?? 3, getHeaderHeight({
-			isJunction: Boolean(data.isJunction),
-			collectionName: data.collectionName ?? "",
-			tableName: data.tableName ?? ""
-		}));
-		nodeHeights.set(node.id, h);
-		g.setNode(node.id, {
-			width: 280,
-			height: h
-		});
-	});
-	edges.forEach((edge) => {
-		g.setEdge(edge.source, edge.target);
-	});
-	dagre.layout(g);
-	return {
+var planLayout = (nodes, edges) => {
+	const input = {
 		nodes: nodes.map((node) => {
-			const nodeWithPosition = g.node(node.id);
-			const h = nodeHeights.get(node.id) ?? estimateNodeHeight(3);
+			const data = node.data;
+			const headerH = getHeaderHeight({
+				isJunction: Boolean(data.isJunction),
+				collectionName: data.collectionName ?? "",
+				tableName: data.tableName ?? ""
+			});
 			return {
-				...node,
-				position: {
-					x: nodeWithPosition.x - 280 / 2,
-					y: nodeWithPosition.y - h / 2
-				}
+				id: node.id,
+				width: 280,
+				height: estimateNodeHeight(data.columns?.length ?? 3, headerH)
 			};
 		}),
-		edges
+		edges: edges.map((edge) => ({
+			source: edge.source,
+			target: edge.target
+		}))
+	};
+	return {
+		input,
+		signature: `${input.nodes.map((node) => `${node.id}:${node.height}`).join("|")}#${input.edges.map((edge) => `${edge.source}>${edge.target}`).join("|")}`
 	};
 };
+/**
+* Positions of the graphs laid out in this page's life, by
+* {@link LayoutPlan.signature}: the most recent few.
+*
+* Dagre takes 4.5–5 s at 200 cross-linked tables and 90 s at 500, so a graph
+* is laid out once: not again when the live RLS answer arrives (a badge, not
+* the graph), nor when the view is reopened. The layout is deterministic, so
+* an entry never goes stale. Holds geometry only, nothing read from the
+* database.
+*/
+var layoutCache = /* @__PURE__ */ new Map();
+var LAYOUT_CACHE_SIZE = 16;
+var rememberLayout = (signature, positions) => {
+	layoutCache.set(signature, positions);
+	if (layoutCache.size > LAYOUT_CACHE_SIZE) {
+		const oldest = layoutCache.keys().next().value;
+		if (oldest !== void 0) layoutCache.delete(oldest);
+	}
+	return positions;
+};
+/** The positions for this plan, if it has been laid out before. */
+var cachedLayout = (plan) => layoutCache.get(plan.signature);
+/** Lay the plan out here, on the calling thread. */
+var layOutNow = (plan) => cachedLayout(plan) ?? rememberLayout(plan.signature, runDagre(plan.input));
+/** Layouts running in a worker, by signature, so a second ask waits for the first. */
+var layoutsInFlight = /* @__PURE__ */ new Map();
+/**
+* Lay the plan out in a worker; the main thread stays free while it runs.
+* See {@link layOutOffThread}.
+*/
+var layOutInBackground = (plan) => {
+	const cached = cachedLayout(plan);
+	if (cached) return Promise.resolve(cached);
+	const running = layoutsInFlight.get(plan.signature);
+	if (running) return running;
+	const job = layOutOffThread(plan.input).then((positions) => rememberLayout(plan.signature, positions)).finally(() => layoutsInFlight.delete(plan.signature));
+	layoutsInFlight.set(plan.signature, job);
+	return job;
+};
+/** The nodes at their laid-out positions, as new objects. */
+var placeNodes = (nodes, positions) => nodes.map((node) => ({
+	...node,
+	position: { ...positions[node.id] ?? {
+		x: 0,
+		y: 0
+	} }
+}));
 var getCardinalityLabel = (cardinality, direction) => {
 	if (cardinality === "many") return "M:N";
 	if (direction === "inverse") return "1:1 ←";
@@ -307,52 +421,151 @@ var buildGraph = (collections, liveRls) => {
 			});
 		}
 	}
-	const layoutResult = getLayoutedElements(nodes, edges);
-	const nodePositions = /* @__PURE__ */ new Map();
-	for (const node of layoutResult.nodes) nodePositions.set(node.id, { x: node.position.x });
-	for (const edge of layoutResult.edges) {
-		const srcPos = nodePositions.get(edge.source);
-		const tgtPos = nodePositions.get(edge.target);
-		const srcBaseHandle = edge.sourceHandle ?? "source-default";
-		const tgtBaseHandle = edge.targetHandle ?? "target-default";
-		if (srcPos && tgtPos) {
+	return {
+		nodes,
+		edges
+	};
+};
+/**
+* The graph at its laid-out positions, with each edge's handles on the sides
+* that face each other: a source left of its target exits right and enters
+* the target from the left, and the other way round.
+*/
+var placeGraph = (graph, positions) => {
+	return {
+		nodes: placeNodes(graph.nodes, positions),
+		edges: graph.edges.map((edge) => {
+			const srcPos = positions[edge.source];
+			const tgtPos = positions[edge.target];
+			const srcBaseHandle = edge.sourceHandle ?? "source-default";
+			const tgtBaseHandle = edge.targetHandle ?? "target-default";
+			if (!srcPos || !tgtPos) return {
+				...edge,
+				sourceHandle: `${srcBaseHandle}-right`,
+				targetHandle: `${tgtBaseHandle}-left`
+			};
 			const sourceIsLeft = srcPos.x + 280 / 2 <= tgtPos.x + 280 / 2;
-			edge.sourceHandle = `${srcBaseHandle}-${sourceIsLeft ? "right" : "left"}`;
-			edge.targetHandle = `${tgtBaseHandle}-${sourceIsLeft ? "left" : "right"}`;
-		} else {
-			edge.sourceHandle = `${srcBaseHandle}-right`;
-			edge.targetHandle = `${tgtBaseHandle}-left`;
+			return {
+				...edge,
+				sourceHandle: `${srcBaseHandle}-${sourceIsLeft ? "right" : "left"}`,
+				targetHandle: `${tgtBaseHandle}-${sourceIsLeft ? "left" : "right"}`
+			};
+		})
+	};
+};
+var isJunctionNode = (node) => Boolean(node.data.isJunction);
+/**
+* The tables within `depth` relations of `focus`, and every relation between
+* them.
+*
+* A junction table is not a step of its own: a many-to-many is one relation,
+* drawn through its junction. So distances are counted in half steps — an edge
+* that touches a junction is one, a foreign key between two tables is two.
+*/
+var neighbourhoodOf = (graph, focus, depth) => {
+	const junctions = new Set(graph.nodes.filter(isJunctionNode).map((node) => node.id));
+	const adjacent = /* @__PURE__ */ new Map();
+	for (const edge of graph.edges) {
+		adjacent.set(edge.source, [...adjacent.get(edge.source) ?? [], edge.target]);
+		adjacent.set(edge.target, [...adjacent.get(edge.target) ?? [], edge.source]);
+	}
+	const limit = depth * 2;
+	const distance = /* @__PURE__ */ new Map([[focus, 0]]);
+	const byDistance = Array.from({ length: limit + 1 }, () => []);
+	byDistance[0].push(focus);
+	for (let reached = 0; reached <= limit; reached++) for (const id of byDistance[reached]) {
+		if (distance.get(id) !== reached) continue;
+		for (const next of adjacent.get(id) ?? []) {
+			const step = junctions.has(id) || junctions.has(next) ? 1 : 2;
+			const nextDistance = reached + step;
+			if (nextDistance > limit || (distance.get(next) ?? Infinity) <= nextDistance) continue;
+			distance.set(next, nextDistance);
+			byDistance[nextDistance].push(next);
 		}
 	}
-	return layoutResult;
+	return {
+		nodes: graph.nodes.filter((node) => distance.has(node.id)),
+		edges: graph.edges.filter((edge) => distance.has(edge.source) && distance.has(edge.target))
+	};
+};
+/** The table with the most relations: where a large schema opens. */
+var mostConnectedTable = (graph) => {
+	const degree = /* @__PURE__ */ new Map();
+	for (const edge of graph.edges) {
+		degree.set(edge.source, (degree.get(edge.source) ?? 0) + 1);
+		degree.set(edge.target, (degree.get(edge.target) ?? 0) + 1);
+	}
+	let best;
+	for (const node of graph.nodes) {
+		if (isJunctionNode(node)) continue;
+		if (!best || (degree.get(node.id) ?? 0) > (degree.get(best.id) ?? 0)) best = node;
+	}
+	return best?.id;
+};
+var EMPTY_GRAPH = {
+	nodes: [],
+	edges: []
 };
-var useSchemaGraph = (collections, liveRls = null) => {
+var NO_POSITIONS = {};
+var useSchemaGraph = (collections, liveRls = null, focus = null, depth = 1) => {
 	const [version, setVersion] = useState(0);
 	const relayout = useCallback(() => setVersion((v) => v + 1), []);
-	const { nodes, edges, tableCount, relationCount } = useMemo(() => {
-		if (!collections || collections.length === 0) return {
-			nodes: [],
-			edges: [],
-			tableCount: 0,
-			relationCount: 0
-		};
-		const result = buildGraph(collections, liveRls);
-		return {
-			...result,
-			tableCount: result.nodes.length,
-			relationCount: result.edges.length
+	const graph = useMemo(() => collections && collections.length > 0 ? buildGraph(collections, liveRls) : EMPTY_GRAPH, [collections, liveRls]);
+	const tables = graph.nodes.filter((node) => !isJunctionNode(node)).length;
+	const focused = tables > 300 ? (focus && graph.nodes.some((node) => node.id === focus) ? focus : mostConnectedTable(graph)) ?? null : null;
+	const drawn = useMemo(() => focused ? neighbourhoodOf(graph, focused, depth) : graph, [
+		graph,
+		focused,
+		depth
+	]);
+	const plan = useMemo(() => planLayout(drawn.nodes, drawn.edges), [drawn]);
+	/**
+	* Where the layout runs. Off the main thread wherever a worker can start;
+	* in tests and on a server, here, as the visualizer always did.
+	*/
+	const offThread = canLayOutOffThread();
+	const [laidOut, setLaidOut] = useState(null);
+	const [layoutError, setLayoutError] = useState(null);
+	const positions = drawn.nodes.length === 0 ? NO_POSITIONS : cachedLayout(plan) ?? (laidOut?.signature === plan.signature ? laidOut.positions : void 0) ?? (offThread ? void 0 : layOutNow(plan));
+	useEffect(() => {
+		if (!offThread || drawn.nodes.length === 0 || cachedLayout(plan)) return;
+		let current = true;
+		layOutInBackground(plan).then((result) => {
+			if (current) setLaidOut({
+				signature: plan.signature,
+				positions: result
+			});
+		}, (error) => {
+			if (current) setLayoutError(error);
+		});
+		return () => {
+			current = false;
 		};
 	}, [
-		collections,
-		version,
-		liveRls
+		plan,
+		offThread,
+		drawn
+	]);
+	const placed = useMemo(() => positions ? placeGraph(drawn, positions) : EMPTY_GRAPH, [
+		drawn,
+		positions,
+		version
 	]);
+	if (layoutError) throw layoutError;
 	return {
-		nodes,
-		edges,
+		nodes: placed.nodes,
+		edges: placed.edges,
+		allNodes: graph.nodes,
 		relayout,
-		tableCount,
-		relationCount
+		tableCount: graph.nodes.length,
+		relationCount: graph.edges.length,
+		layingOut: positions === void 0,
+		neighbourhood: focused ? {
+			focus: focused,
+			depth,
+			shown: drawn.nodes.length,
+			total: tables
+		} : null
 	};
 };
 //#endregion
@@ -699,43 +912,44 @@ function SchemaVisualizerCanvas({ collections }) {
 	const reactFlowInstance = useReactFlow();
 	const liveRls = useLiveRlsTables();
 	const isDark = useIsDarkMode();
-	const { nodes: layoutedNodes, edges: layoutedEdges, relayout, tableCount, relationCount } = useSchemaGraph(collections, liveRls);
+	const [focus, setFocus] = useState(null);
+	const [depth, setDepth] = useState(1);
+	const { nodes: layoutedNodes, edges: layoutedEdges, allNodes, relayout, tableCount, relationCount, layingOut, neighbourhood } = useSchemaGraph(collections, liveRls, focus, depth);
 	const [nodes, setNodes] = useState([]);
 	const [edges, setEdges] = useState([]);
 	const [selectedTable, setSelectedTable] = useState(null);
 	const [searchQuery, setSearchQuery] = useState("");
-	const initialFitDone = useRef(false);
 	useEffect(() => {
+		if (layingOut) return;
 		setNodes(layoutedNodes);
 		setEdges(layoutedEdges);
-	}, [layoutedNodes, layoutedEdges]);
+	}, [
+		layoutedNodes,
+		layoutedEdges,
+		layingOut
+	]);
 	const onNodesChange = useCallback((changes) => setNodes((nds) => applyNodeChanges(changes, nds)), []);
 	const onEdgesChange = useCallback((changes) => setEdges((eds) => applyEdgeChanges(changes, eds)), []);
 	/**
-	* Fit the graph into view, once, as soon as it can be measured.
+	* Fit the graph into view when it is first drawn, and again whenever a
+	* different neighbourhood replaces it.
 	*
-	* This used to fire on a 200ms timer. `fitView` needs every node's real
-	* width and height, which React Flow only knows after it has laid them out
-	* and measured them — with a dozen tables, a cold Monaco-sized bundle and
-	* a slow first paint, 200ms is often too early. The fit then ran against
-	* zero-sized nodes and produced a viewport nothing lines up with, and
-	* `initialFitDone` made sure it was never retried: the ERD opened as a
-	* scatter of specks in a corner and stayed there until you hit "fit" by
-	* hand. `useNodesInitialized` is the event this was approximating.
+	* `fitView` needs every node's real width and height, which React Flow
+	* only knows once it has rendered and measured them; a fit made before
+	* that leaves the ERD a scatter of specks in a corner. React Flow's own
+	* `fitView` waits for the measurement, so it is asked for in the commit
+	* that hands it the new nodes — after its store has them, which a
+	* child's effect does before this one runs.
 	*/
-	const nodesInitialized = useNodesInitialized();
+	const fitPending = useRef(true);
 	useEffect(() => {
-		if (!nodesInitialized || nodes.length === 0 || initialFitDone.current) return;
-		initialFitDone.current = true;
+		if (!fitPending.current || nodes.length === 0) return;
+		fitPending.current = false;
 		reactFlowInstance.fitView({
 			padding: .15,
 			duration: 400
 		});
-	}, [
-		nodesInitialized,
-		nodes.length,
-		reactFlowInstance
-	]);
+	}, [nodes, reactFlowInstance]);
 	const handleFitView = useCallback(() => {
 		reactFlowInstance.fitView({
 			padding: .15,
@@ -750,12 +964,27 @@ function SchemaVisualizerCanvas({ collections }) {
 	}, []);
 	const handleTableSelect = useCallback((nodeId) => {
 		setSelectedTable(nodeId);
+		if (neighbourhood) {
+			if (neighbourhood.focus !== nodeId) {
+				fitPending.current = true;
+				setFocus(nodeId);
+			}
+			return;
+		}
 		const node = nodes.find((n) => n.id === nodeId);
 		if (node) reactFlowInstance.setCenter(node.position.x + 140, node.position.y + 60, {
 			zoom: 1.2,
 			duration: 400
 		});
-	}, [nodes, reactFlowInstance]);
+	}, [
+		nodes,
+		reactFlowInstance,
+		neighbourhood
+	]);
+	const handleDepthChange = useCallback((value) => {
+		fitPending.current = true;
+		setDepth(value === "2" ? 2 : 1);
+	}, []);
 	const [sidebarSize, setSidebarSize] = useState(() => {
 		try {
 			const saved = localStorage.getItem("rebase_schema_viz_sidebar_size");
@@ -775,30 +1004,34 @@ function SchemaVisualizerCanvas({ collections }) {
 		const q = searchQuery.toLowerCase();
 		return postgresCollections.filter((c) => c.name.toLowerCase().includes(q) || getTableName(c).toLowerCase().includes(q) || c.slug?.toLowerCase().includes(q));
 	}, [postgresCollections, searchQuery]);
-	const junctionNodes = useMemo(() => nodes.filter((n) => n.data.isJunction), [nodes]);
+	const junctionNodes = useMemo(() => allNodes.filter((n) => n.data.isJunction), [allNodes]);
 	/**
 	* The RLS answer for one collection, from the same place the graph used.
 	*
-	* `nodes` already carries it, so look it up there rather than re-deriving —
-	* that is what kept the sidebar dots, the node badges and the total from
-	* agreeing.
+	* The graph's nodes already carry it, so look it up there rather than
+	* re-deriving — that is what kept the sidebar dots, the node badges and the
+	* total from agreeing. Every node, not only the drawn ones: a large schema
+	* draws a neighbourhood, and the list shows every table.
 	*/
-	const rlsEnabledFor = useCallback((collection) => {
-		const node = nodes.find((n) => n.id === `table-${getTableName(collection)}`);
-		return Boolean((node?.data)?.rlsEnabled);
-	}, [nodes]);
+	const rlsByNodeId = useMemo(() => new Map(allNodes.map((n) => [n.id, Boolean(n.data.rlsEnabled)])), [allNodes]);
+	const rlsEnabledFor = useCallback((collection) => rlsByNodeId.get(`table-${getTableName(collection)}`) ?? false, [rlsByNodeId]);
+	const focusName = useMemo(() => {
+		const node = neighbourhood ? allNodes.find((n) => n.id === neighbourhood.focus) : void 0;
+		return node ? node.data.collectionName : "";
+	}, [allNodes, neighbourhood]);
 	const stats = useMemo(() => ({
 		tables: tableCount,
 		relations: relationCount,
 		junctions: junctionNodes.length,
-		withRls: nodes.filter((n) => n.data?.rlsEnabled).length
+		withRls: allNodes.filter((n) => n.data?.rlsEnabled).length
 	}), [
 		tableCount,
 		relationCount,
 		junctionNodes.length,
-		nodes
+		allNodes
 	]);
 	return /* @__PURE__ */ jsx(ResizablePanels, {
+		dividerAriaLabel: t("resize_sidebar"),
 		orientation: "horizontal",
 		panelSizePercent: sidebarSize,
 		onPanelSizeChange: setSidebarSize,
@@ -1013,104 +1246,144 @@ function SchemaVisualizerCanvas({ collections }) {
 				})]
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "flex-grow relative",
-				children: [/* @__PURE__ */ jsxs(ReactFlow, {
-					nodes,
-					edges,
-					onNodesChange,
-					onEdgesChange,
-					onNodeClick: handleNodeClick,
-					onPaneClick: handlePaneClick,
-					nodeTypes,
-					edgeTypes,
-					fitView: true,
-					fitViewOptions: { padding: .15 },
-					minZoom: .1,
-					maxZoom: 2,
-					proOptions: { hideAttribution: true },
-					colorMode: isDark ? "dark" : "light",
-					className: "bg-surface-well",
-					children: [
-						/* @__PURE__ */ jsx(Background, {
-							variant: BackgroundVariant.Dots,
-							gap: 20,
-							size: 1,
-							className: "!bg-surface-well",
-							color: isDark ? "#2a2a2a" : "#d9d9dc"
-						}),
-						/* @__PURE__ */ jsx(Controls, {
-							showInteractive: false,
-							className: "!mb-16 !bg-surface-card !border !border-hairline !shadow-sm !rounded-lg [--xy-controls-button-background-color:var(--color-surface-card)] [--xy-controls-button-background-color-hover:var(--color-surface-card-hover)] [--xy-controls-button-color:var(--color-text-secondary)] dark:[--xy-controls-button-color:var(--color-text-secondary-dark)] [--xy-controls-button-color-hover:var(--color-text-primary)] dark:[--xy-controls-button-color-hover:var(--color-text-primary-dark)] [--xy-controls-button-border-color:var(--color-hairline)]"
-						}),
-						/* @__PURE__ */ jsx(MiniMap, {
-							nodeStrokeColor: (n) => {
-								const d = n.data;
-								if (d.isJunction) return "#a78bfa";
-								if (d.rlsEnabled) return "#22c55e";
-								return "#6366f1";
-							},
-							nodeColor: (n) => {
-								if (n.data.isJunction) return isDark ? "#3b2f6b" : "#ede9fe";
-								return isDark ? "#2b2d4a" : "#eef2ff";
-							},
-							maskColor: isDark ? "rgba(0,0,0,0.35)" : "rgba(0,0,0,0.08)",
-							className: "!bg-surface-card !border !border-hairline !shadow-sm !rounded-lg"
-						})
-					]
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "absolute bottom-4 left-4 flex items-center gap-3 px-3 py-2 bg-surface-card/90 backdrop-blur-sm rounded-lg border border-hairline shadow-sm",
-					children: [
-						/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-1.5",
-							children: [/* @__PURE__ */ jsx("div", { className: "w-6 h-0.5 bg-indigo-500 rounded" }), /* @__PURE__ */ jsx(Typography, {
-								variant: "caption",
-								className: "text-[10px] text-text-disabled dark:text-text-disabled-dark",
-								children: "Owning"
-							})]
-						}),
-						/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-1.5",
-							children: [/* @__PURE__ */ jsx("div", { className: "w-6 h-0.5 bg-violet-500 rounded" }), /* @__PURE__ */ jsx(Typography, {
-								variant: "caption",
-								className: "text-[10px] text-text-disabled dark:text-text-disabled-dark",
-								children: "M:N"
-							})]
-						}),
-						/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-1.5",
-							children: [/* @__PURE__ */ jsx("div", {
-								className: "w-6 h-0.5 rounded",
-								style: { backgroundImage: "repeating-linear-gradient(90deg, #94a3b8, #94a3b8 4px, transparent 4px, transparent 7px)" }
-							}), /* @__PURE__ */ jsx(Typography, {
-								variant: "caption",
-								className: "text-[10px] text-text-disabled dark:text-text-disabled-dark",
-								children: "Inverse"
-							})]
-						}),
-						/* @__PURE__ */ jsx("div", { className: "h-3 w-px bg-surface-raised" }),
-						/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-1",
-							children: [/* @__PURE__ */ jsx("span", {
-								className: "text-[9px]",
-								children: "🔑"
-							}), /* @__PURE__ */ jsx(Typography, {
+				children: [
+					/* @__PURE__ */ jsxs(ReactFlow, {
+						nodes,
+						edges,
+						onNodesChange,
+						onEdgesChange,
+						onNodeClick: handleNodeClick,
+						onPaneClick: handlePaneClick,
+						nodeTypes,
+						edgeTypes,
+						fitView: true,
+						fitViewOptions: { padding: .15 },
+						minZoom: .1,
+						maxZoom: 2,
+						proOptions: { hideAttribution: true },
+						colorMode: isDark ? "dark" : "light",
+						className: "bg-surface-well",
+						children: [
+							/* @__PURE__ */ jsx(Background, {
+								variant: BackgroundVariant.Dots,
+								gap: 20,
+								size: 1,
+								className: "!bg-surface-well",
+								color: isDark ? "#2a2a2a" : "#d9d9dc"
+							}),
+							/* @__PURE__ */ jsx(Controls, {
+								showInteractive: false,
+								className: "!mb-16 !bg-surface-card !border !border-hairline !shadow-sm !rounded-lg [--xy-controls-button-background-color:var(--color-surface-card)] [--xy-controls-button-background-color-hover:var(--color-surface-card-hover)] [--xy-controls-button-color:var(--color-text-secondary)] dark:[--xy-controls-button-color:var(--color-text-secondary-dark)] [--xy-controls-button-color-hover:var(--color-text-primary)] dark:[--xy-controls-button-color-hover:var(--color-text-primary-dark)] [--xy-controls-button-border-color:var(--color-hairline)]"
+							}),
+							/* @__PURE__ */ jsx(MiniMap, {
+								nodeStrokeColor: (n) => {
+									const d = n.data;
+									if (d.isJunction) return "#a78bfa";
+									if (d.rlsEnabled) return "#22c55e";
+									return "#6366f1";
+								},
+								nodeColor: (n) => {
+									if (n.data.isJunction) return isDark ? "#3b2f6b" : "#ede9fe";
+									return isDark ? "#2b2d4a" : "#eef2ff";
+								},
+								maskColor: isDark ? "rgba(0,0,0,0.35)" : "rgba(0,0,0,0.08)",
+								className: "!bg-surface-card !border !border-hairline !shadow-sm !rounded-lg"
+							})
+						]
+					}),
+					neighbourhood && /* @__PURE__ */ jsx("div", {
+						className: "absolute top-4 left-4 right-4 flex justify-start pointer-events-none",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap items-center gap-2 max-w-full px-3 py-2 bg-surface-card/90 backdrop-blur-sm rounded-lg border border-hairline shadow-sm pointer-events-auto",
+							children: [/* @__PURE__ */ jsx(Typography, {
 								variant: "caption",
-								className: "text-[10px] text-text-disabled dark:text-text-disabled-dark",
-								children: "PK"
+								className: "text-text-secondary dark:text-text-secondary-dark",
+								children: t("studio_schema_neighbourhood", {
+									shown: neighbourhood.shown,
+									total: neighbourhood.total,
+									table: focusName
+								})
+							}), /* @__PURE__ */ jsx(ToggleButtonGroup, {
+								value: String(neighbourhood.depth),
+								onValueChange: handleDepthChange,
+								options: [{
+									value: "1",
+									label: t("studio_schema_neighbourhood_depth_1")
+								}, {
+									value: "2",
+									label: t("studio_schema_neighbourhood_depth_2")
+								}]
 							})]
-						}),
-						/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-1",
-							children: [/* @__PURE__ */ jsx("span", {
-								className: "text-[9px]",
-								children: "🔗"
-							}), /* @__PURE__ */ jsx(Typography, {
+						})
+					}),
+					layingOut && /* @__PURE__ */ jsx("div", {
+						role: "status",
+						className: "absolute inset-0 flex items-center justify-center pointer-events-none",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2 px-3 py-2 bg-surface-card/90 backdrop-blur-sm rounded-lg border border-hairline shadow-sm",
+							children: [/* @__PURE__ */ jsx(CircularProgress, { size: "smallest" }), /* @__PURE__ */ jsx(Typography, {
 								variant: "caption",
-								className: "text-[10px] text-text-disabled dark:text-text-disabled-dark",
-								children: "FK"
+								className: "text-text-secondary dark:text-text-secondary-dark",
+								children: t("studio_schema_laying_out")
 							})]
 						})
-					]
-				})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "absolute bottom-4 left-4 flex items-center gap-3 px-3 py-2 bg-surface-card/90 backdrop-blur-sm rounded-lg border border-hairline shadow-sm",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-1.5",
+								children: [/* @__PURE__ */ jsx("div", { className: "w-6 h-0.5 bg-indigo-500 rounded" }), /* @__PURE__ */ jsx(Typography, {
+									variant: "caption",
+									className: "text-[10px] text-text-disabled dark:text-text-disabled-dark",
+									children: "Owning"
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-1.5",
+								children: [/* @__PURE__ */ jsx("div", { className: "w-6 h-0.5 bg-violet-500 rounded" }), /* @__PURE__ */ jsx(Typography, {
+									variant: "caption",
+									className: "text-[10px] text-text-disabled dark:text-text-disabled-dark",
+									children: "M:N"
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-1.5",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "w-6 h-0.5 rounded",
+									style: { backgroundImage: "repeating-linear-gradient(90deg, #94a3b8, #94a3b8 4px, transparent 4px, transparent 7px)" }
+								}), /* @__PURE__ */ jsx(Typography, {
+									variant: "caption",
+									className: "text-[10px] text-text-disabled dark:text-text-disabled-dark",
+									children: "Inverse"
+								})]
+							}),
+							/* @__PURE__ */ jsx("div", { className: "h-3 w-px bg-surface-raised" }),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-1",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-[9px]",
+									children: "🔑"
+								}), /* @__PURE__ */ jsx(Typography, {
+									variant: "caption",
+									className: "text-[10px] text-text-disabled dark:text-text-disabled-dark",
+									children: "PK"
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-1",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-[9px]",
+									children: "🔗"
+								}), /* @__PURE__ */ jsx(Typography, {
+									variant: "caption",
+									className: "text-[10px] text-text-disabled dark:text-text-disabled-dark",
+									children: "FK"
+								})]
+							})
+						]
+					})
+				]
 			})]
 		})
 	});
@@ -1173,4 +1446,4 @@ var SchemaVisualizer = () => {
 //#endregion
 export { SchemaVisualizer };
 
-//# sourceMappingURL=SchemaVisualizer-DCLVfA5t.js.map
+//# sourceMappingURL=SchemaVisualizer-D-rAqwul.js.map