More

frontend/src/components/map/MapPage.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo, useCallback } from 'react';
-import type { FeatureMeta, FeatureFilters, POICategoryGroup, ViewState } from '../../types';
+import type { FeatureMeta, FeatureFilters, POICategoryGroup, ViewState, PostcodeGeometry } from '../../types';
 import type { SearchedLocation } from './LocationSearch';
 import type { Page } from '../ui/Header';
 import Map from './Map';
@@ -18,6 +18,9 @@ import { usePaneResize } from '../../hooks/usePaneResize';
 import { useAiFilters } from '../../hooks/useAiFilters';
 import { useAreaSummary } from '../../hooks/useAreaSummary';
 import { useUrlSync } from '../../hooks/useUrlSync';
+import { useTutorial } from '../../hooks/useTutorial';
+import { getTutorialStyles } from '../../lib/tutorial-styles';
+import Joyride from 'react-joyride';
 import {
   useTravelTime,
   TRANSPORT_MODES,
@@ -191,8 +194,8 @@ export default function MapPage({
   // On mobile, open drawer and switch tab when hexagon is clicked
   const { handleHexagonClick } = selection;
   const handleMobileHexagonClick = useCallback(
-    (id: string, isPostcode?: boolean) => {
-      handleHexagonClick(id, isPostcode);
+    (id: string, isPostcode?: boolean, geometry?: PostcodeGeometry) => {
+      handleHexagonClick(id, isPostcode, geometry);
       if (id) {
         setMobileDrawerOpen(true);
       }
@@ -225,6 +228,9 @@ export default function MapPage({
     mapData.resolution,
   ]);
 
+  // Tutorial
+  const tutorial = useTutorial(initialLoading, isMobile);
+
   // AI area summary
   const aiSummary = useAreaSummary({
     stats: selection.areaStats,
@@ -551,8 +557,20 @@ export default function MapPage({
         </div>
       )}
 
+      <Joyride
+        steps={tutorial.steps}
+        run={tutorial.run}
+        continuous
+        showProgress
+        showSkipButton
+        callback={tutorial.handleCallback}
+        styles={getTutorialStyles(theme)}
+        disableScrolling
+      />
+
       {/* Left Pane */}
       <div
+        data-tutorial="filters"
         className="flex bg-white dark:bg-navy-950 shadow-lg overflow-hidden"
         style={{ width: leftPaneWidth }}
       >
@@ -566,7 +584,7 @@ export default function MapPage({
       </div>
 
       {/* Map */}
-      <div className="flex-1 relative">
+      <div data-tutorial="map" className="flex-1 relative">
         <Map
           data={mapData.data}
           postcodeData={mapData.postcodeData}
@@ -599,6 +617,7 @@ export default function MapPage({
         )}
         {/* Floating POI button */}
         <button
+          data-tutorial="poi-button"
           onClick={() => setPoiPaneOpen((p) => !p)}
           className={`absolute bottom-4 right-4 z-10 p-2 rounded-lg shadow-lg bg-white dark:bg-warm-800 ${poiPaneOpen ? 'text-teal-600 dark:text-teal-400' : 'text-warm-500 dark:text-warm-400 hover:text-teal-600 dark:hover:text-teal-400'}`}
         >
@@ -614,6 +633,7 @@ export default function MapPage({
 
       {/* Right Pane */}
       <div
+        data-tutorial="right-pane"
         className="flex bg-white dark:bg-navy-950 shadow-lg z-10"
         style={{ width: rightPaneWidth }}
       >