Revize 48690561

smol refactor

re #9741

frontend/src/features/TrackingTool/Controls/DragDropCtxWrapper.tsx

@@ +1 @@
+import { memo } from 'react'
+import {
+    DragDropContext,
+    Droppable,
+    OnDragEndResponder,
+} from 'react-beautiful-dnd'
+import { MapPoint } from '../trackingToolUtils'
+import MapPointDraggableListItem from './MapPointDraggableListItem'
+
+export interface DraggableListProps {
+    items: MapPoint[]
+    onDragEnd: OnDragEndResponder
+}
+
+window.addEventListener('error', (e) => {
+    if (
+        e.message ===
+            'ResizeObserver loop completed with undelivered notifications.' ||
+        e.message === 'ResizeObserver loop limit exceeded'
+    ) {
+        e.stopImmediatePropagation()
+    }
+})
+
+const DragDropCtxWrapper = memo(({ items, onDragEnd }: DraggableListProps) => {
+    return (
+        <DragDropContext onDragEnd={onDragEnd}>
+            <Droppable droppableId="droppable-list">
+                {(provided) => (
+                    <div ref={provided.innerRef} {...provided.droppableProps}>
+                        {items.map((item, index) => (
+                            <MapPointDraggableListItem
+                                list={items}
+                                idx={index}
+                                key={item.id}
+                            />
+                        ))}
+                        {provided.placeholder}
+                    </div>
+                )}
+            </Droppable>
+        </DragDropContext>
+    )
+})
+
+export default DragDropCtxWrapper

frontend/src/features/TrackingTool/Controls/MapPointDraggableList.tsx

@@ +1 @@
+import { Paper } from '@mui/material'
+import { useCallback } from 'react'
+import { DropResult } from 'react-beautiful-dnd'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from '../../redux/store'
+import { moveMarkerToDestination } from '../trackingToolSlice'
+import DragDropCtxWrapper from './DragDropCtxWrapper'
+
+const MapPointDraggableList = () => {
+    const dispatch = useDispatch()
+    const path = useSelector(
+        (state: RootState) => state.trackingTool.displayedPath
+    )
+    const onDragEnd = useCallback(
+        ({ destination, source }: DropResult) => {
+            if (!destination || !source || destination.index === source.index) {
+                return
+            }
+
+            dispatch(
+                moveMarkerToDestination({
+                    source: source.index,
+                    destination: destination.index,
+                })
+            )
+        },
+        [dispatch]
+    )
+
+    return (
+        <Paper variant="outlined">
+            <DragDropCtxWrapper items={path ?? []} onDragEnd={onDragEnd} />
+        </Paper>
+    )
+}
+
+export default MapPointDraggableList

frontend/src/features/TrackingTool/Controls/MapPointDraggableListItem.tsx

@@ +1 @@
+import {
+    IconButton,
+    ListItem,
+    ListItemAvatar,
+    ListItemText,
+    Typography,
+} from '@mui/material'
+import { Draggable } from 'react-beautiful-dnd'
+import {
+    getMapPointSemanticColor,
+    MapPointType,
+    PathVariant,
+} from '../trackingToolUtils'
+import { CatalogItemDto } from '../../../swagger/data-contracts'
+import { useDispatch } from 'react-redux'
+import { removeMapMarker, updateMapMarker } from '../trackingToolSlice'
+import { useMemo } from 'react'
+import DragHandleIcon from '@mui/icons-material/DragHandle'
+import VisibilityIcon from '@mui/icons-material/Visibility'
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'
+import AddRoadIcon from '@mui/icons-material/AddRoad'
+import RemoveRoadIcon from '@mui/icons-material/RemoveRoad'
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
+
+export type DraggableListItemProps = {
+    list: PathVariant
+    idx: number
+}
+
+const getFormattedLocationOrEmpty = (catalogItem: CatalogItemDto) => {
+    if (!catalogItem || !catalogItem.latitude || !catalogItem.longitude) {
+        return 'Location unavailable'
+    }
+
+    return `${catalogItem.latitude.toFixed(
+        3
+    )}°, ${catalogItem.longitude.toFixed(3)}°`
+}
+
+const MapPointDraggableListItem = ({ list, idx }: DraggableListItemProps) => {
+    const item = list[idx]
+    const dispatch = useDispatch()
+
+    // useMemo to prevent unnecessary re-renders which will make the list jumpy
+    return useMemo(() => {
+        const toggleAddToPath = () => {
+            dispatch(
+                // updateMapMarkerWithId({
+                //     item: {
+                //         ...item,
+                //         addToPath: !item?.addToPath,
+                //     } as MapPoint,
+                //     id: item.id,
+                // })
+                updateMapMarker({
+                    ...item,
+                    addToPath: !item?.addToPath,
+                    idx,
+                })
+            )
+        }
+
+        const toggleHidden = () => {
+            dispatch(
+                // updateMapMarkerWithId({
+                //     item: {
+                //         ...item,
+                //         hidden: !item?.hidden,
+                //     } as MapPoint,
+                //     id: item.id,
+                // })
+                updateMapMarker({
+                    ...item,
+                    hidden: !item?.hidden,
+                    idx,
+                })
+            )
+        }
+
+        const deleteItem = () => {
+            dispatch(
+                removeMapMarker({
+                    ...item,
+                    idx,
+                })
+            )
+        }
+
+        return (
+            item && (
+                <Draggable
+                    key={`${item.id}`}
+                    draggableId={`${item.id}`}
+                    index={idx}
+                >
+                    {(provided, snapshot) => (
+                        <ListItem
+                            ref={provided.innerRef}
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                        >
+                            <ListItemAvatar>
+                                <DragHandleIcon />
+                            </ListItemAvatar>
+                            <ListItemText
+                                primary={
+                                    <Typography
+                                        style={{
+                                            color: getMapPointSemanticColor(
+                                                item
+                                            ),
+                                        }}
+                                    >
+                                        {item.catalogItem.name ??
+                                            'Unknown name'}
+                                    </Typography>
+                                }
+                                secondary={getFormattedLocationOrEmpty(
+                                    item.catalogItem
+                                )}
+                            />
+                            {item.type !== MapPointType.LocalCatalog && (
+                                <IconButton sx={{ mr: 1 }} onClick={deleteItem}>
+                                    <DeleteForeverIcon />
+                                </IconButton>
+                            )}
+                            <IconButton sx={{ mr: 1 }} onClick={toggleHidden}>
+                                {item.hidden ? (
+                                    <VisibilityOffIcon />
+                                ) : (
+                                    <VisibilityIcon />
+                                )}
+                            </IconButton>
+                            <IconButton
+                                sx={{ mr: 1 }}
+                                onClick={toggleAddToPath}
+                            >
+                                {item.addToPath ? (
+                                    <AddRoadIcon />
+                                ) : (
+                                    <RemoveRoadIcon />
+                                )}
+                            </IconButton>
+                            {/* <FormControlLabel
+                            control={
+                                <Checkbox
+                                    checked={item.addToPath}
+                                    onChange={toggleAddToPath}
+                                />
+                            }
+                            label="Add to path"
+                        /> */}
+                        </ListItem>
+                    )}
+                </Draggable>
+            )
+        )
+    }, [item, idx, dispatch])
+}
+
+export default MapPointDraggableListItem

frontend/src/features/TrackingTool/Controls/MapPointToggleables.tsx

@@ +1 @@
+import { Checkbox, FormControlLabel, Stack, Typography } from '@mui/material'
+import { useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from '../../redux/store'
+import { updateDisplayedPath } from '../trackingToolSlice'
+import { MapPointType } from '../trackingToolUtils'
+
+// Component which controls what type of map points are enabled and disabled
+const MapPointToggleables = () => {
+    const dispatch = useDispatch()
+    const path = useSelector((state: RootState) => state.trackingTool.displayedPath)
+
+    // keep track of the state of the checkboxes
+    const [enableMap, setEnableMap] = useState({
+        [MapPointType.LocalCatalog]: true,
+        [MapPointType.FromCoordinates]: true,
+        [MapPointType.GeoJson]: true,
+        [MapPointType.ExternalCatalog]: true,
+    })
+
+    // Disables specific feature
+    const toggleFeature = (feature: MapPointType) => {
+        if (!path) {
+            return
+        }
+        setEnableMap({ ...enableMap, [feature]: !enableMap[feature] })
+        const newPath = path.map((point) => {
+            // if the point is the feature we are disabling, set it to as so, skip otherwise
+            if (point.type === feature) {
+                return {
+                    ...point,
+                    hidden: enableMap[point.type],
+                    addToPath: !enableMap[point.type] ? true : point.addToPath,
+                }
+            }
+
+            return point
+        })
+        dispatch(updateDisplayedPath(newPath))
+    }
+
+    return (
+        <Stack direction="column">
+            <Stack direction="row" justifyItems="space-between">
+                <Typography align="left" variant="h6" sx={{ mr: 1 }}>
+                    From file
+                </Typography>
+                <FormControlLabel
+                    control={
+                        <Checkbox
+                            checked={enableMap[MapPointType.GeoJson]}
+                            onChange={() => toggleFeature(MapPointType.GeoJson)}
+                        />
+                    }
+                    label="Show All"
+                />
+            </Stack>
+            <Stack direction="row" justifyItems="space-between">
+                <Typography align="left" variant="h6" sx={{ mr: 1 }}>
+                    From local catalog
+                </Typography>
+                <FormControlLabel
+                    control={
+                        <Checkbox
+                            checked={enableMap[MapPointType.LocalCatalog]}
+                            onChange={() =>
+                                toggleFeature(MapPointType.LocalCatalog)
+                            }
+                        />
+                    }
+                    label="Show All"
+                />
+            </Stack>
+            <Stack direction="row" justifyItems="space-between">
+                <Typography align="left" variant="h6" sx={{ mr: 1 }}>
+                    From coordinates
+                </Typography>
+                <FormControlLabel
+                    control={
+                        <Checkbox
+                            checked={enableMap[MapPointType.FromCoordinates]}
+                            onChange={() =>
+                                toggleFeature(MapPointType.FromCoordinates)
+                            }
+                        />
+                    }
+                    label="Show All"
+                />
+            </Stack>
+            <Stack direction="row" justifyItems="space-between">
+                <Typography align="left" variant="h6" sx={{ mr: 1 }}>
+                    From external catalog
+                </Typography>
+                <FormControlLabel
+                    control={
+                        <Checkbox
+                            checked={enableMap[MapPointType.ExternalCatalog]}
+                            onChange={() =>
+                                toggleFeature(MapPointType.ExternalCatalog)
+                            }
+                        />
+                    }
+                    label="Show All"
+                />
+            </Stack>
+        </Stack>
+    )
+}
+
+export default MapPointToggleables

frontend/src/features/TrackingTool/Controls/ProcessedTextDisplay.tsx

@@ +1 @@
+import { Card, CardContent, Stack, Typography } from '@mui/material'
+import { Fragment } from 'react'
+import { useSelector } from 'react-redux'
+import { formatHtmlStringToReactDom } from '../../../utils/formatting/HtmlUtils'
+import { RootState } from '../../redux/store'
+
+const ProcessedTextDisplay = () => {
+    const pathDto = useSelector(
+        (state: RootState) => state.trackingTool.pathDto
+    )
+
+    return (
+        <Fragment>
+            {pathDto && (
+                <Card variant="outlined" sx={{ maxHeight: '50vh' }}>
+                    <CardContent>
+                        <Stack direction="column">
+                            <Typography
+                                variant="h5"
+                                sx={{ mb: 1 }}
+                                fontWeight="600"
+                            >
+                                Processed Text
+                            </Typography>
+                            <Typography variant="body2">
+                                {formatHtmlStringToReactDom(pathDto.text ?? '')}
+                            </Typography>
+                        </Stack>
+                    </CardContent>
+                </Card>
+            )}
+        </Fragment>
+    )
+}
+
+export default ProcessedTextDisplay

frontend/src/features/TrackingTool/Import/GeoJsonExportButton.tsx

@@ +1 @@
+import { Button } from '@mui/material'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../redux/store'
+import { isMapPointDisplayable } from '../trackingToolUtils'
+import { exportAsGeoJsonString } from '../Map/geoJsonMapping'
+
+const GeoJsonExportButton = () => {
+    const path = useSelector((state: RootState) => state.trackingTool.displayedPath)
+    const exportPath = () => {
+        if (!path) {
+            return
+        }
+
+        const exportPath = path.filter(
+            (vertex) => isMapPointDisplayable(vertex) && vertex.addToPath
+        )
+        const exportPathString = exportAsGeoJsonString(exportPath)
+        const blob = new Blob([exportPathString], { type: 'application/json' })
+        const url = window.URL.createObjectURL(blob)
+        const link = document.createElement('a')
+        link.href = url
+        link.setAttribute('download', 'path.json')
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+    }
+
+    return (
+        <Button variant="contained" onClick={exportPath}>
+            Export
+        </Button>
+    )
+}
+
+export default GeoJsonExportButton

frontend/src/features/TrackingTool/Import/GeoJsonImportDialog.tsx

@@ +1 @@
+import { DialogContent, DialogTitle } from '@mui/material'
+import { useFormik } from 'formik'
+import { useState } from 'react'
+import { useDispatch } from 'react-redux'
+import ButtonOpenableDialog from '../../Reusables/ButtonOpenableDialog'
+import * as yup from 'yup'
+import { showNotification } from '../../Notification/notificationSlice'
+import SingleFileSelectionForm from '../../Reusables/SingleFileSelectionForm'
+import { mergeWithCurrentPath } from '../trackingToolSlice'
+import { parseGeoJsonToPathVariant } from '../Map/geoJsonMapping'
+
+const GeoJsonImportDialog = () => {
+    const dispatch = useDispatch()
+
+    const [filename, setFilename] = useState<string | undefined>(undefined)
+    const [fileProcessing, setFileProcessing] = useState(false)
+    const [open, setOpen] = useState(false)
+
+    const validationSchema = yup.object().shape({
+        file: yup.mixed().required('File is required'),
+    })
+
+    const initialValues: { file?: File } = {
+        file: undefined,
+    }
+
+    // Callback when user selects the file
+    const onFileSelected = (event: any) => {
+        const file = event.currentTarget.files[0]
+        if (file) {
+            setFilename(file.name)
+            formik.setFieldValue('file', file)
+        }
+    }
+
+    const onClose = () => {
+        if (fileProcessing) {
+            return
+        }
+        setFilename(undefined)
+        formik.resetForm()
+        setOpen(false)
+    }
+
+    const onClearSelectedFile = () => {
+        setFilename(undefined)
+        formik.setFieldValue('file', undefined)
+    }
+
+    const formik = useFormik({
+        initialValues,
+        validationSchema,
+        onSubmit: async (values) => {
+            setFileProcessing(true)
+            const reader = new FileReader()
+            reader.readAsText(values.file as File)
+            reader.onload = async () => {
+                try {
+                    const pathVariant = parseGeoJsonToPathVariant(
+                        reader.result as string
+                    )
+                    // Merge current path variant with the new one
+                    dispatch(mergeWithCurrentPath(pathVariant))
+                    onClose()
+                } catch (e: any) {
+                    dispatch(
+                        showNotification({
+                            message: e.message,
+                            // message: 'Error importing GeoJson, the file has invalid format',
+                            severity: 'error',
+                            autohideSecs: 5,
+                        })
+                    )
+                }
+                setFileProcessing(false)
+            }
+        },
+    })
+
+    return (
+        <ButtonOpenableDialog
+            buttonText="Import"
+            buttonColor="primary"
+            buttonVariant="contained"
+            onCloseCallback={onClose}
+            maxWidth="xs"
+            open={open}
+            setOpen={setOpen}
+        >
+            <DialogTitle>Import Path</DialogTitle>
+            <DialogContent>
+                <SingleFileSelectionForm
+                    onFileSelected={onFileSelected}
+                    onClearSelectedFile={onClearSelectedFile}
+                    filename={filename}
+                    formik={formik}
+                />
+            </DialogContent>
+        </ButtonOpenableDialog>
+    )
+}
+
+export default GeoJsonImportDialog

frontend/src/features/TrackingTool/Import/ImportContextMenu.tsx

@@ -2 +2 @@
 import { Fragment, useCallback, useState } from 'react'
 import { Popup, useMapEvents } from 'react-leaflet'
 import Typography from '@mui/material/Typography'
-import {  Stack } from '@mui/material'
+import { Stack } from '@mui/material'
 import AddFromCoordinatesDialog from './AddFromCoordinatesDialog'
 import { useSelector } from 'react-redux'
 import { RootState } from '../../redux/store'
 import ImportLocationDialog from './ImportLocationDialog'
-import { PathDto } from '../../../swagger/data-contracts'
 
 const RightClickPopupMenu = () => {
     const [open, setOpen] = useState(false)
     const [latLng, setLatLng] = useState<[number, number]>([0, 0])
-    const pathDto = useSelector((state: RootState) => state.trackingTool.pathDto)
+    const path = useSelector(
+        (state: RootState) => state.trackingTool.displayedPath
+    )
 
     useMapEvents({
         contextmenu: (e: LeafletMouseEvent) => {
-            if (!pathDto) {
+            if (!path) {
                 return
             }
             setLatLng([e.latlng.lat, e.latlng.lng])
@@ -38 +39 @@
                         justifyItems="center"
                         justifyContent="center"
                     >
-                        <Typography style={{margin: 0}} sx={{ mb: 0.5 }} align="center">
+                        <Typography
+                            style={{ margin: 0 }}
+                            sx={{ mb: 0.5 }}
+                            align="center"
+                        >
                             {latLng[0].toFixed(5)}°{latLng[1].toFixed(5)}°
                         </Typography>
                         <AddFromCoordinatesDialog

frontend/src/features/TrackingTool/Import/MapPointToggleables.tsx

@@ -1 @@
-import { Checkbox, FormControlLabel, Stack, Typography } from '@mui/material'
-import { useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { RootState } from '../../redux/store'
-import { updatePrimaryPath } from '../trackingToolSlice'
-import { MapPointType, PathVariant } from '../trackingToolUtils'
-
-const MapPointToggleables = () => {
-    const dispatch = useDispatch()
-    const paths = useSelector(
-        (state: RootState) => state.trackingTool.pathVariants
-    )
-    const [path, setPath] = useState<PathVariant>([])
-    const primaryPathIdx = useSelector(
-        (state: RootState) => state.trackingTool.primaryPathIdx
-    )
-    useEffect(() => {
-        setPath(
-            paths && paths.length > primaryPathIdx ? paths[primaryPathIdx] : []
-        )
-    }, [paths, primaryPathIdx])
-
-    const [enableMap, setEnableMap] = useState({
-        [MapPointType.LocalCatalog]: true,
-        [MapPointType.FromCoordinates]: true,
-        [MapPointType.GeoJson]: true,
-        [MapPointType.ExternalCatalog]: true,
-    })
-
-    // Disables specific feature
-    const toggleFeature = (feature: MapPointType) => {
-        setEnableMap({ ...enableMap, [feature]: !enableMap[feature] })
-        const newPath = path.map((point) => {
-            if (point.type === feature) {
-                return {
-                    ...point,
-                    hidden: enableMap[point.type],
-                    addToPath: !enableMap[point.type] ? true : point.addToPath,
-                }
-            }
-
-            return point
-        })
-        dispatch(updatePrimaryPath(newPath))
-    }
-
-    return (
-        <Stack direction="column">
-            <Stack direction="row" justifyItems="space-between">
-                <Typography align="left" variant="h6" sx={{ mr: 1 }}>
-                    From file
-                </Typography>
-                <FormControlLabel
-                    control={
-                        <Checkbox
-                            checked={enableMap[MapPointType.GeoJson]}
-                            onChange={() => toggleFeature(MapPointType.GeoJson)}
-                        />
-                    }
-                    label="Show All"
-                />
-            </Stack>
-            <Stack direction="row" justifyItems="space-between">
-                <Typography align="left" variant="h6" sx={{ mr: 1 }}>
-                    From local catalog
-                </Typography>
-                <FormControlLabel
-                    control={
-                        <Checkbox
-                            checked={enableMap[MapPointType.LocalCatalog]}
-                            onChange={() =>
-                                toggleFeature(MapPointType.LocalCatalog)
-                            }
-                        />
-                    }
-                    label="Show All"
-                />
-            </Stack>
-            <Stack direction="row" justifyItems="space-between">
-                <Typography align="left" variant="h6" sx={{ mr: 1 }}>
-                    From coordinates
-                </Typography>
-                <FormControlLabel
-                    control={
-                        <Checkbox
-                            checked={enableMap[MapPointType.FromCoordinates]}
-                            onChange={() =>
-                                toggleFeature(MapPointType.FromCoordinates)
-                            }
-                        />
-                    }
-                    label="Show All"
-                />
-            </Stack>
-            <Stack direction="row" justifyItems="space-between">
-                <Typography align="left" variant="h6" sx={{ mr: 1 }}>
-                    From external catalog
-                </Typography>
-                <FormControlLabel
-                    control={
-                        <Checkbox
-                            checked={enableMap[MapPointType.ExternalCatalog]}
-                            onChange={() =>
-                                toggleFeature(MapPointType.ExternalCatalog)
-                            }
-                        />
-                    }
-                    label="Show All"
-                />
-            </Stack>
-        </Stack>
-    )
-}
-
-export default MapPointToggleables

frontend/src/features/TrackingTool/Map/Map.tsx

@@ +1 @@
+import { ThemeProvider } from '@mui/material'
+import { useRef, useEffect } from 'react'
+import { MapContainer, TileLayer } from 'react-leaflet'
+import { useSelector } from 'react-redux'
+import mapConfig from '../../../config/mapConfig'
+import { RootState } from '../../redux/store'
+import { buildTheme } from '../../Theme/ThemeWrapper'
+import RightClickPopupMenu from '../Import/ImportContextMenu'
+import MapPath from './MapPath'
+import { Map as LeafletMap } from 'leaflet'
+
+const mapTheme = buildTheme('light')
+
+const Map = () => {
+
+    const mapCenter = useSelector((state: RootState) => state.trackingTool.mapCenter)
+
+    const mapRef = useRef<LeafletMap | undefined>(undefined)
+    useEffect(() => {
+        if (!mapRef || !mapRef.current) {
+            console.log('No map ref')
+            return
+        }
+
+        const map = mapRef.current
+        map.setView(mapCenter, mapConfig.defaultZoom, {
+            animate: true,
+        })
+    }, [mapCenter, mapRef])
+
+    return (
+        <ThemeProvider theme={mapTheme}>
+            <MapContainer
+                center={[mapCenter[0], mapCenter[1]]}
+                zoom={mapConfig.defaultZoom}
+                style={{ height: '100%', minHeight: '100%' }}
+                whenCreated={(map) => {
+                    mapRef.current = map
+                }}
+            >
+                <TileLayer
+                    attribution={mapConfig.attribution}
+                    url={mapConfig.url}
+                />
+                <MapPath />
+                <RightClickPopupMenu />
+            </MapContainer>
+        </ThemeProvider>
+    )
+}
+
+export default Map

frontend/src/features/TrackingTool/Map/MapPath.tsx

@@ -1 @@
-import { Fragment, FunctionComponent, useEffect, useState } from 'react'
+import { Fragment, useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '../../redux/store'
-import { PathVariant, MapPoint, isMapPointDisplayable } from '../trackingToolUtils'
+import { MapPoint, isMapPointDisplayable } from '../trackingToolUtils'
 import TextPath from 'react-leaflet-textpath'
-import {
-    setPrimaryIdx,
-    updateMapMarker,
-    updateMapMarkerWithId,
-} from '../trackingToolSlice'
+import { updateMapMarker } from '../trackingToolSlice'
 import MapMarker from './MapMarker'
 import { LatLngTuple } from 'leaflet'
 import { Popup, Tooltip } from 'react-leaflet'
@@ -15 +11 @@
 import { formatHtmlStringToReactDom } from '../../../utils/formatting/HtmlUtils'
 import { DialogCatalogItemDetail as CatalogItemDetailDialog } from '../../Catalog/CatalogItemDetail'
 
-export interface MapPathProps {
-    idx: number // index of the path in the list
-}
-
 type EdgeElement = any
-
-// Blue
-export const primaryPathColor = '#346eeb'
-
-// Grey
-export const secondaryPathColor = '#878e9c'
-
-const MapPath: FunctionComponent<MapPathProps> = ({ idx }) => {
+const MapPath = () => {
     const dispatch = useDispatch()
-
-    // Get list of all paths from the store
-    // And extract path from them
-    const paths = useSelector(
-        (state: RootState) => state.trackingTool.pathVariants
-    )
-    const [path, setPath] = useState<PathVariant>([])
-    useEffect(() => {
-        // Either set the path if it exists or set it to an empty array
-        setPath(paths && paths.length > idx ? paths[idx] : [])
-    }, [idx, paths])
-
-    // Primary path index to set the correct color
-    const primaryPathIdx = useSelector(
-        (state: RootState) => state.trackingTool.primaryPathIdx
+    const path = useSelector(
+        (state: RootState) => state.trackingTool.displayedPath
     )
+    // Color of the path
+    const pathColor = '#346eeb'
 
     // List of all active map points
     const [displayableMapPoints, setDisplayableMapPoints] = useState<
         MapPoint[]
     >([])
     useEffect(() => {
+        if (!path) {
+            setDisplayableMapPoints([])
+            return
+        }
+
         // Set all displayable vertices
         setDisplayableMapPoints(
             path.filter((mapPoint) => isMapPointDisplayable(mapPoint))
@@ -78 +57 @@
             ]
             edges.push(
                 <TextPath
-                    // Somehow this refuses to work so let it rerender everything ...
                     key={`${activeMapPoints[i].id}-${
                         activeMapPoints[i + 1].id
                     }`}
@@ -87 +65 @@
                         [end.latitude, end.longitude],
                     ]}
                     text="►"
-                    // text=" > > > > "
                     attributes={{
                         'font-size': 19,
-                        // Set to primaryPathColor if primary index in the tracking tool is equal to this index
-                        fill:
-                            primaryPathIdx === idx
-                                ? primaryPathColor
-                                : secondaryPathColor,
+                        fill: pathColor,
                     }}
-                    onClick={() => dispatch(setPrimaryIdx(idx))}
                     repeat
                     center
                     weight={0}
@@ -104 +76 @@
             )
         }
         setEdges(edges)
-    }, [dispatch, displayableMapPoints, idx, primaryPathIdx])
+    }, [dispatch, displayableMapPoints])
 
     // List of vertices to display
     const [vertices, setVertices] = useState<JSX.Element[]>([])
@@ -121 +93 @@
                     mapPoint={item}
                     updatePositionCallbackFn={(position: LatLngTuple) => {
                         dispatch(
-                            updateMapMarkerWithId({
-                                item: {
-                                    ...item,
-                                    catalogItem: {
-                                        ...item.catalogItem,
-                                        latitude: position[0],
-                                        longitude: position[1],
-                                    },
+                            updateMapMarker({
+                                ...item,
+                                catalogItem: {
+                                    ...item.catalogItem,
+                                    latitude: position[0],
+                                    longitude: position[1],
                                 },
-                                id: item.id,
                             })
                         )
                     }}
@@ -161 +130 @@
                                                     dispatch(
                                                         updateMapMarker({
                                                             ...item,
-                                                            addToPath: !item.addToPath,
+                                                            addToPath:
+                                                                !item.addToPath,
                                                         })
                                                     )
                                                 }}
@@ -180 +150 @@
                 </MapMarker>
             ))
         )
-    }, [dispatch, displayableMapPoints, idx])
+    }, [dispatch, displayableMapPoints])
 
     return (
         <Fragment>

frontend/src/features/TrackingTool/Map/geoJsonMapping.ts

@@ +1 @@
+import { isMapPointDisplayable, MapPoint, MapPointType, PathVariant } from '../trackingToolUtils'
+import * as yup from 'yup'
+import generateUuid from '../../../utils/id/uuidGenerator'
+
+export const exportAsGeoJsonString = (path: PathVariant) => JSON.stringify({
+    type: 'FeatureCollection',
+    features: path.filter(item => item.addToPath && isMapPointDisplayable(item)).map((item) => {
+        const catalogItem = item.catalogItem
+        return {
+            type: 'Feature',
+            properties: {
+                catalogItem: {
+                    id: catalogItem.id,
+                    name: catalogItem.name,
+                    allNames: catalogItem.allNames,
+                    description: catalogItem.description,
+                    latitude: catalogItem.latitude,
+                    longitude: catalogItem.longitude,
+                },
+                idx: item.idx,
+                displayable: isMapPointDisplayable(item),
+            },
+            geometry: {
+                type: 'Point',
+                coordinates: [catalogItem.longitude, catalogItem.latitude],
+            },
+        }
+    }),
+})
+
+const catalogItemValidationSchema = yup.object({
+    id: yup.string().optional(),
+    name: yup.string().optional(),
+    allNames: yup.array().of(yup.string()).optional(),
+    description: yup.string().optional(),
+    latitude: yup.number().required(),
+    longitude: yup.number().required(),
+})
+
+/**
+ * Parses a GeoJson string and returns a list of MapPoints
+ * @param geoJson loaded file
+ * @returns 
+ */
+export const parseGeoJsonToPathVariant = (geoJson: string) => {
+    const parsed = JSON.parse(geoJson)
+    if (parsed.type !== 'FeatureCollection') {
+        throw new Error('Invalid GeoJson')
+    }
+    const features = parsed.features
+    if (!features) {
+        throw new Error('Invalid GeoJson provided')
+    }
+    const path: PathVariant = features.map((feature: any) => {
+        const catalogItemDto = feature.properties.catalogItem
+
+        if (!catalogItemDto) {
+            throw new Error('GeoJson file does not have a valid structure')
+        }
+        // validate catalog item
+        const catalogItem = catalogItemValidationSchema.validateSync(catalogItemDto)
+
+        return {
+            id: generateUuid(),
+            idx: feature.properties.idx,
+            addToPath: true,
+            catalogItem: {
+                id: catalogItem.id,
+                name: catalogItem.name,
+                description: catalogItem.description,
+                latitude: catalogItem.latitude,
+                longitude: catalogItem.longitude,
+            },
+            type: MapPointType.GeoJson,
+        } as MapPoint
+    })
+    return path
+}
+

frontend/src/features/TrackingTool/Map/mapUtils.ts

@@ +1 @@
+import { CatalogItemDto, PathDto } from '../../../swagger/data-contracts'
+import generateUuid from '../../../utils/id/uuidGenerator'
+import { MapPoint, MapPointType, PathVariant } from '../trackingToolUtils'
+
+
+/**
+ * Cartesian product of two arrays
+ * @param sets
+ * @returns
+ */
+const cartesianProduct = (sets: CatalogItemDto[][]): CatalogItemDto[][] =>
+    sets.reduce<CatalogItemDto[][]>(
+        (results, ids) =>
+            results
+                .map((result) => ids.map((id) => [...result, id]))
+                .reduce((nested, result) => [...nested, ...result]),
+        [[]]
+    )
+
+/**
+ * Builds a list of all possible path variants from pathDto
+ * @param pathDto
+ * @returns
+ */
+export const buildPathVariants = (pathDto: PathDto, mapPointType: MapPointType = MapPointType.LocalCatalog): PathVariant[] => {
+    if (!pathDto.foundCatalogItems) {
+        return []
+    }
+
+    return (
+        pathDto.foundCatalogItems.length === 1
+            ? pathDto.foundCatalogItems
+            : cartesianProduct(pathDto.foundCatalogItems)
+    ).map((variant, _) =>
+        variant.map(
+            (catalogItem, idx) => (
+                {
+                    id: generateUuid(),
+                    idx,
+                    addToPath: !!catalogItem.latitude && !!catalogItem.longitude,
+                    catalogItem,
+                    type: mapPointType,
+                } as MapPoint)
+        )
+    )
+}
+
+export default buildPathVariants

frontend/src/features/TrackingTool/Map/pathUtils.ts

@@ -1 @@
-import { CatalogItemDto, PathDto } from '../../../swagger/data-contracts'
-import generateUuid from '../../../utils/id/uuidGenerator'
-import { MapPoint, MapPointType, PathVariant } from '../trackingToolUtils'
-
-
-/**
- * Cartesian product of two arrays
- * @param sets
- * @returns
- */
-const cartesianProduct = (sets: CatalogItemDto[][]): CatalogItemDto[][] =>
-    sets.reduce<CatalogItemDto[][]>(
-        (results, ids) =>
-            results
-                .map((result) => ids.map((id) => [...result, id]))
-                .reduce((nested, result) => [...nested, ...result]),
-        [[]]
-    )
-
-/**
- * Builds a list of all possible path variants from pathDto
- * @param pathDto
- * @returns
- */
-export const buildPathVariants = (pathDto: PathDto, mapPointType: MapPointType = MapPointType.LocalCatalog): PathVariant[] => {
-    if (!pathDto.foundCatalogItems) {
-        return []
-    }
-
-    return (
-        pathDto.foundCatalogItems.length === 1
-            ? pathDto.foundCatalogItems
-            : cartesianProduct(pathDto.foundCatalogItems)
-    ).map((variant, _) =>
-        variant.map(
-            (catalogItem, idx) => (
-                {
-                    id: generateUuid(),
-                    idx,
-                    addToPath: !!catalogItem.latitude && !!catalogItem.longitude,
-                    catalogItem,
-                    type: mapPointType,
-                } as MapPoint)
-        )
-    )
-}
-
-export default buildPathVariants

frontend/src/features/TrackingTool/MapPointDraggableList/DragDropCtxWrapper.tsx

@@ -1 @@
-import { memo } from 'react'
-import {
-    DragDropContext,
-    Droppable,
-    OnDragEndResponder,
-} from 'react-beautiful-dnd'
-import { MapPoint } from '../trackingToolUtils'
-import MapPointDraggableListItem from './MapPointDraggableListItem'
-
-export interface DraggableListProps {
-    items: MapPoint[]
-    onDragEnd: OnDragEndResponder
-}
-
-window.addEventListener('error', (e) => {
-    if (
-        e.message ===
-            'ResizeObserver loop completed with undelivered notifications.' ||
-        e.message === 'ResizeObserver loop limit exceeded'
-    ) {
-        e.stopImmediatePropagation()
-    }
-})
-
-const DragDropCtxWrapper = memo(({ items, onDragEnd }: DraggableListProps) => {
-    return (
-        <DragDropContext onDragEnd={onDragEnd}>
-            <Droppable droppableId="droppable-list">
-                {(provided) => (
-                    <div ref={provided.innerRef} {...provided.droppableProps}>
-                        {items.map((item, index) => (
-                            <MapPointDraggableListItem
-                                list={items}
-                                idx={index}
-                                key={item.id}
-                            />
-                        ))}
-                        {provided.placeholder}
-                    </div>
-                )}
-            </Droppable>
-        </DragDropContext>
-    )
-})
-
-export default DragDropCtxWrapper

frontend/src/features/TrackingTool/MapPointDraggableList/MapPointDraggableList.tsx

@@ -1 @@
-import { Paper } from '@mui/material'
-import { useEffect, useState, useCallback } from 'react'
-import { DropResult } from 'react-beautiful-dnd'
-import { useDispatch, useSelector } from 'react-redux'
-import { RootState } from '../../redux/store'
-import { moveMarkerToDestination } from '../trackingToolSlice'
-import { PathVariant } from '../trackingToolUtils'
-import DragDropCtxWrapper from './DragDropCtxWrapper'
-
-const MapPointDraggableList = () => {
-    const dispatch = useDispatch()
-
-    // List of all paths
-    const paths = useSelector(
-        (state: RootState) => state.trackingTool.pathVariants
-    )
-
-    // Primary path index - i.e. the selected path
-    const primaryPathIdx = useSelector(
-        (state: RootState) => state.trackingTool.primaryPathIdx
-    )
-
-    // Selected path as local state
-    const [path, setPath] = useState<PathVariant | undefined>()
-
-    // Set localstate path whenever it changes in the store
-    useEffect(() => {
-        if (!paths || paths.length < primaryPathIdx) {
-            setPath(undefined)
-            return
-        }
-
-        setPath(paths[primaryPathIdx])
-    }, [paths, primaryPathIdx])
-
-    const onDragEnd = useCallback(({ destination, source }: DropResult) => {
-        if (!destination || !source || destination.index === source.index) {
-            return
-        }
-
-        dispatch(
-            moveMarkerToDestination({
-                source: source.index,
-                destination: destination.index,
-            })
-        )
-    }, [dispatch])
-
-    return (
-        <Paper variant="outlined">
-            <DragDropCtxWrapper items={path ?? []} onDragEnd={onDragEnd} />
-        </Paper>
-    )
-}
-
-export default MapPointDraggableList

frontend/src/features/TrackingTool/MapPointDraggableList/MapPointDraggableListItem.tsx

@@ -1 @@
-import {
-    IconButton,
-    ListItem,
-    ListItemAvatar,
-    ListItemText,
-    Typography,
-} from '@mui/material'
-import { Draggable } from 'react-beautiful-dnd'
-import {
-    getMapPointSemanticColor,
-    MapPointType,
-    PathVariant,
-} from '../trackingToolUtils'
-import { CatalogItemDto } from '../../../swagger/data-contracts'
-import { useDispatch } from 'react-redux'
-import { removeMapMarker, updateMapMarker } from '../trackingToolSlice'
-import { useMemo } from 'react'
-import DragHandleIcon from '@mui/icons-material/DragHandle'
-import VisibilityIcon from '@mui/icons-material/Visibility'
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'
-import AddRoadIcon from '@mui/icons-material/AddRoad'
-import RemoveRoadIcon from '@mui/icons-material/RemoveRoad'
-import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
-
-export type DraggableListItemProps = {
-    list: PathVariant
-    idx: number
-}
-
-const getFormattedLocationOrEmpty = (catalogItem: CatalogItemDto) => {
-    if (!catalogItem || !catalogItem.latitude || !catalogItem.longitude) {
-        return 'Location unavailable'
-    }
-
-    return `${catalogItem.latitude.toFixed(
-        3
-    )}°, ${catalogItem.longitude.toFixed(3)}°`
-}
-
-const MapPointDraggableListItem = ({ list, idx }: DraggableListItemProps) => {
-    const item = list[idx]
-    const dispatch = useDispatch()
-
-    // useMemo to prevent unnecessary re-renders which will make the list jumpy
-    return useMemo(() => {
-        const toggleAddToPath = () => {
-            dispatch(
-                // updateMapMarkerWithId({
-                //     item: {
-                //         ...item,
-                //         addToPath: !item?.addToPath,
-                //     } as MapPoint,
-                //     id: item.id,
-                // })
-                updateMapMarker({
-                    ...item,
-                    addToPath: !item?.addToPath,
-                    idx,
-                })
-            )
-        }
-
-        const toggleHidden = () => {
-            dispatch(
-                // updateMapMarkerWithId({
-                //     item: {
-                //         ...item,
-                //         hidden: !item?.hidden,
-                //     } as MapPoint,
-                //     id: item.id,
-                // })
-                updateMapMarker({
-                    ...item,
-                    hidden: !item?.hidden,
-                    idx,
-                })
-            )
-        }
-
-        const deleteItem = () => {
-            dispatch(
-                removeMapMarker({
-                    ...item,
-                    idx,
-                })
-            )
-        }
-
-        return (
-            item && (
-                <Draggable
-                    key={`${item.id}`}
-                    draggableId={`${item.id}`}
-                    index={idx}
-                >
-                    {(provided, snapshot) => (
-                        <ListItem
-                            ref={provided.innerRef}
-                            {...provided.draggableProps}
-                            {...provided.dragHandleProps}
-                        >
-                            <ListItemAvatar>
-                                <DragHandleIcon />
-                            </ListItemAvatar>
-                            <ListItemText
-                                primary={
-                                    <Typography
-                                        style={{
-                                            color: getMapPointSemanticColor(
-                                                item
-                                            ),
-                                        }}
-                                    >
-                                        {item.catalogItem.name ??
-                                            'Unknown name'}
-                                    </Typography>
-                                }
-                                secondary={getFormattedLocationOrEmpty(
-                                    item.catalogItem
-                                )}
-                            />
-                            {item.type !== MapPointType.LocalCatalog && (
-                                <IconButton sx={{ mr: 1 }} onClick={deleteItem}>
-                                    <DeleteForeverIcon />
-                                </IconButton>
-                            )}
-                            <IconButton sx={{ mr: 1 }} onClick={toggleHidden}>
-                                {item.hidden ? (
-                                    <VisibilityOffIcon />
-                                ) : (
-                                    <VisibilityIcon />
-                                )}
-                            </IconButton>
-                            <IconButton
-                                sx={{ mr: 1 }}
-                                onClick={toggleAddToPath}
-                            >
-                                {item.addToPath ? (
-                                    <AddRoadIcon />
-                                ) : (
-                                    <RemoveRoadIcon />
-                                )}
-                            </IconButton>
-                            {/* <FormControlLabel
-                            control={
-                                <Checkbox
-                                    checked={item.addToPath}
-                                    onChange={toggleAddToPath}
-                                />
-                            }
-                            label="Add to path"
-                        /> */}
-                        </ListItem>
-                    )}
-                </Draggable>
-            )
-        )
-    }, [item, idx, dispatch])
-}
-
-export default MapPointDraggableListItem

frontend/src/features/TrackingTool/ProcessedText/ProcessedTextDisplay.tsx

@@ -1 @@
-import { Card, CardContent, Stack, Typography } from '@mui/material'
-import { Fragment } from 'react'
-import { useSelector } from 'react-redux'
-import { formatHtmlStringToReactDom } from '../../../utils/formatting/HtmlUtils'
-import { RootState } from '../../redux/store'
-
-const ProcessedTextDisplay = () => {
-    const pathDto = useSelector(
-        (state: RootState) => state.trackingTool.pathDto
-    )
-
-    return (
-        <Fragment>
-            {pathDto && (
-                <Card variant="outlined" sx={{maxHeight: '50vh'}}>
-                    <CardContent>
-                        <Stack direction="column">
-                            <Typography
-                                variant="h5"
-                                sx={{ mb: 1 }}
-                                fontWeight="600"
-                            >
-                                Processed Text
-                            </Typography>
-                            <Typography variant="body2">
-                                {formatHtmlStringToReactDom(pathDto.text ?? '')}
-                            </Typography>
-                        </Stack>
-                    </CardContent>
-                </Card>
-            )}
-        </Fragment>
-    )
-}
-
-export default ProcessedTextDisplay

frontend/src/features/TrackingTool/ProcessedTextCard.tsx

@@ -1 @@
-import { PathDto } from "../../swagger/data-contracts"
-
-export interface ProcessedtextCardProps {
-    pathDto?: PathDto
-    
-}
-
-const ProcessedTextCard = () => {
-
-}
-
-export default ProcessedTextCard

frontend/src/features/TrackingTool/TrackingTool.tsx

@@ -1 @@
-import {
-    Button,
-    Card,
-    CardContent,
-    Grid,
-    Stack,
-    ThemeProvider,
-    Typography,
-} from '@mui/material'
-import { Fragment, useEffect, useRef } from 'react'