Better validation for alerts

app/component/itinerary/navigator/NaviCardContainer.js

@@ -12,9 +12,9 @@ import {
   getItineraryAlerts,
   getTransitLegState,
   LEGTYPE,
+  DESTINATION_RADIUS,
 } from './NaviUtils';
 
-const DESTINATION_RADIUS = 20; // meters
 const TIME_AT_DESTINATION = 3; // * 10 seconds
 const TOPBAR_PADDING = 8; // pixels
 
@@ -82,7 +82,16 @@ function NaviCardContainer(
     // Alerts for NaviStack
     addMessages(
       incomingMessages,
-      getItineraryAlerts(legs, intl, messages, match.params, router),
+      getItineraryAlerts(
+        legs,
+        time,
+        position,
+        origin,
+        intl,
+        messages,
+        match.params,
+        router,
+      ),
     );
 
     if (currentLeg) {
@@ -107,16 +116,11 @@ function NaviCardContainer(
         : activeMessages;
 
       // handle messages that are updated.
-      const updatedMessages = previousValidMessages.map(msg => {
-        const incoming = incomingMessages.get(msg.id);
-        if (incoming) {
-          incomingMessages.delete(msg.id);
-          return incoming;
-        }
-        return msg;
-      });
+      const keptMessages = previousValidMessages.filter(
+        msg => !!incomingMessages.get(msg.id),
+      );
       const newMessages = Array.from(incomingMessages.values());
-      setActiveMessages([...updatedMessages, ...newMessages]);
+      setActiveMessages([...keptMessages, ...newMessages]);
       setMessages(new Map([...messages, ...incomingMessages]));
     }
 
@@ -210,7 +214,8 @@ NaviCardContainer.propTypes = {
     lat: PropTypes.number,
     lon: PropTypes.number,
   }),
-  mapLayerRef: PropTypes.func.isRequired,
+  mapLayerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    .isRequired,
   origin: PropTypes.shape({
     x: PropTypes.number.isRequired,
     y: PropTypes.number.isRequired,

app/component/itinerary/navigator/NaviContainer.js

@@ -9,8 +9,8 @@ import NaviBottom from './NaviBottom';
 import NaviCardContainer from './NaviCardContainer';
 import { useRealtimeLegs } from './hooks/useRealtimeLegs';
 import NavigatorOutroModal from './navigatoroutro/NavigatorOutroModal';
+import { DESTINATION_RADIUS } from './NaviUtils';
 
-const DESTINATION_RADIUS = 20; // meters
 const ADDITIONAL_ARRIVAL_TIME = 60000; // 60 seconds in ms
 
 function NaviContainer(
@@ -27,7 +27,10 @@ function NaviContainer(
 ) {
   const [isPositioningAllowed, setPositioningAllowed] = useState(false);
 
-  const position = getStore('PositionStore').getLocationState();
+  let position = getStore('PositionStore').getLocationState();
+  if (!position.hasLocation) {
+    position = null;
+  }
 
   const {
     realTimeLegs,
@@ -41,7 +44,7 @@ function NaviContainer(
   } = useRealtimeLegs(relayEnvironment, legs);
 
   useEffect(() => {
-    if (position.hasLocation) {
+    if (position) {
       mapRef?.enableMapTracking();
       setPositioningAllowed(true);
     } else {
@@ -107,7 +110,8 @@ NaviContainer.propTypes = {
   isNavigatorIntroDismissed: PropTypes.bool,
   // eslint-disable-next-line
   mapRef: PropTypes.object,
-  mapLayerRef: PropTypes.func.isRequired,
+  mapLayerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    .isRequired,
 };
 
 NaviContainer.contextTypes = {

app/component/itinerary/navigator/NaviInstructions.js

@@ -2,11 +2,11 @@ import React from 'react';
 import { FormattedMessage, intlShape } from 'react-intl';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { GeodeticToEnu, displayDistance } from '../../../util/geo-utils';
+import { displayDistance } from '../../../util/geo-utils';
 import { legShape, configShape } from '../../../util/shapes';
 import { legDestination, legTimeStr, legTime } from '../../../util/legUtils';
 import RouteNumber from '../../RouteNumber';
-import { LEGTYPE, getLocalizedMode, pathProgress } from './NaviUtils';
+import { LEGTYPE, getLocalizedMode, getRemainingTraversal } from './NaviUtils';
 import { durationToString } from '../../../util/timeUtils';
 
 export default function NaviInstructions(
@@ -18,20 +18,12 @@ export default function NaviInstructions(
   );
 
   if (legType === LEGTYPE.MOVE) {
-    let remainingTraversal;
-
-    if (position?.lat && position?.lon) {
-      // TODO: maybe apply only when distance is close enough to the path
-      const posXY = GeodeticToEnu(position.lat, position.lon, origin);
-      const { traversed } = pathProgress(posXY, leg.geometry);
-      remainingTraversal = 1.0 - traversed;
-    } else {
-      // estimate from elapsed time
-      remainingTraversal = Math.max(
-        (legTime(leg.end) - time) / (leg.duration * 1000),
-        0,
-      );
-    }
+    const remainingTraversal = getRemainingTraversal(
+      leg,
+      position,
+      origin,
+      time,
+    );
     const duration = leg.duration * remainingTraversal;
     const distance = leg.distance * remainingTraversal;
 
@@ -43,7 +35,7 @@ export default function NaviInstructions(
           {legDestination(intl, leg, null, nextLeg)}
         </div>
 
-        <div className={cx('duration')}>
+        <div className={cx('duration', { realtime: !!position })}>
           {displayDistance(distance, config, intl.formatNumber)} (
           {durationToString(duration * 1000)})
         </div>