diff --git a/client/src/Components/IntensityMap.js b/client/src/Components/IntensityMap.js index 2991c43e..2e40aa7d 100644 --- a/client/src/Components/IntensityMap.js +++ b/client/src/Components/IntensityMap.js @@ -40,7 +40,7 @@ function IntensityMap({ .attr("stroke", "#f0f0f0") .attr("fill", (feature) => colorScale(data[feature.id] ?? 0)) .on("mouseover", (_, feature) => onMouseOver(feature)) - .on("mouseout", () => onMouseOver()); + .on("mouseout", () => onMouseOver(null)); } }, [data, map, width, height, minColor, maxColor, onMouseOver]); diff --git a/client/src/Users/UsersList.js b/client/src/Users/UsersList.js index 2bcea77c..9b315512 100644 --- a/client/src/Users/UsersList.js +++ b/client/src/Users/UsersList.js @@ -40,6 +40,7 @@ function UsersList() { const [usersByZipActive, setUsersByZipActive] = useState(); const [usersByZipMedianSteps, setUsersByZipMedianSteps] = useState(); const [selectedFeature, setSelectedFeature] = useState(); + const [resetTimeoutId, setResetTimeoutId] = useState(null); useEffect(() => { let cancelled = false; @@ -152,7 +153,18 @@ function UsersList() { } function onMouseOverZip(feature) { - setSelectedFeature(feature); + if (resetTimeoutId) { + clearTimeout(resetTimeoutId); + } + setSelectedFeature(feature); + + + const newTimeoutId = setTimeout(() => { + setSelectedFeature(null); + }, 100); + + setResetTimeoutId(newTimeoutId); + } let totalUsers; @@ -262,7 +274,7 @@ function UsersList() {

- {!selectedFeature && "San Franciso"} + {!selectedFeature && "San Francisco"} {selectedFeature && `${selectedFeature.properties.neighborhood} (${selectedFeature.id})`}