diff --git a/src/components/AirHeatIndexLineChart.tsx b/src/components/AirHeatIndexLineChart.tsx index 7851322..0524944 100644 --- a/src/components/AirHeatIndexLineChart.tsx +++ b/src/components/AirHeatIndexLineChart.tsx @@ -243,8 +243,9 @@ const AirHeatIndexLineChart = ({ data }: Props) => { .style('display', 'block'); const svgWidth = (svg.node() as SVGSVGElement).getBoundingClientRect().width; - const tooltipWidth = (tooltipDiv.node() as HTMLElement).getBoundingClientRect().width; - const isNearRightEdge = xPos + tooltipWidth + xOffset > svgWidth; + const tooltipWidth = 200; + const threshold = svgWidth * 0.55; + const isNearRightEdge = xPos > threshold; tooltipDiv .style('left', isNearRightEdge ? `${xPos - tooltipWidth - xOffset}px` : `${xPos + xOffset}px`) @@ -292,8 +293,8 @@ const AirHeatIndexLineChart = ({ data }: Props) => { return (
- -
+ +
); }; diff --git a/src/components/AirTemperatureLineChart.tsx b/src/components/AirTemperatureLineChart.tsx index 9f54313..7bc80b4 100644 --- a/src/components/AirTemperatureLineChart.tsx +++ b/src/components/AirTemperatureLineChart.tsx @@ -191,8 +191,9 @@ const AirTemperatureLineChart = ({ data }: Props) => { .style('display', 'block'); const svgWidth = (svg.node() as SVGSVGElement).getBoundingClientRect().width; - const tooltipWidth = (tooltipDiv.node() as HTMLElement).getBoundingClientRect().width; - const isNearRightEdge = xPos + tooltipWidth + xOffset > svgWidth; + const tooltipWidth = 200; + const threshold = svgWidth * 0.55; + const isNearRightEdge = xPos > threshold; const isAboveHistoricalMax = Math.round(closestDataPoint.tempmax) - Math.round(closestDataPoint.Normal_Temp_Max) > 0 const isAboveHistoricalMin = Math.round(closestDataPoint.tempmax) - Math.round(closestDataPoint.Normal_Temp_Max) > 0 @@ -201,7 +202,7 @@ const AirTemperatureLineChart = ({ data }: Props) => { const tempMinDifference = Math.abs(Math.round(closestDataPoint.tempmin) - Math.round(closestDataPoint.Normal_Temp_Min)) tooltipDiv - .style('left', isNearRightEdge ? `${xPos - tooltipWidth - xOffset}px` : `${xPos + xOffset}px`) + .style('left', isNearRightEdge ? `${xPos - tooltipWidth}px` : `${xPos + xOffset}px`) .style('top', `${yPos}px`) .style('display', 'block') .html(` @@ -267,7 +268,7 @@ const AirTemperatureLineChart = ({ data }: Props) => { return (
-
+
); }; diff --git a/src/components/NeighborhoodProfile.tsx b/src/components/NeighborhoodProfile.tsx index 9ae8005..060c6c1 100644 --- a/src/components/NeighborhoodProfile.tsx +++ b/src/components/NeighborhoodProfile.tsx @@ -18,6 +18,7 @@ import mapboxgl, { Popup } from "mapbox-gl"; import { nta_dataset_info, out_door_heat_index } from '../App' import NeighborhoodProfileBarChart from "../components/NeighborhoodProfileBarChart" +import { BORO_EXTENTS } from '../utils/format'; type Borough = "Brooklyn" | "Queens" | "Manhattan" | "Staten Island" | "Bronx" @@ -283,14 +284,29 @@ const NeighborhoodProfile = () => { } }, [selectedDataset.value]); + // useEffect(()=>{ + // // when boro changes zoom into borough extent + // const boro_extent = BORO_EXTENTS[selectedBoro] + + // if(boro_extent && map.value){ + // // @ts-ignore + // map.value.fitBounds(boro_extent.bounds, { + // padding: 50, + // duration: 200, + // }); + // } + // },[selectedBoro]) + return ( -
+
+
{ - isTablet &&
+ isTablet &&
{isNeighborhoodProfileExpanded.value ? : }
} -
+
+

{clickedNeighborhoodInfo.value?.boro}

diff --git a/src/components/WeatherStationProfile.tsx b/src/components/WeatherStationProfile.tsx index acbd936..a126bf9 100644 --- a/src/components/WeatherStationProfile.tsx +++ b/src/components/WeatherStationProfile.tsx @@ -198,13 +198,15 @@ const WeatherStationProfile = () => { return ( -
+
+
{ - isTablet &&
+ isTablet &&
{isWeatherStationProfileExpanded.value ? : }
} -
+
+
diff --git a/src/pages/Map.css b/src/pages/Map.css index 56e0564..736342f 100644 --- a/src/pages/Map.css +++ b/src/pages/Map.css @@ -9,6 +9,7 @@ background: transparent !important; border: none !important; box-shadow: none !important; + z-index: 4 !important; } /* Remove any default styles applied to popup content */ @@ -16,6 +17,7 @@ min-width: 0 !important; /* Remove max-width constraints */ background: transparent !important; /* Make the content background transparent */ margin: 0; + z-index: 3; } /* Hide the arrow of the popup */ diff --git a/src/pages/MapPage.tsx b/src/pages/MapPage.tsx index d476e78..56cfe31 100644 --- a/src/pages/MapPage.tsx +++ b/src/pages/MapPage.tsx @@ -9,7 +9,7 @@ import MapDateSelections from '../components/MapDateSelections.js'; import WeatherStationProfile from '../components/WeatherStationProfile.js'; import Legends from '../components/Legends.js'; import "./Map.css" -import { signal } from '@preact/signals-react' +import { effect, signal } from '@preact/signals-react' import { Dataset, datasets } from '../utils/datasets.js'; import { NtaProfileData, WeatherStationData } from '../types.js'; import { initializeView } from '../utils/datasets.js'; @@ -28,7 +28,7 @@ export const previousClickCor = signal<[number, number]>([0, 0]) export const clickedWeatherStationPopup = signal(null) export const clickedNeighborhoodPopup = signal(null) export const clickedNeighborhoodInfo = signal<{ - code:string + code: string boro: string, nta: string }>({ @@ -91,23 +91,42 @@ const MapPage = () => { }, []); + // Debounce map resize to avoid excessive updates when profiles change + effect(() => { + const debounced = setTimeout(() => { + if (map?.value) { + console.log('resize') + map.value.resize() + } + const _ = isNeighborhoodProfileExpanded.value && isWeatherStationProfileExpanded.value + }, 100) + + return () => clearTimeout(debounced) + }) return (
{/*
*/}