Fix GA biometry display for abdomen and femur views

frontend/src/components/GAResultsCard.tsx

@@ -5,6 +5,13 @@ interface GAResultsCardProps {
   isLoading: boolean;
 }
 
+// Map view/biometry key to display label
+const BIOMETRY_LABELS: Record<string, string> = {
+  head_circumference: 'Head Circumference',
+  abdominal_circumference: 'Abdominal Circumference',
+  femur_length: 'Femur Length',
+};
+
 export function GAResultsCard({ results, isLoading }: GAResultsCardProps) {
   if (isLoading) {
     return (
@@ -29,13 +36,24 @@ export function GAResultsCard({ results, isLoading }: GAResultsCardProps) {
     return (
       <div className="bg-white border border-dark-border rounded-xl p-8 text-center shadow-card">
         <p className="text-text-muted text-sm">
-          Upload a fetal brain ultrasound and click "Estimate Age"
+          Upload a fetal ultrasound and click "Estimate Age"
         </p>
       </div>
     );
   }
 
-  const { gestational_age, head_circumference } = results;
+  const { gestational_age } = results;
+
+  // Get biometry data dynamically based on what the backend returned
+  const biometryData = results.head_circumference
+    || results.abdominal_circumference
+    || results.femur_length;
+
+  // Determine which biometry type we have
+  let biometryLabel = 'Biometry';
+  if (results.head_circumference) biometryLabel = BIOMETRY_LABELS.head_circumference;
+  else if (results.abdominal_circumference) biometryLabel = BIOMETRY_LABELS.abdominal_circumference;
+  else if (results.femur_length) biometryLabel = BIOMETRY_LABELS.femur_length;
 
   return (
     <div className="space-y-3 animate-fade-in">
@@ -52,32 +70,34 @@ export function GAResultsCard({ results, isLoading }: GAResultsCardProps) {
         </p>
       </div>
 
-      {/* Head Circumference Percentiles */}
-      <div className="bg-white border border-dark-border rounded-xl p-4 shadow-card">
-        <p className="text-[10px] uppercase tracking-wider text-text-muted mb-3">
-          Head Circumference Percentiles
-        </p>
-        <div className="grid grid-cols-3 gap-3">
-          <div className="bg-dark-input rounded-xl p-3 text-center">
-            <p className="text-[10px] text-text-muted mb-1">2.5th</p>
-            <p className="text-base font-semibold text-text-primary">
-              {head_circumference.p2_5} mm
-            </p>
-          </div>
-          <div className="bg-nvidia-green/10 rounded-xl p-3 text-center border-2 border-nvidia-green">
-            <p className="text-[10px] text-nvidia-green mb-1 font-medium">50th</p>
-            <p className="text-base font-bold text-nvidia-green">
-              {head_circumference.p50} mm
-            </p>
-          </div>
-          <div className="bg-dark-input rounded-xl p-3 text-center">
-            <p className="text-[10px] text-text-muted mb-1">97.5th</p>
-            <p className="text-base font-semibold text-text-primary">
-              {head_circumference.p97_5} mm
-            </p>
+      {/* Biometry Percentiles - Dynamic based on view */}
+      {biometryData && (
+        <div className="bg-white border border-dark-border rounded-xl p-4 shadow-card">
+          <p className="text-[10px] uppercase tracking-wider text-text-muted mb-3">
+            {biometryLabel} Percentiles
+          </p>
+          <div className="grid grid-cols-3 gap-3">
+            <div className="bg-dark-input rounded-xl p-3 text-center">
+              <p className="text-[10px] text-text-muted mb-1">2.5th</p>
+              <p className="text-base font-semibold text-text-primary">
+                {biometryData.p2_5} mm
+              </p>
+            </div>
+            <div className="bg-nvidia-green/10 rounded-xl p-3 text-center border-2 border-nvidia-green">
+              <p className="text-[10px] text-nvidia-green mb-1 font-medium">50th</p>
+              <p className="text-base font-bold text-nvidia-green">
+                {biometryData.p50} mm
+              </p>
+            </div>
+            <div className="bg-dark-input rounded-xl p-3 text-center">
+              <p className="text-[10px] text-text-muted mb-1">97.5th</p>
+              <p className="text-base font-semibold text-text-primary">
+                {biometryData.p97_5} mm
+              </p>
+            </div>
           </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }

frontend/src/lib/api.ts

@@ -33,7 +33,18 @@ export interface GestationalAgeResponse {
     days: number;
     total_days: number;
   };
-  head_circumference: {
+  // Biometry - only one will be present based on view
+  head_circumference?: {
+    p2_5: number;
+    p50: number;
+    p97_5: number;
+  };
+  abdominal_circumference?: {
+    p2_5: number;
+    p50: number;
+    p97_5: number;
+  };
+  femur_length?: {
     p2_5: number;
     p50: number;
     p97_5: number;
@@ -41,6 +52,7 @@ export interface GestationalAgeResponse {
   preprocessing: PreprocessingInfo;
 }
 
+
 export async function classifyImage(file: File, topK: number = 5): Promise<ClassificationResponse> {
   const formData = new FormData();
   formData.append('file', file);