Implement Quick Access feature in LayerSwitcher #1437
Conversation
…evel-snackbar-display
Resolved an issue where toggling a parent group's visibility did not accurately reflect the visibility of its sublayers. The `setGroupHidden` and `setGroupVisible` functions were updated to maintain the correct state of `visibleSubLayers`.
…evel-snackbar-display
The following features have been added in this commit: SnackbarProvider.js: - Create `SnackbarContext` to share snackbar state and controls among components. - Implement `SnackbarProvider` component to set up `SnackbarContext` provider using the `useSnackbar` hook from `notistack` for snackbar controls. - Initialize shared state (`messageItems`) to hold list of messages for snackbar display. - Utilize `NotistackSnackbarProvider` to render the snackbar and provide the shared state and functions through `SnackbarContext`, enabling access to snackbar controls and shared state in child components. useSnackbar.js: - Create `useSnackbar` custom hook to manage snackbar messages with methods for adding (`addToSnackbar`), removing (`removeFromSnackbar`), hiding (`hideSnackbar`), displaying snackbar messages without storing (`displaySnackbar`) and clearing all messages (`clearAllMessages`). - Implement functionality to handle group and layer specific snackbar messages for visibility notification of layers at different zoom levels. - Include handling for non-grouped messages, displaying individual messages as standalone notifications. - Add a close action button to each snackbar message and enable automatic control of snackbar visibility duration. App.js: - Update `SnackbarProvider` import statement to use the `SnackbarProvider` component.
…arch-in-layerswitcher
Implement a queue-based system to manage state updates in the `useSnackbar` function to solve race conditions. Changes include: 1. Create a new `updateQueue` ref to hold all state update operations. 2. Adjust `addToSnackbar` and `removeFromSnackbar` to push their state update functions into `updateQueue`, rather than executing them directly. 3. Add a new function `processQueue` that takes the next update function from the queue and executes it. 4. Call `processQueue` in `addToSnackbar` and `removeFromSnackbar` after their update is pushed into the queue, starting the processing of queued updates.
1. Import and implement `useSnackbar` custom hook for managing notifications. This enables addition, removal, and display of Snackbar messages. 2. Update the `listenToZoomChange` and `zoomEndHandler` functions to effectively handle zoom level changes and visibility of the layer at the current zoom level. 3. Refactor render logic to adjust CheckBoxIcon's color based on layer visibility, type, and zoom level.
Changes include: 1. Import and implement `useSnackbar` custom hook in GroupLayer for handling notifications. 2. Use a custom hook within a `useEffect` to remove layer captions from the Snackbar message when the visibility of sublayers in a group changes. 3. Update the `handleLayerItemClick` method in GroupLayer to manage visibility toggling of group layers and remove the appropriate layer captions from the Snackbar message. 4. Pass `zoomVisible` state as a prop from GroupLayer to SubLayerItem component to ensure consistent layer visibility management. 5. Modify the `getLayerToggleIcon` function in SubLayerItem to adjust the icon color based on the zoom visibility.
Import `useSnackbar` in MapCleaner to use `clearAllMessages` that clears all Snackbar messages.
…-add-theme-management
Changes include: - Add features that allow users to create new `Quick Layers` by inputting data into fields. - Ability to add and delete layers. - Import and validate JSON data. - Automatically generate unique IDs for each `Quick Layer`. - All `Quick Layers` are displayed in a list. - Filter feature to search through the list of `Quick Layers`. - A success message is displayed if the save or import was successful, and an error message is shown if the save or import failed.
Add new classes for managing Quick Layers in the backend. Changes include: `LayerMenuOptions.cs`: New property `quickLayersPresets` to store a list of `Quick Layer` presets. `QuickLayer.cs`: This class defines the structure of a `Quick Layer`. `QuickLayerMetadata.cs`: This class holds metadata about a `Quick Layer`. `QuickLayerPreset.cs`: This class represents a `Quick Layer` preset.
Optimize performance by utilizing `useCallback` and update `useEffect` dependencies to resolve ESLint errors.
Add default values to various configuration settings in `simpleMapConfig.json`. A notable addition is an example for the `quickLayersPresets`.
|
The bugs related to the default configurations should now be resolved, and updated examples have been committed. @jacobwod, could you check and confirm? Specifically, are you still encountering the issue with your configuration after attempting to re-save all configuration files in the admin UI? |
|
@linusfj, it's good to see that you've made changes to the config files. (However, it seems that you've introduced unresolved conflicts in your recent commit.) However, significant bugs and the slowdown in overall UI responsiveness introduced in this PR still remain, as far as I can tell. Given these facts, this PR is not ready for merge yet, which we also discussed last week. I hope that you understand that given the state of this PR, I currently see no point in testing it thoroughly again. |
|
Converted PR to draft to reflect the current state:
|
This commit improves the LayerSwitcher's behavior by introducing auto-expansion of groups during filtering and ensuring a clean and organized view when the filter is cleared. Changes made: - Enabled auto-expansion of parent groups when a filter match is found within nested layers, improving the visibility of search results. - Optimized filter handling by ensuring groups that contain matched layers are expanded during filtering. - Introduced a reset mechanism to collapse all groups and clear layer filtering states when the filter input is cleared, preventing the display of an unnecessarily long and cluttered list.
- Enabled detailed view toggle for system layers. - Ensured CQL filter and Quick Access button are conditionally displayed based on layer type. - Improved code robustness for handling undefined properties in related components.
…-layers-in-layerswitcher
|
Here is a summary of the current status: The current method for saving Resolved issues:
Unresolved issues:
|
Thanks for the summary and the resolved issues! An addition to the unresolved issues:
I am looking forward to test-results from other Hajk-organizations. |
- Converted LayerGroup back from React.Component to React.PureComponent. - Resolved an issue where clearing the filter did not correctly reset the list of layers and groups. This was due to the state not being updated properly in the case of nested structures (groups, layers, sublayers). - Enhanced the `resetFilterStatus` method to ensure proper resetting of the filter status. Now, it recursively marks each node as filtered (`isFiltered = true`) and collapsed (`isExpanded = false`). This ensures that the filter status is correctly propagated to all child components. - Updated the `handleFilterValueChange` method to create a new layer tree structure before resetting the filter status. This change involves creating a shallow copy of each top-level node and applying `resetFilterStatus` to update the filter status throughout the tree.
|
The performance in Sydnärke is acceptable with the current number of layers used in Hajk. But since the number of layers will increase the performance issue may show up when you least want it. Two other suggestions:
|
|
I have addressed the rendering performance issues. By reverting to |
The 'information' tool, if present in the mapConfig, is recognized as a supported tool and not flagged as unsupported. Closes #1118.
This reverts commit 0fb1686.
Adjust the padding-bottom property of an element to ensure the last list item in the background layers tab is fully visible.
Issue: After loading a layer package (theme), all system layers were inadvertently removed from the map, which prevented them from being added again afterwards. Solution: The `resetVisibleLayers` function was updated to keep layers marked as 'system'. This adjustment ensures that system layers are not affected during the process of resetting layers.
IntroThis is a follow-up to my initial review. FindingsWarningsOn initial launch, console warnings still prevail. The UI (fonts, line heights, more) seem "off"Compare the new one: With the current look: I don't see why we should change the ratio between font size and line heights - the Material UI defaults are well-thought out and should remain. Still blank details viewSkarminspelning.2024-02-14.kl.13.51.47.movUnacceptably many re-renderings when hovering a basic UI elementsThis has been "felt" by many but I don't think we've done any actual tests. Here it is. Current
|
|
Here is some things I noticed. I can't scroll at all
Depth warning (One of the reasons it's laggy?)
Can toggle when nothing below
|
This commit splits the previously combined `useEffect` into separate hooks. It also addresses a critical performance issue where the component could enter an infinite rendering loop, leading to a "Maximum update depth exceeded" error.
This commit improves the filter logic within the `LayerSwitcherView component. Now, when a group's name matches the filter text, all layers and subgroups within that group are made visible, even if they do not individually match the filter text. Key changes include: - Filter matches both up and down the hierarchy, ensuring parent groups expand to reveal matching children and that all items within a matching group are shown. - Updating the `filterTree` function to consider matches on parent nodes and apply visibility and expansion accordingly.
After loading a `Favorite`, all system layers were inadvertently removed from the map, which prevented them from being added again afterwards.
This pull request introduces the
Quick Accessfeature and additional enhancements as described in issue #1380.Key features implemented include:
Quick Accessgrouping inLayerSwitcherfor access to frequently used layers.LayerSwitcherfor efficient layer management.Snackbarnotifications for layer toggling actions.LayerSwitcher.Draw Ordertab functionality for managing layer drawing order.Quick Accessin the admin UI.Closes #1237, #1257, #1284, #1296, #1300, #1347, #1365, and #1380.