Frontend Release to Main [3.04] #1596
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
Add new protected route which the interactive map of team locations will eventually be accessed from. Only users who can see the Reports dropdown can access this route. Also add the new files to .prettierignore to comply with Frontend PR#938
This data will eventually be displayed when clicking markers on the map.
The Team Locations page is intended to be a non-scrollable page, so the back to top button isn't needed here and messes with the layout. It's added back when the component is unmounted so it still works on other pages.
Add map options for better UX, such as starting the map at a reasonable zoom level, setting the initial center to be a reasonable place, setting panning boundaries, etc.
Display markers corresponding to each user. On click, a popup appears showing their name, job title, and location. Currently the locations of each marker are randomly chosen, because geocoding functionality hasn't been implemented yet.
- Add logic to pass each user's human-readable location to a geocoding API and retrieve the corresponding latitude and longitude of the location. To reduce number of API calls, an API call is not made if the location is obviously invalid (ex. empty string.) For testing purposes only a maximum of 100 API calls are made currently, since there is a limit of 2500 calls per day with the test API key. - Also, add logic to display markers at the user's actual location in the world, since the correct latlng information has been obtained. Only users with a valid location are displayed on the map. - Change the marker appearance to that of a circle.
Add marker clustering functionality. This is necessary since it is possible for multiple people to have the same location, thus their markers will overlap. The marker clustering plugin prevents this. As a bonus, it also shows how many markers are represented by a cluster. - New package react-leaflet-cluster
Add caching functionality via localStorage to reduce the number of network requests and dramatically speed up rendering of markers.
change a localStorage.getItem() call to use correct arguments
Since we are limited to only 2500 requests/day for the geocoding API in production, requests must be kept at a minimum. Here's some of the facts: - Everybody who has ever contributed to OneCommunity will be displayed on the map. This means a lot of different locations. A request for each unique location will contribute a lot towards this limit. - A public facing version of this map is planned. and for every new user who views the map, there will be a ton of API calls made since their browser has not cached the data yet. - The cache is implemented via localStorage, and if it is cleared, a bunch of API requests will be made again. This means somebody could - intentionally or unintentionally, make us reach our limit in the span of a few minutes. Therefore, the current approach of caching the data in the browser as a rate limiting technique is not feasible given our siutation. Instead, a better way is to store the latlng as a property of a user's profile in the database and only call the API to update the latlng when a new user is created or when their location changes. Then, when someone visits the map, there are zero API calls made since the locations have been precomputed and stored in the backend. Therefore: - remove caching logic - add mock data similar to how the new response from the backend would look like
Refactor logic so that the explicit conditional check to render or not render a marker based on whether the location is valid or not is removed, and instead the array of users is filtered beforehand to only include users with valid locations. Makes the JSX cleaner. Also, added an example user with no valid location to show how the map code handles it.
Change it to to something more accurate.
Add new protected route which the interactive map of team locations will eventually be accessed from. Only users who can see the Reports dropdown can access this route. Also add the new files to .prettierignore to comply with Frontend PR#938
This data will eventually be displayed when clicking markers on the map.
The Team Locations page is intended to be a non-scrollable page, so the back to top button isn't needed here and messes with the layout. It's added back when the component is unmounted so it still works on other pages.
Add map options for better UX, such as starting the map at a reasonable zoom level, setting the initial center to be a reasonable place, setting panning boundaries, etc.
Display markers corresponding to each user. On click, a popup appears showing their name, job title, and location. Currently the locations of each marker are randomly chosen, because geocoding functionality hasn't been implemented yet.
- Add logic to pass each user's human-readable location to a geocoding API and retrieve the corresponding latitude and longitude of the location. To reduce number of API calls, an API call is not made if the location is obviously invalid (ex. empty string.) For testing purposes only a maximum of 100 API calls are made currently, since there is a limit of 2500 calls per day with the test API key. - Also, add logic to display markers at the user's actual location in the world, since the correct latlng information has been obtained. Only users with a valid location are displayed on the map. - Change the marker appearance to that of a circle.
Add marker clustering functionality. This is necessary since it is possible for multiple people to have the same location, thus their markers will overlap. The marker clustering plugin prevents this. As a bonus, it also shows how many markers are represented by a cluster. - New package react-leaflet-cluster
Ramya Lint Fix PopupBar component
…ding Shihao - Loading Unit Test
…e_Log_Efficiency Add curruserId into data
…eChart Shantanu unit test pie chart
…mentTable_Unit_Test Shiwani BadgeDevelopmentTable unit test
Removed "btn:hover" with "background-color: #0f8292" property property so that the "btn" styles are reflected from "reactstrap" for consistency.
…ime_Log_Entry_Refresh_Bug Roberto- Fixes Time Entry Log Modal Issues
…Colors_Everywhere Jahanzaib Fix Hover Colors Everywhere
…-test-for-ProjectTable.jsx Jiangwei create unit test for project table.jsx
Shrey unit test cases paging.jsx
…Charts_UnitTest TuanDinh_TeamsReportCharts_Unit_Test
…unityGlobal/HighestGoodNetworkApp into leon_add_interactive_map
…ng-box-shadow Shubhankar added missing box shadow style to buttons
Shrey unit test cases Modal file
…_map Leon and Oleksandr add interactive map
…ent-unit-test Sahil_BadgeDevelopment_UnitTest
…hotfix Oleksandr map build hotfix
…harts_Unit_Test TuanDinh_TeamReportCharts_Unit_Test
…ogs_Unit_Test TuanDinh_TeamReportLogs_Unit_Test
…ure_Count_To_Zero_Deletes_Badge Miguel - Changing Feature Count To Zero Deletes Badge
Gary add materials page
…_files XiaoW_Hot fix of failed png files
…he-error-message-when-entering-an-incorrect-location Xiao F Hotfix text of the error message when entering an incorrect location
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.
Includes 1540 (Loading Unit Test), 1521 (Improve efficiency of time log page), 1554 (unit test pie chart), 1547 (BadgeDevelopmentTable unit test), 1508+602 (🔥 Time Entry Log Modal Issues), 1571 (🔥 Hover Colors Everywhere), 1568 (create unit test for project table.jsx), 1559 (unit test cases paging.jsx), 1558 (TeamsReportCharts_Unit_Test), 1518 (Add Profile Page missing box Shadow Style in User Profile Component), 1501 (unit test cases Modal file) 1503+599 (interactive map), 1579 (BadgeDevelopment_UnitTest), 1586 (🔥 map build), 1528 (TeamReportCharts_Unit_Test), 1530 (TeamReportLogs_Unit_Test), 1488 (Changing Feature Count To Zero Deletes Badge), 1427+577 (add materials page), 1592 (🔥 of failed png files), 1594 (🔥 text of the error message when entering an incorrect location)