Update CompoundQualityVisualization.tsx

Author: ofriw

website/src/components/VisualElements/CompoundQualityVisualization.tsx

@@ -232,38 +232,26 @@ export default function CompoundQualityVisualization({
             Time / Iterations →
           </text>
 
-          {/* Starting point (left side where both curves begin) */}
-          <circle
-            cx={startX}
-            cy={centerY}
-            r="7"
-            className={homepageMode ? styles.homepageStartPoint : undefined}
-            fill={homepageMode ? undefined : 'var(--ifm-color-emphasis-700)'}
-            stroke="var(--ifm-background-color)"
-            strokeWidth="2"
+          {/* Negative curve fill area */}
+          <path
+            d={`${negativeCurvePath} L ${endX} ${centerY} L ${startX} ${centerY} Z`}
+            fill="url(#negativeFill)"
           />
-          <text
-            x={startX - 35}
-            y={centerY + 5}
-            className={`${styles.startLabel} ${homepageMode ? styles.homepageStartPoint : ''}`}
-            textAnchor="middle"
-            fontSize="11"
-            fontWeight="600"
-            fill={homepageMode ? undefined : 'var(--ifm-color-emphasis-700)'}
-          >
-            Start
-          </text>
 
           {/* Positive curve fill area */}
           <path
             d={`${positiveCurvePath} L ${endX} ${centerY} L ${startX} ${centerY} Z`}
             fill="url(#positiveFill)"
           />
 
-          {/* Negative curve fill area */}
+          {/* Negative curve path */}
           <path
-            d={`${negativeCurvePath} L ${endX} ${centerY} L ${startX} ${centerY} Z`}
-            fill="url(#negativeFill)"
+            d={negativeCurvePath}
+            className={styles.curvePathNegative}
+            fill="none"
+            stroke="url(#negativeGradient)"
+            strokeWidth="4"
+            strokeLinecap="round"
           />
 
           {/* Positive curve path */}
@@ -276,15 +264,27 @@ export default function CompoundQualityVisualization({
             strokeLinecap="round"
           />
 
-          {/* Negative curve path */}
-          <path
-            d={negativeCurvePath}
-            className={styles.curvePathNegative}
-            fill="none"
-            stroke="url(#negativeGradient)"
-            strokeWidth="4"
-            strokeLinecap="round"
+          {/* Starting point (left side where both curves begin) */}
+          <circle
+            cx={startX}
+            cy={centerY}
+            r="7"
+            className={homepageMode ? styles.homepageStartPoint : undefined}
+            fill={homepageMode ? undefined : 'var(--ifm-color-emphasis-700)'}
+            stroke="var(--ifm-background-color)"
+            strokeWidth="2"
           />
+          <text
+            x={startX - 35}
+            y={centerY + 5}
+            className={`${styles.startLabel} ${homepageMode ? styles.homepageStartPoint : ''}`}
+            textAnchor="middle"
+            fontSize="11"
+            fontWeight="600"
+            fill={homepageMode ? undefined : 'var(--ifm-color-emphasis-700)'}
+          >
+            Start
+          </text>
 
           {/* Positive feedback label (upper area) */}
           <text