From 32743e80bf4c7a3852f46982e596061bbf27370f Mon Sep 17 00:00:00 2001 From: Wojtek Bazant Date: Mon, 21 Oct 2024 17:39:09 +0100 Subject: [PATCH 1/3] Show all types for a location Present but unselected types rendered with opacity 0.5 --- src/components/map/Location.js | 63 ++++++++++---------------------- src/components/map/MapPage.js | 5 +-- src/components/map/TypeLabels.js | 47 ++++++++++++++++++++++++ 3 files changed, 67 insertions(+), 48 deletions(-) create mode 100644 src/components/map/TypeLabels.js diff --git a/src/components/map/Location.js b/src/components/map/Location.js index 43293644..59adfb73 100644 --- a/src/components/map/Location.js +++ b/src/components/map/Location.js @@ -4,12 +4,12 @@ import styled from 'styled-components/macro' import ResetButton from '../ui/ResetButton' import MapLabel from './MapLabel' import { BackgroundMapPin, MapPin } from './Pins' +import TypeLabels from './TypeLabels' /** * Component for a location displayed on the map. * @param {function} onClick - The handler called when this location is clicked - * @param {string} commonName - The common name of the location - * @param {string} scientificName - The scientific name of the location + * @param {Array} types - The types associated with the location * @param {boolean} showLabel - Whether to show the label */ const LocationButton = styled(ResetButton)` @@ -41,50 +41,25 @@ const TooltipLabel = styled(MapLabel)` } ` -const ScientificName = styled.span` - font-style: italic; -` - const Location = memo( - ({ - showLabel, - commonName, - scientificName, - selected, - editing, - onClick, - ...props - }) => { - const label = commonName || scientificName - const showScientificName = !commonName && scientificName - - return ( - <> - {selected && !editing && } - {editing && } - - {!showLabel && ( - - {showScientificName ? ( - {label} - ) : ( - label - )} - - )} - - {showLabel && ( - - {showScientificName ? ( - {label} - ) : ( - label - )} - + ({ showLabel, types, selected, editing, onClick, ...props }) => ( + <> + {selected && !editing && } + {editing && } + + {!showLabel && ( + + + )} - - ) - }, + + {showLabel && ( + + + + )} + + ), ) Location.displayName = 'Location' diff --git a/src/components/map/MapPage.js b/src/components/map/MapPage.js index d23197ec..53e4f6e2 100644 --- a/src/components/map/MapPage.js +++ b/src/components/map/MapPage.js @@ -426,10 +426,7 @@ const MapPage = ({ isDesktop }) => { selected={location.id === locationId} editing={isEditingLocation && location.id === locationId} showLabel={showLabels} - commonName={typesAccess.getCommonName(location.type_ids[0])} - scientificName={typesAccess.getScientificName( - location.type_ids[0], - )} + types={location.type_ids.map((id) => typesAccess.getType(id))} /> ))} {(isEditingLocation || isAddingLocation) && draggedPosition && ( diff --git a/src/components/map/TypeLabels.js b/src/components/map/TypeLabels.js new file mode 100644 index 00000000..30012b2a --- /dev/null +++ b/src/components/map/TypeLabels.js @@ -0,0 +1,47 @@ +import React from 'react' +import { useSelector } from 'react-redux' +import styled from 'styled-components/macro' + +const TypeList = styled.div` + display: flex; + flex-direction: column; +` + +const TypeItem = styled.span` + opacity: ${(props) => (props.isSelected ? 1.0 : 0.5)}; +` + +const ScientificName = styled(TypeItem)` + font-style: italic; +` + +const TypeLabels = ({ types }) => { + const { types: selectedTypes } = useSelector((state) => state.filter) + + const typeLabels = + types && types.length > 0 + ? types.map((type) => ({ + label: type.commonName || type.scientificName, + isScientific: !type.commonName && type.scientificName, + isSelected: selectedTypes.includes(type.id), + })) + : [] + + return ( + + {typeLabels.map((item, index) => + item.isScientific ? ( + + {item.label} + + ) : ( + + {item.label} + + ), + )} + + ) +} + +export default TypeLabels From 66d53f82e59135c114460c46848ed3c73061c2b8 Mon Sep 17 00:00:00 2001 From: Wojtek Bazant Date: Fri, 25 Oct 2024 11:09:19 +0100 Subject: [PATCH 2/3] Allow type labels to be null if types load after map locations --- src/components/map/Location.js | 6 +++--- src/components/map/MapPage.js | 3 +-- src/components/map/TypeLabels.js | 32 ++++++++++++++------------------ 3 files changed, 18 insertions(+), 23 deletions(-) diff --git a/src/components/map/Location.js b/src/components/map/Location.js index 59adfb73..aeb5b13e 100644 --- a/src/components/map/Location.js +++ b/src/components/map/Location.js @@ -42,20 +42,20 @@ const TooltipLabel = styled(MapLabel)` ` const Location = memo( - ({ showLabel, types, selected, editing, onClick, ...props }) => ( + ({ showLabel, typeIds, selected, editing, onClick, ...props }) => ( <> {selected && !editing && } {editing && } {!showLabel && ( - + )} {showLabel && ( - + )} diff --git a/src/components/map/MapPage.js b/src/components/map/MapPage.js index 53e4f6e2..e6dc74c3 100644 --- a/src/components/map/MapPage.js +++ b/src/components/map/MapPage.js @@ -149,7 +149,6 @@ const MapPage = ({ isDesktop }) => { const history = useAppHistory() const dispatch = useDispatch() const handleViewChangeRef = useRef(() => void 0) - const typesAccess = useSelector((state) => state.type.typesAccess) const [draggedPosition, setDraggedPosition] = useState(null) @@ -426,7 +425,7 @@ const MapPage = ({ isDesktop }) => { selected={location.id === locationId} editing={isEditingLocation && location.id === locationId} showLabel={showLabels} - types={location.type_ids.map((id) => typesAccess.getType(id))} + typeIds={location.type_ids} /> ))} {(isEditingLocation || isAddingLocation) && draggedPosition && ( diff --git a/src/components/map/TypeLabels.js b/src/components/map/TypeLabels.js index 30012b2a..49f367ed 100644 --- a/src/components/map/TypeLabels.js +++ b/src/components/map/TypeLabels.js @@ -15,31 +15,27 @@ const ScientificName = styled(TypeItem)` font-style: italic; ` -const TypeLabels = ({ types }) => { +const TypeLabels = ({ typeIds }) => { const { types: selectedTypes } = useSelector((state) => state.filter) - - const typeLabels = - types && types.length > 0 - ? types.map((type) => ({ - label: type.commonName || type.scientificName, - isScientific: !type.commonName && type.scientificName, - isSelected: selectedTypes.includes(type.id), - })) - : [] + const typesAccess = useSelector((state) => state.type.typesAccess) return ( - {typeLabels.map((item, index) => - item.isScientific ? ( - - {item.label} + {(typeIds || []).map((id, index) => { + const type = typesAccess.getType(id) + return !type ? null : !type.commonName && type.scientificName ? ( + + {type.scientificName} ) : ( - - {item.label} + + {type.commonName || type.scientificName} - ), - )} + ) + })} ) } From e0390817d95da115f84171e7add1244bfe203d8c Mon Sep 17 00:00:00 2001 From: Wojtek Bazant Date: Sat, 26 Oct 2024 09:03:02 +0100 Subject: [PATCH 3/3] Also connect types when on settings page --- src/components/connect/connectRoutes.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/connect/connectRoutes.js b/src/components/connect/connectRoutes.js index c5c5f837..6587d6d1 100644 --- a/src/components/connect/connectRoutes.js +++ b/src/components/connect/connectRoutes.js @@ -119,7 +119,10 @@ const connectRoutes = [ * - fetch data from backend * - simplify to keep just the currently selected language */ - + , /*