Hacky demo changes

frontend/src/components/map/MapPage.tsx

@@ -33,6 +33,7 @@ import { apiUrl, authHeaders, buildFilterString, logNonAbortError } from '../../
 import { useFilterCounts } from '../../hooks/useFilterCounts';
 import { ts } from '../../i18n/server';
 import { trackEvent } from '../../lib/analytics';
+import { canWheelScrollInsideTarget } from '../../lib/dom-scroll';
 import { INITIAL_VIEW_STATE } from '../../lib/consts';
 import { getSchoolBackendFeatureName } from '../../lib/school-filter';
 import { useLicense } from '../../hooks/useLicense';
@@ -54,6 +55,18 @@ const MapPageSelectionPane = lazy(() =>
 const UpgradeModal = lazy(() => import('../ui/UpgradeModal'));
 const Joyride = lazy(() => import('react-joyride'));
 
+declare global {
+  interface Window {
+    __demoRecording?: boolean;
+    __demoOpenBestHexagon?: () => string | null;
+    __demoMapSettled?: boolean;
+    __demoMapSettleVersion?: number;
+    __demoMapIdle?: boolean;
+    __demoMapIdleVersion?: number;
+    __demoSelectionReady?: boolean;
+  }
+}
+
 function MapFallback() {
   return (
     <div className="flex h-full w-full items-center justify-center bg-warm-100 dark:bg-navy-950">
@@ -218,6 +231,9 @@ export default function MapPage({
     travelTimeEntries: entries,
     shareCode,
   });
+  const demoMapHasData = mapData.usePostcodeView
+    ? mapData.postcodeData.length > 0
+    : mapData.data.length > 0;
 
   const handleAiFilterSubmit = useCallback(
     async (query: string) => {
@@ -416,6 +432,48 @@ export default function MapPage({
     setRightPaneTab(initialTab);
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
+  useEffect(() => {
+    if (!window.__demoRecording) return;
+    void import('./MapPageSelectionPane');
+    void import('./AreaPane');
+    void import('./PropertiesPane');
+  }, []);
+
+  useEffect(() => {
+    if (!window.__demoRecording) return;
+    window.__demoMapSettled = !mapData.loading && demoMapHasData;
+    if (window.__demoMapSettled) {
+      window.__demoMapSettleVersion = (window.__demoMapSettleVersion ?? 0) + 1;
+    }
+    return () => {
+      window.__demoMapSettled = false;
+    };
+  }, [demoMapHasData, mapData.loading]);
+
+  useEffect(() => {
+    if (!window.__demoRecording) return;
+    window.__demoSelectionReady = Boolean(selectedHexagon && areaStats && !loadingAreaStats);
+    return () => {
+      window.__demoSelectionReady = false;
+    };
+  }, [areaStats, loadingAreaStats, selectedHexagon]);
+
+  useEffect(() => {
+    if (!window.__demoRecording) return;
+    window.__demoOpenBestHexagon = () => {
+      const best = mapData.data.reduce<(typeof mapData.data)[number] | null>((winner, item) => {
+        if (!winner || item.count > winner.count) return item;
+        return winner;
+      }, null);
+      if (!best) return null;
+      handleHexagonClick(best.h3);
+      return best.h3;
+    };
+    return () => {
+      delete window.__demoOpenBestHexagon;
+    };
+  }, [handleHexagonClick, mapData.data]);
+
   // Navigate to a specific postcode on mount (e.g. from saved properties)
   useEffect(() => {
     if (!initialPostcode) return;
@@ -451,7 +509,10 @@ export default function MapPage({
   // Prevent browser back/forward navigation from horizontal trackpad swipes
   useEffect(() => {
     const handleWheel = (e: WheelEvent) => {
-      if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+      if (
+        Math.abs(e.deltaX) > Math.abs(e.deltaY) &&
+        !canWheelScrollInsideTarget(e.target, e.deltaX, e.deltaY)
+      ) {
         e.preventDefault();
       }
     };
@@ -873,6 +934,7 @@ export default function MapPage({
               currentLocation={currentLocation}
               bounds={mapData.bounds}
               hideLegend
+              hideLocationSearch={mobileDrawerOpen && !!selectedHexagon}
               travelTimeEntries={entries}
             />
           </Suspense>
@@ -898,7 +960,7 @@ export default function MapPage({
         </button>
 
         {poiPaneOpen && (
-          <div className="absolute top-14 right-3 left-3 z-20 max-h-[45dvh] overflow-hidden flex flex-col rounded-lg shadow-xl border border-warm-200 dark:border-warm-700 bg-white dark:bg-warm-900">
+          <div className="absolute top-14 right-3 left-3 z-20 flex h-[45dvh] min-h-0 flex-col overflow-hidden rounded-lg border border-warm-200 bg-white shadow-xl dark:border-warm-700 dark:bg-warm-900">
             {renderPOIPane()}
           </div>
         )}
@@ -1045,7 +1107,7 @@ export default function MapPage({
         </button>
         {/* Floating POI panel */}
         {poiPaneOpen && (
-          <div className="absolute bottom-14 right-4 z-10 w-80 max-h-[60vh] overflow-hidden flex flex-col rounded-lg shadow-xl border border-warm-200 dark:border-warm-700 bg-white dark:bg-warm-900">
+          <div className="absolute bottom-14 right-4 z-10 flex h-[60vh] min-h-0 w-80 flex-col overflow-hidden rounded-lg border border-warm-200 bg-white shadow-xl dark:border-warm-700 dark:bg-warm-900">
             {renderPOIPane()}
           </div>
         )}
@@ -1062,6 +1124,7 @@ export default function MapPage({
             onClose={handleCloseSelection}
             renderAreaPane={renderAreaPane}
             renderPropertiesPane={renderPropertiesPane}
+            demoReady={Boolean(areaStats && !loadingAreaStats)}
           />
         </Suspense>
       )}