[#1899] Add graphic for commit diffstat #2010

nseah21 · 2023-06-24T18:43:01Z

Add graphic for commit diffstat

A diffstat graphic is useful in providing a visual representation
of the changes within and between commits. 

Let's add a diffstat graphic emulating the diffstat used by cgit, 
to help users have a high-level overview of the impact of a
commit.

Other information

NA

damithc · 2023-06-25T04:02:47Z

@nseah21 Thanks for taking this up. I personally prefer the other alternative (i.e., similar to the contribution bar), which is more consistent with RepoSense. Plus RepoSense is supposed to complement what GitHub does, rather than duplicate it.
We can show the bar as a separate line, similar to how we do in the chart view.

ckcherry23 · 2023-06-25T07:04:38Z

Hi @nseah21, your code changes look great for a first attempt at creating the GitHub style diffstat!
However, since we prefer the contribution bar (cgit) style, let us start with that as our first/default.

The reason we prefer the cgit style is that we can reuse the same code we have for the contribution bars below each ramp chart for creating the diffstat as well.

RepoSense/frontend/src/components/c-summary-charts.vue

Lines 221 to 242 in 3878389

 .summary-chart__contribution 

 template(v-if="filterBreakdown") 

 .summary-chart__contrib( 

 v-for="(widths, fileType) in getFileTypeContributionBars(user.fileTypeContribution)" 

 ) 

 .summary-chart__contrib--bar( 

 v-for="width in widths", 

 v-bind:style="{ width: `${width}%`,\ 

  'background-color': fileTypeColors[fileType] }", 

 v-bind:title="`${fileType}: ${user.fileTypeContribution[fileType]} lines, \ 

  total: ${user.checkedFileTypeContribution} lines (contribution from ${minDate} to \ 

  ${maxDate})`" 

 ) 

 template(v-else) 

 .summary-chart__contrib( 

 v-bind:title="`Total contribution from ${minDate} to ${maxDate}: \ 

  ${user.checkedFileTypeContribution} lines`" 

 ) 

 .summary-chart__contrib--bar( 

 v-for="width in getContributionBars(user.checkedFileTypeContribution)", 

 v-bind:style="{ width: `${width}%` }" 

 )

While you can copy over the same code for the diffstat, I would suggest that we move out this contribution bars code outside of c-summary-charts.vue into a separate file called c-stacked-bar-chart.vue and generalize it to be used by both the contribution bars and the diffstat. @vvidday can give his thoughts as well.

We can discuss whether we want a toggle mode for the 2 styles in a separate PR, where we can make use of the current set of changes.

Feel free to reach out to us if you have any questions with the c-stacked-bar-chart.vue implementation and we will be glad to help!

nseah21 · 2023-06-25T08:49:06Z

@damithc @ckcherry23 Thank you for your comments. I have pushed some changes based on the initial feedback.

I will look into using the code in c-summary-charts.vue for this feature.

damithc · 2023-06-25T08:58:57Z

@nseah21 Good progress. A few comments:

The bar should be below the tags, not between title and tags.
The same scale should be used for all commits in a report (not just one author) so that a visual comparison is possible. A 100 line commit of person A should be the same length as that of person B.
For consistency (similar to ramp charts view), the bar should overflow to the next line if too long to show in one line. That way, very big commits will stand out by appearing as multiple lines.

vvidday · 2023-06-25T11:46:58Z

Great job so far and thanks for taking up this issue! Definitely agree with @ckcherry23 on re-using some of the code for the contribution bar - I believe it also has some logic that will help with what Prof mentioned above (overflow & scale).

Also, as we are trying to unify the frontend to use TypeScript (#1936), it would be great if all new features/files could also be started in TypeScript. This can be done by adding lang="ts" inside the opening <script> tag, and wrapping the export in defineComponent.

vvidday

Great job @nseah21 with the progress! This wasn't an easy issue to take up and your progress on this has been impressive. The functionality works well, I left some comments w.r.t implementation details.

Regarding your questions, I think (1) can go either way - I don't think we necessarily need to follow the average across report like in summary, since that view contains charts across the whole report but the zoom view is restricted to a repo. Not too sure about (2), the non-linear scaling might be a bit misleading visually? Would love to get more opinions on these 2 questions!

frontend/src/components/c-stacked-bar-chart.vue

frontend/src/views/c-zoom.vue

damithc · 2023-07-06T15:04:02Z

@nseah21 remember to let reviewers know when the PR is ready for the next round of reviews.

nseah21 · 2023-07-06T15:27:43Z

@vvidday I have attempted some changes for this feature based on the feedback. The PR is ready for the next round of reviews.

vvidday

Thanks for the changes @nseah21 and apologies again for the late reply.

Will reply regarding the CSS overflow issue in the old thread above.

Also, before this pr is merged, it will be good to add cypress test cases for the new feature.

frontend/src/components/c-stacked-bar-chart.vue

frontend/src/views/c-zoom.vue

ckcherry23

The new changes look great @nseah21! I agree with David's comments and have a few more to add.

Regarding your questions,
For (1), according to prof's earlier comments, I think we should consider the average contribution size across the entire report.

The same scale should be used for all commits in a report (not just one author) so that a visual comparison is possible. A 100 line commit of person A should be the same length as that of person B.

For (2), I also think the length of the diffstat should scale linearly as it's easier to comprehend for users.

Also, I think we should avoid the use of default red-colored bars on the summary chart contribution bars so that they are not confused with the deletions bar in the commit diffstat. I'd suggest using a shade of blue as the default for contribution bars.

nseah21 · 2023-07-10T16:00:30Z

I have just pushed the latest changes for the feature.

Here is a summary of what has been changed:

The selectors and bar generation methods for c-stacked-bar-chart.vue have been updated
The default color for the contribution bar is now blue to avoid confusion with the deletion bars in the diffstat
The average contribution size is taken over the whole report instead of within each repository
Broken tests have been updated, including some errors in chartView_mergeCommits.cy.js which did not arise from changing the selectors
Initial tests for the stacked-bar-chart component have been added

May I have some guidance on what other tests should be added for the stacked-bar-chart component?

ckcherry23

Thanks for the quick iteration! I've left a few comments to address

ckcherry23 · 2023-07-10T17:25:15Z

frontend/cypress/tests/chartView/chartView_mergeCommits.cy.js

@@ -1,7 +1,7 @@
 describe('include merge commits in chart view', () => {
 it('show merge commits in summary chart', () => {
 // ramp chart should have merge commit slices
- cy.get('[title="[2023-03-03] Merge branch \'new-branch\' into cypress: +0 -0 lines "]')
+ cy.get('[title="[2023-03-04] Merge branch \'new-branch\' into cypress: +0 -0 lines "]')


Thanks for taking a look into this @nseah21. The date 2023-03-03 may not pass Cypress tests in your local machine but is the date that is required for the CI frontend tests to pass. The discrepancy is probably due to a time zone issue as the commit was made close to midnight. Perhaps we can create a new issue to investigate why the date varies on different machines.

ckcherry23 · 2023-07-10T17:43:24Z

frontend/cypress/tests/zoomView/zoomView_contributionBars.cy.js

Thanks for starting with the Cypress tests for this feature @nseah21. I think this file can be renamed to something like zoomView_diffstat.cy.js.

Apart from checking if the diffstat has rendered, we can also check:

if both green and red bars are rendered for a general commit with > 0 insertions and deletions.

if the contribution bar is not visible for empty commits with 0 insertions/deletions.

if the size of the green/red bars is proportional to the insertion/deletion size. I think a naïve way to do this is to check whether the green bar length is greater or less than the red bar length depending on the contribution size.

@vvidday

ckcherry23 · 2023-07-10T17:51:43Z

frontend/src/components/c-summary-charts.vue

 const contributionLimit = (this.avgContributionSize * 2);
 if (contributionLimit === 0) {
 return res;
 }
 const cnt = Math.floor(totalContribution / contributionLimit);
 for (let cntId = 0; cntId < cnt; cntId += 1) {
- res.push(100);
+ res.push({ color: 'red', width: 100 });


You may have to remove the color attribute here to ensure all the contribution bar rows are rendered blue by default.

…nto add-diffstat-graphic

vvidday

Thanks @nseah21, overall LGTM, just some minor things to tie up

frontend/src/views/c-zoom.vue

frontend/cypress/tests/zoomView/zoomView_diffstat.cy.js

vvidday

LGTM!

ckcherry23

Great work, LGTM! Just remember to update your commit message with the latest changes and follow the guidelines.

nseah21 · 2023-07-23T04:02:26Z

I have updated the commit message accordingly.

@ckcherry23

github-actions · 2023-07-28T01:14:42Z

The following links are for previewing this pull request:

Dashboard Preview: https://dashboard-2010-pr-reposense-reposense.surge.sh
Docs Preview: https://docs-2010-pr-reposense-reposense.surge.sh

nseah21 added 3 commits June 24, 2023 03:06

Add diffstat component

2963a8f

Update zoom view to use diffstat graphic

cc4c913

Modify threshold in c-diffstat

eef1ea0

Rename c-diffstat to c-histogram

b7d47ea

Add contribution bar for commit diffstat

168dac9

nseah21 changed the title ~~Add graphic for commit diffstat~~ [#1899] Add graphic for commit diffstat Jun 25, 2023

vvidday added the s.Ongoing label Jun 27, 2023

nseah21 added 8 commits June 29, 2023 22:06

Add c-stacked-bar-chart component for summary charts

e78c45e

Remove references to old diffstat in zoom view

02a87a6

Add support for rendering diffstat

7783db8

Add diffstat component to zoom view

4bcd5a8

Use average contribution for diffstat calculations

2cc49e7

Add support for toggling diffstat view

56ff61e

Remove unused components

afe8c4c

Remove old calculation for average contribution

d0fe7b0

vvidday requested changes Jun 30, 2023

View reviewed changes

frontend/src/components/c-stacked-bar-chart.vue Outdated Show resolved Hide resolved

frontend/src/views/c-zoom.vue Show resolved Hide resolved

frontend/src/views/c-zoom.vue Outdated Show resolved Hide resolved

nseah21 added 4 commits July 3, 2023 22:10

Refactor c-stacked-bar-chart component

9e3e48b

Use latest stacked bar chart for diffstat

b53af8b

Merge branch 'refactor-diffstat-graphic' into add-diffstat-graphic

b8d718e

Add fix for overflowing contribution bars

8b8a1ff

ckcherry23 requested a review from a team July 6, 2023 17:33

vvidday requested changes Jul 8, 2023

View reviewed changes

frontend/src/components/c-stacked-bar-chart.vue Outdated Show resolved Hide resolved

frontend/src/views/c-zoom.vue Outdated Show resolved Hide resolved

ckcherry23 reviewed Jul 8, 2023

View reviewed changes

ckcherry23 added s.ToReview and removed s.Ongoing labels Jul 9, 2023

nseah21 added 4 commits July 10, 2023 23:18

Refactor stacked-bar-chart to use new selectors

5168a60

Refactor bar generation methods

9d063b5

Fix broken frontend tests

2f5acbb

Add initial tests for stacked-bar-chart component

70a69f4

ckcherry23 requested changes Jul 10, 2023

View reviewed changes

ckcherry23 reviewed Jul 10, 2023

View reviewed changes

nseah21 and others added 9 commits July 11, 2023 14:20

Revert changes to chartView_mergeCommits.cy.js

06d2f55

Fix bug in bar generation methods

8b592e3

Add target attribute for lines changed

eb9b0d6

Add more tests for diffstat component

2698ade

Fix CI issues

40962d2

Fix environmental checks

e6f2cb8

Merge branch 'master' into add-diffstat-graphic

2860caa

Fix linting checks

59ce334

Merge branch 'add-diffstat-graphic' of github.com:nseah21/RepoSense i…

2366ad1

…nto add-diffstat-graphic

vvidday requested changes Jul 15, 2023

View reviewed changes

frontend/src/views/c-zoom.vue Outdated Show resolved Hide resolved

frontend/cypress/tests/zoomView/zoomView_diffstat.cy.js Show resolved Hide resolved

frontend/cypress/tests/zoomView/zoomView_diffstat.cy.js Show resolved Hide resolved

nseah21 added 2 commits July 15, 2023 21:22

Remove old implementation for bar generation

0ae39bd

Add comments for tests in zoomView_diffstat.cy.js

70183cf

vvidday approved these changes Jul 15, 2023

View reviewed changes

ckcherry23 approved these changes Jul 22, 2023

View reviewed changes

ckcherry23 added s.ToMerge and removed s.ToReview labels Jul 24, 2023

chan-j-d merged commit a9f102d into reposense:master Jul 28, 2023
10 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#1899] Add graphic for commit diffstat #2010

[#1899] Add graphic for commit diffstat #2010

nseah21 commented Jun 24, 2023 •

edited

Loading

damithc commented Jun 25, 2023

ckcherry23 commented Jun 25, 2023

nseah21 commented Jun 25, 2023

damithc commented Jun 25, 2023 •

edited

Loading

vvidday commented Jun 25, 2023

vvidday left a comment

damithc commented Jul 6, 2023

nseah21 commented Jul 6, 2023 •

edited

Loading

vvidday left a comment

ckcherry23 left a comment

nseah21 commented Jul 10, 2023

ckcherry23 left a comment

ckcherry23 Jul 10, 2023

ckcherry23 Jul 10, 2023

ckcherry23 Jul 10, 2023

vvidday left a comment

vvidday left a comment

ckcherry23 left a comment

nseah21 commented Jul 23, 2023

github-actions bot commented Jul 28, 2023

[#1899] Add graphic for commit diffstat #2010

[#1899] Add graphic for commit diffstat #2010

Conversation

nseah21 commented Jun 24, 2023 • edited Loading

Add graphic for commit diffstat

Other information

damithc commented Jun 25, 2023

ckcherry23 commented Jun 25, 2023

nseah21 commented Jun 25, 2023

damithc commented Jun 25, 2023 • edited Loading

vvidday commented Jun 25, 2023

vvidday left a comment

Choose a reason for hiding this comment

damithc commented Jul 6, 2023

nseah21 commented Jul 6, 2023 • edited Loading

vvidday left a comment

Choose a reason for hiding this comment

ckcherry23 left a comment

Choose a reason for hiding this comment

nseah21 commented Jul 10, 2023

ckcherry23 left a comment

Choose a reason for hiding this comment

ckcherry23 Jul 10, 2023

Choose a reason for hiding this comment

ckcherry23 Jul 10, 2023

Choose a reason for hiding this comment

ckcherry23 Jul 10, 2023

Choose a reason for hiding this comment

vvidday left a comment

Choose a reason for hiding this comment

vvidday left a comment

Choose a reason for hiding this comment

ckcherry23 left a comment

Choose a reason for hiding this comment

nseah21 commented Jul 23, 2023

github-actions bot commented Jul 28, 2023

nseah21 commented Jun 24, 2023 •

edited

Loading

damithc commented Jun 25, 2023 •

edited

Loading

nseah21 commented Jul 6, 2023 •

edited

Loading