Function MissionMapView

frontend/src/components/mission-map-view.tsx:39–1260

({ 
  className = '', 
  onWaypointsChange,
  activeMissionId,
  onNavigationComplete,
  initialWaypoints = [],
  showNavPlan = false
}: MissionMapViewProps)

}

export default function MissionMapView({ 
  className = '', 
  onWaypointsChange,
  activeMissionId,
  onNavigationComplete,
  initialWaypoints = [],
  showNavPlan = false
}: MissionMapViewProps) {
  const { connection } = useRobotConnection();
  const { t } = useLanguage();
  const { dispatch: notificationDispatch } = useNotifications();
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const animationFrameRef = useRef<number | undefined>(undefined);
  const mapTopic = '/map';
  const { occupancyGrid, isLoading, error, retry } = useOccupancyGrid({ topicName: mapTopic });
  
  // Get robot position in map frame
  const robotPose = useMapPose();
  
  // Get navigation plan
  const { navPlan } = useRosNavPlan('/plan');

  // Local costmap for obstacle visualization
  const [showLocalCostmap, setShowLocalCostmap] = useState(false);
  const { occupancyGrid: localCostmap } = useOccupancyGrid({
    topicName: '/local_costmap/costmap',
    enabled: showLocalCostmap,
    throttleMs: 0
  });
  const localCostmapRef = useRef(localCostmap);
  const costmapImageCacheRef = useRef<ImageData | null>(null);
  const costmapDataHashRef = useRef<string>('');

  // Nav2 FollowWaypoints action - proper waypoint following
  const {
    startNavigation: startFollowWaypoints,
    cancelNavigation: cancelFollowWaypoints,
    status: navigationStatus,
    progress: navigationProgress,
    error: navigationError,
    isConnected: nav2Connected,
    isActionServerAvailable,
  } = useFollowWaypoints();

  // Derived states for UI logic
  // With the new FollowWaypoints action, Nav2 handles all sequencing server-side
  // so we only need to check for 'navigating' status
  const isNav2Navigating = navigationStatus === 'navigating';
  const nav2CurrentIndex = navigationProgress.currentWaypointIndex;
  
  // Waypoint management - Initialize with initialWaypoints
  const [waypoints, setWaypoints] = useState<Waypoint[]>(initialWaypoints);
  const [waypointReachedStatus, setWaypointReachedStatus] = useState<Record<string, boolean>>({});
  const [isEditMode, setIsEditMode] = useState(false); // Start in view mode by default
  const [isDraggingWaypoint, setIsDraggingWaypoint] = useState<string | null>(null);
  const [tempWaypoint, setTempWaypoint] = useState<Waypoint | null>(null);
  const [selectedWaypointId, setSelectedWaypointId] = useState<string | null>(null);