Skip to content

Fix:Reorganization of the view seelction, selected mws and selected v… #461

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
manvikhatri123 wants to merge 2 commits into
base: development
Choose a base branch
from
+143 −50
Open

Fix:Reorganization of the view seelction, selected mws and selected v… #461

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
997a259
Fix:Reorganization of the view seelction, selected mws and selected v…
manvikhatri123 Sep 7, 2026
6d63756
Resolved comments:handleRemoveMWS function was repeated, so resolved …
manvikhatri123 Sep 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
152 changes: 103 additions & 49 deletions src/components/kyl_MWSProfilePanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
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';
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);
Expand Down Expand Up @@ -67,10 +67,7 @@ const KYLMWSProfilePanel = ({ mwsData, onBack, hideBackButton = false, onResetMW

{hideBackButton && (
<h2 className="text-lg font-medium mb-4">Micro watershed profile</h2>
)}



)}


{selectedMWS.length <= 1 ? (
Expand Down Expand Up @@ -123,67 +120,124 @@ const KYLMWSProfilePanel = ({ mwsData, onBack, hideBackButton = false, onResetMW
</p>
</div>

{onOpenSelection && (
<div className="flex justify-start mt-4">
<button
onClick={onOpenSelection}
className="flex justify-center items-center gap-1 px-4 py-1.5 text-[11px] font-semibold text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors border border-indigo-100"
>
<Table className="w-3 h-3" />
View Selection
</button>
</div>
)}
<hr />


<div className="flex items-center justify-between mb-2">
<h3 className="font-medium text-gray-900">
Selected MWS
</h3>

<div className="w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 text-xs font-semibold flex items-center justify-center">
{selectedMWS.length}
</div>
</div>


{/* Selected MWS List */}
<div className="space-y-3 max-h-[320px] overflow-y-auto">
<div className="space-y-3 max-h-[320px] overflow-y-auto overflow-x-hidden pt-2">

{selectedMWS.map((uid, index) => (
{selectedMWS.map((uid, index) => (

<div
key={uid}
className="flex items-center justify-between rounded-lg border border-gray-200 px-4 py-3 hover:border-indigo-300 hover:bg-indigo-50 transition"
>
<div
key={uid}
className="relative flex items-center justify-between rounded-lg border border-gray-200 px-2 py-2 hover:border-indigo-300 hover:bg-indigo-50 transition"
>

<div className="flex items-center gap-3">
{/* Remove MWS button - top right corner */}
<button
type="button"
title="Remove from selection"
onClick={(e) => {
e.stopPropagation();
onRemoveMWS?.(
typeof uid === 'object' ? (uid.id ?? uid.uid) : uid
);
}}
className="
absolute -top-2 right-0
w-4 h-4
flex items-center justify-center
rounded-full
bg-white
border border-gray-200
shadow-sm
text-gray-400
hover:text-red-500
hover:border-red-200
hover:bg-red-50
transition-all
z-10
"
>
<X className="w-2 h-2" />
</button>

<div className="w-7 h-7 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center text-xs font-semibold">
{index + 1}
</div>
{/* Left side - Number + UID */}
<div className="flex items-center gap-3">

<div>
<p className="text-sm font-medium text-gray-800">
{typeof uid === 'object' ? (uid.name ?? uid.id ?? 'Unknown') : uid}
</p>
</div>
<div className="w-7 h-7 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center text-xs font-semibold">
{index + 1}
</div>

<div>
<p className="text-sm font-medium text-gray-800">
{typeof uid === 'object'
? (uid.name ?? uid.id ?? 'Unknown')
: uid}
</p>
</div>

<button
className="flex items-center gap-2 text-indigo-600 hover:text-indigo-700 mb-2"
onClick={() => handleReportDownload(mwsData?.uid)}
>
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
/>
</svg>
<span className="text-sm">View Profile</span>
</button>
</div>

{/* View Profile */}
<button
className="flex items-center gap-1 text-indigo-600 hover:text-indigo-700 mr-2"
onClick={() =>
handleReportDownload(
typeof uid === 'object'
? (uid.id ?? uid.uid)
: uid
)
}
>
<svg
className="w-4 h-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
/>
</svg>

<span className="text-sm">View Profile</span>
</button>

</div>
</div>

))}
))}

</div>
</div>

</div>
)}
{onOpenSelection && (
<div className="flex justify-center mt-4">
<button
onClick={onOpenSelection}
className="flex justify-center items-center gap-1 px-4 py-1.5 text-[11px] font-semibold text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors border border-indigo-100"
>
<Table className="w-3 h-3" />
View Selection
</button>
</div>
)}


{intersectingVillages.length > 0 && (
<div className="mt-5">
Expand Down
4 changes: 3 additions & 1 deletion src/components/kyl_rightSidebar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,8 @@ const KYLRightSidebar = ({
setShowStewards,
mwsIndex,
villageNameIndex,
setManualSelectedMWS
setManualSelectedMWS,
handleRemoveMWS,
}) => {
const [loadingWB, setLoadingWB] = React.useState(false);
const [showSelectionPopup, setShowSelectionPopup] = React.useState(false);
Expand Down Expand Up @@ -2087,6 +2088,7 @@ const sheet5Count =
setSelectionMode={setSelectionMode}
onResetMWS={onResetMWS}
onResetSelection={onResetMWSSelection}
onRemoveMWS={handleRemoveMWS}
onOpenSelection={() => setShowSelectionPopup(true)}
intersectingVillages={displayVillages}
/>
Expand Down
37 changes: 37 additions & 0 deletions src/pages/kyl_dashboard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -2540,6 +2576,7 @@ const wb_id = props?.UID ?? props?.id ?? props?.wb_id;
mwsIndex={mwsIndex}
villageNameIndex={villageNameIndex}
setManualSelectedMWS={setManualSelectedMWS}
handleRemoveMWS={handleRemoveMWS}
/>
</div>
</div>
Expand Down