Improve polling on the home page to more accurately and quickly display information related to sync statuses

[marcellamaki]

Observed in connection with several different issues during the 0.16 sync session on Feb 14 2024

Observed behavior

• "Resources are missing or not supported" banner sometimes displays for "too long", meaning that it does not disappear on its own without a manual refresh (or navigation away from the page and back), which can be confusing for users. It also means that banner that displays a waiting to sync or actively syncing status is not necessarily refreshing and displaying in the way it was originally intended to, which was to provide feedback for these intermediary stages
• There is also no indication of which lessons or quizzes have missing resources - is it all? is it one?
• There is no indication of whether or not the missing resources are waiting for another sync

Desired behavior/Acceptance Criteria

• Fix polling on the home page (either this was lost entirely, inadvertently, or there is a bug somewhere, or, we need to adjust the frequency) - the goal is to ensure that the polling is frequent enough to provide meaningful updates to the user, without spamming the server unnecessarily. Once assigned, please suggest an approach in the issue comments for discussion before proceeding to implement.
• Add the "warning" icon (a yellow triangle with an "!" centered) to the lesson or quiz card that can be used to indicate a missing the resource, and use the KCircularLoader to indicate that a sync is happening. So, we want to: 1) fix the banner display, and 2) have a consistent display, aligned to the banner state, on the specific card or cards that shows if resources are missing or waiting to sync
• Learners should not be able to click into a lesson or quiz that has no available resources

1. Steps to reproduce

2. Set up two Kolibris - one as a Learn Only Device (LOD) and one as a full facility. The LOD should be set up to sync back the main facility
3. Assign some resources to the Learner
4. In order to cause a "failure" or missing resources, disconnecting the facility device and the LOD manually (stopping the facility server for instance) may be the best approach to reproduce
5. Observe the display of the missing resources
6. Restart and reconnect the devices to the shared LAN
7. Observe that the missing resource display does not disappear until page refresh

Context

0.16.x

[Technmad]

@marcellamaki Can i give it a shot

[AlexVelezLl]

Hi @Technmad! Sure, I'll assign this issue to you :). Thanks for your interest in contributing to Kolibri 👐

[Technmad]

@AlexVelezLl Thanks for opportunity, I'll start right away

[Janarthana2992]

can I work on this issue, as a GSOC 24' applicant? @AlexVelezLl

[AlexVelezLl]

Hi @Technmad! are you still working on this? If @Technmad is no longer working on this, we can assign it to you @Janarthana2992. 👐

[AlexVelezLl]

Hello, since @Technmad did not respond, I will assign this issue to you, @Janarthana2992. Thank you very much for volunteering. Let us know if you have any questions.

[rtibbles]

Unassigning as no updates in over 6 months.

[Jeevansm25]

This issue is still open?

[AlexVelezLl]

Hi @Jeevansm25! Yes, this issue is still open. I just assigned you another issue so lets wait for now before I assign you this. Once you have a PR for the other issue you can ping us to assign you this one 🤗.

[Jeevansm25]

Hi @Jeevansm25! Yes, this issue is still open. I just assigned you another issue so lets wait for now before I assign you this. Once you have a PR for the other issue you can ping us to assign you this one 🤗.

Thank you for assigning me the other issue 😊. I'll work on it and submit a PR soon. Once it's done, I'll reach out to you for this issue. Thanks again for your guidance and support! 🙌

[yashhash2]

@AlexVelezLl Can you assign this issue to me as @Jeevansm25 is already on other issue.

[AlexVelezLl]

Hi @yashhash2! For sure! I will assign this to you. Please let us know if you have any question :)

[MisRob]

Hi @yashhash2, I wanted to mention that Learning Equality will be closed from December 23 to January 5.

[yashhash2]

To address the issue of missing resources on lesson and quiz cards, the following approach is proposed:

showMissingResource Function: This function will check whether an individual lesson or quiz has a missing_resource flag. If the flag is present, the function will return true, indicating that the warning icon should be displayed for that specific card.

Polling for Missing Resources: A polling mechanism will be implemented to check for missing resources every 5 seconds. This polling behavior will update the missing_resource flag for each lesson and quiz, ensuring that the status of resources is regularly refreshed.

Conditional Rendering on Cards:

A yellow warning icon (⚠️) will be displayed in the top-right corner of the lesson or quiz card to indicate when resources are missing.
A circular loader (KCircularLoader) will appear at the center of the card when the resource is in the process of syncing.
Card Styling: Necessary styles will be applied to position the warning icon and loader correctly within the individual lesson or quiz cards, ensuring a visually consistent and clear display.

Disabling Card Interaction: If a resource is missing for a particular card, that card will be visually disabled by applying the pointer-events: none CSS style. This will prevent user interaction with the card until the resources are available.

This approach will ensure that users receive clear and timely feedback regarding missing or syncing resources on lesson and quiz cards. It will also provide a more intuitive user experience by disabling interaction with cards that lack resources. Let me know if you have any suggestions or feedback on this approach before proceeding with implementation.

[marcellamaki]

Hi @yashhash2 - overall this sounds like a good summary of the approach needed. Before you get started, I'd like to request that you investigate a little bit more the previous polling implementation on the home page and do some troubleshooting. Then, share a little bit about what you find here and we can decide together a bit more on the specifics of implementation.

You can use git history of the files that compose the home page to see if polling is still happening, if it's happening sometimes, or if it's not happening at all. There may be some commits after we implemented it the first time that broke it, or it may just be not polling frequently enough. Building this skill of investigating the underlying causes of bugs in a codebase is a very useful one, and this is a great opportunity to do so. Taking a little bit of extra time early will help you uncover the root cause of the issue and make the best decision about the approach moving forward.

After that, we can discuss further what decisions would need to be made for the frontend components, although it seems like you're on the right track. :)

Let me know if you have any questions!

[yashhash2]

Hi @marcellamaki,

I was reviewing the history of components related to the homepage and noticed a change made about a year ago under the commit titled "Rehydrate the home page when syncing has completed to refresh missing resources." This change may be contributing to the issue where the "Resources are missing or not supported" banner persists for too long without disappearing automatically.

Potential Cause

The change involved using get() from @vueuse/core within the isSyncing function instead of directly accessing .value. I believe this could be causing delays in reactivity updates. Here’s a breakdown of the potential issues:

Reactivity Problems with get()

• get(status) abstracts direct access to .value. If get() doesn’t respond properly to reactive changes, it may delay the update cycle.
• Vue's reactivity system is optimized for .value access with refs or computed properties. Abstraction with get() can sometimes cause unexpected reactivity delays.

Subtle Differences in Behavior

• get() may introduce additional evaluation steps, causing status or syncDownloadsInProgress to lag behind real-time changes. As a result, isSyncing could continue returning true even when the sync process is complete.

Watch Effectiveness

• The watch(isSyncing, (newVal, oldVal) => { ... }) function depends on isSyncing updating correctly. If get() causes delays, the syncComplete event may not be emitted promptly, leading to the banner persisting longer than expected.

Hypothesis

Using get() may unintentionally hinder reactivity, delaying the detection of sync completion and, consequently, the automatic dismissal of the banner. Reverting to direct .value access should improve reactivity and resolve the issue.

Suggested Change

Refactor isSyncing by replacing get() with direct .value access:

const isSyncing = computed(() => {
  return status.value === SyncStatus.QUEUED || 
         status.value === SyncStatus.SYNCING || 
         syncDownloadsInProgress.value;
});

Additional Note

Currently, I am unable to fully replicate the resource-missing issue during testing. Even after stopping the facility server, resources remain available at the LOD. However, when resources are hidden from learners, the banner does appear. If there are alternative approaches to consistently trigger the banner for testing, I would appreciate your insights.

Looking forward to your thoughts on this hypothesis.

Thank you,
Yash Kumar Singh