feat: in-app tutorials for common workflows

[allison-truhlar]

Clickup id: 86aecb6g2

This PR adds three tutorials, one for each of the workflows documented in the user docs, utilizing shepherd.js and react-shepherd. The tutorials can be accessed from a card on the /browse dashboard (under the navigation input and above the other two dashboard cards) and /help. The card on /browse can be dismissed via a checkbox that toggles a new showTutorial preference, added in this PR. The preference page is also updated to have this checkbox, as well as new subheadings to help organize the list of preferences.

Notes:

• The tutorials navigate to different example locations if run in a UI that has access to Janelia file share paths (determined by looking for nrs, prfs, and nearline abbreviations in the zones and file share paths map) vs a non-Janelia file system. For example, in the "Data Links" tutorial run with access to the Janelia file system, the tutorial navigates to an example Zarr folder in /nrs/opendata. This same tutorial run locally navigates to the first file share path and has a more general description about how data links can be made for any folder, including Zarr folders.
• The "Tasks" tutorial is hidden if VITE_ENABLE_TASKS=False

@krokicki @neomorphic

[neomorphic]

@allison-truhlar Is it possible to add a little padding to the highlighted sections of the tutorial. It feels a little squashed. Also, it is possible to add some space between the tutorial box and the component that is being described. It was hard to tell that there is an arrow pointing into the page component from the tutorial box. See the red arrows in the attached image for examples.

[neomorphic]

Looks good to me. I ran through each of the tours and they all worked. At one point I was able to get into a state where two tours were running at the same time, but I have not been able to replicate that.

[allison-truhlar]

@allison-truhlar Is it possible to add a little padding to the highlighted sections of the tutorial. It feels a little squashed. Also, it is possible to add some space between the tutorial box and the component that is being described. It was hard to tell that there is an arrow pointing into the page component from the tutorial box. See the red arrows in the attached image for examples.

I added some padding to the overlay opening, but it was still hard to see the arrow. So, borrowing from the Shepherd.js docs demo, I put in a red arrow SVG to make the arrow more visible. See screenshot below:

[neomorphic]

@allison-truhlar How do you feel about changing the arrow color to match the buttons, or use purple? Just to keep it within the same color palette as the rest of the site?

[allison-truhlar]

@neomorphic I changed the arrow to purple. The red was in the color palette, but it's the error color, so I can see it looks out of place in the tour, where there's no other red.