0 ? displayMax : undefined}
- fillMode={comparisonActive ? 'diverging' : 'sequential'}
- fitToKeys={scopedKeys}
- interactiveKeys={scopedKeys}
- selectedKey={selectedFeature?.key ?? null}
- onFeatureSelect={handleFeatureSelect}
- onFeatureActivate={handleFeatureActivate}
+
-
-
+ {/* zone breakdown below */}
{bundle.zoneBreakdown.length > 0 && !comparisonActive ? (
Praças por zona eleitoral
@@ -363,3 +310,102 @@ export const MunicipalityMapPanel = ({
)
}
+
+/**
+ * Selection/hover live here so a mouseover re-renders only the map and the
+ * readout — not the whole panel (controls, legend, zone list). The Leaflet
+ * paint path itself stays ref-based inside BahiaMap (O(2) restyle).
+ */
+const MunicipalityMapSelection = ({
+ displayValues,
+ rawValues,
+ displayMax,
+ scopedKeys,
+ metricLabel,
+ scaleMode,
+ comparisonActive,
+ municipalitiesByIbgeCode,
+ ariaLabel,
+}: {
+ displayValues: Record
+ rawValues: Record
+ displayMax: number
+ scopedKeys: string[]
+ metricLabel: string
+ scaleMode: MunicipalityMapScaleMode
+ comparisonActive: boolean
+ municipalitiesByIbgeCode: MunicipalityMapBundle['municipalitiesByIbgeCode']
+ ariaLabel: string
+}) => {
+ const router = useRouter()
+ const [selectedFeature, setSelectedFeature] = useState(null)
+ const selectedKeyRef = useRef(null)
+
+ const handleFeatureSelect = useCallback((info: BahiaMapFeatureInfo | null) => {
+ selectedKeyRef.current = info?.key ?? null
+ setSelectedFeature(info)
+ }, [])
+
+ const handleFeatureActivate = useCallback(
+ (key: string) => {
+ if (selectedKeyRef.current !== key) return
+
+ const navigation = resolveMunicipalityMapNavigation(key, municipalitiesByIbgeCode)
+ if (navigation.kind === 'navigate') {
+ router.push(`/campanha/municipios/${navigation.slug}`)
+ return
+ }
+
+ if (navigation.kind === 'zones') {
+ document.getElementById('municipality-zone-breakdown')?.scrollIntoView({
+ behavior: 'smooth',
+ block: 'nearest',
+ })
+ }
+ },
+ [municipalitiesByIbgeCode, router],
+ )
+
+ const selectedMetricValue =
+ selectedFeature && selectedFeature.key in displayValues
+ ? displayValues[selectedFeature.key]
+ : undefined
+
+ const selectedRawMetricValue =
+ selectedFeature && selectedFeature.key in rawValues ? rawValues[selectedFeature.key] : undefined
+
+ const selectedNavigation = useMemo(
+ () =>
+ selectedFeature
+ ? resolveMunicipalityMapNavigation(selectedFeature.key, municipalitiesByIbgeCode)
+ : null,
+ [municipalitiesByIbgeCode, selectedFeature],
+ )
+
+ return (
+ <>
+ 0 ? displayMax : undefined}
+ fillMode={comparisonActive ? 'diverging' : 'sequential'}
+ fitToKeys={scopedKeys}
+ interactiveKeys={scopedKeys}
+ selectedKey={selectedFeature?.key ?? null}
+ onFeatureSelect={handleFeatureSelect}
+ onFeatureActivate={handleFeatureActivate}
+ ariaLabel={ariaLabel}
+ />
+
+
+
+ )
+}