Skip to content

Commit

Permalink
map legend: merges binary and continuous features
Browse files Browse the repository at this point in the history
  • Loading branch information
@andresgnlez
andresgnlez committed Oct 17, 2023
1 parent 1e1cc94 commit 3c33209
Show file tree
Hide file tree
Showing 2 changed files with 185 additions and 183 deletions.
185 changes: 87 additions & 98 deletions app/layout/projects/show/map/legend/hooks/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,71 +110,6 @@ export const useConservationAreasLegend = () => {
});
};

export const useFeatureAbundanceLegend = () => {
const { query } = useRouter();
const { pid } = query as { pid: string };

const dispatch = useAppDispatch();
const projectFeaturesQuery = useAllFeatures(
pid,
{ sort: 'feature_class_name' },
{
select: ({ data }) => data,
}
);

const { layerSettings, selectedFeatures: visibleFeatures } = useAppSelector(
(state) => state['/projects/[id]']
);

const totalItems = projectFeaturesQuery.data?.length || 0;

const items =
projectFeaturesQuery.data?.map(
({ id, featureClassName, amountRange = { min: 5000, max: 100000 } }, index) => {
const color =
totalItems > COLORS['features-preview'].ramp.length
? chroma.scale(COLORS['features-preview'].ramp).colors(totalItems)[index]
: COLORS['features-preview'].ramp[index];

return {
id,
name: featureClassName,
amountRange,
color,
};
}
) || [];

return LEGEND_LAYERS['features-abundance']({
items,
onChangeVisibility: (featureId: Feature['id']) => {
const { color, amountRange } = items.find(({ id }) => id === featureId) || {};

const newSelectedFeatures = [...visibleFeatures];
const isIncluded = newSelectedFeatures.includes(featureId);
if (!isIncluded) {
newSelectedFeatures.push(featureId);
} else {
const i = newSelectedFeatures.indexOf(featureId);
newSelectedFeatures.splice(i, 1);
}
dispatch(setSelectedFeatures(newSelectedFeatures));

dispatch(
setLayerSettings({
id: featureId,
settings: {
visibility: !layerSettings[featureId]?.visibility,
amountRange,
color,
},
})
);
},
});
};

export const useFeaturesLegend = () => {
const { selectedFeatures } = useAppSelector((state) => state['/projects/[id]']);
const { query } = useRouter();
Expand All @@ -185,14 +120,25 @@ export const useFeaturesLegend = () => {
pid,
{ sort: 'feature_class_name' },
{
select: ({ data }) => data,
select: ({ data }) => ({
binaryFeatures:
data?.filter(
(feature) => !Object.hasOwn(feature, 'min') && !Object.hasOwn(feature, 'max')
) || [],
continuousFeatures:
data?.filter(
(feature) => Object.hasOwn(feature, 'min') && Object.hasOwn(feature, 'max')
) || [],
}),
}
);

const totalItems = projectFeaturesQuery.data?.length || 0;
const totalItems =
projectFeaturesQuery.data?.binaryFeatures.length +
projectFeaturesQuery.data?.continuousFeatures.length || 0;

const items =
projectFeaturesQuery.data?.map(({ id, featureClassName }, index) => {
const binaryFeaturesItems =
projectFeaturesQuery.data?.binaryFeatures?.map(({ id, featureClassName }, index) => {
const color =
totalItems > COLORS['features-preview'].ramp.length
? chroma.scale(COLORS['features-preview'].ramp).colors(totalItems)[index]
Expand All @@ -205,32 +151,79 @@ export const useFeaturesLegend = () => {
};
}) || [];

return LEGEND_LAYERS['features-preview-new']({
items,
onChangeVisibility: (featureId: Feature['id']) => {
const newSelectedFeatures = [...selectedFeatures];
const isIncluded = newSelectedFeatures.includes(featureId);
if (!isIncluded) {
newSelectedFeatures.push(featureId);
} else {
const i = newSelectedFeatures.indexOf(featureId);
newSelectedFeatures.splice(i, 1);
}
dispatch(setSelectedFeatures(newSelectedFeatures));
const continuousFeaturesItems =
projectFeaturesQuery.data?.continuousFeatures.map(
({ id, featureClassName, amountRange = { min: 5000, max: 100000 } }, index) => {
const color =
totalItems > COLORS['features-preview'].ramp.length
? chroma.scale(COLORS['features-preview'].ramp).colors(totalItems)[index]
: COLORS['features-preview'].ramp[index];

const { color } = items.find(({ id }) => id === featureId) || {};
return {
id,
name: featureClassName,
amountRange,
color,
};
}
) || [];

dispatch(
setLayerSettings({
id: featureId,
settings: {
visibility: !isIncluded,
color,
},
})
);
},
});
return [
...LEGEND_LAYERS['features-preview-new']({
items: binaryFeaturesItems,
onChangeVisibility: (featureId: Feature['id']) => {
const newSelectedFeatures = [...selectedFeatures];
const isIncluded = newSelectedFeatures.includes(featureId);
if (!isIncluded) {
newSelectedFeatures.push(featureId);
} else {
const i = newSelectedFeatures.indexOf(featureId);
newSelectedFeatures.splice(i, 1);
}
dispatch(setSelectedFeatures(newSelectedFeatures));

const { color } = binaryFeaturesItems.find(({ id }) => id === featureId) || {};

dispatch(
setLayerSettings({
id: featureId,
settings: {
visibility: !isIncluded,
color,
},
})
);
},
}),
...LEGEND_LAYERS['features-abundance']({
items: continuousFeaturesItems,
onChangeVisibility: (featureId: Feature['id']) => {
const { color, amountRange } =
continuousFeaturesItems.find(({ id }) => id === featureId) || {};

const newSelectedFeatures = [...selectedFeatures];
const isIncluded = newSelectedFeatures.includes(featureId);
if (!isIncluded) {
newSelectedFeatures.push(featureId);
} else {
const i = newSelectedFeatures.indexOf(featureId);
newSelectedFeatures.splice(i, 1);
}
dispatch(setSelectedFeatures(newSelectedFeatures));

dispatch(
setLayerSettings({
id: featureId,
settings: {
visibility: !isIncluded,
amountRange,
color,
},
})
);
},
}),
];
};

export const useComparisonScenariosLegend = ({
Expand Down Expand Up @@ -300,11 +293,7 @@ export const useInventoryLegend = ({
layers: useConservationAreasLegend(),
},
{
name: 'Features (Continuous)',
layers: useFeatureAbundanceLegend(),
},
{
name: 'Features (Binary)',
name: 'Features',
layers: useFeaturesLegend(),
},
];
Expand Down
Loading

0 comments on commit 3c33209

Please sign in to comment.