commit 14588cb653e6b7358e0e641cc2b8d45dc27b5cf8
Author: Vaclav Honzik <vaclavhonzik98@gmail.com>
Date:   Sat May 21 14:23:07 2022 +0200

    fixed keys and indices
    
    re #9741

diff --git a/frontend/src/features/Reusables/SingleFileSelectionForm.tsx b/frontend/src/features/Reusables/SingleFileSelectionForm.tsx
index 747ec69..43e690e 100644
--- a/frontend/src/features/Reusables/SingleFileSelectionForm.tsx
+++ b/frontend/src/features/Reusables/SingleFileSelectionForm.tsx
@@ -9,11 +9,12 @@ export interface SingleFileSelectionFormProps {
     onFileSelected: (event: any) => void
     formik: any
     onClearSelectedFile: () => void
+    loading?: boolean
 }
 
 const SingleFileSelectionForm: FunctionComponent<
     SingleFileSelectionFormProps
-> = ({ filename, onFileSelected, formik, onClearSelectedFile }) => {
+> = ({ filename, onFileSelected, formik, onClearSelectedFile, loading }) => {
     return (
         <form onSubmit={formik.handleSubmit}>
             {!filename ? (
@@ -76,6 +77,7 @@ const SingleFileSelectionForm: FunctionComponent<
                             type="submit"
                             variant="contained"
                             startIcon={<SendIcon />}
+                            disabled={loading}
                         >
                             Submit
                         </Button>
diff --git a/frontend/src/features/TrackingTool/Controls/DragDropCtxWrapper.tsx b/frontend/src/features/TrackingTool/Controls/DragDropCtxWrapper.tsx
index 47cf397..bed75af 100644
--- a/frontend/src/features/TrackingTool/Controls/DragDropCtxWrapper.tsx
+++ b/frontend/src/features/TrackingTool/Controls/DragDropCtxWrapper.tsx
@@ -32,7 +32,7 @@ const DragDropCtxWrapper = memo(({ items, onDragEnd }: DraggableListProps) => {
                             <MapPointDraggableListItem
                                 list={items}
                                 idx={index}
-                                key={item.id}
+                                key={item.reactId}
                             />
                         ))}
                         {provided.placeholder}
diff --git a/frontend/src/features/TrackingTool/Controls/MapPointDraggableList.tsx b/frontend/src/features/TrackingTool/Controls/MapPointDraggableList.tsx
index a57f23a..9027793 100644
--- a/frontend/src/features/TrackingTool/Controls/MapPointDraggableList.tsx
+++ b/frontend/src/features/TrackingTool/Controls/MapPointDraggableList.tsx
@@ -1,9 +1,9 @@
 import { Paper } from '@mui/material'
-import { useCallback } from 'react'
+import { Fragment, 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 { changeMarkerIdx } from '../trackingToolSlice'
 import DragDropCtxWrapper from './DragDropCtxWrapper'
 
 const MapPointDraggableList = () => {
@@ -18,7 +18,7 @@ const MapPointDraggableList = () => {
             }
 
             dispatch(
-                moveMarkerToDestination({
+                changeMarkerIdx({
                     source: source.index,
                     destination: destination.index,
                 })
@@ -28,9 +28,16 @@ const MapPointDraggableList = () => {
     )
 
     return (
-        <Paper variant="outlined">
-            <DragDropCtxWrapper items={path ?? []} onDragEnd={onDragEnd} />
-        </Paper>
+        <Fragment>
+            {path && (
+                <Paper variant="outlined">
+                    <DragDropCtxWrapper
+                        items={path ?? []}
+                        onDragEnd={onDragEnd}
+                    />
+                </Paper>
+            )}
+        </Fragment>
     )
 }
 
diff --git a/frontend/src/features/TrackingTool/Controls/MapPointDraggableListItem.tsx b/frontend/src/features/TrackingTool/Controls/MapPointDraggableListItem.tsx
index 275eeec..a4275fb 100644
--- a/frontend/src/features/TrackingTool/Controls/MapPointDraggableListItem.tsx
+++ b/frontend/src/features/TrackingTool/Controls/MapPointDraggableListItem.tsx
@@ -8,12 +8,17 @@ import {
 import { Draggable } from 'react-beautiful-dnd'
 import {
     getMapPointSemanticColor,
+    isMapPointDisplayable,
     MapPointType,
     PathVariant,
 } from '../trackingToolUtils'
 import { CatalogItemDto } from '../../../swagger/data-contracts'
 import { useDispatch } from 'react-redux'
-import { removeMapMarker, updateMapMarker } from '../trackingToolSlice'
+import {
+    removeMapMarker,
+    updateMapPoint,
+    updateMapPointAtIndex,
+} from '../trackingToolSlice'
 import { useMemo } from 'react'
 import DragHandleIcon from '@mui/icons-material/DragHandle'
 import VisibilityIcon from '@mui/icons-material/Visibility'
@@ -27,6 +32,42 @@ export type DraggableListItemProps = {
     idx: number
 }
 
+// function Item({ provided, item, isDragging }) {
+//     return (
+//       <div style={{ paddingBottom: '8px' }}>
+//         <div
+//           {...provided.draggableProps}
+//           {...provided.dragHandleProps}
+//           ref={provided.innerRef}
+//           style={provided.draggableProps.style}
+//           className={`item ${isDragging ? 'is-dragging' : ''}`}
+//         >
+//           {item.text}
+//         </div>
+//       </div>
+//     )
+//   }
+
+//   const HeightPreservingItem = ({ children, ...props }) => {
+//     const [size, setSize] = useState(0)
+//     const knownSize = props['data-known-size']
+//     useEffect(() => {
+//       setSize((prevSize) => {
+//         return knownSize == 0 ? prevSize : knownSize
+//       })
+//     }, [knownSize])
+//     return (
+//       <div
+//         {...props}
+//         className="height-preserving-container"
+//         // check styling in the style tag below
+//         style={{ '--child-height': `${size}px`, }}
+//       >
+//         {children}
+//       </div>
+//     )
+//   }
+
 const getFormattedLocationOrEmpty = (catalogItem: CatalogItemDto) => {
     if (!catalogItem || !catalogItem.latitude || !catalogItem.longitude) {
         return 'Location unavailable'
@@ -52,7 +93,7 @@ const MapPointDraggableListItem = ({ list, idx }: DraggableListItemProps) => {
                 //     } as MapPoint,
                 //     id: item.id,
                 // })
-                updateMapMarker({
+                updateMapPointAtIndex({
                     ...item,
                     addToPath: !item?.addToPath,
                     idx,
@@ -69,7 +110,7 @@ const MapPointDraggableListItem = ({ list, idx }: DraggableListItemProps) => {
                 //     } as MapPoint,
                 //     id: item.id,
                 // })
-                updateMapMarker({
+                updateMapPoint({
                     ...item,
                     hidden: !item?.hidden,
                     idx,
@@ -89,8 +130,8 @@ const MapPointDraggableListItem = ({ list, idx }: DraggableListItemProps) => {
         return (
             item && (
                 <Draggable
-                    key={`${item.id}`}
-                    draggableId={`${item.id}`}
+                    key={`${item.reactId}`}
+                    draggableId={`${item.reactId}`}
                     index={idx}
                 >
                     {(provided, snapshot) => (
@@ -124,13 +165,18 @@ const MapPointDraggableListItem = ({ list, idx }: DraggableListItemProps) => {
                                     <DeleteForeverIcon />
                                 </IconButton>
                             )}
-                            <IconButton sx={{ mr: 1 }} onClick={toggleHidden}>
-                                {item.hidden ? (
-                                    <VisibilityOffIcon />
-                                ) : (
-                                    <VisibilityIcon />
-                                )}
-                            </IconButton>
+                            {isMapPointDisplayable(item) ? (
+                                <IconButton
+                                    sx={{ mr: 1 }}
+                                    onClick={toggleHidden}
+                                >
+                                    {item.hidden ? (
+                                        <VisibilityOffIcon />
+                                    ) : (
+                                        <VisibilityIcon />
+                                    )}
+                                </IconButton>
+                            ) : null}
                             <IconButton
                                 sx={{ mr: 1 }}
                                 onClick={toggleAddToPath}
diff --git a/frontend/src/features/TrackingTool/Controls/ProcessedTextDisplay.tsx b/frontend/src/features/TrackingTool/Controls/ProcessedTextDisplay.tsx
index cf3b813..a5341ad 100644
--- a/frontend/src/features/TrackingTool/Controls/ProcessedTextDisplay.tsx
+++ b/frontend/src/features/TrackingTool/Controls/ProcessedTextDisplay.tsx
@@ -12,7 +12,7 @@ const ProcessedTextDisplay = () => {
     return (
         <Fragment>
             {pathDto && (
-                <Card variant="outlined" sx={{ maxHeight: '50vh' }}>
+                <Card variant="outlined" sx={{ maxHeight: '50vh', overflow: 'auto' }}>
                     <CardContent>
                         <Stack direction="column">
                             <Typography
diff --git a/frontend/src/features/TrackingTool/Map/Map.tsx b/frontend/src/features/TrackingTool/Map/Map.tsx
index f323b24..e9b4ccd 100644
--- a/frontend/src/features/TrackingTool/Map/Map.tsx
+++ b/frontend/src/features/TrackingTool/Map/Map.tsx
@@ -7,8 +7,7 @@ import { RootState } from '../../redux/store'
 import { buildTheme } from '../../Theme/ThemeWrapper'
 import RightClickPopupMenu from '../Import/ImportContextMenu'
 import MapPath from './MapPath'
-import L, { Map as LeafletMap } from 'leaflet'
-import {  } from 'leaflet.fullscreen'
+import { Map as LeafletMap } from 'leaflet'
 
 const mapTheme = buildTheme('light')
 
diff --git a/frontend/src/features/TrackingTool/Map/MapPath.tsx b/frontend/src/features/TrackingTool/Map/MapPath.tsx
index 62eaca8..33e34c1 100644
--- a/frontend/src/features/TrackingTool/Map/MapPath.tsx
+++ b/frontend/src/features/TrackingTool/Map/MapPath.tsx
@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '../../redux/store'
 import { MapPoint, isMapPointDisplayable } from '../trackingToolUtils'
 import TextPath from 'react-leaflet-textpath'
-import { updateMapMarker } from '../trackingToolSlice'
+import { updateMapPoint } from '../trackingToolSlice'
 import MapMarker from './MapMarker'
 import { LatLngTuple } from 'leaflet'
 import { Popup, Tooltip } from 'react-leaflet'
@@ -14,6 +14,8 @@ import { DialogCatalogItemDetail as CatalogItemDetailDialog } from '../../Catalo
 type EdgeElement = any
 const MapPath = () => {
     const dispatch = useDispatch()
+
+    // Displayed path contains all map points
     const path = useSelector(
         (state: RootState) => state.trackingTool.displayedPath
     )
@@ -47,26 +49,34 @@ const MapPath = () => {
             setEdges([])
             return
         }
+        console.log('rerender')
 
-        // Build edges
+        // Keep track of already built edges so we do not render excessive amount of them
+        // We can use a simple hack where we concatenate id of both and check if it is already in the set
+        const existingPaths = new Set<string>()
         const edges = []
         for (let i = 0; i < activeMapPoints.length - 1; i += 1) {
+            const edgeId = `${activeMapPoints[i].id}${
+                activeMapPoints[i + 1].id
+            }`
+            if (existingPaths.has(edgeId)) {
+                continue
+            }
+            existingPaths.add(edgeId)
             const [start, end] = [
                 activeMapPoints[i].catalogItem,
                 activeMapPoints[i + 1].catalogItem,
             ]
             edges.push(
                 <TextPath
-                    key={`${activeMapPoints[i].id}-${
-                        activeMapPoints[i + 1].id
-                    }`}
+                    key={edgeId}
                     positions={[
                         [start.latitude, start.longitude],
                         [end.latitude, end.longitude],
                     ]}
                     text="►"
                     attributes={{
-                        'font-size': 19,
+                        'font-size': 17,
                         fill: pathColor,
                     }}
                     repeat
@@ -82,73 +92,82 @@ const MapPath = () => {
     const [vertices, setVertices] = useState<JSX.Element[]>([])
     useEffect(() => {
         // Iterate over all displayable map points and map them to MapMarker
+        const uniqueMapPoints = new Set<string>()
         setVertices(
-            displayableMapPoints.map((item) => (
-                <MapMarker
-                    key={item.id}
-                    position={[
-                        item.catalogItem.latitude as number,
-                        item.catalogItem.longitude as number,
-                    ]}
-                    mapPoint={item}
-                    updatePositionCallbackFn={(position: LatLngTuple) => {
-                        dispatch(
-                            updateMapMarker({
-                                ...item,
-                                catalogItem: {
-                                    ...item.catalogItem,
-                                    latitude: position[0],
-                                    longitude: position[1],
-                                },
-                            })
-                        )
-                    }}
-                >
-                    <Fragment>
-                        <Tooltip>
-                            {/* <Typography> */}
-                            {item.catalogItem.name ?? ''}
-                            {/* </Typography> */}
-                        </Tooltip>
-                        <Popup>
-                            <Fragment>
-                                <Stack direction="column" sx={{ m: 0 }}>
-                                    <Typography
-                                        variant="h6"
-                                        fontWeight="bold"
-                                        fontSize={16}
-                                    >
-                                        {formatHtmlStringToReactDom(
-                                            item.catalogItem.name as string
-                                        )}
-                                    </Typography>
-                                    <FormControlLabel
-                                        control={
-                                            <Checkbox
-                                                checked={item.addToPath}
-                                                onChange={() => {
-                                                    dispatch(
-                                                        updateMapMarker({
-                                                            ...item,
-                                                            addToPath:
-                                                                !item.addToPath,
-                                                        })
-                                                    )
-                                                }}
-                                            />
-                                        }
-                                        labelPlacement="end"
-                                        label="Active"
-                                    />
-                                    <CatalogItemDetailDialog
-                                        itemId={item.catalogItem.id ?? ''}
-                                    />
-                                </Stack>
-                            </Fragment>
-                        </Popup>
-                    </Fragment>
-                </MapMarker>
-            ))
+            displayableMapPoints
+                .filter((mapPoint) => {
+                    if (uniqueMapPoints.has(mapPoint.id)) {
+                        return false
+                    }
+                    uniqueMapPoints.add(mapPoint.id)
+                    return true
+                })
+                .map((item) => (
+                    <MapMarker
+                        key={item.id}
+                        position={[
+                            item.catalogItem.latitude as number,
+                            item.catalogItem.longitude as number,
+                        ]}
+                        mapPoint={item}
+                        updatePositionCallbackFn={(position: LatLngTuple) => {
+                            dispatch(
+                                updateMapPoint({
+                                    ...item,
+                                    catalogItem: {
+                                        ...item.catalogItem,
+                                        latitude: position[0],
+                                        longitude: position[1],
+                                    },
+                                })
+                            )
+                        }}
+                    >
+                        <Fragment>
+                            <Tooltip>
+                                {/* <Typography> */}
+                                {item.catalogItem.name ?? ''}
+                                {/* </Typography> */}
+                            </Tooltip>
+                            <Popup>
+                                <Fragment>
+                                    <Stack direction="column" sx={{ m: 0 }}>
+                                        <Typography
+                                            variant="h6"
+                                            fontWeight="bold"
+                                            fontSize={16}
+                                        >
+                                            {formatHtmlStringToReactDom(
+                                                item.catalogItem.name as string
+                                            )}
+                                        </Typography>
+                                        <FormControlLabel
+                                            control={
+                                                <Checkbox
+                                                    checked={item.addToPath}
+                                                    onChange={() => {
+                                                        dispatch(
+                                                            updateMapPoint({
+                                                                ...item,
+                                                                addToPath:
+                                                                    !item.addToPath,
+                                                            })
+                                                        )
+                                                    }}
+                                                />
+                                            }
+                                            labelPlacement="end"
+                                            label="Active"
+                                        />
+                                        <CatalogItemDetailDialog
+                                            itemId={item.catalogItem.id ?? ''}
+                                        />
+                                    </Stack>
+                                </Fragment>
+                            </Popup>
+                        </Fragment>
+                    </MapMarker>
+                ))
         )
     }, [dispatch, displayableMapPoints])
 
diff --git a/frontend/src/features/TrackingTool/Map/mapUtils.ts b/frontend/src/features/TrackingTool/Map/mapUtils.ts
index ff5617c..aa7f172 100644
--- a/frontend/src/features/TrackingTool/Map/mapUtils.ts
+++ b/frontend/src/features/TrackingTool/Map/mapUtils.ts
@@ -35,8 +35,9 @@ export const buildPathVariants = (pathDto: PathDto, mapPointType: MapPointType =
         variant.map(
             (catalogItem, idx) => (
                 {
-                    id: generateUuid(),
+                    id: '',
                     idx,
+                    reactId: generateUuid(),
                     addToPath: !!catalogItem.latitude && !!catalogItem.longitude,
                     catalogItem,
                     type: mapPointType,
diff --git a/frontend/src/features/TrackingTool/TrackingTool.tsx b/frontend/src/features/TrackingTool/TrackingTool.tsx
index 432581a..5ff7df3 100644
--- a/frontend/src/features/TrackingTool/TrackingTool.tsx
+++ b/frontend/src/features/TrackingTool/TrackingTool.tsx
@@ -128,7 +128,7 @@ const TrackingTool = () => {
                 </Grid>
                 <Grid container sx={{ mt: 1, mb: 20 }} spacing={1}>
                     <Grid item xs={12} md={6}>
-                        {/* <MapPointDraggableList /> */}
+                        <MapPointDraggableList />
                     </Grid>
                     <Grid item xs={12} md={6}>
                         <ProcessedTextDisplay />
diff --git a/frontend/src/features/TrackingTool/Upload/FileUpload.tsx b/frontend/src/features/TrackingTool/Upload/FileUpload.tsx
index a80b961..fe5084a 100644
--- a/frontend/src/features/TrackingTool/Upload/FileUpload.tsx
+++ b/frontend/src/features/TrackingTool/Upload/FileUpload.tsx
@@ -1,21 +1,16 @@
 import {
-    Button,
     DialogContent,
     DialogTitle,
-    Link,
-    Stack,
-    Typography,
 } from '@mui/material'
 import { useFormik } from 'formik'
-import { Fragment, useState } from 'react'
+import { useState } from 'react'
 import * as yup from 'yup'
-import axiosInstance from '../../../api/api'
 import ButtonOpenableDialog from '../../Reusables/ButtonOpenableDialog'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { sendTextForProcessing } from '../trackingToolThunks'
 import SingleFileSelectionForm from '../../Reusables/SingleFileSelectionForm'
 import AttachFileIcon from '@mui/icons-material/AttachFile'
-import TextSnippetIcon from '@mui/icons-material/TextSnippet'
+import { RootState } from '../../redux/store'
 
 interface UploadValues {
     file?: File
@@ -34,6 +29,10 @@ const FileUpload = () => {
         file: yup.mixed().required('File is required'),
     })
 
+    const loading = useSelector(
+        (state: RootState) => state.trackingTool.isLoading
+    )
+
     const formik = useFormik({
         initialValues,
         validationSchema,
@@ -88,6 +87,7 @@ const FileUpload = () => {
                     onClearSelectedFile={onClearSelectedFile}
                     filename={filename}
                     formik={formik}
+                    loading={loading}
                 />
             </DialogContent>
         </ButtonOpenableDialog>
diff --git a/frontend/src/features/TrackingTool/trackingToolSlice.ts b/frontend/src/features/TrackingTool/trackingToolSlice.ts
index 98d35d1..4209be0 100644
--- a/frontend/src/features/TrackingTool/trackingToolSlice.ts
+++ b/frontend/src/features/TrackingTool/trackingToolSlice.ts
@@ -1,10 +1,11 @@
 import { createSlice } from '@reduxjs/toolkit'
 import mapConfig from '../../config/mapConfig'
 import { PathDto } from '../../swagger/data-contracts'
+import generateUuid from '../../utils/id/uuidGenerator'
 import buildPathVariants from './Map/mapUtils'
 import TrackingToolState from './trackingToolState'
 import { sendTextForProcessing } from './trackingToolThunks'
-import { calculateMapCenter, MapPoint, PathVariant } from './trackingToolUtils'
+import { calculateMapCenter, MapPoint, PathVariant, setMapPointIds } from './trackingToolUtils'
 
 const initialState: TrackingToolState = {
     isLoading: false,
@@ -18,12 +19,14 @@ export const trackingToolSlice = createSlice({
     initialState,
     reducers: {
         consumeErr: (state: TrackingToolState) => ({ ...state, lastErr: undefined, }),
-        setSelectedPathIdx: (state: TrackingToolState, action: { payload: number }) => ({ ...state, selectedPathIdx: action.payload, }),
-        resetDialogApiCallSuccess: (state: TrackingToolState) => ({ ...state, dialogApiCallSuccess: false, }),
+        setSelectedPathIdx: (state: TrackingToolState, action: { payload: number }) =>
+            ({ ...state, selectedPathIdx: action.payload, }),
+        resetDialogApiCallSuccess: (state: TrackingToolState) =>
+            ({ ...state, dialogApiCallSuccess: false, }),
         // Updates currently displayed path
-        updateDisplayedPath: (state: TrackingToolState, action: { payload: PathVariant }) => ({ ...state, displayedPath: action.payload, }),
-        // Updates map marker
-        updateMapMarker: (state: TrackingToolState, action: { payload: MapPoint }) => {
+        updateDisplayedPath: (state: TrackingToolState, action: { payload: PathVariant }) =>
+            ({ ...state, displayedPath: action.payload, }),
+        updateMapPointAtIndex: (state: TrackingToolState, action: { payload: MapPoint }) => {
             const newPath = [...state.displayedPath ?? []]
             if (newPath.length <= action.payload.idx) {
                 return state // do nothing if there is no path
@@ -35,6 +38,14 @@ export const trackingToolSlice = createSlice({
                 displayedPath: newPath,
             }
         },
+        // Updates map marker
+        updateMapPoint: (state: TrackingToolState, action: { payload: MapPoint }) => {
+            const newPath = [...state.displayedPath ?? []]
+            return {
+                ...state,
+                displayedPath: newPath.map((point, _) => point.id === action.payload.id ? {...action.payload, idx: point.idx} : point)
+            }
+        },
         // Removes map marker from currently used path
         removeMapMarker: (state: TrackingToolState, action: { payload: { id: string, idx: number } }) => {
             const newPath = [...state.displayedPath ?? []]
@@ -47,8 +58,8 @@ export const trackingToolSlice = createSlice({
                 displayedPath: [...newPath.slice(0, action.payload.idx), ...newPath.slice(action.payload.idx + 1)],
             }
         },
-        // Moves map marker in the path array
-        moveMarkerToDestination: (state: TrackingToolState, action: { payload: { destination: number, source: number } }) => {
+        // Changes marker index
+        changeMarkerIdx: (state: TrackingToolState, action: { payload: { destination: number, source: number } }) => {
             const { destination, source } = action.payload
             const newPath = [...state.displayedPath ?? []]
             if (newPath.length <= source
@@ -74,7 +85,6 @@ export const trackingToolSlice = createSlice({
 
             const newPath = [...state.displayedPath ?? []]
             const existingIds = new Set(newPath.map(item => item.id ?? ''))
-
             const newItems: MapPoint[] = []
             jsonPath.forEach(item => {
                 if (!existingIds.has(item.id ?? '')) {
@@ -85,6 +95,9 @@ export const trackingToolSlice = createSlice({
             newItems.forEach(item => {
                 item.addToPath = !state.pathVariants || state.pathVariants.length === 0
                 item.idx = newPath.length
+                const uuid = generateUuid()
+                item.reactId = uuid
+                item.id = item.catalogItem.id ? item.catalogItem.id : uuid
                 newPath.push(item)
             })
 
@@ -106,7 +119,7 @@ export const trackingToolSlice = createSlice({
 
             // We will always have displayedPath defined if this function is called
             pathVariants.splice(previousIdx, 0, [...state.displayedPath ?? []])
-            const newPath = pathVariants.splice(newIdx, 1)[0]
+            const newPath = setMapPointIds(pathVariants.splice(newIdx, 1)[0])
             return {
                 ...state,
                 displayedPath: newPath,
@@ -114,62 +127,12 @@ export const trackingToolSlice = createSlice({
                 pathVariants,
             }
         },
-        moveToNextPathVariant: (state: TrackingToolState) => {
-            const currentPathIdx = state.displayedPathIdx
-            const pathVariants = [...state.pathVariants ?? []]
-
-            // Since we take out the selected path index the displayedPathIdx will serve as
-            // index of the next element
-            if (currentPathIdx >= pathVariants.length) {
-                return state // do nothing if the displayed path is also the last one
-            }
-
-            // Else get the next path variant
-            const newPath = [...pathVariants[currentPathIdx]]
-            const previousPath = [...state.displayedPath ?? []]
-
-            // And replace the displayed path with the new one
-            return {
-                ...state,
-                displayedPath: newPath,
-                displayedPathIdx: currentPathIdx + 1,
-                pathVariants: [
-                    ...pathVariants.slice(0, currentPathIdx),
-                    previousPath,
-                    ...pathVariants.slice(currentPathIdx + 1),
-                ]
-            }
-        },
-        moveToPreviousPathVariant: (state: TrackingToolState) => {
-            const currentPathIdx = state.displayedPathIdx
-            const pathVariants = [...state.pathVariants ?? []]
-
-            const previousPathIdx = currentPathIdx - 1
-            if (previousPathIdx < 0) {
-                return state // do nothing if the displayed path is the first one
-            }
-
-            // Else get the previous path variant
-            const newPath = [...pathVariants[previousPathIdx]]
-            const previousPath = [...state.displayedPath ?? []]
-
-            return {
-                ...state,
-                displayedPath: newPath,
-                displayedPathIdx: previousPathIdx,
-                pathVariants: [
-                    ...pathVariants.slice(0, previousPathIdx),
-                    previousPath,
-                    ...pathVariants.slice(previousPathIdx + 1),
-                ]
-            }
-        }
     },
     extraReducers: (builder) => {
         builder.addCase(sendTextForProcessing.fulfilled, (state, action) => {
             const pathDto: PathDto = action.payload
             const pathVariants = buildPathVariants(pathDto)
-            const selectedPath = pathVariants.length > 0 ? pathVariants[0] : undefined
+            const selectedPath = pathVariants.length > 0 ? setMapPointIds(pathVariants[0]) : undefined
             pathVariants.splice(0, 1) // remove the selected path so that we do not have to update it here
             if (!selectedPath) {
                 return {
@@ -220,12 +183,13 @@ export const {
     setSelectedPathIdx,
     resetDialogApiCallSuccess,
     updateDisplayedPath,
-    updateMapMarker,
+    updateMapPoint,
     removeMapMarker,
-    moveMarkerToDestination,
+    changeMarkerIdx,
     clear,
     mergeWithCurrentPath,
     setDisplayedPathIdx,
+    updateMapPointAtIndex
 } = trackingToolSlice.actions
 
 const trackingToolReducer = trackingToolSlice.reducer
diff --git a/frontend/src/features/TrackingTool/trackingToolUtils.ts b/frontend/src/features/TrackingTool/trackingToolUtils.ts
index e3bb10b..9065d3c 100644
--- a/frontend/src/features/TrackingTool/trackingToolUtils.ts
+++ b/frontend/src/features/TrackingTool/trackingToolUtils.ts
@@ -1,6 +1,7 @@
 
 import L, { LatLngTuple, PointExpression } from 'leaflet'
 import { CatalogItemDto } from '../../swagger/data-contracts'
+import generateUuid from '../../utils/id/uuidGenerator'
 
 // For more comprehensive code alias CatalogItemDto[] as path variant
 export type PathVariant = MapPoint[]
@@ -14,7 +15,8 @@ export enum MapPointType {
 
 // Represents a point on the map - wrapper for CatalogItemDto to make it easier to work with
 export interface MapPoint {
-    id: string // unique id for react
+    id: string // unique id to identify the point on the map
+    reactId: string // unique id to identify item in React - e.g. rendering in a list
     idx: number,
     addToPath: boolean, // whether to add the point to the path
     catalogItem: CatalogItemDto,
@@ -65,8 +67,8 @@ const mapMarkerSvgs = {
     [MapPointType.FromCoordinates]: createMapMarkerSvg('#21972D'),
 }
 
-const iconAnchor = [25, 25] as PointExpression
-const iconSize = [40, 40] as PointExpression
+const iconAnchor = [22, 22] as PointExpression
+const iconSize = [35, 35] as PointExpression
 
 const mapMarkers = {
     [MapPointType.LocalCatalog]: L.icon({
@@ -104,4 +106,11 @@ export const calculateMapCenter = (pathVariant: PathVariant): LatLngTuple | unde
             .map((item) => item.catalogItem.longitude ?? 0)
             .reduce((a, b) => a + b, 0) / displayableItems.length,
     ]
-}
\ No newline at end of file
+}
+
+export const setMapPointIds = (pathVariant: PathVariant): PathVariant => pathVariant.map(mapPoint => {
+    // Get identifier - either catalog item identifier is used or generate a new UUID if the point does not have uuid
+    // - e.g. is not from the catalog
+    mapPoint.id = mapPoint.catalogItem.id ? mapPoint.catalogItem.id : generateUuid()
+    return mapPoint
+})
\ No newline at end of file
