Skip to content

Feat/UI micro interactions #369

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
dharsh0507 wants to merge 17 commits into
base: experimental-features
Choose a base branch
from
Open

Feat/UI micro interactions #369

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
7a13093
Merge branch 'Hotfixes'
Ksheetiz-24 Mar 11, 2026
f0ebed1
Merge branch 'Hotfixes'
Ksheetiz-24 Mar 11, 2026
9476a94
Merge branch 'Hotfixes'
Ksheetiz-24 Mar 11, 2026
195fc1a
Fix : Layer visualize issue
Ksheetiz-24 Mar 13, 2026
bf4bbf6
Fix : layer name
Ksheetiz-24 Mar 13, 2026
b55e890
Toggle issue resolve
manvikhatri123 Mar 14, 2026
b670485
Merge branch 'Hotfixes'
Ksheetiz-24 Mar 16, 2026
9a80389
Waterbody filters added
manvikhatri123 Mar 9, 2026
18237b3
Waterbody filters and chnages by taru(Reduction in tree cover --> def…
manvikhatri123 Mar 11, 2026
241e18a
Fix : Fixed the layer visualize
Ksheetiz-24 Mar 13, 2026
8ba32fd
Auto stash before rebase of "waterbody_filters" onto "origin/developm…
manvikhatri123 Mar 12, 2026
b3d84fe
MWS connectivity layer should come on top.
manvikhatri123 Mar 13, 2026
3df2ceb
Merge branch 'Hotfixes'
Ksheetiz-24 Mar 20, 2026
c262ee8
Merge branch 'Hotfixes'
Ksheetiz-24 Mar 23, 2026
bbae4e2
Merge branch 'Hotfixes'
Ksheetiz-24 Mar 24, 2026
47b55d4
Merge branch 'Hotfixes'
Ksheetiz-24 Mar 25, 2026
62d2722
Refined Ui Micro-Interactions
dharsh0507 Mar 27, 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
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"chartjs-adapter-date-fns": "^3.0.0",
"chartjs-plugin-annotation": "^3.1.0",
"date-fns": "^4.1.0",
"dompurify": "^3.3.2",
"dotenv": "^16.4.7",
"file-saver": "^2.0.5",
"html2canvas": "^1.4.1",
Expand All @@ -33,6 +34,7 @@
"react-ga4": "^2.1.0",
"react-hot-toast": "^2.5.1",
"react-icons": "^5.5.0",
"react-intersection-observer": "^10.0.3",
"react-router": "7.6.3",
"react-router-dom": "7.6.3",
"react-scripts": "5.0.1",
Expand Down
2 changes: 2 additions & 0 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@ import PlansPage from "./components/plansPage";
import PlanViewPage from "./components/plan_detailView";
import AgroHorticulture from "./pages/AgroHorticulture";
import RWBDashboard from "./pages/RWBDashboard";
import ToastHandler from "./components/ui/ToastHandler";

function App() {
return (
<BrowserRouter>
<ToastHandler />
<Routes>
<Route path="/" element={<LEHomepage />} />
<Route path="/kyl_dashboard" element={<KYLDashboardPage />} />
Expand Down
77 changes: 61 additions & 16 deletions src/components/buttons/select_button.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,91 @@
import { useMemo } from 'react';
import Select from 'react-select';
import { useMemo } from "react";
import Select from "react-select";

const SelectButton = ({ stateData, handleItemSelect, setState, currVal }) => {
const SelectButton = ({
stateData,
handleItemSelect,
setState,
currVal,
className = "",
placeholder = "Select option",
}) => {
// ---------- sort by label, keeping original untouched ----------
const sortedOptions = useMemo(() => {
if (!stateData) return [];
return [...stateData].sort((a, b) => a.label.localeCompare(b.label));
}, [stateData]);

const customStyles = {
container: (provided) => ({ ...provided, width: '100%' }),
container: (provided) => ({ ...provided, width: "100%" }),
control: (base, state) => ({
...base,
borderColor: 'black',
backgroundColor: 'white',
textAlign: 'center',
width: '100%',
minHeight: 44,
borderRadius: 12,
borderColor: state.isFocused ? "#8B5CF6" : "#D1D5DB",
backgroundColor: state.isDisabled ? "#F9FAFB" : "white",
textAlign: "left",
width: "100%",
boxShadow: state.isFocused ? "0 0 0 3px rgba(139, 92, 246, 0.18)" : "none",
cursor: state.isDisabled ? "not-allowed" : "pointer",
transition: "border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease",
"&:hover": {
borderColor: state.isFocused ? "#8B5CF6" : "#A78BFA",
},
}),
valueContainer: (base) => ({
...base,
paddingLeft: 10,
paddingRight: 10,
}),
placeholder: (base) => ({
...base,
color: "#6B7280",
}),
singleValue: (base) => ({
...base,
color: "#111827",
}),
option: (styles, { isFocused, isSelected }) => ({
...styles,
color: '#111827',
color: "#111827",
backgroundColor: isSelected
? '#11182732'
? "#EDE9FE"
: isFocused
? '#11182717'
? "#F5F3FF"
: undefined,
':active': { ...styles[':active'], backgroundColor: '#11182717' },
cursor: "pointer",
transition: "background-color 180ms ease",
":active": { ...styles[":active"], backgroundColor: "#DDD6FE" },
}),
menu: (provided) => ({
...provided,
width: "100%",
borderRadius: 12,
overflow: "hidden",
boxShadow: "0 16px 32px rgba(15, 23, 42, 0.14)",
}),
indicatorSeparator: () => ({ display: "none" }),
dropdownIndicator: (base, state) => ({
...base,
color: state.isFocused ? "#8B5CF6" : "#6B7280",
transition: "color 180ms ease, transform 180ms ease",
transform: state.selectProps.menuIsOpen ? "rotate(180deg)" : "rotate(0deg)",
}),
menu: (provided) => ({ ...provided, width: '100%' }),
};

return (
<div className="w-full">
<div className={`w-full ${className}`}>
<Select
classNamePrefix="react-select"
styles={customStyles}
options={sortedOptions}
options={sortedOptions}
value={currVal}
onChange={(e) => handleItemSelect(setState, e)}
isDisabled={!stateData}
placeholder={placeholder}
/>
</div>
);
};

export default SelectButton;
export default SelectButton;
215 changes: 173 additions & 42 deletions src/components/data/Filters.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,14 +246,14 @@
}
},
{
"label": "Minimum one week of dry spell",
"label": "At least one week of dry spell",
"value": {
"lower": 1,
"upper": 999999999
}
},
{
"label": "Minimum two weeks of dry spells",
"label": "At least two weeks of dry spells",
"value": {
"lower": 2,
"upper": 9999999999
Expand Down Expand Up @@ -490,45 +490,70 @@
},
{
"name": "soge_class",
"label" : "Stage of groundwater extraction",
"type" : 1,
"values" : [
{"label" : "Safe", "value" : 0},
{"label" : "Semi-Critical", "value" : 1},
{"label" : "Critical", "value" : 2},
{"label" : "Over-exploited", "value" : 3},
{"label" : "Not Assessed", "value" : 4}
],
"layer_store" : ["soge"],
"layer_name" : ["soge_vector"],
"vectorStyle" : [{
"fill" : "rgba(255, 255, 255, 0.5)",
"stroke" : "rgba(255, 255, 255, 1)",
"lower" : 0, "upper" : 0
},
{
"fill" : "rgba(224, 243, 248, 0.5)",
"stroke" : "rgba(224, 243, 248, 1)",
"lower" : 1, "upper" : 1
},
{
"fill" : "rgba(69, 117, 180, 0.5)",
"stroke" : "rgba(69, 117, 180, 1)",
"lower" : 2, "upper" : 2
},
{
"fill" : "rgba(49, 54, 149, 0.5)",
"stroke" : "rgba(49, 54, 149, 1)",
"lower" : 3, "upper" : 3
},
{
"fill" : "rgba(169, 169, 169, 0.5)",
"stroke" : "rgba(169, 169, 169, 1)",
"lower" : 4, "upper" : 4
}
],
"rasterStyle" : "",
"styleIdx" : 12
"label": "Stage of groundwater extraction",
"type": 1,
"values": [
{
"label": "Safe",
"value": 0
},
{
"label": "Semi-Critical",
"value": 1
},
{
"label": "Critical",
"value": 2
},
{
"label": "Over-exploited",
"value": 3
},
{
"label": "Not Assessed",
"value": 4
}
],
"layer_store": [
"soge"
],
"layer_name": [
"soge_vector"
],
"vectorStyle": [
{
"fill": "rgba(255, 255, 255, 0.5)",
"stroke": "rgba(255, 255, 255, 1)",
"lower": 0,
"upper": 0
},
{
"fill": "rgba(224, 243, 248, 0.5)",
"stroke": "rgba(224, 243, 248, 1)",
"lower": 1,
"upper": 1
},
{
"fill": "rgba(69, 117, 180, 0.5)",
"stroke": "rgba(69, 117, 180, 1)",
"lower": 2,
"upper": 2
},
{
"fill": "rgba(49, 54, 149, 0.5)",
"stroke": "rgba(49, 54, 149, 1)",
"lower": 3,
"upper": 3
},
{
"fill": "rgba(169, 169, 169, 0.5)",
"stroke": "rgba(169, 169, 169, 1)",
"lower": 4,
"upper": 4
}
],
"rasterStyle": "",
"styleIdx": 12
},
{
"name": "trend_g",
Expand Down Expand Up @@ -666,7 +691,7 @@
"Restoration": [
{
"name": "decrease_in_tree_cover",
"label": "Reduction in tree cover",
"label": "Deforestation",
"type": 2,
"values": [
{
Expand Down Expand Up @@ -1287,5 +1312,111 @@
"styleIdx": 8
}
]
},
"Waterbody": {
"Waterbody": [
{
"name": "waterbody_size",
"label": "Size of Waterbody",
"type": 2,
"values": [
{
"label": "WB < 1 ha",
"value": {
"lower": 0,
"upper": 1
}
},
{
"label": "1 ha < WB < 5 ha",
"value": {
"lower": 1,
"upper": 5
}
},
{
"label": "5 ha < WB < 10 ha",
"value": {
"lower": 5,
"upper": 10
}
},
{
"label": "WB > 10 ha",
"value": {
"lower": 10,
"upper": 999999
}
}
],
"layer_store": [
"waterbodies"
],
"layer_name": [
"waterbodies"
],
"vectorStyle": [
{}
],
"rasterStyle": "",
"styleIdx": 0
},
{
"name": "surface_water_trend",
"label": "Surface Water Trend",
"type": 1,
"values": [
{
"label": "Positive Trend",
"value": 1
},
{
"label": "Negative Trend",
"value": -1
},
{
"label": "Steady",
"value": 0
}
],
"layer_store": [
"waterbodies"
],
"layer_name": [
"waterbodies"
],
"vectorStyle": [
{}
],
"rasterStyle": "",
"styleIdx": 1
},
{
"name": "drainage_line",
"label": "Drainage Line",
"type": 1,
"values": [
{
"label": "On drainage line",
"value": 1
},
{
"label": "Off drainage line",
"value": 0
}
],
"layer_store": [
"waterbodies"
],
"layer_name": [
"waterbodies"
],
"vectorStyle": [
{}
],
"rasterStyle": "",
"styleIdx": 2
}
]
}
}
Loading