LB-1102, LB-1610, LB-945: Revamp Top Entity stats pages #2937

MonkeyDo · 2024-07-10T16:13:49Z

We have long had this side-by-side listencard and graph page, which A. doesn't look great, B. is unusable on mobile and C. the graph doesn't add much as it stands:

Separate the graph and put it at the top where it offers a useful overview while not making the rest of the page unusable.
Keep the listencards below for now, as they are useful for listening to music directly or navigating to the entities' pages.
Use ReleaseCard components for albums instead of ListenCard.
Add a splash of colour to make it less dull, and voilà:

The bottom of the graph, the pagination buttons moved up, and the release cards below:

Couldn't come up with a better place to put the rank (# 1,etc.) than the title tooltip that appears on hover:

On mobile:

Also fixes LB-945 as I reworked the pagination component as well.

Put the graph at the top of the page and the list of entities below that. The left/right split that we currently have is unusable on mobile and pretty ugly on desktop, so...

To allow wrapping text especially for narrow mobile phone screens, otherwise the tooltip does not serve its primary purpose on mobile

MonkeyDo · 2024-07-10T16:24:29Z

@Aerozol I haven't deployed this PR anywhere, but the screenshots should do it justice.
I was going for improvement over perfection, so I'm sure we could improve this a lot.
At least the changes here make the page usable, and that was my priority.

Aerozol · 2024-07-10T23:15:22Z

Ooh, very cool!!

No notes re. the functionality, but I think the styling needs to be more accessible. In particular the white writing on the orange background is going to give some users difficulty/won't meet accessibility standards.

I think we could make the squares larger, giving some space around the text, and left-align the text too. And maybe have the colourful background at 20% or something, and have black text? Or you might find a nicer way to make the text more visible.

Gradient is cool though - how does it look left to right? e.g. so the most listened albums are more 'hot'

Thanks for letting me nit-pick your hard work ;P

MonkeyDo · 2024-07-11T09:39:30Z

Thanks for letting me nit-pick your hard work ;P

Thanks for your insight !

No notes re. the functionality, but I think the styling needs to be more accessible. In particular the white writing on the orange background is going to give some users difficulty/won't meet accessibility standards.
I think we could make the squares larger, giving some space around the text, and left-align the text too. And maybe have the colourful background at 20% or something, and have black text? Or you might find a nicer way to make the text more visible.

It confirms some of the thoughts I had as well, in particular the legibility and alignment of the text in the graph.
I'll see what I can do with text/bars colours.
In particular I chose the two LB colours for the gradient, but it doesn't have to be this way after all. Will look at some of the other gradient colours we use elsewhere.

For the alignment I am waiting for the graph package to be updated. Serendipitously a pull request to allow customizing the alignment of the text was merged just last week! (plouc/nivo#2585)

Gradient is cool though - how does it look left to right? e.g. so the most listened albums are more 'hot'

Not sure I understand what you mean there. The same gradient left to right in each bar? The most listened album is the one on top, I'm not clear on how the gradients would make it look more hot.

MonkeyDo · 2024-07-11T10:02:56Z

For a simple example to give you an idea, I can generate some complementary/triad/analogous colours based on one of our brand colours, and I can also automatically set the text colour based on readability of the background colour like so (although I might want a better tool, the result is not ideal):

Setting the opacity of the bar I'm not convinced by:

A bit more fiddling, this might work?

MonkeyDo · 2024-07-11T12:56:20Z

Gradient is cool though - how does it look left to right? e.g. so the most listened albums are more 'hot'

Do you mean something like this? (I'm learning some advanced SVG gradient techniques, thanks :p )
I mocked up what it would look like with the text left-aligned:

And with another gradient from the "created for you page". Is that too MusicBrainz?

Or starting lighter and ending with the LB orange but super-saturated?

Aerozol · 2024-07-12T10:59:48Z

Looking nice!!

With the gradient, I meant rotating what you already had 90%. I think for sure you can have some more padding around the text?
The bold text, close together, seems quite heavy compared to your light designs for ListenBrainz (e.g. the thin fonts for headers, with a lot of white)

I'm thinking something like this might be more on brand:

Potentially even with lighter text.

If the washed-outness is looking too dull maybe we can freshen it up without interfering with the text?

MonkeyDo · 2024-07-16T14:55:46Z

Alas, we must make some compromises.
Here are the options available to us (please ignore the text for now):

gradient is 'fixed', meaning a shorter bar will show less of the gradient than a long bar:
Top of the graph:

Bottom of the graph with less colour:

I managed to get it working for mobile sizes too:

gradient adapts to the length of each bar:
It allows us to add that extra little colourful bit at the end (note that I can't vary the colour, it's the same for each bar), but doesn't have that "more listens = warmer color" aspect that we have with solution 1 on desktop

Looks nice on mobile too:

MonkeyDo · 2024-07-16T15:23:41Z

And the tweaked text colors + artist name added:

Artists only:

code more

Aerozol · 2024-07-18T08:23:28Z

Looks great! Really!

Honestly, I can't pick between 1 & 2 (colourful end part vs having 'cooler' listens at the bottom). I'm happy for you to make the call, I'm really impressed you were able to turn around my figma noodling 🥇

if it is in the data

foreignObject allows us to use HTML in the SVG, to use links as well as using CSS to handle text wrapping and ellipses. On mobile try to save some space by moving elements around a bit.

Replaces the ListenCard component for releases and release-groups

We removed the graph tooltips which don't work well with links in the bars , considering we were able to put almost all the information directly in the graph bars. The only missing piece of data is the listen count, so an axis at the top helps read that piece of data. Listens count also available on hover using html title

…ity types

in my bellybutton

Calculate the height of the graph based on the number of results, for example for your weekly stats if you don't have 25 artists yet.

also show number of listens for each bar instead of the position (#1, #2, etc.)

MonkeyDo · 2024-07-23T10:46:41Z

I pushed a bit more to try and solve the issues I saw, and that other people reported.
In particular, missing were: the listen count for each bar, links to the entities, and a bit more colour (both myself and people I asked thought it looked a bit washed out).

Here is a proposal to resolve these points:

The bottom of the graph, the pagination buttons moved up, and the release cards below:

Couldn't come up with a better place to put the rank (#1,etc.) than the title tooltip that appears on hover:

Currently deployed on test.lb https://test.listenbrainz.org/user/mr_monkey/stats/top-artists/?range=week

currently not sent by the frontend, see LB-1609

We have some releases, artists and recordings that are unmapped, meaning we don't have MBIDs for them. In that case, link to the pre-filled search page rather than linking to e.g. `/artist/undefined`

Tweak the color and size of the bars a bit more, and make the ticks and grid lines for integers only (no sense in showing fractions of a listen...)

Didn't realize we could use the same definition as for the tick value, which is exactly what I wanted.

I wanted to put that information somewhere, as it is impractical to add it to the bar text itself. At least we have somewhere to put that piece of data.

anshg1214

This PR looks good to me. Just some minor fixes.

Further down there can be two improvements in the top-entity stats page.

Let's add caching using react query to the API call getData.
Let's move the pills on the top outside the loader component.

But, let's do these changes in a separate PR.

Also, please update the screenshots in the PR description to the latest version.

frontend/js/src/user/charts/UserEntityChart.tsx

"display:grid" with items set to be 400px minimum we causing overflow issues because grid items do not honor min-width. Flexbox to the rescue once again! Also two-line ellipsis for listencard title like we do elsewhere.

In global stats we don't have an entityCount so we should just hide the header + remove useless row + col-xs-12 wrappers which achieve nothing.

Using a .row wrapper with a single .col-xs-12 inside basically does nothing other than making the HTML less readable.

Good old off-by-one error !

Made a mistake previously by setting the number of pages to the max possible number of pages, instead of capping it at that number.

MonkeyDo · 2024-07-29T17:11:43Z

~~Ran into a bug, hold off on merging please~~

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Edit: Try as I might I couldn't replicate it. I think it was probably because I had manipulated nodes in the HTML page directly and React didn't like it when I switched page

anshg1214

LGTM!

MonkeyDo added 4 commits July 9, 2024 15:05

LB-1102: Improve entity stats on mobile

d77c209

Put the graph at the top of the page and the list of entities below that. The left/right split that we currently have is unusable on mobile and pretty ugly on desktop, so...

Improve Top Entity graph layout and color

e4b1919

TopEntity graph: Custom tooltips

62d00a1

To allow wrapping text especially for narrow mobile phone screens, otherwise the tooltip does not serve its primary purpose on mobile

Housekeeping!

67f4528

MonkeyDo requested a review from Aerozol July 10, 2024 16:22

MonkeyDo added 2 commits July 11, 2024 16:40

TopEntity graph: Fix tooltip and bottom axis

8fbe413

TopEntity graph: finesse layout and colors

1591f51

MonkeyDo mentioned this pull request Jul 16, 2024

Add Music Player UI for Mobile Devices #2940

Open

MonkeyDo and others added 3 commits July 16, 2024 18:22

TopEntity graph: Tweak colors and layout a bit more

ba2a0dc

Lint less

5b1ac25

code more

Merge branch 'master' into entity-stats-page

c23e460

MonkeyDo added 10 commits July 18, 2024 14:32

TopEntity graph: add artist in tooltip

bb9c743

if it is in the data

TopEntity graph: custom bar component

08ec9ce

foreignObject allows us to use HTML in the SVG, to use links as well as using CSS to handle text wrapping and ellipses. On mobile try to save some space by moving elements around a bit.

TopEntity graph: better mobile screen sizes support

e294362

TopEntity page: use ReleaseCard component where applicable

f28db67

Replaces the ListenCard component for releases and release-groups

TopEntity page: maintain selected range during navigation between ent…

6124cd0

…ity types

TopEntity: Some final tweaks

08ae6ca

Lint

8eb726b

in my bellybutton

TopEntity: Fewer axes ticks

651e113

TopEntity graph: adapt to fewer results

ad508b0

Calculate the height of the graph based on the number of results, for example for your weekly stats if you don't have 25 artists yet.

TopEntity graph: modify colors

296978e

also show number of listens for each bar instead of the position (#1, #2, etc.)

MonkeyDo added 6 commits July 23, 2024 12:52

TopEntity: Slightly wider listencards

6afd0f7

TopTracks: Add recordingMSID

acf1ecc

currently not sent by the frontend, see LB-1609

ReleaseCard: don't link to entities we don't have MBIDs for

94a51f7

We have some releases, artists and recordings that are unmapped, meaning we don't have MBIDs for them. In that case, link to the pre-filled search page rather than linking to e.g. `/artist/undefined`

TopEntity graph: more fine details

a1985de

Tweak the color and size of the bars a bit more, and make the ticks and grid lines for integers only (no sense in showing fractions of a listen...)

UserEntity page: Rework pagination component

86a50bc

UserEntity graph: Fix number of grid lines

d156e6d

Didn't realize we could use the same definition as for the tick value, which is exactly what I wanted.

MonkeyDo changed the title ~~LB-1102: Revamp Top Entity stats pages~~ LB-1102, LB-1610, LB-945: Revamp Top Entity stats pages Jul 25, 2024

MonkeyDo added 2 commits July 25, 2024 18:20

TopEntity page: fix small pagination issues

2fdbd44

TopEntity graph: Add chart position to tooltip text

5406f08

I wanted to put that information somewhere, as it is impractical to add it to the bar text itself. At least we have somewhere to put that piece of data.

MonkeyDo requested a review from anshg1214 July 25, 2024 16:48

TopEntity: don't pluralize 1 listen in tooltip

3cd2254

anshg1214 requested changes Jul 29, 2024

View reviewed changes

frontend/js/src/user/charts/UserEntityChart.tsx Outdated Show resolved Hide resolved

frontend/js/src/user/charts/UserEntityChart.tsx Outdated Show resolved Hide resolved

frontend/js/src/user/charts/UserEntityChart.tsx Outdated Show resolved Hide resolved

MonkeyDo added 7 commits July 29, 2024 17:29

Remove unused ref

50369a8

TopEntity page: Fix ListenCard grid

7a6bd87

"display:grid" with items set to be 400px minimum we causing overflow issues because grid items do not honor min-width. Flexbox to the rescue once again! Also two-line ellipsis for listencard title like we do elsewhere.

Only show entity count header if entityCount exists

36b3c65

In global stats we don't have an entityCount so we should just hide the header + remove useless row + col-xs-12 wrappers which achieve nothing.

Remove useless row + col-xs-12 wrappers which achieve nothing.

d07d682

Using a .row wrapper with a single .col-xs-12 inside basically does nothing other than making the HTML less readable.

TopEntity: Fix pagination buttons

b2adcc8

Good old off-by-one error !

TopEntity pagination: Fix max number of pages

867d6e8

Made a mistake previously by setting the number of pages to the max possible number of pages, instead of capping it at that number.

TopEntity pagination: Hide pagination when only one page

26d364d

MonkeyDo requested a review from anshg1214 July 30, 2024 10:22

MonkeyDo and others added 2 commits July 30, 2024 13:17

TopEntity: Add spacing between listencards

05215be

Merge branch 'master' into entity-stats-page

ea43e1c

anshg1214 approved these changes Jul 31, 2024

View reviewed changes

MonkeyDo merged commit cde6811 into master Jul 31, 2024
2 checks passed

MonkeyDo deleted the entity-stats-page branch July 31, 2024 11:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

LB-1102, LB-1610, LB-945: Revamp Top Entity stats pages #2937

LB-1102, LB-1610, LB-945: Revamp Top Entity stats pages #2937

MonkeyDo commented Jul 10, 2024 •

edited

Loading

MonkeyDo commented Jul 10, 2024

Aerozol commented Jul 10, 2024

MonkeyDo commented Jul 11, 2024 •

edited

Loading

MonkeyDo commented Jul 11, 2024 •

edited

Loading

MonkeyDo commented Jul 11, 2024 •

edited

Loading

Aerozol commented Jul 12, 2024

MonkeyDo commented Jul 16, 2024 •

edited

Loading

MonkeyDo commented Jul 16, 2024 •

edited

Loading

Aerozol commented Jul 18, 2024

MonkeyDo commented Jul 23, 2024 •

edited

Loading

anshg1214 left a comment •

edited

Loading

MonkeyDo commented Jul 29, 2024 •

edited

Loading

anshg1214 left a comment

LB-1102, LB-1610, LB-945: Revamp Top Entity stats pages #2937

LB-1102, LB-1610, LB-945: Revamp Top Entity stats pages #2937

Conversation

MonkeyDo commented Jul 10, 2024 • edited Loading

MonkeyDo commented Jul 10, 2024

Aerozol commented Jul 10, 2024

MonkeyDo commented Jul 11, 2024 • edited Loading

MonkeyDo commented Jul 11, 2024 • edited Loading

MonkeyDo commented Jul 11, 2024 • edited Loading

Aerozol commented Jul 12, 2024

MonkeyDo commented Jul 16, 2024 • edited Loading

MonkeyDo commented Jul 16, 2024 • edited Loading

Aerozol commented Jul 18, 2024

MonkeyDo commented Jul 23, 2024 • edited Loading

anshg1214 left a comment • edited Loading

Choose a reason for hiding this comment

MonkeyDo commented Jul 29, 2024 • edited Loading

anshg1214 left a comment

Choose a reason for hiding this comment

MonkeyDo commented Jul 10, 2024 •

edited

Loading

MonkeyDo commented Jul 11, 2024 •

edited

Loading

MonkeyDo commented Jul 11, 2024 •

edited

Loading

MonkeyDo commented Jul 11, 2024 •

edited

Loading

MonkeyDo commented Jul 16, 2024 •

edited

Loading

MonkeyDo commented Jul 16, 2024 •

edited

Loading

MonkeyDo commented Jul 23, 2024 •

edited

Loading

anshg1214 left a comment •

edited

Loading

MonkeyDo commented Jul 29, 2024 •

edited

Loading