explainai-ui

React visualization components for ExplainAI explanations.


Installation

``bash
npm install explainai-ui explainai-core
`

Peer Dependencies:
- react@^18.0.0
- react-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

$3

Display feature importance values as horizontal bars.

`tsx
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 (
explanation={explanation}
maxFeatures={10}
showValues={true}
/>
);
}
`

Props:
- explanation (required): Explanation object from explainai-core
- maxFeatures (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)

$3

Specialized visualization for LIME explanations.

`tsx
import { LimeChart } from 'explainai-ui';

function LimeVisualization({ explanation }) {
return (
explanation={explanation}
featureNames={['age', 'income', 'credit_score']}
showPrediction={true}
/>
);
}
`

Props:
- explanation (required): LIME explanation from explainai-core
- featureNames (optional): Custom feature labels
- showPrediction (optional): Display prediction value (default: true)
- colorScheme (optional): 'blue' | 'green' | 'purple' (default: 'blue')

$3

Advanced visualization for SHAP values with waterfall display.

`tsx
import { ShapleyChart } from 'explainai-ui';

function ShapVisualization({ explanation }) {
return (
explanation={explanation}
showBaseValue={true}
orientation="horizontal"
/>
);
}
`

Props:
- explanation (required): SHAP explanation from explainai-core
- showBaseValue (optional): Display base value (default: true)
- orientation (optional): 'horizontal' | 'vertical' (default: 'horizontal')
- sortByImportance (optional): Sort features by importance (default: true)

Complete Example

`tsx
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 (


export default ModelExplainer;
`

Styling

$3

Components come with default styles:

`tsx
import 'explainai-ui/dist/styles.css';
`

$3

Override default styles with CSS variables:

`css
: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:

`tsx
explanation={explanation}
style={{
backgroundColor: '#f9fafb',
borderRadius: '8px',
padding: '16px'
}}
/>
`

TypeScript Support

Full TypeScript definitions included:

`tsx
import type {
FeatureImportanceChartProps,
LimeChartProps,
ShapleyChartProps,
ChartTheme
} from 'explainai-ui';
`

Responsive Design

All components are responsive by default:

`tsx
explanation={explanation}
width="100%" // Fills container
height={400}
/>
`

For mobile-specific layouts:

`tsx
const isMobile = window.innerWidth < 768;

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

$3

Components are optimized with React.memo:

`tsx
import { memo } from 'react';

const MemoizedChart = memo(FeatureImportanceChart);
`

$3

Load components on demand:

`tsx
import { lazy, Suspense } from 'react';

const ShapleyChart = lazy(() => import('explainai-ui').then(m => ({
default: m.ShapleyChart
})));

function App() {
return (
Loading chart...