✨ Upgrade Odontogram to a realistic Curved Parabolic Dental Arch

toothmap_frontend/src/App.jsx

@@ -19,6 +19,18 @@ const QUADRANT_COLOURS = ['#3b82f6', '#22c55e', '#f59e0b', '#ef4444'];
 const UPPER_TEETH = [18, 17, 16, 15, 14, 13, 12, 11, 21, 22, 23, 24, 25, 26, 27, 28];
 const LOWER_TEETH = [48, 47, 46, 45, 44, 43, 42, 41, 31, 32, 33, 34, 35, 36, 37, 38];
 
+// Calculates a quadratic offset to form a realistic dental arch (horseshoe layout)
+function getArchStyle(index, isUpper) {
+  const max = 56.25; // 7.5 squared
+  const val = max - Math.pow(index - 7.5, 2);
+  const offset = val * 0.45; // Scale the depth of the curve (approx 25px max)
+  const rotation = (index - 7.5) * (isUpper ? -1.5 : 1.5); // Slight tilt to face the center
+  
+  return {
+    transform: `translateY(${isUpper ? offset : -offset}px) rotate(${rotation}deg)`
+  };
+}
+
 function computeIoU(b1, b2) {
   const ix = Math.max(b1[0], b2[0]), iy = Math.max(b1[1], b2[1]);
   const iw = Math.min(b1[2], b2[2]) - ix, ih = Math.min(b1[3], b2[3]) - iy;
@@ -280,18 +292,19 @@ export default function App() {
 
               {/* Dental FDI Chart (Odontogram) moved to Main Section */}
               {(uniquePipelineResults && mode.includes('pipeline')) && (
-                <div className="w-full max-w-4xl bg-zinc-900/60 rounded-2xl p-6 border border-zinc-800/80 shadow-2xl mt-4">
-                  <p className="text-sm font-bold text-slate-300 uppercase tracking-widest mb-6 text-center">Comprehensive Dental Chart</p>
-                  <div className="flex flex-col gap-3">
-                    {/* Upper Row */}
-                    <div className="flex w-full justify-between gap-1.5">
+                <div className="w-full max-w-4xl bg-zinc-900/60 rounded-2xl p-8 border border-zinc-800/80 shadow-2xl mt-4">
+                  <p className="text-sm font-bold text-slate-300 uppercase tracking-widest mb-10 text-center">Comprehensive Dental Arch</p>
+                  <div className="flex flex-col gap-6">
+                    {/* Upper Row (Maxillary) */}
+                    <div className="flex w-full justify-between gap-1.5 pb-6 relative">
                       {UPPER_TEETH.map((t, idx) => {
                         const isLeftQuad = idx < 8;
                         return (
                         <div key={t} 
-                             className={`flex-1 aspect-[3/4] rounded-md flex items-center justify-center text-sm font-bold transition-all transform hover:scale-105 duration-200 cursor-default ${
+                             style={getArchStyle(idx, true)}
+                             className={`flex-1 aspect-[3/4.5] rounded-t-sm rounded-b-2xl flex items-center justify-center text-sm font-bold transition-all transform hover:scale-110 duration-200 cursor-default ${
                                uniquePipelineResults.some(r => r.fdi === t) 
-                               ? 'bg-green-500/20 text-green-400 border border-green-500/50 shadow-[0_0_12px_rgba(34,197,94,0.2)]' 
+                               ? 'bg-gradient-to-b from-green-500/10 to-green-500/30 text-green-400 border border-green-500/50 shadow-[0_4px_12px_rgba(34,197,94,0.25)]' 
                                : 'bg-zinc-800/80 text-zinc-500 border border-zinc-700/50 opacity-60'
                              } ${isLeftQuad && idx === 7 ? 'mr-4' : ''}`}>
                           {t}
@@ -300,21 +313,22 @@ export default function App() {
                     </div>
                     
                     {/* Middle Divider */}
-                    <div className="flex items-center w-full my-1 opacity-50">
-                      <div className="flex-1 h-px bg-zinc-700" />
-                      <div className="px-4 text-[10px] text-zinc-500 font-mono tracking-widest">MAXILLARY / MANDIBULAR</div>
-                      <div className="flex-1 h-px bg-zinc-700" />
+                    <div className="flex items-center w-full my-4 opacity-70 z-10">
+                      <div className="flex-1 h-px bg-zinc-700/50" />
+                      <div className="px-6 text-[10px] text-zinc-400 font-mono tracking-widest">MAXILLARY / MANDIBULAR</div>
+                      <div className="flex-1 h-px bg-zinc-700/50" />
                     </div>
 
-                    {/* Lower Row */}
-                    <div className="flex w-full justify-between gap-1.5">
+                    {/* Lower Row (Mandibular) */}
+                    <div className="flex w-full justify-between gap-1.5 pt-6 relative">
                       {LOWER_TEETH.map((t, idx) => {
                         const isLeftQuad = idx < 8;
                         return (
                         <div key={t} 
-                             className={`flex-1 aspect-[3/4] rounded-md flex items-center justify-center text-sm font-bold transition-all transform hover:scale-105 duration-200 cursor-default ${
+                             style={getArchStyle(idx, false)}
+                             className={`flex-1 aspect-[3/4.5] rounded-b-sm rounded-t-2xl flex items-center justify-center text-sm font-bold transition-all transform hover:scale-110 duration-200 cursor-default ${
                                uniquePipelineResults.some(r => r.fdi === t) 
-                               ? 'bg-green-500/20 text-green-400 border border-green-500/50 shadow-[0_0_12px_rgba(34,197,94,0.2)]' 
+                               ? 'bg-gradient-to-t from-green-500/10 to-green-500/30 text-green-400 border border-green-500/50 shadow-[0_-4px_12px_rgba(34,197,94,0.25)]' 
                                : 'bg-zinc-800/80 text-zinc-500 border border-zinc-700/50 opacity-60'
                              } ${isLeftQuad && idx === 7 ? 'mr-4' : ''}`}>
                           {t}