Package Exports
- explainai-ui
- explainai-ui/styles.css
Readme
explainai-ui
React visualization components for ExplainAI explanations.
Installation
npm install explainai-ui explainai-corePeer Dependencies:
react@^18.0.0react-dom@^18.0.0
Features
- 📊 Interactive Charts - Beautiful, responsive visualizations
- 🎨 Customizable Themes - Match your application's design
- ⚡ Lightweight - Minimal bundle size impact
- 📱 Responsive - Works on all screen sizes
- ♿ Accessible - WCAG compliant components
- 🔧 TypeScript - Full type safety
Components
FeatureImportanceChart
Display feature importance values as horizontal bars.
import { FeatureImportanceChart } from 'explainai-ui';
import { explain, createApiModel } from 'explainai-core';
function MyComponent() {
const [explanation, setExplanation] = useState(null);
useEffect(() => {
const model = createApiModel(apiConfig, metadata);
explain(model, input, { method: 'shap' })
.then(setExplanation);
}, []);
return (
<FeatureImportanceChart
explanation={explanation}
maxFeatures={10}
showValues={true}
/>
);
}Props:
explanation(required): Explanation object from explainai-coremaxFeatures(optional): Number of top features to display (default: 10)showValues(optional): Show numerical values (default: true)width(optional): Chart width (default: '100%')height(optional): Chart height (default: 400)
LimeChart
Specialized visualization for LIME explanations.
import { LimeChart } from 'explainai-ui';
function LimeVisualization({ explanation }) {
return (
<LimeChart
explanation={explanation}
featureNames={['age', 'income', 'credit_score']}
showPrediction={true}
/>
);
}Props:
explanation(required): LIME explanation from explainai-corefeatureNames(optional): Custom feature labelsshowPrediction(optional): Display prediction value (default: true)colorScheme(optional): 'blue' | 'green' | 'purple' (default: 'blue')
ShapleyChart
Advanced visualization for SHAP values with waterfall display.
import { ShapleyChart } from 'explainai-ui';
function ShapVisualization({ explanation }) {
return (
<ShapleyChart
explanation={explanation}
showBaseValue={true}
orientation="horizontal"
/>
);
}Props:
explanation(required): SHAP explanation from explainai-coreshowBaseValue(optional): Display base value (default: true)orientation(optional): 'horizontal' | 'vertical' (default: 'horizontal')sortByImportance(optional): Sort features by importance (default: true)
Complete Example
import React, { useState, useEffect } from 'react';
import { explain, createApiModel } from 'explainai-core';
import { FeatureImportanceChart, LimeChart, ShapleyChart } from 'explainai-ui';
function ModelExplainer() {
const [explanation, setExplanation] = useState(null);
const [method, setMethod] = useState('shap');
const [loading, setLoading] = useState(false);
const generateExplanation = async () => {
setLoading(true);
const model = createApiModel(
{ endpoint: 'http://localhost:3000/predict' },
{
inputShape: [10],
outputShape: [1],
modelType: 'regression',
provider: 'api'
}
);
const result = await explain(model, inputData, {
method,
config: { samples: 100 }
});
setExplanation(result);
setLoading(false);
};
return (
<div>
<button onClick={generateExplanation}>
Explain Prediction
</button>
{loading && <p>Generating explanation...</p>}
{explanation && (
<>
{method === 'shap' && (
<ShapleyChart explanation={explanation} />
)}
{method === 'lime' && (
<LimeChart explanation={explanation} />
)}
<FeatureImportanceChart
explanation={explanation}
maxFeatures={15}
/>
</>
)}
</div>
);
}
export default ModelExplainer;Styling
CSS Imports
Components come with default styles:
import 'explainai-ui/dist/styles.css';Custom Styling
Override default styles with CSS variables:
:root {
--explainai-primary-color: #3b82f6;
--explainai-positive-color: #10b981;
--explainai-negative-color: #ef4444;
--explainai-background: #ffffff;
--explainai-text-color: #1f2937;
--explainai-border-color: #e5e7eb;
}Or use inline styles:
<FeatureImportanceChart
explanation={explanation}
style={{
backgroundColor: '#f9fafb',
borderRadius: '8px',
padding: '16px'
}}
/>TypeScript Support
Full TypeScript definitions included:
import type {
FeatureImportanceChartProps,
LimeChartProps,
ShapleyChartProps,
ChartTheme
} from 'explainai-ui';Responsive Design
All components are responsive by default:
<FeatureImportanceChart
explanation={explanation}
width="100%" // Fills container
height={400}
/>For mobile-specific layouts:
const isMobile = window.innerWidth < 768;
<ShapleyChart
explanation={explanation}
orientation={isMobile ? 'vertical' : 'horizontal'}
/>Accessibility
All components follow WCAG 2.1 guidelines:
- Proper ARIA labels
- Keyboard navigation support
- Screen reader compatible
- High contrast mode support
Performance
Memoization
Components are optimized with React.memo:
import { memo } from 'react';
const MemoizedChart = memo(FeatureImportanceChart);Lazy Loading
Load components on demand:
import { lazy, Suspense } from 'react';
const ShapleyChart = lazy(() => import('explainai-ui').then(m => ({
default: m.ShapleyChart
})));
function App() {
return (
<Suspense fallback={<div>Loading chart...</div>}>
<ShapleyChart explanation={explanation} />
</Suspense>
);
}Framework Integration
Next.js
// app/components/ExplainChart.tsx
'use client';
import { FeatureImportanceChart } from 'explainai-ui';
import 'explainai-ui/dist/styles.css';
export default function ExplainChart({ explanation }) {
return <FeatureImportanceChart explanation={explanation} />;
}Vite
// vite.config.ts
export default {
optimizeDeps: {
include: ['explainai-ui', 'explainai-core']
}
}Related Packages
- explainai-core - Core algorithms (required)
- explainai-node - Node.js CLI tools
- explainai-playground - Interactive demo
Documentation
Requirements
- React ≥18.0.0
- React DOM ≥18.0.0
- Node.js ≥18.0.0
Browser Support
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Mobile browsers
License
MIT - see LICENSE
Contributing
Contributions welcome! See Contributing Guide
Author
Yash Gupta (@gyash1512)