feat(phase-33): final polish V3 - navigation, performance, and documentation (T-238 to T-240)

frontend/src/components/heatmap/HeatmapCell.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState, useMemo, useCallback } from "react";
 import type { HeatmapTechnique } from "../../api/heatmap";
 import HeatmapTooltip from "./HeatmapTooltip";
 
@@ -8,7 +8,12 @@ interface HeatmapCellProps {
   onClick: (techniqueId: string) => void;
 }
 
-export default function HeatmapCell({ technique, size, onClick }: HeatmapCellProps) {
+/**
+ * Memoized heatmap cell — this component renders 3000+ times in the
+ * full ATT&CK matrix, so React.memo prevents unnecessary re-renders
+ * when only sibling cells change.
+ */
+const HeatmapCell = React.memo(function HeatmapCell({ technique, size, onClick }: HeatmapCellProps) {
   const [showTooltip, setShowTooltip] = useState(false);
 
   const sizeClasses = {
@@ -20,21 +25,28 @@ export default function HeatmapCell({ technique, size, onClick }: HeatmapCellPro
   const bgColor = technique.enabled ? technique.color : "transparent";
   const isDisabled = !technique.enabled;
 
-  // Determine text color based on background brightness
-  const getTextColor = (hex: string): string => {
+  // Memoize text color (derived from background hex)
+  const textColor = useMemo(() => {
+    const hex = bgColor;
     if (!hex || hex === "transparent" || hex === "") return "text-gray-600";
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
     const b = parseInt(hex.slice(5, 7), 16);
     const brightness = (r * 299 + g * 587 + b * 114) / 1000;
     return brightness > 128 ? "text-gray-900" : "text-white";
-  };
+  }, [bgColor]);
 
-  // Status indicators
-  const hasTests = technique.metadata.find((m) => m.name === "tests_count");
-  const testsCount = hasTests ? parseInt(hasTests.value, 10) : 0;
-  const reviewRequired = technique.comment?.toLowerCase().includes("review");
-  const isValidated = technique.score >= 100;
+  // Status indicators — memoized
+  const { testsCount, reviewRequired, isValidated } = useMemo(() => {
+    const hasTests = technique.metadata.find((m) => m.name === "tests_count");
+    return {
+      testsCount: hasTests ? parseInt(hasTests.value, 10) : 0,
+      reviewRequired: technique.comment?.toLowerCase().includes("review") ?? false,
+      isValidated: technique.score >= 100,
+    };
+  }, [technique.metadata, technique.comment, technique.score]);
+
+  const handleClick = useCallback(() => onClick(technique.techniqueID), [onClick, technique.techniqueID]);
 
   return (
     <div
@@ -43,7 +55,7 @@ export default function HeatmapCell({ technique, size, onClick }: HeatmapCellPro
       onMouseLeave={() => setShowTooltip(false)}
     >
       <button
-        onClick={() => onClick(technique.techniqueID)}
+        onClick={handleClick}
         disabled={isDisabled}
         className={`
           w-full rounded border transition-all duration-150
@@ -59,7 +71,7 @@ export default function HeatmapCell({ technique, size, onClick }: HeatmapCellPro
           backgroundColor: isDisabled ? undefined : bgColor,
         }}
       >
-        <span className={`truncate font-mono font-medium leading-tight ${getTextColor(bgColor)}`}>
+        <span className={`truncate font-mono font-medium leading-tight ${textColor}`}>
           {technique.techniqueID}
         </span>
         {size !== "compact" && !isDisabled && (
@@ -78,4 +90,6 @@ export default function HeatmapCell({ technique, size, onClick }: HeatmapCellPro
       )}
     </div>
   );
-}
+});
+
+export default HeatmapCell;