Feat/CropProbability-Guided Tour

[FaithDaka]

Description

• Implementation of crop probability guided tour to include a tour with user interactions.
• A user will be able to start a tour and be guided along as they interact with the tool

Preview

• N/A

Tour Video

CP-Guided.Tour.-.Made.with.Clipchamp.mp4

[chrismclarke]

Thanks @FaithDaka
I spent quite a bit of time trying to test out the tour functionality and can see how there's actually a lot of challenges with intro.js

A few things in particular which you probably already noticed:

1. Intro.js evaulates all step elements at start, so breaks if using elements that are added to the dome later. I'm guessing that is why you had to create multiple separate tours to trigger at different times

2. Elements that use popups/modals are blocked from interaction (e.g. mat-select).

3. Tours don't work when triggered from inside some elements (e.g mat-tab element used when embedding tools on farmer activity pages)

4. Focusing large elements seems to get scroll positioning wrong (e.g. table element which can be larger than screen, guessing that's why you focused specific cells within the table)

5. Hard to track tour state as user interacts with elements

I'm going to work to see if I can find tidier solutions for these issues in #194, building on the work already done in this PR and so will just block this from merge until able to sort the rest

[FaithDaka]

Yes @chrismclarke
The library seems to be built for straight-forward usage and doesn't marry well in complex use-cases. I found a few work arounds but will be happy to see your approach as well.