Merge pull request #2 from ericceg/map-maximize

ericceg · web-flow · commit 54d0e77623a3 · 2026-02-22T09:57:25.000+01:00
Map maximize
diff --git a/README.md b/README.md
@@ -28,9 +28,12 @@ Prototype (actively evolving).
 - In-memory activities list caching for snappy return navigation (no refetch unless filters/data change)
 - Activity detail with metrics, route map, and charts
 - Continuous, Google Maps-style smooth zooming/panning on map views
+- Toggling "Reduced complexity" preserves the current map viewport (pan/zoom)
+- Map views support in-place maximize/minimize (with `Esc` to close expanded view)
 - Global path-based heatmap page that overlays all matching GPS tracks
 - Heatmap filters for time span (presets + custom), category, and sport type
-- Heatmap "Reduced complexity" toggle for a grayscale, lower-noise basemap with stronger route contrast
+- "Reduced complexity" toggle on map views for a grayscale, lower-noise basemap with stronger route contrast
+- Map controls (including reduced-complexity toggles/legend) are overlaid on maps so they remain visible in maximized map mode
 
 ## Tech Stack
 
@@ -72,6 +75,7 @@ npm run tauri dev
    - **Heatmap** for a global path heatmap (overlapping GPS tracks; filter by time span/category/sport)
    - Enable **Reduced complexity (grayscale)** in Heatmap to declutter the map and emphasize route overlap
    - **Activity Detail** for metrics/map/charts
+   - Use the **Maximize** button on maps (Route + Heatmap) to expand them, then press **Esc** or **Minimize** to close
 
 
 ## Build
diff --git a/src/components/MaximizableMapFrame.tsx b/src/components/MaximizableMapFrame.tsx
@@ -0,0 +1,86 @@
+import { useEffect, useState, type ReactNode } from 'react';
+
+type MaximizableMapFrameProps = {
+  label: string;
+  collapsedHeightClassName: string;
+  children: ReactNode;
+  topLeftActions?: ReactNode;
+};
+
+export function MaximizableMapFrame({
+  label,
+  collapsedHeightClassName,
+  children,
+  topLeftActions
+}: MaximizableMapFrameProps) {
+  const [isMaximized, setIsMaximized] = useState(false);
+
+  useEffect(() => {
+    if (!isMaximized) {
+      return undefined;
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsMaximized(false);
+      }
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [isMaximized]);
+
+  useEffect(() => {
+    const previousOverflow = document.body.style.overflow;
+
+    if (isMaximized) {
+      document.body.style.overflow = 'hidden';
+    }
+
+    const tick = window.setTimeout(() => {
+      window.dispatchEvent(new Event('resize'));
+    }, 16);
+
+    return () => {
+      window.clearTimeout(tick);
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [isMaximized]);
+
+  return (
+    <>
+      {isMaximized ? (
+        <button
+          type="button"
+          aria-label={`Close expanded ${label}`}
+          onClick={() => setIsMaximized(false)}
+          className="fixed inset-0 z-40 bg-black/60 backdrop-blur-[2px]"
+        />
+      ) : null}
+
+      <div
+        className={
+          isMaximized
+            ? 'fixed inset-4 z-50 overflow-hidden rounded-xl border border-border bg-panel shadow-2xl'
+            : `relative ${collapsedHeightClassName}`
+        }
+      >
+        <div className="absolute left-3 top-3 z-10 flex max-w-[calc(100%-6.5rem)] flex-wrap items-center gap-2">
+          <button
+            type="button"
+            onClick={() => setIsMaximized((value) => !value)}
+            aria-pressed={isMaximized}
+            aria-label={isMaximized ? `Minimize ${label}` : `Maximize ${label}`}
+            className="rounded-md border border-border bg-panel/90 px-3 py-1.5 text-xs font-medium text-foreground shadow-sm backdrop-blur hover:border-accent/50"
+          >
+            {isMaximized ? 'Minimize' : 'Maximize'}
+          </button>
+          {topLeftActions}
+        </div>
+        <div className="h-full w-full">{children}</div>
+      </div>
+    </>
+  );
+}
diff --git a/src/lib/useManagedMapLibre.ts b/src/lib/useManagedMapLibre.ts
@@ -0,0 +1,78 @@
+import { useEffect, useRef } from 'react';
+import maplibregl from 'maplibre-gl';
+
+import { getMapStyle } from '@/lib/mapStyles';
+
+type UseManagedMapLibreOptions = {
+  reducedComplexity: boolean;
+  initialCenter: [number, number];
+  initialZoom: number;
+};
+
+type MapViewState = {
+  center: [number, number];
+  zoom: number;
+};
+
+export function useManagedMapLibre({
+  reducedComplexity,
+  initialCenter,
+  initialZoom
+}: UseManagedMapLibreOptions) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const mapRef = useRef<maplibregl.Map | null>(null);
+  const viewRef = useRef<MapViewState>({
+    center: initialCenter,
+    zoom: initialZoom
+  });
+
+  useEffect(() => {
+    if (!containerRef.current) {
+      return undefined;
+    }
+
+    const map = new maplibregl.Map({
+      container: containerRef.current,
+      style: getMapStyle(reducedComplexity),
+      center: viewRef.current.center,
+      zoom: viewRef.current.zoom,
+      pitchWithRotate: false,
+      dragRotate: false
+    });
+    mapRef.current = map;
+
+    map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right');
+    map.scrollZoom.setWheelZoomRate(1 / 520);
+    map.scrollZoom.setZoomRate(1 / 130);
+
+    return () => {
+      const center = map.getCenter();
+      viewRef.current = {
+        center: [center.lng, center.lat],
+        zoom: map.getZoom()
+      };
+
+      map.remove();
+      mapRef.current = null;
+    };
+  }, [initialCenter, initialZoom, reducedComplexity]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const map = mapRef.current;
+    if (!container || !map) {
+      return undefined;
+    }
+
+    const observer = new ResizeObserver(() => {
+      map.resize();
+    });
+    observer.observe(container);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [reducedComplexity]);
+
+  return { containerRef, mapRef };
+}
diff --git a/src/pages/ActivityDetailPage.tsx b/src/pages/ActivityDetailPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import {
   CartesianGrid,
@@ -20,7 +20,9 @@ import {
   formatPaceMinKm,
   formatSpeedKmh
 } from '@/lib/format';
-import { US_DEFAULT_CENTER, US_DEFAULT_ZOOM, getMapStyle } from '@/lib/mapStyles';
+import { US_DEFAULT_CENTER, US_DEFAULT_ZOOM } from '@/lib/mapStyles';
+import { useManagedMapLibre } from '@/lib/useManagedMapLibre';
+import { MaximizableMapFrame } from '@/components/MaximizableMapFrame';
 import { MetricCard } from '@/components/MetricCard';
 import type { ActivityDetail, TrackPoint } from '@/types';
 
@@ -82,36 +84,20 @@ function fitMapToTrack(map: maplibregl.Map, track: TrackPoint[]) {
   });
 }
 
-function ActivityRouteMap({ track }: { track: TrackPoint[] }) {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const mapRef = useRef<maplibregl.Map | null>(null);
+function ActivityRouteMap({
+  track,
+  reducedComplexity
+}: {
+  track: TrackPoint[];
+  reducedComplexity: boolean;
+}) {
+  const { containerRef, mapRef } = useManagedMapLibre({
+    reducedComplexity,
+    initialCenter: US_DEFAULT_CENTER,
+    initialZoom: US_DEFAULT_ZOOM
+  });
   const trackSource = useMemo(() => toRouteFeatureCollection(track), [track]);
 
-  useEffect(() => {
-    if (!containerRef.current) {
-      return undefined;
-    }
-
-    const map = new maplibregl.Map({
-      container: containerRef.current,
-      style: getMapStyle(false),
-      center: US_DEFAULT_CENTER,
-      zoom: US_DEFAULT_ZOOM,
-      pitchWithRotate: false,
-      dragRotate: false
-    });
-    mapRef.current = map;
-
-    map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right');
-    map.scrollZoom.setWheelZoomRate(1 / 520);
-    map.scrollZoom.setZoomRate(1 / 130);
-
-    return () => {
-      map.remove();
-      mapRef.current = null;
-    };
-  }, []);
-
   useEffect(() => {
     const map = mapRef.current;
     if (!map) {
@@ -145,7 +131,6 @@ function ActivityRouteMap({ track }: { track: TrackPoint[] }) {
         });
       }
 
-      fitMapToTrack(map, track);
     };
 
     if (map.isStyleLoaded()) {
@@ -157,16 +142,68 @@ function ActivityRouteMap({ track }: { track: TrackPoint[] }) {
     return () => {
       map.off('load', syncTrack);
     };
-  }, [track, trackSource]);
+  }, [track, trackSource, reducedComplexity]);
+
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map) {
+      return undefined;
+    }
+
+    const fitTrack = () => {
+      fitMapToTrack(map, track);
+    };
+
+    if (map.isStyleLoaded()) {
+      fitTrack();
+      return undefined;
+    }
+
+    map.once('load', fitTrack);
+    return () => {
+      map.off('load', fitTrack);
+    };
+  }, [track]);
 
   return <div ref={containerRef} className="h-full w-full" />;
 }
 
+function ReducedComplexityMapToggle({
+  enabled,
+  onChange
+}: {
+  enabled: boolean;
+  onChange: (enabled: boolean) => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={() => onChange(!enabled)}
+      aria-pressed={enabled}
+      className={`flex items-center gap-2 rounded-md border px-2.5 py-1.5 text-xs shadow-sm backdrop-blur transition-colors ${
+        enabled
+          ? 'border-accent/60 bg-panel/90 text-foreground'
+          : 'border-border bg-panel/80 text-muted hover:text-foreground'
+      }`}
+    >
+      <span
+        className={`inline-flex h-3.5 w-3.5 items-center justify-center rounded-sm border text-[10px] leading-none ${
+          enabled ? 'border-accent bg-accent text-white' : 'border-border bg-bg/90 text-transparent'
+        }`}
+      >
+        ✓
+      </span>
+      Reduced complexity
+    </button>
+  );
+}
+
 export function ActivityDetailPage() {
   const { id } = useParams<{ id: string }>();
   const [detail, setDetail] = useState<ActivityDetail | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [reducedMapComplexity, setReducedMapComplexity] = useState(false);
 
   useEffect(() => {
     if (!id) {
@@ -270,15 +307,26 @@ export function ActivityDetailPage() {
         <div className="border-b border-border px-4 py-3">
           <h3 className="text-lg font-semibold text-foreground">Route</h3>
         </div>
-        <div className="h-80">
+        <MaximizableMapFrame
+          label="route map"
+          collapsedHeightClassName="h-80"
+          topLeftActions={
+            detail.track.length > 0 ? (
+              <ReducedComplexityMapToggle
+                enabled={reducedMapComplexity}
+                onChange={setReducedMapComplexity}
+              />
+            ) : null
+          }
+        >
           {detail.track.length === 0 ? (
             <div className="flex h-full items-center justify-center text-sm text-muted">
               No GPS track available
             </div>
           ) : (
-            <ActivityRouteMap track={detail.track} />
+            <ActivityRouteMap track={detail.track} reducedComplexity={reducedMapComplexity} />
           )}
-        </div>
+        </MaximizableMapFrame>
       </section>
 
       <div className="grid gap-6 xl:grid-cols-3">
diff --git a/src/pages/HeatmapPage.tsx b/src/pages/HeatmapPage.tsx
