infrahub-schema-visualizer 0.0.1

package/index.ts

@@ -0,0 +1,38 @@
+// Components
+export {
+	BottomToolbar,
+	type BottomToolbarProps,
+	FilterPanel,
+	type FilterPanelProps,
+	NodeDetailsPanel,
+	type NodeDetailsPanelProps,
+	SchemaNode,
+	SchemaVisualizer,
+	type SchemaVisualizerProps,
+} from "./src/components";
+
+// Types
+export type {
+	AttributeSchema,
+	BaseSchema,
+	GenericSchema,
+	NodeSchema,
+	ProfileSchema,
+	RelationshipSchema,
+	SchemaType,
+	SchemaVisualizerData,
+	TemplateSchema,
+} from "./src/types";
+
+// Utilities
+export {
+	applyNamespaceLayout,
+	cn,
+	getSchemaKind,
+	groupByNamespace,
+	type SchemaFlowData,
+	type SchemaFlowNode,
+	type SchemaNodeData,
+	schemaToFlow,
+	schemaToFlowFiltered,
+} from "./src/utils";

package/package.json

@@ -0,0 +1,66 @@
+{
+	"name": "infrahub-schema-visualizer",
+	"version": "0.0.1",
+	"type": "module",
+	"main": "index.ts",
+	"types": "./index.ts",
+	"exports": {
+		".": {
+			"types": "./index.ts",
+			"import": "./index.ts"
+		},
+		"./webview": {
+			"import": "./dist/webview/schema-visualizer.js",
+			"require": "./dist/webview/schema-visualizer.js"
+		},
+		"./webview/styles": {
+			"import": "./dist/webview/schema-visualizer.css",
+			"require": "./dist/webview/schema-visualizer.css"
+		},
+		"./dist/webview/*": "./dist/webview/*"
+	},
+	"files": [
+		"dist",
+		"src",
+		"index.ts"
+	],
+	"scripts": {
+		"build": "vite build",
+		"build:webview": "vite build --config vite.config.webview.ts",
+		"prepublishOnly": "npm run build:webview",
+		"lint": "biome check ."
+	},
+	"peerDependencies": {
+		"react": ">=18.0.0",
+		"react-dom": ">=18.0.0"
+	},
+	"peerDependenciesMeta": {
+		"react": {
+			"optional": true
+		},
+		"react-dom": {
+			"optional": true
+		}
+	},
+	"dependencies": {
+		"@dagrejs/dagre": "^1.1.8",
+		"@iconify-icon/react": "^2.3.0",
+		"@xyflow/react": "^12.6.1",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.0",
+		"html-to-image": "^1.11.11",
+		"tailwind-merge": "^3.4.0"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^2.3.8",
+		"@tailwindcss/vite": "^4.1.17",
+		"@types/react": "^19.2.7",
+		"@types/react-dom": "^19.2.3",
+		"@vitejs/plugin-react": "^5.1.1",
+		"react": "^19.2.1",
+		"react-dom": "^19.2.1",
+		"tailwindcss": "^4.1.17",
+		"typescript": "^5.9.3",
+		"vite": "^7.2.4"
+	}
+}

package/src/components/BottomToolbar.tsx

@@ -0,0 +1,195 @@
+import { Icon } from "@iconify-icon/react";
+import { Panel, useReactFlow } from "@xyflow/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "../utils/cn";
+
+export type EdgeStyle = "bezier" | "smoothstep";
+export type LayoutDirection = "TB" | "LR";
+export type ExportFormat = "png" | "svg";
+
+export interface BottomToolbarProps {
+	onFilterClick: () => void;
+	isFilterOpen: boolean;
+	edgeStyle: EdgeStyle;
+	onEdgeStyleChange: (style: EdgeStyle) => void;
+	onLayout: (direction: LayoutDirection) => void;
+	onExport: (format: ExportFormat) => void;
+	onReset?: () => void;
+	showReset?: boolean;
+}
+
+export function BottomToolbar({
+	onFilterClick,
+	isFilterOpen,
+	edgeStyle,
+	onEdgeStyleChange,
+	onLayout,
+	onExport,
+	onReset,
+	showReset = false,
+}: BottomToolbarProps) {
+	const { zoomIn, zoomOut, fitView } = useReactFlow();
+	const [exportMenuOpen, setExportMenuOpen] = useState(false);
+	const exportMenuRef = useRef<HTMLDivElement>(null);
+
+	const handleExport = useCallback(
+		(format: ExportFormat) => {
+			onExport(format);
+			setExportMenuOpen(false);
+		},
+		[onExport],
+	);
+
+	// Close export menu when clicking outside
+	useEffect(() => {
+		const handleClickOutside = (event: MouseEvent) => {
+			if (
+				exportMenuRef.current &&
+				!exportMenuRef.current.contains(event.target as Node)
+			) {
+				setExportMenuOpen(false);
+			}
+		};
+
+		if (exportMenuOpen) {
+			document.addEventListener("mousedown", handleClickOutside);
+			return () => {
+				document.removeEventListener("mousedown", handleClickOutside);
+			};
+		}
+	}, [exportMenuOpen]);
+
+	return (
+		<Panel
+			position="bottom-center"
+			className="mb-4 flex items-center gap-2 rounded-lg bg-white px-3 py-2 shadow-lg"
+		>
+			<button
+				type="button"
+				onClick={() => zoomOut()}
+				className="flex h-8 w-8 items-center justify-center rounded hover:bg-gray-100 text-gray-600"
+				title="Zoom out"
+			>
+				<Icon icon="mdi:minus" className="text-lg" />
+			</button>
+			<button
+				type="button"
+				onClick={() => fitView({ padding: 0.2 })}
+				className="flex h-8 w-8 items-center justify-center rounded hover:bg-gray-100 text-gray-600"
+				title="Fit to screen"
+			>
+				<Icon icon="mdi:fit-to-screen" className="text-lg" />
+			</button>
+			<button
+				type="button"
+				onClick={() => zoomIn()}
+				className="flex h-8 w-8 items-center justify-center rounded hover:bg-gray-100 text-gray-600"
+				title="Zoom in"
+			>
+				<Icon icon="mdi:plus" className="text-lg" />
+			</button>
+			<div className="mx-2 h-6 w-px bg-gray-200" />
+			<button
+				type="button"
+				onClick={() =>
+					onEdgeStyleChange(edgeStyle === "bezier" ? "smoothstep" : "bezier")
+				}
+				className="flex h-8 items-center justify-center gap-1.5 rounded px-2 hover:bg-gray-100 text-gray-600"
+				title={`Switch to ${edgeStyle === "bezier" ? "step" : "smooth"} edges`}
+			>
+				<Icon
+					icon={
+						edgeStyle === "bezier" ? "mdi:vector-curve" : "mdi:vector-polyline"
+					}
+					className="text-lg"
+				/>
+				<span className="text-xs">
+					{edgeStyle === "bezier" ? "Smooth" : "Step"}
+				</span>
+			</button>
+			<div className="mx-2 h-6 w-px bg-gray-200" />
+			<button
+				type="button"
+				onClick={() => onLayout("LR")}
+				className="flex h-8 w-8 items-center justify-center rounded hover:bg-gray-100 text-gray-600"
+				title="Auto-layout horizontal"
+			>
+				<Icon icon="mdi:arrow-right" className="text-lg" />
+			</button>
+			<button
+				type="button"
+				onClick={() => onLayout("TB")}
+				className="flex h-8 w-8 items-center justify-center rounded hover:bg-gray-100 text-gray-600"
+				title="Auto-layout vertical"
+			>
+				<Icon icon="mdi:arrow-down" className="text-lg" />
+			</button>
+			<div className="mx-2 h-6 w-px bg-gray-200" />
+			<button
+				type="button"
+				onClick={onFilterClick}
+				className={cn(
+					"flex h-8 w-8 items-center justify-center rounded",
+					isFilterOpen
+						? "bg-indigo-500 text-white hover:bg-indigo-600"
+						: "hover:bg-gray-100 text-gray-600",
+				)}
+				title="Filter nodes"
+			>
+				<Icon icon="mdi:filter-variant" className="text-lg" />
+			</button>
+			{showReset && onReset && (
+				<button
+					type="button"
+					onClick={onReset}
+					className="flex h-8 w-8 items-center justify-center rounded hover:bg-gray-100 text-gray-600"
+					title="Reset to default view"
+				>
+					<Icon icon="mdi:refresh" className="text-lg" />
+				</button>
+			)}
+			<div className="mx-2 h-6 w-px bg-gray-200" />
+			<div className="relative" ref={exportMenuRef}>
+				<button
+					type="button"
+					onClick={() => setExportMenuOpen(!exportMenuOpen)}
+					className={cn(
+						"flex h-8 w-8 items-center justify-center rounded",
+						exportMenuOpen
+							? "bg-indigo-500 text-white hover:bg-indigo-600"
+							: "hover:bg-gray-100 text-gray-600",
+					)}
+					title="Export diagram"
+				>
+					<Icon icon="mdi:download" className="text-lg" />
+				</button>
+				{exportMenuOpen && (
+					<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 min-w-[120px] rounded-lg bg-white py-1 shadow-lg border border-gray-200">
+						<button
+							type="button"
+							onClick={() => handleExport("png")}
+							className="flex w-full items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-100"
+						>
+							<Icon
+								icon="mdi:image-outline"
+								className="text-lg text-gray-500"
+							/>
+							PNG
+						</button>
+						<button
+							type="button"
+							onClick={() => handleExport("svg")}
+							className="flex w-full items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-100"
+						>
+							<Icon
+								icon="mdi:file-code-outline"
+								className="text-lg text-gray-500"
+							/>
+							SVG
+						</button>
+					</div>
+				)}
+			</div>
+		</Panel>
+	);
+}

package/src/components/EdgeContextMenu.tsx

@@ -0,0 +1,134 @@
+import { Icon } from "@iconify-icon/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export interface EdgeInfo {
+	id: string;
+	source: string;
+	target: string;
+	sourceRelName: string;
+	targetRelName: string | null;
+	cardinality: "one" | "many";
+}
+
+export interface EdgeContextMenuProps {
+	edge: EdgeInfo;
+	x: number;
+	y: number;
+	onClose: () => void;
+	onHighlight: (edgeId: string) => void;
+}
+
+export function EdgeContextMenu({
+	edge,
+	x,
+	y,
+	onClose,
+	onHighlight,
+}: EdgeContextMenuProps) {
+	const menuRef = useRef<HTMLDivElement>(null);
+	const [copied, setCopied] = useState(false);
+
+	// 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 handleHighlight = useCallback(() => {
+		onHighlight(edge.id);
+		onClose();
+	}, [edge.id, onHighlight, onClose]);
+
+	const handleCopyInfo = useCallback(async () => {
+		const info = [
+			`Relationship: ${edge.sourceRelName}`,
+			`From: ${edge.source}`,
+			`To: ${edge.target}`,
+			`Cardinality: ${edge.cardinality}`,
+			edge.targetRelName ? `Reverse: ${edge.targetRelName}` : null,
+		]
+			.filter(Boolean)
+			.join("\n");
+
+		try {
+			// Try the modern clipboard API first
+			if (navigator.clipboard?.writeText) {
+				await navigator.clipboard.writeText(info);
+			} else {
+				// Fallback for environments without clipboard API
+				const textArea = document.createElement("textarea");
+				textArea.value = info;
+				textArea.style.position = "fixed";
+				textArea.style.left = "-9999px";
+				document.body.appendChild(textArea);
+				textArea.select();
+				document.execCommand("copy");
+				document.body.removeChild(textArea);
+			}
+			setCopied(true);
+			setTimeout(() => {
+				setCopied(false);
+				onClose();
+			}, 1000);
+		} catch (err) {
+			console.error("Failed to copy:", err);
+			// Still show feedback even if copy failed
+			onClose();
+		}
+	}, [edge, onClose]);
+
+	return (
+		<div
+			ref={menuRef}
+			className="fixed z-50 min-w-[220px] rounded-lg bg-white py-1 shadow-lg border border-gray-200"
+			style={{ left: x, top: y }}
+		>
+			{/* Edge info header */}
+			<div className="px-3 py-2 border-b border-gray-100">
+				<div className="text-xs font-medium text-gray-700 truncate">
+					{edge.sourceRelName}
+				</div>
+				<div className="text-[10px] text-gray-400 mt-0.5">
+					{edge.source} → {edge.target}
+				</div>
+			</div>
+
+			<button
+				type="button"
+				onClick={handleHighlight}
+				className="flex w-full items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-100"
+			>
+				<Icon icon="mdi:spotlight-beam" className="text-lg text-gray-500" />
+				Highlight relationship
+			</button>
+			<div className="my-1 border-t border-gray-100" />
+			<button
+				type="button"
+				onClick={handleCopyInfo}
+				className="flex w-full items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-100"
+			>
+				<Icon
+					icon={copied ? "mdi:check" : "mdi:content-copy"}
+					className={`text-lg ${copied ? "text-green-500" : "text-gray-500"}`}
+				/>
+				{copied ? "Copied!" : "Copy relationship info"}
+			</button>
+		</div>
+	);
+}