More

frontend/src/components/map/MapPage.tsx

@@ -8,7 +8,6 @@ import POIPane from './POIPane';
 import { PropertiesPane } from './PropertiesPane';
 import AreaPane from './AreaPane';
 import MobileDrawer from './MobileDrawer';
-import DataSources from '../data-sources/DataSources';
 import MapLegend from './MapLegend';
 import { TabButton } from '../ui/TabButton';
 import { useMapData } from '../../hooks/useMapData';
@@ -18,6 +17,7 @@ import { useHexagonSelection } from '../../hooks/useHexagonSelection';
 import { usePaneResize } from '../../hooks/usePaneResize';
 import { useAreaSummary } from '../../hooks/useAreaSummary';
 import { useUrlSync } from '../../hooks/useUrlSync';
+import { useTravelTime, type TravelTimeInitial } from '../../hooks/useTravelTime';
 import { apiUrl, buildFilterString } from '../../lib/api';
 import { SpinnerIcon } from '../ui/icons/SpinnerIcon';
 
@@ -44,6 +44,7 @@ interface MapPageProps {
   screenshotMode?: boolean;
   ogMode?: boolean;
   isMobile?: boolean;
+  initialTravelTime?: TravelTimeInitial;
 }
 
 export default function MapPage({
@@ -62,6 +63,7 @@ export default function MapPage({
   screenshotMode,
   ogMode,
   isMobile = false,
+  initialTravelTime,
 }: MapPageProps) {
   const [searchedPostcode, setSearchedPostcode] = useState<SearchedPostcode | null>(null);
   const [selectedPOICategories, setSelectedPOICategories] =
@@ -99,6 +101,9 @@ export default function MapPage({
     features,
   });
 
+  // Travel time hook
+  const travelTime = useTravelTime(initialTravelTime);
+
   // Map data hook
   const mapData = useMapData({
     filters,
@@ -107,6 +112,9 @@ export default function MapPage({
     activeFeature,
     dragValue,
     dragData,
+    travelTimeEnabled: travelTime.enabled,
+    travelTimeDestination: travelTime.destination,
+    travelTimeMode: travelTime.mode,
   });
 
   // Keep filter bounds in sync with map data
@@ -124,8 +132,21 @@ export default function MapPage({
   // POI data
   const pois = usePOIData(mapData.bounds, selectedPOICategories);
 
+  // Compute data range for travel time slider
+  const travelTimeDataRange = useMemo((): [number, number] | null => {
+    if (!travelTime.enabled || !travelTime.destination) return null;
+    const vals: number[] = [];
+    for (const item of mapData.data) {
+      const val = item.travel_time;
+      if (typeof val === 'number' && !isNaN(val)) vals.push(val);
+    }
+    if (vals.length === 0) return null;
+    vals.sort((a, b) => a - b);
+    return [vals[0], vals[vals.length - 1]];
+  }, [travelTime.enabled, travelTime.destination, mapData.data]);
+
   // Sync current state to URL
-  useUrlSync(mapData.currentView, filters, features, selectedPOICategories, selection.rightPaneTab);
+  useUrlSync(mapData.currentView, filters, features, selectedPOICategories, selection.rightPaneTab, travelTime);
 
   // Set initial view and tab from URL state
   useEffect(() => {
@@ -201,7 +222,7 @@ export default function MapPage({
       .then((blob) => {
         const link = document.createElement('a');
         link.href = URL.createObjectURL(blob);
-        link.download = 'perfect-postcodes-export.xlsx';
+        link.download = 'perfect-postcode-export.xlsx';
         link.click();
         URL.revokeObjectURL(link.href);
       })
@@ -292,7 +313,6 @@ export default function MapPage({
       onClose={selection.handleCloseSelection}
       hexagonLocation={hexagonLocation}
       filters={filters}
-      onNavigateToSource={(slug, featureName) => onNavigateTo('data-sources', slug, featureName)}
       aiSummary={aiSummary.summary}
       aiSummaryLoading={aiSummary.loading}
       aiSummaryError={aiSummary.error}
@@ -307,7 +327,6 @@ export default function MapPage({
       hexagonId={selection.selectedHexagon?.id || null}
       onLoadMore={selection.handleLoadMoreProperties}
       onClose={selection.handleCloseSelection}
-      onNavigateToSource={(slug) => onNavigateTo('data-sources', slug)}
     />
   );
 
@@ -317,7 +336,6 @@ export default function MapPage({
       selectedCategories={selectedPOICategories}
       onCategoriesChange={setSelectedPOICategories}
       poiCount={pois.length}
-      onNavigateToSource={(slug) => onNavigateTo('data-sources', slug)}
     />
   );
 
@@ -334,15 +352,22 @@ export default function MapPage({
       onDragStart={handleDragStart}
       onDragChange={handleDragChange}
       onDragEnd={handleDragEnd}
-      zoom={mapData.zoom}
-      itemCount={mapData.usePostcodeView ? mapData.postcodeData.length : mapData.data.length}
-      usePostcodeView={mapData.usePostcodeView}
       pinnedFeature={pinnedFeature}
       onTogglePin={handleTogglePin}
       onCancelPin={handleCancelPin}
-      onNavigateToSource={(slug, featureName) => onNavigateTo('data-sources', slug, featureName)}
       openInfoFeature={pendingInfoFeature}
       onClearOpenInfoFeature={onClearPendingInfoFeature}
+      travelTimeEnabled={travelTime.enabled}
+      travelTimeDestination={travelTime.destination}
+      travelTimeDestinationLabel={travelTime.destinationLabel}
+      travelTimeMode={travelTime.mode}
+      travelTimeRange={travelTime.timeRange}
+      travelTimeDataRange={travelTimeDataRange}
+      onTravelTimeEnable={travelTime.handleEnable}
+      onTravelTimeDisable={travelTime.handleDisable}
+      onTravelTimeSetDestination={travelTime.handleSetDestination}
+      onTravelTimeModeChange={travelTime.handleModeChange}
+      onTravelTimeRangeChange={travelTime.handleTimeRangeChange}
     />
   );
 
@@ -386,13 +411,16 @@ export default function MapPage({
             onPostcodeSearched={setSearchedPostcode}
             bounds={mapData.bounds}
             hideLegend
+            travelTimeEnabled={travelTime.enabled}
+            travelTimeDestination={travelTime.destination}
+            travelTimeColorRange={mapData.travelTimeColorRange}
+            travelTimeRange={travelTime.timeRange}
           />
           {mapData.loading && (
             <div className="absolute bottom-2 left-2 bg-white dark:bg-navy-800 dark:text-warm-200 px-2 py-1 rounded shadow text-xs">
               Loading...
             </div>
           )}
-          <DataSources onNavigate={() => onNavigateTo('data-sources')} />
         </div>
 
         {/* Bottom panel — 55% */}
@@ -401,7 +429,18 @@ export default function MapPage({
           style={{ flex: '55 0 0' }}
         >
           {/* Legend */}
-          {viewFeature && mapData.colorRange && mobileLegendMeta ? (
+          {travelTime.enabled && travelTime.destination && mapData.travelTimeColorRange ? (
+            <MapLegend
+              featureLabel="Travel time"
+              range={mapData.travelTimeColorRange}
+              showCancel={false}
+              onCancel={handleCancelPin}
+              mode="feature"
+              theme={theme}
+              inline
+              suffix=" min"
+            />
+          ) : viewFeature && mapData.colorRange && mobileLegendMeta ? (
             <MapLegend
               featureLabel={
                 viewSource === 'eye'
@@ -516,13 +555,16 @@ export default function MapPage({
           searchedPostcode={searchedPostcode}
           onPostcodeSearched={setSearchedPostcode}
           bounds={mapData.bounds}
+          travelTimeEnabled={travelTime.enabled}
+          travelTimeDestination={travelTime.destination}
+          travelTimeColorRange={mapData.travelTimeColorRange}
+          travelTimeRange={travelTime.timeRange}
         />
         {mapData.loading && (
           <div className="absolute bottom-4 left-4 bg-white dark:bg-navy-800 dark:text-warm-200 px-3 py-1 rounded shadow">
             Loading...
           </div>
         )}
-        <DataSources onNavigate={() => onNavigateTo('data-sources')} />
       </div>
 
       {/* Right Pane */}