Add button to show older activity in activity log #3255

harmitgoswami · 2024-06-13T19:04:53Z

Implemented a button to show more (i.e. older) activity in the user profile activity log. This feature was achieved by modifying the existing get_contribution_timeline_data function to retrieve data from the past N months, where N is a counter that the user can increase by one via clicking on the "Show more activity" button. Once the number of months shown on the activity log predates the user's account creation date, the "Show more activity" button is hidden, similar to how GitHub implements this feature.

To reproduce results: After starting the server, navigate to any user's profile (localhost:8000/contributors/[username]). Once there, click the show more activity button to display an additional month's worth of data. When choosing to view a specific contribution type, the counter resets to 0, and the "Show more activity" button is displayed again (if it was hidden before).

pontoon/contributors/static/js/profile.js

pontoon/contributors/static/css/profile.css

mathjazz · 2024-06-14T08:58:28Z

@flodolo Could you please test this feature on stage to verify it indeed fixes the bug?

Note that behavior on GitHub is different - rather than expanding the observed period by 1 month on each click, the button on GitHub appends 1-month period to the timeline.

flodolo · 2024-06-14T09:58:55Z

I think it's a bit confusing.

https://mozilla-pontoon-staging.herokuapp.com/contributors/flod/

I click the button, it shows more activity (Contribution activity in the last 2 months), so that works.
I click another time, nothing happens, because there is no activity between month 2 and 3 (only the title changes).
I click a third time and the content changes because there is activity between month 3 and 4.

When I click the button, I would expect more activity to be loaded if available (e.g. load X more events, not expand the time filter).

It's even more confusing when I select a day with activity, e.g. in February, and then click the button.

mathjazz · 2024-06-14T10:06:32Z

When I click the button, I would expect more activity to be loaded if available (e.g. load X more events, not expand the time filter).

It's even more confusing when I select a day with activity, e.g. in February, and then click the button.

@harmitgoswami Can we change the logic to load the data from the beginning of the preceding month? So if the currently displayed data ends in June 10, we load data from May 1 to June 10 and append it. We'd also need to add month indicators to the timeline.

harmitgoswami · 2024-06-14T13:05:43Z

That makes sense to me. So then do we still want the button to add another month to the timeline per click, or like Flod suggested, retrieve latest X events?

mathjazz · 2024-06-14T15:09:29Z

That makes sense to me. So then do we still want the button to add another month to the timeline per click, or like Flod suggested, retrieve latest X events?

What flod suggests would be even better - so you don't click in vain.

mathjazz · 2024-06-17T11:31:39Z

Thanks for the update!

When I test the patch locally, my profile page says "Contribution activity since May 2024: ". It's not clear why since May and if that's since the beginning or since the end of May. My original suggestion was just for the data that we load additionally with the button. Sorry for not making that clearer.

Ideally, I'd refactor get_contribution_timeline_data() to work the way it works currently on page load, and to append additional data on each click on the "Show more activity" button.

mathjazz · 2024-06-17T14:05:23Z

When I click the button, I would expect more activity to be loaded if available (e.g. load X more events, not expand the time filter).

@flodolo It turns out it'll be much easier for us to change the functionality to load events for the current month initially, and then append events for each preceding month after clicking the Show more activity button. That's also the behavior on the GH profile page. For less active users, that could mean no new events will be loaded after clicking the button, which we could address subsequently by automatically extending the period on the backend if no events are returned. Thoughts?

flodolo · 2024-06-17T14:50:10Z

By default, we're showing the graph for the last 12 months, the activity below should match that interval of time.

We load the activity for the last month by default.
Clicking Show more activity should load some data (if the previous month is empty, we should load stuff until we have something). I don't have a strong preference between "load 1 more month" vs "load X more events".
We stop when we reach the end of the interval (while I have the feeling now we're not stopping at all, I got to Contribution activity in the last 13 months on stage).

mathjazz · 2024-06-17T15:14:11Z

@flodolo How about the button then just loads all the remaining events rendered on the graph, i.e. for the last 365 days?

We can also group events by month in the timeline.

flodolo · 2024-06-17T16:02:33Z

@flodolo How about the button then just loads all the remaining events rendered on the graph, i.e. for the last 365 days?

We can also group events by month in the timeline.

This works for me. And grouping would help visually.

harmitgoswami · 2024-06-22T03:59:11Z

Not sure what the best way is to display this information... any thoughts?

flodolo · 2024-06-22T05:04:51Z

Not sure what the best way is to display this information... any thoughts?

Can you expand on "this information"?

harmitgoswami · 2024-06-22T05:20:30Z

Sorry, forgot to add the images!

This order of information makes the most sense to me (Title -> Project/Locale -> Month -> Action), but I was wondering what you two thought

Initial contents:

After clicking "Show more activity":

flodolo · 2024-06-22T05:29:38Z

I think we need @mathjazz here, to avoid going too far in the wrong direction, but this looks like too much data.

My expectation is that we keep the current structure, but group it by month (i.e. take the current look of activities, repeat it for each month if there is data).

mathjazz · 2024-06-24T07:53:37Z

Agreed with Flod.

And we should follow the GitHub profile page UI - add "Month YEAR" (e.g. May 2024) to the vertical timeline.

harmitgoswami · 2024-06-24T21:51:53Z

In this design iteration, it's a little difficult to discern which link you're clicking on when hovering over an action. I've reserved fixing this bug for now in case this design isn't what we were looking for either.

mathjazz · 2024-06-24T22:00:37Z

This is the design we're aiming for:

eemeli · 2024-06-27T09:27:40Z

@harmitgoswami This is currently marked as a draft PR; could you clarify what sort of review you'd like of it, and/or what's still intended to be done to it?

harmitgoswami · 2024-06-27T11:43:50Z

@harmitgoswami This is currently marked as a draft PR; could you clarify what sort of review you'd like of it, and/or what's still intended to be done to it?

Hi Eemeli, I’m mainly looking for code style review for this PR.

I’ve implemented the design and functionality that @mathjazz had requested, but am looking for code readability/performance feedback before I mark this PR as Open once again.

eemeli

A bunch of small stuff, but the big issue is the inefficiency in how the data is queried from the DB.

pontoon/contributors/static/js/profile.js

pontoon/contributors/templates/contributors/includes/timeline.html

pontoon/contributors/utils.py

pontoon/contributors/views.py

pontoon/contributors/utils.py

pontoon/contributors/templates/contributors/includes/timeline.html

mathjazz · 2024-07-11T15:17:33Z

pontoon/contributors/templates/contributors/includes/timeline.html

+</ul>
+
+{% endfor %}
+{% endif %}


Nit: mind the blank line.

into more-activity

pontoon/contributors/templates/contributors/includes/timeline.html

pontoon/contributors/static/js/profile.js

pontoon/contributors/templates/contributors/includes/timeline.html

mathjazz · 2024-07-15T18:00:35Z

pontoon/insights/utils.py

@@ -460,6 +460,6 @@ def get_global_pretranslation_quality(category, id):
    ]

    return {
-        "dates": list({convert_to_unix_time(x["month"]) for x in actions}),
+        "dates": sorted(list({convert_to_unix_time(x["month"]) for x in actions})),


This is already merged, so it shouldn't appear in the diff:
136e382

pontoon/contributors/static/css/profile.css

pontoon/contributors/utils.py

pontoon/contributors/templates/contributors/includes/timeline.html

eemeli

I tried removing myself as a reviewer, but that didn't seem to work. I'm fine with this if Matjaž is, but please explicitly re-request a review from me if one is desired.

Changes have been implemented

Massive refactor of all prior work on this ticket. Given the new QuerySet fields (thanks Matjaz), the entire information flow has been dramatically reduced in complexity. Some points of weakness are that I still need to manually restructure and reorder the object before passing to the template

mathjazz

Nice work!

Left some comments inline to further simplify the code.

Please also note that the bubbles within the same month are stacked together - we should add margin.

pontoon/contributors/utils.py

pontoon/contributors/tests/test_utils.py

pontoon/contributors/views.py

pontoon/contributors/utils.py

mathjazz · 2024-07-22T10:52:53Z

pontoon/contributors/templates/contributors/includes/timeline.html


-{% for title, values in contribution_timeline.contributions.items() %}
+{% for month, data in contribution_timeline.contributions.items() %}
+{{month}}


Let's wrap month into a HTML element for easier styling. Please also move it within the div.contribution-group element where it semantically belongs.

pontoon/contributors/templates/contributors/includes/timeline.html

pontoon/contributors/utils.py

mathjazz

Great work, Harmit!

As mentioned, I'll push minor CSS changes directly and ask you for a review. Then we can land this. Well done!

mathjazz · 2024-07-23T11:58:55Z

@harmitgoswami I've updated the CSS slightly as we agreed. Let me know if changes look good to you.

@flodolo Could you please test this a little on stage?

flodolo · 2024-07-23T12:05:22Z

Seems to work correctly as far as I can tell (but stage doesn't have recent activity, so the list is always empty until I click the button).

harmitgoswami · 2024-07-23T13:28:11Z

@harmitgoswami I've updated the CSS slightly as we agreed. Let me know if changes look good to you.

@flodolo Could you please test this a little on stage?

LGTM!

harmitgoswami requested a review from mathjazz June 13, 2024 19:04

mathjazz reviewed Jun 14, 2024

View reviewed changes

harmitgoswami marked this pull request as draft June 20, 2024 16:46

harmitgoswami requested a review from mathjazz June 22, 2024 03:59

harmitgoswami requested a review from eemeli June 26, 2024 21:00

harmitgoswami marked this pull request as ready for review June 27, 2024 14:41

eemeli previously requested changes Jul 1, 2024

View reviewed changes

harmitgoswami marked this pull request as draft July 4, 2024 20:29

Harmit Goswami added 3 commits July 11, 2024 10:24

Acheived functionality for incrementing month counter

e4a7513

Changed contribution timeline data to sync with button press

f793734

Fixed stlying for timeline title and show more button

41f0868

Harmit Goswami and others added 2 commits July 11, 2024 10:49

Modified test case for contribution_timeline_data

ae8a742

Removed print statement in test_utils.py

48a2360

harmitgoswami force-pushed the more-activity branch from c98598c to 48a2360 Compare July 11, 2024 15:05

mathjazz reviewed Jul 11, 2024

View reviewed changes

Removed unwanted rebase additions

73f121d

harmitgoswami marked this pull request as ready for review July 11, 2024 15:23

Harmit Goswami added 2 commits July 12, 2024 14:58

Removed unwanted rebase additions

14a1832

Merge branch 'more-activity' of https://github.com/harmitgoswami/pontoon

47963b3

into more-activity

mathjazz reviewed Jul 15, 2024

View reviewed changes

eemeli requested review from eemeli and removed request for eemeli July 15, 2024 19:19

eemeli reviewed Jul 15, 2024

View reviewed changes

harmitgoswami requested a review from mathjazz July 18, 2024 18:43

mathjazz reviewed Jul 18, 2024

View reviewed changes

Harmit Goswami added 2 commits July 19, 2024 16:27

Implemented changes to timeline creation

50861f3

Sorted months reverse-chronologically

260e534

harmitgoswami requested a review from mathjazz July 19, 2024 20:41

mathjazz reviewed Jul 22, 2024

View reviewed changes

Harmit Goswami added 2 commits July 22, 2024 12:04

Renamed variables and refactored title field

cca0004

Merge branch 'main' into more-activity

a7524af

harmitgoswami requested a review from mathjazz July 22, 2024 16:09

mathjazz approved these changes Jul 22, 2024

View reviewed changes

Minor timeline CSS changes

b6ae8d0

mathjazz merged commit 6db8a16 into mozilla:main Jul 23, 2024
4 checks passed

harmitgoswami deleted the more-activity branch July 23, 2024 15:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add button to show older activity in activity log #3255

Add button to show older activity in activity log #3255

harmitgoswami commented Jun 13, 2024

mathjazz commented Jun 14, 2024

flodolo commented Jun 14, 2024

mathjazz commented Jun 14, 2024

harmitgoswami commented Jun 14, 2024

mathjazz commented Jun 14, 2024

mathjazz commented Jun 17, 2024

mathjazz commented Jun 17, 2024 •

edited

Loading

flodolo commented Jun 17, 2024

mathjazz commented Jun 17, 2024 •

edited

Loading

flodolo commented Jun 17, 2024

harmitgoswami commented Jun 22, 2024

flodolo commented Jun 22, 2024

harmitgoswami commented Jun 22, 2024

flodolo commented Jun 22, 2024

mathjazz commented Jun 24, 2024

harmitgoswami commented Jun 24, 2024

mathjazz commented Jun 24, 2024

eemeli commented Jun 27, 2024

harmitgoswami commented Jun 27, 2024 •

edited

Loading

eemeli left a comment

mathjazz Jul 11, 2024

mathjazz Jul 15, 2024

eemeli left a comment

mathjazz left a comment

mathjazz Jul 22, 2024

mathjazz left a comment

mathjazz commented Jul 23, 2024

flodolo commented Jul 23, 2024

harmitgoswami commented Jul 23, 2024

Add button to show older activity in activity log #3255

Add button to show older activity in activity log #3255

Conversation

harmitgoswami commented Jun 13, 2024

mathjazz commented Jun 14, 2024

flodolo commented Jun 14, 2024

mathjazz commented Jun 14, 2024

harmitgoswami commented Jun 14, 2024

mathjazz commented Jun 14, 2024

mathjazz commented Jun 17, 2024

mathjazz commented Jun 17, 2024 • edited Loading

flodolo commented Jun 17, 2024

mathjazz commented Jun 17, 2024 • edited Loading

flodolo commented Jun 17, 2024

harmitgoswami commented Jun 22, 2024

flodolo commented Jun 22, 2024

harmitgoswami commented Jun 22, 2024

flodolo commented Jun 22, 2024

mathjazz commented Jun 24, 2024

harmitgoswami commented Jun 24, 2024

mathjazz commented Jun 24, 2024

eemeli commented Jun 27, 2024

harmitgoswami commented Jun 27, 2024 • edited Loading

eemeli left a comment

Choose a reason for hiding this comment

mathjazz Jul 11, 2024

Choose a reason for hiding this comment

mathjazz Jul 15, 2024

Choose a reason for hiding this comment

eemeli left a comment

Choose a reason for hiding this comment

mathjazz left a comment

Choose a reason for hiding this comment

mathjazz Jul 22, 2024

Choose a reason for hiding this comment

mathjazz left a comment

Choose a reason for hiding this comment

mathjazz commented Jul 23, 2024

flodolo commented Jul 23, 2024

harmitgoswami commented Jul 23, 2024

mathjazz commented Jun 17, 2024 •

edited

Loading

mathjazz commented Jun 17, 2024 •

edited

Loading

harmitgoswami commented Jun 27, 2024 •

edited

Loading