Merge pull request #66 from Juliusolsson05/feat/show-all-map-labels

feat: add map show-all-labels toggle

Author: Juliusolsson05

src/features/map/components/MapControls.tsx

@@ -5,24 +5,52 @@ import type { MapViewState } from '@deck.gl/core';
 import { Button } from '@/components/ui/button';
 
 type Props = {
+  showAllLabels:    boolean;
   viewState:        MapViewState;
   mapStyle:         'dark' | 'satellite';
   hasPanel:         boolean;
   timelineVisible?: boolean;
   isMobile?:        boolean;
+  onShowAllLabelsChange: (show: boolean) => void;
   onStyleChange:    (s: 'dark' | 'satellite') => void;
 };
 
-export function MapControls({ viewState, mapStyle, hasPanel, timelineVisible = true, isMobile = false, onStyleChange }: Props) {
+export function MapControls({
+  viewState,
+  mapStyle,
+  hasPanel,
+  timelineVisible = true,
+  isMobile = false,
+  onShowAllLabelsChange,
+  onStyleChange,
+  showAllLabels,
+}: Props) {
   const right: number | string = isMobile ? 'max(12px, var(--safe-right))' : (hasPanel ? 332 : 12);
   const bottomOffset = timelineVisible ? 0 : -44;
   const coordBottom = isMobile ? 64 + bottomOffset : 56 + bottomOffset;
-  const switcherBottom = isMobile ? 94 + bottomOffset : 86 + bottomOffset;
+  const switcherBottom = isMobile ? 126 + bottomOffset : 118 + bottomOffset;
   const coordBottomStyle = isMobile ? `calc(${coordBottom}px + var(--safe-bottom))` : coordBottom;
   const switcherBottomStyle = isMobile ? `calc(${switcherBottom}px + var(--safe-bottom))` : switcherBottom;
 
   return (
     <>
+      <Button
+        variant="ghost"
+        size="xs"
+        onClick={() => onShowAllLabelsChange(!showAllLabels)}
+        className={`mono absolute z-10 h-auto rounded-sm px-2.5 py-1 font-bold ${isMobile ? 'text-[9px]' : 'text-[8px]'}`}
+        style={{
+          background: showAllLabels ? 'var(--blue-dim)' : 'rgba(28,33,39,0.92)',
+          border: '1px solid var(--bd)',
+          bottom: isMobile ? `calc(${switcherBottom + 32}px + var(--safe-bottom))` : switcherBottom + 30,
+          color: showAllLabels ? 'var(--blue-l)' : 'var(--t3)',
+          right,
+          transition: 'right 0.22s cubic-bezier(0.4,0,0.2,1), bottom 0.22s cubic-bezier(0.4,0,0.2,1)',
+        }}
+      >
+        LABELS {showAllLabels ? 'ALL' : 'SMART'}
+      </Button>
+
       {/* Map style switcher */}
       <div className="absolute flex overflow-hidden rounded-sm z-10"
         style={{ bottom: switcherBottomStyle, right, border: '1px solid var(--bd)', transition: 'right 0.22s cubic-bezier(0.4,0,0.2,1), bottom 0.22s cubic-bezier(0.4,0,0.2,1)' }}>

src/features/map/components/desktop/MapLayout.tsx

@@ -30,9 +30,9 @@ type Props = {
 
 export function DesktopMapLayout({ ctx, embedded = false }: Props) {
   const {
-    viewState, activeStory, selectedItem, sidebarOpen, mapStyle, stories,
+    viewState, activeStory, selectedItem, showAllLabels, sidebarOpen, mapStyle, stories,
     overlayVisibility, toggleOverlay, f, tooltip, layers, handleMapClick, showTimeline,
-    setViewState, activateStory, setActiveStory, setSelectedItem,
+    setViewState, activateStory, setActiveStory, setSelectedItem, setShowAllLabels,
     toggleSidebar, setMapStyle,
   } = ctx;
 
@@ -95,11 +95,13 @@ export function DesktopMapLayout({ ctx, embedded = false }: Props) {
           )}
 
           <MapControls
+            showAllLabels={showAllLabels}
             viewState={viewState}
             mapStyle={mapStyle}
             hasPanel={!!selectedItem}
             timelineVisible={showTimeline}
             isMobile={false}
+            onShowAllLabelsChange={setShowAllLabels}
             onStyleChange={setMapStyle}
           />
 

src/features/map/components/landscape/MapCanvas.tsx

@@ -28,9 +28,9 @@ type Props = {
 
 export function MapCanvas({ ctx, onOpenStories, onSelectFeature }: Props) {
   const {
-    viewState, mapStyle, layers, tooltip, handleMapClick, showTimeline,
+    viewState, mapStyle, layers, tooltip, handleMapClick, showAllLabels, showTimeline,
     overlayVisibility, toggleOverlay, f,
-    setViewState, setMapStyle,
+    setShowAllLabels, setViewState, setMapStyle,
   } = ctx;
 
   const handleClick = (...args: Parameters<typeof handleMapClick>) => {
@@ -89,6 +89,20 @@ export function MapCanvas({ ctx, onOpenStories, onSelectFeature }: Props) {
           <MapIcon size={14} strokeWidth={2} />
         </Button>
 
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          onClick={() => setShowAllLabels(!showAllLabels)}
+          className={`h-8 w-8 border transition-colors rounded-none ${
+            showAllLabels
+              ? 'bg-[var(--blue-dim)] border-[var(--blue)] text-[var(--blue-l)]'
+              : 'bg-[rgba(28,33,39,0.85)] border-[var(--bd)] text-[var(--t3)] hover:text-[var(--t1)]'
+          }`}
+          title={showAllLabels ? 'Use smart label filtering' : 'Show all labels'}
+        >
+          <span className="mono text-[8px] font-bold">LBL</span>
+        </Button>
+
         {/* Visibility menu */}
         <MapVisibilityMenu visibility={overlayVisibility} onToggle={toggleOverlay} direction="down" />
       </div>

src/features/map/components/mobile/MapLayout.tsx

@@ -28,9 +28,9 @@ type Props = {
 
 export function MobileMapLayout({ ctx, embedded = false }: Props) {
   const {
-    viewState, activeStory, selectedItem, sidebarOpen, mapStyle, stories,
+    viewState, activeStory, selectedItem, showAllLabels, sidebarOpen, mapStyle, stories,
     overlayVisibility, toggleOverlay, f, tooltip, layers, handleMapClick, showTimeline,
-    setViewState, activateStory, setActiveStory, setSelectedItem,
+    setViewState, activateStory, setActiveStory, setSelectedItem, setShowAllLabels,
     toggleSidebar, setSidebarOpen, setMapStyle,
   } = ctx;
 
@@ -117,11 +117,13 @@ export function MobileMapLayout({ ctx, embedded = false }: Props) {
         )}
 
         <MapControls
+          showAllLabels={showAllLabels}
           viewState={viewState}
           mapStyle={mapStyle}
           hasPanel={false}
           timelineVisible={showTimeline}
           isMobile
+          onShowAllLabelsChange={setShowAllLabels}
           onStyleChange={setMapStyle}
         />
 

src/features/map/components/use-map-page.ts

@@ -17,6 +17,7 @@ import {
   setActiveStory  as setActiveStoryAction,
   setMapStyle     as setMapStyleAction,
   setSelectedItem as setSelectedItemAction,
+  setShowAllLabels as setShowAllLabelsAction,
   setSidebarOpen  as setSidebarOpenAction,
   setViewState    as setViewStateAction,
   toggleSidebar   as toggleSidebarAction,
@@ -36,6 +37,7 @@ export function useMapPage({ isMobile }: { isMobile: boolean }) {
   const viewState    = useAppSelector(s => s.map.viewState);
   const activeStory  = useAppSelector(s => s.map.activeStory);
   const selectedItem = useAppSelector(s => s.map.selectedItem);
+  const showAllLabels = useAppSelector(s => s.map.showAllLabels);
   const sidebarOpen  = useAppSelector(s => s.map.sidebarOpen);
   const mapStyle     = useAppSelector(s => s.map.mapStyle);
   const { data: stories = [], isLoading: storiesLoading } = useMapStories();
@@ -61,6 +63,7 @@ export function useMapPage({ isMobile }: { isMobile: boolean }) {
     viewState,
     isSatellite: mapStyle === 'satellite',
     isMobile,
+    showAllLabels,
   });
 
   const handleMapClick = useCallback(({ object, layer }: PickingInfo): SelectedItem | null => {
@@ -113,6 +116,7 @@ export function useMapPage({ isMobile }: { isMobile: boolean }) {
     viewState,
     activeStory,
     selectedItem,
+    showAllLabels,
     sidebarOpen,
     mapStyle,
     stories,
@@ -136,6 +140,7 @@ export function useMapPage({ isMobile }: { isMobile: boolean }) {
       return dispatch(setActiveStoryAction(story));
     },
     setSelectedItem: (item: Parameters<typeof setSelectedItemAction>[0]) => dispatch(setSelectedItemAction(item)),
+    setShowAllLabels: (show: boolean) => dispatch(setShowAllLabelsAction(show)),
     toggleSidebar:   () => dispatch(toggleSidebarAction()),
     setSidebarOpen:  (open: boolean) => dispatch(setSidebarOpenAction(open)),
     setMapStyle:     (style: Parameters<typeof setMapStyleAction>[0]) => { track('map_style_changed', { style }); return dispatch(setMapStyleAction(style)); },

src/features/map/hooks/use-map-layers.ts

@@ -31,6 +31,7 @@ type Props = {
   viewState: MapViewState;
   isSatellite: boolean;
   isMobile?:   boolean;
+  showAllLabels?: boolean;
 };
 
 type RGBA = [number, number, number, number];
@@ -77,6 +78,7 @@ export function useMapLayers({
   viewState,
   isSatellite,
   isMobile = false,
+  showAllLabels = false,
 }: Props): Layer[] {
   return useMemo(() => {
     const activeEventIds = activeStory
@@ -125,6 +127,7 @@ export function useMapLayers({
       viewState,
       selectedItem,
       mergedActiveStory,
+      showAllLabels,
     );
 
     // Heat map
@@ -297,7 +300,7 @@ export function useMapLayers({
     const layers = [heatLayer, zoneLayer, strikeLayer, missileLayer, targetLayer, assetLayer, targetLabels, assetLabels].filter(Boolean);
 
     return layers as Layer[];
-  }, [filtered, actorMeta, activeStory, selectedItem, viewState, isSatellite, isMobile]);
+  }, [filtered, actorMeta, activeStory, selectedItem, viewState, isSatellite, isMobile, showAllLabels]);
 }
 
 // Re-export so tooltip handler can share STATUS_META without another import

src/features/map/lib/label-visibility.ts

@@ -103,6 +103,7 @@ export function selectVisibleLabels(
   viewState: MapViewState,
   selectedItem: SelectedItem | null,
   activeStory: MapStory | null,
+  showAllLabels = false,
 ): LabelSelection {
   const budget = labelBudget(viewState.zoom);
   const candidates: LabelCandidate[] = [
@@ -130,6 +131,17 @@ export function selectVisibleLabels(
   const cellCounts = new Map<string, number>();
   const selected: LabelCandidate[] = [];
 
+  if (showAllLabels) {
+    return {
+      targets: candidates
+        .filter((item): item is LabelCandidate & { point: Target; kind: 'target' } => item.kind === 'target')
+        .map((item) => item.point),
+      assets: candidates
+        .filter((item): item is LabelCandidate & { point: Asset; kind: 'asset' } => item.kind === 'asset')
+        .map((item) => item.point),
+    };
+  }
+
   for (const candidate of candidates) {
     const cellKey = toCellKey(candidate.position, viewState.zoom);
     const cellCount = cellCounts.get(cellKey) ?? 0;

src/features/map/state/map-slice.ts

@@ -35,6 +35,7 @@ export type MapState = {
   selectedItem: SelectedItem | null;
 
   // UI chrome
+  showAllLabels: boolean;
   sidebarOpen: boolean;
   mapStyle: 'dark' | 'satellite';
 
@@ -45,6 +46,7 @@ export type MapState = {
 // localStorage persistence
 
 type PersistedMapPrefs = {
+  showAllLabels: boolean;
   sidebarOpen: boolean;
   mapStyle: 'dark' | 'satellite';
 };
@@ -64,6 +66,7 @@ export function persistMapPrefs(state: MapState): void {
   if (!hasPreferencesConsent()) return;
   try {
     const persisted: PersistedMapPrefs = {
+      showAllLabels: state.showAllLabels,
       sidebarOpen: state.sidebarOpen,
       mapStyle:    state.mapStyle,
     };
@@ -113,6 +116,7 @@ function buildInitialState(): MapState {
     viewExtent:     [0, 0],
     activeStory:  null,
     selectedItem: null,
+    showAllLabels: persisted?.showAllLabels ?? false,
     sidebarOpen: persisted?.sidebarOpen ?? true,
     mapStyle:    persisted?.mapStyle    ?? 'dark',
     _filtersFingerprint: null,
@@ -252,6 +256,9 @@ const mapSlice = createSlice({
     setSidebarOpen(state, action: PayloadAction<boolean>) {
       state.sidebarOpen = action.payload;
     },
+    setShowAllLabels(state, action: PayloadAction<boolean>) {
+      state.showAllLabels = action.payload;
+    },
     setMapStyle(state, action: PayloadAction<'dark' | 'satellite'>) {
       state.mapStyle = action.payload;
     },
@@ -275,6 +282,7 @@ export const {
   setSelectedItem,
   toggleSidebar,
   setSidebarOpen,
+  setShowAllLabels,
   setMapStyle,
 } = mapSlice.actions;