Skip to content

feat(web): add grid alerts to app #8281

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.

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
wants to merge 27 commits into
base: master
Choose a base branch
from

Conversation

silkeholmebonnen
Copy link
Contributor

@silkeholmebonnen silkeholmebonnen commented Jul 11, 2025

Issue

GMM-870

Description

This PR builds on top of Alejandra's PR. It shows grid alerts on the map but only for on hourly or 5 minute view, and only the hours that it is active.

Preview

image image

Double check

  • I have tested my parser changes locally with poetry run test_parser "zone_key"
  • I have run pnpx prettier@2 --write . and poetry run format in the top level directory to format my changes.

alejandranavcas and others added 15 commits June 24, 2025 16:48
also run pnpx prettier@2 --write .
calculate centroid of polygon
show alert icon in centroid for zones where there is an alert with "action" type
create warning icon for the map
remove props not used in CurrentGridAlertsCard
format date to show on card
implemented visual configuration of style according to alert type
The icon is only showed where there is Action alert in a zone. Warning icon's color depends on carbon intensity color of the zone on the map following the logic in CarbonIntensitySquare.
@silkeholmebonnen silkeholmebonnen marked this pull request as ready for review July 17, 2025 12:06
@silkeholmebonnen silkeholmebonnen requested a review from a team as a code owner July 17, 2025 12:06
@silkeholmebonnen silkeholmebonnen requested review from tonypls and removed request for a team July 17, 2025 12:06
Comment on lines +107 to +130
return (
<>
{/* */}
{warningIconData?.features.map((feature) => {
const { zoneId } = feature.properties;
const [longitude, latitude] = feature.geometry.coordinates;
const zoneData = data?.datetimes[selectedDatetimeString]?.z[zoneId];
const intensity = zoneData ? getCarbonIntensity(zoneData, isConsumption) : 0; // Default to 0 if no data
const bgColor = co2ColorScale(intensity);
const iconColor = getTextColor(bgColor);

return (
<Marker key={zoneId} longitude={longitude} latitude={latitude} anchor="center">
<div className="flex items-center justify-center rounded-full bg-white/10 p-2">
<FiAlertTriangle
size={16}
className={`-translate-y-px text-${iconColor}`}
/>
</div>
</Marker>
);
})}
</>
);
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Alejandra implemented this and I can see that it is different from the other map layers but it seems to work. From a little chat with AI it also seemed to be easier to use Marker when rendering Icons

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants