Transparent category colors and some related UI polish for the categorization page

[jarmoza]

1. The categories on the categorization page's category listbox are now always colored to indicate to the user which category corresponds with which color.
2. The currently selected category (for 'painting' the participants.tsv/data dictionary json table opposite the category listbox) is now fully opaque while the other categories are made to be half-transparent.
3. When created, the categorization page starts out as painting the first possible category (currently 'Subject ID').
4. Some change to the header and descriptive instruction text to reflect our terminology change to 'category'.

[surchs]

Thanks @jarmoza. Looks good. I did have one comment on the colors in the style section of the coloring-listgroup.vue component. Would be nice if we can have a single source for these. Otherwise good to go!

[surchs]

Looks like we are doing this via transparency now? Can we get rid of the default colors? And if so, update the enumeration in the comments

[jarmoza]

Yes, you're correct. And I had started working on that. But since the change would require some considerable working over and I wasn't sure if this would be our final change for category painting, I didn't want to go back and tackle that.

If you'd prefer, I can. But as it is right now since that information is stored as what determines the painted state of a row, it works as is regardless.

[surchs]

oh, I just meant the comments here. Agree, no good point in reworking the default colors here. Sorry for not being clear. So: since we now set the item to opaque and the old code is commented out, let's remove the old (commented out) code and update the II. enumeration in the comments

[jarmoza]

Done. Though since I'm reworking the color, I'm thinking I may as well rework the cue for 'coloring' (really making opaque) the list group item. Hopefully it will just take a little bit of time today.

[jarmoza]

@surchs Upon further inspection, the color cue makes sense. It is for the table that's being painted and not the list group with categories. I had mistakenly thought the stored paintingData was referencing the list group. So all good!

[surchs]

@jarmoza, did you mean to make new commits here? I cannot see any changes to the code since the last review.
e.g. II. -> I.

[surchs]

these guys are the same as recommendedCategories.backgroundColors in the categorization page. Can we find a way to only define the colors once and keep them in sync otherwise?

[jarmoza]

Yes, I'll be working on converting this today so pages and components read from a palette stored in a global css file for the app (stored in assets/css. This will only be helpful moving forward, so it's a good excuse to make this changeover.

[surchs]

Thanks @jarmoza, this looks good from my end.
I'd say we tackle #50 in a separate PR and close this one

[jarmoza]

A new implementation for retrieving the tool's color palette has been added to the categorization page. If we need this elsewhere, we can expand it to the store for other pages.

In essence, the colors are still being stored in the categorization page's data object, but are no longer hardcoded and are instead retrieved on page load (in the "mounted" hook) from the classes being used for the category listgroup items. This logically makes sense since these are the colors that the user will be 'painting' the table with on the right side of the page.

The older implementation from a recent commit in this PR solved this by manually parsing through the styleSheets list available in the global document object. Searching for the category-style- classes being used by the listgroup items, this code then parsed the string that contained the corresponding CSS stylings for each class.

This was necessary because the style had not yet been applied to the listgroup items on the page in a place that was accessible via the Vue lifecycle (even through a forced, immediate update of the page). Instead, it appears that CSS defined in an 'external' stylesheet (in the template or actually external) is applied by the browser at a later time. Thus, document.styleSheets was the only accessible means of getting the desired CSS values (the background and text colors).

However, there is another way that's much cleaner and built into JavaScript via the global window object. We can retrieve the "computed style" – presumably what the browser will later apply to the corresponding html elements. With window.getComputedStyle we can read the colors from the listgroup items, matching them together with the category-style- classes and then fill out the background and foreground color lists stored in JavaScript for later use in the Vue code.

One other thing to note (and it's mentioned in a comment in the "mounted" hook), both the window and document objects are not yet accessible in the "created" hook, and thus this palette retrieval and initial painting color assignment happens in "mounted."