Implement recommendations display #4803

akolson · 2024-11-04T05:28:00Z

Summary

Description of the change(s) you made

This pr Implements the following

UI changes required for search recommendations to be made in the "Import from other channels
" page. See reference for details.
Pagination to allow for the loading of resources depending on whether good recommendations exist or not.
Loading states and error reporting for the search recommendations UI.
Adds the search recommendations string feature file for easier use and maintenance of strings in light of string translation.
Conditionalizes the search recommendations display using the ai enabled flag.

Manual verification steps performed

Select a channel
Click the "Add" button and select "Import from channels"
View changes to the UI and responsiveness.
Use the pagination to view more resources, observing the loading states in the process
Login with a user whose ai feature flag is turned off; they should not be able to view the recommendations side panel. Also, no recommendations related content should be loaded in the network tab on inspection.
Clicking the "About Recommendations" link, should display the about modal with information about recommendations

Screenshots (if applicable)

Good recommendations

Pagination - View more good recommendation

Pagination - Other (not so good) recommendations

Pagination - No good recommendations

Loading state

About recommendations

AI feature flag off

Are there any risky areas that deserve extra testing?

References

Closes #4565
Closes #4566
Closes #4683
Closes #4775

Comments

The KCard component is generally in a good place, however there could be few issues that could pop up here and there. For the latest changes you can yarn link the KDS develop branch or use the latest release on npm, if up-to-date with develop

Contributor's Checklist

PR process:

If this is an important user-facing change, PR or related issue the CHANGELOG label been added to this PR. Note: items with this label will be added to the CHANGELOG at a later time
If this includes an internal dependency change, a link to the diff is provided
The docs label has been added if this introduces a change that needs to be updated in the user docs?
If any Python requirements have changed, the updated requirements.txt files also included in this PR
Opportunities for using Google Analytics here are noted
Migrations are safe for a large db

Studio-specifc:

All user-facing strings are translated properly
The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. icons, user-generated text)
All UI components are LTR and RTL compliant
Views are organized into pages, components, and layouts directories as described in the docs
Users' storage used is recalculated properly on any changes to main tree files
If there new ways this uses user data that needs to be factored into our Privacy Policy, it has been noted.

Testing:

Code is clean and well-commented
Contributor has fully tested the PR manually
If there are any front-end changes, before/after screenshots are included
Critical user journeys are covered by Gherkin stories
Any new interactions have been added to the QA Sheet
Critical and brittle code paths are covered by unit tests

Reviewer's Checklist

This section is for reviewers to fill out.

Automated test coverage is satisfactory
PR is fully functional
PR has been tested for accessibility regressions
External dependency files were updated if necessary (yarn and pip)
Documentation is updated
Contributor is in AUTHORS.md

…ings

…endations-display

…display

…ch-recs

…display

MisRob · 2024-11-06T06:24:27Z

Tagging @MisRob here for any thoughts on the implementation of the KCard component and how it can be improved. Noting here I have also shared feedback with Misha on my KCard usage experience.

Thanks @akolson! I will prioritize reviewing parts related to cards in this PR and follow-up on your Slack feedback on that opportunity.

…display

marcellamaki

Added a few questions/comments! I still want to do some manual testing but overall looking very good so far @akolson :)

marcellamaki · 2025-02-04T14:13:30Z

...ation/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue

  <ImportFromChannelsModal>
    <template #default="{ preview }">
-      <VSheet>
+      <div style="width: 1400px;">


I know we are not super concerned with mobile responsiveness/optimization on studio, but I'm wondering if this needs to be somewhat more dynamically sized?

contentcuration/contentcuration/frontend/shared/i18n/index.js

marcellamaki · 2025-02-04T14:39:20Z

...ation/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue

-                :headingLevel="2"
+                :node="recommendation"
+                :selected.sync="selected"
+                @change_selected="handleChangeSelected"


I am not super familiar with using .sync so this may just be my own misunderstanding but I'm wondering why we have both a change selection event and a selection prop binding? are they doing different things? I'm also not clear on where handleChangeSelected is coming from

The RecommendedResourceCard reuses existing functionality (the selected vuex state and handleChangeSelected handler) used by the main panel to allow for resource imports, as they do pretty much the same thing.

The selected state keeps track of what has been selected and deselected.

The handleChangeSelected handler updates the selected state.

The handleChangeSelected receives an isSelected callback from the clicked checkbox in the recommended resource card and passes back with the associated node selected or deselected

The selected prop is only passed for use in the isSelected callback whichI think we can directly declare in the recommended resources card to remove the ambiguity.

...ation/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue

...tion/contentcuration/frontend/RecommendedResourceCard/components/RecommendedResourceCard.vue

akolson · 2025-02-07T18:37:53Z

contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/sampleData.js

Noting that this is only for illustration purposes on the frontend and will be removed once the integration with the recommendations API is in place

akolson · 2025-02-10T16:59:26Z

Added a few questions/comments! I still want to do some manual testing but overall looking very good so far @akolson :)

Hi @marcellamaki! Thanks for the review. I was able to work my way around the comments and have mades some tweaks. Happy to hear anymore thoughts, comments or suggestions. Thanks

bjester

I'm confused where the backend API went and why it isn't connected here? The backend is what provides the recommendations, and so even without the API connected to the backend, I feel the backend should still be connected in this PR, unless we have another issue? I recall reviewing a PR for it, but I can't find it

...ation/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue

...tion/contentcuration/frontend/RecommendedResourceCard/components/RecommendedResourceCard.vue

...ation/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue

bjester

Leaving some thoughts

contentcuration/contentcuration/dev_settings.py

...ation/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue

bjester · 2025-04-02T14:56:39Z

contentcuration/automation/models.py

+        on_delete=models.CASCADE,
+    )
+    channel = models.ForeignKey(
+        Channel,


Since contentnode is associated with kolibri_public.models.ContentNode, I think it would make sense if this was also in alignment with kolibri_public. Although, I think as its written this seems best suited to be able to return the main_tree_id. Just more of a reflection and not a requested change.

...ation/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue

contentcuration/contentcuration/viewsets/recommendation.py

...ation/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue

bjester · 2025-04-02T17:25:57Z

...ation/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue

+              id: recommendation.id,
+              nodeId: recommendation.node_id,
+              rootId: recommendation.main_tree_id,
+              parent: recommendation.parent_id,


Where are we providing the these fields?

bjester · 2025-04-02T17:26:10Z

...ation/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue

+              rootId: recommendation.main_tree_id,
+              parent: recommendation.parent_id,
+            });
+            const channel = await this.loadChannel(node.channel_id);


We might want to dedupe this.

bjester

Tested and approved!

akolson added 24 commits August 29, 2024 16:44

Adds translator object + strings for search recs feature

23e49e6

change SearchOrBrowserWindow from Vuetify to KDS components

3e85347

add about recommendations link

fe76812

Update Translator object to expose a destructurable interface for str…

1b5fe71

…ings

Merge branch 'search-recs-strings-feature-file' into implement-recomm…

13c7d15

…endations-display

adds recommendations title

f51e08f

updates strings

eeb8537

Merge branch 'search-recs-strings-feature-file' into implement-recomm…

003d109

…endations-display

Adds about recommendations modal

a43dcbb

updates strings

675cdae

Merge branch 'search-recs-strings-feature-file' into implement-recomm…

c56f907

…endations-display

Adds reponsiveness to page

3532e75

Adds sample data request

c8f8db9

Merge branch 'merge-into-search-recs' into implement-recommendations-…

fa81206

…display

Add latest KDS rc4 as dependency

3a74adc

Adds KCard

835e78c

Merge branch 'search-recommendations' into implement-recommendations-…

b80aedb

…display

Adds KCardGrid

e3f0cba

Adds preliminary logic to load recommendations

93b8ef3

Merge remote-tracking branch 'upstream/unstable' into merge-into-sear…

078638c

…ch-recs

Merge branch 'merge-into-search-recs' into implement-recommendations-…

4f1f84e

…display

Merge branch 'merge-into-search-recs' into implement-recommendations-…

1d000da

…display

fixes bug in translateMetadataString

8e200d5

Make minor tweaks to UI

dc29890

akolson added this to the Studio Project: Search Recommendations milestone Nov 4, 2024

akolson requested review from MisRob and bjester November 4, 2024 05:28

bjester self-assigned this Nov 5, 2024

MisRob mentioned this pull request Nov 11, 2024

Fix KCard area not taking available width learningequality/kolibri-design-system#820

Merged

8 tasks

Merge branch 'search-recommendations' into implement-recommendations-…

48cda0d

…display

marcellamaki reviewed Feb 4, 2025

View reviewed changes

akolson commented Feb 7, 2025

View reviewed changes

akolson added 2 commits February 7, 2025 22:08

Add todo to relax an unlikely situation where channel names will be null

47725f3

Removes ambiguous selected proo from recommended resource card

6b85c8d

akolson requested a review from rtibbles March 4, 2025 18:52

bjester requested changes Mar 10, 2025

View reviewed changes

akolson added 9 commits March 18, 2025 15:16

makes adjustments to for latest CA API changes

2126cd6

adds /recommendations endpoint

d3633e0

Adds new envar to hold recommendation api url

067938a

Adds new envar to hold recommendation api url

6a971e4

Updates recommendations cache to store topic and channel ids

7e868da

Bumbs KDS to v5.0.0-r10

0ebbf32

api connection code tweaks

3f7a9aa

Fixes failing tests

0dc1220

Updates /connect endpoint to use new response

e443f49

bjester reviewed Apr 2, 2025

View reviewed changes

akolson added 2 commits April 8, 2025 14:02

Implements review feedback

39568ad

Fixes failing tests

8a16b55

akolson requested a review from bjester April 8, 2025 15:06

Remove redundant loadChannel from node

43482a6

bjester approved these changes Apr 9, 2025

View reviewed changes

bjester merged commit a5e978a into learningequality:search-recommendations Apr 9, 2025
14 of 15 checks passed

Uh oh!

Implement recommendations display #4803

Implement recommendations display #4803

Uh oh!

Conversation

akolson commented Nov 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Description of the change(s) you made

Manual verification steps performed

Screenshots (if applicable)

Are there any risky areas that deserve extra testing?

References

Comments

Contributor's Checklist

Reviewer's Checklist

This section is for reviewers to fill out.

Uh oh!

MisRob commented Nov 6, 2024

Uh oh!

marcellamaki left a comment

Choose a reason for hiding this comment

Uh oh!

marcellamaki Feb 4, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

marcellamaki Feb 4, 2025

Choose a reason for hiding this comment

Uh oh!

akolson Feb 7, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

akolson Feb 7, 2025

Choose a reason for hiding this comment

Uh oh!

akolson commented Feb 10, 2025

Uh oh!

bjester left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bjester left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

bjester Apr 2, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bjester Apr 2, 2025

Choose a reason for hiding this comment

Uh oh!

bjester Apr 2, 2025

Choose a reason for hiding this comment

Uh oh!

bjester left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

akolson commented Nov 4, 2024 •

edited

Loading