2100 widget info

[logical-1985516]

Fixes #2100

Proposed commit message

The ramp widget UI is currently quite empty and more information can be 
added to be more useful.

Let's add date range and footer to the ramp widget so that it is easier 
for people to view the timelime of the commits and the RepoSense 
website.

Other information

This is how the new UI looks:

[logical-1985516]

How should I go about writing test cases for the widget?

Edit 1: I have noted that the test cases in optimiseTimeLine only pass if the date indicators are not rendered when the trim timeline is unchecked, should I rename the file and add test cases in the same file too?

Edit 2: Should the date indicators still be displayed if there are no commits? Currently, trim timeline does not show the date indicators if there are no commits found.

Edit 3: Some frontend test cases that pass on CI are failing locally - how do I fix this? Furthermore, it takes about 40 minutes to finish running the test cases. One example is:

  1) include merge commits in chart view
       show merge commits in summary chart:
     AssertionError: Timed out retrying after 30000ms: Expected to find element: `[title="[2023-03-03] Merge branch 'new-branch' into cypress: +0 -0 lines "]`, but never found it.     
      at Context.eval (webpack:///./tests/chartView/chartView_mergeCommits.cy.js:5:7)

[logical-1985516]

Hi @ckcherry23, does this new UI look good to you? Is there any other useful information that could be added to the widget?

[ckcherry23]

Hi @logical-1985516, thank you for looking into this! Not sure if you were able to explore the difference between the main report view and the widget mode, but you can read more about the widget mode here [Widget view, Embeddable widgets].

I don't think we should show the date indicators and "Generated by RepoSense" footers for all ramp charts as seen below in the Report view. This is because the since/until dates would be the same for all, and these dates are mentioned at the top of the report, so it is not that meaningful.

Report view:

Widget mode:

Hence, the date range must be visible conditionally, only when widget mode is true. Another option for this is to trim/optimise timelines by default for widgets so that the date range is shown. This would also make the widget ramps easier to differentiate/interpret, so I would prefer this.

For now, I think we can remove the "Generated by RepoSense" attribution footer from the centre of the widget as it seems to be too distracting. We can explore adding a small RepoSense logo at the top/bottom right with a link to the RepoSense website.

[ckcherry23]

Should the date indicators still be displayed if there are no commits? Currently, trim timeline does not show the date indicators if there are no commits found.

They don't need to be displayed.

Some frontend test cases that pass on CI are failing locally - how do I fix this? Furthermore, it takes about 40 minutes to finish running the test cases. One example is:

  1) include merge commits in chart view
       show merge commits in summary chart:
     AssertionError: Timed out retrying after 30000ms: Expected to find element: `[title="[2023-03-03] Merge branch 'new-branch' into cypress: +0 -0 lines "]`, but never found it.     
      at Context.eval (webpack:///./tests/chartView/chartView_mergeCommits.cy.js:5:7)

The test case you mentioned is a flaky test known to have issues locally on some devices. Might be issues related to author vs commit date. This has always passed on CI, so we can ignore it. Do let us know if there are any other test cases that are failing.

[github-actions]

Hi,
We are going to mark this PR as stale because it has been inactive for the past 30 days.
If no further activity occurs within the following 7 days, it will be automatically closed so that others can take up the issue.
If you are still working on this PR, please make a follow-up commit within 7 days and leave a comment to remove the stale label.
Do let us know if you are stuck so that we can help you!'

[github-actions]

This PR was closed because it has been marked as stale for 7 days with no activity.
Feel free to reopen this PR if you would like to continue working on it.