Apply heatmap coloring to `release-download-count` #6095

foolmoron · 2022-10-21T03:45:46Z

Added math helpers
- utils for lerping
- generic heatmap func that works with any list of values
Added example of heatmap coloring for release download #s
- Colors copied from github blame view's CSS: https://github.githubassets.com/assets/code-d21b20a03009.css

Test URLs

https://github.com/notepad-plus-plus/notepad-plus-plus/releases
https://github.com/notepad-plus-plus/notepad-plus-plus/releases/tag/v8.4.6

Screenshot

fregante · 2022-10-21T04:59:26Z

I don't see any heat change in your screenshot, they're all almost the same color. The "no heat" color should be more gray, matching what GitHub does. See #5081 (comment) to find out how to use GitHub’s own colors, we shouldn't generate our own.

foolmoron · 2022-10-21T05:14:31Z

The numbers there are all very small other than 1.1M and 460k, so they will share the same heat. I have an idea for how to give more control to the gradient func. I'll try to update the colors too.

fregante · 2022-10-21T05:20:44Z

In this case for it to be useful the map should match the minimum and maximum rather than use hardcoded values of what's hot and what's not.

Also we can drop the previous logic to make the hotter download bold.

fregante · 2022-10-21T05:38:15Z

Oh, also if they're all low-heat except 1-2 downloads (which is expected), it's fine that they're mostly gray

source/helpers/math.ts

foolmoron · 2022-10-21T17:01:11Z

I don't see any heat change in your screenshot, they're all almost the same color. The "no heat" color should be more gray, matching what GitHub does. See #5081 (comment) to find out how to use GitHub’s own colors, we shouldn't generate our own.

Hm looks like heat colors file isn't loaded on all pages, so we can't use it directly. I can load the file , or copy/paste it with a comment explaining where it comes from.
https://github.githubassets.com/assets/code-d21b20a03009.css

imo copy/paste gives more control and is not much less maintainable.

Co-authored-by: Federico Brigante <me@fregante.com>

fregante · 2022-10-21T17:11:26Z

imo copy/paste gives more control and is not much less maintainable.

Sounds fine to me. My only concern was around theming, but it doesn't seem that they're affected by this.

You can just copy the rules that include data-heat like:

.blame-commit[data-heat="1"]{border-right:2px solid #f66a0a}.blame-commit[data-heat="2"]{border-right:2px solid rgba(246,106,10,.9)}.blame-commit[data-heat="3"]{border-right:2px solid rgba(246,106,10,.8)}.blame-commit[data-heat="4"]{border-right:2px solid rgba(246,106,10,.7)}.blame-commit[data-heat="5"]{border-right:2px solid rgba(246,106,10,.6)}.blame-commit[data-heat="6"]{border-right:2px solid rgba(246,106,10,.5)}.blame-commit[data-heat="7"]{border-right:2px solid rgba(246,106,10,.4)}.blame-commit[data-heat="8"]{border-right:2px solid rgba(246,106,10,.3)}.blame-commit[data-heat="9"]{border-right:2px solid rgba(246,106,10,.2)}.blame-commit[data-heat="10"]{border-right:2px solid rgba(246,106,10,.1)}.heat[data-heat="1"]{background:#f66a0a}.heat[data-heat="2"]{background:rgba(246,106,10,.9)}.heat[data-heat="3"]{background:rgba(246,106,10,.8)}.heat[data-heat="4"]{background:rgba(246,106,10,.7)}.heat[data-heat="5"]{background:rgba(246,106,10,.6)}.heat[data-heat="6"]{background:rgba(246,106,10,.5)}.heat[data-heat="7"]{background:rgba(246,106,10,.4)}.heat[data-heat="8"]{background:rgba(246,106,10,.3)}.heat[data-heat="9"]{background:rgba(246,106,10,.2)}.heat[data-heat="10"]{background:rgba(246,106,10,.1)}.blame-commit-date{font-size:12px;line-height:25px;flex-shrink:0}.blame-commit-date[data-heat="1"]{color:#c24e00}.blame-commit-date[data-heat="2"]{color:#ac571f}.blame-commit-date[data-heat="3"]{color:#a35b2c}.blame-commit-date[data-heat="4"]{color:#9a5f38}.blame-commit-date[data-heat="5"]{color:#926245}.blame-commit-date[data-heat="6"]{color:#896651}.blame-commit-date[data-heat="7"]{color:#806a5e}.blame-commit-date[data-heat="8"]{color:#776d6a}.blame-commit-date[data-heat="9"]{color:#6e7177}.blame-commit-date[data-heat="10"]{color:#6a737d}

But the classes need to be changed to .rgh-blah-blah to make sure we don't override their CSS.

foolmoron · 2022-10-21T17:23:41Z

@fregante Alright, updated in latest. Also updated the description and added a new screenshot. wdyt? Looks pretty nice imo

yakov116 · 2022-10-21T17:40:00Z

source/helpers/math.ts

+	};
+}
+
+export function createHeatIndexFunc(values: number[]): (value: number) => number {


Maybe findHeatIndex?

It's a little weird since returns a function, not the head index directly

@fregante do you have a better name for this function?

I think it's a reasonable name, other than "Func" which can just be Function. I'm not sure why eslint didn't catch it https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/prevent-abbreviations.md

the "lerp" functions should be extended though. Use "linear interpolation" or something else. calculateMinMax can just be inlined as:

const min = Math.min(...values); const max = Math.max(...values);

Made the changes in latest!

source/helpers/math.ts

source/refined-github.css

source/features/release-download-count.tsx

fregante · 2022-10-21T17:49:12Z

Starting to look good! I'd probably color the related icon too. Or maybe just the icon. 🤔

I hope it's still all readable. I've been using the colors on the file list but contrast definitely takes a hit. We'll see how people respond.

foolmoron · 2022-10-21T17:57:58Z

Yeah, one option I was thinking is to restrict the heatmap to just the top 3-5 values. So the contrast is largely maintained at the cost of granularity.

Here's the various options of icon vs text coloration. Take your pick!

Just text

Just icon

Both

source/refined-github.ts

source/helpers/math.ts

yakov116 · 2022-10-24T21:08:47Z

source/helpers/math.ts

+ * @param interpolation Interpolation amount from 0.0 to 1.0 (or beyond to get a value outside the range [min, max])
+ * @returns Interpolated value
+ */
+export function linearInterpolation(min: number, max: number, interpolation: number): number {


Why is this function exported?

Better yet where is this used?

Good catch, I deleted the code that used this. Fixed in latest.

yakov116 · 2022-10-24T21:09:38Z

source/helpers/math.ts

+ * @param value Value in the range
+ * @returns Interpolation amount from 0.0 to 1.0 (or beyond if `x` is outside the range [min, max])
+ */
+export function inverseLinearInterpolation(min: number, max: number, value: number): number {


Why is this function exported?

Fixed in latest

I restored the export because the file is named "math"

fregante · 2022-10-26T05:48:48Z

I'll work on it 👍

foolmoron · 2022-10-26T06:20:58Z

@fregante I think it should be good now if there's no other comments!

fregante · 2022-10-26T06:25:39Z

It was working until I refreshed the page and then all the downloads got a heat of 10 🤔 I'm confused.

fregante · 2022-10-26T06:30:27Z

Ok fixed.

.values() returned an iterable which was then empty after the first iteration 😅

foolmoron · 2022-10-26T06:33:16Z

Nice!

fregante · 2022-10-26T07:12:08Z

Updating the screenshot in the readme too:

Also mobile screenshot for future reference

fregante · 2022-10-26T07:20:14Z

Thank you for the PR, Momin!

Heatmap math funcs + example in release download counts

b8bf507

foolmoron mentioned this pull request Oct 21, 2022

Apply heatmap coloring (like in blame view) to release-download-count #5637

Closed

fregante reviewed Oct 21, 2022

View reviewed changes

source/helpers/math.ts Outdated Show resolved Hide resolved

fregante changed the title ~~Heatmap in release download counts + math func helpers~~ Apply heatmap coloring (like in blame view) to release-download-count Oct 21, 2022

Update source/helpers/math.ts

305aacf

Co-authored-by: Federico Brigante <me@fregante.com>

Use github heat colors

f60d000

Fix lint

1506cb2

yakov116 reviewed Oct 21, 2022

View reviewed changes

source/helpers/math.ts Outdated Show resolved Hide resolved

Clean up and document math

52f92c1

fregante reviewed Oct 21, 2022

View reviewed changes

source/refined-github.css Outdated Show resolved Hide resolved

source/features/release-download-count.tsx Outdated Show resolved Hide resolved

Names for lerp vars

861e9a1

foolmoron added 2 commits October 21, 2022 13:54

Move heatmap css

7e53112

Use map for download counts

97c1004

Fix lint

91872ef

yakov116 added the enhancement label Oct 23, 2022

yakov116 reviewed Oct 23, 2022

View reviewed changes

source/refined-github.ts Outdated Show resolved Hide resolved

yakov116 reviewed Oct 23, 2022

View reviewed changes

source/helpers/math.ts Outdated Show resolved Hide resolved

foolmoron added 3 commits October 23, 2022 18:08

Fix divide by 0

8a2459b

Move css

1fb95a6

Fix lint

7d7d6de

paulius-valiunas mentioned this pull request Oct 24, 2022

Make "outdated" comments visible in "files changed" tab #6105

Closed

fregante added hacktoberfest labels Oct 24, 2022

No abbrevs

c1a7d69

yakov116 reviewed Oct 24, 2022

View reviewed changes

fregante self-assigned this Oct 26, 2022

Clean up exports

ae885c7

Code style changes

aa30e6a

fregante added 2 commits October 26, 2022 13:26

Lint

4b4f46d

Lint

2fea717

fregante added 2 commits October 26, 2022 14:10

Fix alignment

46064e6

Comment

53aaa99

Update readme.md

e240fa6

fregante changed the title ~~Apply heatmap coloring (like in blame view) to release-download-count~~ Apply heatmap coloring to release-download-count Oct 26, 2022

fregante merged commit d99f558 into refined-github:main Oct 26, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Apply heatmap coloring to `release-download-count` #6095

Apply heatmap coloring to `release-download-count` #6095

foolmoron commented Oct 21, 2022 •

edited by fregante

fregante commented Oct 21, 2022 •

edited

foolmoron commented Oct 21, 2022

fregante commented Oct 21, 2022

fregante commented Oct 21, 2022 •

edited

foolmoron commented Oct 21, 2022

fregante commented Oct 21, 2022

foolmoron commented Oct 21, 2022

yakov116 Oct 21, 2022

foolmoron Oct 21, 2022

yakov116 Oct 24, 2022

fregante Oct 24, 2022

fregante Oct 24, 2022

foolmoron Oct 24, 2022

fregante commented Oct 21, 2022 •

edited

foolmoron commented Oct 21, 2022

yakov116 Oct 24, 2022 •

edited

foolmoron Oct 26, 2022

yakov116 Oct 24, 2022

foolmoron Oct 26, 2022

fregante Oct 26, 2022

fregante commented Oct 26, 2022

foolmoron commented Oct 26, 2022

fregante commented Oct 26, 2022

fregante commented Oct 26, 2022

foolmoron commented Oct 26, 2022

fregante commented Oct 26, 2022

fregante commented Oct 26, 2022

Apply heatmap coloring to release-download-count #6095

Apply heatmap coloring to release-download-count #6095

Conversation

foolmoron commented Oct 21, 2022 • edited by fregante

Test URLs

Screenshot

fregante commented Oct 21, 2022 • edited

foolmoron commented Oct 21, 2022

fregante commented Oct 21, 2022

fregante commented Oct 21, 2022 • edited

foolmoron commented Oct 21, 2022

fregante commented Oct 21, 2022

foolmoron commented Oct 21, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fregante commented Oct 21, 2022 • edited

foolmoron commented Oct 21, 2022

yakov116 Oct 24, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fregante commented Oct 26, 2022

foolmoron commented Oct 26, 2022

fregante commented Oct 26, 2022

fregante commented Oct 26, 2022

foolmoron commented Oct 26, 2022

fregante commented Oct 26, 2022

fregante commented Oct 26, 2022

Apply heatmap coloring to `release-download-count` #6095

Apply heatmap coloring to `release-download-count` #6095

foolmoron commented Oct 21, 2022 •

edited by fregante

fregante commented Oct 21, 2022 •

edited

fregante commented Oct 21, 2022 •

edited

fregante commented Oct 21, 2022 •

edited

yakov116 Oct 24, 2022 •

edited