From dd69bb6f8fa003e6ba1dc6e5028bb2c9fee8d60d Mon Sep 17 00:00:00 2001
From: Jared Knowles <jared@civilytics.com>
Date: Mon, 10 Aug 2026 12:21:00 -0400
Subject: [PATCH] =?UTF-8?q?Fix=20JS=20syntax=20error=20in=20ObservedRateDe?=
 =?UTF-8?q?nsity.jsx=20=E2=80=94=20const=20declarations=20were=20embedded?=
 =?UTF-8?q?=20inside=20JSX?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The obsWidth, lowerX, upperWidth, and medX variables were declared inline within the SVG <g> element's children, which is invalid JavaScript/JSX. This caused 'ReferenceError: obsWidth is not defined' at runtime when rendering Chart 5.

Fix: Moved all const declarations to the top of the map callback, before the return statement.
---
 src/charts/ObservedRateDensity.jsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/charts/ObservedRateDensity.jsx b/src/charts/ObservedRateDensity.jsx
index ba30b15..8bd41f8 100644
--- a/src/charts/ObservedRateDensity.jsx
+++ b/src/charts/ObservedRateDensity.jsx
@@ -75,6 +75,11 @@ export default function ObservedRateDensity({ quadData }) {
         {modelResults.map((r, i) => {
           const rowY = margin.top + i * (height / modelResults.length + 8)
           const barHeight = height / modelResults.length - 6
+          // Pre-compute coordinates outside JSX to avoid embedding statements in render output
+          const obsWidth = (r.observedRate / maxRate) * (width - margin.left - margin.right)
+          const lowerX = margin.left + (r.modeledLower / maxRate) * (width - margin.left - margin.right)
+          const upperWidth = ((r.modeledUpper - r.modeledLower) / maxRate) * (width - margin.left - margin.right)
+          const medX = margin.left + (r.modeledRateMedian / maxRate) * (width - margin.left - margin.right)
 
           return (
             <g key={r.modelId}>
@@ -82,16 +87,12 @@ export default function ObservedRateDensity({ quadData }) {
               <rect x={margin.left} y={rowY} width={width - margin.left - margin.right} height={barHeight} rx={3} fill="var(--cv-paper-2)" />
 
               {/* Observed rate bar (solid) */}
-              const obsWidth = (r.observedRate / maxRate) * (width - margin.left - margin.right)
               <rect x={margin.left} y={rowY + 4} width={obsWidth} height={barHeight - 8} fill="var(--cv-navy-600)" rx={2} opacity={0.9} />
 
               {/* Model interval (dashed outline showing 95% range) */}
-              const lowerX = margin.left + (r.modeledLower / maxRate) * (width - margin.left - margin.right)
-              const upperWidth = ((r.modeledUpper - r.modeledLower) / maxRate) * (width - margin.left - margin.right)
               <rect x={lowerX} y={rowY + 4} width={upperWidth} height={barHeight - 8} fill="none" stroke="var(--teal-600)" strokeWidth={1.5} rx={2} />
 
               {/* Model median marker */}
-              const medX = margin.left + (r.modeledRateMedian / maxRate) * (width - margin.left - margin.right)
               <line x1={medX} y1={rowY + 3} x2={medX} y2={rowY + barHeight - 3} stroke="var(--teal-600)" strokeWidth={2} />
 
               {/* Observed rate label */}