From dc2cfd13ad59870727b56c361914559f14608e51 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Sat, 27 Dec 2025 17:07:56 -0800
Subject: [PATCH] fix: 3D View blank canvas (coordinate mismatch) and truncated
 UI

---
 .../components/facility3d/Room3DViewer.tsx    | 43 +++++++++++++------
 1 file changed, 31 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/facility3d/Room3DViewer.tsx b/frontend/src/components/facility3d/Room3DViewer.tsx
index 01baf68..43806c3 100644
--- a/frontend/src/components/facility3d/Room3DViewer.tsx
+++ b/frontend/src/components/facility3d/Room3DViewer.tsx
@@ -20,24 +20,43 @@ export function Room3DViewer({ room, visMode = 'STANDARD', onPlantClick }: Room3
             return {
                 ...room,
                 // Ensure dimensions exist
-                width: room.width || 20,
-                height: room.height || 30,
-                x: 0,
-                y: 0,
-                sections: room.sections || room.racks || [], // Map racks/sections to standard field
+                width: room.width || 40, // Default to ~40ft
+                height: room.height || 60,
+                posX: room.x || 0, // Map x/y to posX/posY if needed, or default 0
+                posY: room.y || 0,
+                sections: room.sections || room.racks || [],
             };
         }
 
-        // Fallback: Create a mock layout based on capacity
+        // Fallback: Create a mock layout with some demo racks
+        const mockWidth = 50;
+        const mockHeight = 40;
+
+        // Generate 4 mock racks
+        const mockSections = Array.from({ length: 4 }).map((_, i) => ({
+            id: `mock-rack-${i}`,
+            name: `Rack 0${i + 1}`,
+            type: 'rack',
+            posX: 5 + (i * 10), // Spaced out X
+            posY: 10,           // Centered Y roughly
+            width: 4,
+            height: 20,
+            positions: Array.from({ length: 16 }).map((__, p) => ({
+                id: `p-${i}-${p}`,
+                name: `P${p + 1}`,
+                valid: true
+            }))
+        }));
+
         return {
             id: room.id,
             name: room.name,
             type: room.type,
-            width: 20,
-            height: 30,
-            x: 0,
-            y: 0,
-            sections: [], // Empty for now, or could generatively fill
+            width: mockWidth,
+            height: mockHeight,
+            posX: 0,
+            posY: 0,
+            sections: mockSections,
         };
     }, [room]);
 
@@ -71,7 +90,7 @@ export function Room3DViewer({ room, visMode = 'STANDARD', onPlantClick }: Room3
                 <OrbitControls makeDefault minPolarAngle={0} maxPolarAngle={Math.PI / 2.2} />
             </Canvas>
 
-            <div className="absolute top-4 right-4 bg-black/60 backdrop-blur-md px-3 py-1.5 rounded-full border border-white/10 text-xs font-medium text-white/80 pointer-events-none">
+            <div className="absolute bottom-4 right-4 bg-black/60 backdrop-blur-md px-3 py-1.5 rounded-full border border-white/10 text-xs font-medium text-white/80 pointer-events-none">
                 Interactive 3D View
             </div>
         </div>