infrahub-schema-visualizer 0.0.1

package/src/components/index.ts

@@ -0,0 +1,12 @@
+export { BottomToolbar, type BottomToolbarProps } from "./BottomToolbar";
+export { FilterPanel, type FilterPanelProps } from "./FilterPanel";
+export { LegendPanel } from "./LegendPanel";
+export {
+	NodeDetailsPanel,
+	type NodeDetailsPanelProps,
+} from "./NodeDetailsPanel";
+export { SchemaNode } from "./SchemaNode";
+export {
+	SchemaVisualizer,
+	type SchemaVisualizerProps,
+} from "./SchemaVisualizer";

package/src/types/index.ts

@@ -0,0 +1 @@
+export * from "./schema";

package/src/types/schema.ts

@@ -0,0 +1,73 @@
+/**
+ * Schema types for the schema visualizer component.
+ * These types are designed to be framework-agnostic so they can be used
+ * by external tools that integrate with Infrahub.
+ */
+
+export interface AttributeSchema {
+	id?: string | null;
+	name: string;
+	kind: string;
+	label?: string | null;
+	description?: string | null;
+	optional?: boolean;
+	unique?: boolean;
+	read_only?: boolean;
+	inherited?: boolean;
+}
+
+export interface RelationshipSchema {
+	id?: string | null;
+	name: string;
+	peer: string;
+	kind: string;
+	label?: string | null;
+	description?: string | null;
+	identifier?: string | null;
+	cardinality: "one" | "many";
+	optional?: boolean;
+	inherited?: boolean;
+	min_count?: number;
+	max_count?: number;
+}
+
+export interface BaseSchema {
+	id?: string | null;
+	name: string;
+	namespace: string;
+	kind?: string | null;
+	label?: string | null;
+	description?: string | null;
+	icon?: string | null;
+	attributes?: AttributeSchema[];
+	relationships?: RelationshipSchema[];
+}
+
+export interface NodeSchema extends BaseSchema {
+	inherit_from?: string[];
+	hierarchy?: string | null;
+	parent?: string | null;
+	children?: string | null;
+}
+
+export interface GenericSchema extends BaseSchema {
+	used_by?: string[];
+	hierarchical?: boolean;
+}
+
+export interface ProfileSchema extends BaseSchema {
+	profile_priority?: number;
+}
+
+export interface TemplateSchema extends BaseSchema {
+	inherit_from?: string[];
+}
+
+export type SchemaType = "node" | "generic" | "profile" | "template";
+
+export interface SchemaVisualizerData {
+	nodes: NodeSchema[];
+	generics: GenericSchema[];
+	profiles?: ProfileSchema[];
+	templates?: TemplateSchema[];
+}

package/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}

package/src/utils/index.ts

@@ -0,0 +1,20 @@
+export { cn } from "./cn";
+export { getLayoutedElements, type LayoutOptions } from "./layout";
+export {
+	clearPersistedState,
+	hasPersistedState,
+	loadPersistedState,
+	type NodePosition,
+	type PersistedState,
+	savePersistedState,
+} from "./persistence";
+export {
+	applyNamespaceLayout,
+	getSchemaKind,
+	groupByNamespace,
+	type SchemaFlowData,
+	type SchemaFlowNode,
+	type SchemaNodeData,
+	schemaToFlow,
+	schemaToFlowFiltered,
+} from "./schema-to-flow";

package/src/utils/layout.ts

@@ -0,0 +1,60 @@
+import Dagre from "@dagrejs/dagre";
+import type { Edge, Node } from "@xyflow/react";
+
+export interface LayoutOptions {
+	direction?: "TB" | "BT" | "LR" | "RL";
+	nodeWidth?: number;
+	nodeHeight?: number;
+	rankSep?: number;
+	nodeSep?: number;
+}
+
+export function getLayoutedElements(
+	nodes: Node[],
+	edges: Edge[],
+	options: LayoutOptions = {},
+): { nodes: Node[]; edges: Edge[] } {
+	const {
+		direction = "LR",
+		nodeWidth = 300,
+		nodeHeight = 200,
+		rankSep = 100,
+		nodeSep = 50,
+	} = options;
+
+	const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+
+	g.setGraph({
+		rankdir: direction,
+		ranksep: rankSep,
+		nodesep: nodeSep,
+	});
+
+	for (const node of nodes) {
+		const width = node.measured?.width ?? nodeWidth;
+		const height = node.measured?.height ?? nodeHeight;
+		g.setNode(node.id, { width, height });
+	}
+
+	for (const edge of edges) {
+		g.setEdge(edge.source, edge.target);
+	}
+
+	Dagre.layout(g);
+
+	const layoutedNodes = nodes.map((node) => {
+		const nodeWithPosition = g.node(node.id);
+		const width = node.measured?.width ?? nodeWidth;
+		const height = node.measured?.height ?? nodeHeight;
+
+		return {
+			...node,
+			position: {
+				x: nodeWithPosition.x - width / 2,
+				y: nodeWithPosition.y - height / 2,
+			},
+		};
+	});
+
+	return { nodes: layoutedNodes, edges };
+}

package/src/utils/persistence.ts

@@ -0,0 +1,69 @@
+import type { EdgeStyle } from "../components/BottomToolbar";
+
+const STORAGE_KEY = "schema-visualizer-state";
+
+export interface NodePosition {
+	id: string;
+	x: number;
+	y: number;
+}
+
+export interface PersistedState {
+	hiddenNodes: string[];
+	edgeStyle: EdgeStyle;
+	nodePositions: NodePosition[];
+	version: number;
+}
+
+const CURRENT_VERSION = 1;
+
+export function loadPersistedState(): PersistedState | null {
+	try {
+		const stored = localStorage.getItem(STORAGE_KEY);
+		if (!stored) return null;
+
+		const parsed = JSON.parse(stored) as PersistedState;
+
+		// Reset on version mismatch - no migrations needed
+		if (parsed.version !== CURRENT_VERSION) {
+			localStorage.removeItem(STORAGE_KEY);
+			return null;
+		}
+
+		return parsed;
+	} catch {
+		// On any error, clear storage and return null
+		localStorage.removeItem(STORAGE_KEY);
+		return null;
+	}
+}
+
+export function savePersistedState(
+	state: Omit<PersistedState, "version">,
+): void {
+	try {
+		const toStore: PersistedState = {
+			...state,
+			version: CURRENT_VERSION,
+		};
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(toStore));
+	} catch {
+		// Silently fail if localStorage is not available
+	}
+}
+
+export function clearPersistedState(): void {
+	try {
+		localStorage.removeItem(STORAGE_KEY);
+	} catch {
+		// Silently fail if localStorage is not available
+	}
+}
+
+export function hasPersistedState(): boolean {
+	try {
+		return localStorage.getItem(STORAGE_KEY) !== null;
+	} catch {
+		return false;
+	}
+}