Skip to content

Commit

Permalink
Breakdown layers logic in imminent map
Browse files Browse the repository at this point in the history
  • Loading branch information
@puranban
puranban committed Sep 17, 2024
1 parent 4cce991 commit 251129e
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 103 deletions.
4 changes: 1 addition & 3 deletions app/src/components/domain/RiskImminentEventMap/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -453,8 +453,6 @@ function RiskImminentEventMap<
getLayerName('active-event-footprint', 'exposure-fill', true),
getLayerName('event-points', 'track-circle', true),
getLayerName('event-points', 'hazard-points-icon', true),
getLayerName('event-points', 'track-circle', true),
getLayerName('event-points', 'hazard-points-icon', true),
getLayerName('active-event-footprint', 'cyclone-exposure-fill', true),
getLayerName('active-event-footprint', 'uncertainty-track-line', true),
getLayerName('active-event-footprint', 'uncertainty-track-line-five-days', true),
Expand Down Expand Up @@ -516,7 +514,7 @@ function RiskImminentEventMap<
strongLabel
/>
)}
{popupDetails.trackSpeedMph && (
{popupDetails.trackDate && (
<TextOutput
label={strings.popupTrackDate}
value={popupDetails.trackDate}
Expand Down
92 changes: 41 additions & 51 deletions app/src/components/domain/RiskImminentEvents/Gdacs/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
LAYER_CYCLONE_TRACKS,
LAYER_CYCLONE_UNCERTAINTY,
LayerType,
RISK_GEOMETRY_TYPE,
} from '#utils/domain/risk';
import {
RiskApiResponse,
Expand Down Expand Up @@ -58,15 +59,21 @@ function getAlertType(alertClass: AlertClassType) {
function getLayerType(
feature: GeoJSON.Feature<GeoJSON.Geometry, GeoJSON.GeoJsonProperties>,
): CycloneFillLayerType {
if (feature.geometry.type === 'Point' || feature.geometry.type === 'MultiPoint') {
if (
feature.geometry.type === RISK_GEOMETRY_TYPE.POINT
|| feature.geometry.type === RISK_GEOMETRY_TYPE.MULTI_POINT
) {
return 'track-point';
}

if (feature.geometry.type === 'LineString' || feature.geometry.type === 'MultiLineString') {
if (
feature.geometry.type === RISK_GEOMETRY_TYPE.LINE_STRING
|| feature.geometry.type === RISK_GEOMETRY_TYPE.MULTI_LINE_STRING
) {
return 'track';
}

if (feature.properties?.Class === 'Poly_Cones') {
if (feature.properties?.Class === RISK_GEOMETRY_TYPE.GDACS_UNCERTAINTY_CONES) {
return 'uncertainty';
}

Expand Down Expand Up @@ -123,6 +130,17 @@ function Gdacs(props: Props) {
},
});

const setLayerVisibility = useCallback((layer: LayerType) => {
setVisibleLayers((prevValue) => ({
...prevValue,
[layer]: true,
}));
setActiveLayersMapping((prevValue) => ({
...prevValue,
[layer]: true,
}));
}, []);

const {
response: exposureResponse,
pending: exposureResponsePending,
Expand All @@ -141,62 +159,34 @@ function Gdacs(props: Props) {
: undefined;

footprint?.features?.find((feature) => {
if (feature?.geometry.type === 'Point' || feature?.geometry.type === 'MultiPoint') {
setVisibleLayers((prevValue) => ({
...prevValue,
[LAYER_CYCLONE_NODES]: true,
}));
setActiveLayersMapping((prevValue) => ({
...prevValue,
[LAYER_CYCLONE_NODES]: true,
}));
if (
feature?.geometry.type === RISK_GEOMETRY_TYPE.POINT
|| feature?.geometry.type === RISK_GEOMETRY_TYPE.MULTI_POINT
) {
setLayerVisibility(LAYER_CYCLONE_NODES);
} else if (
feature?.geometry.type === RISK_GEOMETRY_TYPE.LINE_STRING
|| feature?.geometry.type === RISK_GEOMETRY_TYPE.MULTI_LINE_STRING
) {
setLayerVisibility(LAYER_CYCLONE_TRACKS);
} else if (
feature?.geometry.type === RISK_GEOMETRY_TYPE.POLYGON
|| feature?.geometry.type === RISK_GEOMETRY_TYPE.MULTI_POLYGON
) {
setLayerVisibility(LAYER_CYCLONE_BUFFERS);
}
return undefined;
});

// NOTE: Uncertainty is handled separately due to conflicting logic
// between the geometry type and the Class property.
footprint?.features?.find((feature) => {
if (feature?.geometry.type === 'LineString' || feature?.geometry.type === 'MultiLineString') {
setVisibleLayers((prevValue) => ({
...prevValue,
[LAYER_CYCLONE_TRACKS]: true,
}));
setActiveLayersMapping((prevValue) => ({
...prevValue,
[LAYER_CYCLONE_TRACKS]: true,
}));
if (feature?.properties?.Class
=== RISK_GEOMETRY_TYPE.GDACS_UNCERTAINTY_CONES) {
setLayerVisibility(LAYER_CYCLONE_UNCERTAINTY);
}
return undefined;
});

footprint?.features?.find((feature) => {
if (feature?.geometry.type === 'Polygon' || feature?.geometry.type === 'MultiPolygon') {
setVisibleLayers((prevValue) => ({
...prevValue,
[LAYER_CYCLONE_BUFFERS]: true,
}));
setActiveLayersMapping((prevValue) => ({
...prevValue,
[LAYER_CYCLONE_BUFFERS]: true,
}));
}
return undefined;
});

footprint?.features?.find((feature) => {
if (feature?.properties?.Class === 'Poly_Cones') {
setVisibleLayers((prevValue) => ({
...prevValue,
[LAYER_CYCLONE_UNCERTAINTY]: true,
}));
setActiveLayersMapping((prevValue) => ({
...prevValue,
[LAYER_CYCLONE_UNCERTAINTY]: true,
}));
}
return undefined;
});

return undefined;
},
});

Expand Down
91 changes: 42 additions & 49 deletions app/src/components/domain/RiskImminentEvents/WfpAdam/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
LAYER_CYCLONE_TRACKS,
LAYER_CYCLONE_UNCERTAINTY,
LayerType,
RISK_GEOMETRY_TYPE,
} from '#utils/domain/risk';
import {
type RiskApiResponse,
Expand All @@ -37,15 +38,21 @@ import EventListItem from './EventListItem';
function getLayerType(
feature: GeoJSON.Feature<GeoJSON.Geometry, GeoJSON.GeoJsonProperties>,
): CycloneFillLayerType {
if (feature.geometry.type === 'Point' || feature.geometry.type === 'MultiPoint') {
if (
feature.geometry.type === RISK_GEOMETRY_TYPE.POINT
|| feature.geometry.type === RISK_GEOMETRY_TYPE.MULTI_POINT
) {
return 'track-point';
}

if (feature.geometry.type === 'LineString' || feature.geometry.type === 'MultiLineString') {
if (
feature.geometry.type === RISK_GEOMETRY_TYPE.LINE_STRING
|| feature.geometry.type === RISK_GEOMETRY_TYPE.MULTI_LINE_STRING
) {
return 'track';
}

if (feature.properties?.alert_level === 'Cones') {
if (feature.properties?.alert_level === RISK_GEOMETRY_TYPE.WFP_ADAM_UNCERTAINTY_CONES) {
return 'uncertainty';
}

Expand Down Expand Up @@ -107,6 +114,17 @@ function WfpAdam(props: Props) {
},
});

const setLayerVisibility = useCallback((layer: LayerType) => {
setVisibleLayers((prevValue) => ({
...prevValue,
[layer]: true,
}));
setActiveLayersMapping((prevValue) => ({
...prevValue,
[layer]: true,
}));
}, []);

const {
response: exposureResponse,
pending: exposureResponsePending,
Expand All @@ -125,57 +143,31 @@ function WfpAdam(props: Props) {
: undefined;

stormPositions?.features?.find((feature) => {
if (feature?.geometry.type === 'Point' || feature?.geometry.type === 'MultiPoint') {
setVisibleLayers((prevValue) => ({
...prevValue,
[LAYER_CYCLONE_NODES]: true,
}));
setActiveLayersMapping((prevValue) => ({
...prevValue,
[LAYER_CYCLONE_NODES]: true,
}));
}
return undefined;
});

stormPositions?.features?.find((feature) => {
if (feature?.geometry.type === 'LineString' || feature?.geometry.type === 'MultiLineString') {
setVisibleLayers((prevValue) => ({
...prevValue,
[LAYER_CYCLONE_TRACKS]: true,
}));
setActiveLayersMapping((prevValue) => ({
...prevValue,
[LAYER_CYCLONE_TRACKS]: true,
}));
}
return undefined;
});

stormPositions?.features?.find((feature) => {
if (feature?.geometry.type === 'Polygon' || feature?.geometry.type === 'MultiPolygon') {
setVisibleLayers((prevValue) => ({
...prevValue,
[LAYER_CYCLONE_BUFFERS]: true,
}));
setActiveLayersMapping((prevValue) => ({
...prevValue,
[LAYER_CYCLONE_BUFFERS]: true,
}));
if (
feature?.geometry.type === RISK_GEOMETRY_TYPE.POINT
|| feature?.geometry.type === RISK_GEOMETRY_TYPE.MULTI_POINT
) {
setLayerVisibility(LAYER_CYCLONE_NODES);
} else if (
feature?.geometry.type === RISK_GEOMETRY_TYPE.LINE_STRING
|| feature?.geometry.type === RISK_GEOMETRY_TYPE.MULTI_LINE_STRING
) {
setLayerVisibility(LAYER_CYCLONE_TRACKS);
} else if (
feature?.geometry.type === RISK_GEOMETRY_TYPE.POLYGON
|| feature?.geometry.type === RISK_GEOMETRY_TYPE.MULTI_POLYGON
) {
setLayerVisibility(LAYER_CYCLONE_BUFFERS);
}
return undefined;
});

// NOTE: Uncertainty is handled separately due to conflicting logic
// between the geometry type and the alert_level property.
stormPositions?.features?.find((feature) => {
if (feature?.properties?.alert_level === 'Cones') {
setVisibleLayers((prevValue) => ({
...prevValue,
[LAYER_CYCLONE_UNCERTAINTY]: true,
}));
setActiveLayersMapping((prevValue) => ({
...prevValue,
[LAYER_CYCLONE_UNCERTAINTY]: true,
}));
if (feature?.properties?.alert_level
=== RISK_GEOMETRY_TYPE.WFP_ADAM_UNCERTAINTY_CONES) {
setLayerVisibility(LAYER_CYCLONE_UNCERTAINTY);
}
return undefined;
});
Expand Down Expand Up @@ -247,6 +239,7 @@ function WfpAdam(props: Props) {
populationImpact: feature?.properties?.population_impact,
windSpeedMph: feature?.properties?.wind_speed,
trackDate: formatDate(feature?.properties?.track_date, 'MM/dd hh:mm'),
stormStatus: feature?.properties?.storm_status,
maxStormSurge: feature?.properties?.max_storm_surge,
alertType: feature?.properties?.alert_level,
type: getLayerType(feature),
Expand Down
11 changes: 11 additions & 0 deletions app/src/utils/domain/risk.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,17 @@ export type EventGeoJsonProperties = PDCEventProperties
| GDACSEventProperties
| ADAMEventProperties;

export const RISK_GEOMETRY_TYPE = {
POINT: 'Point',
MULTI_POINT: 'MultiPoint',
LINE_STRING: 'LineString',
MULTI_LINE_STRING: 'MultiLineString',
POLYGON: 'Polygon',
MULTI_POLYGON: 'MultiPolygon',
WFP_ADAM_UNCERTAINTY_CONES: 'Cones',
GDACS_UNCERTAINTY_CONES: 'Poly_Cones',
};

export interface ClickedPoint {
feature: GeoJSON.Feature<GeoJSON.Point, EventGeoJsonProperties>;
lngLat: mapboxgl.LngLatLike;
Expand Down

0 comments on commit 251129e

Please sign in to comment.