Revize 14588cb6

fixed keys and indices

re #9741

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

@@ -8 +8 @@
 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 +32 @@
     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 +93 @@
                 //     } as MapPoint,
                 //     id: item.id,
                 // })
-                updateMapMarker({
+                updateMapPointAtIndex({
                     ...item,
                     addToPath: !item?.addToPath,
                     idx,
@@ -69 +110 @@
                 //     } as MapPoint,
                 //     id: item.id,
                 // })
-                updateMapMarker({
+                updateMapPoint({
                     ...item,
                     hidden: !item?.hidden,
                     idx,
@@ -89 +130 @@
         return (
             item && (
                 <Draggable
-                    key={`${item.id}`}
-                    draggableId={`${item.id}`}
+                    key={`${item.reactId}`}
+                    draggableId={`${item.reactId}`}
                     index={idx}
                 >
                     {(provided, snapshot) => (
@@ -124 +165 @@
                                     <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}