diff --git a/src/components/kyl_MWSProfilePanel.jsx b/src/components/kyl_MWSProfilePanel.jsx
index c6180897..d0f81430 100644
--- a/src/components/kyl_MWSProfilePanel.jsx
+++ b/src/components/kyl_MWSProfilePanel.jsx
@@ -1,4 +1,4 @@
-import { ArrowLeft } from 'lucide-react';
+import { ArrowLeft, X } from 'lucide-react';
import { stateAtom, districtAtom, blockAtom, dataJsonAtom } from '../store/locationStore.jsx';
import { useRecoilValue } from 'recoil';
import { useEffect, useState } from 'react';
@@ -6,7 +6,7 @@ import { trackEvent } from "../services/analytics.js";
import { CheckCircle2, Layers3,Table } from "lucide-react";
const KYLMWSProfilePanel = ({ mwsData, onBack, hideBackButton = false, onResetMWS,onOpenSelection,
- selectedMWS = [], intersectingVillages = [], }) => {
+ selectedMWS = [], intersectingVillages = [],onRemoveMWS }) => {
const state = useRecoilValue(stateAtom);
const district = useRecoilValue(districtAtom);
const block = useRecoilValue(blockAtom);
@@ -67,10 +67,7 @@ const KYLMWSProfilePanel = ({ mwsData, onBack, hideBackButton = false, onResetMW
{hideBackButton && (
Micro watershed profile
- )}
-
-
-
+ )}
{selectedMWS.length <= 1 ? (
@@ -123,67 +120,124 @@ const KYLMWSProfilePanel = ({ mwsData, onBack, hideBackButton = false, onResetMW
+ {onOpenSelection && (
+
+ )}
+
+
+
+
+ Selected MWS
+
+
+
+ {selectedMWS.length}
+
+
+
{/* Selected MWS List */}
-
+
- {selectedMWS.map((uid, index) => (
+ {selectedMWS.map((uid, index) => (
-
+
-
+ {/* Remove MWS button - top right corner */}
+
-
- {index + 1}
-
+ {/* Left side - Number + UID */}
+
-
-
- {typeof uid === 'object' ? (uid.name ?? uid.id ?? 'Unknown') : uid}
-
-
+
+ {index + 1}
+
+
+
+ {typeof uid === 'object'
+ ? (uid.name ?? uid.id ?? 'Unknown')
+ : uid}
+
-
+
+ {/* View Profile */}
+
-
+
- ))}
+ ))}
-
+
)}
-{onOpenSelection && (
-
- )}
+
{intersectingVillages.length > 0 && (
diff --git a/src/components/kyl_rightSidebar.jsx b/src/components/kyl_rightSidebar.jsx
index d8697ce6..ef60616b 100644
--- a/src/components/kyl_rightSidebar.jsx
+++ b/src/components/kyl_rightSidebar.jsx
@@ -70,7 +70,8 @@ const KYLRightSidebar = ({
setShowStewards,
mwsIndex,
villageNameIndex,
- setManualSelectedMWS
+ setManualSelectedMWS,
+ handleRemoveMWS,
}) => {
const [loadingWB, setLoadingWB] = React.useState(false);
const [showSelectionPopup, setShowSelectionPopup] = React.useState(false);
@@ -2087,6 +2088,7 @@ const sheet5Count =
setSelectionMode={setSelectionMode}
onResetMWS={onResetMWS}
onResetSelection={onResetMWSSelection}
+ onRemoveMWS={handleRemoveMWS}
onOpenSelection={() => setShowSelectionPopup(true)}
intersectingVillages={displayVillages}
/>
diff --git a/src/pages/kyl_dashboard.jsx b/src/pages/kyl_dashboard.jsx
index e0beb5fa..2790b58a 100644
--- a/src/pages/kyl_dashboard.jsx
+++ b/src/pages/kyl_dashboard.jsx
@@ -235,6 +235,42 @@ const KYLDashboardPage = () => {
}
};
+ const handleRemoveMWS = (uid) => {
+ setManualSelectedMWS((prev) => {
+ const updated = prev.filter((id) => id !== uid);
+
+ // Update MWS selection styling on map
+ updateSelectedMWSStyle(updated);
+
+ // If no MWS is left, close the profile
+ if (updated.length === 0) {
+ setSelectedMWSProfile(null);
+ setHighlightMWS(null);
+ return updated;
+ }
+
+ // If the currently highlighted MWS was removed,
+ // highlight another remaining MWS
+ if (highlightMWS === uid) {
+ const nextUid = updated[updated.length - 1];
+ setHighlightMWS(nextUid);
+
+ const nextFeature = mwsLayerRef.current
+ ?.getSource()
+ ?.getFeatures()
+ ?.find(
+ (feature) => feature.get("uid") === nextUid
+ );
+
+ if (nextFeature) {
+ setSelectedMWSProfile(nextFeature.getProperties());
+ }
+ }
+
+ return updated;
+ });
+};
+
const handleResetMWSSelection = () => {
setManualSelectedMWS([]);
setFilterSelections({
@@ -2540,6 +2576,7 @@ const wb_id = props?.UID ?? props?.id ?? props?.wb_id;
mwsIndex={mwsIndex}
villageNameIndex={villageNameIndex}
setManualSelectedMWS={setManualSelectedMWS}
+ handleRemoveMWS={handleRemoveMWS}
/>