Add button to show older activity in activity log

[harmitgoswami]

Fix #2622

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).

[mathjazz]

@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]

I think it's a bit confusing.

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

1. I click the button, it shows more activity (Contribution activity in the last 2 months), so that works.
2. I click another time, nothing happens, because there is no activity between month 2 and 3 (only the title changes).
3. 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]

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]

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]

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]

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]

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]

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]

@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]

@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]

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

[flodolo]

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

Can you expand on "this information"?

[harmitgoswami]

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]

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]

Agreed with Flod.

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

[harmitgoswami]

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]

This is the design we're aiming for:

[eemeli]

@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]

@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.

[mathjazz]

Nit: mind the blank line.

[mathjazz]

How about we just hardcode this to "Contribution activity" in the template?

Then we'd need to always show month + year in the timeline - even for this month's data - which would result in a more consistent UX and simpler code with less IF-ELSE blocks.

[mathjazz]

That list at the end should be dropped - a more proper approach would be to set the default value to entries in render_contribution_group().

[mathjazz]

I find it confusing that we have different "APIs" for this month's data and for the full year data. I would expect the backend functions to return data in the exact same format, but for different periods, so we wouldn't need to IF-ELSE here and in one or two other places.

[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