From 9ac0261a17567770b06b3435a070b40cca2d798f Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Wed, 17 Dec 2025 23:07:00 -0800
Subject: [PATCH] feat: improve 3d viewer legibility with rack visualization
 and larger labels

---
 frontend/src/pages/Facility3DViewerPage.tsx | 81 +++++++++++++++++++--
 1 file changed, 73 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/Facility3DViewerPage.tsx b/frontend/src/pages/Facility3DViewerPage.tsx
index dc18526..bd4ed34 100644
--- a/frontend/src/pages/Facility3DViewerPage.tsx
+++ b/frontend/src/pages/Facility3DViewerPage.tsx
@@ -232,15 +232,15 @@ function FacilityScene({ data, onSelectPlant, targetView, setControls, visMode }
                         {showLabel ? room.name : ''}
                     </Text>
 
-                    {/* Env Data Label Overlay */}
+                    {/* Env Data Label Overlay - INCREASED SIZE significantly */}
                     {(visMode === 'TEMP' || visMode === 'HUMIDITY') && (
                         <Text
-                            position={[room.width / 2, 3, room.height / 2]}
-                            rotation={[-Math.PI / 4, 0, 0]} // Tilted up
-                            fontSize={2}
+                            position={[room.width / 2, 5, room.height / 2]}
+                            rotation={[-Math.PI / 4, 0, 0]}
+                            fontSize={6} // Increased from 2 to 6 for readability
                             color="white"
                             outlineColor="#000"
-                            outlineWidth={0.1}
+                            outlineWidth={0.2}
                             anchorX="center"
                             anchorY="bottom"
                         >
@@ -272,19 +272,84 @@ function FacilityScene({ data, onSelectPlant, targetView, setControls, visMode }
                             const spacing = 0.5;
                             const x = section.posX + (pos.column * spacing);
                             const z = section.posY + (pos.row * spacing);
-                            const y = 0.5 + (pos.tier * 0.5);
+                            const y = 0.5 + (pos.tier * 0.8); // Increased vertical spacing for tiers
                             return { ...pos, x, y, z };
                         });
 
+                        // Calculate visual bounds for labels
+                        const distinctRows = [...new Set(positions.map(p => p.row))].sort((a, b) => a - b);
+                        const distinctCols = [...new Set(positions.map(p => p.column))].sort((a, b) => a - b);
+                        const distinctTiers = [...new Set(positions.map(p => p.tier))].sort((a, b) => a - b);
+
+                        const spacing = 0.5;
+
                         return (
                             <group key={section.id}>
+                                {/* Section Label */}
                                 <Text
-                                    position={[section.posX + (section.width / 2), 3, section.posY + (section.height / 2)]}
-                                    fontSize={0.8}
+                                    position={[section.posX + (section.width / 2), 4, section.posY + (section.height / 2)]}
+                                    fontSize={1.2}
                                     color="#9ca3af"
+                                    anchorX="center"
+                                    anchorY="bottom"
                                 >
                                     {visMode === 'STANDARD' ? section.code : ''}
                                 </Text>
+
+                                {/* VISUAL CUES: Shelves per Tier */}
+                                {distinctTiers.map(tier => (
+                                    <mesh
+                                        key={`shelf-${tier}`}
+                                        position={[
+                                            section.posX + (section.width / 2),
+                                            0.5 + (tier * 0.8) - 0.1, // Just below the plant base
+                                            section.posY + (section.height / 2)
+                                        ]}
+                                        rotation={[-Math.PI / 2, 0, 0]}
+                                    >
+                                        <planeGeometry args={[section.width, section.height]} />
+                                        <meshStandardMaterial color="#374151" transparent opacity={0.5} side={THREE.DoubleSide} />
+                                    </mesh>
+                                ))}
+
+                                {/* ROW LABELS (Along Z-axis) */}
+                                {visMode === 'STANDARD' && distinctRows.map(row => (
+                                    <Text
+                                        key={`lbl-row-${row}`}
+                                        position={[
+                                            section.posX - 0.4,
+                                            1,
+                                            section.posY + (row * spacing)
+                                        ]}
+                                        rotation={[-Math.PI / 2, 0, 0]}
+                                        fontSize={0.25}
+                                        color="#6b7280"
+                                        anchorX="right"
+                                        anchorY="middle"
+                                    >
+                                        R{row}
+                                    </Text>
+                                ))}
+
+                                {/* COLUMN LABELS (Along X-axis) */}
+                                {visMode === 'STANDARD' && distinctCols.map(col => (
+                                    <Text
+                                        key={`lbl-col-${col}`}
+                                        position={[
+                                            section.posX + (col * spacing),
+                                            0.2, // On floor
+                                            section.posY + section.height + 0.3
+                                        ]}
+                                        rotation={[-Math.PI / 2, 0, 0]}
+                                        fontSize={0.25}
+                                        color="#6b7280"
+                                        anchorX="center"
+                                        anchorY="top"
+                                    >
+                                        C{col}
+                                    </Text>
+                                ))}
+
                                 <PlantInstances positions={positions} onPlantClick={onSelectPlant} visMode={visMode} />
                             </group>
                         );