Add Star Ratings & Want To Read counts to Search Result Cards

[merwhite11]

Closes #9463

Pulls ratings_count, ratings_average and want_to_read_count fields from Solr.
Creates a new macro that accesses these fields and displays ratings_count in star graphic and ratings_count and want_to_read_count in Search Results cards.

Technical

Testing

When testing in my local environment, I manually updated the star ratings on the books page to trigger the StarRatingsByline macro to display.

Screenshot

Questions

I created a conditional that requires a minimum of 1 ratings_count and 1 want_to_read_count in order for the StarRatingsByline to display. Should I split up the conditional so that star ratings will display, even if there is no want_to_read_count ?

Stakeholders

@mekarpeles

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 16.42%. Comparing base (ce16a79) to head (ae5e52b).
Report is 411 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #9790      +/-   ##
==========================================
+ Coverage   16.06%   16.42%   +0.36%     
==========================================
  Files          90       92       +2     
  Lines        4769     4907     +138     
  Branches      832      856      +24     
==========================================
+ Hits          766      806      +40     
- Misses       3480     3565      +85     
- Partials      523      536      +13     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[mekarpeles]

Full Text Searching for the fun explosions in the sky album name "all of a sudden i miss everyone" results in a bug

https://testing.openlibrary.org/search/inside?q=all+of+a+sudden+i+miss+everyone&debug=true

[mekarpeles]

• consistent size & color of stars ⭐
• the formatting of the reading log counts and stars (e.g. 4.2 stars, not 4.231...)

Bonus 🙂
author links blue
move down first published, # editions & languages below covers -- remove "# previewable"
covers have 10px margin top and 5px margin bottom
title is bigger than other elements e.g. 1.1em, ~#555, maybe same font as books page
formatting of stars + read counts use correct precision + commas

[merwhite11]

@mekarpeles

Completed the following updates:

• consistent size & color of stars ⭐
• the formatting of the reading log counts and stars (e.g. 4.2 stars, not 4.231...)
• author links blue
• move down first published, # editions & languages below covers --
• remove "# previewable"
• title is bigger than other elements e.g. 1.1em,
• , maybe same font as books page
• formatting of stars + read counts use correct precision + commas

I have questions on these ones:

• covers have 10px margin top and 5px margin bottom -
  10px on top and 5px on bottom is the current styling. Should it be changed to something else?

• title is bigger than other elements e.g. 1.1em, ~Strange editions table rendering on "Into Thin Air" #555, maybe same font as books page
  I don't understand the connection with Strange editions table rendering on "Into Thin Air" #555. It appears to match editions tables of other books.

[mekarpeles]

re: margin-top: 10px and margin-bottom: 5px, I'm referring to the style .searchResultItem .preview-covers

From:

To:

[mekarpeles]

Re #555, 🤣 I'm so sorry, that was meant to be an html code #555 / #555555 dark grey

[mekarpeles]

want_to_read_count probably shouldn't be in the Star Ratings General

[mekarpeles]

Things are looking pretty good! Just 3 more things that need to be tweaked:

1. We probably want the StarRatingsGeneral.html template to only render star ratings and not reading log counts, etc. I'd also consider naming it StarRatingsComponent
2. StarRatingsComponent still needs to be updated so that avg_rating variable uses "%.1f" % avg_rating so we see something like 8.9 instead of 8.8839213. This will be done in the StarRatingsComponent
3. margin-top: 10px and margin-bottom: 5px on .searchResultItem .preview-covers

See [2] formatting

[merwhite11]

@mekarpeles - thank you for follow-up review.

• Author's name in blue (previous styling did not work. Removed "results" attributes being passed to BookByline.
• Formatted avg_rating to be rounded to the nearest tenth (got mixed up and was rounding stats_decimal instead!)
• Renamed StarRatingsGeneral -> StarRatingsComponent
• Removed Want to Read from StarRatingsComponent and put back in to parent macros.
• Added margin-top 10px and margin-bottom 5px to preview covers -- thank you for clarifying.

[mekarpeles]

I had accidentally posted this on the wrong issue: We may have (a) a few style tweaks and (b) numerical formatting / precision / commas to make to our search results + star ratings PR, though overall looking good. And the half star and whole stars should be the same gold color

Perhaps we're missing a style rule for reader-stats__star. Currently, --half has the style font-size: 1.5em; which should probably be moved to whatever the base class is that --half overwrites. Also this base class needs the right @gold #ffd400 color.

Here are some other small tweaks that may make things cleaner for this version:

Bonus points:

• First published, # editions and languages moved below covers
• Number of "previewable editions" removed
• Adds .searchResultItem .preview-covers has 10px margin-top
• Somehow we lost the blue color of the Author (so it looks like a link)
• The title should be a bit larger than the other elements, e.g. 1.1em and perhaps use the same font as the books page font-family: Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif;

[merwhite11]

@mekarpeles I think I need to input some mock data because I am not able to reproduce the styling you are seeing. I'm not sure how to replicate half stars and 4 digit numbers in my test environment.

On my end, the following adjustments have been made:

• Stars need to be #ffd400 gold -- I added color:@gold to the _star--half class. Not sure why it's not inheriting color from _star class.
• Round to tenth for star rating average -- I'm using the rounded_avg value: $ rounded_avg = "%.1f" % ratings_average
• Precision commas for ratings_count and want_to_read_count -- adjusted format to account for 'None' in last commit
• First published, # editions and languages moved below covers
• Number of "previewable editions" removed
• Adds .searchResultItem .preview-covers has 10px margin-top
• Somehow we lost the blue color of the Author (so it looks like a link)
• The title should be a bit larger than the other elements, e.g. 1.1em and perhaps use the same font as the books page font-family: Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif;

[mekarpeles]

2 bugs

https://testing.openlibrary.org/books/OL17236630M/The_Frodo_franchise?debug=true

1. I think we dropped $ review_count_class = 'readers-stats__review-count--none' if ratings_count == 0 else '' somewhere along the way.

2. Regarding Add Star Ratings & Want To Read counts to Search Result Cards #9790 (comment)...

https://testing.openlibrary.org/search/inside?q=lord+of+the+rings

I believe that because macros/FulltextResults.html is now borrowing from macros/SearchResultsWork.html and the languages that we're getting back from regular book search (solr works as strings) are different than full text search inside UI (Thing objects from an infogami edition), we have to check what the data type of our language(s) is before doing anything to them.

Also, in the case of Fulltext Search Inside, I believe we're getting a list of infogami editions back (instead of solr **words**) and an edition should almost always only have 1 language, so probably the right solution is we don't want to show the # languages` element if the type of our doc is an edition.

We should be able to modify it by adding a type check... doc_type in ['infogami_work', 'solr_work']
And also defining an intermediary langs variable with a type check, like $ langs = [get_language_name(lang.key if hasattr(lang, 'key') else '/languages' + lang) for lang in doc.languages]

e.g.

            $if doc.get('languages') and doc_type in ['infogami_work', 'solr_work']:
              <span class="languages">
                $ langs = [get_language_name(lang.key if hasattr(lang, 'key') else '/languages' + lang) for lang in doc.languages]
                $:ungettext('in <a class="hoverlink" title="%(langs)s">%(count)d language</a>', 'in <a class="hoverlink" title="%(langs)s">%(count)d languages</a>', len(doc.languages), count=len(do\
c.languages), langs=commify_list(langs))
              </span>

[mekarpeles]

One more... re: the Book page stars

Double • when star ratings

Leading • when no star ratings

[mekarpeles]

May be a bug with half-stars. In some cases, we may be rounding up the stars but the half-stars class is still being applied?

https://testing.openlibrary.org/search?q=lord+of+the+rings&mode=ebooks&has_fulltext=true

[mekarpeles]

@merwhite11 thank you for going through these! 🎉
https://gist.github.com/mekarpeles/3545a49c914b78aeaa7be4e9ec16f9cd

[mekarpeles]

Some small bug fixes

diff --git a/openlibrary/macros/StarRatingsByline.html b/openlibrary/macros/StarRatingsByline.html
index b3261730b..dbf2ff662 100644
--- a/openlibrary/macros/StarRatingsByline.html
+++ b/openlibrary/macros/StarRatingsByline.html
@@ -3,11 +3,11 @@ $def with(ratings_count, ratings_average, want_to_read_count)
 $ formatted_want_to_read_count = "{:,}".format(want_to_read_count) if want_to_read_count else ""
 $ ratings_label = _('rating') if ratings_count == 1 else _('ratings')
 
-<span class="ratingsByline itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
+<span class="ratingsByline" itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
   $if ratings_count:
     $:macros.StarRatingsComponent(ratings_count, ratings_average, 'results_page')
 </span>
 $if want_to_read_count and ratings_count:
   <span class="dot">·</span>
 $if want_to_read_count:
-  <span class="ratingsByline" itemprop="reviewCount">$_('%(want_to_read_count)s Want to read', want_to_read_count=formatted_want_to_read_count)</span>
\ No newline at end of file
+  <span class="ratingsByline" itemprop="reviewCount">$_('%(want_to_read_count)s Want to read', want_to_read_count=formatted_want_to_read_count)</span>
diff --git a/openlibrary/macros/StarRatingsStats.html b/openlibrary/macros/StarRatingsStats.html
index c09db1a12..6fe68d5f9 100644
--- a/openlibrary/macros/StarRatingsStats.html
+++ b/openlibrary/macros/StarRatingsStats.html
@@ -2,7 +2,7 @@ $def with(work, mobile=False)
 
 $ rating_stats = work and work.get_rating_stats() or {}
 $ stats_by_bookshelf = work and work.get_num_users_by_bookshelf() or {}
-$ avg = rating_stats.get('avg_rating')
+$ ratings_average = rating_stats.get('avg_rating')
 $ ratings_count = rating_stats.get('num_ratings', 0)
 $ want_to_read_count = "{:,}".format(stats_by_bookshelf.get('want-to-read', 0))
 $ currently_reading_count = "{:,}".format(stats_by_bookshelf.get('currently-reading', 0))
@@ -10,7 +10,7 @@ $ already_read_count = "{:,}".format(stats_by_bookshelf.get('already-read', 0))
 $ review_count_class = 'readers-stats__review-count--none' if ratings_count == 0 else ''
 $ id = '--mobile' if mobile else ''
 
-<ul class="readers-stats  $review_count_class" itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
+<ul class="readers-stats $review_count_class" itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
   <li class="avg-ratings" onclick="location.href='#starRatingSection';" data-ol-link-track="StarRating|StatsComponentClick">
     $if ratings_count:
       $:macros.StarRatingsComponent(ratings_count, ratings_average, 'results_page')

[mekarpeles]

Suggested change

	<ul class="readers-stats $review_count_class" itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
	<ul class="readers-stats $review_count_class" itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">

[mekarpeles]

One bug we may want to look into:

https://testing.openlibrary.org/works/OL17860744W/A_Court_of_Mist_and_Fury?debug=true

This book seems to have exactly 4.0 rating avg but shows a half star 🤔

This book shows 4.2 stars (which should show half?) but shows no half star
https://testing.openlibrary.org/works/OL257943W/A_Game_of_Thrones

The good news is, in both cases, this also seems to be the behavior on production?