From 0b2d4f38dc215f8ec7cd9c9c8fccf982db555124 Mon Sep 17 00:00:00 2001 From: Zhi Keng He Date: Thu, 13 Feb 2025 22:26:42 -0500 Subject: [PATCH 1/2] use flex on profiles and map --- src/components/NeighborhoodProfile.tsx | 22 +++++++-- src/components/WeatherStationProfile.tsx | 8 ++-- src/pages/Map.css | 2 + src/pages/MapPage.tsx | 39 ++++++++++++---- src/utils/format.ts | 59 +++++++++++++++++++++++- 5 files changed, 112 insertions(+), 18 deletions(-) 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 (
{/*
*/}