Skip to content

fix(filters): Toggle visibility on cluster layers when updating source #191

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

Merged
arnaudfnr merged 4 commits into from
Jul 18, 2026
Merged

fix(filters): Toggle visibility on cluster layers when updating source #191

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2436d01
fix(filter): Fix separator for category filter
david-bretaud-dev Jul 12, 2026
a36d1aa
fix(clustering): Toggle cluster layers when toggling layer visibility
david-bretaud-dev Jul 12, 2026
cd49834
fix(deps): Use newer version of coordo
david-bretaud-dev Jul 18, 2026
e0f3462
fix(categories): Reduce lines code
david-bretaud-dev Jul 18, 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
4 changes: 2 additions & 2 deletions webapp/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion webapp/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,8 @@
"chart.js": "^4.5.1",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"coordo": "github:dataforgoodfr/Coordonnees#0.7.0",
"color2k": "^2.0.4",
"coordo": "github:dataforgoodfr/Coordonnees#0.8.1",
"i18next": "^25.8.0",
"i18next-browser-languagedetector": "^8.2.0",
"i18next-http-backend": "^3.0.2",
Expand Down
12 changes: 7 additions & 5 deletions webapp/src/features/categories-filters/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import type { CheckedState } from "@ui/checkbox";
import { AllOrNoneSelector } from "./all-or-none-selector";
import { CategoriesCheckboxGroup } from "./categories-checkbox-group";
import { useCategoriesConfig } from "./use-categories-config";
import { changeLayerVisibility } from "./use-categories-filters";

type CategoriesFiltersProps = {
disabled?: boolean;
Expand All @@ -37,11 +38,12 @@ export const CategoriesFilters: FC<CategoriesFiltersProps> = ({ disabled }) => {
}

try {
if (checkedState) {
mapApiRef.current.showLayer(layerId);
} else {
mapApiRef.current.hideLayer(layerId);
}
changeLayerVisibility({
hideLayer: mapApiRef.current.hideLayer,
isActive: Boolean(checkedState),
layerId,
showLayer: mapApiRef.current.showLayer,
});
} catch (error) {
console.error(error);
}
Expand Down
34 changes: 28 additions & 6 deletions webapp/src/features/categories-filters/use-categories-filters.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,34 @@ import {
type CategoriesFiltersState,
parseLayerId,
} from "@shared/api/categories-filters";
import { LAYERS_WITH_CLUSTERS } from "@shared/api/layers";
import { useLocalStorage } from "@shared/hooks/use-local-storage";
import { EVENTS } from "@shared/lib/coordo";
import { EVENTS, getClusterLayerIds } from "@shared/lib/coordo";

/**
* Trigger visibility update on the layer and its cluster related layers
*/
export const changeLayerVisibility = ({
layerId,
isActive,
showLayer,
hideLayer,
}: {
layerId: string;
isActive: boolean;
showLayer?: (layerId: string) => void;

@arnaudfnr arnaudfnr Jul 18, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are showLayer and hideLayer optional ?

@david-bretaud-dev david-bretaud-dev Jul 18, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because when initializing the map, in the mapContainerRef callback, in handleReady, we have to cope with the TS of the mapApiRef.current that can be undefined, thus the provided props are optional

      // On first mount, sync the map state with the local storage state of "categories-filters"
      syncInitialCategoriesFilters({
        hideLayer: mapApiRef.current?.hideLayer,
        showLayer: mapApiRef.current?.showLayer,
      });

hideLayer?: (layerId: string) => void;
}) => {
const isClustered = LAYERS_WITH_CLUSTERS.includes(layerId);

const action = isActive ? showLayer : hideLayer;
action?.(layerId);
if (isClustered) {
const { circle, count } = getClusterLayerIds(layerId);
action?.(circle);
action?.(count);
}
};

export const useCategoriesFilters = () => {
const [categoriesFilters, setCategoriesFilters] =
Expand Down Expand Up @@ -69,11 +95,7 @@ export const useCategoriesFilters = () => {
const layerId = parseLayerId(identifier);
if (!layerId) return;

if (isActive) {
showLayer?.(layerId);
} else {
hideLayer?.(layerId);
}
changeLayerVisibility({ hideLayer, isActive, layerId, showLayer });
});
},
[categoriesFilters],
Expand Down
10 changes: 6 additions & 4 deletions webapp/src/shared/api/categories-filters.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import { LAYERS } from "./layers";

const SEPARATOR = ":::";

/**
* Format of a layer: GROUP_BACKEND-NAME
*/
export const CATEGORY_IDENTIFIERS = {
ACTION_DIVERSITY: "action-tree-diversity",
ACTION_INVENTARY: `action-forest_${LAYERS.INVENTARY}`,
ACTION_SOCIO: `action-socio-eco_${LAYERS.ENQUETE}`,
ACTION_INVENTARY: `action-forest${SEPARATOR}${LAYERS.INVENTARY}`,
ACTION_SOCIO: `action-socio-eco${SEPARATOR}${LAYERS.ENQUETE}`,
DATA_GROUND: "data-ground",
DATA_MODEL: "data-model",
DATA_SATELLITE: `data_${LAYERS.SATELLITE}`,
DATA_SATELLITE: `data${SEPARATOR}${LAYERS.SATELLITE}`,
SYSTEM_FOREST_PRIMARY: "system-forest-primary",
SYSTEM_FOREST_SECONDARY: "system-forest-secondary",
SYSTEM_MANGROVE_HIGH: "system-mangrove-high",
Expand All @@ -21,7 +23,7 @@ export const CATEGORY_IDENTIFIERS = {
* Return null if it can't retrieve the layer id.
*/
export const parseLayerId = (name: string) => {
const parts = name.split("_");
const parts = name.split(SEPARATOR);

return parts.length > 1 ? parts[1] : null;
};
Expand Down
5 changes: 5 additions & 0 deletions webapp/src/shared/api/layers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,8 @@ export const LAYERS = {
TOWNS: "towns",
VILLAGES: "villages",
} as const;

export const LAYERS_WITH_CLUSTERS: string[] = [
LAYERS.ENQUETE,
LAYERS.INVENTARY,
];
1 change: 1 addition & 0 deletions webapp/src/shared/lib/coordo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
export {
createMap,
EVENTS,
getClusterLayerIds,
LAYER_CONTROL_ELEMENTS,
type LayerControlRenderAnchor,
type LayerControlRenderLayerRow,
Expand Down
Loading