React components for graph-based principal view framework
npm install @principal-ai/principal-view-reactReact UI component library for the Visual Validation Framework.
This library provides building blocks for creating graph visualization applications. The actual "panel" application should be built separately using these components.
- 🎨 GraphRenderer - Interactive graph visualization with @xyflow/react
- Custom node shapes (circle, rectangle, hexagon, diamond)
- State-based node styling
- Animated and styled edges
- Auto-layout algorithms (hierarchical, circular)
- Zoom, pan, drag interactions
- Minimap and controls
- 🎠CustomNode / CustomEdge - Configurable xyflow renderers
``bash`
npm install @principal-ai/visual-validation-reactor
bun add @principal-ai/visual-validation-react
`json`
{
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
}
These are building block components. You compose them to build your panel application:
`typescript
import { GraphRenderer } from '@principal-ai/visual-validation-react';
import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
const canvas: ExtendedCanvas = {
// ... your canvas data
};
function MyPanel() {
return (
width="100%"
height="600px"
/>
);
}
`
Building a Complete Panel:
For a complete panel application with all features (playback controls, filters, etc.), you should create a separate project using a panel starter template and compose these components together.
Comprehensive guides with Mermaid diagrams:
- Configuration Guide - Define your graph structure, node/edge types, and validation rules
- Event System Guide - Stream events to update your graph in real-time
- Usage Guide - Build complete panels with React components
Or browse the full documentation index.
Interactive component examples:
`bash``
bun run storybook
Alpha - Core placeholder implemented. Full visualization features coming soon.
- ✅ Integrate xyflow for graph visualization
- ✅ Implement node renderers with shapes and states
- ✅ Implement edge renderers with styles and animations
- ✅ Add auto-layout algorithms
- ✅ Add Storybook stories
MIT