Tracker for what needs to be put in the tutorial, as well as what it needs to support. Current plan: do in-line mini-tutorials first, and more elaborate tutorials later.
Inline Tutorial Pop-ups
Patrick suggested adding 🛈 buttons with a pop-up when you click it, adding "I never bother reading through a long tutorial page, I want my explanations right there where and when I need it!" - and I'm inclined to agree.
This would be either instead of the current tooltip explanation, or perhaps in addendum. It would give a more elaborate explanations of what each feature does. Bootstrap comes with a pop-over component that will work just for that purpose:
Given that we can use pure HTML inside the pop-over, it would even allow for the embedding of small images for clarity:
This should be where the direct explanations for how to use various settings should go.
Example: setting the X/Y attributes, what Log and Jitter are for, how to use gene selection component
Tutorial page
Writing a good tutorial page is really hard, if only because there's a lot that can be explained and it needs to be easy to find the relevant information. It might be easier to start with writing inline pop-overs first, which give direct explanations of specific elements (like x/y attributes on the scatterplot), and then from that distill a tutorial page with a "narrative" for how open certain types of plots.
Example: how to use the cell-scape view to create a "beeswarm"-like plot. This would require:
categorical colouring by cluster
X axis by cluster, with jitter
Y axis by whatever gene you want to use as a beeswarm, log-scaled with jitter
Other example: how to sort the sparklines:
index
basics
opening a dataset
navigate from view to view
different views, what they are for
how "dumb" our data format is (that is, how data-agnostic our usage attributes is) and how that puts both power/responsibility in the hands of the user?
"how to..."
use the various views
this needs to be split out into sub-tasks!
use the URL to save a current view for later, or share it.
...
Also: tag various tutorials with related keywords people might search for using CTRL+F.
Tracker for what needs to be put in the tutorial, as well as what it needs to support. Current plan: do in-line mini-tutorials first, and more elaborate tutorials later.
Inline Tutorial Pop-ups
Patrick suggested adding 🛈 buttons with a pop-up when you click it, adding "I never bother reading through a long tutorial page, I want my explanations right there where and when I need it!" - and I'm inclined to agree.
This would be either instead of the current tooltip explanation, or perhaps in addendum. It would give a more elaborate explanations of what each feature does. Bootstrap comes with a pop-over component that will work just for that purpose:
https://react-bootstrap.github.io/components.html#popovers
Given that we can use pure HTML inside the pop-over, it would even allow for the embedding of small images for clarity:
This should be where the direct explanations for how to use various settings should go.
Example: setting the X/Y attributes, what Log and Jitter are for, how to use gene selection component
Tutorial page
Writing a good tutorial page is really hard, if only because there's a lot that can be explained and it needs to be easy to find the relevant information. It might be easier to start with writing inline pop-overs first, which give direct explanations of specific elements (like x/y attributes on the scatterplot), and then from that distill a tutorial page with a "narrative" for how open certain types of plots.
Example: how to use the cell-scape view to create a "beeswarm"-like plot. This would require:
Other example: how to sort the sparklines:
Also: tag various tutorials with related keywords people might search for using CTRL+F.