From e44f9b30b335b0f4f48f12e5c4a5a902ccbc9b29 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Sat, 21 Feb 2026 18:05:04 +0100
Subject: [PATCH] fix: account for null numeric values from supabase in metric
 cards to uncrash detail view

---
 components/ExperimentDetail.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/ExperimentDetail.tsx b/components/ExperimentDetail.tsx
index 22f2597..53cd3d9 100644
--- a/components/ExperimentDetail.tsx
+++ b/components/ExperimentDetail.tsx
@@ -194,7 +194,7 @@ const ExperimentDetail: React.FC<ExperimentDetailProps> = ({ experimentId, onClo
           ) : experiment ? (
             <div className="space-y-6">
               {/* Performance Cards */}
-              {(experiment.experiment_units !== undefined) && (
+              {(experiment.experiment_units != null) && (
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                   {experiment.type === 'pricing' && (
                     <>
@@ -223,10 +223,10 @@ const ExperimentDetail: React.FC<ExperimentDetailProps> = ({ experimentId, onClo
 
                   <PerformanceCard
                     label="Primary Target Lift"
-                    value={experiment.actual_lift_percent !== undefined
+                    value={experiment.actual_lift_percent != null
                       ? `${experiment.actual_lift_percent >= 0 ? '+' : ''}${experiment.actual_lift_percent}%`
                       : '—'}
-                    color={experiment.actual_lift_percent !== undefined && experiment.actual_lift_percent >= 0 ? 'emerald' : 'red'}
+                    color={experiment.actual_lift_percent != null && experiment.actual_lift_percent >= 0 ? 'emerald' : 'red'}
                   />
                   <PerformanceCard
                     label="Significance"
@@ -244,7 +244,7 @@ const ExperimentDetail: React.FC<ExperimentDetailProps> = ({ experimentId, onClo
                   onClick={handleCalculateResults}
                   className="w-full py-3 bg-indigo-600/20 border border-indigo-500/30 hover:bg-indigo-600/30 text-indigo-400 rounded-xl font-medium transition-colors"
                 >
-                  {experiment.experiment_units === undefined ? '📊 Calculate Experiment Results' : '🔄 Refresh Results Data'}
+                  {experiment.experiment_units == null ? '📊 Calculate Experiment Results' : '🔄 Refresh Results Data'}
                 </button>
               )}
 
@@ -551,7 +551,7 @@ const MetricDeltaCard: React.FC<{
   format?: 'number' | 'currency' | 'percent';
   invertColors?: boolean;
 }> = ({ title, baseline, experimentVal, format = 'number', invertColors = false }) => {
-  if (baseline === undefined || experimentVal === undefined) return null;
+  if (baseline == null || experimentVal == null) return null;
   const delta = baseline > 0 ? ((experimentVal - baseline) / baseline) * 100 : 0;
 
   const isPositive = invertColors ? delta <= 0 : delta >= 0;