Reader: load a new recommendation after an interaction with a card #5652

bluefuton · 2016-05-28T17:16:35Z

If a user interacts with a recommendation card, a related recommendation card should be loaded and after immediately after it (where available).

How does it work, then?

When a user clicks anywhere on the card, we attempt to grab up to 3 extra recommendations. If we don't have one, we ask the API for new ones.

If we find any, we insert the recommendations at the end of the existing cards.

Note: clicking cards won't always trigger the loading of new recommendations, for example if they're sibling cards of an existing recommendation, or if we already have the recommended sites in the currently loaded cards.

Todo

Redux: don't accept duplicate recommendations
Write test for insertion order

TooTallNate · 2016-05-29T17:32:46Z

client/state/reader/start/actions.js

+			meta: 'site,post',
+			origin_site_ID: originSiteId,
+			origin_post_ID: originPostId,
+			number: limit


number doesn't currently do anything in the API endpoint FYI.

The LIMIT in the SQL query is currently hard-coded to 20.

number= is supported now (thanks for adding @TooTallNate!)

bluefuton · 2016-06-03T17:20:29Z

Ready for 👀 @blowery @TooTallNate

jancavan · 2016-06-03T17:37:29Z

@bluefuton not sure how this happened - a new card got recommended, but it's a card that already exists? (See Momsicle one below):

bluefuton · 2016-06-03T17:48:26Z

Glitches we've discovered so far:

New recs can appear in the wrong position (before the card interacted with instead of after)
New recs can appear in the wrong position because display order does not match HTML source order
@jancavan has seen a duplicate card appear, not sure how to reproduce yet
Make blavatar, site name, and followers clickable - should open site stream

jancavan · 2016-06-03T18:03:00Z

@bluefuton Just posting again here for completeness.

I added a 3rd item on the to-do above. They should just count as interactions since they're more prominent and people are likely to click on them vs the post title.

I'm unable to reproduce the duplicate cards.

jancavan · 2016-06-03T19:14:09Z

@bluefuton Would it be possible to use the Discover image as a card header even just for seed posts? Then subsequent cards can just use their site's image as header since we can only grab Discover images for seed posts atm?

It looks pretty plain right now - out of 10 cards, there's only 2 with header images and the rest are gray.

blowery · 2016-06-06T13:29:39Z

@jancavan @bluefuton wasn't there also a plan to fallback to the canonical image on the featured post if present?

bluefuton · 2016-06-06T13:48:18Z

@jancavan re: "make blavatar, site name, and followers clickable" - clicking any of those already counts as a card interaction and should load a new recommendation.

Do you mean to open the full post view (if we have a post) or site stream when clicking those?

bluefuton · 2016-06-06T14:10:05Z

The duplicate cards are coming from the endpoint. They have different recommendation IDs, so there's not much we can do to dedupe in Calypso - we need to fix this on the backend.

bluefuton · 2016-06-06T14:16:10Z

@jancavan let's have a chat about card ordering :) I think we'll need the card display order to match the HTML source order. At the moment new recs are appearing in the wrong spot.

jancavan · 2016-06-06T15:09:38Z

wasn't there also a plan to fallback to the canonical image on the featured post if present?

I thought this was what we were already doing, but cleared this up with @bluefuton.

@TooTallNate Can we use the site header then fallback will be Discover featured image (for seed posts) then featured post image?

Do you mean to open the full post view (if we have a post) or site stream when clicking those?

Blavatar, site name, and followers should jump to the site's stream.

blowery · 2016-06-06T17:22:37Z

#5564 will expose canonical_image on the post object, which should help.

jancavan · 2016-06-06T21:55:30Z

@bluefuton tried different ways to fix the ordering for cards to flow from L to R instead of Top to Bottom, but it's really not possible with plain CSS. Either we:

Figure out how to do it using JS or,
Just append new recs to the bottom of the original set

Let's just go with (2). With the current size of the cards, it's hard to make the connection between the card the you clicked and new cards that show up, especially in smaller viewports.

bluefuton · 2016-06-07T11:50:41Z

Remove "insert after parent" rec behaviour and add new recs at end of list
Retrieve up to 3 new recs after card interaction (currently 1)
Retrieve up to 20 new recs when fetching seeds

bluefuton · 2016-06-07T14:14:49Z

Thanks @jancavan. New recommendations are now appended to the end of the list 👍

jancavan · 2016-06-09T20:53:16Z

Card sorting issue has been addressed in: #5944 👏

jancavan · 2016-06-10T18:14:32Z

Are we using Discover featured image as fallback yet @bluefuton?

This post has a Discover image, but it's showing the gray background:

bluefuton · 2016-06-10T18:17:11Z

Are we using Discover featured image as fallback yet @bluefuton?

No, we don't have access to it in the API response at the moment. We'll either have to add the discover post to meta or pull it out as header_image in the endpoint when we don't have a site header. One for another PR though.

blowery · 2016-06-13T14:25:39Z

client/state/reader/start/reducer.js

-			return Object.assign( {}, state, keyBy( action.recommendations, 'ID' ) );
+			// Filter out any recommendations we already have
+			const newRecommendations = filter( action.recommendations, ( incomingRecommendation ) => {
+				if ( findIndex( state, ( existingRecommendation ) => {


i think this can just be return ! find( state, { ID: incomingRecommendation.ID } ) if you use lodash/find?

if you don't like the negative in the boolean you could use lodash/reject instead. reject( state, { ID: incomingRecommendation.ID } )

bluefuton · 2016-06-13T15:00:24Z

Don't serialize recommendations (just respond with the default state from SERIALIZE, or use new utils/createReducer)

- store interacted cards in the Redux tree - get child recommendation ID for card where available - only fetch 1 recommendation from API in recordRecommendationInteraction() - don't accept duplicate recommendations - add test for recommendation insertion order

… each card interaction

blowery · 2016-06-13T18:33:34Z

Looks good! ship away.

bluefuton added [Status] In Progress [Feature] Reader The reader site on Calypso. labels May 28, 2016

bluefuton added this to the Reader: Cold Start UI milestone May 28, 2016

bluefuton self-assigned this May 28, 2016

bluefuton force-pushed the add/reader/start-load-new-recommendation-on-card-interaction branch from c77704c to 38064d7 Compare May 28, 2016 17:19

TooTallNate reviewed May 29, 2016
View reviewed changes

bluefuton force-pushed the add/reader/start-load-new-recommendation-on-card-interaction branch 4 times, most recently from 16fc269 to 12b1541 Compare June 3, 2016 17:19

bluefuton added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] In Progress labels Jun 3, 2016

bluefuton added [Status] In Progress and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Jun 3, 2016

bluefuton force-pushed the add/reader/start-load-new-recommendation-on-card-interaction branch from d981e5f to abee2bb Compare June 6, 2016 14:17

bluefuton force-pushed the add/reader/start-load-new-recommendation-on-card-interaction branch from f82051c to d463183 Compare June 7, 2016 13:17

TooTallNate mentioned this pull request Jun 9, 2016

Reader: use react-masonry-component for StartCards #5944

Merged

bluefuton force-pushed the add/reader/start-load-new-recommendation-on-card-interaction branch 2 times, most recently from ace3196 to cb9c1ec Compare June 10, 2016 16:24

bluefuton added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] In Progress labels Jun 10, 2016

blowery reviewed Jun 13, 2016
View reviewed changes

bluefuton added [Status] Needs Author Reply and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Jun 13, 2016

bluefuton added 3 commits June 13, 2016 17:53

Link site blavatar, title, description and follower count to site stream

b444818

Recommendation requests: ask for 20 initially, then up to three after…

2c7d464

… each card interaction

bluefuton force-pushed the add/reader/start-load-new-recommendation-on-card-interaction branch from cb9c1ec to 4840cb0 Compare June 13, 2016 16:53

Insert new recommendations at the end of the list

f539fd8

bluefuton force-pushed the add/reader/start-load-new-recommendation-on-card-interaction branch from 4840cb0 to f539fd8 Compare June 13, 2016 16:55

bluefuton added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] Needs Author Reply labels Jun 13, 2016

blowery added [Status] Ready to Merge and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Jun 13, 2016

bluefuton merged commit 2e08e6a into master Jun 13, 2016

bluefuton deleted the add/reader/start-load-new-recommendation-on-card-interaction branch June 13, 2016 19:16

matticbot removed the [Status] Ready to Merge label Jun 13, 2016

gziolo mentioned this pull request Jan 9, 2019

Gutenlypso: Register server-defined blocks attributes #29984

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reader: load a new recommendation after an interaction with a card #5652

Reader: load a new recommendation after an interaction with a card #5652

bluefuton commented May 28, 2016 •

edited

Loading

TooTallNate May 29, 2016 •

edited

Loading

bluefuton Jun 2, 2016

bluefuton commented Jun 3, 2016

jancavan commented Jun 3, 2016

bluefuton commented Jun 3, 2016 •

edited by jancavan

Loading

jancavan commented Jun 3, 2016

jancavan commented Jun 3, 2016

blowery commented Jun 6, 2016

bluefuton commented Jun 6, 2016

bluefuton commented Jun 6, 2016

bluefuton commented Jun 6, 2016

jancavan commented Jun 6, 2016

blowery commented Jun 6, 2016

jancavan commented Jun 6, 2016

bluefuton commented Jun 7, 2016 •

edited

Loading

bluefuton commented Jun 7, 2016

jancavan commented Jun 9, 2016

jancavan commented Jun 10, 2016

bluefuton commented Jun 10, 2016

blowery Jun 13, 2016

bluefuton commented Jun 13, 2016 •

edited

Loading

blowery commented Jun 13, 2016

Reader: load a new recommendation after an interaction with a card #5652

Reader: load a new recommendation after an interaction with a card #5652

Conversation

bluefuton commented May 28, 2016 • edited Loading

How does it work, then?

Todo

TooTallNate May 29, 2016 • edited Loading

Choose a reason for hiding this comment

bluefuton Jun 2, 2016

Choose a reason for hiding this comment

bluefuton commented Jun 3, 2016

jancavan commented Jun 3, 2016

bluefuton commented Jun 3, 2016 • edited by jancavan Loading

jancavan commented Jun 3, 2016

jancavan commented Jun 3, 2016

blowery commented Jun 6, 2016

bluefuton commented Jun 6, 2016

bluefuton commented Jun 6, 2016

bluefuton commented Jun 6, 2016

jancavan commented Jun 6, 2016

blowery commented Jun 6, 2016

jancavan commented Jun 6, 2016

bluefuton commented Jun 7, 2016 • edited Loading

bluefuton commented Jun 7, 2016

jancavan commented Jun 9, 2016

jancavan commented Jun 10, 2016

bluefuton commented Jun 10, 2016

blowery Jun 13, 2016

Choose a reason for hiding this comment

bluefuton commented Jun 13, 2016 • edited Loading

blowery commented Jun 13, 2016

bluefuton commented May 28, 2016 •

edited

Loading

TooTallNate May 29, 2016 •

edited

Loading

bluefuton commented Jun 3, 2016 •

edited by jancavan

Loading

bluefuton commented Jun 7, 2016 •

edited

Loading

bluefuton commented Jun 13, 2016 •

edited

Loading