Revize 26f9c9ff

toggles for specific map points

re #9741

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

@@ -7 +7 @@
     Paper,
     Stack,
     TextField,
-    Typography,
 } from '@mui/material'
 import { Fragment, FunctionComponent, useState } from 'react'
 import ButtonOpenableDialog from '../../Reusables/ButtonOpenableDialog'

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/MapPointDraggableList/MapPointDraggableListItem.tsx

@@ -6 +6 @@
     Typography,
 } from '@mui/material'
 import { Draggable } from 'react-beautiful-dnd'
-import { getMapPointSemanticColor as getMapPointSemanticColor, MapPoint, MapPointType, PathVariant } from '../trackingToolUtils'
+import {
+    getMapPointSemanticColor,
+    MapPointType,
+    PathVariant,
+} from '../trackingToolUtils'
 import { CatalogItemDto } from '../../../swagger/data-contracts'
 import { useDispatch } from 'react-redux'
 import { removeMapMarker, updateMapMarker } from '../trackingToolSlice'
@@ -101 +105 @@
                             <ListItemText
                                 primary={
                                     <Typography
-                                        style={{ color: getMapPointSemanticColor(item) }}
+                                        style={{
+                                            color: getMapPointSemanticColor(
+                                                item
+                                            ),
+                                        }}
                                     >
                                         {item.catalogItem.name ??
                                             'Unknown name'}

frontend/src/features/TrackingTool/TrackingTool.tsx

@@ -27 +27 @@
 import RightClickPopupMenu from './Import/ImportContextMenu'
 import { buildTheme, getPalette } from '../Theme/ThemeWrapper'
 import AttachFileIcon from '@mui/icons-material/AttachFile'
+import MapPointToggleables from './Import/MapPointToggleables'
 
 const mapTheme = buildTheme('light')
 
@@ -121 +122 @@
                     </Stack>
 
                     {pathDto && (
+                        <Fragment>
+                            <MapPointToggleables />
                         <Stack alignItems="flex-end">
                             <Button
                                 startIcon={<ClearIcon />}
@@ -131 +134 @@
                                 Clear Map
                             </Button>
                         </Stack>
+                        </Fragment>
                     )}
                 </Grid>
 

frontend/src/features/TrackingTool/trackingToolSlice.ts

@@ -3 +3 @@
 import mapConfig from "../../config/mapConfig"
 import { PathDto } from "../../swagger/data-contracts"
 import buildPathVariants from "./Map/pathUtils"
-import  { isMapPointDisplayable, MapPoint, PathVariant } from "./trackingToolUtils"
+import { isMapPointDisplayable, MapPoint, PathVariant } from "./trackingToolUtils"
 import { sendTextForProcessing } from "./trackingToolThunks"
 import storage from "redux-persist/lib/storage"
 import TrackingToolState from './trackingToolState'
@@ -61 +61 @@
             ...state,
             currentPage: action.payload,
         }),
+        updatePrimaryPath: (state: TrackingToolState, action: { payload: PathVariant }) => {
+            const { primaryPathIdx } = state
+            const path = action.payload
+            const paths = [...state.pathVariants ?? []]
+
+            if (paths.length <= primaryPathIdx) {
+                return { ...state }
+            }
+
+            return {
+                ...state,
+                pathVariants: [
+                    ...paths.slice(0, primaryPathIdx),
+                    path,
+                    ...paths.slice(primaryPathIdx + 1),
+                ],
+            }
+        },
         // Updates map marker while ignoring its idx property
         updateMapMarkerWithId: (state: TrackingToolState, action: { payload: { id: string, item: MapPoint } }) => {
             const { item } = action.payload
-            const idx = state.primaryPathIdx
-            if (!state.pathVariants || state.pathVariants.length <= idx) {
+            const { primaryPathIdx } = state
+            if (!state.pathVariants || state.pathVariants.length <= primaryPathIdx) {
                 return state
             }
 
-            const mapMarkerIdx = state.pathVariants[idx].findIndex((item) => item.id === action.payload.id)
+            const mapMarkerIdx = state.pathVariants[primaryPathIdx].findIndex((item) => item.id === action.payload.id)
             if (mapMarkerIdx === -1) {
                 return state
             }
 
-            const newPathVariant = [...state.pathVariants[idx]]
+            const newPathVariant = [...state.pathVariants[primaryPathIdx]]
             newPathVariant[mapMarkerIdx] = item
             return {
                 ...state,
-                pathVariants: [...state.pathVariants.slice(0, idx), newPathVariant, ...state.pathVariants.slice(idx + 1)],
+                pathVariants: [...state.pathVariants.slice(0, primaryPathIdx), newPathVariant, ...state.pathVariants.slice(primaryPathIdx + 1)],
             }
         },
         // Updates map marker based on its idx property
         updateMapMarker: (state: TrackingToolState, action: { payload: MapPoint }) => {
             const item = action.payload
-            const idx = state.primaryPathIdx
-            if (!state.pathVariants || state.pathVariants.length <= idx) {
+            const { primaryPathIdx } = state
+            if (!state.pathVariants || state.pathVariants.length <= primaryPathIdx) {
                 return state
             }
 
             return {
                 ...state,
                 pathVariants: state.pathVariants.map((pathVariant, i) => {
-                    if (i !== idx) {
+                    if (i !== primaryPathIdx) {
                         return [...pathVariant]
                     }
 
@@ -256 +274 @@
     moveMarkerToDestination,
     updateMapMarkerWithId,
     removeMapMarker,
+    updatePrimaryPath
 } = trackingToolSlice.actions
 const trackingToolReducer = trackingToolSlice.reducer
 export default trackingToolReducer

frontend/src/features/TrackingTool/trackingToolUtils.ts

@@ -65 +65 @@
     [MapPointType.FromCoordinates]: createMapMarkerSvg('#21972D'),
 }
 
-const iconAnchor = [32, 32] as PointExpression
-const iconSize = [42, 42] as PointExpression
+const iconAnchor = [25, 25] as PointExpression
+const iconSize = [40, 40] as PointExpression
 
 const mapMarkers = {
     [MapPointType.LocalCatalog]: L.icon({