explainai-ui

React visualization components for ExplainAI explanations.

Installation

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

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-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)

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-core
• featureNames (optional): Custom feature labels
• showPrediction (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-core
• showBaseValue (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

• Full Documentation
• Component Gallery
• Examples
• API Reference

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)

Repository

github.com/gyash1512/ExplainAI