Update in operation map for crisis categorization#2282
Update in operation map for crisis categorization#2282frozenhelium merged 3 commits intoproject/surge-eru-updatefrom
Conversation
🦋 Changeset detectedLatest commit: 9580ed3 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
shreeyash07
requested review from
AdityaKhatri,
barshathakuri,
frozenhelium and
subinasr
shreeyash07
force-pushed
the
feat/operation-map-update
branch
3 times, most recently
from
8a4dcf5 to
6e29f18
Compare
| bbox: LngLatBoundsLike | undefined; | ||
| appealResponse?: AppealResponse; | ||
| legendOptions: LegendOptions[]; | ||
| setPresentationMode: (presentation: boolean) => void; |
There was a problem hiding this comment.
setPresentationMode implies an action to set the presentation mode, but this is a callback indicating the change. Let's update the prop name to reflect what it does!
| setPresentationMode: (presentation: boolean) => void; | |
| onPresentationModeChange: (presentationMode: boolean) => void; |
| const crisisCircleColor: CirclePaint['circle-color'] = [ | ||
| 'match', | ||
| ['get', 'severityLevel'], | ||
| DISASTER_CATEGORY_ORANGE, | ||
| COLOR_ORANGE_SEVERITY, | ||
| DISASTER_CATEGORY_RED, | ||
| COLOR_RED_SEVERITY, | ||
| DISASTER_CATEGORY_YELLOW, | ||
| COLOR_YELLOW_SEVERITY, | ||
| DISASTER_UNCATEGORISED, | ||
| COLOR_BLACK, | ||
| DISASTER_MULTIPLE, | ||
| COLOR_GREEN, | ||
| COLOR_LIGHT_BLUE, | ||
| ]; | ||
|
|
||
| const crisisBasePointPaint: CirclePaint = { | ||
| 'circle-radius': 5, | ||
| 'circle-color': crisisCircleColor, | ||
| 'circle-opacity': 0.8, | ||
| }; | ||
|
|
||
| export const crisisBasePointLayerOptions: Omit<CircleLayer, 'id'> = { | ||
| type: 'circle', | ||
| paint: crisisBasePointPaint, | ||
| }; | ||
|
|
||
| const crisisBaseOuterCirclePaint: CirclePaint = { | ||
| 'circle-color': crisisCircleColor, | ||
| 'circle-opacity': 0.4, | ||
| }; | ||
|
|
||
| const crisisOuterCirclePaintForFinancialRequirements: CirclePaint = { | ||
| ...crisisBaseOuterCirclePaint, | ||
| 'circle-radius': [ | ||
| 'interpolate', | ||
| ['linear', 1], | ||
| ['get', 'financialRequirements'], | ||
| 1000, | ||
| 7, | ||
| 10000, | ||
| 9, | ||
| 100000, | ||
| 11, | ||
| 1000000, | ||
| 15, | ||
| ], | ||
| }; | ||
|
|
||
| const crisisOuterCirclePaintForPeopleTargeted: CirclePaint = { | ||
| ...crisisBaseOuterCirclePaint, | ||
| 'circle-radius': [ | ||
| 'interpolate', | ||
| ['linear', 1], | ||
| ['get', 'peopleTargeted'], | ||
| 1000, | ||
| 7, | ||
| 10000, | ||
| 9, | ||
| 100000, | ||
| 11, | ||
| 1000000, | ||
| 15, | ||
| ], | ||
| }; | ||
|
|
||
| export const crisisOuterCircleLayerOptionsForFinancialRequirements: Omit<CircleLayer, 'id'> = { | ||
| type: 'circle', | ||
| paint: crisisOuterCirclePaintForFinancialRequirements, | ||
| }; | ||
|
|
||
| export const crisisOuterCircleLayerOptionsForPeopleTargeted: Omit<CircleLayer, 'id'> = { | ||
| type: 'circle', | ||
| paint: crisisOuterCirclePaintForPeopleTargeted, | ||
| }; |
There was a problem hiding this comment.
We don't need to separate out any of these, we can just add one more condition to circleColor and switch by variant
| const layerOptions = useMemo(() => { | ||
| if (variant === 'crisis') { | ||
| if (scaleBy === 'peopleTargeted') { | ||
| return crisisOuterCircleLayerOptionsForPeopleTargeted; | ||
| } | ||
| return crisisOuterCircleLayerOptionsForFinancialRequirements; | ||
| } | ||
| if (scaleBy === 'peopleTargeted') { | ||
| return outerCircleLayerOptionsForPeopleTargeted; | ||
| } | ||
| return outerCircleLayerOptionsForFinancialRequirements; | ||
| }, [variant, scaleBy]); |
There was a problem hiding this comment.
We don't need to separate this out, it's better if the switch happens in the mapbox expression
| > | ||
| <MapLayer | ||
| layerKey="point-circle" | ||
| layerOptions={variant === 'crisis' ? crisisBasePointLayerOptions : basePointLayerOptions} |
There was a problem hiding this comment.
We don't need to separate this out, it'll remount the whole component, let's use mapbox expression instead
| properties: { | ||
| id: country.iso3, | ||
| appealType: operation.appealType, | ||
| severityLevel: operation.severityLevel, | ||
| peopleTargeted: operation.peopleTargeted, | ||
| financialRequirements: operation.financialRequirements, |
There was a problem hiding this comment.
We can pass on variant here, and conditionally update the circle color
| [appealResponse], | ||
| ); | ||
|
|
||
| const countryCentroidGeoJson = useMemo((): GeoJSON.FeatureCollection<GeoJSON.Geometry> => { |
There was a problem hiding this comment.
Since, we're separating out MapContainer, data related part should reside in ActiveOperationMap
There was a problem hiding this comment.
If we do this, separating by variant won’t make sense. The variant won’t be used inside the child component, and we might need to use another UI component (like a segmented input) instead of tabs.
- Create new component for active operation map Container - Add tabs for crisis categorization and appeals type map - Add new base point layer for crisis categorization
shreeyash07
force-pushed
the
feat/operation-map-update
branch
from
f8fdc74 to
9580ed3
Compare
| )); | ||
| return highestSeverity[0]; | ||
| } | ||
| if (uniqueEventList.length === 0) return DISASTER_UNCATEGORISED; |
There was a problem hiding this comment.
This should be the first statement
2 participants
Addresses
Depends On
Changes
This PR Ensures:
console.logstatements meant for debugging