similar resources carousel #1835
Conversation
gumaerc
force-pushed
the
cg/v2-drawer-similar-resources-carousel
branch
2 times, most recently
from
8927df5 to
8a1d565
Compare
| `${API_BASE_URL}/api/v1/learning_resources/${params.id}/similar/`, | ||
| vectorSimilar: ( | ||
| params: Params<LRApi, "learningResourcesVectorSimilarList">, | ||
| ) => `${API_BASE_URL}/api/v1/learning_resources/${params.id}/vector_similar/`, |
There was a problem hiding this comment.
If I scroll all the way to the end of the carousel it seems to allow for one extra (and empty) pagination. Should we fetch some multiple of 4 (can be done via limit get parameter) so it evenly pages?
There was a problem hiding this comment.
@sovsey What do you think?
| @@ -65,6 +66,7 @@ const DrawerContent: React.FC<{ | |||
| closeDrawer: () => void | |||
| }> = ({ resourceId, closeDrawer }) => { | |||
| const resource = useLearningResourcesDetail(Number(resourceId)) | |||
| // const similarResources = useSimilarLearningResources(Number(resourceId)) | |||
| @@ -80,6 +80,7 @@ const IconContainer = styled.span({ | |||
| [theme.breakpoints.down("sm")]: { | |||
| display: "none", | |||
| }, | |||
| zIndex: -1, | |||
There was a problem hiding this comment.
I added this due to an issue with some elements of the drawer ending up "on top" of the sticky header in the drawer when you scroll down. I changed the approach here and instead set zIndex: 1 on the header itself.
There was a problem hiding this comment.
Here's an example I captured on RC of the icons from InfoSection flowing over onto the header:
There was a problem hiding this comment.
I realize this seems somewhat unrelated, but now that the carousels will be in there scrolling will actually happen in the drawer and these issues made themselves apparent, so I'd like to get this fixed as part of adding the carousels.
There was a problem hiding this comment.
sounds good. just wanted to make sure it was something intentional and not left behind from previous testing.
…ces query and add to v2 drawer
… them below the header, raise the header itself
gumaerc
force-pushed
the
cg/v2-drawer-similar-resources-carousel
branch
from
eb9d233 to
e1d5119
Compare
gumaerc
added
Needs Review
* reconfigure API endpoints to not be paginated, support similar resources query and add to v2 drawer * style the carousel * retrieve not list * set anonymous read only permission on new endpoints * put the api endpoints back the way they were * fix js tests * make carousels optional * more styling work * flex grow the carousel section * add vector based similar learning resources carousel * use correct type * add tests * adjust carousel section mobile padding * instead of setting z index on other elements within the drawer to get them below the header, raise the header itself * remove stray comment
What are the relevant tickets?
Closes https://github.com/mitodl/hq/issues/5878
Description (What does it do?)
This PR adds two
ResourceCarousels to the new learning resource drawer based on the new "similar resources" APi endpoints. Both the opensearch and vector based results are displayed below the resource information.Screenshots (if appropriate):
How can this be tested?
lr_drawer_v2flagdrawerV2to betrueinLearningResourceDrawer.tsxmit-learndocker compose exec web python manage.py generate_embeddings --skip-contentfiles --recreate-collections --all