similar resources carousel (#1835)

* 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

Author: gumaerc

frontends/api/src/generated/v1/api.ts

@@ -179,6 +179,26 @@ const updateListParents = (
   }
 }
 
+const useSimilarLearningResources = (
+  id: number,
+  opts: Pick<UseQueryOptions, "enabled"> = {},
+) => {
+  return useQuery({
+    ...learningResources.similar(id),
+    ...opts,
+  })
+}
+
+const useVectorSimilarLearningResources = (
+  id: number,
+  opts: Pick<UseQueryOptions, "enabled"> = {},
+) => {
+  return useQuery({
+    ...learningResources.vectorSimilar(id),
+    ...opts,
+  })
+}
+
 export {
   useLearningResourcesList,
   useFeaturedLearningResourcesList,
@@ -192,4 +212,6 @@ export {
   usePlatformsList,
   useSchoolsList,
   learningResources as learningResourcesKeyFactory,
+  useSimilarLearningResources,
+  useVectorSimilarLearningResources,
 }

frontends/api/src/hooks/learningResources/index.ts

@@ -107,6 +107,24 @@ const learningResources = createQueryKeys("learningResources", {
       queryFn: () => schoolsApi.schoolsList().then((res) => res.data),
     }
   },
+  similar: (id: number) => {
+    return {
+      queryKey: [`similar_resources-${id}`],
+      queryFn: () =>
+        learningResourcesApi
+          .learningResourcesSimilarList({ id })
+          .then((res) => res.data),
+    }
+  },
+  vectorSimilar: (id: number) => {
+    return {
+      queryKey: [`vector_similar_resources-${id}`],
+      queryFn: () =>
+        learningResourcesApi
+          .learningResourcesVectorSimilarList({ id })
+          .then((res) => res.data),
+    }
+  },
 })
 
 export default learningResources

frontends/api/src/hooks/learningResources/keyFactory.ts

@@ -79,6 +79,11 @@ const learningResources = {
     `${API_BASE_URL}/api/v1/learning_resources/${params.id}/`,
   featured: (params?: Params<FeaturedApi, "featuredList">) =>
     `${API_BASE_URL}/api/v1/featured/${query(params)}`,
+  similar: (params: Params<LRApi, "learningResourcesSimilarList">) =>
+    `${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/`,
   setLearningPathRelationships: (
     params?: Params<LRApi, "learningResourcesLearningPathsPartialUpdate">,
   ) =>

frontends/api/src/test-utils/urls.ts

@@ -48,6 +48,14 @@ describe("LearningResourceDrawerV2", () => {
         urls.learningResources.details({ id: resource.id }),
         resource,
       )
+      setMockResponse.get(
+        urls.learningResources.similar({ id: resource.id }),
+        [],
+      )
+      setMockResponse.get(
+        urls.learningResources.vectorSimilar({ id: resource.id }),
+        [],
+      )
 
       renderWithProviders(<LearningResourceDrawerV2 />, {
         url: `?dog=woof&${RESOURCE_DRAWER_QUERY_PARAM}=${resource.id}`,
@@ -108,6 +116,14 @@ describe("LearningResourceDrawerV2", () => {
         urls.learningResources.details({ id: resource.id }),
         resource,
       )
+      setMockResponse.get(
+        urls.learningResources.similar({ id: resource.id }),
+        [],
+      )
+      setMockResponse.get(
+        urls.learningResources.vectorSimilar({ id: resource.id }),
+        [],
+      )
       const user = factories.user.user({
         is_learning_path_editor: isLearningPathEditor,
       })
@@ -139,4 +155,46 @@ describe("LearningResourceDrawerV2", () => {
       ).toBe(expectAddToLearningPathButton)
     },
   )
+
+  it("Renders similar resource carousels", async () => {
+    const resource = factories.learningResources.resource({
+      resource_type: ResourceTypeEnum.Course,
+      runs: [
+        factories.learningResources.run({
+          languages: ["en-us", "es-es", "fr-fr"],
+        }),
+      ],
+    })
+    const count = 10
+    const similarResources = factories.learningResources.resources({
+      count,
+    }).results
+    const vectorSimilarResources = factories.learningResources.resources({
+      count,
+    }).results
+    setMockResponse.get(urls.userMe.get(), null, { code: 403 })
+    setMockResponse.get(
+      urls.learningResources.details({ id: resource.id }),
+      resource,
+    )
+    setMockResponse.get(
+      urls.learningResources.similar({ id: resource.id }),
+      similarResources,
+    )
+    setMockResponse.get(
+      urls.learningResources.vectorSimilar({ id: resource.id }),
+      vectorSimilarResources,
+    )
+    renderWithProviders(<LearningResourceDrawerV2 />, {
+      url: `?resource=${resource.id}`,
+    })
+    await screen.findByText("Similar Learning Resources")
+    for (const similarResource of similarResources) {
+      await screen.findByText(similarResource.title)
+    }
+    await screen.findByText("Similar Learning Resources (Vector Based)")
+    for (const vectorSimilarResource of vectorSimilarResources) {
+      await screen.findByText(vectorSimilarResource.title)
+    }
+  })
 })

frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawerV2.test.tsx

@@ -19,6 +19,7 @@ import {
 } from "../Dialogs/AddToListDialog"
 import { SignupPopover } from "../SignupPopover/SignupPopover"
 import { usePostHog } from "posthog-js/react"
+import ResourceCarousel from "../ResourceCarousel/ResourceCarousel"
 
 const RESOURCE_DRAWER_PARAMS = [RESOURCE_DRAWER_QUERY_PARAM] as const
 
@@ -87,12 +88,47 @@ const DrawerContent: React.FC<{
       }
     }, [user])
   useCapturePageView(Number(resourceId))
+  const similarResourcesCarousel = (
+    <ResourceCarousel
+      titleComponent="p"
+      titleVariant="subtitle1"
+      title="Similar Learning Resources"
+      config={[
+        {
+          label: "Similar Learning Resources",
+          cardProps: { size: "small" },
+          data: {
+            type: "lr_similar",
+            params: { id: resourceId },
+          },
+        },
+      ]}
+    />
+  )
+  const vectorSimilarResourcesCarousel = (
+    <ResourceCarousel
+      titleComponent="p"
+      titleVariant="subtitle1"
+      title="Similar Learning Resources (Vector Based)"
+      config={[
+        {
+          label: "Similar Learning Resources (Vector Based)",
+          cardProps: { size: "small" },
+          data: {
+            type: "lr_vector_similar",
+            params: { id: resourceId },
+          },
+        },
+      ]}
+    />
+  )
 
   return (
     <>
       <LearningResourceExpandedV2
         imgConfig={imgConfigs.large}
         resource={resource.data}
+        carousels={[similarResourcesCarousel, vectorSimilarResourcesCarousel]}
         user={user}
         onAddToLearningPathClick={handleAddToLearningPathClick}
         onAddToUserListClick={handleAddToUserListClick}

frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawerV2.tsx

@@ -101,17 +101,32 @@ type ContentProps = {
 
 type PanelChildrenProps = {
   config: TabConfig[]
-  queries: UseQueryResult<PaginatedLearningResourceList, unknown>[]
+  queries: UseQueryResult<
+    PaginatedLearningResourceList | LearningResource[],
+    unknown
+  >[]
   children: (props: ContentProps) => React.ReactNode
 }
 const PanelChildren: React.FC<PanelChildrenProps> = ({
   config,
   queries,
   children,
 }) => {
+  const getResults = (
+    data: PaginatedLearningResourceList | LearningResource[] | undefined,
+  ): LearningResource[] => {
+    if (!data) {
+      return []
+    }
+    if ("results" in data) {
+      return data.results
+    }
+    return data
+  }
+
   if (config.length === 1) {
     const { data, isLoading } = queries[0]
-    const resources = data?.results ?? []
+    const resources = getResults(data)
 
     return children({
       resources,
@@ -123,7 +138,7 @@ const PanelChildren: React.FC<PanelChildrenProps> = ({
     <>
       {config.map((tabConfig, index) => {
         const { data, isLoading } = queries[index]
-        const resources = data?.results ?? []
+        const resources = getResults(data)
 
         return (
           <StyledTabPanel key={index} value={index.toString()}>
@@ -160,7 +175,8 @@ type ResourceCarouselProps = {
   /**
    * Element type for the carousel title
    */
-  titleComponent: React.ElementType
+  titleComponent?: React.ElementType
+  titleVariant?: TypographyProps["variant"]
 }
 /**
  * A tabbed carousel that fetches resources based on the configuration provided.
@@ -179,7 +195,8 @@ const ResourceCarousel: React.FC<ResourceCarouselProps> = ({
   className,
   isLoading,
   "data-testid": dataTestId,
-  titleComponent,
+  titleComponent = "h4",
+  titleVariant = "h4",
 }) => {
   const [tab, setTab] = React.useState("0")
   const [ref, setRef] = React.useState<HTMLDivElement | null>(null)
@@ -189,7 +206,7 @@ const ResourceCarousel: React.FC<ResourceCarouselProps> = ({
       (
         tab,
       ): UseQueryOptions<
-        PaginatedLearningResourceList,
+        PaginatedLearningResourceList | LearningResource[],
         unknown,
         unknown,
         // The factory-generated types for queryKeys are very specific (tuples not arrays)
@@ -205,13 +222,29 @@ const ResourceCarousel: React.FC<ResourceCarouselProps> = ({
             return learningResourcesKeyFactory.search(tab.data.params)
           case "lr_featured":
             return learningResourcesKeyFactory.featured(tab.data.params)
+          case "lr_similar":
+            return learningResourcesKeyFactory.similar(tab.data.params.id)
+          case "lr_vector_similar":
+            return learningResourcesKeyFactory.vectorSimilar(tab.data.params.id)
         }
       },
     ),
   })
 
+  const getCount = (
+    data: PaginatedLearningResourceList | LearningResource[] | undefined,
+  ) => {
+    if (!data) {
+      return 0
+    }
+    if ("count" in data) {
+      return data.count
+    }
+    return data.length
+  }
+
   const allChildrenLoaded = queries.every(({ isLoading }) => !isLoading)
-  const allChildrenEmpty = queries.every(({ data }) => !data?.count)
+  const allChildrenEmpty = queries.every(({ data }) => !getCount(data))
   if (!isLoading && allChildrenLoaded && allChildrenEmpty) {
     return null
   }
@@ -223,7 +256,7 @@ const ResourceCarousel: React.FC<ResourceCarouselProps> = ({
     <MobileOverflow className={className} data-testid={dataTestId}>
       <TabContext value={tab}>
         <HeaderRow>
-          <HeaderText component={titleComponent} variant="h4">
+          <HeaderText component={titleComponent} variant={titleVariant}>
             {title}
           </HeaderText>
           {config.length === 1 ? buttonsContainerElement : null}
@@ -237,7 +270,7 @@ const ResourceCarousel: React.FC<ResourceCarouselProps> = ({
                   if (
                     !isLoading &&
                     !queries[index].isLoading &&
-                    !queries[index].data?.count
+                    !getCount(queries[index].data)
                   ) {
                     return null
                   }
@@ -256,7 +289,11 @@ const ResourceCarousel: React.FC<ResourceCarouselProps> = ({
         </HeaderRow>
         <PanelChildren
           config={config}
-          queries={queries as UseQueryResult<PaginatedLearningResourceList>[]}
+          queries={
+            queries as UseQueryResult<
+              PaginatedLearningResourceList | LearningResource[]
+            >[]
+          }
         >
           {({ resources, childrenLoading, tabConfig }) => (
             <StyledCarousel arrowsContainer={ref}>

frontends/main/src/page-components/ResourceCarousel/ResourceCarousel.tsx

@@ -2,6 +2,8 @@ import type {
   LearningResourcesApiLearningResourcesListRequest as LRListRequest,
   LearningResourcesSearchApiLearningResourcesSearchRetrieveRequest as SearchRequest,
   FeaturedApiFeaturedListRequest as FeaturedListParams,
+  LearningResourcesApiLearningResourcesSimilarListRequest as SimilarListParams,
+  LearningResourcesApiLearningResourcesVectorSimilarListRequest as VectorSimilarListParams,
 } from "api"
 import type { LearningResourceCardProps } from "ol-components"
 
@@ -20,7 +22,22 @@ interface FeaturedDataSource {
   params: FeaturedListParams
 }
 
-type DataSource = ResourceDataSource | SearchDataSource | FeaturedDataSource
+interface SimilarDataSource {
+  type: "lr_similar"
+  params: SimilarListParams
+}
+
+interface VectorSimilarDataSource {
+  type: "lr_vector_similar"
+  params: VectorSimilarListParams
+}
+
+type DataSource =
+  | ResourceDataSource
+  | SearchDataSource
+  | FeaturedDataSource
+  | SimilarDataSource
+  | VectorSimilarDataSource
 
 type TabConfig<D extends DataSource = DataSource> = {
   label: React.ReactNode