Add user profile heatmap visualization for contributions #5402

kcne · 2024-12-16T15:40:49Z

Description

This PR addresses #5373 by adding a heatmap visualization on user profile pages to display daily contribution activity over the past year.

Key changes include:

Added a heatmap container in the user profile view (users/show.html.erb).
Implemented JavaScript logic (heatmap.js) using CalHeatmap to render the heatmap dynamically based on contribution data.
Updated localization (config/locales/en.yml) to include tooltips and month/weekday labels for the heatmap.
Added tests in users_controller_test.rb to validate heatmap data handling.

Screenshots:

How has this been tested?

Verified heatmap rendering with mock data for different users and activity levels.
Tested responsiveness and theme support (light/dark mode).
Checked correct localization of tooltips, month names, and weekday labels.
Ran automated tests to ensure proper heatmap data handling in the controller.

Let me know if you need further tweaks or enhancements!

…vascripts

… functionality

app/assets/javascripts/heatmap.js

HolgerJeromin · 2024-12-17T16:06:51Z

Oh, I forgot about this.
But the user can now set his "Preferred Website Color Scheme" which should be the basis of the theme not the browser setting.

Dimitar5555 · 2024-12-17T20:01:11Z

It is a very minor nitpick, but is it possible to dynamically determine what's the first weekday based on the user's locale and adjust the heatmap accordingly? Intl.Locale.prototype.getWeekInfo() could be used. It isn't currently available in Firefox but all other browsers have it.

P.S. Added bug 1937867 to Firefox's bug tracker.

gravitystorm · 2024-12-17T20:38:11Z

What's the source(s) of all the javascript in vendor/? I would expect to see Vendorfile updated, or preferably if these are sourced from e.g. node modules, then they should be included in package.json and added using the assets pipeline. If any of these are source files, i.e. written just for this project, then they should be in app/.

Also, how does the inclusion of popper interact with the popper already included? We end up with //= require popper twice in application.js.

gravitystorm · 2024-12-17T20:56:44Z

What's the source(s) of all the javascript in vendor/?

OK, I found the answer for the cal-heatmap part of the code, which is available as an npm module. In which case, using package.json will allow us to upgrade to new versions automatically, and would be the preferred option.

tordans · 2024-12-18T05:12:42Z

UX thoughts:

Do we want users to be able to disable this feature in their profile? – I am not a fan of this kind of configurations, but we do give a lot more visibility to once activity with this that we had before and the page is public (AKA no login required).
How do we want to handle the "never contributed" case? Showing the heatmap in this case would suggest "this user might have contributed changes before that time…". – I think it would be best to not show it or show a placeholder instead.

Code comments:

Do we want to add those JS files to the application js or create a separate contribution_heatmap js for this? https://github.com/openstreetmap/openstreetmap-website/pull/5402/files#diff-0e145ba000e96b1a45d230275e350e4e8514efb4db7dbcfa228fe1003896c9b4R18-R22

tomhughes · 2024-12-18T12:57:59Z

I've tested the performance of the underlying query and using the user with the most changesets in the last year (just over 50 thousand) it took a fraction over one second which is probably acceptable.

That result (which was a full 365 days of data) serialised to just under 10Kb which is a fair chunk to be caching but hopefully most entries will be smaller than that.

kcne · 2024-12-19T00:27:20Z

Oh, I forgot about this. But the user can now set his "Preferred Website Color Scheme" which should be the basis of the theme not the browser setting.

Thank you for the suggestion. I’ll refactor accordingly to ensure alignment with the preferred color scheme setting.

It is a very minor nitpick, but is it possible to dynamically determine what's the first weekday based on the user's locale and adjust the heatmap accordingly? Intl.Locale.prototype.getWeekInfo() could be used. It isn't currently available in Firefox but all other browsers have it.

P.S. Added bug 1937867 to Firefox's bug tracker.

I tried dynamically adjusting the start and end weekdays using ghDay as the subdomain, but it rounds to the first and last weeks of the month, making implementation tricky. Accommodating this would require significant effort, which may not be worth it for such a minor adjustment.

What's the source(s) of all the javascript in vendor/? I would expect to see Vendorfile updated, or preferably if these are sourced from e.g. node modules, then they should be included in package.json and added using the assets pipeline. If any of these are source files, i.e. written just for this project, then they should be in app/.

To be honest I wasn’t too familiar with how our assets pipeline works,so I just added the cal-heatmap library and its dependencies in vendor/ and added required code in manifest.js and application.js to make it load correctly. If using package.json is preferred, I can update the PR accordingly. I'm not sure if there is some additional config needed for this to be accomplished or would updating the package.json file would be enough.

Thank you for pointing out the existing popper inclusion. I’ll remove the duplicate entry from application.js and the vendor folder.

kcne · 2024-12-26T09:21:29Z

I've updated the code to account for the "Preferred Website Color Scheme." Theme settings should now be working correctly.

UX Thoughts:

Disabling Feature in Profile: Data is already public and open, so I believe all mappers should have a contribution graph. This feature provides valuable insights for more experienced mappers as a reference point to understand others' activity.
"Never Contributed" Case: Showing an empty heatmap with a fallback message seems like a good approach. From a UX perspective, maintaining a consistent layout across profiles would be more intuitive and visually cohesive.

Code Comments:

Localizing Starting Week: I attempted to localize the starting week as suggested but couldn't find a clean solution due to limitations with the ghDays subdomain. If anyone has suggestions, I'm open to exploring further.
Separate JS Files: There's already a heatmap.js file containing heatmap-related functionality, included in application.js for precompilation. I'm hesitant to introduce additional files unless there's a clear benefit. Consolidating heatmap logic here seems to make sense for now.
Updating package.json: I’ll update the package.json as part of the changes, but I’m unsure if additional configuration is needed. Please let me know if there are any dependencies or settings to consider. @gravitystorm

Also a big thank you to @tomhughes for testing the performance here.
Let me know if further adjustments or discussions are needed!

AntonKhorev · 2024-12-29T08:13:42Z

Separate JS Files: There's already a heatmap.js file containing heatmap-related functionality, included in application.js for precompilation.

How is it included in application.js if you're including heatmap.js here? But d3 and cal-heatmap are added to application.js, bringing its size up to ~400kb from ~250kb.

AntonKhorev · 2024-12-29T08:25:12Z

CSP violations, days of week won't be visible if not resolved:

Content-Security-Policy: (Report-Only policy) The page’s settings would block an inline style (style-src-attr) from being applied

AntonKhorev · 2024-12-29T08:45:18Z

I've updated the code to account for the "Preferred Website Color Scheme." Theme settings should now be working correctly.

It's not going to work correctly because our Auto option follows prefers-color-scheme which can change any time. If it does, you'll get for example this:

Looks like cal-heatmap doesn't have a proper auto scheme "as not all websites support dark/light mode".

You'd have to then setup a listener like this but without using Leaflet of course and redraw the heatmap.

Same is true for #5426 by the way.

hlfan · 2024-12-30T07:13:15Z

You'd have to then setup a listener like this but without using Leaflet of course and redraw the heatmap.

Same is true for #5426 by the way.

Any other change to the theme of the page without reloading will break most of the CSS theming anyway since the stylesheets were split in #5362 by the way.

It would be great to have a global leaflet-independent watcher where clients can add themselves to a callback list.

AntonKhorev · 2024-12-30T10:05:41Z

Any other change to the theme of the page without reloading will break most of the CSS theming anyway since the stylesheets were split in #5362 by the way.

You don't need to change the theme of the page, neither here, nor in #5426.

Or do you say that you haven't tried switching prefers-color-scheme while in Auto scheme? Then try it with browser dev tools for example.

It would be great to have a global leaflet-independent watcher where clients can add themselves to a callback list.

Leaflet code is just a wrapper for addEventListener. You can do the same with jQuery.

hlfan · 2024-12-30T10:45:25Z

You don't need to change the theme of the page

I did that for testing, but since listening increased the complexity unnecessarily, I left that for a second pass.

But suppose the site needs a theme watcher anyway because the cal-heatmap doesn't want to let CSS do the color mixing theme-agnostically. In that case, instead of having two listeners, a common solution that includes MutationObservers outside of jQuery would be the one with the least overhead.

AntonKhorev · 2024-12-30T10:50:00Z

Why MutationObservers?

AntonKhorev · 2024-12-30T11:05:43Z

Also the conditions under which watching prefers-color-scheme are different for this PR and #5426. Here you need to watch if the website theme is auto, in #5426 you need to watch when the website and the map themes are both auto. So maybe you don't want one global watcher.

hlfan · 2024-12-30T15:03:34Z

The MutationObserver thought came from my tinkering with the site locally wanting to reduce the reloads, forgetting that a toggle if added would already have onchange events.

So maybe you don't want one global watcher.

Yeah, I kinda missed that... Still, having a similar style on such similar functions and having them moved to some unified location would be a nice thing to have, currently, they could be much more different. But that's more of a refactor thing if both are merged.

kcne · 2025-01-14T09:21:54Z

Separate JS Files: There's already a heatmap.js file containing heatmap-related functionality, included in application.js for precompilation.

How is it included in application.js if you're including heatmap.js here? But d3 and cal-heatmap are added to application.js, bringing its size up to ~400kb from ~250kb.

I've moved the import to heatmap.js. Should be resolved now.

I've updated the code to account for the "Preferred Website Color Scheme." Theme settings should now be working correctly.

It's not going to work correctly because our Auto option follows prefers-color-scheme which can change any time. If it does, you'll get for example this:

Looks like cal-heatmap doesn't have a proper auto scheme "as not all websites support dark/light mode".

You'd have to then setup a listener like this but without using Leaflet of course and redraw the heatmap.

Same is true for #5426 by the way.

Added the logic to handle the auto prefered-color-changes. Should be resolved now as well.

CSP violations, days of week won't be visible if not resolved:

Content-Security-Policy: (Report-Only policy) The page’s settings would block an inline style (style-src-attr) from being applied

I'm working on resolving this CSP violations. Right now I'm trying to generate nonce for the .js file and use that to validate and transpass the CSP violation. I'm not sure if it is the right approach for this since I never had experience dealing with similar stuff before. If there is a more elegant and compact solution, please feel free to point it out.

Thank you.

hlfan · 2025-01-14T12:31:01Z

Added the logic to handle the auto prefered-color-changes. Should be resolved now as well.

For the wrong one though. Another copy of the html's bs-theme attribute isn't necessarily helpful, and the media query is still not being listened to.

hlfan · 2025-01-14T13:10:05Z

app/assets/javascripts/heatmap.js

+function getThemeFromColorScheme(colorScheme) {
+  if (colorScheme === "auto") {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  return colorScheme; // Return "light" or "dark" directly if specified
+}


I'm sorry, but I don't see where a re-draw would be triggered.

hlfan · 2025-01-14T13:20:34Z

~~I'd recommend window.matchMedia("...").onchange = xy due to the depreciation of matchMedia.addEventListener.~~

kcne · 2025-01-14T13:21:38Z

I need to test this once again and get back to you. I guess you are right since there is some strange behaviour right now that I'm currently looking into.

HolgerJeromin · 2025-01-14T13:49:56Z

@hlfan This deprecates addListener (old IE invention) not addEventListener.
This addEventListener API has no own documentation because it documented on inheritation parent EventTarget

app/assets/javascripts/heatmap.js

simonpoole · 2025-01-20T11:26:04Z

Nice ....... but, sorry to be a spoil sport here, this changes the information available on the user page significantly, the likely solution would be to make it available only to logged in users.

Both the LWG and EWG should be informed and https://wiki.openstreetmap.org/wiki/GDPR/Affected_Services#User_page_(done) updated to reflect the additional feature.

PS: I'm not quite sure why the user page item is marked as done, when it obviously isn't, but that is OT.

AntonKhorev · 2025-01-21T02:27:55Z

@simonpoole This is not something you should worry about because it will take one if statement to remove the entire thing unlike let's say feeds.

AntonKhorev · 2025-01-21T03:16:57Z

app/assets/javascripts/application.js

+//= require d3
+//= require cal-heatmap
+//= require calendar-label
+//= require popper
+//= require tooltip


You don't need to put these scripts here because you remove them later.

AntonKhorev · 2025-01-21T03:26:37Z

Is it the intended effect that nothing gets rendered in case the user made no edits in the span of one year?

AntonKhorev · 2025-01-21T03:42:42Z

app/controllers/users_controller.rb

@@ -53,6 +53,23 @@ def show
    if @user &&
       (@user.visible? || current_user&.administrator?)
      @title = @user.display_name
+
+      one_year_ago = 1.year.ago


Is this done to freeze the starting point because we're not sure when the block below runs? Then why is the same not done with the ending point? And shouldn't it be truncated to a day?

AntonKhorev · 2025-01-21T04:18:32Z

app/assets/javascripts/heatmap.js

+      scale: {
+        color: {
+          type: "threshold",
+          range: currentTheme === "dark" ? rangeColors : rangeColors.reverse(),


rangeColors.reverse() reverses the array in place, probably not what you want.

Suggested change

range: currentTheme === "dark" ? rangeColors : rangeColors.reverse(),

range: currentTheme === "dark" ? rangeColors : Array.from(rangeColors).reverse(),

would solve that.

AntonKhorev · 2025-01-21T04:35:15Z

app/assets/javascripts/heatmap.js

+  const jsDate = new Date(date);
+  const translations = I18n.translations[locale] || I18n.translations.en;
+  const dateTranslations = translations && translations.date;
+  const monthNames = dateTranslations && dateTranslations.month_names;
+
+  const months = monthNames || [];
+  const monthName = months[jsDate.getMonth() + 1] || `${jsDate.getMonth + 1}.`;
+  const day = jsDate.getDate();
+  const year = jsDate.getFullYear();
+
+  const localizedDate = `${day}. ${monthName} ${year}.`;


Suggested change

const jsDate = new Date(date);

const translations = I18n.translations[locale] || I18n.translations.en;

const dateTranslations = translations && translations.date;

const monthNames = dateTranslations && dateTranslations.month_names;

const months = monthNames || [];

const monthName = months[jsDate.getMonth() + 1] || `${jsDate.getMonth + 1}.`;

const day = jsDate.getDate();

const year = jsDate.getFullYear();

const localizedDate = `${day}. ${monthName} ${year}.`;

const localizedDate = I18n.l("date.formats.long", date);

AntonKhorev · 2025-01-21T04:51:45Z

app/assets/javascripts/heatmap.js

+
+  const heatmapData = heatmapElement.dataset.heatmap ? JSON.parse(heatmapElement.dataset.heatmap) : [];
+  const colorScheme = heatmapElement.dataset.siteColorScheme || "auto";
+  const locale = $("head").data().locale;


If application.js is initialized, the locale is available in I18n.locale. But looks like it's not necessarily initialized...

I think the entire heatmap can be delayed by putting it in turbo frame or maybe some collapsible section (maybe for performance reasons). You need I18n initialized before anyway, I don't know how you're going to translate dates correctly otherwise. Although popup dates seem to work even if I18n is not initialized before the heatmap because they are constructed later.

simonpoole · 2025-01-21T08:03:41Z

@simonpoole This is not something you should worry about because it will take one if statement to remove the entire thing unlike let's say feeds.

Oh, I'm not concerned at all. I was just pointing this out for good form, aka I saw something that I know is wrong, and I'm giving the people here a fighting chance to do the right thing.

kcne added 2 commits December 16, 2024 16:32

Add cal-heatmap lib with plugins and dependencies to vendor/assets/ja…

ada1658

…vascripts

Add manifest and application JS updates for asset linking and heatmap…

467ef94

… functionality

HolgerJeromin reviewed Dec 17, 2024

View reviewed changes

app/assets/javascripts/heatmap.js Show resolved Hide resolved

HolgerJeromin reviewed Dec 17, 2024

View reviewed changes

app/assets/javascripts/heatmap.js Outdated Show resolved Hide resolved

kcne added 2 commits December 17, 2024 12:36

Add heatmap data caching and query for user contributions

f46796f

Add heatmap container to user profile view

9d87115

kcne force-pushed the contribution-heatmap-nw branch 2 times, most recently from b27b7a6 to b134a0a Compare December 17, 2024 12:16

nertc mentioned this pull request Dec 23, 2024

Profile Page Redesign #5438

Open

5 tasks

kcne force-pushed the contribution-heatmap-nw branch 2 times, most recently from 0a8fc14 to af02b6a Compare December 24, 2024 13:43

kcne force-pushed the contribution-heatmap-nw branch 2 times, most recently from 940feb9 to 8028378 Compare January 14, 2025 09:16

hlfan reviewed Jan 14, 2025

View reviewed changes

kcne force-pushed the contribution-heatmap-nw branch from 8028378 to 81f13d7 Compare January 14, 2025 14:07

kcne added 2 commits January 14, 2025 15:11

Add heatmap javascript logic, styles and localization

197af84

Add tests for heatmap data in UsersController

904951e

kcne force-pushed the contribution-heatmap-nw branch from 81f13d7 to 904951e Compare January 14, 2025 14:11

kcne commented Jan 14, 2025

View reviewed changes

app/assets/javascripts/heatmap.js Show resolved Hide resolved

AntonKhorev reviewed Jan 21, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add user profile heatmap visualization for contributions #5402

Add user profile heatmap visualization for contributions #5402

kcne commented Dec 16, 2024 •

edited

Loading

HolgerJeromin commented Dec 17, 2024

Dimitar5555 commented Dec 17, 2024 •

edited

Loading

gravitystorm commented Dec 17, 2024

gravitystorm commented Dec 17, 2024

tordans commented Dec 18, 2024

tomhughes commented Dec 18, 2024

kcne commented Dec 19, 2024

kcne commented Dec 26, 2024 •

edited

Loading

AntonKhorev commented Dec 29, 2024

AntonKhorev commented Dec 29, 2024

AntonKhorev commented Dec 29, 2024

hlfan commented Dec 30, 2024

AntonKhorev commented Dec 30, 2024 •

edited

Loading

hlfan commented Dec 30, 2024

AntonKhorev commented Dec 30, 2024

AntonKhorev commented Dec 30, 2024 •

edited

Loading

hlfan commented Dec 30, 2024

kcne commented Jan 14, 2025 •

edited

Loading

hlfan commented Jan 14, 2025

hlfan Jan 14, 2025

hlfan commented Jan 14, 2025 •

edited

Loading

kcne commented Jan 14, 2025

HolgerJeromin commented Jan 14, 2025 •

edited

Loading

simonpoole commented Jan 20, 2025

AntonKhorev commented Jan 21, 2025

AntonKhorev Jan 21, 2025

AntonKhorev commented Jan 21, 2025

AntonKhorev Jan 21, 2025

AntonKhorev Jan 21, 2025

HolgerJeromin Jan 21, 2025

AntonKhorev Jan 21, 2025

AntonKhorev Jan 21, 2025 •

edited

Loading

AntonKhorev Jan 21, 2025

simonpoole commented Jan 21, 2025

	range: currentTheme === "dark" ? rangeColors : rangeColors.reverse(),
	range: currentTheme === "dark" ? rangeColors : Array.from(rangeColors).reverse(),

Add user profile heatmap visualization for contributions #5402

Are you sure you want to change the base?

Add user profile heatmap visualization for contributions #5402

Conversation

kcne commented Dec 16, 2024 • edited Loading

Description

How has this been tested?

HolgerJeromin commented Dec 17, 2024

Dimitar5555 commented Dec 17, 2024 • edited Loading

gravitystorm commented Dec 17, 2024

gravitystorm commented Dec 17, 2024

tordans commented Dec 18, 2024

tomhughes commented Dec 18, 2024

kcne commented Dec 19, 2024

kcne commented Dec 26, 2024 • edited Loading

AntonKhorev commented Dec 29, 2024

AntonKhorev commented Dec 29, 2024

AntonKhorev commented Dec 29, 2024

hlfan commented Dec 30, 2024

AntonKhorev commented Dec 30, 2024 • edited Loading

hlfan commented Dec 30, 2024

AntonKhorev commented Dec 30, 2024

AntonKhorev commented Dec 30, 2024 • edited Loading

hlfan commented Dec 30, 2024

kcne commented Jan 14, 2025 • edited Loading

hlfan commented Jan 14, 2025

hlfan Jan 14, 2025

Choose a reason for hiding this comment

hlfan commented Jan 14, 2025 • edited Loading

kcne commented Jan 14, 2025

HolgerJeromin commented Jan 14, 2025 • edited Loading

simonpoole commented Jan 20, 2025

AntonKhorev commented Jan 21, 2025

AntonKhorev Jan 21, 2025

Choose a reason for hiding this comment

AntonKhorev commented Jan 21, 2025

AntonKhorev Jan 21, 2025

Choose a reason for hiding this comment

AntonKhorev Jan 21, 2025

Choose a reason for hiding this comment

HolgerJeromin Jan 21, 2025

Choose a reason for hiding this comment

AntonKhorev Jan 21, 2025

Choose a reason for hiding this comment

AntonKhorev Jan 21, 2025 • edited Loading

Choose a reason for hiding this comment

AntonKhorev Jan 21, 2025

Choose a reason for hiding this comment

simonpoole commented Jan 21, 2025

kcne commented Dec 16, 2024 •

edited

Loading

Dimitar5555 commented Dec 17, 2024 •

edited

Loading

kcne commented Dec 26, 2024 •

edited

Loading

AntonKhorev commented Dec 30, 2024 •

edited

Loading

AntonKhorev commented Dec 30, 2024 •

edited

Loading

kcne commented Jan 14, 2025 •

edited

Loading

hlfan commented Jan 14, 2025 •

edited

Loading

HolgerJeromin commented Jan 14, 2025 •

edited

Loading

AntonKhorev Jan 21, 2025 •

edited

Loading