Good changes

frontend/src/components/map/AreaPane.tsx

@@ -6,6 +6,7 @@ import type {
   HexagonStatsResponse,
   PostcodeFeature,
 } from '../../types';
+import type { TravelTimeEntry } from '../../hooks/useTravelTime';
 import type { HexagonLocation } from '../../lib/external-search';
 import { formatValue, formatFilterValue, calculateHistogramMean } from '../../lib/format';
 import { groupFeaturesByCategory } from '../../lib/features';
@@ -16,14 +17,14 @@ import StackedBarChart from './StackedBarChart';
 import StackedEnumChart from './StackedEnumChart';
 import PriceHistoryChart from './PriceHistoryChart';
 import ExternalSearchLinks from './ExternalSearchLinks';
-import { InfoIcon, CloseIcon } from '../ui/icons';
+import { InfoIcon } from '../ui/icons';
 import { CollapsibleGroupHeader } from '../ui/CollapsibleGroupHeader';
-import { IconButton } from '../ui/IconButton';
 import { FeatureInfoPopup } from '../ui/FeatureInfoPopup';
 import { EmptyState } from '../ui/EmptyState';
 import { FeatureLabel } from '../ui/FeatureLabel';
 import StreetViewEmbed from './StreetViewEmbed';
 import HistogramLegend from './HistogramLegend';
+import JourneyInstructions from './JourneyInstructions';
 
 interface AreaPaneProps {
   stats: HexagonStatsResponse | null;
@@ -33,10 +34,10 @@ interface AreaPaneProps {
   isPostcode?: boolean;
   postcodeData?: PostcodeFeature | null;
   onViewProperties: () => void;
-  onClose: () => void;
   hexagonLocation: HexagonLocation | null;
   filters: FeatureFilters;
   onNavigateToSource?: (slug: string, featureName: string) => void;
+  travelTimeEntries?: TravelTimeEntry[];
 }
 
 export default function AreaPane({
@@ -47,10 +48,10 @@ export default function AreaPane({
   isPostcode = false,
   postcodeData,
   onViewProperties,
-  onClose,
   hexagonLocation,
   filters,
   onNavigateToSource,
+  travelTimeEntries,
 }: AreaPaneProps) {
   const propertyCount = isPostcode && postcodeData ? postcodeData.properties.count : stats?.count;
   const featureGroups = useMemo(() => groupFeaturesByCategory(globalFeatures), [globalFeatures]);
@@ -84,16 +85,10 @@ export default function AreaPane({
   }
 
   return (
-    <div className="relative h-full">
-      <div className="absolute top-2 right-2 z-20">
-        <IconButton onClick={onClose} title="Close">
-          <CloseIcon />
-        </IconButton>
-      </div>
-
-      <div className="h-full overflow-y-auto">
+    <>
+    <div className="h-full overflow-y-auto">
         <div className="p-3">
-          <div className="flex items-center gap-2 pr-8">
+          <div className="flex items-center gap-2">
             <div>
               <h2 className="text-sm font-semibold dark:text-warm-100">
                 {isPostcode ? hexagonId : 'Area Statistics'}
@@ -129,6 +124,16 @@ export default function AreaPane({
         {hexagonLocation && stats && (
           <ExternalSearchLinks location={hexagonLocation} filters={filters} />
         )}
+        {(() => {
+          const journeyPostcode = isPostcode ? hexagonId : stats?.central_postcode;
+          return journeyPostcode && travelTimeEntries && travelTimeEntries.length > 0 ? (
+            <JourneyInstructions
+              postcode={journeyPostcode}
+              entries={travelTimeEntries}
+              label={!isPostcode ? journeyPostcode : undefined}
+            />
+          ) : null;
+        })()}
         {loading && !stats ? (
           <LoadingSkeleton />
         ) : stats ? (
@@ -260,7 +265,7 @@ export default function AreaPane({
                                           p1={numericStats.histogram.p1}
                                           p99={numericStats.histogram.p99}
                                           globalMean={globalMean}
-                                          formatLabel={formatFilterValue}
+                                          formatLabel={(v) => formatFilterValue(v, feature.raw)}
                                         />
                                       ) : (
                                         <DualHistogram
@@ -268,7 +273,7 @@ export default function AreaPane({
                                           globalCounts={numericStats.histogram.counts}
                                           p1={numericStats.histogram.p1}
                                           p99={numericStats.histogram.p99}
-                                          formatLabel={formatFilterValue}
+                                          formatLabel={(v) => formatFilterValue(v, feature.raw)}
                                         />
                                       ))}
                                   </div>
@@ -386,6 +391,6 @@ export default function AreaPane({
           onNavigateToSource={onNavigateToSource}
         />
       )}
-    </div>
+    </>
   );
 }