From 5a6b0b4b79b054f90694eff9d9fe53ef6fe128a0 Mon Sep 17 00:00:00 2001 From: spwoodcock Date: Fri, 23 Feb 2024 15:19:05 +0000 Subject: [PATCH 1/4] refactor: always return all properties on map click --- .../MapComponent/OpenLayersComponent/Layers/VectorLayer.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js b/src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js index 162c4f186b..7b7c79767c 100644 --- a/src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js +++ b/src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js @@ -221,13 +221,6 @@ const VectorLayer = ({ if (feature) { // Extract properties const properties = feature.getProperties(); - // Remove geometry key if properties are present - // If no properties are set, the feature uid is included - if (!('uid' in properties)) { - const { geometry, ...restProperties } = properties; - mapOnClick(restProperties, feature); - return; - } mapOnClick(properties, feature); } } From 1975c9e856faea32f1aca2d9d9fe868d78daab18 Mon Sep 17 00:00:00 2001 From: spwoodcock Date: Fri, 23 Feb 2024 15:21:05 +0000 Subject: [PATCH 2/4] refactor: rename submissionModel --> taskModel --- .../src/components/ProjectSubmissions/TaskSubmissions.tsx | 2 +- .../src/components/ProjectSubmissions/TaskSubmissionsMap.tsx | 2 +- .../models/{submission/submissionModel.ts => task/taskModel.ts} | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename src/frontend/src/models/{submission/submissionModel.ts => task/taskModel.ts} (100%) diff --git a/src/frontend/src/components/ProjectSubmissions/TaskSubmissions.tsx b/src/frontend/src/components/ProjectSubmissions/TaskSubmissions.tsx index 6d66fb9007..ff4763d821 100644 --- a/src/frontend/src/components/ProjectSubmissions/TaskSubmissions.tsx +++ b/src/frontend/src/components/ProjectSubmissions/TaskSubmissions.tsx @@ -5,7 +5,7 @@ import Button from '@/components/common/Button'; import AssetModules from '@/shared/AssetModules.js'; import CoreModules from '@/shared/CoreModules.js'; import { TaskCardSkeletonLoader } from '@/components/ProjectSubmissions/ProjectSubmissionsSkeletonLoader'; -import { taskInfoType } from '@/models/submission/submissionModel'; +import { taskInfoType } from '@/models/task/taskModel'; import { useSearchParams } from 'react-router-dom'; const TaskSubmissions = () => { diff --git a/src/frontend/src/components/ProjectSubmissions/TaskSubmissionsMap.tsx b/src/frontend/src/components/ProjectSubmissions/TaskSubmissionsMap.tsx index 7672bc5efc..c94783ec29 100644 --- a/src/frontend/src/components/ProjectSubmissions/TaskSubmissionsMap.tsx +++ b/src/frontend/src/components/ProjectSubmissions/TaskSubmissionsMap.tsx @@ -15,7 +15,7 @@ import { basicGeojsonTemplate } from '@/utilities/mapUtils'; import TaskSubmissionsMapLegend from '@/components/ProjectSubmissions/TaskSubmissionsMapLegend'; import Accordion from '@/components/common/Accordion'; import AsyncPopup from '@/components/MapComponent/OpenLayersComponent/AsyncPopup/AsyncPopup'; -import { taskFeaturePropertyType, taskInfoType } from '@/models/submission/submissionModel'; +import { taskFeaturePropertyType, taskInfoType } from '@/models/task/taskModel'; import { isValidUrl } from '@/utilfunctions/urlChecker'; export const defaultStyles = { diff --git a/src/frontend/src/models/submission/submissionModel.ts b/src/frontend/src/models/task/taskModel.ts similarity index 100% rename from src/frontend/src/models/submission/submissionModel.ts rename to src/frontend/src/models/task/taskModel.ts From 4602288426a777e23982a33ac5f8cb5a3eca1adf Mon Sep 17 00:00:00 2001 From: spwoodcock Date: Fri, 23 Feb 2024 15:23:18 +0000 Subject: [PATCH 3/4] refactor: configurable primary property key for map AsyncPopup --- .../OpenLayersComponent/AsyncPopup/AsyncPopup.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/components/MapComponent/OpenLayersComponent/AsyncPopup/AsyncPopup.tsx b/src/frontend/src/components/MapComponent/OpenLayersComponent/AsyncPopup/AsyncPopup.tsx index 6e1d4e24e9..dac3a99a2c 100644 --- a/src/frontend/src/components/MapComponent/OpenLayersComponent/AsyncPopup/AsyncPopup.tsx +++ b/src/frontend/src/components/MapComponent/OpenLayersComponent/AsyncPopup/AsyncPopup.tsx @@ -14,6 +14,7 @@ type asyncPopupPropType = { closePopup?: any; loading?: boolean; showOnHover?: string; + primaryKey: string; }; function hasKey(obj, key) { @@ -33,6 +34,7 @@ const AsyncPopup = ({ closePopup = false, loading = false, showOnHover = 'click', + primaryKey = 'uid', }: asyncPopupPropType) => { const popupRef = useRef(null); const popupCloserRef = useRef(null); @@ -111,8 +113,11 @@ const AsyncPopup = ({ return; } const featureProperties = features[0].getProperties(); - const { uid } = featureProperties; - if (layerIds.includes(uid) || (hasKey(featureProperties, 'uid') && featureProperties?.uid)) { + const { [primaryKey]: primaryKeyValue } = featureProperties; + if ( + layerIds.includes(primaryKeyValue) || + (hasKey(featureProperties, primaryKey) && featureProperties?.[primaryKey]) + ) { setProperties(featureProperties); setCoordinates(coordinate); } else { From 5afb7b74359ee2879ed59e8c8766c7f1d7fa935b Mon Sep 17 00:00:00 2001 From: spwoodcock Date: Fri, 23 Feb 2024 15:23:34 +0000 Subject: [PATCH 4/4] feat: add map popup on data extract geom click --- .../src/models/project/projectModel.ts | 11 +++++ src/frontend/src/views/ProjectDetailsV2.tsx | 42 +++++++++++++++---- 2 files changed, 46 insertions(+), 7 deletions(-) create mode 100644 src/frontend/src/models/project/projectModel.ts diff --git a/src/frontend/src/models/project/projectModel.ts b/src/frontend/src/models/project/projectModel.ts new file mode 100644 index 0000000000..b9d0792daf --- /dev/null +++ b/src/frontend/src/models/project/projectModel.ts @@ -0,0 +1,11 @@ +export type osmTag = { + string: string; +}; + +export type dataExtractPropertyType = { + osm_id: number; + tags: Array<{ [key: string]: string }>; + timestamp: Date; + changeset: number; + version: number; +}; diff --git a/src/frontend/src/views/ProjectDetailsV2.tsx b/src/frontend/src/views/ProjectDetailsV2.tsx index 1da5f76cd1..19a5f24eb4 100644 --- a/src/frontend/src/views/ProjectDetailsV2.tsx +++ b/src/frontend/src/views/ProjectDetailsV2.tsx @@ -32,6 +32,7 @@ import getTaskStatusStyle from '@/utilfunctions/getTaskStatusStyle'; import { defaultStyles } from '@/components/MapComponent/OpenLayersComponent/helpers/styleUtils'; import MapLegends from '@/components/MapLegends'; import Accordion from '@/components/common/Accordion'; +import AsyncPopup from '@/components/MapComponent/OpenLayersComponent/AsyncPopup/AsyncPopup'; import { Geolocation } from '@capacitor/geolocation'; import { Icon, Style } from 'ol/style'; import { Motion } from '@capacitor/motion'; @@ -40,6 +41,7 @@ import { CommonActions } from '@/store/slices/CommonSlice'; import Button from '@/components/common/Button'; import ProjectInfo from '@/components/ProjectDetailsV2/ProjectInfo'; import useOutsideClick from '@/hooks/useOutsideClick'; +import { dataExtractPropertyType } from '@/models/project/projectModel'; import { isValidUrl } from '@/utilfunctions/urlChecker'; const Home = () => { @@ -49,7 +51,6 @@ const Home = () => { const { windowSize, type } = WindowDimension(); const [divRef, toggle, handleToggle] = useOutsideClick(); - const [taskId, setTaskId] = useState(); const [mainView, setView] = useState(); const [featuresLayer, setFeaturesLayer] = useState(); const [toggleGenerateModal, setToggleGenerateModal] = useState(false); @@ -65,6 +66,7 @@ const Home = () => { const defaultTheme = CoreModules.useAppSelector((state) => state.theme.hotTheme); const state = CoreModules.useAppSelector((state) => state.project); const projectInfo = CoreModules.useAppSelector((state) => state.home.selectedProject); + const selectedTask = CoreModules.useAppSelector((state) => state.task.selectedTask); const stateSnackBar = CoreModules.useAppSelector((state) => state.home.snackbar); const mobileFooterSelection = CoreModules.useAppSelector((state) => state.project.mobileFooterSelection); const mapTheme = CoreModules.useAppSelector((state) => state.theme.hotTheme); @@ -135,8 +137,31 @@ const Home = () => { dispatch(GetProjectDashboard(`${import.meta.env.VITE_API_URL}/projects/project_dashboard/${decodedId}`)); }, []); - // TasksLayer(map, mainView, featuresLayer); - const projectClickOnMap = (properties, feature) => { + const dataExtractDataPopup = (properties: dataExtractPropertyType) => { + return ( +
+

+ OSM ID: #{properties?.osm_id} +

+
+

+ Tags: {properties?.tags} +

+

+ Timestamp: {properties?.timestamp} +

+

+ Changeset: {properties?.changeset} +

+

+ Version: {properties?.version} +

+
+
+ ); + }; + + const projectClickOnMapTask = (properties, feature) => { setFeaturesLayer(feature, 'feature'); let extent = properties.geometry.getExtent(); @@ -147,7 +172,9 @@ const Home = () => { block: 'center', behavior: 'smooth', }); - setTaskId(properties.uid); + + dispatch(CoreModules.TaskActions.SetSelectedTask(properties.uid)); + dispatch(ProjectActions.ToggleTaskModalStatus(true)); if (windowSize.width < 768) { map.getView().fit(extent, { @@ -382,7 +409,7 @@ const Home = () => { duration: 2000, }} layerProperties={{ name: 'project-area' }} - mapOnClick={projectClickOnMap} + mapOnClick={projectClickOnMapTask} zoomToLayer zIndex={5} getTaskStatusStyle={(feature) => getTaskStatusStyle(feature, mapTheme)} @@ -403,6 +430,7 @@ const Home = () => { zIndex={5} /> )} + {geolocationStatus && currentCoordinate?.latitude && currentCoordinate?.longitude && ( { {featuresLayer != undefined && ( - + } />