infrahub-schema-visualizer 0.0.1

package/src/components/FilterPanel.tsx

@@ -0,0 +1,291 @@
+import { Icon } from "@iconify-icon/react";
+import { useCallback, useMemo, useState } from "react";
+import type {
+	NodeSchema,
+	ProfileSchema,
+	TemplateSchema,
+} from "../types/schema";
+import { cn } from "../utils/cn";
+import { getSchemaKind } from "../utils/schema-to-flow";
+
+export type SchemaItem = {
+	schema: NodeSchema | ProfileSchema | TemplateSchema;
+	type: "node" | "profile" | "template";
+};
+
+export interface FilterPanelProps {
+	namespaceSchemas: Map<string, SchemaItem[]>;
+	hiddenNodes: Set<string>;
+	onToggleNamespace: (namespace: string) => void;
+	onToggleNode: (kind: string) => void;
+	onFocusNode: (kind: string) => void;
+	onClose: () => void;
+	onHoverNode?: (kind: string | null) => void;
+}
+
+// Get badge color based on schema type
+const getTypeBadgeColor = (type: "node" | "profile" | "template") => {
+	switch (type) {
+		case "profile":
+			return "bg-pink-100 text-pink-700";
+		case "template":
+			return "bg-amber-100 text-amber-700";
+		default:
+			return "bg-indigo-100 text-indigo-700";
+	}
+};
+
+export function FilterPanel({
+	namespaceSchemas,
+	hiddenNodes,
+	onToggleNamespace,
+	onToggleNode,
+	onFocusNode,
+	onClose,
+	onHoverNode,
+}: FilterPanelProps) {
+	const [expandedNamespaces, setExpandedNamespaces] = useState<Set<string>>(
+		new Set(),
+	);
+	const [searchTerm, setSearchTerm] = useState("");
+
+	const toggleExpand = (namespace: string) => {
+		setExpandedNamespaces((prev) => {
+			const next = new Set(prev);
+			if (next.has(namespace)) {
+				next.delete(namespace);
+			} else {
+				next.add(namespace);
+			}
+			return next;
+		});
+	};
+
+	const namespaces = Array.from(namespaceSchemas.keys()).sort();
+
+	// Filter namespaces and schemas based on search term
+	const filteredNamespaces = useMemo(() => {
+		if (!searchTerm.trim()) {
+			return namespaces;
+		}
+		const term = searchTerm.toLowerCase().trim();
+		return namespaces.filter((namespace) => {
+			// Check if namespace matches
+			if (namespace.toLowerCase().includes(term)) {
+				return true;
+			}
+			// Check if any schema in namespace matches
+			const nsSchemas = namespaceSchemas.get(namespace) ?? [];
+			return nsSchemas.some(
+				(item) =>
+					item.schema.name.toLowerCase().includes(term) ||
+					(item.schema.label?.toLowerCase().includes(term) ?? false) ||
+					(item.schema.kind?.toLowerCase().includes(term) ?? false) ||
+					item.type.toLowerCase().includes(term),
+			);
+		});
+	}, [namespaces, namespaceSchemas, searchTerm]);
+
+	// Get filtered schemas for a namespace
+	const getFilteredSchemas = useCallback(
+		(namespace: string) => {
+			const nsSchemas = namespaceSchemas.get(namespace) ?? [];
+			if (!searchTerm.trim()) {
+				return nsSchemas;
+			}
+			const term = searchTerm.toLowerCase().trim();
+			// If namespace matches, show all schemas
+			if (namespace.toLowerCase().includes(term)) {
+				return nsSchemas;
+			}
+			// Otherwise filter schemas
+			return nsSchemas.filter(
+				(item) =>
+					item.schema.name.toLowerCase().includes(term) ||
+					(item.schema.label?.toLowerCase().includes(term) ?? false) ||
+					(item.schema.kind?.toLowerCase().includes(term) ?? false) ||
+					item.type.toLowerCase().includes(term),
+			);
+		},
+		[namespaceSchemas, searchTerm],
+	);
+
+	return (
+		<div className="flex h-full w-80 flex-col border-gray-200 border-l bg-white">
+			<div className="flex items-center justify-between border-gray-200 border-b px-4 py-3">
+				<h3 className="font-semibold text-gray-700">Filter Schemas</h3>
+				<button
+					type="button"
+					onClick={onClose}
+					className="p-1 rounded hover:bg-gray-100 text-gray-500"
+				>
+					<Icon icon="mdi:close" className="text-lg" />
+				</button>
+			</div>
+
+			{/* Search input */}
+			<div className="border-gray-200 border-b px-3 py-2">
+				<div className="relative">
+					<Icon
+						icon="mdi:magnify"
+						className="-translate-y-1/2 absolute top-1/2 left-2.5 text-gray-400 text-lg"
+					/>
+					<input
+						type="text"
+						placeholder="Search schemas..."
+						value={searchTerm}
+						onChange={(e) => setSearchTerm(e.target.value)}
+						className="w-full rounded-md border border-gray-200 py-1.5 pr-8 pl-9 text-sm placeholder:text-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+					/>
+					{searchTerm && (
+						<button
+							type="button"
+							onClick={() => setSearchTerm("")}
+							className="-translate-y-1/2 absolute top-1/2 right-2 text-gray-400 hover:text-gray-600"
+						>
+							<Icon icon="mdi:close-circle" className="text-lg" />
+						</button>
+					)}
+				</div>
+			</div>
+
+			<div className="flex-1 overflow-y-auto p-2">
+				{filteredNamespaces.length === 0 && searchTerm && (
+					<div className="px-4 py-8 text-center text-gray-400 text-sm">
+						No schemas found matching "{searchTerm}"
+					</div>
+				)}
+				{filteredNamespaces.map((namespace) => {
+					const nsSchemas = namespaceSchemas.get(namespace) ?? [];
+					const filteredSchemas = getFilteredSchemas(namespace);
+					const isExpanded =
+						expandedNamespaces.has(namespace) || searchTerm.trim() !== "";
+					const visibleCount = nsSchemas.filter(
+						(item) => !hiddenNodes.has(getSchemaKind(item.schema)),
+					).length;
+					const allHidden = visibleCount === 0;
+					const allVisible = visibleCount === nsSchemas.length;
+
+					return (
+						<div key={namespace} className="mb-1">
+							<div
+								className={cn(
+									"flex items-center gap-2 rounded px-2 py-1.5 hover:bg-gray-100",
+									allHidden ? "opacity-50" : "",
+								)}
+							>
+								<button
+									type="button"
+									onClick={() => toggleExpand(namespace)}
+									className="flex h-5 w-5 items-center justify-center text-gray-500"
+								>
+									<Icon
+										icon={isExpanded ? "mdi:chevron-down" : "mdi:chevron-right"}
+										className="text-lg"
+									/>
+								</button>
+								<button
+									type="button"
+									onClick={() => onToggleNamespace(namespace)}
+									className="flex h-5 w-5 items-center justify-center"
+								>
+									<Icon
+										icon={
+											allHidden
+												? "mdi:checkbox-blank-outline"
+												: allVisible
+													? "mdi:checkbox-marked"
+													: "mdi:minus-box"
+										}
+										className={cn(
+											"text-lg",
+											allHidden ? "text-gray-400" : "text-indigo-600",
+										)}
+									/>
+								</button>
+								<span className="flex-1 font-medium text-gray-700 text-sm">
+									{namespace}
+								</span>
+								<span className="px-1.5 py-0.5 rounded bg-gray-100 text-gray-500 text-xs">
+									{visibleCount}/{nsSchemas.length}
+								</span>
+							</div>
+							{isExpanded && (
+								<div className="ml-6 space-y-0.5 py-1">
+									{filteredSchemas.map((item) => {
+										const kind = getSchemaKind(item.schema);
+										const isSchemaHidden = hiddenNodes.has(kind);
+										return (
+											// biome-ignore lint/a11y/useSemanticElements: Using div for hover highlighting wrapper is intentional
+											<div
+												key={kind}
+												role="group"
+												className={cn(
+													"flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-gray-100",
+													isSchemaHidden ? "opacity-50" : "",
+												)}
+												onMouseEnter={() =>
+													!isSchemaHidden && onHoverNode?.(kind)
+												}
+												onMouseLeave={() => onHoverNode?.(null)}
+											>
+												<button
+													type="button"
+													onClick={() => onToggleNode(kind)}
+													className="flex h-5 w-5 shrink-0 items-center justify-center"
+												>
+													<Icon
+														icon={
+															isSchemaHidden
+																? "mdi:checkbox-blank-outline"
+																: "mdi:checkbox-marked"
+														}
+														className={cn(
+															"text-lg",
+															isSchemaHidden
+																? "text-gray-400"
+																: "text-indigo-600",
+														)}
+													/>
+												</button>
+												{item.schema.icon && (
+													<Icon
+														icon={item.schema.icon}
+														className="shrink-0 text-gray-500 text-sm"
+													/>
+												)}
+												<span className="min-w-0 flex-1 truncate text-left text-gray-600 text-sm">
+													{item.schema.label ?? item.schema.name}
+												</span>
+												{item.type !== "node" && (
+													<span
+														className={cn(
+															"px-1 py-0.5 rounded text-[9px] uppercase font-medium",
+															getTypeBadgeColor(item.type),
+														)}
+													>
+														{item.type}
+													</span>
+												)}
+												{!isSchemaHidden && (
+													<button
+														type="button"
+														onClick={() => onFocusNode(kind)}
+														className="flex h-5 w-5 shrink-0 items-center justify-center text-gray-400 hover:text-indigo-600"
+														title="Focus on schema"
+													>
+														<Icon icon="mdi:target" className="text-sm" />
+													</button>
+												)}
+											</div>
+										);
+									})}
+								</div>
+							)}
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+}

package/src/components/FloatingEdge.tsx

@@ -0,0 +1,231 @@
+import {
+	BaseEdge,
+	type EdgeProps,
+	getBezierPath,
+	getSmoothStepPath,
+	Position,
+	useInternalNode,
+} from "@xyflow/react";
+
+export type EdgeStyle = "bezier" | "smoothstep";
+
+type NodeType = NonNullable<ReturnType<typeof useInternalNode>>;
+
+// Get handle position by ID from a node
+function getHandlePosition(
+	node: NodeType,
+	handleId: string,
+): { x: number; y: number; position: Position } | null {
+	// Check both source and target handle bounds
+	const sourceHandle = node.internals.handleBounds?.source?.find(
+		(h) => h.id === handleId,
+	);
+	const targetHandle = node.internals.handleBounds?.target?.find(
+		(h) => h.id === handleId,
+	);
+	const handle = sourceHandle ?? targetHandle;
+
+	if (!handle) return null;
+
+	return {
+		x: node.internals.positionAbsolute.x + handle.x + handle.width / 2,
+		y: node.internals.positionAbsolute.y + handle.y + handle.height / 2,
+		position: handle.position,
+	};
+}
+
+// Get the best handles to use based on node positions
+function getClosestHandles(
+	sourceNode: NodeType,
+	targetNode: NodeType,
+	sourceRelName: string,
+	targetRelName: string | null,
+): {
+	sx: number;
+	sy: number;
+	tx: number;
+	ty: number;
+	sourcePos: Position;
+	targetPos: Position;
+} {
+	// Get source handles (left and right for the relationship)
+	const sourceLeftHandle = getHandlePosition(
+		sourceNode,
+		`rel-${sourceRelName}-left`,
+	);
+	const sourceRightHandle = getHandlePosition(
+		sourceNode,
+		`rel-${sourceRelName}-right`,
+	);
+
+	// Get target handles - either relationship-specific or fallback to node center
+	let targetLeftHandle: { x: number; y: number; position: Position } | null =
+		null;
+	let targetRightHandle: { x: number; y: number; position: Position } | null =
+		null;
+
+	if (targetRelName) {
+		targetLeftHandle = getHandlePosition(
+			targetNode,
+			`rel-${targetRelName}-left`,
+		);
+		targetRightHandle = getHandlePosition(
+			targetNode,
+			`rel-${targetRelName}-right`,
+		);
+	}
+
+	// If no target handles found, use node top (for edges to generic/node without matching relationship)
+	if (!targetLeftHandle || !targetRightHandle) {
+		const targetWidth = targetNode.measured?.width ?? 280;
+		// Use top of the node header area (approximately 40px from top)
+		const targetTopY = targetNode.internals.positionAbsolute.y + 20;
+
+		targetLeftHandle = {
+			x: targetNode.internals.positionAbsolute.x,
+			y: targetTopY,
+			position: Position.Left,
+		};
+		targetRightHandle = {
+			x: targetNode.internals.positionAbsolute.x + targetWidth,
+			y: targetTopY,
+			position: Position.Right,
+		};
+	}
+
+	// If no source handles, use node center edges
+	if (!sourceLeftHandle || !sourceRightHandle) {
+		const sourceWidth = sourceNode.measured?.width ?? 280;
+		const sourceHeight = sourceNode.measured?.height ?? 200;
+		const sourceCenterY =
+			sourceNode.internals.positionAbsolute.y + sourceHeight / 2;
+
+		// Determine which side based on relative position
+		const sourceX = sourceNode.internals.positionAbsolute.x;
+		const targetX = targetNode.internals.positionAbsolute.x;
+		const useRightSide = targetX > sourceX;
+
+		return {
+			sx: useRightSide ? sourceX + sourceWidth : sourceX,
+			sy: sourceCenterY,
+			tx: useRightSide ? targetLeftHandle.x : targetRightHandle.x,
+			ty: useRightSide ? targetLeftHandle.y : targetRightHandle.y,
+			sourcePos: useRightSide ? Position.Right : Position.Left,
+			targetPos: useRightSide ? Position.Left : Position.Right,
+		};
+	}
+
+	// Calculate distances for all combinations to find the shortest path
+	const combinations = [
+		{
+			source: sourceLeftHandle,
+			target: targetRightHandle,
+			sourcePos: Position.Left,
+			targetPos: Position.Right,
+		},
+		{
+			source: sourceLeftHandle,
+			target: targetLeftHandle,
+			sourcePos: Position.Left,
+			targetPos: Position.Left,
+		},
+		{
+			source: sourceRightHandle,
+			target: targetLeftHandle,
+			sourcePos: Position.Right,
+			targetPos: Position.Left,
+		},
+		{
+			source: sourceRightHandle,
+			target: targetRightHandle,
+			sourcePos: Position.Right,
+			targetPos: Position.Right,
+		},
+	];
+
+	let bestCombo = combinations[0];
+	let shortestDistance = Number.POSITIVE_INFINITY;
+
+	for (const combo of combinations) {
+		const dx = combo.target.x - combo.source.x;
+		const dy = combo.target.y - combo.source.y;
+		const distance = Math.sqrt(dx * dx + dy * dy);
+
+		if (distance < shortestDistance) {
+			shortestDistance = distance;
+			bestCombo = combo;
+		}
+	}
+
+	return {
+		sx: bestCombo.source.x,
+		sy: bestCombo.source.y,
+		tx: bestCombo.target.x,
+		ty: bestCombo.target.y,
+		sourcePos: bestCombo.sourcePos,
+		targetPos: bestCombo.targetPos,
+	};
+}
+
+export function FloatingEdge({
+	id,
+	source,
+	target,
+	style,
+	animated,
+	data,
+}: EdgeProps) {
+	const sourceNode = useInternalNode(source);
+	const targetNode = useInternalNode(target);
+
+	if (!sourceNode || !targetNode) {
+		return null;
+	}
+
+	// Self-loop edges are not rendered - show a marker on the node instead
+	if (source === target) {
+		return null;
+	}
+
+	// Get relationship names and edge style from edge data
+	const edgeData = data as {
+		sourceRelName?: string;
+		targetRelName?: string | null;
+		edgeStyle?: EdgeStyle;
+	};
+	const sourceRelName = edgeData?.sourceRelName ?? "";
+	const targetRelName = edgeData?.targetRelName ?? null;
+	const edgeStyle = edgeData?.edgeStyle ?? "bezier";
+
+	const { sx, sy, tx, ty, sourcePos, targetPos } = getClosestHandles(
+		sourceNode,
+		targetNode,
+		sourceRelName,
+		targetRelName,
+	);
+
+	const pathParams = {
+		sourceX: sx,
+		sourceY: sy,
+		sourcePosition: sourcePos,
+		targetX: tx,
+		targetY: ty,
+		targetPosition: targetPos,
+	};
+
+	const [edgePath] =
+		edgeStyle === "smoothstep"
+			? getSmoothStepPath(pathParams)
+			: getBezierPath(pathParams);
+
+	return (
+		<BaseEdge
+			id={id}
+			path={edgePath}
+			style={style}
+			className={
+				animated ? "react-flow__edge-path animated" : "react-flow__edge-path"
+			}
+		/>
+	);
+}

package/src/components/LegendPanel.tsx

@@ -0,0 +1,191 @@
+import { Icon } from "@iconify-icon/react";
+import { Panel } from "@xyflow/react";
+import { useState } from "react";
+
+export function LegendPanel() {
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<>
+			{/* Help button */}
+			<Panel position="top-right" className="mr-2 mt-2">
+				<button
+					type="button"
+					onClick={() => setIsOpen(!isOpen)}
+					className="flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md hover:bg-gray-50 text-gray-600 hover:text-gray-800 transition-colors"
+					title="Show legend"
+				>
+					<Icon icon="mdi:help-circle-outline" className="text-xl" />
+				</button>
+			</Panel>
+
+			{/* Legend popup */}
+			{isOpen && (
+				<Panel position="top-right" className="mr-2 mt-12">
+					<div className="bg-white rounded-lg shadow-lg border border-gray-200 p-4 min-w-[280px] max-w-[320px]">
+						<div className="flex items-center justify-between mb-3">
+							<h3 className="font-semibold text-sm text-gray-700">Legend</h3>
+							<button
+								type="button"
+								onClick={() => setIsOpen(false)}
+								className="text-gray-400 hover:text-gray-600"
+							>
+								<Icon icon="mdi:close" className="text-lg" />
+							</button>
+						</div>
+
+						{/* Schema Types */}
+						<div className="mb-4">
+							<h4 className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-2">
+								Schema Types
+							</h4>
+							<div className="space-y-2">
+								<div className="flex items-center gap-2">
+									<div className="w-4 h-4 rounded bg-gradient-to-r from-indigo-500 to-indigo-600" />
+									<span className="text-xs text-gray-600">Node</span>
+								</div>
+								<div className="flex items-center gap-2">
+									<div className="w-4 h-4 rounded bg-gradient-to-r from-pink-500 to-pink-600" />
+									<span className="text-xs text-gray-600">Profile</span>
+								</div>
+								<div className="flex items-center gap-2">
+									<div className="w-4 h-4 rounded bg-gradient-to-r from-amber-500 to-amber-600" />
+									<span className="text-xs text-gray-600">Template</span>
+								</div>
+								<div className="flex items-center gap-2">
+									<div className="w-4 h-4 rounded bg-gradient-to-r from-emerald-500 to-emerald-600" />
+									<span className="text-xs text-gray-600">Generic</span>
+								</div>
+							</div>
+						</div>
+
+						{/* Edge Colors */}
+						<div className="mb-4">
+							<h4 className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-2">
+								Edge Colors
+							</h4>
+							<div className="space-y-2">
+								<div className="flex items-center gap-2">
+									<div className="w-8 h-0.5 bg-indigo-500" />
+									<span className="text-xs text-gray-600">
+										Node relationship
+									</span>
+								</div>
+								<div className="flex items-center gap-2">
+									<div className="w-8 h-0.5 bg-pink-500" />
+									<span className="text-xs text-gray-600">
+										Profile relationship
+									</span>
+								</div>
+								<div className="flex items-center gap-2">
+									<div className="w-8 h-0.5 bg-amber-500" />
+									<span className="text-xs text-gray-600">
+										Template relationship
+									</span>
+								</div>
+								<div className="flex items-center gap-2">
+									<div className="w-8 h-0.5 bg-gray-400" />
+									<span className="text-xs text-gray-600">
+										Inherited relationship
+									</span>
+								</div>
+							</div>
+						</div>
+
+						{/* Line Styles */}
+						<div className="mb-4">
+							<h4 className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-2">
+								Line Styles
+							</h4>
+							<div className="space-y-2">
+								<div className="flex items-center gap-2">
+									<div className="w-8 h-0.5 bg-indigo-500" />
+									<span className="text-xs text-gray-600">
+										Solid - One cardinality
+									</span>
+								</div>
+								<div className="flex items-center gap-2">
+									<div
+										className="w-8 h-0.5 relative overflow-hidden"
+										style={{ background: "#6366f1" }}
+									>
+										<div
+											className="absolute inset-0"
+											style={{
+												backgroundImage:
+													"repeating-linear-gradient(90deg, transparent, transparent 2px, #6366f1 2px, #6366f1 6px)",
+												animation: "dash-move 0.5s linear infinite",
+											}}
+										/>
+									</div>
+									<span className="text-xs text-gray-600">
+										Animated - Many cardinality
+									</span>
+								</div>
+								<div className="flex items-center gap-2">
+									<div
+										className="w-8 h-0.5"
+										style={{
+											backgroundImage:
+												"repeating-linear-gradient(90deg, #10b981, #10b981 3px, transparent 3px, transparent 6px)",
+										}}
+									/>
+									<span className="text-xs text-gray-600">
+										Dashed green - Via generic
+									</span>
+								</div>
+							</div>
+						</div>
+
+						{/* Special Markers */}
+						<div className="mb-4">
+							<h4 className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-2">
+								Special Markers
+							</h4>
+							<div className="space-y-2">
+								<div className="flex items-center gap-2">
+									<span className="text-orange-500 flex items-center gap-0.5">
+										<Icon icon="mdi:reload" className="text-sm" />
+									</span>
+									<span className="text-xs text-gray-600">
+										Self-referencing relationship
+									</span>
+								</div>
+							</div>
+						</div>
+
+						{/* Tips */}
+						<div className="border-t border-gray-100 pt-3">
+							<h4 className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-2">
+								Tips
+							</h4>
+							<ul className="text-xs text-gray-600 space-y-1">
+								<li className="flex items-start gap-1">
+									<Icon
+										icon="mdi:circle-small"
+										className="text-gray-400 shrink-0 mt-0.5"
+									/>
+									<span>Hover over a node to highlight connections</span>
+								</li>
+								<li className="flex items-start gap-1">
+									<Icon
+										icon="mdi:circle-small"
+										className="text-gray-400 shrink-0 mt-0.5"
+									/>
+									<span>Right-click a node for more options</span>
+								</li>
+								<li className="flex items-start gap-1">
+									<Icon
+										icon="mdi:circle-small"
+										className="text-gray-400 shrink-0 mt-0.5"
+									/>
+									<span>Drag to select multiple nodes</span>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</Panel>
+			)}
+		</>
+	);
+}