File size: 2,050 Bytes
b96b3a8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
import React from 'react';
interface FeatureMapProps {
size: number;
data?: number[][];
highlightPosition?: { x: number; y: number } | null;
className?: string;
colorIntensity?: boolean;
}
const FeatureMap: React.FC<FeatureMapProps> = ({
size,
data,
highlightPosition = null,
className = '',
colorIntensity = false,
}) => {
// Generate default data if not provided
const mapData = data || Array(size)
.fill(0)
.map(() => Array(size).fill(0).map(() => Math.random() * 0.8));
return (
<div className={`grid gap-[1px] ${className}`} style={{ gridTemplateColumns: `repeat(${size}, 1fr)` }}>
{mapData.map((row, rowIndex) =>
row.map((value, colIndex) => {
const isHighlighted = highlightPosition?.x === colIndex && highlightPosition?.y === rowIndex;
// Determine cell color based on value
let bgColor = 'bg-gray-800';
let borderColor = 'border-gray-700';
if (colorIntensity) {
// For intensity values
const intensity = Math.floor(value * 255);
if (value > 0) {
bgColor = `bg-blue-900/60`;
const opacity = Math.max(20, Math.min(80, value * 100));
bgColor = `bg-blue-500/${Math.floor(opacity)}`;
} else if (value < 0) {
bgColor = `bg-red-900/60`;
const opacity = Math.max(20, Math.min(80, Math.abs(value) * 100));
bgColor = `bg-red-500/${Math.floor(opacity)}`;
}
}
return (
<div
key={`${rowIndex}-${colIndex}`}
className={`
aspect-square ${bgColor} border ${borderColor} flex items-center justify-center text-[0.5rem] text-gray-400
${isHighlighted ? 'ring-2 ring-cyan-500 ring-offset-1 ring-offset-transparent z-10' : ''}
`}
>
{value.toFixed(1)}
</div>
);
})
)}
</div>
);
};
export default FeatureMap; |