3468 - GEO Refactor: Finalize and merge to main #3307
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Removing the Layer types from the 'forest' file since they are not specific to forest layers, and are used for all types of layers. Exporting/importing general layer types from the 'forest' layers file can be confusing, thus the change.
Adding the new layer types without removing or deprecating any other types, to avoid introducing breaking changes. This way the refactoring done to this point is easier to test and verify.
Added the sections array in a new file to avoid circular dependency issues. This file can later be used to handle additional typing for layer grouping as well.
Previously, the way the layers worked in the ui was that each type (Forest, Burned Area, Protected Area) would have its own component, but that is no longer the case as we are migrating to a generic approach. The upcoming UI component will render all types of layers, thus the hardcoded components need to be removed.
Added components to render the layers given the defined sections. The styles and structure of the components are taken from the previous implementation. The state of the components is local for now, as they are simply a placeholder before implementing redux.
* Add MapLayerKey type * Add mapper of sections to corresponding API endpoint * Comment out layers not yet implemented in the backend Also fixing ESAWorldCover metadata. * Move LayerRequestBody to meta/api/request/geo/layer * Render layers when toggling and when fetching sucessfully A layer is fetched using postLayer when it is selected and it does not have a mapId set. Then when the status of the fetch is successful, the layer is rendered on the map. If it is loading or has failed, the remove method is called to ensure it is not shown. If the fetch fails, the layer is unselected and the mapId is set to empty so the user can try again. * Set map layers opacity
* Call postLayer action from GeoActions * Ignore any Agreement layer for global opacity changes * Add getLayerRequestBody function * Fetch layer on submit and remove local assetId state * Delegate url and body construction to postLayer
* Rename minTreeCoverPercentage to gteTreeCoverPercent Renaming to gteTreeCoverPercent as that's how it is called in the backend. * Add redux logic to set gteTreeCoverPercent * Add TreeCoverPercentageControl component Added a component to handle layers with a percent picker. Added logic to handle that component in LayerSectionPanel. The new logic includes a 'fetch' flag to 'toggle' layer, so we can prevent fetching the layer when toggling. This is because when the user selects a layer, they should be able to see its menu before it is fetched. * Add custom hook to fetch layer when gteTreeCoverPercent changes This custom hook fetches a layer that has gteCoverPercent whenever it changes. This hook intentionally does not fetch the layer when the countryIso changes. This will be done later with a custom hook of its own.
* Add LayerResponseData type and logic Adding a response data type since the layers API not only returns a mapId but also some other information, like palette, which is necessary for the agreement layer. * Add logic to build the agreement layer req body Adding a builder for the agreement layer calls, using the section state with which the postLayer action was called. That state is later used to get the selected layers and add them to the layers array in the api call. * Add redux state management for the agreement layer Adding logic to set the agreement level, and to set the palette once the data is retrieved using the postLayer action. * Add custom hook to fetch agreement layer on level change * Add UI components for the agreement layer Adding the UI components and logic for the agreement layer. The styles are the same as before. I replaced some scss colors with the defined generics we have, but not all colors were replaceable. Further styling changes can be later added in a styling specific refactor. * Get LayerState and SectionState from within postLayer action * Update useAgreementLevel Deleting the unnecessary hooks and updating after delegating the state check to the postLayer action. * Move and rename useAgreementLevel to useFetchAgreementLevelLayer Moving useAgreementLevel (now useFetchAgreementLevelLayer, as that is more accurate and descriptive) to GeoMap/hooks. * Move and rename useGteTreeCoverPercent to useFetchGteTreeCoverPercentLayer Moving this hook to GeoMap/hooks and giving it a better descriptive name as well. * Delete unnecessary usePrevious from useFetchGteTreeCoverPercentLayer Since we now get the state from within postLayer, the usePrevious hook here becomes unnecessary.
* Get agreement palette from layers config The backend will no longer send back layer info other than the mapId, so now the agreement palette will be taken from the layers config instead. The backend used to send back a sliced version of the same palette, but we can just get it from the config directly. * Re fetch agreement layer when selected layers change
* Add redux state setter for layer year * Extend useFetchGteTreeCoverPercentLayer to handle other options The useFetchGteTreeCoverPercentLayer hook was set up to keep track of the selected percent. That logic is exactly the same as the logic needed to handle the selected year, so now the hook is extended to accept different options properties. The agreement layer needs more specific logic so it is omitted. * Add year selector UI component
* Update layer recipes type The recipe type used the deprecated 'gteHansenTreeCoverPerc' property and an array of layer keys. That was not sufficient because the layers now have other options such as assetId or year. Instead, recipes now consist of an array of 'LayerSource', which encapsulates all the options. The function 'getRecipeAgreementAreaProperty' was used for the statistics module, and after the changes to the recipes, it no longer works. It will be fixed if needed after the statistics module is addressed. * Add optional layerSource param to postLayer Adding the option to fetch a layer with a layerSource, this way if the layerSource is given, then there won't be a need to construct it. * Add state management for recipe name and all layerOptions Adding a recipe property to GeoState to keep track of the selected recipe. Also added a reducer to update all options in a layer. * Add 'setLayerSectionRecipe' action This action selects all layers that are part of a recipe, with their given options (e.g. gteTreeCoverPercent, year, etc.). It also unselects all layers that are not part of the recipe. * Add hook to keep track of a section's selected recipe * Add recipe selector UI component * Turn toggleLayer slice action into an asyncThunk action * Delegate cache logic to toggleLayer action * Turn layer opacity slice actions into async thunks Adding setLayerOpacity and setSectionGlobalOpacity async thunks to handle cases where a layer opacity is set but the layer has not been fetched (e.g after selecting a recipe).
* Add useCountSectionSelectedLayers to agreement layer componet * Add setMapLayer slice action * Add all layer sections app selector * Add layers handler for country iso changes
* Add titles to sections and layers * Add extra estimation types * Add postExtraEstimation action * Add extra estimation slice actions * Add extra estimation reducer scale ui component
* change mosaic label * Update Statistics panel labels * Update custom asset labels * Add custom csv data download for Extent of forest table
…en and with year selector (#3422) * Fetch gteTreeCoverPercent layer with first option when selected * Fetch agreement layer when selected * Reset recipe to custom when toggling layers * Add cache for special layers * Reset agreement layer if number of selected layers < selected level * Draw layer with current opacity when selected
…#3475) * Remove hidden layers from the map * Show layer menus when errors happen * Match custom asset behavior with dev * Remove fetch of special layers with opacity 0
yaguzmang
changed the title
minotogna
approved these changes
Feb 7, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Refactor of the Data Layers of the Geo module.
The main change is going from specific logic and hooks for each section (Forest Layers, Protected Area Layers, and Burned Area Layers) to logic that can dynamically handle them based on configuration. So now, when a new section is needed, instead of adding new components and hooks, we just need to add the configuration to a list.
Layers with options (like tree cover percentage, years, or agreement) are also handled dynamically based on their configuration.
The UI is the same as before (besides text changes #2581 and minor adjustments):
2024-02-07.09-28-04.mp4
2024-02-07.09-32-19.mp4
2024-02-07.09-35-48.mp4
Closes #3468