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.

package.json

…mplement-recommendations-display # Conflicts: # contentcuration/contentcuration/frontend/RecommendedResourceCard/components/RecommendedResourceCard.vue # package.json # yarn.lock

MisRob · 2024-12-06T05:54:05Z

@akolson Chiming in to say so far so good! The way the card is implemented around KCard makes much sense. Thanks for reading the docs on a11y :) I can do more detailed review of card parts as soon as we finalize. Wouldn't expect anything major to come up.

…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

@@ -2,70 +2,92 @@

  <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?

marcellamaki · 2025-02-04T14:15:33Z

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

-    this.defaultMessages = defaultMessages;
+    this._nameSpace = nameSpace;
+    this._defaultMessages = defaultMessages;
+    for (const key in defaultMessages) {


Nice that this is now going to be in studio too! We've already made use of the same thing in Kolibri in the last few months since Richard added it :)

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.

marcellamaki · 2025-02-04T15:58:57Z

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

@@ -312,6 +312,11 @@
        const totalCount = this.recommendations.length + this.otherRecommendations.length;
        return displayCount < totalCount;
      },
+      browseWindowStyle() {
+        return {
+          width: this.isAIFeatureEnabled ? '1200px' : '800px',


I think I mentioned this somewhere else to, and I know this is sort of a pre-existing problem in studio, but just wanted to flag here as well and see if we want to have these larger hardcoded width values

I'll post in design and see if they have any thoughts. The design changes I think were based on how studio was structured.

marcellamaki · 2025-02-04T15:59:36Z

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

@@ -79,6 +72,9 @@
      },
    },
    computed: {
+      channelName() {
+        return this.node.channel?.name || '';


Would there ever not be a channel name?

Most likely not. If I can recall correctly, this change was in response to a bug I was experience while simulating the recommendations while using Studio's local app data. For some reason, some the the resources returned no channel names. I'll add a comment so this can be removed once the integration is complete.

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 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 bjester and MisRob 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

AlexVelezLl reviewed Nov 11, 2024

View reviewed changes

package.json Outdated Show resolved Hide resolved

updates kds version

7009c10

MisRob mentioned this pull request Nov 13, 2024

More flexible KCard click event handling learningequality/kolibri-design-system#825

Merged

8 tasks

akolson added 7 commits November 27, 2024 14:38

Adds pagination logic

30d397f

Refactors code

7e98efc

More code refators and logic fixes

e4e2eeb

code clean-up

4ce5884

adds ai flag check on UI and fetch

95a1b52

Merge remote-tracking branch 'upstream/search-recommendations' into i…

0cb9469

…mplement-recommendations-display # Conflicts: # contentcuration/contentcuration/frontend/RecommendedResourceCard/components/RecommendedResourceCard.vue # package.json # yarn.lock

minor UI fixes

9f8de26

MisRob mentioned this pull request Dec 5, 2024

Prepend KCard class names with k learningequality/kolibri-design-system#851

Merged

8 tasks

further UI improvements

596e109

akolson added 2 commits December 9, 2024 22:11

UI fixes

7574c06

additional UI fixes

c6e3a0c

akolson marked this pull request as ready for review December 10, 2024 15:22

akolson added 2 commits December 11, 2024 14:57

Updates kds to latest version

75df365

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement recommendations display #4803

Implement recommendations display #4803

akolson commented Nov 4, 2024 •

edited

Loading

MisRob commented Nov 6, 2024

MisRob commented Dec 6, 2024

marcellamaki left a comment

marcellamaki Feb 4, 2025

marcellamaki Feb 4, 2025

akolson Feb 7, 2025

marcellamaki Feb 4, 2025

akolson Feb 7, 2025

marcellamaki Feb 4, 2025

akolson Feb 7, 2025

marcellamaki Feb 4, 2025

akolson Feb 7, 2025

akolson Feb 7, 2025

Implement recommendations display #4803

Are you sure you want to change the base?

Implement recommendations display #4803

Conversation

akolson commented Nov 4, 2024 • edited Loading

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.

MisRob commented Nov 6, 2024

MisRob commented Dec 6, 2024

marcellamaki left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

akolson commented Nov 4, 2024 •

edited

Loading