infrahub-schema-visualizer 0.0.1

package/src/components/NodeContextMenu.tsx

@@ -0,0 +1,114 @@
+import { Icon } from "@iconify-icon/react";
+import { useCallback, useEffect, useRef } from "react";
+
+export interface NodeContextMenuProps {
+	nodeId: string;
+	x: number;
+	y: number;
+	onClose: () => void;
+	onSelectConnected: (nodeId: string) => void;
+	onSelectNode: (nodeId: string) => void;
+	onShowPeers: (nodeId: string) => void;
+	onHideNode: (nodeId: string) => void;
+}
+
+export function NodeContextMenu({
+	nodeId,
+	x,
+	y,
+	onClose,
+	onSelectConnected,
+	onSelectNode,
+	onShowPeers,
+	onHideNode,
+}: NodeContextMenuProps) {
+	const menuRef = useRef<HTMLDivElement>(null);
+
+	// Close menu when clicking outside
+	useEffect(() => {
+		const handleClickOutside = (event: MouseEvent) => {
+			if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+				onClose();
+			}
+		};
+
+		const handleEscape = (event: KeyboardEvent) => {
+			if (event.key === "Escape") {
+				onClose();
+			}
+		};
+
+		document.addEventListener("mousedown", handleClickOutside);
+		document.addEventListener("keydown", handleEscape);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+			document.removeEventListener("keydown", handleEscape);
+		};
+	}, [onClose]);
+
+	const handleSelectConnected = useCallback(() => {
+		onSelectConnected(nodeId);
+		onClose();
+	}, [nodeId, onSelectConnected, onClose]);
+
+	const handleSelectNode = useCallback(() => {
+		onSelectNode(nodeId);
+		onClose();
+	}, [nodeId, onSelectNode, onClose]);
+
+	const handleShowPeers = useCallback(() => {
+		onShowPeers(nodeId);
+		onClose();
+	}, [nodeId, onShowPeers, onClose]);
+
+	const handleHideNode = useCallback(() => {
+		onHideNode(nodeId);
+		onClose();
+	}, [nodeId, onHideNode, onClose]);
+
+	return (
+		<div
+			ref={menuRef}
+			className="fixed z-50 min-w-[200px] rounded-lg bg-white py-1 shadow-lg border border-gray-200"
+			style={{ left: x, top: y }}
+		>
+			<button
+				type="button"
+				onClick={handleSelectNode}
+				className="flex w-full items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-100"
+			>
+				<Icon icon="mdi:select" className="text-lg text-gray-500" />
+				Select this node
+			</button>
+			<button
+				type="button"
+				onClick={handleSelectConnected}
+				className="flex w-full items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-100"
+			>
+				<Icon icon="mdi:select-group" className="text-lg text-gray-500" />
+				Select connected nodes
+			</button>
+			<div className="my-1 border-t border-gray-100" />
+			<button
+				type="button"
+				onClick={handleShowPeers}
+				className="flex w-full items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-100"
+			>
+				<Icon icon="mdi:eye-outline" className="text-lg text-gray-500" />
+				Show first-level peers
+			</button>
+			<button
+				type="button"
+				onClick={handleHideNode}
+				className="flex w-full items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-100"
+			>
+				<Icon icon="mdi:eye-off-outline" className="text-lg text-gray-500" />
+				Hide this node
+			</button>
+			<div className="my-1 border-t border-gray-100" />
+			<div className="px-3 py-1.5 text-xs text-gray-400">
+				Drag selected nodes to organize
+			</div>
+		</div>
+	);
+}

package/src/components/NodeDetailsPanel.tsx

@@ -0,0 +1,200 @@
+import { Icon } from "@iconify-icon/react";
+import type { NodeSchema } from "../types/schema";
+import { cn } from "../utils/cn";
+
+export interface NodeDetailsPanelProps {
+	schema: NodeSchema | null;
+	onClose: () => void;
+}
+
+function PropertyRow({
+	label,
+	value,
+}: {
+	label: string;
+	value?: string | null;
+}) {
+	if (!value) return null;
+	return (
+		<div className="flex justify-between gap-2">
+			<span className="text-gray-500">{label}</span>
+			<span className="text-right font-medium text-gray-700">{value}</span>
+		</div>
+	);
+}
+
+function Badge({
+	children,
+	variant = "gray",
+}: {
+	children: React.ReactNode;
+	variant?: "gray" | "blue" | "yellow" | "red";
+}) {
+	const variantClasses = {
+		gray: "bg-gray-100 text-gray-600",
+		blue: "bg-blue-100 text-blue-700",
+		yellow: "bg-yellow-100 text-yellow-700",
+		red: "bg-red-100 text-red-700",
+	};
+
+	return (
+		<span
+			className={cn("px-1.5 py-0.5 rounded text-xs", variantClasses[variant])}
+		>
+			{children}
+		</span>
+	);
+}
+
+export function NodeDetailsPanel({ schema, onClose }: NodeDetailsPanelProps) {
+	if (!schema) return null;
+
+	return (
+		<div className="flex h-full w-96 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">
+				<div className="flex items-center gap-2">
+					{schema.icon && (
+						<Icon icon={schema.icon} className="text-indigo-600 text-xl" />
+					)}
+					<div>
+						<h3 className="font-semibold text-gray-700">
+							{schema.label ?? schema.name}
+						</h3>
+						<p className="text-gray-500 text-xs">{schema.kind}</p>
+					</div>
+				</div>
+				<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>
+
+			<div className="flex-1 overflow-y-auto">
+				{/* Properties */}
+				<div className="border-gray-100 border-b p-4">
+					<h4 className="mb-2 font-semibold text-gray-600 text-xs uppercase tracking-wide">
+						Properties
+					</h4>
+					<div className="space-y-2 text-sm">
+						<PropertyRow label="Namespace" value={schema.namespace} />
+						<PropertyRow label="Name" value={schema.name} />
+						<PropertyRow label="Kind" value={schema.kind} />
+						{schema.description && (
+							<PropertyRow label="Description" value={schema.description} />
+						)}
+						{schema.inherit_from && schema.inherit_from.length > 0 && (
+							<div className="flex justify-between">
+								<span className="text-gray-500">Inherit from</span>
+								<div className="flex flex-wrap justify-end gap-1">
+									{schema.inherit_from.map((k) => (
+										<Badge key={k} variant="blue">
+											{k}
+										</Badge>
+									))}
+								</div>
+							</div>
+						)}
+					</div>
+				</div>
+
+				{/* Attributes */}
+				<div className="border-gray-100 border-b p-4">
+					<h4 className="mb-2 font-semibold text-gray-600 text-xs uppercase tracking-wide">
+						Attributes ({schema.attributes?.length ?? 0})
+					</h4>
+					{schema.attributes && schema.attributes.length > 0 ? (
+						<div className="space-y-2">
+							{schema.attributes.map((attr) => (
+								<div
+									key={attr.name}
+									className={cn(
+										"rounded border p-2 text-sm",
+										attr.inherited
+											? "border-gray-100 bg-gray-50"
+											: "border-gray-200",
+									)}
+								>
+									<div className="flex items-center justify-between">
+										<span className="font-medium text-gray-700">
+											{attr.label ?? attr.name}
+											{attr.optional && (
+												<span className="ml-1 text-gray-400">?</span>
+											)}
+										</span>
+										<Badge variant="gray">{attr.kind}</Badge>
+									</div>
+									{attr.description && (
+										<p className="mt-1 text-gray-500 text-xs">
+											{attr.description}
+										</p>
+									)}
+									<div className="mt-1 flex flex-wrap gap-1">
+										{attr.inherited && (
+											<Badge variant="yellow">inherited</Badge>
+										)}
+										{attr.unique && <Badge variant="red">unique</Badge>}
+										{attr.read_only && <Badge variant="blue">read-only</Badge>}
+									</div>
+								</div>
+							))}
+						</div>
+					) : (
+						<p className="text-gray-400 text-sm">No attributes</p>
+					)}
+				</div>
+
+				{/* Relationships */}
+				<div className="p-4">
+					<h4 className="mb-2 font-semibold text-gray-600 text-xs uppercase tracking-wide">
+						Relationships ({schema.relationships?.length ?? 0})
+					</h4>
+					{schema.relationships && schema.relationships.length > 0 ? (
+						<div className="space-y-2">
+							{schema.relationships.map((rel) => (
+								<div
+									key={rel.name}
+									className={cn(
+										"rounded border p-2 text-sm",
+										rel.inherited
+											? "border-gray-100 bg-gray-50"
+											: "border-gray-200",
+									)}
+								>
+									<div className="flex items-center justify-between">
+										<span className="font-medium text-gray-700">
+											{rel.label ?? rel.name}
+										</span>
+										<div className="flex items-center gap-1">
+											<Badge
+												variant={rel.cardinality === "many" ? "blue" : "gray"}
+											>
+												{rel.cardinality}
+											</Badge>
+											<span className="text-gray-500 text-xs">
+												→ {rel.peer}
+											</span>
+										</div>
+									</div>
+									{rel.description && (
+										<p className="mt-1 text-gray-500 text-xs">
+											{rel.description}
+										</p>
+									)}
+									<div className="mt-1 flex flex-wrap gap-1">
+										{rel.inherited && <Badge variant="yellow">inherited</Badge>}
+										{rel.optional && <Badge variant="gray">optional</Badge>}
+									</div>
+								</div>
+							))}
+						</div>
+					) : (
+						<p className="text-gray-400 text-sm">No relationships</p>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}

package/src/components/SchemaNode.tsx

@@ -0,0 +1,260 @@
+import { Icon } from "@iconify-icon/react";
+import { Handle, type NodeProps, Position } from "@xyflow/react";
+import { memo } from "react";
+import { cn } from "../utils/cn";
+import type { SchemaNodeData } from "../utils/schema-to-flow";
+
+// Get header colors based on schema type
+const getHeaderColors = (
+	schemaType: "node" | "generic" | "profile" | "template",
+) => {
+	switch (schemaType) {
+		case "profile":
+			return "from-pink-500 to-pink-600";
+		case "template":
+			return "from-amber-500 to-amber-600";
+		case "generic":
+			return "from-emerald-500 to-emerald-600";
+		default:
+			return "from-indigo-500 to-indigo-600";
+	}
+};
+
+// Get border color based on schema type
+const getBorderColor = (
+	schemaType: "node" | "generic" | "profile" | "template",
+	selected: boolean,
+) => {
+	if (selected) {
+		switch (schemaType) {
+			case "profile":
+				return "border-pink-500";
+			case "template":
+				return "border-amber-500";
+			case "generic":
+				return "border-emerald-500";
+			default:
+				return "border-indigo-500";
+		}
+	}
+	return "border-gray-200";
+};
+
+// Get schema type label
+const getSchemaTypeLabel = (
+	schemaType: "node" | "generic" | "profile" | "template",
+) => {
+	switch (schemaType) {
+		case "profile":
+			return "Profile";
+		case "template":
+			return "Template";
+		case "generic":
+			return "Generic";
+		default:
+			return null;
+	}
+};
+
+export const SchemaNode = memo(function SchemaNode({
+	data,
+	selected,
+}: NodeProps) {
+	const nodeData = data as SchemaNodeData;
+	const hasInheritance =
+		nodeData.inheritFrom && nodeData.inheritFrom.length > 0;
+	const schemaType = nodeData.schemaType ?? "node";
+	const typeLabel = getSchemaTypeLabel(schemaType);
+
+	return (
+		<div
+			className={cn(
+				"bg-white rounded-lg shadow-lg border-2 min-w-[280px] max-w-[320px]",
+				"transition-all duration-200",
+				getBorderColor(schemaType, selected ?? false),
+				selected && "shadow-xl",
+				"hover:shadow-xl",
+			)}
+		>
+			{/* Header */}
+			<div
+				className={cn(
+					"bg-gradient-to-r text-white px-4 py-3 rounded-t-md",
+					getHeaderColors(schemaType),
+				)}
+			>
+				<div className="flex items-center gap-2">
+					{nodeData.icon && (
+						<Icon icon={nodeData.icon} className="text-2xl opacity-90" />
+					)}
+					<div className="flex-1 min-w-0">
+						<div className="flex items-center gap-2">
+							<h3 className="font-semibold text-sm truncate">
+								{nodeData.label}
+							</h3>
+							{typeLabel && (
+								<span className="px-1.5 py-0.5 text-[10px] bg-white/20 rounded">
+									{typeLabel}
+								</span>
+							)}
+						</div>
+						<p className="text-xs opacity-70 truncate">{nodeData.kind}</p>
+					</div>
+				</div>
+				{hasInheritance && (
+					<div className="mt-2 flex flex-wrap gap-1">
+						{nodeData.inheritFrom?.map((generic) => (
+							<span
+								key={generic}
+								className="inline-flex items-center px-2 py-0.5 rounded text-xs bg-indigo-400/30 text-indigo-100"
+							>
+								↑ {generic}
+							</span>
+						))}
+					</div>
+				)}
+			</div>
+
+			{/* Attributes Section */}
+			{nodeData.attributes.length > 0 && (
+				<div className="border-b border-gray-100">
+					<div className="px-3 py-2 bg-gray-50 border-b border-gray-100">
+						<h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+							Attributes ({nodeData.attributes.length})
+						</h4>
+					</div>
+					<div className="max-h-[150px] overflow-y-auto">
+						{nodeData.attributes.map((attr) => (
+							<div
+								key={attr.name}
+								className={cn(
+									"px-3 py-1.5 flex items-center justify-between text-xs border-b border-gray-50 last:border-0",
+									attr.inherited ? "bg-gray-50/50" : "",
+								)}
+							>
+								<div className="flex items-center gap-2 min-w-0 flex-1">
+									<span
+										className={cn(
+											"font-medium truncate",
+											attr.inherited ? "text-gray-400" : "text-gray-700",
+										)}
+									>
+										{attr.name}
+										{attr.optional && (
+											<span className="text-gray-400 ml-0.5">?</span>
+										)}
+									</span>
+									{attr.inherited && (
+										<span className="text-[10px] text-gray-400">
+											(inherited)
+										</span>
+									)}
+								</div>
+								<span className="text-gray-400 text-[10px] uppercase ml-2 shrink-0">
+									{attr.kind}
+								</span>
+							</div>
+						))}
+					</div>
+				</div>
+			)}
+
+			{/* Relationships Section */}
+			{nodeData.relationships.length > 0 && (
+				<div>
+					<div className="px-3 py-2 bg-gray-50 border-b border-gray-100">
+						<h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+							Relationships ({nodeData.relationships.length})
+						</h4>
+					</div>
+					<div>
+						{nodeData.relationships.map((rel) => (
+							<div
+								key={rel.name}
+								className={cn(
+									"px-3 py-1.5 flex items-center justify-between text-xs border-b border-gray-50 last:border-0 relative group/rel",
+									rel.inherited ? "bg-gray-50/50" : "",
+								)}
+							>
+								{/* Left handle - invisible but functional */}
+								<Handle
+									type="source"
+									position={Position.Left}
+									id={`rel-${rel.name}-left`}
+									style={{
+										left: -2,
+										width: 4,
+										height: 4,
+										background: "transparent",
+										border: "none",
+									}}
+								/>
+								<div className="flex items-center gap-2 min-w-0 flex-1">
+									<span
+										className={cn(
+											"font-medium truncate",
+											rel.inherited ? "text-gray-400" : "text-gray-700",
+										)}
+									>
+										{rel.name}
+									</span>
+									{rel.inherited && (
+										<span className="text-[10px] text-gray-400">
+											(inherited)
+										</span>
+									)}
+								</div>
+								<div className="flex items-center gap-1 ml-2 shrink-0">
+									<span
+										className={cn(
+											"px-1.5 py-0.5 rounded text-[10px]",
+											rel.cardinality === "many"
+												? "bg-purple-100 text-purple-700"
+												: "bg-blue-100 text-blue-700",
+										)}
+									>
+										{rel.cardinality}
+									</span>
+									{rel.peer === nodeData.kind ? (
+										<span
+											className="text-[10px] text-orange-500 flex items-center gap-0.5"
+											title="Self-referencing relationship"
+										>
+											<Icon icon="mdi:reload" className="text-sm" />
+											self
+										</span>
+									) : (
+										<span className="text-gray-400 text-[10px] truncate max-w-[80px]">
+											→ {rel.peer}
+										</span>
+									)}
+								</div>
+								{/* Right handle - invisible but functional */}
+								<Handle
+									type="source"
+									position={Position.Right}
+									id={`rel-${rel.name}-right`}
+									style={{
+										right: -2,
+										width: 4,
+										height: 4,
+										background: "transparent",
+										border: "none",
+									}}
+								/>
+							</div>
+						))}
+					</div>
+				</div>
+			)}
+
+			{/* Empty state */}
+			{nodeData.attributes.length === 0 &&
+				nodeData.relationships.length === 0 && (
+					<div className="px-4 py-6 text-center text-gray-400 text-sm">
+						No attributes or relationships
+					</div>
+				)}
+		</div>
+	);
+});