feat(admin): improve interview map navigation and trip visualization

Map Navigation Improvements:
- Fix interview navigation buttons disappearing after first use by maintaining list visibility
- Improve prev/next interview UUID handling with direct parameter passing and DOM fallback
- Initialize interview list as visible by default
- Highlight currently selected interview in the list with blue background

Trip Path Visualization Enhancements:
- Use person-specific colors for trip paths by accessing deserialized survey objects
- Create personColorMap to efficiently retrieve person colors from surveyObjectsAndAudits
- Pass personColor as separate property instead of overriding color attribute
- Make arrow pattern more pronounced by doubling percentFromCenter (more pointy).
  When not selected, the small width made it difficult to see the arrow direction.

Map Rendering:
- Add maxZoom: 17 limit to fitBounds operations to prevent blurry tiles at high zoom

Code:
- run yarn format to fix formatting issues
- Improve code formatting and readability in InterviewMap and InterviewStats
- Add error logging for trips without origin/destination (will be replaced by an audit)

Author: kaligrafy

locales/en/admin.json

@@ -150,6 +150,6 @@
   "MissingUuidSurvey": "The interview UUID is missing. Please check the URL or contact support.",
   "FitBounds": "Fit bounds to show all places and trips",
   "MapLayerSelect": "Map layer",
-  "MapLayerOSM": "OSM tiles",
+  "MapLayerOSM": "OpenStreetMap tiles",
   "MapLayerAerial": "Aerial imagery"
 }

locales/fr/admin.json

@@ -150,6 +150,6 @@
   "MissingUuidSurvey": "L'entrevue n'a pas d'UUID. Veuillez contacter les administrateurs de l'enquête.",
   "FitBounds": "Ajuster les limites pour afficher tous les lieux et déplacements",
   "MapLayerSelect": "Couche de carte",
-  "MapLayerOSM": "Tuiles OSM",
+  "MapLayerOSM": "Tuiles OpenStreetMap",
   "MapLayerAerial": "Photos aériennes"
 }

packages/evolution-frontend/src/components/admin/pages/ReviewPage.tsx

@@ -22,31 +22,36 @@ const ReviewPage = () => {
     const { t } = useTranslation();
     const dispatch = useDispatch<ThunkDispatch<RootState, unknown, SurveyAction>>();
     const interview = useSelector((state: RootState) => state.survey.interview);
-    const [showInterviewList, setShowInterviewList] = useState(false);
+    const [showInterviewList, setShowInterviewList] = useState(true);
     const [prevInterviewUuid, setPrevInterviewUuid] = useState<string | undefined>(undefined);
     const [nextInterviewUuid, setNextInterviewUuid] = useState<string | undefined>(undefined);
 
     const handleInterviewSummaryChange = useCallback(
-        (interviewUuid: string | null) => {
+        (interviewUuid: string | null, prevUuid?: string, nextUuid?: string) => {
             if (interviewUuid) {
-                // FIXME The next/previous interviews come from the list. That
-                // makes the last/first interview of the _list_ the last/first
-                // total, but there could be pages. It should be handled
-                // differently.
-                const listButton = document.getElementById(`interviewButtonList_${interviewUuid}`);
-                if (!listButton) {
-                    // The filter probably changed, reset to null
-                    setPrevInterviewUuid(undefined);
-                    setNextInterviewUuid(undefined);
-                    return;
+                // If prev/next UUIDs are provided (called from list), use them directly
+                if (prevUuid !== undefined || nextUuid !== undefined) {
+                    setPrevInterviewUuid(prevUuid || undefined);
+                    setNextInterviewUuid(nextUuid || undefined);
+                } else {
+                    // If no prev/next UUIDs provided (called from navigation buttons),
+                    // try to extract them from the DOM as fallback
+                    const listButton = document.getElementById(`interviewButtonList_${interviewUuid}`);
+                    if (listButton) {
+                        const domPrevUuid = listButton.getAttribute('data-prev-uuid');
+                        const domNextUuid = listButton.getAttribute('data-next-uuid');
+                        setPrevInterviewUuid(domPrevUuid === null || domPrevUuid === '' ? undefined : domPrevUuid);
+                        setNextInterviewUuid(domNextUuid === null || domNextUuid === '' ? undefined : domNextUuid);
+                    } else {
+                        // If DOM element not found, clear the navigation
+                        setPrevInterviewUuid(undefined);
+                        setNextInterviewUuid(undefined);
+                    }
                 }
-                const prevUuid = listButton.getAttribute('data-prev-uuid');
-                const nextUuid = listButton.getAttribute('data-next-uuid');
 
                 dispatch(
                     startSetSurveyCorrectedInterview(interviewUuid, () => {
-                        setPrevInterviewUuid(prevUuid === null ? undefined : prevUuid);
-                        setNextInterviewUuid(nextUuid === null ? undefined : nextUuid);
+                        // UUIDs are already set above
                     })
                 );
             } else {

packages/evolution-frontend/src/components/admin/validations/AnimatedArrowPathExtension.tsx

@@ -55,7 +55,7 @@ export default class AnimatedArrowPathExtension extends LayerExtension {
         });
     }
 
-    getStartOffsetRatios(this: Layer<_AnimatedArrowPathLayerProps>, path): number[] {
+    getStartOffsetRatios(this: Layer<_AnimatedArrowPathLayerProps>, path: number[] | number[][]): number[] {
         const result = [0] as number[];
         if (path === undefined || path.length < 2) {
             return result;
@@ -64,12 +64,14 @@ export default class AnimatedArrowPathExtension extends LayerExtension {
         const isNested = Array.isArray(path[0]);
         const geometrySize = isNested ? path.length : path.length / positionSize;
         let sumLength = 0;
-        let p;
-        let prevP;
+        let p: number[];
+        let prevP: number[] | undefined;
         for (let i = 0; i < geometrySize; i++) {
-            p = isNested ? path[i] : path.slice(i * positionSize, i * positionSize + positionSize);
+            p = isNested
+                ? (path as number[][])[i]
+                : (path as number[]).slice(i * positionSize, i * positionSize + positionSize);
             p = this.projectPosition(p);
-            if (i > 0) {
+            if (i > 0 && prevP !== undefined) {
                 const distance = vec3.dist(prevP, p);
                 if (i < geometrySize - 1) {
                     result[i] = result[i - 1] + distance;
@@ -84,7 +86,7 @@ export default class AnimatedArrowPathExtension extends LayerExtension {
         return result;
     }
 
-    getLengthRatios(this: Layer<AnimatedArrowPathProps>, path): number[] {
+    getLengthRatios(this: Layer<AnimatedArrowPathProps>, path: number[] | number[][]): number[] {
         const result = [] as number[];
         if (path === undefined || path.length < 2) {
             return result;
@@ -93,10 +95,14 @@ export default class AnimatedArrowPathExtension extends LayerExtension {
         const isNested = Array.isArray(path[0]);
         const geometrySize = isNested ? path.length : path.length / positionSize;
         let sumLength = 0;
-        let p;
-        let prevP = this.projectPosition(isNested ? path[0] : path.slice(0, positionSize));
+        let p: number[];
+        let prevP: number[] = this.projectPosition(
+            isNested ? (path as number[][])[0] : (path as number[]).slice(0, positionSize)
+        );
         for (let i = 1; i < geometrySize; i++) {
-            p = isNested ? path[i] : path.slice(i * positionSize, i * positionSize + positionSize);
+            p = isNested
+                ? (path as number[][])[i]
+                : (path as number[]).slice(i * positionSize, i * positionSize + positionSize);
             p = this.projectPosition(p);
             const distance = vec3.dist(prevP, p);
             sumLength += distance;
@@ -110,33 +116,37 @@ export default class AnimatedArrowPathExtension extends LayerExtension {
         return result;
     }
 
-    draw(this: Layer<_AnimatedArrowPathLayerProps>, _params: any, _extension: this) {
+    draw(this: Layer<_AnimatedArrowPathLayerProps>, _params: Record<string, unknown>, _extension: this) {
         const zoom = this.context.viewport?.zoom || 14;
 
-        // Here is a good approximation of the zoom factor, based on map/zoom theory: Math.pow(2, zoom - 14)
-        // Multiplier adjusts for low zoom being too fast visually even if speed was the same.
-        const multiplier = (199 - 9 * zoom) / 19; // 10.0 times slower at zoom 1, equal speed at zoom 20.
-        const zoomFactor = multiplier * Math.pow(2, zoom - 14);
+        // Arrow spacing in shader units - this is how far apart arrows are
+        const arrowSpacing = this.props.arrowSpacing || 30.0;
 
-        // Calculate animation time with seamless reset
-        // Use a cycle that matches the arrow spacing to ensure seamless looping
-        const arrowSpacing = this.props.arrowSpacing || 30.0; // Configurable arrow spacing (f32)
+        // Zoom factor calculation
+        // Multiplier adjusts for low zoom being too fast visually
+        const multiplier = (199 - 9 * zoom) / 19; // 10x slower at zoom 1, 1x at zoom 20
+        // See for exact formula: https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Resolution_and_Scale
+        const zoomFactor = multiplier * Math.pow(2, zoom - 15.6);
 
-        // Calculate cycle duration to create seamless loops
-        // The cycle should complete exactly when one arrow spacing cycle finishes
-        const baseCycleDuration = 90;
-        const seamlessCycleDuration = baseCycleDuration * arrowSpacing; // Adjust for arrow spacing pattern
+        // Original speed calculation to maintain correct visual speed
+        const baseSpeed = 0.01; // Shader units per second before zoom adjustment, gives a good average speed
+        const adjustedSpeed = baseSpeed / zoomFactor;
 
-        const rawTime = (performance.now() / 100) % seamlessCycleDuration;
-        const normalizedTime = rawTime / (10 * seamlessCycleDuration);
+        // Fixed cycle duration - there will be a shift every 60 seconds when time wraps
+        // The shift amount depends on zoom level and is generally acceptable for this use case
+        const cycleDuration = 60.0; // seconds
 
-        // Scale the time to match the arrow pattern
-        const seamlessTime = this.props.disableAnimation ? 1 : normalizedTime * arrowSpacing;
+        // Wrap time at the cycle duration to prevent overflow (performance.now() / 1000 gives seconds)
+        const wrappedTime = (performance.now() / 1000) % cycleDuration;
+
+        // Calculate distance traveled in this cycle - this is the animation time value
+        const animationTime = this.props.disableAnimation ? 1 : wrappedTime * adjustedSpeed;
         const animatedArrowProps: AnimatedArrowPathProps = {
-            time: seamlessTime / zoomFactor,
+            time: animationTime,
             arrowSpacing: arrowSpacing
         };
-        (this.state.model as any)?.shaderInputs.setProps({ animatedArrowPath: animatedArrowProps });
+        const model = this.state.model as { shaderInputs?: { setProps: (props: Record<string, unknown>) => void } };
+        model?.shaderInputs?.setProps({ animatedArrowPath: animatedArrowProps });
     }
 
     // See https://deck.gl/docs/developer-guide/custom-layers/picking for more information about picking colors
@@ -168,7 +178,8 @@ export default class AnimatedArrowPathExtension extends LayerExtension {
                 float offset = vArrowPathOffset;
                 float totalLength = vPathLength / vLengthRatio;
                 float startDistance = vStartOffsetRatio * totalLength;
-                float distanceSoFar = startDistance + vPathPosition.y - offset + percentFromCenter;
+                // percentFromCenter * 2.0 makes the arrow twice as pointy.
+                float distanceSoFar = startDistance + vPathPosition.y - offset + percentFromCenter * 2.0;
                 float arrowIndex = mod(distanceSoFar, animatedArrowPath.arrowSpacing);
                 float percentOfDistanceBetweenArrows = 1.0 - arrowIndex / animatedArrowPath.arrowSpacing;
                 
@@ -207,7 +218,7 @@ export default class AnimatedArrowPathExtension extends LayerExtension {
                         arrowSpacing: 'f32'
                     },
                     inject
-                } as ShaderModule<any>
+                } as ShaderModule<AnimatedArrowPathProps>
             ]
         };
     }

packages/evolution-frontend/src/components/admin/validations/InterviewList.tsx

@@ -20,16 +20,21 @@ import { _isBlank } from 'chaire-lib-common/lib/utils/LodashExtensions';
 import { InterviewStatusAttributesBase } from 'evolution-common/lib/services/questionnaire/types';
 
 interface UsersTableProps extends WithTranslation {
-    columns: any[];
+    columns: Array<Record<string, unknown>>;
     data: InterviewStatusAttributesBase[];
-    fetchData: ({ pageSize, pageIndex, filters }: any) => void;
+    fetchData: (params: {
+        pageSize: number;
+        pageIndex: number;
+        filters: unknown;
+        sortBy: { id: string; desc?: boolean }[];
+    }) => void;
     loading: boolean;
     pageCount: number;
     itemCount: number;
     initialSortBy: { id: string; desc?: boolean }[];
     interviewListChange: (show: boolean) => void;
     showInterviewList: boolean;
-    validationInterview: any;
+    validationInterview: InterviewStatusAttributesBase | null;
 }
 
 // User react-table to handle a few table functionalities like paging and filtering
@@ -79,6 +84,28 @@ const InterviewList = (props: UsersTableProps) => {
         setSortBy(newSort);
     };
 
+    const getRowClassName = (
+        row: { original: InterviewStatusAttributesBase },
+        validationInterview: InterviewStatusAttributesBase | null
+    ): string => {
+        if (validationInterview && row.original.uuid === validationInterview.uuid) {
+            return '_active-background _blue';
+        }
+        if (row.original.is_validated && row.original.is_valid && row.original.is_completed) {
+            return '_green _strong _active-background';
+        }
+        if (row.original.is_valid && row.original.is_completed) {
+            return '_dark-green _strong';
+        }
+        if (row.original.is_valid && !row.original.is_completed) {
+            return '_orange _strong';
+        }
+        if (row.original.is_valid === false) {
+            return '_dark-red _strong';
+        }
+        return '';
+    };
+
     return props.loading ? (
         <div className="admin-widget-container">
             <LoadingPage />
@@ -168,24 +195,7 @@ const InterviewList = (props: UsersTableProps) => {
                         return (
                             <li
                                 title={row.original.uuid}
-                                className={`${
-                                    row.original.is_valid === true && row.original.is_completed === true
-                                        ? '_dark-green _strong'
-                                        : ''
-                                }
-                                    ${
-                            row.original.is_validated === true &&
-                                        row.original.is_valid === true &&
-                                        row.original.is_completed === true
-                                ? '_green _strong _active-background'
-                                : ''
-                            }
-                                    ${
-                            row.original.is_valid === true && !row.original.is_completed === true
-                                ? '_orange _strong'
-                                : ''
-                            }
-                                    ${row.original.is_valid === false ? '_dark-red _strong' : ''}`}
+                                className={getRowClassName(row, props.validationInterview)}
                                 {...row.getRowProps()}
                             >
                                 {row.cells.map((cell, index) => {