Chris_spinning_wheel_date_change_reports #2298

chrischenlixing · 2024-05-30T06:04:35Z

Description

The issue with the original pr is that when the date is changed, there isn't an indicator to show that the data is retrieved or not. With the spinning wheels added, it's going to spin until the newest data is ready and graph is rerendered.

Related PRS (if any):

This PR is a minor patch for the functionality implemented in PR #2268.
No backend pr related, for the backend just check-in to the development branch

Main changes explained:

Added the state for "dataReady" and "setDataReady" for the spinning wheel of the total people report
Added the state for "dataReady" and "setDataReady" for the spinning wheel of the total project report

How to test:

check into current branch
do npm install and ... to run this PR locally
Clear site data/cache
log as admin user
go to Reports →Reports → Projects/People/Teams
Click on ‘Show Total Project Report’, ‘Show Total People Report’, and ‘Show Total Team Report’ one by one
Change the end date to last year or any date you would want to test, see if there is a spinning wheel on there before the new report is shown for the new date

Screenshots or videos of changes:

Before, when changing the date for People Report and Project Report to a different date, the date would be refreshed to the new date but the new graph is lagged to render.

With the new spinning wheel, it's not going to show the graph until the new graph is ready with the updated date.

Vijeth-V · 2024-05-31T04:02:18Z

This works perfectly. The report would be displayed with the new date.

mohabbasd

Hello, I tested you PR and I can see the spinning wheel, it's just that for some reason I am unable to access the database in this particular page other wise everything works. Below is a video for your reference.

Screen.Recording.2024-05-31.at.11.44.02.PM.mov

Sandhya1236

While testing the recent updates that add spinning wheels to indicate data loading status when the date is changed, I encountered several issues. This PR is a minor patch for the functionality implemented in PR #2268, with no related backend PR. The main changes involved adding states for dataReady and setDataReady to handle the spinning wheels for the total people report, total project report, and total team report.

After checking into the current branch and running npm install, I cleared the site data and cache. I logged in as an admin user and navigated to Reports → Reports → Projects/People/Teams. I clicked on 'Show Total Project Report', 'Show Total People Report', and 'Show Total Team Report' one by one. When changing the end date to test different dates, the spinning wheel appeared as expected before the new report was shown.

However, I was unable to access the database on this particular page, which prevented me from fully verifying the functionality of the spinning wheel and data retrieval. Despite the spinning wheel displaying correctly, the inability to access the database means I couldn't confirm if the data was being retrieved and the graph was being re-rendered accurately. This issue needs to be resolved to ensure that the data loading indicator and data retrieval processes are functioning correctly.

HGN.APP.-.Google.Chrome.2024-05-31.21-57-24.mp4

chrischenlixing · 2024-06-01T05:41:58Z

While testing the recent updates that add spinning wheels to indicate data loading status when the date is changed, I encountered several issues. This PR is a minor patch for the functionality implemented in PR #2268, with no related backend PR. The main changes involved adding states for dataReady and setDataReady to handle the spinning wheels for the total people report, total project report, and total team report.

After checking into the current branch and running npm install, I cleared the site data and cache. I logged in as an admin user and navigated to Reports → Reports → Projects/People/Teams. I clicked on 'Show Total Project Report', 'Show Total People Report', and 'Show Total Team Report' one by one. When changing the end date to test different dates, the spinning wheel appeared as expected before the new report was shown.

However, I was unable to access the database on this particular page, which prevented me from fully verifying the functionality of the spinning wheel and data retrieval. Despite the spinning wheel displaying correctly, the inability to access the database means I couldn't confirm if the data was being retrieved and the graph was being re-rendered accurately. This issue needs to be resolved to ensure that the data loading indicator and data retrieval processes are functioning correctly.

HGN.APP.-.Google.Chrome.2024-05-31.21-57-24.mp4

Hi Sandhya, I tried to optimize some of the frontend rendering to make it load faster. Please test it again and be patient for it to render. Thanks!

peter6866

Great work on effectively addressing the lack of user feedback after changing report dates. The addition of loading spinners is a great improvement to the user experience.

https://www.loom.com/share/ba3cc185193d40d483fb8f2893f5bb9a?sid=e000794a-2567-49e9-ade4-20cb04291f17

tianyangL11

It works perfectly. Please see the attached screenshots

JatinAgrawal94

Feature works as expected. Great Work!

PR.2298.mp4

nishithaShetty · 2024-06-06T00:34:32Z

Hi Chris, Nice work!
It works as expected. It functions properly for Projects, People, and Teams. During loading and when changing the dates for the given modules, the spinning wheel is rendered.

CloudyZ524

Hi Chris,
The spinning wheel updated in this pull request works well and the date were updated correctly when I reset the date ‘Show Total Project Report’, ‘Show Total People Report’, and ‘Show Total Team Report’ one by one. Good job!

One suggestion about the content display is that I noticed the date format from the textbox of date selection and the date format on the report is different, which might cause some confusion to users. It would be more clear to unify the date format in the same page.

akshit0211 · 2024-06-06T14:04:52Z

Hi Chris, great work for adding this spinning wheel functionality. It is working as expected for all three reports.

Wenboooooo

Hello, I have tested the functionality using the admin account, the spinning wheel displayed as expected, great work!

2298.mp4

PabloWang

Hi Chris, good work! It works as expected

Sudershhh

Hi Chris,
The feature works as expected.

With this in mind, here are 2 more code changes that could be done to significantly enhance user experience.

Renaming the dataReady state variable.
Vertically aligning the loading spinner.

Sudershhh · 2024-06-07T21:54:33Z

src/components/Reports/TotalReport/TotalPeopleReport.jsx

@@ -11,7 +11,7 @@ import Loading from '../../common/Loading';
 function TotalPeopleReport(props) {
  const { startDate, endDate, userProfiles, darkMode } = props;
  const [dataLoading, setDataLoading] = useState(true);
-  const [dataRefresh, setDataRefresh] = useState(false);
+  const [dataReady, setDataReady] = useState(false);


Perhaps it's better to name the state variable as specific as possible for better code readability and user experience.
For example, instead of dataReady , we could have totalPeopleReportDataReady or something along the lines of that. This would effectively convey the proper idea behind the state variable.

Sudershhh · 2024-06-07T22:10:24Z

src/components/Reports/TotalReport/TotalProjectReport.jsx

@@ -287,7 +242,7 @@ function TotalProjectReport(props) {

  return (
    <div>
-      {dataLoading ? (
+      {!dataReady ? (
        <Loading align="center" darkMode={darkMode}/>


The Loading animation can be centered Vertically around the mid area point of the div bar. It works correctly around the X-axis.

jennZhang93

Tested with owner account, I was able to see spinning wheels when graph isn't ready to load. One improvement suggestion is to alert user on the date range that the date selector can handle. Or block off the dates that shouldn't be selected. In the video below, I was trying to set the start date to 2004, but it keeps jumping back to 2014. I was confused for a minute until I realized that 2004 was too early.

newScreen.Recording.2024-06-07.at.7.47.49.PM.mov

Sudershhh

Thanks for updating the requested changes. The new variables look good and more meaningful.

Jingyii800

Hi Chris, I tested this feature with admin account. the wheel looks good while waiting for the chart generating.

bandicam.2024-06-12.15-22-41-640.mp4

TXMO-dev

I checked out the branch, and it worked as desired. Everything functions correctly. Approved!

suaniii

Hi, I've tested your PR, and it works well. I clicked into the reports page, then clicked on ‘Show Total Project Report’, ‘Show Total People Report’, and ‘Show Total Team Report’ one by one, and there was a spinning wheel displayed. Then, I changed the start date and end date, and the spinning wheels also displayed when the data was being retrieved. Great work!

2298.admin.mov

Sandhya1236

The original PR had an issue where changing the date did not provide any indication if data retrieval was in progress or completed. This PR addresses the problem by adding spinning wheels to indicate data loading until the newest data is ready and the graph is re-rendered. It is a minor patch for the functionality implemented in PR #2268 and does not require any backend PR; for the backend, just check in to the development branch. The main changes include adding state variables dataReady and setDataReady for the spinning wheels in the total people and total project reports. To test, check into the current branch, run npm install and necessary commands to run this PR locally, clear site data/cache, log in as an admin user, navigate to Reports → Reports → Projects/People/Teams, and click on ‘Show Total Project Report’, ‘Show Total People Report’, and ‘Show Total Team Report’ one by one. Change the end date to last year or any other date you want to test, and verify if the spinning wheel appears before the new report is shown for the new date. The functionality was successfully tested, and everything is working fine.

HGN.APP.-.Google.Chrome.2024-06-13.23-20-42.mp4

Trip2310 · 2024-06-14T20:31:06Z

The functionality was tested by following the given steps. It works perfectly. Some screenshots attached

Trip2310

I've tested this PR, and it works well. Following given testing steps one by one, and there is a spinning wheel displayed after that, I changed the date and year, and the spinning wheels displayed and shows all data smoothly. I approve
Working well

Kavil-Jain-514

The spinning wheel appears every time there is a load time when displaying the reports and changing dates.
The PR works well.

PR.2298.mp4

sahithidhulipala9 · 2024-06-14T21:29:18Z

Hi Chris, I have checked your PR and it is working perfectly. I have followed the steps you mentioned to check the functionality. Spinning wheel is working as it should be while loading the data. I have also checked changing the start and end dates and tried for all 3 i.e. for Show Total Reports, Hide Total People Report, Show Total Team Report.

https://www.loom.com/share/0e359bb9163f4869990bed9b7a1acba0?sid=e7b6018f-6f8c-4e03-96db-659e98302db2

ImzIssa

The changes look good. Nice work.

vishavk1992

Hi chris , Tested this PR for for the spinning wheel of the total people report and project report. it works great and spinning wheel looks good.

one-community · 2024-06-29T01:16:55Z

Thank you all, merging!

spinning_wheel_added_for_people_and_project_report

245d84e

mohabbasd previously approved these changes Jun 1, 2024

View reviewed changes

Sandhya1236 suggested changes Jun 1, 2024

View reviewed changes

optimize frontend rendering speed

c0a93c4

chrischenlixing dismissed mohabbasd’s stale review via c0a93c4 June 1, 2024 06:43

peter6866 previously approved these changes Jun 2, 2024

View reviewed changes

tianyangL11 previously approved these changes Jun 2, 2024

View reviewed changes

chrischenlixing added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Jun 4, 2024

JatinAgrawal94 previously approved these changes Jun 5, 2024

View reviewed changes

CloudyZ524 previously approved these changes Jun 6, 2024

View reviewed changes

akshit0211 previously approved these changes Jun 6, 2024

View reviewed changes

Trip2310 requested review from Trip2310 and removed request for Trip2310 June 6, 2024 18:37

Wenboooooo previously approved these changes Jun 7, 2024

View reviewed changes

PabloWang self-requested a review June 7, 2024 15:55

PabloWang previously approved these changes Jun 7, 2024

View reviewed changes

Sudershhh suggested changes Jun 7, 2024

View reviewed changes

jennZhang93 previously approved these changes Jun 8, 2024

View reviewed changes

change date format

b64ca78

chrischenlixing dismissed stale reviews from jennZhang93, PabloWang, Wenboooooo, akshit0211, CloudyZ524, JatinAgrawal94, and tianyangL11 via b64ca78 June 8, 2024 14:45

chrischenlixing dismissed peter6866’s stale review via b64ca78 June 8, 2024 14:45

change variable naming

2900338

chrischenlixing requested review from Sudershhh and Sandhya1236 June 8, 2024 19:06

KurtisIvey requested review from JatinAgrawal94, peter6866, jennZhang93, mohabbasd and akshit0211 June 8, 2024 22:57

Sudershhh approved these changes Jun 11, 2024

View reviewed changes

Jingyii800 approved these changes Jun 12, 2024

View reviewed changes

TXMO-dev approved these changes Jun 13, 2024

View reviewed changes

suaniii approved these changes Jun 14, 2024

View reviewed changes

Sandhya1236 approved these changes Jun 14, 2024

View reviewed changes

Trip2310 self-requested a review June 14, 2024 19:01

Trip2310 approved these changes Jun 14, 2024

View reviewed changes

Kavil-Jain-514 approved these changes Jun 14, 2024

View reviewed changes

peter6866 approved these changes Jun 14, 2024

View reviewed changes

sahithidhulipala9 approved these changes Jun 14, 2024

View reviewed changes

KurtisIvey added the Moved to Final Review label Jun 15, 2024

ImzIssa approved these changes Jun 22, 2024

View reviewed changes

vishavk1992 approved these changes Jun 24, 2024

View reviewed changes

one-community merged commit 19d5a34 into development Jun 29, 2024
1 check passed

one-community mentioned this pull request Jun 29, 2024

Frontend Release to Main [3.64] #2404

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Chris_spinning_wheel_date_change_reports #2298

Chris_spinning_wheel_date_change_reports #2298

chrischenlixing commented May 30, 2024 •

edited

Loading

Vijeth-V commented May 31, 2024

mohabbasd left a comment

Sandhya1236 left a comment

chrischenlixing commented Jun 1, 2024 •

edited

Loading

peter6866 left a comment

tianyangL11 left a comment •

edited

Loading

JatinAgrawal94 left a comment

nishithaShetty commented Jun 6, 2024

CloudyZ524 left a comment

akshit0211 commented Jun 6, 2024 •

edited

Loading

Wenboooooo left a comment

PabloWang left a comment

Sudershhh left a comment

Sudershhh Jun 7, 2024

Sudershhh Jun 7, 2024

jennZhang93 left a comment

Sudershhh left a comment

Jingyii800 left a comment

TXMO-dev left a comment

suaniii left a comment

Sandhya1236 left a comment

Trip2310 commented Jun 14, 2024

Trip2310 left a comment

Kavil-Jain-514 left a comment •

edited

Loading

sahithidhulipala9 commented Jun 14, 2024

ImzIssa left a comment

vishavk1992 left a comment

one-community commented Jun 29, 2024

Chris_spinning_wheel_date_change_reports #2298

Chris_spinning_wheel_date_change_reports #2298

Conversation

chrischenlixing commented May 30, 2024 • edited Loading

Description

Related PRS (if any):

Main changes explained:

How to test:

Screenshots or videos of changes:

Vijeth-V commented May 31, 2024

mohabbasd left a comment

Choose a reason for hiding this comment

Sandhya1236 left a comment

Choose a reason for hiding this comment

chrischenlixing commented Jun 1, 2024 • edited Loading

peter6866 left a comment

Choose a reason for hiding this comment

tianyangL11 left a comment • edited Loading

Choose a reason for hiding this comment

JatinAgrawal94 left a comment

Choose a reason for hiding this comment

nishithaShetty commented Jun 6, 2024

CloudyZ524 left a comment

Choose a reason for hiding this comment

akshit0211 commented Jun 6, 2024 • edited Loading

Wenboooooo left a comment

Choose a reason for hiding this comment

PabloWang left a comment

Choose a reason for hiding this comment

Sudershhh left a comment

Choose a reason for hiding this comment

Sudershhh Jun 7, 2024

Choose a reason for hiding this comment

Sudershhh Jun 7, 2024

Choose a reason for hiding this comment

jennZhang93 left a comment

Choose a reason for hiding this comment

Sudershhh left a comment

Choose a reason for hiding this comment

Jingyii800 left a comment

Choose a reason for hiding this comment

TXMO-dev left a comment

Choose a reason for hiding this comment

suaniii left a comment

Choose a reason for hiding this comment

Sandhya1236 left a comment

Choose a reason for hiding this comment

Trip2310 commented Jun 14, 2024

Trip2310 left a comment

Choose a reason for hiding this comment

Kavil-Jain-514 left a comment • edited Loading

Choose a reason for hiding this comment

sahithidhulipala9 commented Jun 14, 2024

ImzIssa left a comment

Choose a reason for hiding this comment

vishavk1992 left a comment

Choose a reason for hiding this comment

one-community commented Jun 29, 2024

chrischenlixing commented May 30, 2024 •

edited

Loading

chrischenlixing commented Jun 1, 2024 •

edited

Loading

tianyangL11 left a comment •

edited

Loading

akshit0211 commented Jun 6, 2024 •

edited

Loading

Kavil-Jain-514 left a comment •

edited

Loading