Revize 91fd3fa6

Nonrecursive algorithm for path building + path rendering on map

re #9629

frontend/src/features/TrackingTool/TrackingTool.tsx

@@ -8 +8 @@
     Stack,
     Typography,
 } from '@mui/material'
-import { Fragment, useState } from 'react'
+import { Fragment, useEffect, useState } from 'react'
 import AddIcon from '@mui/icons-material/Add'
 import { MapContainer, Marker, Polyline, Popup, TileLayer } from 'react-leaflet'
 import mapConfig from '../../config/mapConfig'
@@ -19 +19 @@
 import DeleteIcon from '@mui/icons-material/Delete'
 import { PathDto } from '../../swagger/data-contracts'
 import { formatHtmlStringToReactDom } from '../../utils/formatting/HtmlUtils'
+import buildPathVariants, { PathVariant } from './buildPathVariants'
 
 // Page with tracking tool
 const TrackingTool = () => {
     // Path response from the API
     const [pathDto, setPathDto] = useState<PathDto | undefined>(undefined)
 
-    const createDummyPathCoords = () => {
-        // Sample dummy path to display
-        const dummyPath = []
-        for (let i = 0; i < 10; i += 1) {
-            dummyPath.push({
-                latitude:
-                    mapConfig.defaultCoordinates[0] +
-                    i * 0.1 +
-                    Math.random() * 0.1,
-                longitude:
-                    mapConfig.defaultCoordinates[1] +
-                    i * 0.1 +
-                    Math.random() * 0.1,
-            })
-        }
-        return dummyPath
-    }
+    // Whether the path variants are building
+    const [buildingPathVariants, setBuildingPathVariants] =
+        useState<boolean>(false)
 
-    const createDummyPath = () => {
-        const coords = createDummyPathCoords()
-        const polylines: any[] = []
+    // List of all computed path variants
+    const [pathVariants, setPathVariants] = useState<PathVariant[] | undefined>(
+        undefined
+    )
 
-        if (coords.length < 2) {
-            return []
-        }
+    // List of all rendered paths to display
+    const [renderedPaths, setRenderedPaths] = useState<any[]>([])
 
-        for (let i = 0; i < coords.length - 1; i += 1) {
-            polylines.push(
-                <TextPath
-                    positions={[
-                        [coords[i].latitude, coords[i].longitude],
-                        [coords[i + 1].latitude, coords[i + 1].longitude],
-                    ]}
-                    text="►"
-                    attributes={{
-                        'font-size': 25,
-                        fill: 'blue',
-                    }}
-                    repeat
-                    center
-                    weight={10}
-                ></TextPath>
-            )
-        }
+    const [mapCenter, setMapCenter] = useState<number[]>([
+        mapConfig.defaultCoordinates[0],
+        mapConfig.defaultCoordinates[1],
+    ])
+
+    // Returns tuple of average latitude and longitude
+    const calculateMapCenter = (pathVariant: PathVariant) => [
+        pathVariant
+            .map((item) => item.latitude ?? 0)
+            .reduce((a, b) => a + b, 0) / pathVariant.length,
+        pathVariant
+            .map((item) => item.longitude ?? 0)
+            .reduce((a, b) => a + b, 0) / pathVariant.length,
+    ]
 
-        return [polylines, coords]
-    }
+    useEffect(() => {
+        if (!pathDto) {
+            return
+        }
 
-    const [polylines, coords] = createDummyPath()
+        setBuildingPathVariants(true)
+        buildPathVariants(pathDto).then((pathVariants) => {
+            setPathVariants(pathVariants)
+            setBuildingPathVariants(false)
+            const paths: any[] = []
+            let first = true
+            pathVariants?.forEach((pathVariant) => {
+                if (first) {
+                    setMapCenter(calculateMapCenter(pathVariant))
+                }
+                for (let i = 0; i < pathVariant.length - 1; i++) {
+                    paths.push(
+                        <TextPath
+                            positions={[
+                                [
+                                    pathVariant[i].latitude,
+                                    pathVariant[i].longitude,
+                                ],
+                                [
+                                    pathVariant[i + 1].latitude,
+                                    pathVariant[i + 1].longitude,
+                                ],
+                            ]}
+                            text="►"
+                            attributes={{
+                                'font-size': 25,
+                                fill: first ? 'blue' : 'gray',
+                            }}
+                            repeat
+                            center
+                            weight={10}
+                        />
+                    )
+                }
+                first = false
+            })
+            console.log(paths)
+            setRenderedPaths(paths)
+        })
+    }, [pathDto])
 
     return (
         <Fragment>
@@ -146 +170 @@
                     }}
                 >
                     <MapContainer
-                        center={[
-                            mapConfig.defaultCoordinates[0],
-                            mapConfig.defaultCoordinates[1],
-                        ]}
+                        center={[mapCenter[0], mapCenter[1]]}
                         zoom={mapConfig.defaultZoom}
                         style={{ height: '100%', minHeight: '100%' }}
                     >
@@ -157 +178 @@
                             attribution={mapConfig.attribution}
                             url={mapConfig.url}
                         />
-                        {coords.map(({ latitude, longitude }, idx) => (
-                            <Marker position={[latitude, longitude]} />
-                        ))}
-                        {polylines}
+                        {renderedPaths}
                     </MapContainer>
                 </Grid>
             </Grid>